/* ==========================================================================
   Rosas em conexão — Roseli Santos
   Paleta e tipografia conforme o briefing:
   fundos areia/linho/perolado · dourado fosco e verde-oliva nos toques
   ancestrais · bordô fechado em botões, assinatura e destaques poéticos.
   ========================================================================== */

:root{
  /* fundos */
  --perola:#fffdfa;
  --linho:#faf6ef;
  --areia:#f2e9dc;
  --areia-escura:#e8dccb;

  /* ancestrais */
  --dourado:#b08d57;
  --dourado-claro:#cdb185;
  --dourado-fosco:#9d7f4e;
  --oliva:#6f7350;

  /* presença */
  --bordo:#5e1426;
  --bordo-fundo:#4a101d;
  --rubi:#8c2334;

  /* texto — tons reforçados para leitura confortável em qualquer tela */
  --tinta:#332b28;
  --tinta-suave:#574b45;
  --tinta-clara:#6f625c;

  --linha:#e3d8c8;
  --sombra:0 2px 18px rgba(94,20,38,.06);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --largura:74rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--linho);color:var(--tinta);
  font-family:var(--sans);font-size:1.13rem;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bordo);text-decoration:none}
a:hover{color:var(--rubi)}

.wrap{max-width:var(--largura);margin:0 auto;padding:0 1.5rem}
.estreito{max-width:44rem}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 1rem;color:var(--bordo)}
h1{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1.15rem}
.script{font-family:var(--script);font-style:italic;font-weight:500;
        font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem);
        color:var(--rubi);line-height:1.4;letter-spacing:.005em}
.olho{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dourado-fosco);font-weight:500}
.fio{width:3.5rem;height:1px;background:var(--dourado);opacity:.7;border:0;margin:1.6rem 0}
.fio.centro{margin-left:auto;margin-right:auto}
.ornamento{display:block;margin:0 auto 1.4rem;width:118px;height:auto;opacity:.9}
.leve{color:var(--tinta-suave);font-weight:400}

/* ---------- cabecalho ---------- */
.topo{background:var(--perola);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:50}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.marca{display:flex;align-items:center;gap:.8rem}
.marca img{width:46px;height:46px;object-fit:cover;border-radius:50%;border:1px solid var(--linha)}
.marca .nome{font-family:var(--serif);font-size:1.15rem;letter-spacing:.06em;color:var(--bordo);line-height:1.1}
.marca .nome small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
                   text-transform:uppercase;color:var(--dourado-fosco)}
nav a{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave);margin-left:1.6rem}
nav a:hover,nav a[aria-current="page"]{color:var(--bordo)}
@media(max-width:640px){
  nav{display:none}
  .marca .nome{font-size:1rem}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--perola),var(--areia));text-align:center;
      padding:clamp(3rem,6vw,6rem) 0 clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--linha)}
.hero h1{max-width:22ch;margin:0 auto 1.4rem}
.hero .sub{max-width:46ch;margin:0 auto 2rem;color:var(--tinta-suave);font-size:1.16rem}
.hero .script{display:block;margin:.4rem 0 0}

/* ---------- botoes ---------- */
.botao{display:inline-block;font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;
       text-transform:uppercase;padding:.95rem 2rem;border-radius:2px;border:1px solid var(--bordo);
       background:var(--bordo);color:#fff;cursor:pointer;transition:.18s}
.botao:hover{background:var(--rubi);border-color:var(--rubi);color:#fff}
.botao.vazio{background:transparent;color:var(--bordo)}
.botao.vazio:hover{background:var(--bordo);color:#fff}
.botao.verde{background:transparent;border-color:var(--oliva);color:var(--oliva)}
.botao.verde:hover{background:var(--oliva);color:#fff}

/* ---------- secoes ---------- */
section{padding:clamp(3rem,5.5vw,5.5rem) 0}
.secao-areia{background:var(--areia)}
.secao-perola{background:var(--perola)}
.secao-bordo{background:var(--bordo-fundo);color:#f3e7dd}
.secao-bordo h2,.secao-bordo h3{color:#f0dcc8}
.secao-bordo .leve{color:#cbb6a6}

/* acolhimento da guardia */
.guardia{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.guardia .retrato{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 35%;border-radius:50%;
                  border:1px solid var(--dourado);padding:6px;background:var(--perola)}
@media(max-width:720px){
  .guardia{grid-template-columns:1fr}
  .guardia .retrato{max-width:13rem;margin:0 auto}
  .guardia{text-align:center}
}
.carta{font-family:var(--serif);font-size:1.24rem;font-weight:500;line-height:1.8;color:var(--tinta)}
.carta p:first-child{font-size:1.3rem;color:var(--bordo)}

/* jardim das quatro rosas */
.rosas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin-top:2.5rem}
.rosa{background:var(--perola);border:1px solid var(--linha);border-radius:3px;padding:1.7rem 1.5rem;
      text-align:center;transition:.2s;box-shadow:var(--sombra)}
.rosa:hover{transform:translateY(-3px)}
.rosa .bolinha{width:34px;height:34px;border-radius:50%;margin:0 auto 1rem;border:1px solid rgba(0,0,0,.08)}
.rosa h3{font-size:1.2rem;margin-bottom:.2rem}
.rosa .freq{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado-fosco);margin-bottom:.8rem}
.rosa p{font-size:1.02rem;color:var(--tinta-suave);margin:0}
.r-branca{background:#fdfcfa}
.r-amarela{background:#fbf4d9}
.r-rosa{background:#fbeef0}
.r-vermelha{background:#f3dcdc}

/* atalhos */
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem;margin-top:2.2rem}
.atalho{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(240,220,200,.22);
        border-radius:3px;padding:1.5rem;color:inherit;transition:.2s}
.atalho:hover{background:rgba(255,255,255,.11)}
.atalho .rot{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado-claro)}
.atalho p{margin:.5rem 0 0;font-family:var(--serif);font-size:1.1rem;color:#f3e7dd}

/* caixa de captura */
.captura{background:var(--perola);border:1px solid var(--dourado-claro);border-radius:3px;
         padding:clamp(1.8rem,4vw,3rem);text-align:center;box-shadow:var(--sombra)}
.captura h3{font-size:1.6rem}
.captura form{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.5rem}
.captura input[type=email]{flex:1 1 18rem;max-width:24rem;padding:.9rem 1rem;border:1px solid var(--linha);
        border-radius:2px;font-family:var(--sans);font-size:1rem;background:var(--linho);color:var(--tinta)}
.captura input[type=email]:focus{outline:none;border-color:var(--dourado)}
.captura .micro{font-size:.85rem;color:var(--tinta-clara);margin-top:1rem}

/* ---------- galeria de retratos ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.1rem;margin-top:2.4rem}
.galeria figure{margin:0;background:var(--perola);border:1px solid var(--linha);border-radius:3px;
                padding:8px 8px 0;box-shadow:var(--sombra);transition:.2s}
.galeria figure:hover{transform:translateY(-3px)}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.galeria figcaption{font-family:var(--serif);font-size:1.05rem;color:var(--tinta-suave);
                    text-align:center;padding:.8rem .4rem 1rem;font-style:italic}

/* ---------- conteudo longo ---------- */
.prosa{font-family:var(--serif);font-size:1.26rem;font-weight:500;line-height:1.82;color:var(--tinta)}
.prosa h2{margin-top:2.5rem}
.prosa blockquote{margin:2rem 0;padding-left:1.4rem;border-left:2px solid var(--dourado-claro);
                  font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--rubi);line-height:1.6}
.post-meta{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-clara)}

/* ---------- livros & e-books ---------- */
.livros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.6rem;margin-top:2.6rem}
.livro{background:var(--perola);border:1px solid var(--linha);border-radius:3px;overflow:hidden;
       box-shadow:var(--sombra);display:flex;flex-direction:column;transition:.2s}
.livro:hover{transform:translateY(-3px)}
.livro .capa{position:relative;aspect-ratio:4/5;padding:1.6rem;display:flex;flex-direction:column;
       justify-content:flex-end;color:#fff}
.livro .capa::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.livro .capa .num{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0}
.livro .capa h3{font-family:var(--serif);color:#fff;font-size:1.6rem;margin:.35rem 0 0;line-height:1.15}
.livro .capa .sub{font-style:italic;font-size:.92rem;color:rgba(255,255,255,.9);margin:.5rem 0 0;line-height:1.4}
.livro .corpo{padding:1.5rem}
.livro .corpo p{font-size:1.02rem;color:var(--tinta-suave)}
.capa-rosa{background:linear-gradient(160deg,#93aed3,#5f7ea8 62%,#41608a)}
.capa-fios{background:linear-gradient(160deg,#c98b6a,#a9724f 55%,#6f7350)}
.capa-alma{background:linear-gradient(160deg,#d68a3a,#8c2334 66%,#5e1426)}
blockquote.trecho{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.7;
       color:var(--tinta);border-left:2px solid var(--dourado-claro);padding-left:1rem;
       margin:1.1rem 0;white-space:pre-line}

/* ---------- rodape ---------- */
footer{background:var(--bordo-fundo);color:#d9c7b8;padding:3.5rem 0 2.5rem;text-align:center}
footer a{color:#e8d6c4}
footer .assinatura{font-family:var(--serif);font-size:1.25rem;letter-spacing:.08em;color:#f0dcc8;margin-bottom:.2rem}
footer .lema{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dourado-claro);margin-bottom:1.6rem}
footer .contatos{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;font-size:.9rem;margin-bottom:1.6rem}
footer .fino{font-size:.76rem;color:#9b8a7d;margin-top:2rem}
.sino{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(240,220,200,.3);
      border-radius:2px;padding:.6rem 1.2rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.sino:hover{background:rgba(255,255,255,.08);color:#fff}