/* ==========================================================================
   BASE — variáveis, reset e tipografia
   Compartilhado por todas as páginas do site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis de tema (cores, fontes, espaçamentos)
   -------------------------------------------------------------------------- */
:root{
  --areia:#F3EEE7;
  --areia-2:#E7DED1;
  --papel:#FBF9F6;
  --tinta:#262320;
  --tinta-60:rgba(38,35,32,.62);
  --verde:#39493F;
  --verde-2:#2C3931;
  --verde-claro:#8FA292;
  --taupe:#8C7663;
  --taupe-claro:#B29C87;
  --linha:rgba(38,35,32,.14);
  --linha-clara:rgba(243,238,231,.18);

  --display:'Cormorant Garamond', Georgia, serif;
  --corpo:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 56px);
  --sec-y:clamp(72px, 10vw, 132px);
  --arco:50% 50% 10px 10px / 34% 34% 3px 3px;
}

/* --------------------------------------------------------------------------
   2. Reset e elementos padrão
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--corpo); font-weight:300; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
/* height:auto é obrigatório: sem ele, os atributos width/height do HTML
   viram a altura real da imagem e ela estica. */
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:300; margin:0; line-height:1.14; letter-spacing:-.005em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--taupe); color:#fff}
:focus-visible{outline:2px solid var(--taupe); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}

.olho{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:400; color:var(--taupe); margin:0 0 22px; display:block;
}
.olho--claro{color:var(--verde-claro)}
.titulo{font-size:clamp(2rem, 4.3vw, 3.35rem)}
.titulo em{font-style:italic; color:var(--taupe)}
.titulo--claro em{color:var(--taupe-claro)}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--tinta-60); max-width:60ch}