/* ============================================================
   PANCOOK — Catering & Coffee Break · Sistema visual (identidade 2022 v04)
   Estética orgânica e acolhedora: verde-mata quente + creme + terrosos.
   Cantos arredondados, fotografia grande, script manuscrito de apoio.
   ============================================================ */

:root{
  /* Dark / anchor — vinho quente */
  --ink:        #6B2318;
  --ink-2:      #4A160E;
  --ink-3:      #8A3A28;
  --ink-line:   rgba(239,231,214,.16);
  --on-dark:    #F1E9D6;
  --on-dark-mut:#E4C9B6;

  /* Light / paper — cremes quentes */
  --paper:      #F1E9D6;
  --paper-2:    #E7DBC0;
  --paper-3:    #DBCBA8;
  --line:       #D9CBAA;
  --text:       #2B2A20;
  --muted:      #6E6A59;

  /* Acento principal — dourado (CTA/pílula) */
  --gold:       #E2AC34;
  --gold-deep:  #C6912A;
  --gold-soft:  #EFD39A;
  --gold-tint:  rgba(226,172,52,.12);

  /* Terrosos de marca */
  --brown:      #5A4632;
  --brown-2:    #6B4E2E;
  --tan:        #B98C57;
  --terra:      #D35533;
  --blue:       #B98C57;
  --blue-deep:  #5A4632;
  --blue-soft:  #DBCBA8;
  --sage:       #8FA36F;
  --sage-light: #D3DDB6;
  --olive:      #997D37;
  --wine:       #702F22;

  /* Sobreposição escura (vinho) para fotos */
  --ov:   74,22,14;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --r-card: 26px;
  --r-img:  20px;

  --serif:   "Merriweather", Georgia, "Times New Roman", serif;
  --display: "Cormorant", "Merriweather", Georgia, serif;
  --sans:    "Mulish", system-ui, -apple-system, sans-serif;
  --script:  "Sacramento", "Segoe Script", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- Typografia ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.12; letter-spacing:-.005em; }
.display{
  font-family:var(--display);
  font-size:clamp(3rem, 8vw, 6.6rem);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.01em;
}
.h-section{
  font-family:var(--display);
  font-size:clamp(2.3rem, 5vw, 4rem);
  font-weight:600;
  line-height:1.0;
  letter-spacing:-.008em;
}
.h-sub{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:400; }
.serif-it{ font-family:var(--display); font-style:italic; font-weight:500; }
.lead{
  font-size:clamp(1.12rem,1.7vw,1.4rem);
  line-height:1.62;
  color:var(--muted);
  font-weight:400;
}
.dark .lead{ color:var(--on-dark-mut); }

/* Eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans);
  font-size:.74rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.7;
}
.eyebrow.center{ justify-content:center; }
.dark .eyebrow{ color:var(--gold-soft); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:880px; }
section{ position:relative; }
.section-pad{ padding-block:clamp(72px, 11vw, 150px); }
.dark{ background:var(--ink); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#F2ECDF; }
.paper-2{ background:var(--paper-2); }

/* ---------- Botões ---------- */
.btn{
  --bg:var(--terra); --fg:#FCF6EC;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.84rem;
  letter-spacing:.03em;
  padding:1.05em 1.9em; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  cursor:pointer; transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .4s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:#B8431F; border-color:#B8431F; box-shadow:0 16px 34px -16px rgba(211,85,51,.6); }
/* Em fundos escuros (header, hero, seções .dark) o botão inverte: claro com texto vermelho */
.site-header .btn, .hero .btn, .dark .btn{
  --bg:#FCF6EC; --fg:var(--terra);
}
.site-header .btn:hover, .hero .btn:hover, .dark .btn:hover{
  background:#fff; border-color:#fff; color:var(--terra); box-shadow:0 16px 34px -16px rgba(0,0,0,.35);
}
.btn .ar{ transition:transform .4s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-outline{
  --bg:transparent; --fg:currentColor;
  border:1px solid color-mix(in srgb, currentColor 38%, transparent);
}
.btn-outline:hover{ background:color-mix(in srgb, currentColor 8%, transparent); box-shadow:none; border-color:color-mix(in srgb, currentColor 65%, transparent); }
.dark .btn-outline{ color:var(--on-dark); }
.btn-pill-sage{ --bg:var(--sage); --fg:#183226; }
.btn-pill-sage:hover{ background:#7d8c5d; border-color:#7d8c5d; box-shadow:0 16px 34px -16px rgba(143,158,109,.6); }
.text-link{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); position:relative;
}
.text-link::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:currentColor; transition:width .45s var(--ease); }
.text-link:hover::after{ width:100%; }
.text-link .ar{ transition:transform .4s var(--ease); }
.text-link:hover .ar{ transform:translateX(4px); }

/* ============================================================
   HEADER — barra escura com a logo oficial
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--ink-line);
  transition:background .4s, padding .4s;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; transition:height .4s var(--ease);
}
.site-header.shrink .nav{ height:62px; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:26px; width:auto; transition:height .4s var(--ease); }
.site-header.shrink .brand img{ height:23px; }
.nav-links{
  display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.82rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-dark); opacity:.82; position:relative; padding-block:.4rem;
  transition:opacity .3s, color .3s;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold-soft); transition:width .4s var(--ease); }
.nav-links a:hover{ opacity:1; color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ opacity:1; color:var(--gold-soft); }
.nav-cta{ display:flex; align-items:center; gap:1.3rem; }
.nav-cta .btn{ padding:.78em 1.4em; font-size:.78rem; }

.burger{
  display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.burger span{ display:block; height:1.5px; width:24px; background:var(--on-dark); margin-inline:auto; transition:transform .4s var(--ease), opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,380px); z-index:55;
  background:var(--ink-2); border-left:1px solid var(--ink-line);
  transform:translateX(100%); transition:transform .5s var(--ease);
  padding:104px var(--gutter) 40px; display:flex; flex-direction:column;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{
  font-family:var(--serif); font-size:1.9rem; color:var(--on-dark);
  padding:.55rem 0; border-bottom:1px solid var(--ink-line);
}
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:1.6rem; }
.menu-scrim{ position:fixed; inset:0; background:rgba(5,15,30,.6); opacity:0; visibility:hidden; transition:opacity .4s; z-index:54; }
.menu-scrim.open{ opacity:1; visibility:visible; }

/* ============================================================
   HERO — imagem em tela cheia, storytelling fluido
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink-2); color:var(--on-dark); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08); transform-origin:62% 45%;
  filter:saturate(1.14) contrast(1.06) brightness(1.03);
  transition:opacity 1.5s var(--ease);
  will-change:opacity, transform; }
.hero-media img.is-active{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(var(--ov),.40) 0%, rgba(var(--ov),.04) 24%, rgba(var(--ov),.48) 60%, rgba(var(--ov),.92) 100%),
    linear-gradient(90deg, rgba(var(--ov),.70) 0%, rgba(var(--ov),.16) 50%, rgba(var(--ov),0) 78%); }
.hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(52px,9vh,110px); padding-top:120px; }
.hero-inner .eyebrow{ color:var(--gold-soft); }

.hero-lines{ position:relative; font-family:var(--serif); font-size:clamp(2.4rem,5.6vw,5.2rem); line-height:1.03; min-height:3.2em; width:100%; max-width:19ch; margin-bottom:.2rem; }
.hero-line{ margin:0; position:absolute; left:0; right:0; bottom:0;
  font-family:var(--serif); font-weight:400; font-size:1em; line-height:1.03; letter-spacing:-.014em; color:#FCF8F0;
  text-shadow:0 2px 34px rgba(18,53,39,.55);
  opacity:0; transform:translateY(26px); pointer-events:none; }
.hero-line em{ font-style:italic; color:var(--gold-soft); }
.hero-line.is-active{ opacity:1; transform:none; pointer-events:auto; }

.hero .lead{ max-width:46ch; color:#EAF1F8; text-shadow:0 1px 18px rgba(18,53,39,.5); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.9rem; }

/* Controles — dots + contador */
.hero-controls{ display:flex; align-items:center; gap:1.3rem; margin-top:2.4rem; }
.hero-dots{ display:flex; align-items:center; gap:.55rem; }
.hero-dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(239,233,225,.34); transition:width .5s var(--ease), background .5s var(--ease), border-radius .5s var(--ease); }
.hero-dots button.is-active{ width:30px; border-radius:5px; background:var(--gold-soft); }
.hero-count{ font-family:var(--serif); font-size:.92rem; letter-spacing:.06em; color:var(--on-dark-mut); }
.hero-count b{ color:#FCF8F0; font-weight:600; }
.hero-hint{ position:absolute; right:calc(var(--gutter) - 6px); bottom:clamp(52px,9vh,110px); z-index:2; display:flex; align-items:center; gap:.7rem; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-mut); writing-mode:vertical-rl; }
.hero-hint .line{ height:34px; width:1px; background:linear-gradient(180deg,var(--gold-soft),transparent); }

@media (max-width:820px){
  .hero-hint{ display:none; }
  .hero-lines{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img{ transform:none !important; transition:opacity .5s !important; }
  .hero-line{ transition:opacity .4s; }
}

/* ============================================================
   AUTORIDADE — números
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.stat{ background:var(--ink); padding:clamp(28px,4vw,48px) clamp(20px,2.5vw,34px); }
.stat .num{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.9rem); line-height:1; color:#F2ECDF; font-weight:600; letter-spacing:-.02em; }
.stat .num .u{ color:var(--gold-soft); }
.stat .lbl{ margin-top:.7rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); }

/* ============================================================
   EXPERIÊNCIAS — cards editoriais
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,24px); }
.exp-card{
  position:relative; overflow:hidden; border-radius:3px;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; color:#fff; isolation:isolate;
}
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease); filter:saturate(1.1) contrast(1.04) brightness(1.02); }
.exp-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(var(--ov),0) 32%, rgba(var(--ov),.85) 100%); }
.exp-card:hover img{ transform:scale(1.07); }
.exp-card .ec-body{ padding:clamp(22px,2.4vw,32px); }
.exp-card h3{ font-size:clamp(1.5rem,2.2vw,2rem); color:#fff; }
.exp-card .ec-meta{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.7rem; }
.exp-card p{ margin:.5rem 0 0; font-size:.96rem; color:rgba(255,255,255,.82); max-width:34ch; }
.exp-card .span-7{ grid-column:span 7; }
.exp-card.tall{ min-height:560px; }
.col-7{ grid-column:span 7; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-4{ grid-column:span 4; } .col-8{ grid-column:span 8; }

/* ============================================================
   PROCESSO
   ============================================================ */
.process-head{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:clamp(40px,5vw,72px); }
.steps{ border-top:1px solid var(--ink-line); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,72px);
  align-items:baseline; padding:clamp(26px,3.4vw,42px) 0; border-bottom:1px solid var(--ink-line);
  transition:padding-left .5s var(--ease);
}
.step:hover{ padding-left:clamp(8px,1.6vw,22px); }
.step .st-num{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); color:var(--gold-soft); width:2.2em; }
.step .st-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(8px,3vw,48px); align-items:baseline; }
.step h3{ font-size:clamp(1.6rem,2.6vw,2.3rem); color:#F2ECDF; }
.step p{ margin:0; color:var(--on-dark-mut); font-size:1rem; max-width:46ch; }

/* ============================================================
   GALERIA
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(140px,15vw,210px); gap:clamp(10px,1.2vw,18px); }
.g-item{ position:relative; overflow:hidden; border-radius:3px; cursor:pointer; background:var(--paper-3); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:saturate(1.1) contrast(1.04) brightness(1.02); }
.g-item::after{ content:""; position:absolute; inset:0; background:rgba(var(--ov),0); transition:background .5s; }
.g-item:hover img{ transform:scale(1.06); }
.g-item:hover::after{ background:rgba(var(--ov),.14); }
.g-item .g-plus{ position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; display:grid; place-items:center; opacity:0; transform:scale(.8); transition:.4s var(--ease); backdrop-filter:blur(4px); }
.g-item:hover .g-plus{ opacity:1; transform:scale(1); }
.ga{ grid-column:span 5; grid-row:span 2; }
.gb{ grid-column:span 4; grid-row:span 2; }
.gc{ grid-column:span 3; grid-row:span 1; }
.gd{ grid-column:span 4; grid-row:span 1; }
.ge{ grid-column:span 5; grid-row:span 1; }
.gf{ grid-column:span 3; grid-row:span 2; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(5,15,30,.95); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s; padding:5vw; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:3px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.lb-close,.lb-nav{ position:absolute; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; transition:.3s; }
.lb-close{ top:24px; right:24px; width:46px; height:46px; border-radius:50%; font-size:1.1rem; }
.lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:1.3rem; }
.lb-prev{ left:3vw; } .lb-next{ right:3vw; }
.lb-close:hover,.lb-nav:hover{ background:var(--gold); border-color:var(--gold); color:#FBF6EC; }
.lb-count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:var(--on-dark-mut); font-size:.8rem; letter-spacing:.2em; }

/* ============================================================
   FUNDADORES
   ============================================================ */
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.founder-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.portrait{
  position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--ink-2), var(--ink-2) 11px, var(--ink-3) 11px, var(--ink-3) 22px);
  display:flex; align-items:flex-end; border:1px solid var(--ink-line);
}
.portrait.offset{ margin-top:38px; }
.portrait .ph-tag{ font-family:var(--sans); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); padding:12px; }
.portrait .ph-name{ position:absolute; top:0; left:0; right:0; padding:16px; font-family:var(--serif); font-size:1.25rem; color:#F2ECDF; z-index:2; }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.portrait.has-photo{ background:var(--ink); }
.portrait.has-photo::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(var(--ov),.45) 0%, rgba(var(--ov),0) 26%, rgba(var(--ov),0) 55%, rgba(var(--ov),.85) 100%); }
.portrait.has-photo .ph-name{ top:auto; bottom:0; padding:14px 18px 18px; font-size:1.4rem; color:#fff; }
.founders blockquote{ margin:0; }
.pull{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1.22; color:#F2ECDF; }

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.tst{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; }
.tst .quote-mk{ font-family:var(--serif); font-size:3.4rem; line-height:.6; color:var(--gold); height:.5em; }
.tst p{ font-family:var(--serif); font-size:1.22rem; line-height:1.45; color:var(--text); font-style:italic; margin:.4rem 0 1.6rem; }
.tst .who{ margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line); }
.tst .who b{ font-weight:600; font-size:.96rem; }
.tst .who span{ display:block; font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.stars{ color:var(--gold); letter-spacing:.18em; font-size:.8rem; margin-bottom:.4rem; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{ position:relative; overflow:hidden; color:var(--on-dark); text-align:center; }
.cta-final .bg{ position:absolute; inset:0; z-index:0; }
.cta-final .bg img{ width:100%; height:100%; object-fit:cover; }
.cta-final .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--ov),.84), rgba(var(--ov),.92)); }
.cta-final .wrap{ position:relative; z-index:1; }
.cta-final h2{ max-width:18ch; margin-inline:auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--on-dark-mut); padding-top:clamp(56px,7vw,90px); border-top:1px solid var(--ink-line); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:clamp(40px,5vw,64px); }
.foot-top img.flogo{ height:34px; width:auto; margin-bottom:1.3rem; }
.foot-col h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 1.1rem; font-weight:600; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.foot-col a{ font-size:.94rem; transition:color .3s; }
.foot-col a:hover{ color:#F2ECDF; }
.foot-bio{ font-size:.95rem; max-width:34ch; line-height:1.7; }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:24px; border-top:1px solid var(--ink-line); font-size:.8rem; letter-spacing:.04em; }
.foot-social{ display:flex; gap:.7rem; }
.foot-social a{ width:40px; height:40px; border:1px solid var(--ink-line); border-radius:50%; display:grid; place-items:center; transition:.35s; color:var(--on-dark); }
.foot-social a svg{ width:19px; height:19px; }
.foot-social a.s-ig:hover{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); border-color:transparent; color:#fff; transform:translateY(-2px); }
.foot-social a.s-wa:hover{ background:#25D366; border-color:#25D366; color:#fff; transform:translateY(-2px); }

/* ---------- Dock flutuante (WhatsApp + Instagram) ---------- */
.social-dock{ position:fixed; right:clamp(15px,2.4vw,26px); bottom:clamp(15px,2.4vw,26px); z-index:940; display:flex; flex-direction:column; gap:13px; }
.social-fab{ position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 14px 32px -10px rgba(0,0,0,.45); transition:transform .3s var(--ease), box-shadow .3s; }
.social-fab svg{ width:30px; height:30px; }
.social-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 20px 40px -12px rgba(0,0,0,.5); }
.fab-wa{ background:#25D366; }
.fab-ig{ background:linear-gradient(45deg,#f09433 5%,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888 100%); }
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1; animation:fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.7); opacity:0; } 100%{ opacity:0; } }
.fab-tip{ position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px); background:var(--ink); color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.02em; padding:.5em .8em; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:.3s var(--ease); box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
.social-fab:hover .fab-tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:640px){ .social-fab{ width:52px; height:52px; } .social-fab svg{ width:27px; height:27px; } .fab-tip{ display:none; } }
@media (prefers-reduced-motion: reduce){ .fab-wa::after{ animation:none; display:none; } }

/* ============================================================
   FORM
   ============================================================ */
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(26px,3vw,48px); }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.5rem; }
.field label .req{ color:var(--gold); }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:.95em 1em; transition:border-color .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-tint); }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#b4452f; box-shadow:0 0 0 3px rgba(180,69,47,.1); }
.field .err{ display:none; color:#b4452f; font-size:.8rem; margin-top:.4rem; }
.field.invalid .err{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form-ok{ display:none; padding:1.1em 1.2em; background:var(--gold-tint); border:1px solid var(--gold); border-radius:3px; color:var(--gold-deep); font-weight:500; margin-bottom:1.4rem; }
.form-ok.show{ display:block; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{ display:inline-block; padding:.55em 1.1em; border:1px solid var(--line); border-radius:40px; font-size:.86rem; color:var(--muted); transition:.3s; background:#fff; }
.chip input:checked + span{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }

/* ============================================================
   Page hero (internas)
   ============================================================ */
.page-hero{ background:var(--ink); color:var(--on-dark); padding-top:130px; padding-bottom:clamp(48px,6vw,84px); position:relative; overflow:hidden; }
.page-hero h1{ max-width:18ch; }
.page-hero .lead{ max-width:48ch; margin-top:1.3rem; color:var(--on-dark-mut); }
.breadcrumb{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:var(--gold-soft); }

/* media object (alternating) */
.media{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.media.flip .m-img{ order:2; }
.media .m-img{ position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden; }
.media .m-img img{ width:100%; height:100%; object-fit:cover; }
.media .m-img .tagline{ position:absolute; bottom:0; left:0; background:var(--ink); color:var(--gold-soft); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.7em 1.1em; }

/* values / list */
.feat-list{ list-style:none; margin:1.6rem 0 0; padding:0; }
.feat-list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.feat-list .fi-mark{ color:var(--gold); font-family:var(--serif); font-size:1.3rem; line-height:1; }
.feat-list b{ font-weight:600; }
.feat-list p{ margin:.3rem 0 0; color:var(--muted); font-size:.96rem; }

/* divider mark */
.mark{ display:flex; align-items:center; gap:1rem; color:var(--gold); }
.mark::before,.mark::after{ content:""; height:1px; flex:1; background:var(--line); }
.dark .mark::before,.dark .mark::after{ background:var(--ink-line); }
.mark .dot{ width:6px; height:6px; transform:rotate(45deg); background:var(--gold); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
/* Quando o GSAP controla o movimento, a transição CSS é neutralizada (o JS anima via inline). */
html.gsap-on .reveal{ transition:none !important; }

/* ============================================================
   ORGÂNICO — cantos arredondados + script (referências verde/creme)
   ============================================================ */
.exp-card{ border-radius:var(--r-card); }
.g-item{ border-radius:var(--r-img); }
.tst{ border-radius:var(--r-card); }
.stats{ border-radius:var(--r-card); overflow:hidden; }
.portrait{ border-radius:var(--r-card); overflow:hidden; }
.cta-final{ border-radius:0; }
.cta-final .bg{ border-radius:0; }
.media .m-img, .media img{ border-radius:var(--r-card); }
.info-panel, .form-card, .contact-form{ border-radius:var(--r-card); }
/* Script manuscrito de apoio */
.script-accent{ font-family:var(--script); font-weight:400; line-height:.92; color:var(--gold-soft); font-size:clamp(2rem,4vw,3.2rem); }
.dark .script-accent{ color:var(--gold-soft); }
.quote-mk{ font-family:var(--script) !important; }

/* ============================================================
   INTRO CURTAIN — abertura impactante (uma vez por sessão)
   ============================================================ */
.curtain{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; overflow:hidden; }
.curtain-panel{ position:absolute; left:0; right:0; height:50.5%; background:var(--ink-2); z-index:2; will-change:transform; }
.curtain-panel.top{ top:0; } .curtain-panel.bot{ bottom:0; }
.curtain-logo{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.curtain-logo img{ width:min(46vw,340px); opacity:0; transform:translateY(14px); }
.curtain-logo .cl-sub{ font-family:var(--script); font-size:clamp(1.5rem,3.4vw,2.4rem); color:var(--gold-soft); opacity:0; }
.curtain.done{ pointer-events:none; }
html.no-intro .curtain{ display:none; }

/* ============================================================
   HERO — camadas cinematográficas (grão + vinheta + máscara de texto)
   ============================================================ */
.hero-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-vign{ position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 240px 40px rgba(18,53,39,.55); }
.hero-media{ will-change:transform; }
/* Máscara de palavras do título cinético */
.hero-line .wm{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.hero-line .wm > i{ display:inline-block; font-style:inherit; will-change:transform; }
html.gsap-on .hero-line .wm > i{ transform:translateY(115%); }
.hero-line em .wm > i{ color:var(--gold-soft); }
/* Barra de progresso da cena */
.hero-count-wrap{ position:relative; }
.hero-scene-bar{ position:absolute; left:0; bottom:-9px; height:2px; width:100%; background:rgba(239,233,225,.2); overflow:hidden; border-radius:2px; }
.hero-scene-bar i{ display:block; height:100%; width:100%; background:var(--gold-soft); transform-origin:left; transform:scaleX(0); }

/* ============================================================
   MARQUEE — faixa de sabores em movimento
   ============================================================ */
.marquee{ background:var(--paper-2); border-block:1px solid var(--line); overflow:hidden; padding:1.1rem 0; }
.marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; will-change:transform;
  animation:marq 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ display:inline-flex; align-items:center; gap:1.4rem; padding:0 1.4rem;
  font-family:var(--display); font-style:italic; font-weight:600; font-size:clamp(1.5rem,3vw,2.5rem);
  color:var(--ink); letter-spacing:.005em; }
.marquee-track span::after{ content:"✦"; font-style:normal; font-size:.5em; color:var(--gold-deep); transform:translateY(-.15em); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Fita de logos de clientes ---------- */
.clients{ background:var(--paper); }
.clients-head{ margin-bottom:clamp(30px,4.5vw,52px); }
.logo-marquee{ display:flex; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-track{ display:flex; flex:0 0 auto; align-items:center; gap:clamp(18px,2.4vw,34px); padding-right:clamp(18px,2.4vw,34px); animation:logomarq 46s linear infinite; will-change:transform; }
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-cell{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:clamp(158px,15vw,208px); height:clamp(96px,9vw,120px); background:#fff; border:1px solid var(--line); border-radius:6px; padding:clamp(18px,2vw,26px); box-shadow:0 10px 30px -22px rgba(74,22,14,.4); }
.logo-cell img{ max-width:100%; max-height:100%; object-fit:contain; }
@keyframes logomarq{ to{ transform:translateX(calc(-100% - clamp(18px,2.4vw,34px))); } }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation:none !important; } }

/* ============================================================
   Micro-motion — botões magnéticos + hover de cartão
   ============================================================ */
.btn{ will-change:transform; }
.exp-card img{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-bg img{ animation:none; transform:none; }
  html.gsap-on .hero-line .wm > i{ transform:none !important; }
  .marquee-track{ animation:none !important; }
  .curtain{ display:none !important; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1000px){
  .nav-links, .nav-cta .btn{ display:none; }
  .burger{ display:flex; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .tst-grid{ grid-template-columns:1fr; }
  .founders{ grid-template-columns:1fr; }
  .process-head{ grid-template-columns:1fr; }
  .step .st-main{ grid-template-columns:1fr; gap:.5rem; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:2.4rem 1.5rem; }
  .media,.media.flip{ grid-template-columns:1fr; }
  .media.flip .m-img{ order:0; }
}
@media (max-width: 720px){
  body{ font-size:16px; }
  .exp-grid{ grid-template-columns:1fr; }
  .exp-card .col-7,.exp-card .col-5,.col-7,.col-5,.col-6,.col-4,.col-8{ grid-column:1 / -1; }
  .exp-card.tall{ min-height:420px; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(120px,40vw,190px); }
  .ga,.gb,.gc,.gd,.ge,.gf{ grid-column:span 1; grid-row:span 1; }
  .ga{ grid-column:span 2; grid-row:span 2; }
  .field-row{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; gap:2rem; }
  .founder-imgs .portrait.offset{ margin-top:0; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
}