/* ============================================================
   @maymesquita.arq — sistema de marca
   Off-white / Charcoal / Burgundy / Mostarda — Fraunces / Karla / Caveat
   Atualizado conforme instruções de voz de 19/08/2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700;9..144,900&family=Karla:wght@400;500;700&family=Caveat:wght@600&display=swap');

:root{
  --off-white:   #F6F1E8;
  --charcoal:    #2E2A26;
  --burgundy:    #7A2233;
  --burgundy-lt: #A34355;
  --mustard:     #C9962F;
  --mustard-dk:  #8A6415;

  --display: 'Fraunces', serif;
  --body: 'Karla', sans-serif;
  --hand: 'Caveat', cursive;

  --max: 1120px;
  --pad: clamp(24px, 5vw, 90px);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--off-white);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 0.4em;
  color:var(--charcoal);
}
h1{ font-size:clamp(40px, 6vw, 76px); }
h2{ font-size:clamp(30px, 4vw, 48px); font-weight:700; }
h3{ font-size:clamp(22px, 2.4vw, 28px); font-weight:700; }

p{ margin:0 0 1em; max-width:62ch; }
a{ color:inherit; }

img,svg{ max-width:100%; display:block; }

::selection{ background:var(--mustard); color:var(--charcoal); }

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--burgundy);
  outline-offset:3px;
}

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:clamp(56px,9vw,120px) 0; }
.section--tight{ padding:clamp(36px,6vw,72px) 0; }

.band{
  background:var(--burgundy);
  color:var(--off-white);
}
.band h2, .band h3{ color:var(--off-white); }

.band--dark{
  background:var(--charcoal);
  color:var(--off-white);
}
.band--dark h2, .band--dark h3{ color:var(--off-white); }

.divider{
  height:2px;
  width:64px;
  background:var(--mustard);
  border:0;
  margin:20px 0 28px;
}
.divider--center{ margin-left:auto; margin-right:auto; }

/* ---------- eyebrow / anotação à mão ---------- */
.note{
  font-family:var(--hand);
  font-weight:600;
  font-size:clamp(22px,2.4vw,28px);
  color:var(--mustard-dk);
  display:inline-block;
  transform:rotate(-2deg);
  margin:0 0 6px;
}

/* ---------- numeração de seção (Karla 500, caixa alta) ---------- */
.tag{
  font-family:var(--body);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.band .tag, .band--dark .tag{ color:var(--mustard); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,232,0.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(46,42,38,0.1);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.logo{
  font-family:var(--display); font-weight:900; font-size:20px;
  text-decoration:none; color:var(--charcoal); letter-spacing:-0.02em;
}
.logo span{ color:var(--burgundy); }
.nav-links{
  display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-size:15px; font-weight:500;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-bottom-color:var(--mustard); }
.nav-toggle{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:15px;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none;
  border:2px solid var(--charcoal);
  background:var(--charcoal);
  color:var(--off-white);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); background:var(--burgundy); border-color:var(--burgundy); }
.btn--ghost{
  background:transparent; color:var(--charcoal); border-color:var(--charcoal);
}
.btn--ghost:hover{ background:var(--charcoal); color:var(--off-white); }
.btn--on-dark{ background:var(--mustard); border-color:var(--mustard); color:var(--charcoal); }
.btn--on-dark:hover{ background:var(--off-white); border-color:var(--off-white); color:var(--charcoal); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(50px,9vw,110px); }
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}
.hero-copy p{ font-size:19px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

.stamp-frame{
  position:relative;
  aspect-ratio:4/5;
  background:var(--charcoal);
  border-radius:var(--radius);
  overflow:hidden;
}
.stamp-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  display:block;
}
.stamp-frame .placeholder-label{
  position:absolute; left:22px; bottom:22px; right:22px;
  font-family:var(--body); font-size:13px; color:rgba(246,241,232,.55);
  border:1px dashed rgba(246,241,232,.35); padding:8px 12px; border-radius:999px;
  display:inline-block; width:fit-content;
}
.stamp-badge{
  position:absolute; top:18px; right:18px;
  width:88px; height:88px;
  color:var(--mustard);
  transform:rotate(8deg);
  z-index:2;
}

/* ---------- cards ---------- */
.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--off-white);
  border:1px solid rgba(46,42,38,0.14);
  border-radius:var(--radius);
  padding:32px;
}
.card--charcoal{
  background:var(--charcoal); color:var(--off-white); border-color:var(--charcoal);
}
.card--charcoal h3{ color:var(--off-white); }
.card--charcoal p{ color:rgba(246,241,232,0.82); }

.icon{
  width:44px; height:44px; color:var(--burgundy); margin-bottom:18px;
}
.card--charcoal .icon{ color:var(--mustard); }

/* ---------- doodle strip ---------- */
.doodle-strip{
  display:flex; gap:10px; align-items:center; color:var(--mustard-dk); opacity:.8;
}
.doodle-strip svg{ width:30px; height:30px; }

/* ---------- footer ---------- */
.footer{
  background:var(--charcoal); color:var(--off-white);
  padding:64px 0 32px;
}
.footer .divider{ background:var(--mustard); }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
}
.footer a{ text-decoration:none; color:rgba(246,241,232,.85); }
.footer a:hover{ color:var(--mustard); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(246,241,232,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; color:rgba(246,241,232,.6);
}

/* ---------- page header (páginas internas) ---------- */
.page-hero{
  padding:clamp(48px,8vw,96px) 0 clamp(32px,5vw,56px);
}
.page-hero p{ font-size:19px; }

/* ---------- utilitário ---------- */
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.list-plain{ list-style:none; margin:0; padding:0; }
.list-plain li{ padding:10px 0; border-bottom:1px solid rgba(46,42,38,.12); }

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid--2, .grid--3{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--off-white);
    flex-direction:column; align-items:flex-start; padding:32px var(--pad);
    gap:20px; transform:translateY(-110%); transition:transform .25s ease;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{
    display:inline-flex; background:none; border:0; cursor:pointer;
    flex-direction:column; gap:5px; padding:6px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--charcoal); display:block; }
}