/* =========================================================================
   PÃO DOURADO — Panificadora Artesanal
   Bespoke CSS. Editorial, warm, tactile. No template kit, no AI-flat look.
   Type: Fraunces (display) + Inter (corpo). Light & Dark por tokens.
   ========================================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* paleta base */
  --espresso: #2A1A0F;
  --caramelo: #6B3F1D;
  --ambar:    #C8873E;
  --ambar-esc:#A96A28;
  --creme:    #FBF3E4;
  --creme-2:  #F3E6D0;
  --trigo:    #6B8E4E;
  --sangue:   #8C3A22; /* acento terroso profundo p/ detalhes */

  /* papel claro (default) */
  --bg:        #FBF3E4;
  --bg-warm:   #F5E7CF;
  --surface:   #FFFCF6;
  --ink:       #2A1A0F;
  --ink-soft:  #5C4530;
  --ink-mute:  #8A745B;
  --line:      #E2D2B4;
  --line-soft: #EADCC3;
  --accent:    #A96A28;   /* âmbar mais fechado p/ contraste em fundo claro */
  --accent-2:  #5E7C43;   /* verde-trigo */
  --seal:      #6B3F1D;
  --hero-ink:  #F6ECD8;   /* texto sobre foto escura */
  --shadow:    18px 40px 90px -50px rgba(42,26,15,.55);
  --shadow-sm: 0 20px 45px -30px rgba(42,26,15,.45);
  --grain-opacity: .05;
  --grain-blend: multiply;

  /* medidas */
  --pad: clamp(1.15rem, 5vw, 6.5rem);
  --maxw: 1360px;
  --radius: 3px;

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

/* dark por preferência do sistema (sem escolha explícita de claro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #1B120B;
    --bg-warm:   #22150C;
    --surface:   #241812;
    --ink:       #F3E7D3;
    --ink-soft:  #D6BE9E;
    --ink-mute:  #9C8368;
    --line:      #3B2A1B;
    --line-soft: #33241736;
    --accent:    #E0A65A;
    --accent-2:  #8FB06A;
    --seal:      #E0A65A;
    --hero-ink:  #F6ECD8;
    --shadow:    22px 46px 100px -55px rgba(0,0,0,.8);
    --shadow-sm: 0 24px 50px -34px rgba(0,0,0,.75);
    --grain-opacity: .07;
    --grain-blend: overlay;
  }
}
/* dark por escolha explícita (toggle vence nos dois sentidos) */
:root[data-theme="dark"] {
  --bg:        #1B120B;
  --bg-warm:   #22150C;
  --surface:   #241812;
  --ink:       #F3E7D3;
  --ink-soft:  #D6BE9E;
  --ink-mute:  #9C8368;
  --line:      #3B2A1B;
  --line-soft: #33241736;
  --accent:    #E0A65A;
  --accent-2:  #8FB06A;
  --seal:      #E0A65A;
  --hero-ink:  #F6ECD8;
  --shadow:    22px 46px 100px -55px rgba(0,0,0,.8);
  --shadow-sm: 0 24px 50px -34px rgba(0,0,0,.75);
  --grain-opacity: .07;
  --grain-blend: overlay;
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, .55vw + .9rem, 1.12rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: var(--creme); }

/* film grain — sensação analógica/artesanal */
body::after{
  content:""; position: fixed; inset:0; z-index: 9999; pointer-events:none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ body::after{ opacity: calc(var(--grain-opacity) * .6); } }

/* ---------- TIPOGRAFIA ---------- */
.display, h1, h2, h3, .serif {
  font-family: "Fraunces", "Georgia", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.02;
}
.kicker{
  font-family: "Inter", sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .7rem;
}
.kicker::before{
  content:""; width: 30px; height: 1px; background: currentColor; opacity: .7;
}
.kicker.no-rule::before{ display:none; }
.idx{
  font-family: "Fraunces", serif; font-weight: 400; font-style: italic;
  font-size: .95rem; color: var(--accent); letter-spacing: .02em;
}
.lead{ font-size: clamp(1.15rem, 1.4vw + .7rem, 1.6rem); line-height: 1.5; color: var(--ink-soft); font-weight: 350; }
em, .it { font-style: italic; }
.amp{ font-family:"Fraunces",serif; font-style: italic; font-weight: 400; }

/* ---------- LAYOUT ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section{ padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.hair{ height:1px; background: var(--line); border:0; }

/* ============ TOPBAR ============ */
.announce{
  background: var(--espresso); color: var(--creme);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap; position: relative;
}
:root[data-theme="dark"] .announce,
:root:not([data-theme="light"]) .announce{ background:#120b06; }
.announce .track{
  display: inline-flex; gap: 3rem; padding-block: .55rem;
  will-change: transform; animation: marq 34s linear infinite;
}
.announce .track span{ display:inline-flex; align-items:center; gap:.7rem; opacity:.92; }
.announce .track span::before{ content:"✳"; color: var(--ambar); font-size:.8em; }
@keyframes marq{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .announce .track{ animation: none; } }

.nav{
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem var(--pad);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.solid{
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: .75rem;
}
.brand{ display:flex; align-items:baseline; gap:.55rem; font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; letter-spacing:-.02em; }
.brand .b-mark{ color: var(--accent); font-style: italic; }
.brand small{ font-family:"Inter",sans-serif; font-weight:600; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color: var(--ink-mute); align-self:center; }
.nav-links{ display:flex; align-items:center; gap: clamp(1rem,2vw,2.1rem); }
.nav-links a{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color: var(--ink-soft); position:relative; padding-block:.3rem; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--accent); transform:scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out); }
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.85em 1.5em; border-radius: 100px; position:relative; overflow:hidden;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn-solid{ background: var(--espresso); color: var(--creme); }
:root[data-theme="dark"] .btn-solid, :root:not([data-theme="light"]) .btn-solid{ background: var(--accent); color:#1B120B; }
.btn-solid:hover{ background: var(--accent); color:#1B120B; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .btn-solid:hover, :root:not([data-theme="light"]) .btn-solid:hover{ background: var(--creme); color: var(--espresso); }
.btn-ghost{ border:1px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-light{ background: var(--creme); color: var(--espresso); }
.btn-light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-outline-light{ border:1px solid rgba(246,236,216,.5); color: var(--hero-ink); }
.btn-outline-light:hover{ background: var(--hero-ink); color: var(--espresso); }

/* theme toggle + burger */
.icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); transition:.35s var(--ease); }
.icon-btn:hover{ border-color: var(--accent); color: var(--accent); transform: rotate(-8deg); }
.icon-btn svg{ width:18px; height:18px; }
.sun{ display:none; } .moon{ display:block; }
:root[data-theme="dark"] .sun, :root:not([data-theme="light"]) .sun{ display:block; }
:root[data-theme="dark"] .moon, :root:not([data-theme="light"]) .moon{ display:none; }
.burger{ display:none; }

/* ============ HERO ============ */
.hero{ position: relative; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:120%; object-fit:cover; object-position:center 40%; will-change: transform; }
.hero::before{ /* vinheta p/ leitura do texto */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(15,9,4,.86) 0%, rgba(15,9,4,.35) 42%, rgba(15,9,4,.12) 70%, rgba(15,9,4,.45) 100%),
    linear-gradient(105deg, rgba(15,9,4,.6) 0%, rgba(15,9,4,0) 55%);
}
.hero-inner{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 var(--pad) clamp(3rem,7vw,6rem); color: var(--hero-ink); }
.hero .kicker{ color: var(--ambar); }
.hero h1{
  font-size: clamp(2.9rem, 8.2vw, 8rem);
  font-weight: 340; letter-spacing:-.025em; line-height:.96;
  max-width: 16ch; margin:.7rem 0 0;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero h1 em{ font-weight: 500; color: var(--ambar); font-variation-settings: "SOFT" 40, "WONK" 1; }
.hero h1 .thin{ font-weight: 300; font-style: italic; color: var(--creme); }
.hero-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; margin-top: clamp(1.6rem,3vw,2.6rem); }
.hero-foot p{ max-width: 44ch; color: #EAD9BE; font-size: clamp(1rem,1vw+.6rem,1.22rem); font-weight: 350; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-tags{ display:flex; flex-wrap:wrap; gap: .5rem 1.6rem; margin-top: 2.2rem; padding-top:1.4rem; border-top:1px solid rgba(246,236,216,.22); }
.hero-tags span{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:#E4D2B4; display:inline-flex; gap:.6rem; align-items:center; }
.hero-tags span b{ font-family:"Fraunces",serif; font-style:italic; font-weight:400; color: var(--ambar); font-size:1.05rem; letter-spacing:0; text-transform:none; }
.scrollcue{ position:absolute; right: var(--pad); bottom: clamp(3rem,7vw,6rem); writing-mode: vertical-rl; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:#E4D2B4; display:flex; align-items:center; gap:.9rem; }
.scrollcue::after{ content:""; width:1px; height:52px; background: linear-gradient(var(--ambar), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform: scaleY(.4); opacity:.4; transform-origin:top;} 50%{ transform: scaleY(1); opacity:1; transform-origin:top;} }
@media (prefers-reduced-motion: reduce){ .scrollcue::after{ animation:none; } }

/* ============ MARQUEE de especialidades ============ */
.ticker{ border-block:1px solid var(--line); padding-block: clamp(1.4rem,3vw,2.4rem); overflow:hidden; background: var(--bg-warm); }
.ticker .track{ display:inline-flex; align-items:center; gap:2.5rem; white-space:nowrap; will-change:transform; animation: marq 40s linear infinite; }
.ticker span{ font-family:"Fraunces",serif; font-size: clamp(1.8rem,4vw,3.4rem); font-weight:400; font-style:italic; color: var(--ink); display:inline-flex; align-items:center; gap:2.5rem; }
.ticker span::after{ content:"✳"; font-style:normal; color: var(--accent); font-size:.5em; }
.ticker .out{ color: transparent; -webkit-text-stroke: 1px var(--ink-mute); }
@media (prefers-reduced-motion: reduce){ .ticker .track{ animation:none; } }

/* ============ MANIFESTO ============ */
.manifesto{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,5.5rem); align-items:center; }
.manifesto .col-txt{ max-width: 40ch; }
.manifesto h2{ font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight:360; margin:1.2rem 0 1.4rem; }
.manifesto h2 em{ color: var(--accent); }
.manifesto p + p{ margin-top: 1.1rem; }
.manifesto .sign{ margin-top:2rem; display:flex; align-items:center; gap:1rem; }
.manifesto .sign .nm{ font-family:"Fraunces",serif; font-style:italic; font-size:1.5rem; color:var(--ink); }
.manifesto .sign .rl{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-mute); }
.manifesto .col-img{ position:relative; }
.frame{ position:relative; overflow:hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out); }
.frame:hover img{ transform: scale(1.05); }
.manifesto .col-img .stamp{
  position:absolute; left: -2.2rem; bottom: -1.8rem; z-index:3;
  width: clamp(118px,13vw,158px); height: clamp(118px,13vw,158px);
}
.seal{ width:100%; height:100%; animation: spin 40s linear infinite; }
@media (prefers-reduced-motion: reduce){ .seal{ animation:none; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
.seal text{ font-family:"Inter",sans-serif; font-size:9.2px; letter-spacing:1.5px; font-weight:600; fill: var(--seal); text-transform:uppercase; }
.seal .core{ font-family:"Fraunces",serif; }

/* ============ VITRINE / CARDÁPIO ============ */
.vitrine-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom: clamp(2.5rem,5vw,4rem); }
.vitrine-head h2{ font-size: clamp(2.2rem,5.5vw,4.6rem); font-weight:350; max-width: 15ch; }
.vitrine-head h2 em{ color: var(--accent); }
.vitrine-head .note{ max-width: 34ch; color: var(--ink-soft); }

.menu-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,1.8vw,1.6rem); }
.card{ position:relative; overflow:hidden; border-radius: var(--radius); background: var(--surface); }
.card .ph{ position:relative; overflow:hidden; }
.card .ph img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out), filter .6s var(--ease); }
.card:hover .ph img{ transform: scale(1.06); }
.card .ph::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(15,9,4,.72), rgba(15,9,4,0) 60%); opacity:.95; transition:.5s var(--ease); }
.card .meta{ position:absolute; left:0; right:0; bottom:0; padding: clamp(1.1rem,2vw,1.6rem); color: var(--creme); z-index:2; }
.card .tag{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: var(--ambar); font-weight:600; }
.card h3{ font-size: clamp(1.35rem,2vw,1.9rem); font-weight:450; margin:.35rem 0 .25rem; color:#FCF4E4; }
.card .desc{ font-size:.9rem; color:#E7D6BC; max-width: 34ch; line-height:1.55; opacity:.92; }
.card .price{ position:absolute; top: clamp(1rem,2vw,1.4rem); right: clamp(1rem,2vw,1.4rem); z-index:2;
  font-family:"Fraunces",serif; font-weight:500; font-size:1.05rem; color: var(--espresso);
  background: var(--creme); padding:.45em .8em; border-radius:100px; box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
  transition: transform .5s var(--ease); }
.card:hover .price{ transform: translateY(-3px) rotate(-3deg); }
.card .price small{ font-family:"Inter",sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.05em; }

/* alturas / spans editoriais (quebra o grid uniforme) */
.card .ph{ height: 100%; }
.c-feature{ grid-column: span 6; }
.c-feature .ph{ aspect-ratio: 1/1.02; }
.c-tall{ grid-column: span 3; }
.c-tall .ph{ aspect-ratio: 3/4.35; }
.c-wide{ grid-column: span 6; }
.c-wide .ph{ aspect-ratio: 16/10.5; }
.c-std{ grid-column: span 4; }
.c-std .ph{ aspect-ratio: 4/4.6; }
.c-half{ grid-column: span 6; }
.c-half .ph{ aspect-ratio: 16/9.4; }

/* faixa preço "outros itens" */
.pricelist{ margin-top: clamp(2.5rem,5vw,3.6rem); display:grid; grid-template-columns: repeat(2,1fr); gap: .2rem clamp(2.5rem,6vw,6rem); }
.pl-row{ display:flex; align-items:baseline; gap:.9rem; padding:.95rem 0; border-bottom:1px solid var(--line-soft); }
.pl-row .nm{ font-family:"Fraunces",serif; font-size:1.18rem; font-weight:450; }
.pl-row .dots{ flex:1; border-bottom:1px dotted var(--line); transform: translateY(-4px); }
.pl-row .pr{ font-family:"Fraunces",serif; font-weight:500; color: var(--accent); }
.pl-row small{ display:block; font-family:"Inter",sans-serif; font-size:.78rem; color: var(--ink-mute); letter-spacing:.02em; font-weight:400; }

/* ============ ATELIÊ (full-bleed) ============ */
.atelie{ position:relative; color: var(--hero-ink); overflow:hidden; }
.atelie-bg{ position:absolute; inset:0; z-index:-2; }
.atelie-bg img{ width:100%; height:118%; object-fit:cover; object-position:center 30%; filter: grayscale(.15) contrast(1.02); will-change:transform; }
.atelie::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(100deg, rgba(15,9,4,.9) 0%, rgba(15,9,4,.65) 45%, rgba(15,9,4,.25) 100%); }
.atelie .wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.atelie h2{ font-size: clamp(2rem,4.6vw,4rem); font-weight:340; margin:1.1rem 0 1.3rem; }
.atelie h2 em{ color: var(--ambar); }
.atelie .kicker{ color: var(--ambar); }
.atelie p{ color:#E7D6BC; max-width:46ch; }
.atelie p + p{ margin-top:1rem; }
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2.4rem; }
.stat{ border-top:1px solid rgba(246,236,216,.25); padding-top:1rem; }
.stat .n{ font-family:"Fraunces",serif; font-size: clamp(2rem,3.2vw,3rem); font-weight:500; color: var(--hero-ink); line-height:1; }
.stat .n em{ color: var(--ambar); font-size:.7em; }
.stat .l{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#CDB58F; margin-top:.5rem; }
.atelie .aside-img{ display:grid; gap:1rem; }
.atelie .aside-img .frame{ box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.atelie .aside-img .frame:first-child{ aspect-ratio: 4/3; }
.atelie .aside-img .frame:last-child{ aspect-ratio: 16/10; margin-left: clamp(1rem,4vw,3.5rem); }

/* ============ CONFEITARIA ============ */
.doce-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,1.8vw,1.5rem); align-items:stretch; }
.doce-lead{ grid-column: span 4; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.15rem; }
.doce-main{ grid-column: span 5; }
.doce-stack{ grid-column: span 3; display:flex; flex-direction:column; gap: clamp(1rem,1.8vw,1.5rem); }
.doce-stack .doce-item{ flex:1; }
.doce-grid h2{ font-size: clamp(2rem,4.4vw,3.8rem); font-weight:350; }
.doce-grid h2 em{ color: var(--accent); }
.doce-lead p{ color: var(--ink-soft); max-width: 34ch; }
.doce-item{ position:relative; overflow:hidden; border-radius: var(--radius); }
.doce-item img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; transition: transform 1.1s var(--ease-out); }
.doce-main img{ aspect-ratio: 4/4.7; }
.doce-stack .doce-item img{ aspect-ratio:auto; height:100%; }
.doce-item:hover img{ transform: scale(1.05); }
.doce-item .cap{ position:absolute; left:0; bottom:0; padding:1.1rem 1.2rem; color:var(--creme); z-index:2; }
.doce-item::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(15,9,4,.6), transparent 55%); }
.doce-item .cap b{ font-family:"Fraunces",serif; font-weight:450; font-size:1.15rem; display:block; }
.doce-item .cap span{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ambar); }

/* ============ CAFÉ (split) ============ */
.cafe{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; gap:0; background: var(--bg-warm); border-block:1px solid var(--line); }
.cafe .cafe-img{ position:relative; overflow:hidden; min-height: 60vh; }
.cafe .cafe-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cafe .cafe-txt{ padding: clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5rem); display:flex; flex-direction:column; justify-content:center; }
.cafe h2{ font-size: clamp(2rem,4.2vw,3.6rem); font-weight:350; margin:1rem 0 1.2rem; }
.cafe h2 em{ color: var(--accent); }
.cafe p{ color: var(--ink-soft); max-width: 40ch; }
.cafe .pours{ margin-top:2rem; display:flex; flex-direction:column; gap:.2rem; }

/* ============ APP & DELIVERY ============ */
.delivery{ position:relative; background: var(--espresso); color: var(--hero-ink); overflow:hidden; }
:root[data-theme="dark"] .delivery, :root:not([data-theme="light"]) .delivery{ background:#140c06; }
.delivery::before{ content:""; position:absolute; right:-8%; top:-20%; width:55%; height:140%; background: radial-gradient(circle at 60% 40%, rgba(200,135,62,.18), transparent 60%); pointer-events:none; }
.delivery .wrap{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,5rem); align-items:center; position:relative; }
.delivery .kicker{ color: var(--ambar); }
.delivery h2{ font-size: clamp(2.1rem,5vw,4.4rem); font-weight:340; margin:1rem 0 1.3rem; }
.delivery h2 em{ color: var(--ambar); }
.delivery p{ color:#E7D6BC; max-width: 42ch; }
.delivery .chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin: 1.8rem 0 2.2rem; }
.delivery .chips span{ border:1px solid rgba(246,236,216,.28); border-radius:100px; padding:.5em 1.1em; font-size:.78rem; letter-spacing:.08em; }
.delivery .cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* cartão pedido estilizado */
.order-card{ background: var(--creme); color: var(--espresso); border-radius: 10px; padding: clamp(1.5rem,3vw,2.3rem); box-shadow: 0 50px 90px -50px rgba(0,0,0,.8); max-width: 420px; margin-inline:auto; width:100%; }
.order-card .oc-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.order-card .oc-top b{ font-family:"Fraunces",serif; font-size:1.2rem; font-weight:500; }
.order-card .oc-top .live{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--trigo); display:inline-flex; align-items:center; gap:.4rem; }
.order-card .oc-top .live::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--trigo); box-shadow:0 0 0 0 rgba(107,142,78,.6); animation: pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(107,142,78,0);} 100%{ box-shadow:0 0 0 0 rgba(107,142,78,0);} }
@media (prefers-reduced-motion: reduce){ .order-card .oc-top .live::before{ animation:none; } }
.oc-row{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px dashed var(--line); }
.oc-row img{ width:52px; height:52px; border-radius:6px; object-fit:cover; }
.oc-row .info{ flex:1; }
.oc-row .info b{ font-family:"Fraunces",serif; font-weight:500; font-size:1rem; }
.oc-row .info small{ display:block; color: var(--ink-mute); font-size:.78rem; }
.oc-row .qp{ font-family:"Fraunces",serif; font-weight:500; color: var(--caramelo); }
.oc-total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:1.1rem; }
.oc-total span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-mute); }
.oc-total b{ font-family:"Fraunces",serif; font-size:1.6rem; font-weight:600; }

/* ============ CONTATO / RODAPÉ ============ */
.contato{ background: var(--bg-warm); }
.contato .wrap{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.contato h2{ font-size: clamp(2rem,5vw,4rem); font-weight:350; margin:1rem 0 1.4rem; }
.contato h2 em{ color: var(--accent); }
.info-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.8rem 2rem; margin-top: 2rem; }
.info-b .l{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); font-weight:600; }
.info-b p{ margin-top:.5rem; color: var(--ink-soft); line-height:1.6; }
.info-b a:hover{ color: var(--accent); }
.hours-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.4rem); box-shadow: var(--shadow-sm); }
.hours-card h3{ font-size:1.4rem; font-weight:500; margin-bottom:1.2rem; }
.hr-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.hr-row:last-child{ border-bottom:0; }
.hr-row .d{ color: var(--ink-soft); }
.hr-row .t{ font-family:"Fraunces",serif; font-weight:450; }
.hr-row.now{ color: var(--accent); }
.hr-row.now .t{ color: var(--accent); }
.hours-card .open-now{ margin-top:1.2rem; display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: var(--trigo); font-weight:600; }
.hours-card .open-now::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--trigo); }

footer{ background: var(--espresso); color: var(--creme); padding: clamp(3.5rem,7vw,6rem) var(--pad) 2.5rem; }
:root[data-theme="dark"] footer, :root:not([data-theme="light"]) footer{ background:#120b06; }
.foot-top{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(246,236,216,.16); }
.foot-brand .brand{ font-size:2rem; color: var(--creme); }
.foot-brand .brand small{ color:#C9B291; }
.foot-brand p{ color:#CDB58F; max-width: 34ch; margin-top:1rem; font-size:.95rem; }
.foot-col h4{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ambar); margin-bottom:1.1rem; font-family:"Inter",sans-serif; font-weight:600; }
.foot-col a, .foot-col p{ display:block; color:#DBC7A6; font-size:.92rem; padding:.28rem 0; }
.foot-col a:hover{ color: var(--creme); }
.foot-bottom{ max-width: var(--maxw); margin: 1.8rem auto 0; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.78rem; color:#B49B78; letter-spacing:.04em; }
.foot-bottom a:hover{ color: var(--creme); }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.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; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* mobile menu panel */
.mobile-panel{ position: fixed; inset:0; z-index:300; background: var(--bg); transform: translateY(-100%); transition: transform .6s var(--ease-out); display:flex; flex-direction:column; padding: 1.1rem var(--pad) 3rem; visibility:hidden; }
.mobile-panel.open{ transform:none; visibility:visible; }
.mp-head{ display:flex; align-items:center; justify-content:space-between; }
.mobile-panel nav{ margin-top: auto; display:flex; flex-direction:column; gap:.2rem; }
.mobile-panel nav a{ font-family:"Fraunces",serif; font-size: clamp(2rem,9vw,3.4rem); font-weight:400; padding:.35rem 0; border-bottom:1px solid var(--line-soft); }
.mobile-panel nav a em{ color: var(--accent); font-size:.5em; font-style:italic; vertical-align:middle; margin-right:.6rem; }
.mobile-panel .mp-foot{ margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* ============ RESPONSIVO ============ */
@media (max-width: 1080px){
  .c-feature{ grid-column: span 12; } .c-feature .ph{ aspect-ratio:16/11; }
  .c-tall{ grid-column: span 6; } .c-tall .ph{ aspect-ratio:3/4; }
  .c-wide{ grid-column: span 12; }
  .c-std{ grid-column: span 6; } .c-std .ph{ aspect-ratio:4/4.2; }
  .c-half{ grid-column: span 12; }
  .atelie .wrap, .manifesto, .delivery .wrap, .contato .wrap{ grid-template-columns: 1fr; }
  .manifesto .col-img{ order:-1; }
  .doce-lead{ grid-column: 1 / -1; }
  .doce-main{ grid-column: span 7; }
  .doce-stack{ grid-column: span 5; }
}
@media (max-width: 820px){
  .nav-links, .nav .btn:not(.icon-btn){ display:none; }
  .burger{ display:grid; }
  .cafe{ grid-template-columns:1fr; }
  .cafe .cafe-img{ min-height: 52vh; }
  .foot-top{ grid-template-columns: 1fr 1fr; }
  .foot-brand{ grid-column: 1 / -1; }
  .scrollcue{ display:none; }
  .pricelist{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
  .atelie .aside-img{ grid-template-columns:1fr 1fr; }
  .atelie .aside-img .frame:last-child{ margin-left:0; }
}
@media (max-width: 560px){
  .c-tall, .c-std{ grid-column: span 12; }
  .c-tall .ph{ aspect-ratio:4/3.4; } .c-std .ph{ aspect-ratio:4/3.4; }
  .doce-main, .doce-stack{ grid-column: 1 / -1; }
  .doce-stack{ flex-direction:column; }
  .doce-stack .doce-item img{ aspect-ratio:4/3; height:auto; }
  .stats{ grid-template-columns:1fr; gap:.6rem; }
  .foot-top{ grid-template-columns:1fr; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .manifesto .col-img .stamp{ left:auto; right:.5rem; bottom:-1.2rem; }
}
