/* ============================================================
   Mobanho · Espelho à medida — Design system
   Vanilla CSS, mobile-first, sem dependências. Carga instantânea.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Marca (extraída de mobanho.com) */
  --ink:        #0F1B2D;
  --ink-2:      #1E3A5F;   /* azul-tinta da marca */
  --muted:      #5B6B7F;
  --muted-2:    #627487;   /* 4.81:1 sobre blanco y 4.51:1 sobre --canvas · era 2.88:1 (A11Y-03) */
  --line:       #E6EBF1;
  --line-2:     #eff3f8;
  --canvas:     #F5F8FC;
  --card:       #ffffff;

  /* Azul de marca (ação primária) */
  --brand:      #1877D2;
  --brand-600:  #0F5FB0;
  --brand-700:  #0d5299;
  --brand-100:  #EAF3FD;
  --brand-glow: 24, 119, 210;

  /* Semânticos */
  --wa:         #25d366;   /* WhatsApp */
  --wa-600:     #1eb257;
  --ok:         #117E55;   /* 5.07:1 sobre blanco · #12855A daba 4.15 sobre --ok-100 en .ck-always (A11Y-03) */
  --ok-100:     #E7F6EE;
  --amber:      #996800;   /* medida especial · 4.84:1 sobre blanco y 4.55:1 sobre --canvas */
  --amber-100:  #FFF6E3;
  --danger:     #d33636;   /* 4.83:1 sobre blanco y 4.53:1 sobre --canvas · era 3.90:1 */

  /* Formas */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(28,42,58,.05), 0 1px 1px rgba(28,42,58,.04);
  --sh-2: 0 4px 14px rgba(28,42,58,.07), 0 2px 5px rgba(28,42,58,.05);
  --sh-3: 0 14px 40px rgba(28,42,58,.12), 0 6px 14px rgba(28,42,58,.07);
  --sh-brand: 0 8px 26px rgba(var(--brand-glow), .34);

  /* Tipografia */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-hero: clamp(1.75rem, 3.8vw, 2.6rem);
  --fs-h2:   clamp(1.5rem, 3.2vw, 2.15rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.4rem);

  --maxw: 1120px;
  --gap: clamp(16px, 3vw, 28px);
  --header-h: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid rgba(var(--brand-glow), .55); outline-offset: 2px; border-radius: 6px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.section { padding-block: clamp(32px, 5vw, 60px); }
.section--tight { padding-block: clamp(24px, 4vw, 40px); }
/* :not(.section--tight) para nao pisar o padding das seccoes que levam as duas classes. */
@media (max-width: 560px) { .section:not(.section--tight) { padding-block: 24px; } }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-100);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.lead { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--ink-2); --_fg:#fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  background: var(--_bg); color: var(--_fg);
  border-radius: var(--r-pill); font-weight: 700; font-size: 1rem;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; width: 1.2em; height: 1.2em; }
/* Segurança global: qualquer SVG inline de ícone sem tamanho não rebenta o layout */
svg:not([width]) { max-width: 100%; }
.stepper__num svg { width: 14px; height: 14px; display: block; }
.faq-q .ico svg { width: 100%; height: 100%; display: block; }
.btn--brand { --_bg: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); box-shadow: var(--sh-brand); }
.btn--brand:hover { filter: brightness(1.05); }
.btn--buy  { --_bg: linear-gradient(135deg, #17b06a 0%, #0f9a5a 100%); box-shadow: 0 8px 24px rgba(20,160,90,.32); }
.btn--wa   { --_bg: linear-gradient(135deg, #2bd36e 0%, var(--wa-600) 100%); box-shadow: 0 8px 22px rgba(37,211,102,.32); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink-2); border: 1.5px solid var(--line); box-shadow: var(--sh-1); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-700); }
.btn--amber { --_bg: linear-gradient(135deg, #eb9022 0%, var(--amber) 100%); box-shadow: 0 8px 22px rgba(217,131,21,.3); }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .92rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link-quiet { color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--brand-700); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; color: var(--ink-2); font-size: .96rem; transition: background .15s; }
.nav a:hover { background: var(--brand-100); color: var(--brand-700); }
.nav a[aria-current="page"] { color: var(--brand-700); }
.header-cta { display: inline-flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r); border: 1px solid var(--line); }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .nav, .header-cta .btn--ghost { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px; gap: 4px;
    box-shadow: var(--sh-2);
  }
  .nav.is-open a { padding: 14px; font-size: 1.05rem; }
}

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--ink-2); color: #dbe6f0; }
.trust-strip__row { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; padding-block: 11px; font-size: .875rem; font-weight: 600; }
.trust-strip__row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-strip__row svg { width: 16px; height: 16px; color: #7db4f0; flex: none; }   /* 5.29:1 sobre --ink-2 · var(--brand) daba 2.52:1 (A11Y-03) */

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 82% -10%, #eaf6fe 0%, var(--canvas) 46%); }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 3vw, 40px); align-items: center; padding-block: clamp(24px, 3.2vw, 44px); }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -0.025em; }
.hero h1 .hl { color: var(--brand-700); }
.hero__sub { margin-top: 16px; font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: var(--muted); max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__micro { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.hero__micro span { display: inline-flex; gap: 6px; align-items: center; }
.hero__micro svg { width: 15px; height: 15px; color: var(--ok); }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-3); aspect-ratio: 4/3.4; max-height: 400px; object-fit: cover; background: #eef4f9; }
@media (max-width: 820px){ .hero__media img { aspect-ratio: 16/10; max-height: 190px; } }
.hero__badge {
  position: absolute; left: -14px; bottom: 22px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 12px 16px; display: flex; align-items: center; gap: 11px; max-width: 230px;
}
.hero__badge b { font-size: 1.4rem; color: var(--ok); }
.hero__badge small { color: var(--muted); font-size: .8rem; line-height: 1.25; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 18px; padding-block: 18px; }
  /* 🔴 20-ago-2026 · ESTA REGLA COSTABA EL PLIEGUE ENTERO. Ponia la imagen
     ANTES del titular en movil, y medido a 390x844: la foto ocupaba y=83..273,
     el H1 empezaba en y=357 y los dos botones caian en 571 y 639 -- el segundo
     debajo del banner de consentimiento. O sea: el visitante de movil veia una
     foto y NADA que pulsar, que es literalmente lo que Manuel describio.
     Con el texto primero, titular y botones entran sobre el pliegue.
     La imagen no se quita: se pone DESPUES, que es donde apoya en vez de
     estorbar. `09-tipos-de-pagina.md §3`: un hero que convierte, no uno que
     enlaza -- y menos uno que solo decora. */
  .hero__media { order: 1; }
  .hero__media img { aspect-ratio: 16/11; }
  .hero__sub { max-width: none; }
}

/* ---------- Generic cards / grids ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2,1fr);} .grid-3 { grid-template-columns: repeat(2,1fr);} }
/* .grid-4 (cartões de formato da home) fica a 2 colunas tambem no telemovel:
   a uma coluna eram 4 filas e o bloco passava de um ecra. */
@media (max-width: 560px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2,1fr); } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.feature { padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .15s, box-shadow .2s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.feature__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); margin-bottom: 14px; }
.feature__ico svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .96rem; }

/* Format cards (home) */
.format-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; text-align: center; cursor: pointer; }
.format-card:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.format-card svg.shape { width: 58px; height: 58px; color: var(--ink-2); }
.format-card b { font-size: 1rem; }
.format-card small { color: var(--muted); }

/* Densidade em telemovel: os mesmos cartoes, menos ar. */
@media (max-width: 560px) {
  .feature { padding: 16px; }
  .feature__ico { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 10px; }
  .feature__ico svg { width: 20px; height: 20px; }
  .format-card { padding: 16px 10px; gap: 8px; }
  .format-card svg.shape { width: 44px; height: 44px; }
}

/* ============================================================
   CONFIGURADOR  (/a-medida)
   ============================================================ */
.cfg-hero { background: radial-gradient(120% 100% at 88% -20%, #e8f5fe 0%, var(--canvas) 44%); border-bottom: 1px solid var(--line); }
.cfg-hero__inner { padding-block: clamp(16px, 3vw, 26px); }
.cfg-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
.cfg-hero p { color: var(--muted); margin-top: 6px; font-size: clamp(.98rem, 1.6vw, 1.08rem); }
.cfg-hero__trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.cfg-hero__trust span { display: inline-flex; gap: 6px; align-items: center; }
.cfg-hero__trust svg { width: 15px; height: 15px; color: var(--ok); }

/* layout: config à esquerda, resumo sticky à direita (desktop) */
.cfg-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(18px, 3vw, 34px); align-items: start; padding-block: clamp(20px, 3vw, 34px); }
@media (max-width: 940px) { .cfg-layout { grid-template-columns: 1fr; } }

/* Stepper */
.stepper { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.stepper__item { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--muted-2); }
.stepper__num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--muted); font-size: .78rem; transition: .2s; }
.stepper__item.done .stepper__num { background: var(--ok); color: #fff; }
.stepper__item.active .stepper__num { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-100); }
.stepper__item.active { color: var(--ink); }
.stepper__label { display: none; }
@media (min-width: 620px) { .stepper__label { display: inline; } }

/* Step panel */
/* Se RESERVA la altura del paso 1 antes de que el JS lo pinte. Sin esto el
   esqueleto ocupa 220px, el paso real ocupa mas, y el salto empuja el pie fuera
   de la pantalla: CLS medido 0,231 en movil y 0,074 en escritorio (el umbral
   bueno es 0,1). Medido en Chrome real el 22-ago-2026, con el detalle del nodo:
   #cfgPanel pasaba de 264 a 326 px a 390, y de 280 a 365 px a 1298.
   Los valores son esas alturas finales, no un numero redondo elegido a ojo.
   Solo cuenta el primer pintado: los cambios de paso los hace el usuario con un
   clic y el navegador los excluye del CLS (`hadRecentInput`). */
#cfgPanel { min-height: 365px; }
@media (max-width: 940px) { #cfgPanel { min-height: 326px; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(18px, 2.6vw, 26px); }
.step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.step__kicker { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.step h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-top: 4px; }
.step__hint { color: var(--muted); font-size: .96rem; margin-top: 4px; margin-bottom: 18px; }
.step__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

/* Choice chips / cards */
.choices { display: grid; gap: 12px; }
.choices--formats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choices--sizes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.choices--leds, .choices--extras { grid-template-columns: 1fr; }
@media (min-width: 560px) { .choices--leds { grid-template-columns: 1fr 1fr; } }

.choice {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .1s; width: 100%;
}
.choice:hover { border-color: var(--brand); box-shadow: var(--sh-1); }
.choice.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); background: linear-gradient(0deg, var(--brand-100), #fff 70%); }
.choice.is-selected::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.choice__body { flex: 1; min-width: 0; }
.choice__body b { display: block; font-size: 1rem; }
.choice__body small { color: var(--muted); font-size: .86rem; }
.choice__price { font-weight: 800; color: var(--ink); white-space: nowrap; }

/* format tiles */
.choice--format { flex-direction: column; text-align: center; gap: 10px; padding: 18px 12px; }
.choice--format svg.shape { width: 46px; height: 46px; color: var(--ink-2); }
.choice--format.is-selected svg.shape { color: var(--brand-700); }

/* size chip */
.choice--size { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; }
.choice--size b { font-size: 1.02rem; }
.choice--size small { font-size: .78rem; }

/* «À medida» — la unica opcion de la rejilla que NO es una medida de catalogo:
   abre un formulario y convierte el precio en una estimacion. Antes solo se
   distinguia por un `border-style:dashed` en linea, con el mismo color y el
   mismo peso que «150 x 80», y se leia como una medida mas. */
.choice--custom {
  border-style: dashed;
  border-color: var(--brand);   /* de la paleta; no inventar tonos intermedios */
  background: linear-gradient(0deg, var(--brand-100), #fff 78%);
}
.choice--custom b { color: var(--brand-700); }
.choice--custom small { color: var(--brand-700); opacity: .85; }
.choice--custom:hover {
  border-style: solid;
  border-color: var(--brand);
  background: var(--brand-100);
  box-shadow: var(--sh-1);
}
.choice--custom:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 2px; }

/* led swatch */
.led-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 2px solid rgba(0,0,0,.06); box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); }

/* Model grid (step 2) */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.model {
  position: relative; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .1s; display: flex; flex-direction: column;
}
.model:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.model.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.model.is-selected::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; z-index: 2;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.model__img { aspect-ratio: 1/1; width: 100%; object-fit: contain; background: #fff; padding: 8px; }
.model__meta { padding: 10px 12px; }
.model__meta b { display: block; font-size: .92rem; line-height: 1.25; }
.model__meta .from { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.model__meta .from b { display: inline; color: var(--brand-700); font-weight: 800; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-toggle { padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); font-weight: 600; font-size: .88rem; color: var(--ink-2); background: #fff; }
.chip-toggle.is-active { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }

/* custom size box */
.custom-size { margin-top: 14px; border: 1.5px dashed var(--brand); border-radius: var(--r); padding: 16px; background: var(--brand-100); }
.custom-size.hidden { display: none; }
.custom-hint { font-size: .82rem; margin-top: 10px; min-height: 1.1em; color: var(--muted); }
.custom-hint.ok { color: #0c6b3c; font-weight: 600; }
.custom-hint.err { color: var(--danger); font-weight: 600; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { flex: 1; min-width: 120px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); outline: none; }
.field .suffix { position: relative; }
.field .suffix::after { content: "cm"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-weight: 600; font-size: .9rem; }

/* ---------- Sticky summary / price bar ---------- */
.summary {
  position: sticky; top: calc(var(--header-h) + 14px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.summary__head { padding: 16px 18px 12px; border-bottom: 1px dashed var(--line); }
.summary__head h3 { font-size: 1.05rem; }
.summary__head small { color: var(--muted); }
.summary__rows { padding: 12px 18px; display: grid; gap: 8px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.summary__row .k { color: var(--muted); }
.summary__row .v { font-weight: 600; text-align: right; }
.summary__row .v.empty { color: var(--muted-2); font-weight: 500; font-style: italic; }
.summary__price { padding: 14px 18px; background: var(--canvas); border-top: 1px solid var(--line); }
.summary__price .label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.summary__price .amount { font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.summary__price .amount .cur { font-size: 1.1rem; }
.summary__price .note { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.summary__price.is-catalog { background: var(--ok-100); }
.summary__price.is-special { background: var(--amber-100); }
.summary__thumb { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #fff; padding: 6px; border-bottom: 1px solid var(--line); }

/* mobile price bar (bottom) */
.pricebar-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28,42,58,.1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform .25s ease;
}
.pricebar-mobile.show { transform: translateY(0); }
.pricebar-mobile .pm-info { flex: 1; min-width: 0; }
.pricebar-mobile .pm-info .pm-label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.pricebar-mobile .pm-info .pm-price { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.pricebar-mobile .pm-info .pm-sum { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 940px) {
  .summary { display: none; }
  .pricebar-mobile { display: flex; }
  body.has-pricebar { padding-bottom: 84px; }
  /* Debajo de 940 la barra fija ya lleva el precio Y su boton de continuar,
     siempre a la vista. El CTA de la tarjeta seria un SEGUNDO boton para la
     misma accion, a dos dedos de distancia. Se deja uno solo por ancho. */
  .step__nav .btn--brand { display: none; }   /* clase real, leida de stepShell() */
}

/* ---------- Result (step 6) ---------- */
.result { border-radius: var(--r-lg); overflow: hidden; }
.result__banner { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-weight: 800; color: #fff; font-size: 1rem; }
.result__banner svg { width: 20px; height: 20px; }
.result--catalog .result__banner { background: linear-gradient(135deg, #16a35c, #0f8a4d); }
.result--special .result__banner { background: linear-gradient(135deg, #e5952b, var(--amber)); }
.result__body { background: #fff; border: 1px solid var(--line); border-top: 0; padding: clamp(20px, 3vw, 30px); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.result__layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
@media (max-width: 640px) { .result__layout { grid-template-columns: 1fr; } }
.result__img { width: 100%; border-radius: var(--r); aspect-ratio: 1/1; object-fit: contain; box-shadow: var(--sh-1); background: #fff; padding: 10px; border: 1px solid var(--line); }
.result__title { font-size: 1.3rem; }
.result__spec { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.result__spec .tag { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.result__price-big { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.result__price-big .cur { font-size: 1.3rem; color: var(--muted); }
.result__price-note { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.result__actions { margin-top: 20px; display: grid; gap: 12px; }
.result__reassure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); }
.result__reassure span { display: inline-flex; gap: 6px; align-items: center; }
.result__reassure svg { width: 15px; height: 15px; color: #128258; }   /* 4.52:1 sobre --canvas · var(--ok) daba 4.35 */

/* Lead form */
.lead-form { margin-top: 18px; display: grid; gap: 12px; }
.lead-form .field-row { gap: 12px; }
.lead-form .consent { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.lead-form .consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.form-msg { padding: 12px 14px; border-radius: var(--r); font-size: .9rem; font-weight: 600; }
.form-msg.ok { background: var(--ok-100); color: #0c6b3c; }
.form-msg.err { background: #fdeaea; color: #a23131; }
.form-msg.hidden { display: none; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: .82rem; font-weight: 600; margin: 4px 0; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 780px; margin-inline: auto; display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px 20px; text-align: left; font-weight: 700; font-size: 1.02rem; }
.faq-q .ico { flex: none; width: 22px; height: 22px; transition: transform .2s; color: #1773cc; }   /* 4.52:1 sobre --canvas · var(--brand) daba 4.28 */
.faq-item[open] .faq-q .ico { transform: rotate(45deg); }
.faq-a { padding: 0 20px 18px; color: var(--muted); font-size: .96rem; }
.faq-a p + p { margin-top: 10px; }
details.faq-item summary { list-style: none; cursor: pointer; }
details.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- Steps how-it-works ---------- */
.steps-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); counter-reset: s; }
@media (max-width: 720px){ .steps-row { grid-template-columns: 1fr; } }
.step-mini { position: relative; padding: 24px; padding-top: 30px; }
.step-mini::before { counter-increment: s; content: counter(s); position: absolute; top: -16px; left: 22px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--brand-600)); color:#fff; display:grid; place-items:center; font-weight:800; box-shadow: var(--sh-brand); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--ink-2) 0%, #24374b 100%); color: #fff; border-radius: var(--r-xl); padding: clamp(30px, 5vw, 52px); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content:""; position:absolute; inset:auto -10% -60% auto; width: 60%; height: 120%; background: radial-gradient(circle, rgba(var(--brand-glow),.35), transparent 60%); }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: #c5d2df; margin-top: 10px; position: relative; }
.cta-band .btn { position: relative; margin-top: 22px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b9c6d4; padding-block: clamp(28px, 5vw, 64px) 18px; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
/* A uma coluna o rodape ocupava quase um ecra inteiro em telemovel. */
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.site-footer h4, .site-footer .foot-h { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer a { color: #b9c6d4; display: inline-flex; align-items:center; gap:8px; padding: 4px 0; font-size: .94rem; }
.site-footer a:hover { color: #fff; }
.site-footer .foot-logo { height: 30px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: .95; }
.site-footer .foot-desc { font-size: .9rem; max-width: 30ch; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 18px; padding-top: 12px; display:flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .82rem; color: #8496a6; }
/* Em telemovel o rodape ocupava 0,90 de ecra. Reduz-se o ar, NAO a area de toque
   dos links (fica nos 33px que ja tinha). */
/* El enlace de autoria va en SU PROPIA LINEA: .site-footer__bottom es un space-between,
   y con tres elementos el del medio quedaba descentrado. Color heredado del
   .site-footer__bottom (#8496a6 sobre --ink), NO se le baja la opacidad: eso rebajaria
   un contraste que ya esta medido. */
.foot-autoria { flex-basis: 100%; text-align: center; margin-top: 6px; }
.foot-autoria a { color: inherit; font-size: inherit; }

@media (max-width: 560px) {
  .site-footer { padding-block: 20px 14px; }
  .site-footer__bottom { margin-top: 12px; padding-top: 10px; }
}

/* ---------- WhatsApp floating ---------- */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg,#2bd36e,var(--wa-600)); box-shadow: 0 10px 26px rgba(37,211,102,.45);
  display: grid; place-items: center; transition: transform .18s;
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 30px; height: 30px; color: #fff; }
.wa-fab .pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.4s infinite; }
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (max-width: 940px) { .wa-fab { bottom: 92px; } body.has-pricebar .wa-fab { bottom: 96px; } }

/* ---------- Consent ---------- */
.consent-banner {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 70; max-width: 560px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 18px 20px;
}
.consent-banner.hidden { display: none; }
.consent-banner p { font-size: .88rem; color: var(--muted); }
.consent-banner .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.consent-banner .actions .btn { flex: 1; min-width: 130px; }

/* 🔴 20-ago-2026 · A 390px este banner medía 362x263 -- el 28,9% de la pantalla
   él solo, más que ningún otro cromo del sitio -- flotando a 14px del borde, o
   sea justo donde caen los botones. Medido con `gate-movil.js`: tapaba 2 CTAs
   en la portada y 2 en contactos. NO tenía ningún bloque móvil.
   A ras del borde y compacto deja de aterrizar encima.
   ⚠️ Ni el texto ni el comportamiento del consentimiento se tocan: es
   superficie legal. Si hay que bajar más la altura se acorta el TEXTO, y eso
   lo decide el cliente. */
@media (max-width: 34rem) {
  .consent-banner { left: 0; right: 0; bottom: 0; max-width: none;
                    border-radius: 14px 14px 0 0; border-bottom: 0;
                    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
                    max-height: 33vh; overflow-y: auto; }
  .consent-banner p { font-size: .8rem; line-height: 1.45; }
  .consent-banner .actions { gap: 8px; margin-top: 10px; }
  .consent-banner .actions .btn { min-width: 110px; }
}


/* ---------- Skeleton ---------- */
.skeleton { background: linear-gradient(100deg, #eef3f8 30%, #f7fafc 50%, #eef3f8 70%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0; } }
.sk-model { aspect-ratio: 1/1; }

/* ---------- utils ---------- */
.hidden { display: none !important; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.stack > * + * { margin-top: 14px; }
.flex { display: flex; } .between { justify-content: space-between; } .items-center { align-items: center; } .gap { gap: 12px; } .wrap { flex-wrap: wrap; }
.page-wrap { min-height: 100dvh; display: flex; flex-direction: column; }
.grow { flex: 1; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.fade-in { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none; } }

/* ============================================================
   v2 — NAVEGAÇÃO ECOMMERCE, LOJA, PRODUTO, CARRINHO
   ============================================================ */

/* ---------- Header actions + cart ---------- */
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--ink-2); border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--brand-100); color: var(--brand-700); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.cart-count[hidden] { display: none; }

/* ---------- Desktop mega-nav ---------- */
.nav-item { position: relative; }
.nav-item > a, .nav-item > button {
  padding: 8px 12px; border-radius: 999px; font-weight: 600; color: var(--ink-2); font-size: .96rem;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s, color .15s; white-space: nowrap;
}
.nav-item > a:hover, .nav-item > button:hover, .nav-item.open > button { background: var(--brand-100); color: var(--brand-700); }
.nav-item .caret { width: 15px; height: 15px; transition: transform .2s; }
.nav-item.open .caret { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: 14px; min-width: 460px; opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; z-index: 70;
}
.nav-item.open .nav-panel, .nav-item:hover .nav-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.nav-panel__col h5 { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin: 6px 8px; }
.nav-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.nav-panel a:hover { background: var(--canvas); color: var(--brand-700); }
.nav-panel a .mini { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; flex: none; }
.nav-panel a .mini svg { width: 18px; height: 18px; }
.nav-panel a .mini svg.shape { width: 20px; height: 20px; }
@media (max-width: 980px) { .nav { display: none; } .nav-toggle { display: inline-flex; } .hide-mobile { display: none !important; } }
@media (min-width: 981px) { .nav-toggle { display: none; } }

/* ---------- Mobile drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15,27,45,.5); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .2s; }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(88vw, 360px); background: #fff; z-index: 95;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(15,27,45,.18);
}
.drawer.open { transform: translateX(0); }
.drawer--left { left: 0; right: auto; transform: translateX(-100%); box-shadow: 10px 0 40px rgba(15,27,45,.18); }
.drawer--left.open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.drawer__head b { font-size: 1.05rem; }
.drawer__close { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.drawer__close:hover { background: var(--canvas); color: var(--ink); }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
.drawer-nav a, .drawer-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; font-weight: 700; font-size: 1.02rem; color: var(--ink); width: 100%; }
.drawer-nav a:active, .drawer-acc__head:active { background: var(--canvas); }
.drawer-acc__panel { display: none; padding: 0 0 8px; background: var(--canvas); }
.drawer-acc.open .drawer-acc__panel { display: block; }
.drawer-acc__panel a { padding: 12px 18px 12px 32px; font-weight: 600; font-size: .96rem; color: var(--muted); }
.drawer-acc__head .caret { width: 18px; height: 18px; transition: transform .2s; color: var(--muted-2); }
.drawer-acc.open .drawer-acc__head .caret { transform: rotate(180deg); }
.drawer__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 8px; }

/* ---------- Cart drawer ---------- */
.cart-lines { display: grid; gap: 0; }
.cart-line { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.cart-line__img { width: 60px; height: 60px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; }
.cart-line__name { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.cart-line__spec { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.cart-line__price { font-weight: 800; font-size: .92rem; white-space: nowrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; margin-top: 8px; }
/* 38px: alvo de toque utilizável no telemóvel (antes 30px, abaixo do mínimo) */
.qty button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-2); font-size: 1.1rem; }
.qty button:hover { color: var(--brand); }
.qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; }
.cart-line__rm { color: var(--muted-2); font-size: .74rem; text-decoration: underline; margin-top: 6px; display: inline-block; }
.cart-line__rm:hover { color: var(--danger); }
.cart-empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.cart-empty svg { width: 54px; height: 54px; color: var(--muted-2); margin: 0 auto 14px; }   /* var(--line) daba 1.13:1 */
.cart-summary { padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: .95rem; }
.cart-summary__row.total { font-size: 1.2rem; font-weight: 800; padding-top: 8px; border-top: 1px dashed var(--line); }
.cart-summary small { color: var(--muted); font-size: .8rem; }

/* ---------- Progress bar (configurador) ---------- */
.cfg-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cfg-progress__bar { flex: 1; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.cfg-progress__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-600)); border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.cfg-progress__txt { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ---------- Shop / categoria ---------- */
.shop-hero { background: radial-gradient(120% 100% at 88% -20%, var(--brand-100) 0%, var(--canvas) 46%); border-bottom: 1px solid var(--line); }

/* Navegacion de categorias del pre-render. NO es decoracion: sin un enlace
   estatico las 7 categorias son huerfanas para un rastreador —el filtro de la
   barra lateral lo pinta el JS— y una pagina a la que no se llega no rankea.
   Area de toque 34px, que es lo que ya usan los chips del catalogo. */
.shop-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.shop-cats a, .shop-cats .es-actual {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 4px 12px; border-radius: 999px; font-size: .88rem; line-height: 1.2;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.shop-cats a:hover { border-color: var(--brand-700); color: var(--brand-700); }
.shop-cats .es-actual { background: var(--brand-700); border-color: var(--brand-700); color: #fff; font-weight: 700; }
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start; padding-block: 28px; }
@media (max-width: 860px) { .shop-layout { grid-template-columns: 1fr; gap: 16px; } }
.shop-aside { position: sticky; top: calc(var(--header-h) + 14px); }
.shop-aside__group { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 8px; margin-bottom: 14px; }
.shop-aside__group h4 { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 10px 12px 6px; }
.shop-aside a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.shop-aside a:hover { background: var(--canvas); }
/* facets (checkbox / radio) */
.facet { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.facet:hover { background: var(--canvas); }
.facet input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); cursor: pointer; }
.facet__lbl { flex: 1; }
.facet .n { font-size: .78rem; color: var(--muted-2); font-weight: 700; }
/* filtros toggle (mobile) */
.filters-toggle { display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-weight: 700; font-size: .9rem; color: var(--ink-2); background: #fff; }
.filters-toggle svg { width: 18px; height: 18px; }
.filters-toggle .fbadge { background: var(--brand); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; display: grid; place-items: center; }
.filters-toggle .fbadge[hidden] { display: none; }
@media (max-width: 860px) {
  .shop-aside { position: static; display: none; margin-bottom: 8px; }
  .shop-aside.open { display: block; }
  .filters-toggle { display: inline-flex; }
}
/* active filter chips */
.active-chips { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); font-weight: 700; font-size: .84rem; border: 1px solid transparent; }
.fchip:hover { border-color: var(--brand); }
.fchip .x { font-size: 1.1rem; line-height: 1; }
.fchip--clear { background: transparent; color: var(--muted); text-decoration: underline; }
.fchip--clear:hover { color: var(--danger); border-color: transparent; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-toolbar .count { color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.shop-search { flex: 1; min-width: 200px; max-width: 360px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 14px center no-repeat; padding-left: 40px; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.shop-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
@media (max-width: 560px) { .shop-search { order: -1; max-width: none; width: 100%; } }
.shop-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.shop-sort select { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* product card */
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .15s, box-shadow .2s, border-color .15s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #d4e0ec; }
.pcard__imgwrap { position: relative; display: block; aspect-ratio: 1/1; background: #fff; }
.pcard__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.pcard__tag { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); border: 1px solid var(--line); color: var(--ink-2); font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.pcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.pcard__name { font-weight: 700; font-size: .96rem; line-height: 1.25; color: var(--ink); }
.pcard__meta { color: var(--muted); font-size: .8rem; margin-top: 3px; }
.pcard__price { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.pcard__price .from { font-size: .74rem; color: var(--muted); }
.pcard__price b { font-size: 1.15rem; color: var(--ink); letter-spacing: -.01em; }
.pcard__iva { font-size: .68rem; color: var(--muted); }
.pcard__cta { margin-top: 10px; }
.pcard__link { position: absolute; inset: 0; z-index: 1; }
.pcard__cta .btn { position: relative; z-index: 2; }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; padding-block: 28px; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 20px; } }
.gallery { position: sticky; top: calc(var(--header-h) + 14px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery__main-wrap { position: relative; }
.gallery__main { width: 100%; aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; object-fit: contain; padding: 16px; box-shadow: var(--sh-1); }
.gallery__seal { position: absolute; top: 12px; left: 12px; width: 72px; height: 72px; background: url('../assets/selo-pt.svg') center/contain no-repeat; filter: drop-shadow(0 4px 10px rgba(4,106,56,.25)); pointer-events: none; }
@media (max-width: 560px) { .gallery__seal { width: 58px; height: 58px; top: 8px; left: 8px; } }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery__thumb { width: 66px; height: 66px; border: 1.5px solid var(--line); border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; cursor: pointer; transition: border-color .15s; }
.gallery__thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); }
.gallery__thumb:hover { border-color: var(--brand); }

.buybox__eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-700); }
.buybox h1 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 6px 0 8px; }
.buybox__price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 4px; }
.buybox__price .amount { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.buybox__price .amount .cur { font-size: 1.1rem; color: var(--muted); }
.buybox__price .label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.buybox__price.is-special .amount { color: var(--amber); }
.buybox__note { font-size: .86rem; color: var(--muted); }
.opt-group { margin-top: 20px; }
.opt-group__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.opt-group__head b { font-size: .96rem; }
.opt-group__head .picked { font-size: .84rem; color: var(--brand-700); font-weight: 700; }
.size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 700; font-size: .9rem; background: #fff; transition: border-color .12s, box-shadow .12s; text-align: center; }
.size-chip small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.size-chip:hover { border-color: var(--brand); }
.size-chip.sel { border-color: var(--brand); background: var(--brand-100); color: var(--brand-700); box-shadow: 0 0 0 2px var(--brand-100); }
.size-chip.dashed { border-style: dashed; }
.led-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px){ .led-grid { grid-template-columns: 1fr; } }

/* extras with media */
.extras-grid { display: grid; gap: 8px; }
.extra-opt { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; transition: border-color .12s, box-shadow .12s; width: 100%; }
.extra-opt:hover { border-color: var(--brand); }
.extra-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); background: linear-gradient(0deg, var(--brand-100), #fff 72%); }
.extra-opt__media { width: 64px; height: 50px; border-radius: 8px; overflow: hidden; flex: none; position: relative; background: var(--brand-100); display: grid; place-items: center; }
.extra-opt__media video, .extra-opt__media img { width: 100%; height: 100%; object-fit: cover; }
.extra-opt__media .ico { color: var(--brand-700); } .extra-opt__media .ico svg { width: 26px; height: 26px; }
.extra-opt__media .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,27,45,.62); }   /* blanco a 5.09:1 · con .28 eran 1.95 y con .45, 3.02 */   /* .28 dejaba el play blanco a 1.95:1 sobre un poster claro */
.extra-opt__media .play svg { width: 20px; height: 20px; color: #fff; }
.extra-opt__body { flex: 1; min-width: 0; }
.extra-opt__body b { display: block; font-size: .92rem; line-height: 1.2; }
.extra-opt__body small { color: var(--muted); font-size: .78rem; }
.extra-opt__price { font-weight: 800; font-size: .9rem; white-space: nowrap; color: var(--ink); }
.extra-preview { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0d1420; }
.extra-preview video { width: 100%; display: block; max-height: 260px; background: #0d1420; }
.extra-preview__cap { padding: 9px 12px; font-size: .82rem; color: #cdd8e6; background: #0d1420; display: flex; align-items: center; gap: 8px; }
.extra-preview__cap svg { width: 15px; height: 15px; color: #2780d5; }   /* 4.51:1 sobre el fondo oscuro del pie de foto · var(--brand) daba 4.05 */

/* buy actions + sticky mobile bar */
.buy-actions { margin-top: 22px; display: grid; gap: 10px; }
.buy-reassure { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: .82rem; color: var(--muted); }
.buy-reassure span { display: inline-flex; gap: 6px; align-items: center; }
.buy-reassure svg { width: 15px; height: 15px; color: var(--ok); }
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(15,27,45,.1); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.pdp-sticky .pi { flex: 1; min-width: 0; }
.pdp-sticky .pi .pl { font-size: .72rem; color: var(--muted); font-weight: 600; }
.pdp-sticky .pi .pp { font-size: 1.2rem; font-weight: 800; line-height: 1; }
@media (max-width: 900px) { .pdp-sticky { display: flex; } body.has-pdpbar { padding-bottom: 82px; } }

/* description / accordion on PDP */
.pdp-info { padding-block: 8px 40px; }
.pdp-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .pdp-info__grid { grid-template-columns: 1fr; } }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); padding-top: 14px; }
.crumbs a:hover { color: var(--brand-700); text-decoration: underline; }
.crumbs .sep { color: var(--muted-2); }

/* section title helper */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head a { color: var(--brand-700); font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* refined result (configurador) — botões limpos, nada de círculos gigantes */
.result__price-big .cur { font-size: 1.3rem; color: var(--muted); }
.result__cta-row { display: grid; gap: 10px; }
@media (min-width: 560px) { .result--catalog .result__cta-row.two { grid-template-columns: 1fr; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; z-index: 120; opacity: 0; transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 8px; box-shadow: var(--sh-3); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: #57e39a; }
@media (max-width: 940px){ .toast { bottom: 92px; } }

/* ============================================================
   v3 — VISUAL: lightbox, badges Portugal, preview de luz, história
   ============================================================ */

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 110; background: rgba(10,18,30,.9); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lightbox__close { position: fixed; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; z-index: 2; }
.lightbox__close:hover { background: rgba(255,255,255,.28); }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__inner { max-width: 920px; width: 100%; max-height: 92vh; overflow: auto; }
.lightbox__media { display: grid; gap: 10px; }
.lightbox__media.multi { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .lightbox__media.multi { grid-template-columns: 1fr; } }
.lightbox__media img, .lightbox__media video { width: 100%; border-radius: 14px; display: block; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lightbox__cap { color: #e6eef7; text-align: center; margin-top: 16px; font-size: .95rem; line-height: 1.5; }
.lightbox__cap b { display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* ---------- Bandeira PT (SVG real, cross-plataforma — não depende do emoji) ---------- */
.pt-flag { display: inline-block; width: 1.5em; height: 1em; background: url('../assets/pt-flag.svg') center/contain no-repeat; border-radius: 2px; vertical-align: -0.14em; box-shadow: 0 0 0 1px rgba(15,27,45,.1); flex: none; }
.selo-pt { width: 108px; height: 108px; background: url('../assets/selo-pt.svg') center/contain no-repeat; flex: none; filter: drop-shadow(0 8px 16px rgba(4,106,56,.2)); }

/* ---------- Badge Portugal ---------- */
.pt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800; color: var(--ink-2); }
.pt-badge .flag, .pt-badge .pt-flag { font-size: .95em; }
.pcard__tag.pt { background: rgba(255,255,255,.94); }
.title-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ok-100); color: #0b6b3c; border-radius: 999px; padding: 5px 11px; font-size: .76rem; font-weight: 800; }
.title-badge .flag { font-size: 1em; }

/* ---------- Botão "?" info ---------- */
.info-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); font-weight: 800; font-size: .78rem; display: inline-grid; place-items: center; flex: none; line-height: 1; transition: border-color .15s, color .15s; }
.info-btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-100); }

/* ---------- Preview de luz (PDP) ---------- */
.media-preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; background: #0d1420; }
/* média COMPACTA: miniatura + legenda numa linha. O grande fica no lightbox. */
.media-preview {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 8px 10px; max-width: none;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.media-preview img, .media-preview video {
  width: 104px; height: 78px; flex: none; display: block; max-height: none;
  object-fit: cover; border-radius: 8px; background: #0d1420; cursor: zoom-in;
}
@media (max-width: 420px) { .media-preview img, .media-preview video { width: 84px; height: 64px; } }
.media-preview__triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; cursor: zoom-in; }
.media-preview__triple img { max-height: 170px; }
.media-preview__cap { order: 2; flex: 1; min-width: 0; padding: 0; background: none; color: var(--muted); font-size: .82rem; line-height: 1.35; display: flex; align-items: center; gap: 7px; }
.media-preview__cap svg { width: 15px; height: 15px; color: #1773cc; flex: none; }   /* 4.52:1 · var(--brand) daba 4.28 */
.media-preview__expand { order: 3; position: static; flex: none; background: var(--canvas); color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .74rem; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.media-preview__expand svg { width: 14px; height: 14px; }

/* bigger, media-first extra thumbnails */
.extra-opt__media { width: 74px; height: 58px; }
@media (max-width: 420px){ .extra-opt__media { width: 62px; height: 50px; } }

/* gallery zoom cursor */
.gallery__main { cursor: zoom-in; }

/* ---------- PDP: história + Made in Portugal ---------- */
.pdp-story { background: #fff; border-top: 1px solid var(--line); }
.made-pt {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  background: linear-gradient(135deg, #fff 0%, var(--brand-100) 140%); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sh-1);
}
.made-pt__flag { width: 108px; height: 108px; background: url('../assets/selo-pt.svg') center/contain no-repeat; filter: drop-shadow(0 8px 16px rgba(4,106,56,.2)); flex: none; }
.made-pt h3 { font-size: 1.15rem; }
.made-pt p { color: var(--muted); font-size: .94rem; margin-top: 4px; max-width: 60ch; }
.story-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
@media (max-width: 720px){ .story-points { grid-template-columns: 1fr; } .made-pt { grid-template-columns: 1fr; text-align: center; } .made-pt p { margin-inline: auto; } }
.story-point { display: flex; gap: 12px; align-items: flex-start; }
.story-point .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; flex: none; }
.story-point .ic svg { width: 22px; height: 22px; }
.story-point b { display: block; font-size: .96rem; }
.story-point p { color: var(--muted); font-size: .86rem; margin-top: 2px; }

/* ============================================================
   v4 — a11y skip, pagamentos, legal, cross-sell, lazy vídeo
   ============================================================ */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 0; }

/* Payment badges */
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pay-logo { display: block; width: 42px; height: 26px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.pay-badges--foot { margin-top: 14px; }
.pay-badges--foot .pay-logo { border-color: rgba(255,255,255,.22); }
.pay-badges--inline { margin-top: 10px; }

/* Footer legal bar */
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 26px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; font-size: .78rem; color: #8496a6; }
.site-footer__legal a { color: #b9c6d4; text-decoration: underline; }
.site-footer__legal a:hover { color: #fff; }

/* Cross-sell / related (herda a grelha responsiva da loja) */
.related { border-top: 1px solid var(--line); background: var(--canvas); }

/* Bundle nudge */
.bundle-nudge { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--ok); background: var(--ok-100); border-radius: var(--r); }
.bundle-nudge .ic { width: 34px; height: 34px; border-radius: 8px; background: #fff; color: var(--ok); display: grid; place-items: center; flex: none; }
.bundle-nudge .ic svg { width: 20px; height: 20px; }
.bundle-nudge b { color: #0b6b3c; font-size: .9rem; }
.bundle-nudge small { display: block; color: var(--muted); font-size: .78rem; }
.bundle-nudge code { background: #fff; border: 1px solid var(--ok); border-radius: 5px; padding: 1px 6px; font-weight: 800; color: #0b6b3c; }

/* Lazy video preview poster */
.media-preview__poster { position: relative; cursor: pointer; width: 104px; height: 78px; flex: none; border-radius: 8px; overflow: hidden; }
.media-preview__poster img { width: 100%; height: 100%; display: block; object-fit: cover; max-height: none; background: #0d1420; }
.media-preview__poster .playbtn { position: absolute; inset: 0; display: grid; place-items: center; }
.media-preview__poster .playbtn span { width: 34px; height: 34px; border-radius: 50%; background: rgba(15,27,45,.6); display: grid; place-items: center; transition: transform .15s, background .15s; }
.media-preview__poster:hover .playbtn span { transform: scale(1.08); background: rgba(15,27,45,.72); }
.media-preview__poster .playbtn svg { width: 15px; height: 15px; color: #fff; margin-left: 2px; }

/* Exit-intent (retenção) */
.exit-ov { position: fixed; inset: 0; z-index: 120; background: rgba(10,18,30,.55); display: grid; place-items: center; padding: 20px; animation: fadeIn .18s ease both; }
.exit-modal { position: relative; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 30px 28px 24px; max-width: 400px; width: 100%; text-align: center; }
.exit-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; }
.exit-x:hover { background: var(--canvas); color: var(--ink); }
.exit-x svg { width: 20px; height: 20px; }
.exit-ico { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #e7f9ee; color: #0d6b3c;   /* 6.02:1 · var(--wa-600) daba 2.54:1 */ display: grid; place-items: center; }
.exit-ico svg { width: 30px; height: 30px; }
.exit-modal h3 { font-size: 1.25rem; }
.exit-modal p { color: var(--muted); font-size: .94rem; margin: 8px 0 18px; }
.exit-modal code { background: var(--ok-100); color: #0b6b3c; border-radius: 5px; padding: 1px 6px; font-weight: 800; }

/* Consent banner v2 (granular) */
.ck-head { margin-bottom: 8px; }
.ck-head b { font-size: 1.02rem; color: var(--ink); }
.consent-banner p a { color: var(--brand-700); text-decoration: underline; }
.ck-prefs { display: grid; gap: 4px; margin: 6px 0 4px; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ck-row:last-child { border-bottom: 0; }
.ck-row b { display: block; font-size: .9rem; color: var(--ink); }
.ck-row small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }
.ck-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); flex: none; cursor: pointer; }
.ck-always { font-size: .74rem; font-weight: 700; color: var(--ok); background: var(--ok-100); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.site-footer__link-btn { display: block; color: #b9c6d4; font-size: .94rem; padding: 4px 0; text-align: left; background: none; }
.site-footer__link-btn:hover { color: #fff; text-decoration: underline; }

/* Trust seals (Portugal · Garantia · Envio) */
.trust-seals { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.trust-seal { width: 90px; height: 90px; background-position: center; background-size: contain; background-repeat: no-repeat; flex: none; filter: drop-shadow(0 4px 10px rgba(15,27,45,.1)); }
.trust-seals__note { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--muted); display: flex; gap: 7px; align-items: center; justify-content: center; flex-wrap: wrap; }
.trust-seals__note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.trust-seals__note b { color: var(--ink-2); }
@media (max-width: 560px) { .trust-seal { width: 78px; height: 78px; } .trust-seals { gap: 10px; } }

/* GMB reviews strip */
.reviews-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.reviews-cta .stars { color: #986f01; font-size: 1.1rem; letter-spacing: 2px; }   /* 4.56:1 sobre blanco · #f5b301 daba 1.85 y las estrellas SON informacion */
.reviews-cta b { font-size: .96rem; }

/* Nota para modelos sem medidas publicadas */
.size-note { margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.size-note a { color: var(--brand-700); font-weight: 700; text-decoration: underline; }

/* Envio incluído + garantia de envio (bem visível na ficha) */
/* Envio + garantia com os selos da marca (substitui a antiga .ship-strip de texto) */
.trust-row { margin: 14px 0 6px; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.trust-row .trust-seals { gap: 12px; }
.trust-row__note { margin: 10px 0 0; font-size: .83rem; line-height: 1.4; color: var(--muted); display: flex; gap: 7px; align-items: flex-start; justify-content: center; }
.trust-row__note .ic { display: inline-flex; flex: none; margin-top: 2px; }
.trust-row__note svg { width: 15px; height: 15px; color: var(--ok); }
.trust-row__note b { color: var(--ink-2); }

/* Alvos de toque no telemóvel: migalhas e links de rodapé ficavam a ~21px de
   altura. Damos-lhes área clicável sem mexer no aspeto. */
@media (max-width: 640px) {
  .crumbs a, .site-footer a { display: inline-block; padding: 5px 0; }
  .site-footer__legal a { padding: 4px 0; }
}

/* Faixa "fabricado por nós" por cima da grelha (substitui o selo por cartão) */
.shop-banner { display: flex; gap: 14px; align-items: center; margin: 4px 0 18px; padding: 12px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r); background: #fff; }
.shop-banner__seal { width: 52px; height: 52px; flex: none; background: center/contain no-repeat; }
.shop-banner p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.shop-banner b { color: var(--ink); }
@media (max-width: 560px) { .shop-banner { padding: 10px 12px; gap: 10px; } .shop-banner__seal { width: 42px; height: 42px; } .shop-banner p { font-size: .82rem; } }

/* Promo multi-espelho e upsell no carrinho lateral */
.cart-promo { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; margin-bottom: 10px;
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--canvas); }
.cart-promo .ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #fff; color: var(--brand-700); box-shadow: var(--sh-1); }
.cart-promo .ic svg { width: 15px; height: 15px; }
.cart-promo b { display: block; font-size: .86rem; color: var(--ink); line-height: 1.25; }
.cart-promo small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.cart-promo__link { display: inline-block; margin-top: 5px; font-size: .78rem; font-weight: 700; color: var(--brand-700); text-decoration: underline; }
.cart-promo--on { border-style: solid; border-color: var(--ok); background: var(--ok-100); }
.cart-promo--on .ic { color: var(--ok); }
.cart-promo--on b { color: #0b6b3c; }

.cart-express { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; }
.cart-express.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(24,119,210,.12); }
.cart-express input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--brand); cursor: pointer; }
.cart-express b { display: block; font-size: .86rem; color: var(--ink); line-height: 1.25; }
.cart-express small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }

.cart-summary__row.is-desconto span { color: var(--ok); font-weight: 700; }
.cart-summary__row.cart-summary__iva { font-size: .8rem; color: var(--muted); }

/* Quantidade */
.qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.qty-row__label { font-weight: 800; font-size: .9rem; color: var(--ink); }
.qty-row__total { margin-left: auto; font-weight: 800; font-size: .92rem; color: var(--ink); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
/* .qty-row à frente: senão o `.qty button` genérico (mais específico) ganhava
   e o stepper da ficha ficava a 38px em vez dos 44 pretendidos. */
.qty-row .qty__btn { width: 44px; height: 44px; border: 0; background: none; font-size: 1.15rem; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1; }
.qty__btn:hover:not(:disabled) { background: var(--canvas); }
.qty__btn:disabled { opacity: .3; cursor: default; }
.qty__val { min-width: 34px; text-align: center; font-weight: 800; font-size: .98rem; font-variant-numeric: tabular-nums; }

/* ---------- formulário do configurador (7-ago-2026) ----------
   Fase 2: até hoje o último passo eram dois LINKS (WhatsApp e mailto:) e não
   havia formulário nenhum. Quem não tinha cliente de correio perdia-se sem
   deixar rasto. Agora o formulário é o caminho principal e o WhatsApp fica
   como alternativa — não como única via. */
.lead-form__f { display: grid; gap: 10px; text-align: left; }
.lead-form__h { margin: 0 0 2px; font-weight: 700; font-size: 1rem; }
.lead-form__f label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.lead-form__f input {
  width: 100%; padding: .6rem .75rem; font: inherit;
  border: 1px solid var(--line, #d8d8d8); border-radius: 10px; background: #fff;
}
.lead-form__f input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Armadilha anti-spam: fora do ecrã, mas NÃO display:none — há bots que o detetam. */
.lead-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Aviso no PONTO de recolha: o formulario pede nome, telemovel e email, e guarda
   IP e gclid. Sem esta linha nao havia ligacao para a Privacidade onde se pede. */
.lead-form__priv { margin: 6px 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); text-align: center; }
.lead-form__priv a { text-decoration: underline; text-underline-offset: 2px; }
.lead-form__msg:not(:empty) { margin: 4px 0 0; font-size: .85rem; color: #b3261e; }
.lead-form__ok { margin: 0 0 12px; font-weight: 600; }
.lead-form__ou { margin: 14px 0 8px; text-align: center; font-size: .82rem; color: var(--muted, #6b6b6b); }

/* ==========================================================================
   24-ago-2026 · /shop/ en telefono: navegar era dificil. Medido antes de tocar.
   ==========================================================================
   Lo que salio al medir a 390 px, y no era lo que parecia a simple vista:
     · 9.959 px = 11,8 PANTALLAS de scroll para 50 productos
     · 524 px hasta ver el PRIMER producto
     · 73 de 141 objetivos de toque por debajo de 44 px
     · el boton flotante de WhatsApp TAPABA la tarjeta de la columna derecha
   Sin desborde horizontal y con buscador y filtros visibles: el problema no era
   encontrar, era la cantidad de dedo y de scroll que costaba recorrerlo.
   ========================================================================== */
@media (max-width: 640px) {

  /* 1 · LA ALTURA MUERTA DE CADA IMAGEN. `aspect-ratio: 1/1` con
        `object-fit: contain` sobre un espejo APAISADO deja franjas en blanco
        arriba y abajo — se reservaba un cuadrado para pintar un rectangulo.
        🔴 `aspect-ratio: 4/3` NO SIRVE AQUI, y esto se midio: la propiedad
           COMPUTA «4 / 3» y aun asi el contenedor seguia saliendo 171x171. Algo
           del contenido lo estira, asi que la proporcion se queda en deseo.
           Con altura EXPLICITA se cumple: 171 -> 130 px, medido en vivo, y la
           pagina pasa de 9.743 a 8.736 px (11,5 -> 10,4 pantallas).
        La imagen NO se ve mas pequena: `contain` la encaja igual, lo que
        desaparece es el blanco de arriba y abajo. */
  .pcard__imgwrap { aspect-ratio: auto; height: 130px; }
  .pcard__img { height: 100%; padding: 4px; box-sizing: border-box; }

  /* 2 · PRECIO Y BOTON EN LA MISMA FILA. El CTA ocupaba una linea entera bajo
        el precio: ~54 px por tarjeta que no dicen nada nuevo. Juntos siguen
        siendo dos objetivos distintos y el boton conserva sus 44 px de alto,
        que es lo que un dedo necesita. */
  .pcard__body { padding: 10px 12px 12px; }
  .pcard__price { padding-top: 8px; flex-wrap: wrap; }
  .pcard__cta { margin-top: 8px; }
  .pcard__cta .btn { width: 100%; min-height: 44px; padding-block: 10px; }

  /* 3 · EL BOTON DE WHATSAPP TAPABA PRODUCTO. Estaba a 92 px del fondo —una
        altura pensada para no chocar con la barra de precio del configurador—
        y en /shop/, donde esa barra NO existe, quedaba en mitad de la rejilla
        cubriendo la tarjeta de la derecha. Se baja a la esquina y se reduce.
        La excepcion con barra de precio se mantiene: ahi si hace falta subirlo. */
  .wa-fab { bottom: 16px; right: 14px; width: 50px; height: 50px; }
  .wa-fab svg { width: 26px; height: 26px; }
  body.has-pricebar .wa-fab { bottom: 96px; }

  /* 4 · LOS 524 px HASTA EL PRIMER PRODUCTO. La franja de confianza es buena
        —dice quien fabrica— pero empujaba la rejilla fuera de la pantalla.
        Se compacta, no se quita: en movil el primer pliegue es casi todo lo
        que mucha gente ve. */
  .shop-banner { margin: 2px 0 12px; padding: 10px 12px; gap: 10px; }

  /* 5 · OBJETIVOS DE TOQUE. Las migas eran de 32x31 y 25x31 px: por debajo de
        44 el dedo falla y hay que reintentar, que es exactamente la sensacion
        de «navegar es complicado». Se agranda el AREA sin agrandar el texto. */
  .crumbs { padding-top: 10px; }
  .crumbs a { display: inline-block; padding: 7px 4px; margin: -7px 0; }
}

/* ==========================================================================
   24-ago-2026 · /shop/: el banner dentro de la rejilla, puerta al configurador,
                 y filtros usables con el pulgar
   ========================================================================== */

/* 1 · El banner de confianza vive AHORA dentro de la rejilla, tras los primeros
      productos. Ocupa la fila entera en cualquier numero de columnas: `1 / -1`
      no depende de cuantas haya, asi que sirve igual a 2 (movil) que a 3 o 5. */
.shop-grid > .shop-banner { grid-column: 1 / -1; margin: 4px 0; }

/* 2 · La puerta al configurador, como una tarjeta mas de la rejilla. Se integra
      en el barrido de la vista en vez de vivir en la barra lateral, que en
      telefono esta escondida detras del boton «Filtros». */
.pcard--medida {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: 18px 16px; text-align: left;
  background: linear-gradient(160deg, var(--brand-100), #fff 70%);
  border: 1.5px dashed var(--brand);
}
.pcard--medida:hover { border-style: solid; box-shadow: var(--sh-2); }
.pcard--medida__ico { color: var(--brand-700); }
.pcard--medida__ico svg { width: 30px; height: 30px; }
.pcard--medida b { font-size: 1rem; line-height: 1.25; color: var(--ink); }
.pcard--medida__txt { font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.pcard--medida__cta { margin-top: 6px; font-weight: 800; color: var(--brand-700); font-size: .92rem; }

/* 3 · LOS FILTROS EN TELEFONO. Hasta hoy el panel se desplegaba EN LINEA
      (`display: block`) y empujaba la rejilla entera hacia abajo: abrias los
      filtros y perdias de vista los productos que estabas filtrando. Con 50
      modelos y tres grupos de facetas, eso es media pantalla de desplazamiento
      solo para volver a ver algo.
      Ahora es una hoja inferior: se superpone, tiene su propio scroll y se
      cierra con un boton grande. Es el patron que la gente ya conoce de
      cualquier tienda en el movil.
   🔴 TODO ESTO VA DENTRO DEL @media. En escritorio la barra lateral de 232 px
      sigue siendo `sticky` y visible, exactamente como estaba: ni una de estas
      reglas la alcanza. */
@media (max-width: 860px) {
  .shop-aside.open {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--canvas); border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; box-shadow: 0 -14px 40px rgba(16,32,52,.22);
    padding: 8px 14px calc(72px + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
    animation: hojaSube .18s ease-out;
  }
  @keyframes hojaSube { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }

  /* El velo: sin el, la hoja flota sobre la rejilla y no se sabe que hay un
     panel abierto. Se pinta con el propio aside para no anadir nodos. */
  .shop-aside.open::before {
    content: ''; position: fixed; inset: 0 0 76vh 0; z-index: -1;
    background: rgba(16,32,52,.34);
  }

  /* El asa: dice «esto se arrastra/se cierra» sin una palabra. */
  .shop-aside.open::after {
    content: ''; position: sticky; top: 0; display: block;
    width: 42px; height: 4px; margin: 2px auto 10px;
    border-radius: 99px; background: var(--line);
  }

  /* Botón de cierre fijo al fondo de la hoja. Es el que confirma la eleccion,
     asi que tiene que estar SIEMPRE a la vista aunque la lista sea larga. */
  .shop-aside.open .facet { padding: 11px 12px; }   /* 44 px de alto real */
  .shop-aside__cerrar {
    position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 81; display: block; width: auto; min-height: 48px;
  }
  body.filtros-abiertos { overflow: hidden; }       /* que no haga scroll el fondo */

  /* La tarjeta del configurador, mas compacta en dos columnas. */
  .pcard--medida { padding: 14px 12px; }
  .pcard--medida b { font-size: .94rem; }
  .pcard--medida__txt { font-size: .8rem; }
}

/* 🔴 24-ago-2026 · EL CONSENTIMIENTO POR ENCIMA DE TODO. Al abrir la hoja de
      filtros (z-index 80) el banner de cookies (70) quedaba DEBAJO y el boton
      «Ver N modelos» lo tapaba a medias: se veia el texto legal asomando bajo un
      boton azul. El consentimiento no es un elemento mas de la interfaz — si no
      se puede leer ni pulsar, la pagina esta poniendo al visitante a elegir sin
      dejarle elegir. Va por encima de cualquier panel nuestro. */
.consent-banner { z-index: 95; }

/* ─────────────────────────────────────────────────────────────────────────
   🔴 LOS ENLACES DEL PIE CAEN UNO POR LINEA POR ACCIDENTE, NO POR DISENO.
   `.site-footer a` es `inline-flex` (y `inline-block` por debajo de 640 px,
   por la regla de area de toque), o sea de nivel EN LINEA: dos enlaces
   comparten linea EN CUANTO CABEN. Medido con Chrome real contra PRODUCCION
   a 390 px el 24-ago-2026 — pasa en las 69 paginas:
     · «Retroiluminados» + «Carrinho»  se leen «RetroiluminadosCarrinho»
     · «Contactos» + «WhatsApp»        se leen «ContactosWhatsApp»
   No es un caso raro ni cosmetico de una pagina: es lo que ocurre siempre que
   el texto es corto, asi que cualquier enlace nuevo con nombre breve lo
   reproduce. Lo delato una captura, pero NO se diagnostico desde la captura:
   se midio el `display` y la `x` de cada enlace del pie.

   Va sobre `.footer-grid`, no sobre `.site-footer a` a secas: la fila legal
   (`__legal` y `__bottom`) SI quiere sus enlaces en linea, separados por
   puntos medios. Tocar ahi arreglaria una cosa y rompria otra.
   Y va AL FINAL del fichero a proposito: misma especificidad que la regla de
   area de toque de la media query de 640 px, asi que gana por orden sin
   tener que modificarla — esa regla sigue dando sus 5 px de padding.
   La primera columna del pie no tiene enlaces (solo el parrafo y los logos de
   pago), asi que `display:flex` aqui no estira ninguna imagen.
   ───────────────────────────────────────────────────────────────────────── */
.footer-grid a { display: flex; }

/* ─────────────────────────────────────────────────────────────────────────
   🔴 25-ago-2026 · SE LE RESERVA EL HUECO AL CONFIGURADOR. REGRESION MIA.
   Al añadir la sección de texto DEBAJO del configurador, el CLS de
   `/espelho-feito-a-medida/` pasó de 0,030 a 0,256 — medido con Chrome real a
   390 px, y con nombres, que es lo que convierte un número en una causa:

       0,2252 a los 154 ms   section.section   y: 445 -> 0     <- la sección nueva
       0,0303 a los 197 ms   div#cfgPanel      y: 457 -> 518   <- el de siempre

   La causa no es la sección: es que `#configurator` nace VACÍO y lo monta el
   JS. Antes, al crecer, solo empujaba al pie —que a nadie le importa— y ahora
   empuja una sección entera. El contenido nuevo no creó el defecto, lo hizo
   VISIBLE: el mecanismo estaba ahí desde siempre.

   Se reserva la altura que el paso 1 ocupa YA MONTADO, medida a tres anchos:
   390 -> 785 px · 768 -> 614 · 1280 -> 632. Se reserva un pelín por encima
   para no dejar un salto residual, y un pelín nada más para no dejar hueco
   blanco: 5-8 px de holgura.

   ⚠️ Solo arregla el salto de MONTAJE. Los cambios de paso posteriores los
   provoca el usuario (`hadRecentInput`) y no cuentan para CLS — ni deben:
   ahí el movimiento es la respuesta a su clic.
   ───────────────────────────────────────────────────────────────────────── */
#configurator { min-height: 790px; }
@media (min-width: 700px)  { #configurator { min-height: 620px; } }
@media (min-width: 1024px) { #configurator { min-height: 640px; } }

/* ─────────────────────────────────────────────────────────────────────────
   🔴 25-ago-2026 · QUE EL BANNER DE COOKIES NO TAPE LA VIA DE COMPRA.
   `js/site.js` mide su altura y la publica en `--consent-h` mientras está
   puesto (`body.has-consent`). Aquí se usa para dos cosas:

   1 · RESERVAR el hueco al final de la página, para que el banner deje de
       flotar sobre el contenido. Medido antes: a 390 px tapaba «Adicionar» en
       la ficha y las dos primeras opciones del configurador.

   2 · Subir el FAB de WhatsApp por encima de él, que es fija y no la mueve un
       padding.

   Y el CAJÓN del carrito pasa por encima del banner, porque un padding tampoco
   mueve un panel fijo: empataba a `z-index: 95` con él y, al insertarse el
   banner después en el DOM, ganaba el banner — con «Finalizar compra» debajo.
   Queda entre el banner (95) y la galería (110), así que no tapa nada que
   importe más. El banner sigue siendo lo de encima en la página: para verlo
   basta cerrar el cajón, que es un panel que el visitante ha abierto él.
   ───────────────────────────────────────────────────────────────────────── */
body.has-consent { padding-bottom: var(--consent-h, 0px); }
body.has-consent .wa-fab { bottom: calc(var(--consent-h, 0px) + 16px); }
.drawer         { z-index: 105; }
.drawer-overlay { z-index: 104; }

/* ─────────────────────────────────────────────────────────────────────────
   🔴 25-ago-2026 (2ª pasada) · LA BARRA FIJA DE COMPRA, POR ENCIMA DEL BANNER
   — EN ALTURA, NO EN CAPA.

   La primera pasada reservó `padding-bottom` en el `body` y arregló el final
   del documento y el FAB, pero NO esto, y el motivo es que razoné mal: un
   `padding` mueve el final del documento, y el banner es `fixed` — tapa lo que
   haya en la franja baja del VIEWPORT, esté donde esté el scroll.

   Medido después de esa pasada, y por eso se ve la diferencia que importa:
     · ficha        → «Adicionar» vive en `.pdp-sticky`, que es `fixed`. El
                      banner la tapaba SIEMPRE, se desplazara donde se
                      desplazara. Bloqueo duro del botón de comprar.
     · configurador → las opciones del paso 1 están EN EL FLUJO: se pueden
                      desplazar fuera de la franja. Molesto, no bloqueante.
                      Se deja: subirlas exigiría mover el contenido de la
                      página por un banner que dura un toque.

   No se sube de CAPA como el cajón: el cajón es un panel que el visitante
   abre y cierra, pero esta barra está siempre, y ponerla sobre el banner
   dejaría el consentimiento medio tapado — que es exactamente el defecto que
   el `z-index: 95` del banner vino a arreglar. Se sube en ALTURA, con la
   altura real que `site.js` publica: las dos visibles, las dos pulsables.
   ───────────────────────────────────────────────────────────────────────── */
body.has-consent .pdp-sticky { bottom: var(--consent-h, 0px); }