/* Homepage nova · depende de filhas.css */

/* ---------- 1. primeira dobra ---------- */
.h-hero{position:relative;isolation:isolate;min-height:min(92svh,56rem);display:flex;align-items:flex-end}
.h-hero-img{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--f-floresta-fundo)}
.h-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* o véu garante o contraste do texto sobre a fotografia */
.h-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,39,31,.97) 0%,rgba(16,39,31,.86) 34%,rgba(16,39,31,.35) 68%,rgba(16,39,31,.12) 100%)}
@media (min-width:60rem){.h-hero::before{background:linear-gradient(to right,rgba(16,39,31,.95) 0%,rgba(16,39,31,.82) 34%,rgba(16,39,31,.12) 72%)}.h-hero{align-items:center}}
.h-hero-in{padding-block:clamp(3rem,9vw,7rem);max-width:39rem}
.h-hero h1{margin-bottom:1.3rem}
.h-hero-sub{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);color:var(--f-perola);margin-bottom:2rem}
.h-ctas{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- 2. as quatro Filhas ---------- */
.h-filhas{background:var(--f-perola)}
.h-cab{max-width:46rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.h-cab h2{color:var(--f-floresta);margin-bottom:1rem}
.h-lista{display:grid;gap:2.6rem 1.4rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:34rem){.h-lista{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){
  .h-lista{grid-template-columns:repeat(4,1fr);gap:1.6rem;align-items:start}
  .h-filha:nth-child(2){margin-top:3.5rem}
  .h-filha:nth-child(3){margin-top:1.2rem}
  .h-filha:nth-child(4){margin-top:4.6rem}
}
.h-filha figure{margin:0 0 1rem;overflow:hidden;background:var(--f-perola-2)}
.h-filha img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--f-ease)}
@media (hover:hover){.h-filha:hover img{transform:scale(1.035)}}
.h-filha h3{font-family:var(--f-nome);font-weight:500;font-size:1.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f-floresta);margin:0 0 .15rem}
.h-epiteto{font-family:var(--f-display);font-style:italic;font-size:1.4rem;color:var(--f-tinta-suave);margin:0 0 .7rem}
.h-trecho{font-size:1.02rem;line-height:1.5;margin-bottom:.8rem}
.h-meta{font-size:.9rem;color:var(--f-tinta-suave);margin-bottom:.9rem}
.h-nota{margin-top:2.4rem;font-size:.95rem;color:var(--f-tinta-suave);max-width:46rem}

/* ---------- 3. universo ---------- */
.h-universo{background:var(--f-perola-2)}
.h-universo-grade{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (min-width:60rem){.h-universo-grade{grid-template-columns:1.1fr .9fr}}
.h-universo h2{color:var(--f-floresta);margin-bottom:1.4rem}
.h-universo .h-grande{font-family:var(--f-display);font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);line-height:1.3;color:var(--f-floresta)}
.h-universo figure{margin:0}
.h-universo figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.h-universo figcaption{font-size:.9rem;color:var(--f-tinta-suave);margin-top:.6rem}
.h-leitura{margin:2rem 0 0;padding:0;display:grid;gap:0}
.h-leitura div{padding:.9rem 0;border-top:1px solid rgba(168,132,60,.55)}
.h-leitura dt{font-family:var(--f-nome);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--f-floresta);margin-bottom:.2rem}
.h-leitura dd{margin:0;font-size:1rem;color:var(--f-tinta-suave)}

/* ---------- 4. coleção ---------- */
.h-colecao{background:var(--f-perola)}
.h-box{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(3rem,7vw,5.5rem)}
@media (min-width:56rem){.h-box{grid-template-columns:1.05fr .95fr}}
.h-box img{width:100%;aspect-ratio:1/1;object-fit:cover}
.h-prod-nome{font-family:var(--f-display);font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem);line-height:1.1;color:var(--f-floresta);margin:0 0 .4rem}
.h-prod-tipo{font-family:var(--f-nome);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--f-tinta-suave);margin:0 0 1rem}
.h-preco{font-family:var(--f-display);font-size:2.1rem;color:var(--f-floresta);margin:1.1rem 0 .2rem;line-height:1}
.h-condicoes{font-size:.95rem;color:var(--f-tinta-suave);margin:0 0 1.2rem}
.h-itens{display:grid;gap:2.4rem 1.6rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:44rem){.h-itens{grid-template-columns:repeat(3,1fr)}}
.h-item img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:1rem}
.h-item .h-prod-nome{font-size:1.65rem}
.h-item p{font-size:1.02rem;line-height:1.5}
.h-item .h-preco{font-size:1.7rem;margin-top:.6rem}
.h-acoes{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* ---------- 5. convite ao quiz ---------- */
.h-quiz{position:relative;isolation:isolate;overflow:hidden}
.h-quiz-img{position:absolute;inset:0;z-index:-2}
.h-quiz-img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.h-quiz::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(16,39,31,.96) 0%,rgba(16,39,31,.9) 45%,rgba(16,39,31,.55) 100%)}
.h-quiz-in{max-width:40rem}
.h-quiz h2{margin-bottom:1rem}
.h-quiz p{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);margin-bottom:1.8rem}

/* ---------- 6. crônica em destaque ---------- */
.h-cronica{background:var(--f-perola-2)}
.h-cronica-in{max-width:44rem;margin-inline:auto}
.h-cronica h2{color:var(--f-floresta);margin-bottom:.5rem}
.h-cronica .h-fase{font-size:1rem;color:var(--f-tinta-suave);margin-bottom:1.8rem}
.h-cronica blockquote{margin:0 0 1.4rem}
.h-cronica blockquote p{font-family:var(--f-display);font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);line-height:1.45;color:var(--f-tinta)}
.h-cronica blockquote p:first-child::first-letter{font-size:1.5em}

/* ---------- 7. criadora e comunidade ---------- */
.h-criadora{background:var(--f-perola)}
.h-criadora-grade{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (min-width:56rem){.h-criadora-grade{grid-template-columns:1.2fr .8fr}}
.h-criadora h2{color:var(--f-floresta);margin-bottom:1.2rem}
.h-circulo{border-top:2px solid var(--f-ouro);padding-top:1.4rem}
.h-circulo h3{color:var(--f-floresta);margin-bottom:.8rem}
.h-circulo p{font-size:1.05rem}