/* ══════════════════════════════════════════════════════════════════════════
   TuMundoPet · Sistema visual "Laboratorio de Agua" (Ruta A)
   Implementa docs/direccion-visual-referencias.md §3 — todos los valores son
   los medidos/calculados en ese estudio, no aproximaciones.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* paleta — contraste WCAG anotado */
  --abismo:#052C2B;          /* blanco encima 14,98:1 */
  --abismo-2:#08403D;
  --petroleo:#046059;        /* sobre blanco 7,44:1 ✓AAA */
  --petroleo-hover:#0A7A70;  /* 5,21:1 */
  --agua:#EDF4F2;
  --agua-2:#DCE9E6;
  --ambar:#FFC424;           /* SOLO sobre --abismo (9,40:1). Nunca texto sobre claro (1,59:1) */
  --naranja:#F09729;         /* solo sobre oscuro (6,54:1) */
  --lima:#DBE571;            /* del logo; sobre abismo */
  --tinta:#16211F;           /* 16,52:1 */
  --tinta-suave:#4A5B58;     /* 7,17:1 sobre blanco · 6,43:1 sobre --agua */
  --linea:rgba(5,44,43,.12);
  --linea-fuerte:rgba(5,44,43,.22);
  --blanco:#fff;
  --alerta:#C43D2B;

  /* sistema — radios 0/4/8/999 y nada más */
  --r-0:0px; --r-1:4px; --r-2:8px; --r-full:999px;
  --sombra-hover:0 12px 32px -12px rgba(5,44,43,.18);   /* tintada, nunca negra */
  --contenedor:1440px;
  --gutter:24px;
  --sec:44px;                                            /* separación entre secciones */
  --header-h:118px;
}
@media (min-width:900px){ :root{ --gutter:40px; --sec:76px; --header-h:136px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:26px; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
/* reset de button: sin esto el texto claro queda invisible sobre el fondo por defecto en iOS */
button{ font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
input,select,textarea{ font:inherit; color:inherit; min-width:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.015em; }
p{ margin:0 0 12px; }
:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px; }
.oscuro :focus-visible{ outline-color:var(--ambar); }

/* escala tipográfica del estudio */
.display{ font-size:31px; line-height:1.08; font-weight:700; letter-spacing:-.025em; }
h1,.h1{ font-size:30px; line-height:34px; }
h2,.h2{ font-size:24px; line-height:29px; }
h3,.h3{ font-size:18px; line-height:23px; font-weight:600; }
.micro{ font-size:13px; line-height:18px; }
@media (min-width:900px){
  .display{ font-size:56px; line-height:58px; }
  h1,.h1{ font-size:40px; line-height:44px; }
  h2,.h2{ font-size:30px; line-height:34px; }
  h3,.h3{ font-size:20px; line-height:24px; }
}
/* IBM Plex Mono: EXCLUSIVAMENTE para valores de parámetro. Nunca párrafos ni titulares. */
.mono{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:-.01em; }
.num{ font-variant-numeric:tabular-nums; }

.contenedor{ width:100%; max-width:var(--contenedor); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.oscuro{ background:var(--abismo); color:var(--blanco); }
.claro{ background:var(--agua); }
.seccion{ padding-top:var(--sec); padding-bottom:var(--sec); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* kicker + encabezado de sección */
.kicker{ font-size:12px; line-height:16px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--petroleo); margin:0 0 10px; }
.oscuro .kicker{ color:var(--ambar); }
.enc{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.enc p{ color:var(--tinta-suave); max-width:62ch; margin:8px 0 0; }
.oscuro .enc p{ color:rgba(255,255,255,.72); }
.enlace-mas{ font-weight:600; color:var(--petroleo); border-bottom:2px solid var(--ambar); padding-bottom:2px; white-space:nowrap; }
.oscuro .enlace-mas{ color:var(--blanco); }
.enlace-mas:hover{ color:var(--petroleo-hover); }

/* subrayado ámbar de idea fuerza */
.marca-txt{ background:linear-gradient(transparent 62%, rgba(255,196,36,.55) 62%); padding:0 2px; }
.oscuro .marca-txt,.hero .marca-txt,.cta-banda .marca-txt{
  background:linear-gradient(transparent 76%, var(--ambar) 76%, var(--ambar) 94%, transparent 94%); }

/* ─────────────────────────────── botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-1); font-weight:700; font-size:15px; line-height:1.2;
  background:var(--petroleo); color:#fff; transition:background .18s ease, transform .18s ease;
  text-align:center; }
.btn:hover{ background:var(--petroleo-hover); }
.btn:active{ transform:translateY(1px); }
.btn--bloque{ width:100%; }
.btn--grande{ padding:16px 28px; font-size:16px; }
.btn--ambar{ background:var(--ambar); color:var(--abismo); }
.btn--ambar:hover{ background:#FFD34F; }
.btn--linea{ background:transparent; border:1.5px solid var(--linea-fuerte); color:var(--tinta); }
.btn--linea:hover{ background:var(--agua); border-color:var(--petroleo); }
.oscuro .btn--linea,.hero .btn--linea,.cta-banda .btn--linea,.panel-promo .btn--linea{ border-color:rgba(255,255,255,.38); color:#fff; }
.oscuro .btn--linea:hover,.hero .btn--linea:hover,.cta-banda .btn--linea:hover,.panel-promo .btn--linea:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ─────────────────────────────── barra utilitaria (marquee) */
.utilitaria{ background:var(--abismo); color:#fff; font-size:13px; line-height:18px; border-bottom:1px solid rgba(255,255,255,.10); }
.utilitaria-in{ display:flex; align-items:center; gap:20px; height:38px; }
.marquee{ flex:1 1 auto; overflow:hidden; position:relative; min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent); }
.marquee-pista{ display:flex; gap:0; width:max-content; animation:correr 42s linear infinite; }
.marquee:hover .marquee-pista{ animation-play-state:paused; }
@keyframes correr{ to{ transform:translateX(-50%); } }
.marquee-item{ display:inline-flex; align-items:center; gap:9px; padding:0 26px; white-space:nowrap; color:rgba(255,255,255,.88); }
.marquee-item b{ color:var(--ambar); font-weight:700; }
.marquee-item svg{ flex:none; opacity:.75; }
.utilitaria-fijo{ display:none; gap:22px; flex:none; }
.utilitaria-fijo a:hover{ color:var(--ambar); }
@media (min-width:1080px){ .utilitaria-fijo{ display:flex; } }
@media (prefers-reduced-motion:reduce){ .marquee-pista{ animation:none; } }

/* ─────────────────────────────── header 2 filas */
.header{ position:sticky; top:0; z-index:60; background:var(--abismo); color:#fff; }
.header-f1{ display:flex; align-items:center; gap:16px; height:72px; }
.logo{ flex:none; display:block; }
.logo img{ height:38px; width:auto; }
@media (min-width:900px){ .logo img{ height:46px; } }
.buscador{ flex:1 1 auto; position:relative; display:none; min-width:0; }
@media (min-width:900px){ .buscador{ display:block; max-width:560px; } }
.buscador input{ width:100%; height:46px; padding:0 46px 0 16px; border-radius:var(--r-1);
  border:1.5px solid rgba(255,255,255,.20); background:rgba(255,255,255,.07); color:#fff; font-size:15px; }
.buscador input::placeholder{ color:rgba(255,255,255,.55); }
.buscador input:focus{ border-color:var(--ambar); background:rgba(255,255,255,.12); outline:none; }
.buscador-btn{ position:absolute; right:6px; top:6px; width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-1); color:#fff; }
.acciones{ margin-left:auto; display:flex; align-items:center; gap:4px; flex:none; }
.icono-btn{ position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-1); color:#fff; }
.icono-btn:hover{ background:rgba(255,255,255,.10); }
.icono-btn span.et{ display:none; }
@media (min-width:1200px){
  .icono-btn{ width:auto; padding:0 12px; gap:8px; display:flex; align-items:center; }
  .icono-btn span.et{ display:inline; font-size:13px; font-weight:600; }
}
.badge-num{ position:absolute; top:5px; right:4px; min-width:19px; height:19px; padding:0 5px;
  background:var(--ambar); color:var(--abismo); border-radius:var(--r-full);
  font-size:11px; font-weight:700; line-height:19px; text-align:center; }
@media (min-width:1200px){ .badge-num{ position:static; margin-left:2px; } }
.hamburguesa{ display:grid; }
@media (min-width:1080px){ .hamburguesa{ display:none; } }
/* Móvil: el logo + 5 iconos no caben en 390 px. Se deja hamburguesa · logo · buscar · carrito;
   el resto vive en el drawer y en la barra inferior fija. */
@media (max-width:899px){
  .header-f1{ gap:6px; height:64px; }
  .hamburguesa{ order:-1; }
  .logo img{ height:31px; }
  .icono-btn{ width:40px; height:40px; }
  .acciones{ gap:0; }
  .acciones .solo-desk{ display:none; }
}
@media (min-width:900px){ .acciones .solo-mob{ display:none; } }

/* fila 2 · navegación con megamenú */
.nav{ display:none; border-top:1px solid rgba(255,255,255,.10); }
@media (min-width:1080px){ .nav{ display:block; } }
.nav-lista{ display:flex; align-items:stretch; gap:0; }
/* position:static para que el panel se ancle al header sticky y no al <li> */
.nav-item{ position:static; }
.nav-enlace{ display:flex; align-items:center; height:46px; padding:0 17px; font-size:13.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.90); white-space:nowrap;
  border-bottom:3px solid transparent; }
.nav-item:hover>.nav-enlace,.nav-enlace.activo{ color:#fff; border-bottom-color:var(--ambar); }
.nav-enlace.oferta{ color:var(--ambar); }
.nav-panel{ position:absolute; left:0; right:0; top:100%; background:#fff; color:var(--tinta);
  border-top:1px solid var(--linea); box-shadow:0 24px 48px -24px rgba(5,44,43,.30);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:70; }
.nav-item:hover .nav-panel,.nav-panel:hover,.nav-panel.abierto{ opacity:1; visibility:visible; transform:none; }
.panel-in{ max-width:var(--contenedor); margin:0 auto; padding:34px var(--gutter) 38px; display:grid; gap:28px; }
.panel-4{ grid-template-columns:repeat(3,minmax(0,1fr)) 300px; }
.panel-col h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--petroleo); margin:0 0 12px; font-weight:700; }
.panel-col+ .panel-col h4{ margin-top:0; }
.panel-col li+li{ margin-top:1px; }
.panel-col a{ display:flex; justify-content:space-between; gap:12px; padding:5px 8px 5px 0; font-size:14.5px; color:var(--tinta-suave); border-radius:var(--r-1); }
.panel-col a:hover{ color:var(--petroleo); background:var(--agua); padding-left:8px; }
.panel-col a i{ font-style:normal; font-size:12px; color:rgba(74,91,88,.62); }
.panel-grupo+.panel-grupo{ margin-top:22px; }
.panel-promo{ background:var(--abismo); color:#fff; border-radius:var(--r-2); padding:22px; display:flex; flex-direction:column; }
.panel-promo .kicker{ color:var(--ambar); }
.panel-promo p{ color:rgba(255,255,255,.76); font-size:14px; line-height:21px; }
.panel-promo .btn{ margin-top:auto; }
/* panel AMBIENTES: 5 fichas + rail */
.panel-amb{ grid-template-columns:minmax(0,1fr) 292px; }
.fichas-amb{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ficha-amb{ border:1px solid var(--linea); border-radius:var(--r-2); overflow:hidden; background:#fff; transition:border-color .18s, box-shadow .18s, transform .18s; }
.ficha-amb:hover{ border-color:var(--petroleo); box-shadow:var(--sombra-hover); transform:translateY(-2px); }
.ficha-amb .esc{ aspect-ratio:4/3; }
.ficha-amb-txt{ padding:11px 13px 13px; }
.ficha-amb-txt b{ display:block; font-size:14px; line-height:19px; }
.ficha-amb-txt i{ font-style:normal; font-size:12px; color:var(--tinta-suave); }
.rail{ border-left:1px solid var(--linea); padding-left:26px; }

/* ─────────────────────────────── escena de agua (sustituye foto de ambiente) */
.esc{ position:relative; overflow:hidden; background:var(--abismo); }
.esc::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% -10%, var(--esc-a,#0A7A70) 0%, transparent 62%),
             radial-gradient(90% 70% at 82% 108%, var(--esc-b,#052C2B) 0%, transparent 70%),
             linear-gradient(168deg,#073B38 0%, #052C2B 100%); }
.esc::after{ content:''; position:absolute; inset:0; opacity:.30; mix-blend-mode:screen;
  background:repeating-linear-gradient(103deg, rgba(255,255,255,.11) 0 2px, transparent 2px 13px); }
.esc>*{ position:relative; z-index:2; }

/* ─────────────────────────────── hero carrusel */
.hero{ position:relative; background:var(--abismo); color:#fff; overflow:hidden; }
.hero-pista{ position:relative; display:flex; min-height:min(76vh,560px); }
@media (min-width:900px){ .hero-pista{ min-height:min(70vh,600px); } }
/* los slides absolute no dan alto al contenedor: el primero queda en flujo y marca la altura */
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.hero-slide:first-child{ position:relative; flex:1 1 100%; }
.hero-slide.on{ opacity:1; pointer-events:auto; }
.hero-slide:first-child:not(.on){ visibility:hidden; }
.hero-fondo{ position:absolute; inset:0; }
.hero-fondo::before{ content:''; position:absolute; inset:0; background:var(--grad); }
.hero-fondo::after{ content:''; position:absolute; inset:0; opacity:.26; mix-blend-mode:screen;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,.13) 0 2px, transparent 2px 15px); }
.burbujas{ position:absolute; inset:0; overflow:hidden; }
.burbuja{ position:absolute; bottom:-40px; border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,.06) 62%);
  border:1px solid rgba(255,255,255,.20); animation:subir linear infinite; }
@keyframes subir{ to{ transform:translateY(-115vh) translateX(var(--dx,14px)); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .burbuja{ display:none; } }
.hero-cont{ position:relative; z-index:3; min-height:100%; display:flex; align-items:center; }
.hero-txt{ max-width:680px; padding:36px 0 76px; }
.hero-txt .kicker{ color:var(--ambar); }
.hero-txt p{ font-size:16px; line-height:26px; color:rgba(255,255,255,.82); margin:14px 0 24px; max-width:52ch; }
@media (min-width:900px){ .hero-txt p{ font-size:18px; line-height:29px; } }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-flecha{ position:absolute; bottom:20px; z-index:6; width:42px; height:42px;
  display:none; place-items:center; border-radius:var(--r-full); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(4px); }
@media (min-width:900px){ .hero-flecha{ display:grid; } }
.hero-flecha:hover{ background:var(--petroleo); border-color:var(--petroleo); }
.hero-flecha.der{ right:var(--gutter); } .hero-flecha.izq{ right:calc(var(--gutter) + 50px); }
.hero-dots{ position:absolute; left:var(--gutter); bottom:32px; z-index:6; display:flex; gap:8px; }
.hero-dot{ width:52px; height:4px; border-radius:var(--r-full); background:rgba(255,255,255,.28); overflow:hidden; }
.hero-dot i{ display:block; height:100%; width:0; background:var(--ambar); }
.hero-dot.on i{ animation:progreso var(--dur,7s) linear forwards; }
@keyframes progreso{ to{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .hero-dot.on i{ animation:none; width:100%; } }

/* ─────────────────────────────── franja de servicios */
.servicios{ border-bottom:1px solid var(--linea); background:#fff; }
.servicios-g{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .servicios-g{ grid-template-columns:repeat(4,1fr); } }
.servicio{ display:flex; gap:11px; align-items:flex-start; padding:13px 12px; }
@media (min-width:900px){ .servicio{ gap:13px; padding:20px 18px; } }
.servicio+.servicio{ border-left:1px solid var(--linea); }
.servicios-g .servicio:nth-child(3){ border-left:0; border-top:1px solid var(--linea); }
.servicios-g .servicio:nth-child(4){ border-top:1px solid var(--linea); }
@media (min-width:900px){ .servicios-g .servicio:nth-child(n){ border-top:0; border-left:1px solid var(--linea); } .servicios-g .servicio:first-child{ border-left:0; } }
.servicio svg{ flex:none; color:var(--petroleo); margin-top:1px; }
.servicio b{ display:block; font-size:14px; line-height:19px; }
.servicio span{ font-size:12.5px; line-height:17px; color:var(--tinta-suave); }

/* ─────────────────────────────── grilla de producto */
.grid-prod{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .grid-prod{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
@media (min-width:1100px){ .grid-prod{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.grid-prod.g5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1100px){ .grid-prod.g5{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--linea); border-radius:var(--r-2); overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease; }
.card:hover{ border-color:rgba(4,96,89,.45); box-shadow:var(--sombra-hover); }
.card-img{ position:relative; display:block; aspect-ratio:1; background:#fff; }
.card-img img{ width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.card:hover .card-img img{ transform:scale(1.035); }
.card-badges{ position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.badge{ font-size:11px; font-weight:700; line-height:1; padding:5px 8px; border-radius:var(--r-1); letter-spacing:.02em; }
.badge--oferta{ background:var(--ambar); color:var(--abismo); }
.badge--oficial{ background:var(--abismo); color:#fff; display:inline-flex; align-items:center; gap:5px; }
.badge--oficial svg{ color:var(--ambar); }
.badge--agotado{ background:var(--tinta-suave); color:#fff; }
.card-fav{ position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; display:grid; place-items:center;
  border-radius:var(--r-full); background:rgba(255,255,255,.92); border:1px solid var(--linea); color:var(--tinta-suave); }
.card-fav:hover,.card-fav.on{ color:var(--alerta); border-color:currentColor; }
.card-cuerpo{ padding:12px 13px 13px; display:flex; flex-direction:column; flex:1 1 auto; gap:2px; }
.card-marca{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave); }
.card-marca:hover{ color:var(--petroleo); }
.card-nombre{ font-size:13.5px; line-height:18px; font-weight:500; color:var(--tinta); margin:3px 0 6px; }
.card-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px; }
.chip{ font-size:11px; line-height:1; padding:4px 7px; border:1px solid var(--linea); border-radius:var(--r-1); color:var(--tinta-suave); background:var(--agua); }
.card-precios{ margin-top:auto; }
.precio{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.precio-antes{ font-size:13px; color:var(--tinta-suave); text-decoration:line-through; margin-left:7px; font-weight:400; }
.precio-unit{ display:block; color:var(--tinta-suave); margin-top:1px; }
.cuotas{ display:block; font-size:11.5px; line-height:16px; color:var(--petroleo); margin-top:3px; font-weight:600; }
.stock-bajo{ font-size:11.5px; font-weight:700; color:var(--alerta); margin-top:5px; }
.card-cta{ margin-top:10px; }
.stepper{ display:flex; align-items:center; justify-content:space-between; width:100%; height:44px;
  border:1.5px solid var(--petroleo); border-radius:var(--r-1); overflow:hidden; }
.stepper button{ width:42px; height:100%; display:grid; place-items:center; color:var(--petroleo); font-weight:700; font-size:18px; }
.stepper button:hover{ background:var(--agua); }
.stepper b{ font-size:15px; font-weight:700; }

/* ─────────────────────────────── fichas de ambiente (home) */
.amb-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:980px){ .amb-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.amb-card{ position:relative; display:block; border-radius:var(--r-2); overflow:hidden; min-height:270px;
  color:#fff; transition:transform .22s ease, box-shadow .22s ease; }
.amb-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(5,44,43,.5); }
.amb-card .esc{ position:absolute; inset:0; }
.amb-card-txt{ position:relative; z-index:3; height:100%; min-height:270px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.amb-card-txt b{ font-size:19px; line-height:24px; font-weight:700; display:block; }
.amb-card-txt i{ font-style:normal; font-size:12.5px; color:rgba(255,255,255,.72); display:block; margin-top:4px; }
.amb-card-txt em{ font-style:normal; margin-top:12px; font-size:13px; font-weight:700; color:var(--ambar); display:inline-flex; align-items:center; gap:6px; }

/* ─────────────────────────────── marcas / autoridad */
.marcas-banda{ background:var(--abismo); color:#fff; }
.marcas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-2); overflow:hidden; }
@media (min-width:640px){ .marcas-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .marcas-grid{ grid-template-columns:repeat(6,1fr); } }
.marca-tile{ background:var(--abismo); min-height:84px; display:grid; place-items:center; padding:16px 12px; text-align:center; transition:background .18s; }
.marca-tile:hover{ background:var(--abismo-2); }
.marca-tile b{ font-size:14px; line-height:18px; font-weight:700; letter-spacing:.02em; }
.marca-tile i{ display:block; font-style:normal; font-size:11px; color:rgba(255,255,255,.55); margin-top:4px; }

/* ─────────────────────────────── PLP */
.plp{ display:grid; gap:28px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){ .plp{ grid-template-columns:262px minmax(0,1fr); gap:36px; } }
.filtros{ display:none; }
@media (min-width:1000px){ .filtros{ display:block; position:sticky; top:calc(var(--header-h) + 14px); max-height:calc(100vh - var(--header-h) - 28px); overflow-y:auto; padding-right:6px; } }
.filtros.abierto{ display:block; }
.f-grupo{ border-bottom:1px solid var(--linea); padding:14px 0; }
.f-grupo>button{ display:flex; width:100%; align-items:center; justify-content:space-between; font-weight:700; font-size:14px; }
.f-grupo>button svg{ transition:transform .2s; color:var(--tinta-suave); }
.f-grupo.cerrado>button svg{ transform:rotate(-90deg); }
.f-grupo.cerrado .f-lista{ display:none; }
.f-lista{ margin-top:11px; display:flex; flex-direction:column; gap:2px; max-height:262px; overflow-y:auto; }
.f-op{ display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:var(--r-1); cursor:pointer; font-size:14px; color:var(--tinta-suave); }
.f-op:hover{ background:var(--agua); color:var(--tinta); }
.f-op input{ accent-color:var(--petroleo); width:16px; height:16px; flex:none; margin:0; }
.f-op i{ font-style:normal; margin-left:auto; font-size:12px; color:rgba(74,91,88,.6); }
.f-op.sel{ color:var(--tinta); font-weight:600; }
.plp-barra{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); margin-bottom:22px; position:sticky; top:var(--header-h); background:#fff; z-index:20; }
.plp-conteo{ font-size:14px; color:var(--tinta-suave); }
.plp-barra select{ height:40px; border:1px solid var(--linea-fuerte); border-radius:var(--r-1); padding:0 34px 0 12px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5B58' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font-size:14px; }
.btn-filtros{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px; border:1.5px solid var(--linea-fuerte); border-radius:var(--r-1); font-weight:700; font-size:14px; }
@media (min-width:1000px){ .btn-filtros{ display:none; } }
.pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; background:var(--agua); border:1px solid var(--linea); border-radius:var(--r-full); font-size:13px; }
.pill button{ color:var(--tinta-suave); display:grid; place-items:center; }
.pill button:hover{ color:var(--alerta); }
.chips-h{ display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; scrollbar-width:none; }
.chips-h::-webkit-scrollbar{ display:none; }
.chip-h{ flex:none; padding:8px 14px; border:1px solid var(--linea-fuerte); border-radius:var(--r-full); font-size:13.5px; font-weight:600; white-space:nowrap; color:var(--tinta-suave); background:#fff; }
.chip-h:hover,.chip-h.on{ background:var(--abismo); border-color:var(--abismo); color:#fff; }
.paginacion{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:38px; flex-wrap:wrap; }
.paginacion a,.paginacion span{ min-width:40px; height:40px; padding:0 10px; display:grid; place-items:center; border:1px solid var(--linea); border-radius:var(--r-1); font-size:14px; font-weight:600; color:var(--tinta-suave); }
.paginacion a:hover{ border-color:var(--petroleo); color:var(--petroleo); }
.paginacion .on{ background:var(--abismo); border-color:var(--abismo); color:#fff; }
.migas{ font-size:13px; color:var(--tinta-suave); padding:16px 0 12px; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.migas a:hover{ color:var(--petroleo); text-decoration:underline; }
.migas svg{ opacity:.5; flex:none; }

/* ─────────────────────────────── PDP */
.pdp{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:1000px){ .pdp{ grid-template-columns:58fr 42fr; gap:52px; } }
.galeria-main{ position:relative; border:1px solid var(--linea); border-radius:var(--r-2); overflow:hidden; background:#fff; aspect-ratio:1; }
.galeria-main img{ width:100%; height:100%; object-fit:contain; }
.galeria-thumbs{ display:flex; gap:9px; margin-top:10px; flex-wrap:wrap; }
.galeria-thumbs button{ width:66px; height:66px; border:1px solid var(--linea); border-radius:var(--r-1); overflow:hidden; background:#fff; }
.galeria-thumbs button.on{ border-color:var(--petroleo); border-width:2px; }
.galeria-thumbs img{ width:100%; height:100%; object-fit:contain; }
.buybox>*+*{ margin-top:14px; }
.bb-marca{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bb-marca a{ font-size:13px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--petroleo); }
.bb-sku{ font-size:12.5px; color:var(--tinta-suave); }
.bb-stock{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--petroleo); }
.bb-stock.rojo{ color:var(--alerta); }
.bb-precio{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.bb-precio .precio{ font-size:34px; }
.ficha-rapida{ background:var(--agua); border:1px solid var(--linea); border-radius:var(--r-2); padding:15px 16px; }
.ficha-rapida h4{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--petroleo); margin:0 0 10px; font-weight:700; }
.fr-fila{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-top:1px solid var(--linea); }
.fr-fila:first-of-type{ border-top:0; }
.fr-fila span{ font-size:13px; color:var(--tinta-suave); }
.fr-fila b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px; font-weight:500; color:var(--tinta); text-align:right; }
.fr-amb{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.formatos{ display:flex; flex-direction:column; gap:8px; }
.formato{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1.5px solid var(--linea); border-radius:var(--r-1); cursor:pointer; }
.formato:hover{ border-color:var(--petroleo); }
.formato.on{ border-color:var(--petroleo); background:var(--agua); }
.formato input{ accent-color:var(--petroleo); flex:none; margin:0; }
.formato .fm-n{ font-size:14px; font-weight:600; }
.formato .fm-u{ font-size:12px; color:var(--tinta-suave); }
.formato .fm-p{ margin-left:auto; text-align:right; flex:none; }
.formato .fm-p b{ font-size:15px; display:block; }
.formato .fm-p .fm-u{ display:block; margin-top:1px; }
.formato>span:first-of-type{ min-width:0; }
.compra{ display:flex; gap:10px; align-items:stretch; }
.compra .stepper{ width:132px; flex:none; height:52px; }
.compra .btn{ flex:1 1 auto; height:52px; }
.micro-senal{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:19px; color:var(--tinta-suave); }
.micro-senal svg{ flex:none; color:var(--petroleo); margin-top:3px; }
.especialista{ display:flex; gap:13px; align-items:center; border:1px solid var(--linea); border-radius:var(--r-2); padding:14px; background:#fff; }
.especialista .av{ width:52px; height:52px; border-radius:var(--r-full); flex:none; background:var(--abismo); display:grid; place-items:center; color:var(--ambar); font-weight:700; font-size:17px; }
.especialista b{ display:block; font-size:14px; }
.especialista span{ font-size:12.5px; color:var(--tinta-suave); line-height:17px; display:block; }
.acordeon{ border-top:1px solid var(--linea); }
.acordeon:last-of-type{ border-bottom:1px solid var(--linea); }
.acordeon>button{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; font-weight:700; font-size:16px; text-align:left; }
.acordeon>button svg{ flex:none; color:var(--petroleo); transition:transform .2s; }
.acordeon.on>button svg{ transform:rotate(180deg); }
.acordeon-cuerpo{ display:none; padding:0 0 22px; color:var(--tinta-suave); max-width:78ch; }
.acordeon.on .acordeon-cuerpo{ display:block; }
.acordeon-cuerpo p{ white-space:pre-line; }
.tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.tabla th,.tabla td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--linea); }
.tabla th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700; }
.tabla td.mono{ font-family:'IBM Plex Mono',monospace; }
.tabla tr.destacada td{ background:var(--agua); font-weight:600; }
.sticky-atc{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:#fff; border-top:1px solid var(--linea);
  box-shadow:0 -8px 24px -12px rgba(5,44,43,.30); padding:10px var(--gutter); display:flex; align-items:center; gap:12px;
  transform:translateY(110%); transition:transform .26s ease; }
.sticky-atc.on{ transform:none; }
.sticky-atc img{ width:44px; height:44px; object-fit:contain; flex:none; border:1px solid var(--linea); border-radius:var(--r-1); }
.sticky-atc .t{ flex:1 1 auto; min-width:0; }
.sticky-atc .t b{ display:block; font-size:13px; line-height:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sticky-atc .t span{ font-size:15px; font-weight:700; }
.sticky-atc .btn{ flex:none; }
@media (max-width:899px){ .sticky-atc{ bottom:62px; } }

/* ─────────────────────────────── drawer de carro */
.velo{ position:fixed; inset:0; background:rgba(5,44,43,.55); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:90; }
.velo.on{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:#fff; z-index:95;
  transform:translateX(101%); transition:transform .3s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; }
.drawer.on{ transform:none; }
.drawer-cab{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--linea); flex:none; }
.drawer-cab b{ font-size:17px; }
.drawer-envio{ padding:14px 18px; background:var(--agua); border-bottom:1px solid var(--linea); flex:none; }
.barra-p{ height:7px; border-radius:var(--r-full); background:var(--agua-2); overflow:hidden; margin-top:9px; position:relative; }
.barra-p i{ display:block; height:100%; background:linear-gradient(90deg,var(--petroleo),var(--petroleo-hover)); border-radius:var(--r-full); transition:width .4s ease; }
.hitos{ display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:var(--tinta-suave); }
.hitos b{ font-weight:700; }
.hitos .logrado{ color:var(--petroleo); }
.drawer-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:6px 18px; }
.linea-carro{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--linea); }
.linea-carro img{ width:66px; height:66px; object-fit:contain; border:1px solid var(--linea); border-radius:var(--r-1); flex:none; }
.linea-carro .lc{ flex:1 1 auto; min-width:0; }
.linea-carro .lc b{ display:block; font-size:13px; line-height:18px; font-weight:500; }
.linea-carro .lc .m{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700; }
.linea-carro .stepper{ height:34px; width:106px; margin-top:8px; }
.linea-carro .stepper button{ width:32px; font-size:16px; }
.linea-carro .pr{ text-align:right; flex:none; }
.linea-carro .pr b{ font-size:14px; }
.quitar{ font-size:12px; color:var(--tinta-suave); text-decoration:underline; margin-top:6px; display:inline-block; }
.quitar:hover{ color:var(--alerta); }
.drawer-cross{ border-top:1px solid var(--linea); background:var(--agua); padding:14px 18px; flex:none; }
.drawer-cross h4{ font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--petroleo); margin:0 0 10px; }
.cross-fila{ display:flex; gap:11px; align-items:center; background:#fff; border:1px solid var(--linea); border-radius:var(--r-1); padding:9px; }
.cross-fila img{ width:48px; height:48px; object-fit:contain; flex:none; }
.cross-fila .cf{ flex:1 1 auto; min-width:0; }
.cross-fila .cf b{ display:block; font-size:12.5px; line-height:16px; font-weight:500; }
.cross-fila .cf span{ font-size:13px; font-weight:700; }
.cross-fila button{ flex:none; padding:8px 12px; background:var(--petroleo); color:#fff; border-radius:var(--r-1); font-size:12.5px; font-weight:700; }
.drawer-pie{ flex:none; padding:16px 18px; border-top:1px solid var(--linea); }
.total-fila{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; font-size:14px; color:var(--tinta-suave); }
.total-fila.grande{ font-size:17px; color:var(--tinta); font-weight:700; margin-bottom:12px; }
.total-fila.grande b{ font-size:22px; }
.ahorro{ color:var(--petroleo); font-weight:700; }
.carro-vacio{ text-align:center; padding:34px 8px; }
.carro-vacio .esc{ width:96px; height:96px; border-radius:var(--r-full); margin:0 auto 16px; }

/* ─────────────────────────────── buscador predictivo */
.predictivo{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; color:var(--tinta);
  border:1px solid var(--linea); border-radius:var(--r-2); box-shadow:0 24px 48px -20px rgba(5,44,43,.34);
  max-height:min(70vh,540px); overflow-y:auto; display:none; z-index:80; }
.predictivo.on{ display:block; }
.pred-sec{ padding:12px 14px; border-bottom:1px solid var(--linea); }
.pred-sec:last-child{ border-bottom:0; }
.pred-sec h5{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); margin:0 0 8px; font-weight:700; }
.pred-item{ display:flex; gap:11px; align-items:center; padding:8px; border-radius:var(--r-1); }
.pred-item:hover{ background:var(--agua); }
.pred-item img{ width:46px; height:46px; object-fit:contain; flex:none; border:1px solid var(--linea); border-radius:var(--r-1); background:#fff; }
.pred-item .pi{ flex:1 1 auto; min-width:0; }
.pred-item .pi b{ display:block; font-size:13px; line-height:17px; font-weight:500; }
.pred-item .pi span{ font-size:12px; color:var(--tinta-suave); }
.pred-item .pp{ flex:none; text-align:right; }
.pred-item .pp b{ font-size:14px; }
.pred-item .pp em{ font-style:normal; display:block; font-size:11px; color:var(--petroleo); font-weight:700; }
.pred-add{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-1); background:var(--agua); color:var(--petroleo); }
.pred-add:hover{ background:var(--petroleo); color:#fff; }
.pred-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pred-tag{ padding:5px 10px; background:var(--agua); border-radius:var(--r-full); font-size:12.5px; color:var(--tinta-suave); }
.pred-tag:hover{ background:var(--abismo); color:#fff; }

/* ─────────────────────────────── menú móvil */
.movil{ position:fixed; top:0; left:0; bottom:0; width:min(360px,88%); background:#fff; z-index:95;
  transform:translateX(-101%); transition:transform .3s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; }
.movil.on{ transform:none; }
.movil-cab{ background:var(--abismo); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex:none; }
.movil-cab img{ height:34px; }
.movil-cab button{ color:#fff; width:40px; height:40px; display:grid; place-items:center; }
.movil-buscar{ padding:12px 16px; border-bottom:1px solid var(--linea); flex:none; }
.movil-buscar input{ width:100%; height:44px; border:1.5px solid var(--linea-fuerte); border-radius:var(--r-1); padding:0 14px; font-size:15px; }
.movil-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:6px 0 16px; }
.m-item{ border-bottom:1px solid var(--linea); }
.m-item>button,.m-item>a{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; font-weight:700; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; text-align:left; }
.m-item>button svg{ transition:transform .2s; color:var(--tinta-suave); flex:none; }
.m-item.on>button svg{ transform:rotate(180deg); }
.m-sub{ display:none; padding:0 16px 14px; }
.m-item.on .m-sub{ display:block; }
.m-sub a{ display:flex; justify-content:space-between; gap:10px; padding:8px 0 8px 12px; font-size:14px; color:var(--tinta-suave); border-left:2px solid var(--linea); }
.m-sub a:hover{ color:var(--petroleo); border-left-color:var(--petroleo); }
.m-sub h5{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--petroleo); margin:12px 0 6px; font-weight:700; }

/* barra inferior fija móvil — reemplaza la burbuja de WhatsApp */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:58; background:var(--abismo); color:#fff;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom); }
@media (min-width:900px){ .tabbar{ display:none; } }
.tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px 8px; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.72); position:relative; }
.tabbar a.on,.tabbar a:hover{ color:var(--ambar); }
.tabbar .badge-num{ top:3px; right:calc(50% - 20px); }

/* asesoría flotante (desktop) — en petróleo, con texto. Nunca el verde #25D366 de todos */
.asesor-flot{ position:fixed; right:20px; bottom:20px; z-index:56; display:none; align-items:center; gap:10px;
  opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease, visibility .3s;
  background:var(--petroleo); color:#fff; padding:12px 18px 12px 14px; border-radius:var(--r-full);
  box-shadow:0 14px 30px -12px rgba(5,44,43,.55); font-weight:700; font-size:14px; }
@media (min-width:900px){ .asesor-flot{ display:inline-flex; } }
.asesor-flot.on{ opacity:1; visibility:visible; transform:none; }
.asesor-flot:hover{ background:var(--petroleo-hover); }
.asesor-flot span{ display:block; font-size:11px; font-weight:400; color:rgba(255,255,255,.78); }

/* ─────────────────────────────── footer */
.footer{ background:var(--abismo); color:#fff; padding-top:52px; }
.footer-g{ display:grid; gap:32px; grid-template-columns:1fr; padding-bottom:38px; }
@media (min-width:760px){ .footer-g{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; } }
.footer h4{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--ambar); margin:0 0 14px; font-weight:700; }
.footer li+li{ margin-top:7px; }
.footer a{ font-size:14px; color:rgba(255,255,255,.74); }
.footer a:hover{ color:#fff; }
.footer-logo img{ height:56px; margin-bottom:14px; }
.footer-desc{ font-size:14px; line-height:22px; color:rgba(255,255,255,.70); max-width:38ch; }
.redes{ display:flex; gap:9px; margin-top:16px; }
.redes a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-1); color:#fff; }
.redes a:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.newsletter{ border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); padding:28px 0; }
.newsletter-in{ display:grid; gap:18px; align-items:center; }
@media (min-width:860px){ .newsletter-in{ grid-template-columns:1fr 460px; gap:36px; } }
.news-form{ display:flex; gap:9px; }
.news-form input{ flex:1 1 auto; height:48px; border-radius:var(--r-1); border:1.5px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07); color:#fff; padding:0 15px; font-size:15px; min-width:0; }
.news-form input::placeholder{ color:rgba(255,255,255,.5); }
.news-form input:focus{ border-color:var(--ambar); outline:none; }
.footer-pie{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding:20px 0 26px; font-size:12.5px; color:rgba(255,255,255,.56); }
.pagos{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.pago{ height:25px; padding:0 9px; display:grid; place-items:center; background:rgba(255,255,255,.10); border-radius:3px; font-size:10px; font-weight:700; letter-spacing:.03em; color:rgba(255,255,255,.80); }

/* ─────────────────────────────── piezas varias */
.tarjetas-3{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .tarjetas-3{ grid-template-columns:repeat(3,1fr); } }
.tarjeta{ border:1px solid var(--linea); border-radius:var(--r-2); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s; }
.tarjeta:hover{ box-shadow:var(--sombra-hover); transform:translateY(-3px); border-color:rgba(4,96,89,.4); }
.tarjeta .esc{ aspect-ratio:16/9; }
.tarjeta-txt{ padding:18px; flex:1 1 auto; display:flex; flex-direction:column; }
.tarjeta-txt h3{ margin-bottom:7px; }
.tarjeta-txt p{ font-size:14px; line-height:21px; color:var(--tinta-suave); }
.tarjeta-txt .enlace-mas{ margin-top:auto; padding-top:12px; align-self:flex-start; }
.cta-banda{ border-radius:var(--r-2); overflow:hidden; position:relative; color:#fff; }
.cta-banda .esc{ position:absolute; inset:0; }
.cta-banda-in{ position:relative; z-index:3; padding:38px 26px; display:grid; gap:20px; align-items:center; }
@media (min-width:860px){ .cta-banda-in{ grid-template-columns:1fr auto; padding:44px 42px; } }
.dato-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-2); overflow:hidden; }
@media (min-width:760px){ .dato-grid{ grid-template-columns:repeat(4,1fr); } }
.dato{ background:var(--abismo); padding:14px 10px; }
.dato b{ display:block; font-size:23px; line-height:1.05; font-weight:700; letter-spacing:-.03em; color:var(--ambar); }
.dato span{ display:block; font-size:11px; line-height:15px; color:rgba(255,255,255,.74); margin-top:4px; }
@media (min-width:760px){
  .dato{ padding:22px 18px; }
  .dato b{ font-size:32px; }
  .dato span{ font-size:13px; line-height:18px; margin-top:6px; }
}
.sintomas{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:700px){ .sintomas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .sintomas{ grid-template-columns:repeat(3,1fr); } }
.sintoma{ display:flex; gap:12px; align-items:center; padding:15px 16px; border:1px solid var(--linea); border-radius:var(--r-2); background:#fff; transition:border-color .18s, box-shadow .18s; }
.sintoma:hover{ border-color:var(--petroleo); box-shadow:var(--sombra-hover); }
.sintoma .ic{ width:42px; height:42px; border-radius:var(--r-full); flex:none; display:grid; place-items:center; background:var(--agua); color:var(--petroleo); }
.sintoma b{ display:block; font-size:14.5px; line-height:19px; }
.sintoma span{ font-size:12.5px; color:var(--tinta-suave); }

/* bundle / kit */
.kit{ display:grid; gap:22px; grid-template-columns:1fr; align-items:start; }
@media (min-width:980px){ .kit{ grid-template-columns:minmax(0,1fr) 340px; gap:34px; } }
.kit-pasos{ display:grid; gap:12px; }
.kit-paso{ border:1px solid var(--linea); border-radius:var(--r-2); padding:15px 16px; background:#fff; }
.kit-paso h4{ font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--petroleo); margin:0 0 11px; font-weight:700; display:flex; align-items:center; gap:9px; }
.kit-paso h4 i{ font-style:normal; width:22px; height:22px; border-radius:var(--r-full); background:var(--abismo); color:#fff; display:grid; place-items:center; font-size:11px; flex:none; }
.kit-ops{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.kit-op{ display:flex; gap:9px; align-items:center; border:1.5px solid var(--linea); border-radius:var(--r-1); padding:8px; cursor:pointer; }
.kit-op:hover{ border-color:var(--petroleo); }
.kit-op.on{ border-color:var(--petroleo); background:var(--agua); }
.kit-op img{ width:42px; height:42px; object-fit:contain; flex:none; }
.kit-op .ko{ min-width:0; }
.kit-op .ko b{ display:block; font-size:12px; line-height:15px; font-weight:500; }
.kit-op .ko span{ font-size:12px; font-weight:700; }
.kit-resumen{ border:1px solid var(--linea); border-radius:var(--r-2); padding:20px; background:var(--agua); position:sticky; top:calc(var(--header-h) + 16px); }
.kit-resumen h3{ margin-bottom:12px; }
.kit-lista li{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--linea); color:var(--tinta-suave); }
.kit-lista li b{ color:var(--tinta); font-weight:600; }

/* pestañas de merchandising */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--linea); margin:-8px 0 20px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ padding:11px 16px; font-size:14.5px; font-weight:700; color:var(--tinta-suave); white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-1px; }
.tab:hover{ color:var(--tinta); }
.tab.on{ color:var(--petroleo); border-bottom-color:var(--ambar); }
.tab i{ font-style:normal; font-size:11px; background:var(--ambar); color:var(--abismo); border-radius:999px;
  padding:2px 7px; margin-left:6px; vertical-align:1px; }

/* la tarjeta editorial pierde alto sin perder presencia */
.tarjeta .esc{ aspect-ratio:21/9; }

/* reseñas */
.resenas{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .resenas{ grid-template-columns:repeat(3,1fr); } }
.resena{ border:1px solid var(--linea); border-radius:var(--r-2); padding:18px; background:#fff; }
.estrellas{ display:inline-flex; gap:2px; color:var(--naranja); }
.estrellas.chico svg{ width:13px; height:13px; }
.resena p{ font-size:14px; line-height:22px; margin:10px 0; }
.resena footer{ font-size:12.5px; color:var(--tinta-suave); display:flex; gap:8px; align-items:center; }
.verificada{ display:inline-flex; align-items:center; gap:4px; color:var(--petroleo); font-weight:600; }
.card-estrellas{ display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.card-estrellas span{ font-size:11.5px; color:var(--tinta-suave); }

/* toast */
.toasts{ position:fixed; right:16px; bottom:16px; z-index:120; display:flex; flex-direction:column; gap:9px; align-items:flex-end; pointer-events:none; }
@media (max-width:899px){ .toasts{ bottom:74px; left:16px; right:16px; align-items:stretch; } }
.toast{ background:var(--abismo); color:#fff; border-radius:var(--r-2); padding:12px 16px; font-size:14px;
  display:flex; align-items:center; gap:10px; box-shadow:0 16px 34px -16px rgba(5,44,43,.6);
  animation:entra .3s cubic-bezier(.22,.61,.36,1); max-width:340px; }
.toast svg{ color:var(--ambar); flex:none; }
@keyframes entra{ from{ opacity:0; transform:translateY(12px); } }

/* banner ANT (barra de demo) */
.ant-barra{ background:linear-gradient(90deg,#0b6e77,#0f8a95); color:#fff; font-size:13px; line-height:18px; }
.ant-barra-in{ display:flex; align-items:center; gap:12px; padding:8px var(--gutter); max-width:var(--contenedor); margin:0 auto; }
@media (max-width:859px){ .ant-barra-in .larga,.ant-barra-in .sep{ display:none; } .ant-barra-in{ gap:8px; } }
.ant-barra b{ font-weight:700; }
.ant-barra .sep{ opacity:.45; }
.ant-barra a{ text-decoration:underline; font-weight:600; white-space:nowrap; }
.ant-barra button{ margin-left:auto; background:rgba(255,255,255,.16); padding:5px 12px; border-radius:var(--r-full); font-size:12px; font-weight:700; white-space:nowrap; }
.ant-barra button:hover{ background:rgba(255,255,255,.28); }

/* panel de notas ANT */
.notas{ position:fixed; top:0; right:0; bottom:0; width:min(520px,100%); background:#fff; z-index:110;
  transform:translateX(101%); transition:transform .3s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; }
.notas.on{ transform:none; }
.notas-cab{ background:#0b6e77; color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex:none; }
.notas-cab b{ font-size:16px; }
.notas-cab button{ color:#fff; width:38px; height:38px; display:grid; place-items:center; }
.notas-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:22px 20px 40px; }
.notas-cuerpo h4{ font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:#0b6e77; margin:26px 0 10px; font-weight:700; }
.notas-cuerpo h4:first-child{ margin-top:0; }
.notas-cuerpo p{ font-size:14px; line-height:22px; color:var(--tinta-suave); }
.notas-cuerpo li{ font-size:14px; line-height:21px; color:var(--tinta-suave); padding-left:18px; position:relative; margin-bottom:8px; }
.notas-cuerpo li::before{ content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:#0b6e77; }
.notas-cuerpo strong{ color:var(--tinta); }
.notas-dato{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--linea); font-size:13.5px; }
.notas-dato b{ font-family:'IBM Plex Mono',monospace; font-size:13px; }
.aviso{ background:#FFF6DF; border:1px solid #F0D89A; border-radius:var(--r-2); padding:13px 15px; font-size:13.5px; line-height:20px; color:#6B4F13; margin:14px 0; }

/* utilidades */
.flex{ display:flex; } .col{ flex-direction:column; } .gap8{ gap:8px; } .gap12{ gap:12px; } .gap16{ gap:16px; }
.wrap{ flex-wrap:wrap; } .ai-c{ align-items:center; } .jc-sb{ justify-content:space-between; }
.mt0{ margin-top:0; } .mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; } .mt32{ margin-top:32px; }
.mb0{ margin-bottom:0; } .mb8{ margin-bottom:8px; } .mb16{ margin-bottom:16px; } .mb24{ margin-bottom:24px; }
.suave{ color:var(--tinta-suave); } .oscuro .suave{ color:rgba(255,255,255,.72); }
.centro{ text-align:center; } .ancho-texto{ max-width:68ch; }
.sin-scroll{ overflow:hidden; }
.oculto{ display:none !important; }

/* ── móvil: filas horizontales con scroll-snap en vez de grillas de 2 columnas.
   Es lo que evita que el home llegue a 17 pantallas. Scroll nativo, sin JS. ── */
@media (max-width:899px){
  .fila-scroll{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; gap:12px;
    margin-right:calc(var(--gutter) * -1); padding-right:var(--gutter); padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .fila-scroll::-webkit-scrollbar{ display:none; }
  .fila-scroll > *{ flex:0 0 72%; max-width:270px; scroll-snap-align:start; }
  .amb-grid.fila-scroll > *{ flex:0 0 78%; max-width:300px; min-height:230px; }
  .amb-grid.fila-scroll .amb-card-txt{ min-height:230px; }
  .tarjetas-3.fila-scroll > *{ flex:0 0 82%; max-width:320px; }
  .sintomas.fila-scroll > *{ flex:0 0 76%; max-width:290px; }
  /* pista de que hay más al costado */
  .fila-scroll::after{ content:''; flex:0 0 4px; }
}
@media (max-width:899px){
  .kit-ops{ grid-template-columns:repeat(2,1fr); }
  .hero-ctas .btn{ flex:1 1 100%; }
}