/* ==========================================================================
   IN HOUSE CAR DETAIL — folha de estilo principal
   Fase 0 + Fase 1
   Paleta derivada da logo: azul-marinho profundo, ouro escovado, prata cromada
   ========================================================================== */

/* --------------------------------------------------------------------------
   FASE 2 — FOTO DE FUNDO DO HERO
   Quando tiver a foto, salve em assets/img/hero/hero-bg.jpg (1920x1080)
   e DESCOMENTE a linha --hero-photo abaixo. Sem ela, o hero usa a
   textura hexagonal da marca (que também fica bom, sem quebrar nada).
   -------------------------------------------------------------------------- */

:root{
  /* --hero-photo: url('../img/hero/hero-bg.jpg'); */

  /* Azuis — do mais profundo (fundo da página) ao mais claro (cards) */
  --navy-900:#010d1c;
  --navy-850:#03152a;
  --navy-800:#061c34;
  --navy-700:#0b2542;
  --navy-600:#123055;

  /* Ouro — escovado, vem do anel e da palavra "IN" da logo */
  --gold:#ba8a3c;
  --gold-bright:#e3bb74;
  --gold-dim:#7d6029;

  /* Prata — cromado da palavra "HOUSE". Token novo nesta fase. */
  --silver:#c8cfd8;
  --silver-bright:#eef2f6;
  --silver-dim:#8d98a5;

  --border:#14314f;
  --border-soft:#0f2540;
  --text:#f2ede2;
  --text-muted:#9fb0c2;
  --danger:#c05a4a;
  --ok:#5f9f7a;

  --radius:14px;
  --radius-sm:10px;
  --maxw:1180px;

  /* Textura hexagonal da logo, em SVG inline (596 bytes, zero request) */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.7' height='48.0' viewBox='0 0 27.7 48.0'%3E%3Cg fill='none' stroke='%23ba8a3c' stroke-width='1' stroke-opacity='0.55'%3E%3Cpath d='M0.0 -16.0 13.9 -8.0 13.9 8.0 0.0 16.0 -13.9 8.0 -13.9 -8.0Z'/%3E%3Cpath d='M27.7 -16.0 41.6 -8.0 41.6 8.0 27.7 16.0 13.9 8.0 13.9 -8.0Z'/%3E%3Cpath d='M13.9 8.0 27.7 16.0 27.7 32.0 13.9 40.0 0.0 32.0 0.0 16.0Z'/%3E%3Cpath d='M0.0 32.0 13.9 40.0 13.9 56.0 0.0 64.0 -13.9 56.0 -13.9 40.0Z'/%3E%3Cpath d='M27.7 32.0 41.6 40.0 41.6 56.0 27.7 64.0 13.9 56.0 13.9 40.0Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================ BASE ============================ */
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* iOS não reescala fonte ao girar a tela */
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;        /* texto longo não estoura a caixa */
  -webkit-tap-highlight-color:rgba(186,138,60,0.18);
  position:relative;
}

/* Textura hexagonal global — camada de fundo fixa, muito discreta */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background-image:var(--hex);
  background-size:55px 95px;
  opacity:0.22;
  pointer-events:none;
}
/* Vinheta: escurece as bordas e concentra a atenção no centro */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(1,9,20,0.75) 100%);
}

::selection{background:var(--gold);color:#07121f;}
a{color:inherit;}
img{
  max-width:100%;height:auto;display:block;
  /* height:auto é essencial: os <img> declaram width/height no HTML para o
     navegador reservar espaço, e sem isto o CSS encolhe só a largura e a
     imagem achata. Regras mais específicas (.slot img) continuam valendo. */
}
button{font-family:inherit;cursor:pointer;}

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.full-bleed{width:100%;}

h1,h2,h3{font-family:'Bebas Neue',sans-serif;letter-spacing:0.02em;font-weight:400;margin:0;}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold-dim);display:inline-block;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}

section{padding:96px 0;position:relative;}
/* Sem isto, o header fixo cobre o topo da seção ao clicar nas âncoras */
section[id],footer[id]{scroll-margin-top:88px;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(32px,4.5vw,46px);margin-top:14px;}
.section-head h2 em{font-style:normal;color:var(--silver-bright);}
.section-head p{color:var(--text-muted);font-size:16px;margin-top:14px;line-height:1.65;max-width:62ch;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center p{margin-left:auto;margin-right:auto;}

/* ============================ BOTÕES ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-gold{
  background:linear-gradient(170deg,var(--gold-bright) 0%,var(--gold) 55%,#9c7231 100%);
  color:#0a1421;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),0 8px 26px rgba(186,138,60,0.32);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--silver);}
.btn-ghost:hover{border-color:var(--gold-dim);color:var(--gold-bright);}
.btn:disabled{opacity:0.32;cursor:not-allowed;transform:none;box-shadow:none;}

/* ============================ HEADER ============================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(1,13,28,0.86);backdrop-filter:blur(12px);
  transition:background .2s ease;
  border-bottom:1px solid var(--border-soft);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--gold-dim),0 0 18px rgba(186,138,60,0.18);
}
.logo{display:flex;flex-direction:column;line-height:0.85;}
.logo b{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.06em;color:var(--silver-bright);}
.logo span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.3em;color:var(--gold);margin-top:4px;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:14px;color:var(--text-muted);text-decoration:none;transition:color .15s;}
.nav-links a:hover{color:var(--gold-bright);}
.nav-cta{padding:10px 22px;font-size:13px;}
.burger{display:none;background:none;border:none;color:var(--silver);font-size:26px;padding:4px;line-height:1;}
.mobile-menu{
  display:none;position:fixed;inset:76px 0 0 0;background:var(--navy-900);z-index:99;
  flex-direction:column;padding:34px 24px;gap:26px;
}
.mobile-menu a{font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--text);text-decoration:none;}
.mobile-menu a:hover{color:var(--gold-bright);}
.mobile-menu.open{display:flex;}
body.menu-aberto header{background:var(--navy-900);backdrop-filter:none;}

/* ============================ HERO ============================ */
.hero{
  padding:150px 0 92px;position:relative;isolation:isolate;overflow:hidden;
}
/* Camada de foto (Fase 2). Sem --hero-photo, fica invisível. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-photo,none);
  background-size:cover;background-position:center 60%;
  opacity:0.42;
  filter:saturate(0.7) contrast(1.05);
}
/* Overlay azul-marinho + brilho dourado no canto superior direito */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 48% at 84% 12%, rgba(186,138,60,0.16), transparent 70%),
    linear-gradient(180deg, rgba(1,13,28,0.55) 0%, rgba(1,13,28,0.88) 62%, var(--navy-900) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:52px;align-items:center;}
.hero h1{font-size:clamp(42px,5.8vw,74px);line-height:0.96;color:var(--silver-bright);}
.hero h1 .gold{
  color:var(--gold-bright);
  text-shadow:0 0 28px rgba(186,138,60,0.28);
}
.hero p.lead{font-size:18px;color:var(--text-muted);max-width:52ch;margin:24px 0 32px;line-height:1.65;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{
  margin-top:24px;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--text-muted);display:flex;align-items:center;gap:9px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 9px var(--ok);}

/* Badge do hero: logo + anel girando + clarão de luz que passa uma vez ao carregar */
.hero-badge{display:flex;align-items:center;justify-content:center;position:relative;}
.hero-badge img{
  width:100%;height:auto;max-width:420px;border-radius:50%;
  filter:drop-shadow(0 22px 64px rgba(0,0,0,0.6));
}
.hero-badge .ring{
  position:absolute;inset:0;margin:auto;width:100%;max-width:462px;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(186,138,60,0.32);
  border-top-color:rgba(227,187,116,0.85);
  animation:spin 26s linear infinite;
  pointer-events:none;
}
.hero-badge .flare{
  position:absolute;inset:0;margin:auto;width:100%;max-width:420px;aspect-ratio:1;
  border-radius:50%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);
          mask-image:radial-gradient(circle,#000 99%,transparent 100%);
}
.hero-badge .flare::before{
  content:'';position:absolute;top:-40%;left:-120%;width:60%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.30),transparent);
  transform:rotate(14deg);
  animation:sweep 1.5s ease-out 0.5s 1 both;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes sweep{from{left:-120%;}to{left:170%;}}

/* ============================ SLOTS DE FOTO ============================
   Sistema compartilhado. Todo lugar que espera uma foto na Fase 2 usa .slot.
   Enquanto não há <img>, mostra o código do slot e a proporção esperada.
   ====================================================================== */
.slot{
  position:relative;overflow:hidden;border-radius:var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(186,138,60,0.05), transparent 60%),
    var(--navy-800);
  border:1px dashed var(--border);
  display:grid;
  grid-template:1fr / 1fr;   /* linha definida: sem isto height:100% na <img>
                                vira dependência cíclica e ela usa a altura
                                natural, transbordando e mostrando só o topo */
  place-items:center;
  min-width:0;min-height:0;
}
.slot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.slot-empty{
  display:grid;place-items:center;gap:6px;padding:14px;text-align:center;
  font-family:'JetBrains Mono',monospace;color:var(--silver-dim);
}
.slot-empty .code{
  font-size:11px;letter-spacing:0.14em;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:999px;padding:3px 10px;
}
.slot-empty .meta{font-size:10px;letter-spacing:0.06em;opacity:0.8;line-height:1.5;}
.slot.is-filled{border-style:solid;border-color:var(--border-soft);}
.slot.is-filled .slot-empty{display:none;}
.slot:has(img) .slot-empty{display:none;}
.slot:has(img){border-style:solid;border-color:var(--border-soft);}

.ratio-16-9{aspect-ratio:16/9;}
.ratio-4-3{aspect-ratio:4/3;}
.ratio-1-1{aspect-ratio:1/1;}
.ratio-21-9{aspect-ratio:21/9;}
.ratio-3-4{aspect-ratio:3/4;}
.ratio-4-5{aspect-ratio:4/5;}

/* ============================ SERVIÇOS ============================ */
#servicos{background:var(--navy-850);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.service-card{
  position:relative;
  background:var(--navy-700);border:1px solid var(--border);border-radius:var(--radius);
  padding:0;overflow:hidden;text-align:left;width:100%;color:inherit;
  transition:border-color .2s, transform .2s;
  display:flex;flex-direction:column;
}
.service-card:hover{border-color:var(--gold-dim);transform:translateY(-3px);}
/* O título é o botão; o ::after estica a área clicável sobre o card inteiro */
.card-trigger{
  background:none;border:none;padding:0;margin:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;
}
.card-trigger::after{content:'';position:absolute;inset:0;z-index:1;}
.card-trigger:focus-visible{outline:none;}
.card-trigger:focus-visible::after{outline:2px solid var(--gold-bright);outline-offset:-4px;border-radius:var(--radius);}
.service-card .slot{border-radius:0;border:none;border-bottom:1px solid var(--border);}
.service-card:hover .slot img{transform:scale(1.03);}
.service-card .slot img{transition:transform .35s ease;}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.service-icon{width:40px;height:40px;color:var(--gold);margin-bottom:16px;}
.service-card h3{font-size:22px;letter-spacing:0.03em;margin-bottom:9px;color:var(--silver-bright);}
.service-card p{font-size:14px;color:var(--text-muted);line-height:1.6;margin:0;flex:1;}
.service-card .tag{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--silver-dim);letter-spacing:0.06em;
}
.service-card .tag::before{content:'';width:14px;height:1px;background:var(--gold-dim);}
.service-card:hover .tag{color:var(--gold-bright);}

/* Selo de requisito (água + energia) */
.requisito{
  display:flex;gap:16px;align-items:flex-start;background:var(--navy-800);
  border:1px solid var(--gold-dim);border-left-width:3px;
  border-radius:var(--radius);padding:22px 24px;margin-top:40px;
}
.requisito svg{width:28px;height:28px;color:var(--gold);flex:0 0 auto;margin-top:2px;}
.requisito b{display:block;color:var(--gold-bright);font-size:15px;margin-bottom:5px;}
.requisito p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.65;}

/* ============ A ESTRUTURA CHEGA JUNTO (dentro de Como funciona) ============ */
.estrutura{
  position:relative;margin-top:22px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--navy-800);
  min-height:340px;display:grid;align-items:end;isolation:isolate;
}
.estrutura .slot{
  position:absolute;inset:0;z-index:-2;border:none;border-radius:0;aspect-ratio:auto;
}
.estrutura .slot img{height:100%;width:100%;object-fit:cover;}
.estrutura-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(1,13,28,0.95) 0%, rgba(1,13,28,0.82) 46%, rgba(1,13,28,0.35) 100%);
}
.estrutura-content{padding:36px 34px;}
.estrutura-content h3{font-size:clamp(26px,3.4vw,38px);color:var(--silver-bright);max-width:17ch;}
.estrutura-content > p{color:var(--text-muted);font-size:15px;line-height:1.65;max-width:52ch;margin:14px 0 0;}
.estrutura-stats{display:flex;gap:38px;margin-top:26px;flex-wrap:wrap;}
.estrutura-stats div b{
  display:block;font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--gold-bright);line-height:1;
}
.estrutura-stats div span{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-muted);
  letter-spacing:0.1em;text-transform:uppercase;
}

/* ============================ ANTES / DEPOIS ============================ */
.ba{
  position:relative;max-width:900px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--navy-800);
  touch-action:pan-y;user-select:none;
}
.ba-layer{position:relative;aspect-ratio:16/10;}
.ba-layer .slot{position:absolute;inset:0;border:none;border-radius:0;aspect-ratio:auto;}
.ba-after{clip-path:inset(0 0 0 50%);}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-bright);
  transform:translateX(-1px);box-shadow:0 0 16px rgba(227,187,116,0.6);z-index:3;
}
.ba-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--navy-900);
  border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold-bright);
  font-size:15px;cursor:ew-resize;
}
.ba-badge{
  position:absolute;top:14px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(1,13,28,0.8);border:1px solid var(--border);color:var(--silver);
}
.ba-badge.left{left:14px;}
.ba-badge.right{right:14px;border-color:var(--gold-dim);color:var(--gold-bright);}
.ba-hint{
  text-align:center;margin-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--text-muted);
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0;
}

/* ============================ COMO FUNCIONA ============================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step;}
.step{
  background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;position:relative;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--gold);
  letter-spacing:0.14em;display:block;margin-bottom:14px;
}
.step-icon{width:34px;height:34px;color:var(--silver);margin-bottom:16px;}
.step h3{font-size:20px;margin:0 0 10px;color:var(--silver-bright);}
.step p{color:var(--text-muted);font-size:14px;line-height:1.65;margin:0;}

/* ============================ MOSAICO / GALERIA ============================ */
#galeria{background:var(--navy-850);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
/* Mosaico em grade: células de tamanhos diferentes, mas todas alinhadas
   dentro do mesmo quadro. A altura da linha acompanha a largura da coluna,
   então a célula base é quadrada. `dense` fecha qualquer buraco. */
.mosaico{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:calc((min(100vw,1228px) - 84px) / 4);
  grid-auto-flow:dense;
  gap:12px;
}
.mosaico .slot{
  aspect-ratio:auto;height:auto;width:auto;border-radius:var(--radius-sm);
  grid-column:span 1;grid-row:span 1;
}
.mosaico .slot img{width:100%;height:100%;object-fit:cover;display:block;}
.mosaico .m-big{grid-column:span 2;grid-row:span 2;}   /* quadro grande */
.mosaico .m-wide{grid-column:span 2;}                  /* quadro largo  */
.mosaico .m-tall{grid-row:span 2;}                     /* quadro alto   */
.mosaico .slot.is-filled{cursor:zoom-in;}
.mosaico .slot img{transition:transform .35s ease, filter .35s ease;}
.mosaico .slot.is-filled:hover img{transform:scale(1.04);filter:brightness(1.08);}

/* Lightbox */
.lightbox{
  display:none;position:fixed;inset:0;z-index:300;background:rgba(1,9,20,0.93);
  align-items:center;justify-content:center;padding:32px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;border-radius:var(--radius);border:1px solid var(--gold-dim);}
.lightbox-close{
  position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;
  background:var(--navy-800);border:1px solid var(--border);color:var(--silver);font-size:17px;
}
.lightbox-close:hover{color:var(--gold-bright);border-color:var(--gold-dim);}

/* ============================ MODAL DE SERVIÇO ============================ */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(1,9,20,0.82);z-index:200;
  align-items:flex-start;justify-content:center;padding:56px 20px;overflow-y:auto;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--navy-700);border:1px solid var(--border);border-radius:16px;
  max-width:660px;width:100%;padding:34px;position:relative;
}
.modal-close{
  position:absolute;top:18px;right:18px;background:var(--navy-800);border:1px solid var(--border);
  border-radius:50%;width:34px;height:34px;color:var(--text-muted);font-size:16px;line-height:1;
}
.modal-close:hover{color:var(--gold-bright);border-color:var(--gold-dim);}
.modal-icon{width:38px;height:38px;color:var(--gold);margin-bottom:14px;}
.modal h3{font-size:28px;margin-bottom:8px;color:var(--silver-bright);}
.modal .desc{color:var(--text-muted);font-size:14px;line-height:1.7;margin-bottom:22px;max-width:62ch;}
.modal-list{margin:0 0 24px;padding:0;list-style:none;}
.modal-list li{font-size:14px;color:var(--text);padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--border);}
.modal-list li:last-child{border-bottom:none;}
.modal-list li::before{content:'';position:absolute;left:2px;top:15px;width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);}
.modal-list li::after{content:'';position:absolute;left:5px;top:18px;width:4px;height:4px;border-radius:50%;background:var(--gold-bright);}

/* Galeria do modal: 1 grande + 2 pequenas (formato diferente do mosaico) */
/* Tira rolável: as fotos entram inteiras, verticais ou horizontais */
.modal-gallery{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;margin-bottom:22px;
  scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;
}
.modal-gallery::-webkit-scrollbar{height:6px;}
.modal-gallery::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px;}
.modal-gallery .slot{flex:0 0 auto;height:250px;width:188px;aspect-ratio:auto;}
.modal-gallery .slot.is-filled{width:auto;}
.modal-gallery .slot.is-filled img{position:static;height:250px;width:auto;object-fit:cover;}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ============================ AGENDAMENTO ============================ */
#agendamento{background:var(--navy-850);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.booking-card{
  max-width:720px;margin:0 auto;background:var(--navy-700);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.stepper{display:flex;border-bottom:1px solid var(--border);}
.stepper .s{
  flex:1;text-align:center;padding:16px 8px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-muted);letter-spacing:0.05em;border-bottom:2px solid transparent;
}
.stepper .s.active{color:var(--gold-bright);border-bottom-color:var(--gold);}
.stepper .s.done{color:var(--silver-dim);}
.booking-body{padding:34px;}
.booking-body h3{font-size:24px;color:var(--silver-bright);margin-bottom:6px;}
.booking-body .sub{color:var(--text-muted);font-size:14px;margin-bottom:26px;line-height:1.6;}

.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pick{
  border:1px solid var(--border);background:var(--navy-800);border-radius:var(--radius-sm);
  padding:16px;text-align:left;color:var(--text);transition:all .15s;
}
.pick:hover{border-color:var(--gold-dim);}
.pick.selected{border-color:var(--gold);background:rgba(186,138,60,0.1);}
.pick b{display:block;font-size:15px;font-weight:600;color:var(--silver-bright);}
.pick span{display:block;font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.5;}

.date-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;}
.date-chip{
  flex:0 0 auto;border:1px solid var(--border);background:var(--navy-800);border-radius:var(--radius-sm);
  padding:14px 18px;text-align:center;min-width:92px;color:var(--text);
}
.date-chip .dow,.date-chip .dnum{display:block;}
.date-chip .dow{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:0.1em;text-transform:uppercase;}
.date-chip .dnum{font-family:'Bebas Neue',sans-serif;font-size:26px;margin-top:4px;color:var(--silver-bright);}
.date-chip:hover{border-color:var(--gold-dim);}
.date-chip.selected{border-color:var(--gold);background:rgba(186,138,60,0.1);}

.hint{font-size:12px;color:var(--text-muted);margin-top:14px;font-family:'JetBrains Mono',monospace;line-height:1.6;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;}
.field input,.field textarea{
  background:var(--navy-800);border:1px solid var(--border);border-radius:8px;padding:12px 14px;
  color:var(--text);font-family:'Inter',sans-serif;font-size:16px;outline:none;
  transition:border-color .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#5d7086;}
.field input:focus,.field textarea:focus{border-color:var(--gold);}
.field textarea{resize:vertical;min-height:70px;}

.taxa-nota{
  grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;
  font-size:12px;color:var(--text-muted);line-height:1.6;
  background:rgba(186,138,60,0.06);border:1px solid var(--border);border-radius:8px;padding:12px 14px;
}
.taxa-nota b{color:var(--gold-bright);font-weight:600;}

.check-box{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;background:var(--navy-800);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;cursor:pointer;
}
.check-box.invalid{border-color:var(--danger);}
.check-box input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold);flex:0 0 auto;}
.check-box .txt b{display:block;font-size:14px;color:var(--silver-bright);margin-bottom:3px;}
.check-box .txt span{font-size:12px;color:var(--text-muted);line-height:1.55;}

.booking-nav{display:flex;justify-content:space-between;padding:0 34px 34px;gap:12px;}

.summary-box{background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;margin-bottom:20px;}
.summary-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px dashed var(--border);gap:14px;}
.summary-row:last-child{border-bottom:none;}
.summary-row span:first-child{color:var(--text-muted);flex:0 0 auto;}
.summary-row span:last-child{font-weight:600;text-align:right;color:var(--silver-bright);}

.aviso-prereserva{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--gold-dim);
  background:rgba(186,138,60,0.07);border-radius:var(--radius-sm);padding:16px;margin-bottom:6px;
}
.aviso-prereserva svg{width:22px;height:22px;color:var(--gold);flex:0 0 auto;margin-top:1px;}
.aviso-prereserva b{display:block;font-size:14px;color:var(--gold-bright);margin-bottom:4px;}
.aviso-prereserva p{margin:0;font-size:13px;color:var(--text-muted);line-height:1.6;}

/* ============================ TICKET ============================ */
.ticket-wrap{padding:8px 0 4px;}
.ticket{
  background:var(--navy-800);border:1px solid var(--gold-dim);border-radius:14px;position:relative;
  padding:30px;font-family:'JetBrains Mono',monospace;
}
.ticket::before,.ticket::after{
  content:'';position:absolute;width:22px;height:22px;background:var(--navy-700);
  border:1px solid var(--gold-dim);border-radius:50%;top:50%;transform:translateY(-50%);
}
.ticket::before{left:-12px;}
.ticket::after{right:-12px;}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px dashed var(--gold-dim);padding-bottom:16px;margin-bottom:16px;gap:12px;}
.ticket-top b{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:0.05em;color:var(--silver-bright);}
.ticket-code{font-size:12px;color:var(--gold-bright);text-align:right;}
.ticket-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:var(--text-muted);gap:14px;}
.ticket-row b{color:var(--text);font-weight:600;text-align:right;}
.ticket-status{
  margin-top:18px;padding:12px;text-align:center;font-size:11px;letter-spacing:0.1em;
  background:rgba(186,138,60,0.12);color:var(--gold-bright);border-radius:8px;text-transform:uppercase;
  border:1px solid var(--gold-dim);
}
.ticket-next{margin-top:16px;font-size:12px;color:var(--text-muted);line-height:1.7;font-family:'Inter',sans-serif;}

/* ============================ RODAPÉ ============================ */
footer{padding:80px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px;margin-bottom:56px;}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.foot-brand img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--gold-dim);}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.12em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;}
.foot-col p{color:var(--text-muted);font-size:14px;line-height:1.8;margin:0 0 10px;}
.foot-col a{color:var(--text-muted);font-size:14px;line-height:2;text-decoration:none;display:block;}
.foot-col a:hover{color:var(--gold-bright);}
.foot-bottom{
  border-top:1px solid var(--border-soft);padding-top:24px;display:flex;justify-content:space-between;
  color:var(--silver-dim);font-size:12px;font-family:'JetBrains Mono',monospace;flex-wrap:wrap;gap:10px;
}

/* ============================ RESPONSIVO ============================ */


/* ==========================================================================
   CATÁLOGO 2026 — níveis de lavagem, polimento e adicionais
   ========================================================================== */

/* --- Cards de nível --- */
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.service-icon{margin-bottom:0;}
.nivel{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--silver-dim);
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;
}
.preco{
  font-family:'Bebas Neue',sans-serif;font-size:38px;line-height:1;color:var(--gold-bright);
  margin:2px 0 12px;display:flex;align-items:baseline;gap:8px;
}
.preco small{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.card-tagline{margin:0 0 14px;}
.card-list{list-style:none;margin:0 0 4px;padding:0;flex:1;}
.card-list li{
  position:relative;padding:5px 0 5px 18px;font-size:13px;color:var(--text-muted);line-height:1.5;
}
.card-list li::before{
  content:'';position:absolute;left:0;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--gold-dim);
}
.service-card.destaque{border-color:var(--gold-dim);box-shadow:0 0 0 1px rgba(186,138,60,0.16);}
.service-card.destaque .preco{color:var(--gold-bright);}
.card-flag{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:#0a1421;
  padding:5px 12px;border-radius:999px;font-weight:700;
}

/* --- Bloco do Polimento (formato distinto das lavagens) --- */
.polimento{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;margin-top:22px;
  background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.polimento .slot{border:none;border-radius:0;height:100%;aspect-ratio:auto;min-height:280px;}
.pol-body{padding:34px 34px 30px;display:flex;flex-direction:column;}
.pol-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.pol-body h3{font-size:30px;color:var(--silver-bright);margin-bottom:10px;}
.pol-body > p{color:var(--text-muted);font-size:14px;line-height:1.7;margin:0 0 16px;max-width:60ch;}
.pol-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;
  padding-top:20px;border-top:1px dashed var(--border);
}
.pol-preco{
  font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold-bright);letter-spacing:0.03em;
}

/* --- Modal: cabeçalho com preço --- */
.modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;padding-right:40px;}
.modal-icon{margin-bottom:0;flex:0 0 auto;}
.modal-preco{
  display:inline-flex;align-items:baseline;gap:7px;margin-top:4px;
  font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--gold-bright);line-height:1;
}
.modal-preco small{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.modal-preco.sob{font-size:20px;color:var(--silver);}
.modal-nota{
  font-size:12px;color:var(--text-muted);line-height:1.6;margin:0 0 20px;
  padding-left:12px;border-left:2px solid var(--gold-dim);
}

/* --- Seleção de serviço no agendamento --- */
.pick em{
  display:block;margin-top:9px;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-bright);letter-spacing:0.04em;
}

/* --- Adicionais --- */
.add-grid{display:grid;gap:8px;}
.add-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  border:1px solid var(--border);background:var(--navy-800);border-radius:var(--radius-sm);
  padding:13px 16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.add-item:hover{border-color:var(--gold-dim);}
.add-item.on{border-color:var(--gold);background:rgba(186,138,60,0.1);}
.add-item input{width:18px;height:18px;accent-color:var(--gold);margin:0;flex:0 0 auto;}
.add-nome{font-size:14px;color:var(--text);line-height:1.4;}
.add-preco{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold-bright);white-space:nowrap;
}

/* --- Barra de total --- */
.total-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;
  background:var(--navy-800);border:1px solid var(--gold-dim);border-radius:var(--radius-sm);
  padding:16px 18px;
}
.total-linhas{display:flex;flex-direction:column;gap:3px;}
.total-linhas span{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
.total-linhas em{font-style:normal;color:var(--silver);}
.total-bar > b{font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--gold-bright);line-height:1;}
.total-bar > b.sob{font-size:17px;font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;}

/* --- Resumo: linhas de adicional e total --- */
.summary-row.sub-row span:first-child{padding-left:12px;color:var(--silver-dim);font-size:13px;}
.summary-row.sub-row span:last-child{font-weight:400;color:var(--text-muted);font-size:13px;white-space:nowrap;flex:0 0 auto;}
.summary-row.total{
  border-top:1px solid var(--gold-dim);border-bottom:none;margin-top:6px;padding-top:14px;
}
.summary-row.total span:first-child{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);
}
.summary-row.total span:last-child{
  font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--gold-bright);line-height:1;
}

.ticket-zap{margin-top:14px;width:100%;}

/* --- Rodapé --- */
.foot-pessoa{color:var(--silver-bright) !important;font-weight:600;margin-bottom:2px !important;}

/* --- WhatsApp flutuante --- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:150;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#1faa54;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transition:transform .15s ease;
}
.wa-float svg{width:30px;height:30px;}
.wa-float:hover{transform:scale(1.06);}
/* Some enquanto o formulário de agendamento está na tela: ali ele cobriria
   os botões Voltar/Próximo, que são a ação principal do momento. */
.wa-float.oculto{opacity:0;visibility:hidden;transform:scale(0.8);pointer-events:none;}
body.menu-aberto .wa-float{opacity:0;visibility:hidden;pointer-events:none;}


/* ==========================================================================
   JANELAS DE ATENDIMENTO (substituem a grade de 10 horários)
   ========================================================================== */
.janela-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.janela{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  border:1px solid var(--border);background:var(--navy-800);border-radius:var(--radius-sm);
  padding:18px 18px 16px;text-align:left;color:var(--text);
  transition:border-color .15s, background .15s;
}
.janela:hover:not(:disabled){border-color:var(--gold-dim);}
.janela.selected{border-color:var(--gold);background:rgba(186,138,60,0.1);}
.j-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);
}
.j-hora{
  font-family:'Bebas Neue',sans-serif;font-size:32px;line-height:1;color:var(--silver-bright);
}
.janela.selected .j-hora{color:var(--gold-bright);}
.j-sub{font-size:11px;color:var(--text-muted);line-height:1.4;}
.janela:disabled{
  opacity:0.38;cursor:not-allowed;
  border-style:dashed;
}
.janela:disabled .j-hora{text-decoration:line-through;}
.janela:disabled .j-sub{color:var(--danger);}


/* ==========================================================================
   RESPONSIVO — reescrito do zero
   1080px  galeria perde uma coluna
   980px   tablet: serviços e polimento empilham parcialmente
   860px   mobile: menu vira hambúrguer, tudo em coluna única
   640px   telefone: stepper vira pontos, resumos empilham
   400px   telefone pequeno
   ========================================================================== */

/* ---------------------------- 1080px ---------------------------- */
@media (max-width:1080px){
  .mosaico{grid-template-columns:repeat(3,1fr);grid-auto-rows:calc((100vw - 84px)/3);}
}

/* ---------------------------- 980px ----------------------------- */
@media (max-width:980px){
  section{padding:80px 0;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .polimento{grid-template-columns:1fr;}
  .polimento .slot{min-height:auto;aspect-ratio:4/3;}
  .pol-body{padding:28px 26px 30px;}
  .estrutura{min-height:auto;}
  .estrutura-content{padding:30px 28px;}
  .steps{grid-template-columns:1fr;gap:16px;}
}

/* ---------------------------- 860px ----------------------------- */
@media (max-width:860px){
  :root{--radius:12px;--radius-sm:10px;}
  section{padding:64px 0;}
  section[id],footer[id]{scroll-margin-top:72px;}
  .wrap{padding:0 18px;}
  .section-head{margin-bottom:34px;}
  .section-head p{font-size:15px;}

  /* -- Cabeçalho -- */
  header{padding-top:env(safe-area-inset-top);}
  nav.wrap{height:64px;}
  .brand img{width:38px;height:38px;}
  .logo b{font-size:19px;}
  .logo span{font-size:8px;letter-spacing:0.24em;}
  .nav-links,.nav-cta{display:none;}
  .burger{
    display:grid;place-items:center;width:44px;height:44px;font-size:24px;
    margin-right:-8px;
  }
  .mobile-menu{inset:calc(64px + env(safe-area-inset-top)) 0 0 0;padding:28px 18px;gap:20px;}
  .mobile-menu a{font-size:26px;padding:6px 0;}

  /* -- Topo -- */
  .hero{padding:104px 0 56px;}
  .hero-grid{grid-template-columns:1fr;gap:28px;}
  .hero-badge{order:-1;}
  .hero-badge img{max-width:220px;}
  .hero-badge .ring{max-width:246px;}
  .hero-badge .flare{max-width:220px;}
  .hero h1{font-size:clamp(36px,10vw,52px);}
  .hero p.lead{font-size:16px;margin:18px 0 26px;}
  .hero-ctas{gap:10px;}
  .hero-ctas .btn{flex:1 1 100%;}

  /* -- Serviços -- */
  .service-grid{grid-template-columns:1fr;gap:16px;}
  .service-card .slot{aspect-ratio:4/3;}   /* menos corte que 16:10 em foto vertical */
  .card-body{padding:20px 20px 22px;}
  .preco{font-size:32px;}
  .requisito{padding:18px 20px;gap:13px;margin-top:28px;}
  .requisito svg{width:24px;height:24px;}

  /* -- A estrutura chega junto -- */
  .estrutura{min-height:300px;align-items:end;}
  .estrutura-overlay{
    background:linear-gradient(180deg, rgba(1,13,28,0.55) 0%, rgba(1,13,28,0.93) 58%, rgba(1,13,28,0.97) 100%);
  }
  .estrutura-content{padding:26px 20px;}
  .estrutura-content h3{max-width:100%;}
  .estrutura-content > p{font-size:14px;}
  .estrutura-stats{gap:20px;margin-top:20px;}
  .estrutura-stats div b{font-size:26px;}
  .estrutura-stats div span{font-size:9px;}

  /* -- Antes e depois -- */
  .ba-layer{aspect-ratio:4/3;}
  .ba-grip{width:48px;height:48px;font-size:17px;}
  .ba-badge{font-size:9px;padding:4px 9px;top:10px;}
  .ba-badge.left{left:10px;} .ba-badge.right{right:10px;}

  /* -- Galeria -- */
  .mosaico{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:calc((100vw - 46px)/2);
    gap:10px;
  }
  .lightbox{padding:16px;}
  .lightbox img{max-width:94vw;max-height:80vh;}
  .lightbox-close{top:calc(14px + env(safe-area-inset-top));right:14px;width:44px;height:44px;}

  /* -- Agendamento -- */
  .booking-body{padding:22px 18px;}
  .booking-nav{padding:0 18px 22px;gap:10px;}
  .booking-body h3{font-size:21px;}
  .pick-grid{grid-template-columns:1fr;}
  .janela-grid{grid-template-columns:1fr;gap:10px;}
  .janela{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;min-height:62px;}
  .j-hora{font-size:25px;order:-1;min-width:56px;}
  .j-sub{margin-left:auto;text-align:right;max-width:44%;}
  .form-grid{grid-template-columns:1fr;gap:14px;}
  .add-item{padding:14px;}
  .date-row{
    gap:8px;margin:0 -18px;padding:0 18px 8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .date-chip{scroll-snap-align:start;min-width:84px;}

  /* -- Modal em tela cheia -- */
  .modal-overlay{padding:0;align-items:stretch;}
  .modal{
    border-radius:0;max-width:none;min-height:100%;
    padding:calc(24px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  }
  .modal-close{top:calc(14px + env(safe-area-inset-top));right:14px;width:40px;height:40px;}
  .modal-head{padding-right:48px;gap:13px;}
  .modal h3{font-size:25px;}
  .modal-gallery .slot{height:200px;width:150px;}
  .modal-gallery .slot.is-filled img{position:static;height:200px;}
  .modal-actions{flex-direction:column;}
  .modal-actions .btn{width:100%;}

  /* -- Rodapé e WhatsApp -- */
  .foot-grid{grid-template-columns:1fr;gap:28px;margin-bottom:36px;}
  footer{padding:60px 0 calc(90px + env(safe-area-inset-bottom));}
  .foot-bottom{flex-direction:column;gap:6px;}
  .wa-float{
    width:54px;height:54px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .wa-float svg{width:28px;height:28px;}
}

/* ---------------------------- 640px ----------------------------- */
@media (max-width:640px){
  /* Stepper vira pontos: só a etapa atual mostra o nome.
     Com 5 etapas, os rótulos completos não cabiam e quebravam a linha. */
  .stepper{
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:14px 16px;border-bottom:1px solid var(--border);
  }
  .stepper .s{
    flex:0 0 auto;width:8px;height:8px;padding:0;border-radius:50%;
    background:var(--border);border-bottom:none;
    text-indent:-999px;overflow:hidden;white-space:nowrap;
  }
  .stepper .s.done{background:var(--gold-dim);}
  .stepper .s.active{
    width:auto;height:auto;border-radius:999px;padding:6px 13px;
    background:rgba(186,138,60,0.14);border:1px solid var(--gold-dim);
    text-indent:0;overflow:visible;color:var(--gold-bright);font-size:11px;letter-spacing:0.04em;
  }

  /* Resumo e comprovante empilham: valor longo não espreme o rótulo */
  .summary-row,.ticket-row{flex-direction:column;align-items:flex-start;gap:3px;}
  .summary-row span:last-child,.ticket-row b{text-align:left;}
  .summary-row.sub-row{flex-direction:row;justify-content:space-between;}
  .summary-row.total{flex-direction:row;align-items:center;justify-content:space-between;}
  .ticket{padding:22px 18px;}
  .ticket-top{align-items:center;}
  .ticket-top b{font-size:23px;}

  .total-bar{flex-direction:column;align-items:flex-start;gap:10px;}
  .total-bar > b{font-size:27px;}

  .booking-nav{flex-direction:column-reverse;}
  .booking-nav .btn{width:100%;}
  .booking-nav > span{display:none;}

  .add-item{grid-template-columns:auto 1fr;row-gap:3px;}
  .add-preco{grid-column:2;justify-self:start;}

  .pol-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .pol-actions .btn{width:100%;}
  .pol-body h3{font-size:26px;}

  .estrutura-stats{gap:14px 24px;}
}

/* ---------------------------- 400px ----------------------------- */
@media (max-width:400px){
  .wrap{padding:0 14px;}
  .booking-body{padding:18px 14px;}
  .booking-nav{padding:0 14px 18px;}
  .hero h1{font-size:33px;}
  .hero-badge img{max-width:190px;}
  .hero-badge .ring{max-width:212px;}
  .hero-badge .flare{max-width:190px;}
  .mosaico{grid-auto-rows:calc((100vw - 38px)/2);gap:10px;}
  .estrutura-stats{gap:12px 18px;}
  .estrutura-stats div b{font-size:23px;}
  .j-sub{display:none;}          /* não cabe sem espremer a hora */
  .logo span{display:none;}
}

/* -------------------- Preferências do sistema -------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-badge .ring,.hero-badge .flare::before{animation:none;}
  *{transition-duration:0.01ms !important;}
}

/* ==========================================================================
   PRIVACIDADE (LGPD) E ENVIO POR WHATSAPP
   ========================================================================== */

/* Links que são <button> por dentro, para não sair da página */
.link-inline{
  background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px;
}
.link-inline:hover{color:var(--gold);}
.link-rodape{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;line-height:2;
  color:var(--text-muted);text-align:left;display:block;
}
.link-rodape:hover{color:var(--gold-bright);}

/* Corpo do aviso de privacidade dentro do modal */
.priv{max-height:none;}
.priv h4{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);margin:22px 0 8px;font-weight:500;
}
.priv h4:first-child{margin-top:0;}
.priv p{font-size:14px;line-height:1.7;color:var(--text-muted);margin:0 0 10px;}
.priv p b{color:var(--text);font-weight:600;}
.priv a{color:var(--gold-bright);}
.priv-data{
  margin-top:24px !important;padding-top:14px;border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--silver-dim);
}

/* Aviso após abrir o WhatsApp: o pedido só existe depois que o cliente envia */
.pos-envio{
  margin-top:18px;padding:16px 18px;border-radius:var(--radius-sm);
  background:rgba(31,170,84,0.10);border:1px solid rgba(31,170,84,0.45);
}
.pos-envio b{display:block;font-size:14px;color:#6fe39b;margin-bottom:5px;}
.pos-envio p{margin:0;font-size:13px;line-height:1.65;color:var(--text-muted);}
.pos-envio p b{display:inline;color:var(--text);}

/* Rolagem interna do aviso no desktop, para o modal não ficar gigante */
@media (min-width:861px){
  #privContent{max-height:86vh;overflow-y:auto;}
}
/* Carimbo do comprovante enquanto o cliente ainda não enviou no WhatsApp */
.ticket-status.aguardando{
  background:rgba(31,170,84,0.12);color:#6fe39b;border-color:rgba(31,170,84,0.45);
}