/*
 * Selenya da Aurora · sistema visual "Filhas" (homepage nova + quiz)
 * Escopo: classes com prefixo .f- e variáveis --f-*, para não colidir com inc/estilo.css.
 * Paleta oficial: verde-floresta #183A2E, ouro envelhecido #A8843C, pérola #F7F1ED, prata #8D9197, preto fosco.
 */

/* Fontes hospedadas no próprio site (sem requisição ao Google; mesma identidade tipográfica). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/cormorant-garamond-normal-300.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 500;font-display:swap;src:url("../fonts/cormorant-garamond-italic-400.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/eb-garamond-normal-400.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/eb-garamond-italic-400.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/cinzel-normal-400.woff2") format("woff2")}

:root{
  --f-floresta:#183A2E;
  --f-floresta-fundo:#10271F;       /* floresta mais profunda, para superfícies de fundo */
  --f-floresta-2:#21493A;
  --f-ouro:#A8843C;                 /* ouro oficial: filetes, ornamentos, texto grande */
  --f-ouro-claro:#D0B684;           /* ouro para texto pequeno sobre floresta (6,3:1) */
  --f-perola:#F7F1ED;
  --f-perola-2:#EDE4DC;
  --f-prata:#8D9197;                /* prata: só elementos lunares */
  --f-prata-claro:#C9CDD3;
  --f-preto:#141513;                /* preto fosco */
  --f-tinta:#1D2B24;                /* texto sobre pérola (14:1) */
  --f-tinta-suave:#4B574F;          /* texto secundário sobre pérola (7:1) */

  --f-display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --f-corpo:"EB Garamond","Iowan Old Style",Georgia,serif;
  --f-nome:"Cinzel","Trajan Pro",Georgia,serif;

  --f-medida:68ch;
  --f-gutter:clamp(1rem,4vw,2.5rem);
  --f-secao:clamp(4rem,9vw,8rem);
  --f-ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* o atributo hidden sempre esconde, mesmo em elementos com display próprio (grid, flex) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.f{margin:0;background:var(--f-perola);color:var(--f-tinta);font-family:var(--f-corpo);font-size:clamp(1.125rem,1.05rem + .35vw,1.3rem);line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.f img{max-width:100%;height:auto;display:block}
:where(.f) a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
.f ::selection{background:var(--f-ouro);color:var(--f-floresta-fundo)}
.f :focus-visible{outline:2px solid var(--f-ouro);outline-offset:3px;border-radius:2px}
.f-escura :focus-visible{outline-color:var(--f-ouro-claro)}
.f-pular{position:absolute;left:1rem;top:-4rem;background:var(--f-perola);color:var(--f-floresta);padding:.7rem 1rem;z-index:100;transition:top .2s}
.f-pular:focus{top:1rem}

/* scrollbar temada */
html{scrollbar-color:var(--f-ouro) var(--f-floresta-fundo)}

/* ---------- tipografia ---------- */
:where(.f) :is(h1,h2,h3){font-family:var(--f-display);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
:where(.f) h1{font-size:clamp(2.6rem,1.6rem + 5vw,5.4rem)}
:where(.f) h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.9rem)}
:where(.f) h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
:where(.f) :is(em,i){font-style:italic}
:where(.f) p{margin:0 0 1em;max-width:var(--f-medida);text-wrap:pretty}
.f-nome{font-family:var(--f-nome);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.f-miudo{font-size:.9em;color:var(--f-tinta-suave)}
.f-escura{background:var(--f-floresta);color:var(--f-perola)}
.f-escura .f-miudo{color:var(--f-prata-claro)}
:where(.f-escura) a{color:var(--f-ouro-claro)} /* especificidade zero: classes de componente (.f-btn-*) sempre vencem */

.f-wrap{width:min(100% - 2*var(--f-gutter),76rem);margin-inline:auto}
.f-secao{padding-block:var(--f-secao)}

/* ---------- botões ---------- */
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.1rem;padding:.8rem 1.7rem;border:1px solid transparent;border-radius:2px;background:transparent;font-family:var(--f-nome);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s var(--f-ease),color .25s var(--f-ease),border-color .25s var(--f-ease),transform .25s var(--f-ease)}
.f-btn:active{transform:translateY(1px)}
.f-btn-claro{background:var(--f-perola);color:var(--f-floresta)}
.f-btn-claro:hover{background:#fff}
.f-btn-borda{border-color:var(--f-ouro-claro);color:var(--f-perola)}
.f-btn-borda:hover{background:rgba(208,182,132,.14)}
.f-btn-escuro{background:var(--f-floresta);color:var(--f-perola)}
.f-btn-escuro:hover{background:var(--f-floresta-2)}
.f-btn-contorno{border-color:var(--f-floresta);color:var(--f-floresta)}
.f-btn-contorno:hover{background:rgba(24,58,46,.07)}
.f-btn[disabled],.f-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.f-escura .f-btn-escuro{background:var(--f-ouro-claro);color:var(--f-floresta-fundo)}
/* links com cara de botão não herdam o dourado de .f-escura a */
.f-escura a.f-btn-claro{color:var(--f-floresta)}
.f-escura a.f-btn-borda{color:var(--f-perola)}
/* foco programático em títulos (gestão de foco entre telas) não precisa de anel: não são controles */
.f [data-foco]:focus,.f [data-foco]:focus-visible{outline:none}
.f-link{font-family:var(--f-nome);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15em}

/* ---------- navegação ---------- */
.f-nav{position:sticky;top:0;z-index:50;background:rgba(16,39,31,.94);color:var(--f-perola);border-bottom:1px solid rgba(208,182,132,.22)}
@supports (backdrop-filter:blur(8px)){.f-nav{background:rgba(16,39,31,.86);backdrop-filter:blur(10px)}}
.f-nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem}
.f-marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--f-perola)}
.f-marca svg{width:2rem;height:2rem;flex:none}
.f-marca-txt{display:flex;flex-direction:column;line-height:1.05}
.f-marca-txt b{font-family:var(--f-nome);font-weight:500;letter-spacing:.3em;font-size:.95rem}
.f-marca-txt span{font-family:var(--f-display);font-style:italic;font-size:.9rem;letter-spacing:.12em;color:var(--f-ouro-claro)}
.f-menu{display:none;gap:1.6rem;list-style:none;margin:0;padding:0}
.f-menu a{font-family:var(--f-nome);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--f-perola);padding:.5rem 0;border-bottom:1px solid transparent}
.f-menu a:hover,.f-menu a[aria-current="page"]{border-bottom-color:var(--f-ouro-claro)}
.f-toggle{background:none;border:1px solid rgba(208,182,132,.5);color:var(--f-perola);min-width:3rem;min-height:3rem;border-radius:2px;display:grid;place-items:center;cursor:pointer}
.f-toggle svg{width:1.4rem;height:1.4rem}
.f-gaveta{display:none;padding:0 0 1.2rem}
.f-gaveta[data-aberta="true"]{display:block}
.f-gaveta ul{list-style:none;margin:0;padding:0}
.f-gaveta a{display:block;padding:.95rem 0;border-top:1px solid rgba(208,182,132,.18);font-family:var(--f-nome);font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--f-perola)}
@media (min-width:62rem){.f-menu{display:flex}.f-toggle,.f-gaveta{display:none!important}}

/* ---------- rodapé ---------- */
.f-rodape{background:var(--f-floresta-fundo);color:var(--f-perola);padding-block:clamp(3rem,6vw,5rem) 2rem}
.f-rodape-grade{display:grid;gap:2.5rem}
@media (min-width:52rem){.f-rodape-grade{grid-template-columns:1.4fr 1fr 1fr}}
.f-rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.f-rodape a{text-decoration:none;padding:.35rem 0;display:inline-block}
.f-rodape a:hover{text-decoration:underline}
.f-rodape h2{font-family:var(--f-nome);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--f-ouro-claro);margin-bottom:.9rem}
.f-rodape-fim{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(208,182,132,.2);font-size:.9rem;color:var(--f-prata-claro)}
.f-rodape .f-rodape-cred{margin-top:.8rem;padding-top:0;border-top:0}

/* ---------- ornamento botânico (SVG desenhado, traço fino) ---------- */
.f-orn{display:block;width:min(15rem,60%);height:auto;color:var(--f-ouro)}
.f-escura .f-orn{color:var(--f-ouro-claro)}

/* ---------- movimento: um momento autoral, opcional ---------- */
.f-revela{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .f-js .f-revela{opacity:0;transform:translateY(18px);transition:opacity .9s var(--f-ease),transform .9s var(--f-ease)}
  .f-js .f-revela.f-vista{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}