/* ============================================================================
   DENKOR — capa premium.
   Va DESPUÉS de estilos.css y componentes.css y no reescribe nada de ellos:
   solo añade. Si este archivo no cargara, la tienda seguiría entera.

   Cuatro decisiones que gobiernan el archivo (ver 10_Web/INVESTIGACION-PREMIUM.md):

   1. CSS del motor, no librerías. El JS nuevo de todo el rediseño son ~9 KB.
   2. Sobre fondo blanco liso, backdrop-filter NO HACE NADA: difuminar blanco da
      blanco. Por eso hay un campo de luz verde detrás (body::before). El verde
      como fuente de luz no era solo dirección de arte: es el requisito técnico
      para que el vidrio exista.
   3. Estado base = estado visible. Ninguna animación esconde contenido; si el
      navegador no soporta la técnica, se ve la página completa igual.
   4. prefers-reduced-motion apaga TODO lo que se mueve. Sin excepciones.
   ============================================================================ */

@property --dk-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  --vidrio:rgb(255 255 255 / .72);
  --vidrio-borde:rgb(10 21 18 / .08);
  --vidrio-sombra:
    inset 0 1px 0 0 rgb(255 255 255 / .92),
    inset 0 -1px 0 0 rgb(10 21 18 / .04),
    0 1px 2px rgb(10 21 18 / .06),
    0 14px 34px -14px rgb(10 21 18 / .18);
  --luz:0 0 0 1px rgb(12 214 93 / .18), 0 10px 30px -12px rgb(12 214 93 / .42);
}

/* ============================================================================
   1. TRANSICIÓN ENTRE PÁGINAS — View Transitions API
   Cross-document: una regla, cero JavaScript. Requiere MISMO ORIGEN y no
   funciona en file:// (origen opaco). Donde no exista, la navegación es la
   normal de siempre y no se rompe nada.
   ============================================================================ */
@view-transition{ navigation:auto; }

::view-transition-group(*){ animation-duration:.42s; animation-timing-function:var(--ease); }

@keyframes dk-sale{ to{ opacity:0; transform:translateY(-10px) scale(.994); } }
@keyframes dk-entra{ from{ opacity:0; transform:translateY(12px) scale(1.006); } }
::view-transition-old(root){ animation:.3s var(--ease) both dk-sale; }
::view-transition-new(root){ animation:.44s var(--ease) .06s both dk-entra; }

/* El símbolo de Denkor durante el cambio de página.
   El overlay vive invisible (opacity:0) en las 1,704 páginas: no molesta a
   nadie, pero el navegador le toma snapshot y lo anima DURANTE la navegación. */
.vt-marca{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  pointer-events:none; opacity:0; view-transition-name:dk-marca;
}
.vt-marca .marca-simbolo{ width:112px; height:93px; color:var(--verde);
  filter:drop-shadow(0 0 22px rgb(12 214 93 / .55)); }
.vt-marca .vt-halo{
  position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgb(12 214 93 / .30),rgb(12 214 93 / 0) 66%);
  filter:blur(26px);
}
@keyframes dk-marca-flash{
  0%  { opacity:0; transform:scale(.82); }
  34% { opacity:1; transform:scale(1); }
  66% { opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.09); }
}
::view-transition-new(dk-marca),
::view-transition-old(dk-marca){ animation:.58s var(--ease) both dk-marca-flash; }

/* El logo de la nav es elemento COMPARTIDO: no parpadea entre páginas. */
.marca-nav{ view-transition-name:dk-logo; }
/* La imagen de la ficha de producto. El nombre debe ser único entre elementos
   renderizados: por eso va solo en la ficha, nunca en las tarjetas del listado. */
.ficha-img .flota{ view-transition-name:dk-producto; }

/* Sin JS: si la API no existe, esta clase la pone js/premium.js y hace el
   fundido a mano. Con la API, nunca se activa. */
.dk-saliendo{ opacity:.35; transition:opacity .2s linear; }

/* ============================================================================
   1 bis. LA MARCA, CON EL TAMAÑO QUE MERECE
   Los SVG de Denkor son de un solo trazo con fill="currentColor". Dentro de un
   <img> eso resuelve a NEGRO (el SVG es un documento aparte y no hereda el color
   de la página), así que el logo se pinta con mask-image: el archivo se descarga
   y cachea UNA vez para todo el sitio y el color lo decide el CSS.

   Medidas tomadas del viewBox real:
     logo-denkor-sintag.svg 1000 × 231.63  → 4.3172 : 1  (símbolo + "Denkor", SIN "BOTICA DENTAL")
     logo-denkor-marca.svg  1000 × 833.12  → 1.2003 : 1
   Se declaran ancho y alto fijos, así que no hay salto de maquetación (antes el
   HTML decía 190×46 sobre un PNG cuadrado de 4500×4500). El ancho de cada uso
   se calcula desde el alto por 4.3172 para que el logo sin subtítulo no salte.
   ============================================================================ */
.marca-svg{
  display:block; flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.marca-svg.marca-nav,.marca-svg.marca-pie,.marca-svg.marca-hero{
  -webkit-mask-image:url(../img/logo-denkor-sintag.svg); mask-image:url(../img/logo-denkor-sintag.svg);
}
.marca-svg.marca-simbolo,.marca-svg.marca-agua{
  -webkit-mask-image:url(../img/logo-denkor-marca.svg); mask-image:url(../img/logo-denkor-marca.svg);
}
/* Red de seguridad: si un navegador no soporta mask-image, el logo NO puede
   desaparecer. Cae al wordmark en tipografía de marca, que es Poppins
   justamente porque es pariente de la geométrica del logotipo. */
@supports not ((mask-image:url(#a)) or (-webkit-mask-image:url(#a))){
  .marca-svg{ background:none!important; width:auto!important; }
  .marca-nav::after,.marca-pie::after{
    content:"Denkor"; font-family:Poppins,sans-serif; font-weight:700;
    font-size:34px; letter-spacing:-.03em; color:var(--verde); display:block;
  }
  .marca-pie::after{ color:#fff; }
  .marca-agua,.marca-simbolo{ display:none!important; }
}

/* Cabecera: el logo es el activo de identidad, no un adorno de esquina.
   62px de alto → 268px de ancho (62 × 4.3172, el ratio del logo sin subtítulo). */
.marca-nav{ height:62px; width:268px; color:var(--verde); }
.logo{ transition:transform .3s var(--ease), filter .3s var(--ease); }
.logo:hover .marca-nav{ filter:drop-shadow(0 4px 14px rgb(12 214 93 / .45)); }
.nav-in{ min-height:96px; }

/* Pie: sobre el fondo oscuro el verde de marca sí puede brillar en blanco puro,
   que es como el logo se ve mejor en negativo. */
.marca-pie{ height:64px; width:276px; color:#fff; margin-bottom:20px; }

/* Portada: el símbolo, grande, como marca de agua luminosa detrás del equipo.
   Es la "presencia real" del logo en el home sin robarle sitio al titular. */
.marca-agua{
  position:absolute; z-index:0; pointer-events:none;
  width:min(66%,420px); aspect-ratio:1.2003;
  color:var(--verde); opacity:.09;
  left:50%; top:44%; translate:-50% -50%;
}

/* ============================================================================
   2. CAMPO DE LUZ — lo que le da al vidrio algo que difuminar
   Dos radiales verdes muy tenues, fijos, detrás de todo. Sin esto el
   backdrop-filter sobre blanco es un no-op. Ocupa <10% de intensidad: cumple la
   regla dura de la dirección de arte (el verde es luz, no relleno).
   ============================================================================ */
body::before{
  content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 34vmax at 12% 4%, rgb(12 214 93 / .11), transparent 62%),
    radial-gradient(32vmax 30vmax at 92% 34%, rgb(12 214 93 / .07), transparent 60%),
    radial-gradient(30vmax 28vmax at 50% 96%, rgb(12 214 93 / .05), transparent 62%);
}

/* ---------- el vidrio ---------- */
.vidrio{
  background:var(--vidrio);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--vidrio-sombra);
  border-radius:var(--r-g);
  position:relative; isolation:isolate;
}
/* highlight especular: el brillo diagonal que separa "con blur" de "vidrio" */
.vidrio::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  pointer-events:none;
  background:linear-gradient(138deg,rgb(255 255 255 / .66) 0%,rgb(255 255 255 / 0) 44%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidrio{ background:rgb(255 255 255 / .95); }
}

/* Borde iluminado cónico. Se anima el ÁNGULO, que solo interpola porque está
   registrado con @property arriba. Reservado para una sola pieza del sitio. */
.borde-luz{ position:relative; }
.borde-luz::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  pointer-events:none;
  background:conic-gradient(from var(--dk-ang),
    rgb(77 255 149 / .95) 0turn, rgb(12 214 93 / 0) .16turn,
    rgb(12 214 93 / 0) .5turn, rgb(77 255 149 / .8) .66turn, rgb(12 214 93 / 0) .84turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dk-girar 7s linear infinite;
}
@keyframes dk-girar{ to{ --dk-ang:1turn; } }

/* ============================================================================
   3. SCROLL-DRIVEN ANIMATIONS
   animation-timeline NO forma parte del shorthand `animation` y el shorthand lo
   resetea: por eso va SIEMPRE en su propia línea, después. Y fill-mode `both` es
   obligatorio o el elemento parpadea fuera del rango.
   ============================================================================ */

/* barra de progreso de lectura */
.dk-progreso{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--verde),var(--verde-luz));
  box-shadow:0 0 12px rgb(12 214 93 / .7);
  pointer-events:none;
}
@keyframes dk-crecer{ to{ transform:scaleX(1); } }

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .dk-progreso{ animation:dk-crecer linear; animation-timeline:scroll(root block); }
  }
}
/* Sin soporte la barra no se ve. Es decoración pura: no se pierde información. */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* parallax de la foto dentro de su marco */
    .dk-par{ animation:dk-parallax auto linear both; animation-timeline:view();
             animation-range:cover 0% cover 100%; }
    /* entrada con escala, para piezas grandes */
    .dk-sube{ animation:dk-subir auto linear both; animation-timeline:view();
              animation-range:entry 0% cover 42%; }
  }
}
@keyframes dk-parallax{ from{ translate:0 -5%; } to{ translate:0 5%; } }
@keyframes dk-subir{ from{ opacity:0; transform:translateY(30px) scale(.975); } }

/* ============================================================================
   4. BARRA DE ENVÍO GRATIS — mecanismo honesto nº 1
   Umbral REAL de S/300, el mismo de todo el sitio (construir.js → ENVIO.gratis).
   No hay descuento, no hay precio tachado: solo cuánto falta.
   ============================================================================ */
.dk-envio{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:18px; border-radius:16px;
  background:var(--vidrio);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--vidrio-borde); box-shadow:var(--vidrio-sombra);
  font-size:14px; color:var(--texto);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
@starting-style{ .dk-envio{ opacity:0; transform:translateY(10px); } }
/* En la ficha la barra va justo debajo de "Agregar al carrito" / "Consultar por
   WhatsApp", y .dk-envio no traía margen arriba: quedaba pegada a los botones. */
.acciones + .dk-envio{ margin-top:24px; }
.dk-envio svg{ color:var(--verde-hondo); flex:0 0 auto; }
.dk-envio b{ color:var(--tinta); font-family:Poppins,sans-serif; }
.dk-envio .dk-riel{
  flex:1 0 160px; height:8px; border-radius:99px; overflow:hidden;
  background:var(--linea); position:relative;
}
.dk-envio .dk-riel i{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--verde-hondo),var(--verde));
  box-shadow:0 0 10px rgb(12 214 93 / .55);
  transition:width .55s var(--ease);
}
.dk-envio.logrado .dk-riel i{ background:linear-gradient(90deg,var(--verde),var(--verde-luz)); }
.dk-envio.logrado b{ color:var(--verde-hondo); }

/* versión compacta, pegada al fondo, para el listado y la ficha */
.dk-envio-flota{
  position:sticky; bottom:14px; z-index:50; margin-top:18px;
}

/* ============================================================================
   4 bis. VOLVER A PEDIR — para el cliente que repone todos los meses
   ============================================================================ */
.dk-repetir[hidden]{ display:none; }
.dk-repetir{ margin:0 0 22px; }
.dkr-in{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:16px 20px; border-radius:18px;
  background:var(--vidrio);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgb(12 214 93 / .34); box-shadow:var(--vidrio-sombra);
}
.dkr-tx{ flex:1 1 220px; }
.dkr-tx b{ display:block; font-family:Poppins,sans-serif; font-size:16px; color:var(--tinta); }
.dkr-tx span{ font-size:13.5px; color:var(--suave); }

/* ---------- estado real del local ---------- */
.dk-abierto[hidden]{ display:none; }
.dk-abierto{ font-size:14px; color:var(--suave); }
.dk-abierto b{ color:var(--tinta); font-weight:600; }
.dk-abierto.on b{ color:var(--verde-hondo); }
.dk-abierto.on::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--verde); margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 3px rgb(12 214 93 / .22);
  animation:dk-latir 2.4s var(--ease) infinite;
}
@keyframes dk-latir{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.li-abierto{ align-items:center!important; }

/* ---------- checkout: los opcionales, plegados ---------- */
.ck-extra{ border-top:1px solid var(--linea); margin-top:6px; padding-top:6px; }
.ck-extra summary{
  display:flex; align-items:center; min-height:48px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--verde-hondo); list-style:none;
}
.ck-extra summary::-webkit-details-marker{ display:none; }
.ck-extra summary::before{ content:"+"; font-size:19px; margin-right:9px; line-height:1; }
.ck-extra[open] summary::before{ content:"−"; }
.ck-extra[open]{ padding-bottom:4px; }

/* ============================================================================
   5. PRECIO POR UNIDAD DE USO — mecanismo honesto nº 2
   Se calcula del NOMBRE del propio producto (catalogo.js → unidadDeUso). Si el
   nombre no permite calcularlo con certeza, no se pinta nada.
   ============================================================================ */
.dk-unidad{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"JetBrains Mono",Consolas,monospace; font-size:12.5px;
  color:var(--verde-hondo); background:var(--verde-tenue);
  border:1px solid rgb(12 214 93 / .28); border-radius:999px;
  padding:5px 12px; font-variant-numeric:tabular-nums;
}
.dk-unidad::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 3px rgb(12 214 93 / .2);
}
/* 12px es el piso de tipografía de todo el sitio (lo cerró la auditoría de
   accesibilidad). Ni siquiera una etiqueta secundaria baja de ahí. */
.pr-b .dk-unidad{ font-size:12px; padding:3px 9px; align-self:flex-start; }

/* ============================================================================
   6. FOTOS REALES DEL LOCAL — la prueba social más fuerte de Denkor
   Local físico en Chiclayo frente a competidores que solo venden por Instagram.
   Van en el home CON PESO, no escondidas al pie.
   ============================================================================ */
.local-prueba{ position:relative; overflow:hidden; }
.local-prueba .env{ position:relative; z-index:2; }

.local-cab{
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:end;
  margin-bottom:32px;
}
.local-cab h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.08; }
.local-sello{
  display:grid; gap:12px;
}
/* `> div` y no `div` a secas: con el selector de descendiente, el <div> interior
   (el que junta el <b> y el <span>) también se volvía tarjeta de vidrio —una tarjeta
   dentro de otra— y ponía el título y el texto en columnas (auditoría 25-sep). */
.local-sello > div{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--vidrio);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--vidrio-borde); box-shadow:var(--vidrio-sombra);
  border-radius:16px; padding:15px 18px;
}
.local-sello > div > div{ min-width:0; }
.local-sello svg{ color:var(--verde-hondo); flex:0 0 auto; margin-top:2px; }
.local-sello b{ display:block; font-family:Poppins,sans-serif; font-size:15px; color:var(--tinta); }
.local-sello span{ font-size:13px; color:var(--suave); }

/* Mosaico: la primera foto manda, el resto acompaña. */
.local-mosaico{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
}
.local-foto-real{
  position:relative; overflow:hidden; border-radius:var(--r-g); margin:0;
  background:var(--hueso); border:1px solid var(--linea);
  box-shadow:0 1px 2px rgb(10 21 18 / .05);
  transition:box-shadow .4s var(--ease);
}
.local-foto-real:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.local-foto-real:nth-child(4){ grid-column:span 2; }
/* local-2 es la única VERTICAL (1100×1496). Ocupa dos filas para que se lea
   como retrato en vez de quedar recortada a una tira horizontal. */
.local-foto-real.vertical{ grid-row:span 2; }
.local-foto-real img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* el parallax se aplica a la imagen, que es 110% de alto: el marco no se mueve */
  height:112%; margin-top:-6%;
}
.local-foto-real figcaption{
  position:absolute; left:12px; right:12px; bottom:12px;
  font-size:12.5px; line-height:1.35; color:#fff;
  background:rgb(10 21 18 / .62);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgb(255 255 255 / .16);
  border-radius:11px; padding:8px 11px;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.local-foto-real:hover figcaption,
.local-foto-real:focus-within figcaption{ opacity:1; transform:none; }
.local-foto-real::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35);
}
.local-foto-real:hover{ box-shadow:var(--sombra-l); }

/* cinta de datos duros bajo el mosaico */
.local-datos-duros{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea); border:1px solid var(--linea);
  border-radius:var(--r-g); overflow:hidden; margin-top:22px;
}
.local-datos-duros div{ background:var(--blanco); padding:20px 18px; }
.local-datos-duros b{
  display:block; font-family:Poppins,sans-serif; font-size:clamp(20px,2.2vw,26px);
  color:var(--tinta); letter-spacing:-.02em; line-height:1.15;
}
.local-datos-duros span{ display:block; font-size:13px; color:var(--suave); margin-top:4px; }

/* ============================================================================
   6 bis. SLIDES DEL LOCAL — transición por fundido + vidrio líquido
   Sustituyen la retícula de 6 fotos desiguales que se veía desordenada (local-2
   es vertical y rompía la grilla). Una foto a la vez, siempre en 16:10, con el
   copy sobre un panel de vidrio.
   ============================================================================ */
.slides{
  position:relative; border-radius:28px; overflow:hidden; isolation:isolate;
  background:var(--tinta); box-shadow:var(--sombra-l);
  aspect-ratio:16/10;
}
.slides-pista{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility 0s linear .8s;
}
.slide.on{ opacity:1; visibility:visible; transition:opacity .8s var(--ease), visibility 0s; }
.slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* un empujón lentísimo mientras la foto está visible: da vida sin marear */
  transform:scale(1.04); transition:transform 7s linear;
}
.slide.on img{ transform:scale(1); }
/* velo inferior: sin esto el texto blanco cae sobre zonas claras de la foto */
.slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgb(6 13 10 / .82) 0%,rgb(6 13 10 / .34) 38%,rgb(6 13 10 / 0) 66%);
}

/* el panel de vidrio con el copy */
.slide-panel{
  position:absolute; left:26px; right:26px; bottom:26px; z-index:2;
  max-width:min(560px,84%);
  padding:22px 26px; border-radius:20px;
  background:rgb(255 255 255 / .12);
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgb(255 255 255 / .22);
  box-shadow:inset 0 1px 0 0 rgb(255 255 255 / .34), 0 20px 44px -22px rgb(0 0 0 / .8);
  color:#EAF5F0;
}
.slide-n{
  display:block; font-size:12px; letter-spacing:.14em;
  color:var(--verde-luz); margin-bottom:8px; font-weight:600;
}
.slide-panel b{
  display:block; font-family:Poppins,sans-serif; font-weight:600;
  font-size:clamp(19px,2.3vw,27px); line-height:1.15; color:#fff;
  letter-spacing:-.02em; margin-bottom:7px; text-wrap:balance;
}
.slide-panel p{ font-size:14.5px; line-height:1.6; color:#CFE3DA; }

/* flechas y puntos */
.slide-ir{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgb(6 13 10 / .42);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgb(255 255 255 / .22);
  transition:background .25s, transform .25s var(--ease), border-color .25s;
}
/* Solo scale: el centrado ya lo hace `translate` (arriba). Con translateY(-50%)
   también aquí, las dos se sumaban y la flecha saltaba 24 px hacia arriba al pasar
   el ratón (medido en /nosotros a 1440 px, auditoría 25-sep). */
.slide-ir:hover{ background:rgb(12 214 93 / .5); border-color:var(--verde); transform:scale(1.07); }
.slide-ir:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:3px; }
.slide-ir.prev{ left:18px; } .slide-ir.next{ right:18px; }
.slide-puntos{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:6px; justify-content:center; align-items:center; height:44px;
}
.slide-puntos button{
  width:34px; height:4px; border-radius:99px; padding:0;
  background:rgb(255 255 255 / .34); transition:background .3s, width .3s var(--ease);
}
.slide-puntos button[aria-selected="true"]{ background:var(--verde); width:52px; }
.slide-puntos button:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:4px; }

/* ============================================================================
   7. LA SECCIÓN — PLAN REPOSICIÓN
   ============================================================================ */
.sus{ position:relative; overflow:hidden; background:var(--tinta); color:#D8E9E1; }
/* spotlight que sigue al puntero: un solo listener pasivo escribe --mx/--my */
.sus::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,26%),
    rgb(12 214 93 / .16), transparent 68%);
  transition:background .2s linear;
}
.sus .env{ position:relative; z-index:2; }
.sus h2,.sus h3{ color:#fff; }
.sus .kicker{ color:var(--verde-luz); }
.sus-cab{ max-width:64ch; margin-bottom:40px; }
.sus-cab h2{ font-size:clamp(29px,3.7vw,48px); line-height:1.06; margin-bottom:14px; }
.sus-cab p{ color:#A9C4B9; font-size:17px; }
.sus-cab em{ font-style:normal; color:var(--verde-luz); }

/* el dolor, en tres piezas */
.sus-dolor{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:46px; }
.sus-dolor div{
  background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .11);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-g); padding:24px 22px;
}
.sus-dolor .cifra{
  display:block; font-family:Poppins,sans-serif; font-weight:700;
  font-size:clamp(30px,3.6vw,42px); letter-spacing:-.03em; line-height:1;
  color:var(--verde-luz); margin-bottom:10px;
}
.sus-dolor b{ display:block; color:#EAF5F0; font-family:Poppins,sans-serif; font-size:16px; margin-bottom:6px; }
.sus-dolor p{ color:#9DBBB0; font-size:14px; line-height:1.6; }
.sus-dolor .fuente{ font-size:12px; color:#7E9A8E; margin-top:10px; display:block; }

/* ---------- la calculadora ---------- */
.calc{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:0;
  border-radius:28px; overflow:hidden;
  background:rgb(255 255 255 / .055); border:1px solid rgb(255 255 255 / .13);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 30px 70px -30px rgb(0 0 0 / .6);
}
.calc-in{ padding:32px 34px; border-right:1px solid rgb(255 255 255 / .1); }
.calc-out{ padding:32px 34px; background:rgb(6 13 10 / .34); }
.calc h3{ font-size:19px; margin-bottom:6px; }
.calc .paso{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--verde-luz); margin-bottom:22px; display:block;
}
.calc-campo{ margin-bottom:26px; }
.calc-campo > label,.calc-campo > .lbl{
  display:block; font-size:13.5px; font-weight:600; color:#EAF5F0; margin-bottom:11px;
}

/* especialidad: chips reales del catálogo */
.calc-esp{ display:flex; flex-wrap:wrap; gap:8px; }
.calc-esp label{
  position:relative; display:inline-flex; align-items:center; min-height:40px;
  padding:0 15px; border-radius:999px; cursor:pointer;
  font-size:13.5px; color:#C6DCD3;
  background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .13);
  transition:background .22s, border-color .22s, color .22s, transform .22s var(--ease);
}
.calc-esp input{ position:absolute; opacity:0; width:1px; height:1px; }
.calc-esp label:hover{ transform:translateY(-1px); border-color:rgb(12 214 93 / .5); }
.calc-esp label:has(input:checked){
  background:rgb(12 214 93 / .16); border-color:var(--verde);
  color:#fff; box-shadow:0 0 0 1px rgb(12 214 93 / .35), 0 6px 20px -8px rgb(12 214 93 / .8);
}
.calc-esp label:has(input:focus-visible){ outline:2px solid var(--verde-luz); outline-offset:3px; }

/* volumen: rango real, valor del doctor */
.calc-rango{ display:flex; align-items:center; gap:16px; }
.calc-rango input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:26px; border-radius:99px;
  padding-block:10px; background-clip:content-box; border:none;
  background-image:linear-gradient(90deg,var(--verde) var(--pct,30%),rgb(255 255 255 / .14) var(--pct,30%));
  background-color:transparent; cursor:pointer;
}
.calc-rango input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:4px solid var(--verde); cursor:grab;
  box-shadow:0 4px 14px -3px rgb(12 214 93 / .9);
}
.calc-rango input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid var(--verde);
  box-shadow:0 4px 14px -3px rgb(12 214 93 / .9);
}
.calc-rango input[type=range]:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:4px; }
.calc-rango output{
  font-family:Poppins,sans-serif; font-weight:700; font-size:21px; color:#fff;
  min-width:112px; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.calc-nota{ font-size:12.5px; color:#8FAFA3; margin-top:9px; line-height:1.55; }

/* canasta real del catálogo */
.calc-canasta{ margin-top:4px; }
.calc-canasta ul{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.calc-canasta li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid rgb(255 255 255 / .08); font-size:13.5px;
}
.calc-canasta li:last-child{ border-bottom:none; }
.calc-canasta .et{ color:#D8E9E1; }
.calc-canasta .nm{ display:block; font-size:12px; color:#7E9A8E; margin-top:2px; }
.calc-canasta .pv{
  font-family:"JetBrains Mono",monospace; color:var(--verde-luz);
  font-variant-numeric:tabular-nums; flex:0 0 auto;
  display:inline-flex; align-items:center; min-height:44px; padding-left:10px;
}

/* resultados */
.calc-res{ display:grid; gap:14px; }
.calc-r{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:16px 0; border-bottom:1px solid rgb(255 255 255 / .1);
}
.calc-r:last-of-type{ border-bottom:none; }
.calc-r .k{ font-size:14px; color:#C6DCD3; }
.calc-r .k small{ display:block; font-size:12px; color:#7E9A8E; margin-top:4px; max-width:32ch; line-height:1.5; }
.calc-r .v{
  font-family:Poppins,sans-serif; font-weight:700; font-size:22px; color:#fff;
  letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.calc-r.destacado .v{ color:var(--verde-luz); font-size:27px; }
.calc-tot{
  margin-top:6px; padding:20px; border-radius:18px;
  background:rgb(12 214 93 / .1); border:1px solid rgb(12 214 93 / .3);
}
.calc-tot .k{ font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--verde-luz); font-weight:600; }
.calc-tot .v{
  display:block; font-family:Poppins,sans-serif; font-weight:700;
  font-size:clamp(30px,3.4vw,40px); color:#fff; letter-spacing:-.03em; line-height:1.1; margin-top:6px;
}
.calc-tot p{ font-size:12.5px; color:#9DBBB0; margin-top:9px; line-height:1.55; }

/* nota "cómo se calcula esto": popover nativo, sin JS */
.calc-como{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:12.5px; color:var(--verde-luz); text-decoration:underline;
  text-underline-offset:3px; min-height:44px; background:none; border:none; cursor:pointer;
}
[popover].calc-pop{
  max-width:min(460px,92vw); padding:22px 24px; border-radius:18px;
  border:1px solid var(--linea); background:var(--blanco); color:var(--texto);
  box-shadow:0 30px 70px -24px rgb(10 21 18 / .45); font-size:14px; line-height:1.65;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .28s var(--ease), transform .28s var(--ease),
             display .28s allow-discrete, overlay .28s allow-discrete;
}
[popover].calc-pop:popover-open{ opacity:1; transform:none; }
@starting-style{ [popover].calc-pop:popover-open{ opacity:0; transform:translateY(10px) scale(.98); } }
[popover].calc-pop::backdrop{
  background:rgb(10 21 18 / 0);
  transition:background-color .28s, display .28s allow-discrete, overlay .28s allow-discrete;
}
[popover].calc-pop:popover-open::backdrop{ background:rgb(10 21 18 / .42); }
@starting-style{ [popover].calc-pop:popover-open::backdrop{ background:rgb(10 21 18 / 0); } }
.calc-pop h4{ font-size:16px; margin-bottom:10px; }
.calc-pop ul{ padding-left:19px; margin:0 0 10px; display:grid; gap:7px; }
.calc-pop li::marker{ color:var(--verde-hondo); }
.calc-pop .cerrar-pop{
  margin-top:6px; font-size:13px; font-weight:600; color:var(--verde-hondo);
  min-height:44px; display:inline-flex; align-items:center;
}

/* entrada a Dana desde la sección */
.calc-dana{
  margin-top:22px; padding:22px; border-radius:20px;
  background:rgb(255 255 255 / .055); border:1px solid rgb(255 255 255 / .13);
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
}
.calc-dana .av{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--verde),var(--verde-hondo)); color:#03210E;
  font-family:Poppins,sans-serif; font-weight:700; font-size:19px;
  box-shadow:0 0 0 3px rgb(12 214 93 / .22);
}
.calc-dana .tx{ flex:1 1 220px; }
.calc-dana b{ display:block; color:#fff; font-family:Poppins,sans-serif; font-size:15.5px; }
.calc-dana p{ color:#9DBBB0; font-size:13.5px; margin-top:4px; line-height:1.55; }
.calc-dana .btn{ flex:0 0 auto; }

/* ============================================================================
   7 bis. EL FLUJO DE ACTIVACIÓN — que se sienta aplicación, no formulario
   ============================================================================ */
.activar{ background:var(--hueso); border-block:1px solid var(--linea); }
.wiz{
  background:var(--blanco); border:1px solid var(--linea); border-radius:28px;
  box-shadow:var(--sombra-l); overflow:hidden; max-width:940px;
}
/* barra de pasos */
.wiz-pasos{
  display:flex; list-style:none; margin:0; padding:0;
  border-bottom:1px solid var(--linea); background:var(--hueso);
}
.wiz-pasos li{
  flex:1; display:flex; align-items:center; gap:10px; justify-content:center;
  padding:16px 12px; font-size:13.5px; font-weight:600; color:var(--suave);
  position:relative; transition:color .3s var(--ease), background .3s var(--ease);
}
.wiz-pasos li span{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--linea); color:var(--suave); font-size:13px; flex:0 0 auto;
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.wiz-pasos li.on{ color:var(--tinta); }
.wiz-pasos li.on span{ background:var(--verde); color:#04240F; }
.wiz-pasos li.actual{ background:var(--blanco); }
.wiz-pasos li.actual span{ box-shadow:0 0 0 4px rgb(12 214 93 / .22); }
.wiz-pasos li + li::before{
  content:""; position:absolute; left:0; top:50%; width:1px; height:22px;
  background:var(--linea); translate:0 -50%;
}
.wiz-panel{ padding:30px 32px; }
.wiz-panel[hidden]{ display:none; }
.wiz-cab{ margin-bottom:22px; }
.wiz-cab h3{ font-size:21px; margin-bottom:6px; }
.wiz-cab p{ color:var(--suave); font-size:14.5px; max-width:56ch; }

/* especialidad dentro del asistente */
.wiz-esp{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.wiz-esp label{
  position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border-radius:999px; cursor:pointer; font-size:13.5px; color:var(--texto);
  background:var(--hueso); border:1px solid var(--linea);
  transition:background .2s, border-color .2s, color .2s;
}
.wiz-esp input{ position:absolute; opacity:0; width:1px; height:1px; }
.wiz-esp label:has(input:checked){
  background:var(--verde-tenue); border-color:var(--verde); color:var(--verde-hondo); font-weight:600;
}
.wiz-esp label:has(input:focus-visible){ outline:2px solid var(--verde-hondo); outline-offset:2px; }

/* la lista de productos */
.wiz-items{ display:grid; gap:8px; margin-bottom:20px; }
.wiz-item{
  display:grid; grid-template-columns:24px 1fr auto auto; gap:14px; align-items:center;
  padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r);
  cursor:pointer; transition:border-color .2s, background .2s;
}
.wiz-item:hover{ border-color:rgb(12 214 93 / .45); }
.wiz-item.on{ border-color:var(--verde); background:var(--verde-tenue); }
.wiz-item input[type=checkbox]{ width:22px; height:22px; accent-color:var(--verde-hondo); }
.wiz-item .wi-tx b{ display:block; font-family:Poppins,sans-serif; font-size:14.5px; color:var(--tinta); font-weight:600; }
.wiz-item .wi-tx i{ display:block; font-style:normal; font-size:12.5px; color:var(--suave); margin-top:2px; }
.wiz-item .wi-pr{ font-size:14px; color:var(--tinta); font-weight:600; white-space:nowrap; }
.wiz-item .wi-cant{ display:flex; align-items:center; gap:2px; border:1px solid var(--linea);
  border-radius:999px; padding:2px; background:var(--blanco); }
.wiz-item .wi-cant button{ width:32px; height:32px; border-radius:999px; font-size:17px;
  line-height:1; color:var(--tinta); transition:background .2s; }
.wiz-item .wi-cant button:hover{ background:var(--verde-tenue); }
.wiz-item .wi-cant span{ min-width:24px; text-align:center; font-size:14px; }

/* buscador dentro del asistente */
.wiz-buscar{ position:relative; margin-bottom:22px; }
.wiz-buscar label{ display:block; font-size:13.5px; font-weight:600; color:var(--tinta); margin-bottom:7px; }
.wiz-buscar input{
  width:100%; height:48px; border:1px solid var(--linea); border-radius:12px;
  padding:0 15px; font:inherit; font-size:15px; background:var(--blanco); color:var(--tinta);
}
.wiz-buscar input:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgb(12 214 93 / .15); }
.wiz-sug{
  list-style:none; margin:6px 0 0; padding:6px; position:absolute; left:0; right:0; z-index:20;
  background:var(--blanco); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra-l); max-height:280px; overflow-y:auto;
}
.wiz-sug[hidden]{ display:none; }
.wiz-sug button{
  display:flex; justify-content:space-between; gap:12px; align-items:center; width:100%;
  min-height:44px; padding:8px 12px; border-radius:10px; text-align:left;
  font-size:14px; color:var(--tinta); transition:background .15s;
}
.wiz-sug button:hover{ background:var(--verde-tenue); }
.wiz-sug .mono{ color:var(--verde-hondo); font-weight:600; flex:0 0 auto; }

/* frecuencia */
.wiz-frec{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.wiz-frec label{
  position:relative; display:flex; flex-direction:column; gap:4px; cursor:pointer;
  padding:16px 16px; border:1px solid var(--linea); border-radius:var(--r-g);
  background:var(--blanco); transition:border-color .22s, box-shadow .22s, transform .22s var(--ease);
}
.wiz-frec input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; }
.wiz-frec label:hover{ transform:translateY(-2px); border-color:rgb(12 214 93 / .5); }
.wiz-frec label:has(input:checked){
  border-color:var(--verde); box-shadow:0 0 0 1px var(--verde), var(--sombra-m); background:var(--verde-tenue);
}
.wiz-frec label:has(input:focus-visible){ outline:2px solid var(--verde-hondo); outline-offset:3px; }
.wiz-frec .ft{ font-family:Poppins,sans-serif; font-weight:600; font-size:15.5px; color:var(--tinta); }
.wiz-frec .fd{ font-size:13px; color:var(--verde-hondo); font-weight:600; }
.wiz-frec .fs{ font-size:12.5px; color:var(--suave); line-height:1.45; }
.wiz-frec-libre .fd input{
  width:64px; height:34px; border:1px solid var(--linea); border-radius:8px;
  padding:0 8px; font:inherit; font-size:14px; text-align:center; background:var(--blanco); color:var(--tinta);
}

/* calendario + agenda proyectada */
.wiz-cal{ display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; align-items:start; margin-bottom:24px; }
.wiz-cal .campo input[type=date]{ width:100%; }
.wiz-agenda{
  background:var(--hueso); border:1px solid var(--linea); border-radius:var(--r-g); padding:20px 22px;
}
.wiz-agenda b{ display:block; font-family:Poppins,sans-serif; font-size:14px; color:var(--tinta); margin-bottom:12px; }
.wiz-agenda ol{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.wiz-agenda li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--linea); font-size:14px;
}
.wiz-agenda li:last-child{ border-bottom:none; }
.wiz-agenda li::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 3px rgb(12 214 93 / .2); flex:0 0 auto; align-self:center;
}
.wiz-agenda .fx{ flex:1; color:var(--tinta); font-weight:600; }
.wiz-agenda .av{ font-size:12.5px; color:var(--suave); }
.wiz-proy{ margin-top:12px; font-size:13px; color:var(--verde-hondo); font-weight:600; }

/* resumen y pie del asistente */
.wiz-resumen{ display:grid; gap:0; margin:20px 0; border:1px solid var(--linea); border-radius:var(--r-g); overflow:hidden; }
.wr-l{ display:flex; justify-content:space-between; gap:14px; padding:13px 18px;
  border-bottom:1px solid var(--linea); font-size:14px; color:var(--suave); background:var(--blanco); }
.wr-l:last-child{ border-bottom:none; }
.wr-l b{ color:var(--tinta); font-family:Poppins,sans-serif; }
.wiz-pie{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--linea); }
.wiz-total{ font-size:14.5px; color:var(--suave); }
.wiz-total b{ font-family:Poppins,sans-serif; font-size:20px; color:var(--tinta); }
.wiz-total i{ font-style:normal; font-size:13px; color:var(--verde-hondo); font-weight:600; }
.wiz-ok{
  background:var(--blanco); border:1px solid var(--verde); border-radius:28px;
  box-shadow:var(--sombra-l); padding:44px 32px; text-align:center; max-width:940px;
}
.wiz-ok h3{ font-size:23px; margin-bottom:10px; }
.wiz-ok p{ color:var(--suave); font-size:15.5px; line-height:1.7; max-width:52ch; margin-inline:auto; }
.wiz-ok[hidden]{ display:none; }

/* ============================================================================
   8. PLAZOS REALES — escasez verdadera, sin contadores falsos
   ============================================================================ */
.dk-plazos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dk-plazo{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:17px 19px; transition:border-color .25s, transform .25s var(--ease);
}
.dk-plazo:hover{ border-color:rgb(12 214 93 / .4); transform:translateY(-2px); }
.dk-plazo svg{ color:var(--verde-hondo); flex:0 0 auto; margin-top:2px; }
.dk-plazo b{ display:block; font-family:Poppins,sans-serif; font-size:15px; color:var(--tinta); }
.dk-plazo span{ font-size:13px; color:var(--suave); line-height:1.5; }

/* ============================================================================
   9. DATOS PENDIENTES, CON ELEGANCIA
   Los marcadores <<PENDIENTE — …>> NO se borran: siguen en el HTML dentro de un
   comentario, así que `grep -r PENDIENTE` los sigue encontrando antes de
   publicar. Lo que cambia es que el visitante ya no ve corchetes crudos: ve un
   estado honesto y discreto, o la sección en actualización con su salida.
   ============================================================================ */
.dato-pend{
  display:inline-flex; align-items:center; gap:6px;
  /* nunca por debajo de 12px, aunque el contenedor sea chico */
  font-size:max(12px,.92em); color:var(--suave); font-style:normal;
  border-bottom:1px dashed var(--linea); padding-bottom:1px;
}
.dato-pend::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--ambar);
  opacity:.6; flex:0 0 auto;
}
footer .dato-pend{ color:#8AA69B; border-bottom-color:rgb(255 255 255 / .16); }
footer .dato-pend::before{ background:#C89A3C; }

.bloque-pend{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--hueso); border:1px solid var(--linea);
  border-left:3px solid var(--verde); border-radius:0 var(--r) var(--r) 0;
  padding:18px 20px; margin:14px 0 20px;
}
.bloque-pend svg{ color:var(--verde-hondo); flex:0 0 auto; margin-top:2px; }
.bloque-pend b{ display:block; font-family:Poppins,sans-serif; font-size:15px; color:var(--tinta); margin-bottom:4px; }
.bloque-pend p{ font-size:14px!important; color:var(--suave)!important; line-height:1.6; margin:0!important; }
.bloque-pend a{ color:var(--verde-hondo); font-weight:600; }

/* ============================================================================
   10. FOOTER — redes sociales
   Los enlaces exactos no los tenemos. El markup queda listo y el marcador
   <<PENDIENTE — URL de …>> vive en un comentario junto a cada uno.
   ============================================================================ */
.f-redes{ display:flex; gap:10px; margin-top:20px; }
.f-redes a{
  width:44px; height:44px; min-height:44px; border-radius:13px; padding:0;
  display:grid; place-items:center; color:#9FB8AE;
  background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .1);
  transition:color .22s, background .22s, border-color .22s, transform .22s var(--ease);
}
.f-redes a:hover{
  color:#fff; background:rgb(12 214 93 / .18); border-color:rgb(12 214 93 / .5);
  transform:translateY(-2px);
}
.f-redes a[aria-disabled="true"]{ opacity:.5; cursor:default; }
.f-redes a[aria-disabled="true"]:hover{ transform:none; background:rgb(255 255 255 / .06);
  border-color:rgb(255 255 255 / .1); color:#9FB8AE; }

/* ============================================================================
   11. AFINADO DE LO QUE YA EXISTÍA
   Retoques quirúrgicos, no reescrituras.
   ============================================================================ */

/* nav: vidrio de verdad ahora que hay campo de luz detrás */
.nav{
  background:rgb(255 255 255 / .74);
  backdrop-filter:blur(20px) saturate(190%); -webkit-backdrop-filter:blur(20px) saturate(190%);
  border-bottom:1px solid rgb(10 21 18 / .07);
}
.nav.pegado{
  background:rgb(255 255 255 / .86);
  box-shadow:0 1px 0 rgb(10 21 18 / .05), 0 14px 34px -22px rgb(10 21 18 / .3);
}
/* la catbar se funde en los bordes en vez de cortarse en seco */
.catbar-in{
  mask-image:linear-gradient(to right,#0000 0,#000 18px,#000 calc(100% - 18px),#0000 100%);
  -webkit-mask-image:linear-gradient(to right,#0000 0,#000 18px,#000 calc(100% - 18px),#0000 100%);
}

/* ---------- POR PEDIDO ----------
   Ya no hay cuarentena: el equipo de alto ticket se publica con precio y con un
   plazo de despacho escrito. Esta etiqueta dice exactamente eso, sin sugerir
   que está agotado (que es lo que el sitio nunca publica). */
.dk-pedido{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:12px; font-weight:600; color:var(--tinta);
  background:var(--hueso); border:1px solid var(--linea);
  border-radius:999px; padding:4px 11px;
}
.dk-pedido::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--ambar); flex:0 0 auto;
}
.nota-pedido{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 18px;
  padding:14px 16px; border-radius:14px;
  background:var(--hueso); border:1px solid var(--linea); border-left:3px solid var(--verde);
  font-size:13.5px; line-height:1.6; color:var(--suave);
}
.nota-pedido svg{ color:var(--verde-hondo); flex:0 0 auto; margin-top:2px; }
/* La etiqueta de la tarjeta va sobre la foto, arriba a la izquierda */
.pr-img .etiq.gris{ background:rgb(10 21 18 / .82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- HERO: la imagen ocupa lo que merece ----------
   Eros: "haz la imagen de la derecha más grande, al mismo tamaño que la del
   interior del local". Se agranda el producto y se cierra el aire muerto que
   quedaba alrededor de la figura. */
/* OJO: va dentro de min-width. componentes.css colapsa el hero a una columna a
   partir de 860px, y como premium.css carga después, una regla suelta aquí
   ganaría por orden de cascada y dejaría la portada en dos columnas a 375px —
   con la figura aplastada a 52px. Se aprendió rompiéndolo. */
@media (min-width:861px){
  .hero-in{
    /* La columna de la figura pasa a ser la más ancha: así el equipo se ve al
       mismo tamaño que la foto del interior del local (~590px), que era el
       encargo. Antes era 1.05fr/.95fr y dejaba el producto en 462px. */
    grid-template-columns:1fr 1.06fr;
    gap:40px; align-items:center; padding:52px 0 60px;
  }
  .hero-fig{ min-height:0; padding-bottom:82px; }
  /* La foto del equipo es VERTICAL (800×1000). Se limita por ALTO, no por
     ancho: así crece de verdad — de 462×526 a ~512×640 — sin estirar el
     producto ni empujar el hero a una altura absurda. */
  .flota{ width:100%; max-width:512px; height:auto; justify-self:center; }
  .hero-fig .glow{ width:88%; left:6%; top:2%; }
}
/* Dos fotos = dos del mismo tamaño, no una grande y una estampilla. */
.local-mosaico.duo{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
.local-mosaico.duo .local-foto-real{ grid-column:auto; grid-row:auto; aspect-ratio:3/2; }
.local-mosaico.duo .local-foto-real img{ height:112%; }

/* aval bajo el CTA del hero: la prueba social pegada al punto de decisión */
.hero-aval{
  display:flex; align-items:center; gap:9px; margin-top:20px;
  font-size:13.5px; color:var(--suave);
}
.hero-aval svg{ color:var(--verde-hondo); flex:0 0 auto; }

/* tarjeta de precio del hero: vidrio calibrado para blanco */
.precio-flota{
  background:rgb(255 255 255 / .72);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgb(10 21 18 / .07);
  box-shadow:var(--vidrio-sombra);
}

/* párrafos sin líneas huérfanas */
p,li,.sec-h p,.legal p{ text-wrap:pretty; }

/* La sombra de las tarjetas se anima con opacity en una capa, no con box-shadow:
   animar box-shadow repinta cada frame y con 24 tarjetas el scroll se nota. */
.pr,.cat,.eq{ transition:transform .3s var(--ease), border-color .3s; }
.pr::after,.cat::after,.eq::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease);
  box-shadow:0 24px 48px -20px rgb(6 86 44 / .22), 0 2px 8px rgb(10 21 18 / .05);
}
.pr:hover::after,.cat:hover::after,.eq:hover::after{ opacity:1; }
.pr:hover,.cat:hover,.eq:hover{ box-shadow:none; }

/* botón primario: el glow es luz, no relleno */
.btn-p{ position:relative; }
.btn-p::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%,rgb(12 214 93 / .55),transparent 72%);
  filter:blur(10px); opacity:0; transition:opacity .28s var(--ease);
}
.btn-p:hover::after{ opacity:1; }

/* ============================================================================
   12. RESPONSIVE
   ============================================================================ */
@media (max-width:980px){
  /* El logo baja de tamaño pero sigue siendo legible. 46px de alto × 4.3172. */
  .marca-nav{ height:46px; width:199px; }
  .nav-in{ min-height:80px; }
}
@media (max-width:1080px){
  .wiz-frec{ grid-template-columns:1fr 1fr; }
  .wiz-cal{ grid-template-columns:1fr; }
  .calc{ grid-template-columns:1fr; }
  .calc-in{ border-right:none; border-bottom:1px solid rgb(255 255 255 / .1); }
  .sus-dolor{ grid-template-columns:1fr; }
  .local-cab{ grid-template-columns:1fr; gap:28px; }
  .local-datos-duros{ grid-template-columns:1fr 1fr; }
  .dk-plazos{ grid-template-columns:1fr; }
  .local-mosaico{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; }
  .local-foto-real:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .local-foto-real:nth-child(4){ grid-column:span 2; }
}
@media (max-width:620px){
  /* 40px de alto → 173px de ancho (× 4.3172). Entra sin empujar al carrito ni
     a la hamburguesa. */
  .marca-nav{ height:40px; width:173px; }
  .marca-pie{ height:52px; width:225px; }
  .nav-in{ min-height:0; }
  .marca-agua{ width:72%; opacity:.07; }
  .calc-in,.calc-out{ padding:24px 20px; }
  .calc-rango{ flex-wrap:wrap; }
  .calc-rango output{ min-width:0; width:100%; text-align:left; order:-1; font-size:24px; }
  .calc-r{ flex-direction:column; gap:6px; }
  .calc-r .v{ font-size:20px; }
  .local-datos-duros{ grid-template-columns:1fr; }
  /* En móvil el mosaico se convierte en carrusel con snap: cabe una foto grande
     y honesta en vez de seis estampillas ilegibles. */
  .local-mosaico{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:16px; overscroll-behavior-inline:contain;
    scrollbar-width:none; padding-bottom:4px;
    mask-image:linear-gradient(to right,#0000 0,#000 12px,#000 calc(100% - 12px),#0000 100%);
    -webkit-mask-image:linear-gradient(to right,#0000 0,#000 12px,#000 calc(100% - 12px),#0000 100%);
  }
  .local-mosaico::-webkit-scrollbar{ display:none; }
  .local-foto-real{ flex:0 0 82%; height:230px; scroll-snap-align:center; }
  .local-foto-real figcaption{ opacity:1; transform:none; }
  .vt-marca .marca-simbolo{ width:82px; height:68px; }
  .dk-envio{ font-size:13px; padding:12px 14px; }
  .calc-esp label{ font-size:13px; padding:0 13px; }
  /* El asistente en móvil: una columna por fila y el stepper debajo del nombre,
     que a 375px en cuatro columnas dejaba 73px para el texto del producto. */
  .wiz-panel{ padding:22px 18px; }
  .wiz-frec{ grid-template-columns:1fr; }
  .wiz-item{ grid-template-columns:24px 1fr auto; row-gap:10px; }
  .wiz-item .wi-cant{ grid-column:2 / -1; justify-self:start; }
  .wiz-pasos li{ flex-direction:column; gap:5px; padding:12px 6px; font-size:12px; text-align:center; }
  .wiz-pie{ flex-direction:column; align-items:stretch; }
  .wiz-pie .btn{ width:100%; }
  .wiz-agenda li{ flex-wrap:wrap; }
}

/* ============================================================================
   13. prefers-reduced-motion — se apaga TODO lo que se mueve.
   estilos.css ya mata animation y transition globalmente; aquí se cierran los
   casos que ese barrido no alcanza: los pseudo-elementos de la transición de
   página, el scroll-driven y el spotlight.
   ============================================================================ */
@media (max-width:900px){
  .slides{ aspect-ratio:4/5; }
  .slide-panel{ left:16px; right:16px; bottom:52px; max-width:none; padding:18px 20px; }
  .slide-ir{ width:44px; height:44px; }   /* el piso táctil del sitio son 44px */
  .slide-ir.prev{ left:10px; } .slide-ir.next{ right:10px; }
  /* En móvil el hero apila: la figura va arriba, a todo el ancho disponible, y
     reserva sitio abajo para la tarjeta de precio. */
  .hero-fig{ padding-bottom:104px; min-height:0; }
  .flota{ width:78%; max-width:340px; height:auto; justify-self:center; }
}
@media (max-width:620px){
  /* En el teléfono el panel de vidrio ocupa el centro de la foto y las flechas,
     centradas en vertical, tapaban el contador («01 / 06») y la primera letra del
     titular (medido en /nosotros a 390 px). Arriba solo hay foto, como en el
     carrusel de la portada. */
  .slide-ir{ top:38px; }
}

@media (prefers-reduced-motion:reduce){
  /* El carrusel sigue funcionando, pero sin autoavance (lo apaga premium.js),
     sin zoom y con corte seco en vez de fundido. */
  .slide{ transition:none!important; }
  .slide img{ transform:none!important; transition:none!important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none!important; }
  .vt-marca{ display:none!important; }
  .dk-progreso{ display:none!important; }
  .dk-par,.dk-sube{ animation:none!important; translate:none!important; transform:none!important; opacity:1!important; }
  .local-foto-real img{ height:100%; margin-top:0; }
  .sus::before{ background:radial-gradient(420px circle at 70% 26%,rgb(12 214 93 / .16),transparent 68%)!important; }
  .borde-luz::after{ animation:none!important; background:linear-gradient(140deg,rgb(77 255 149 / .8),rgb(12 214 93 / .1))!important; }
  .local-foto-real figcaption{ opacity:1; transform:none; }
}

/* ============================================================================
   14. HOME ESTILO FALABELLA — banner rotativo + mosaico de categorías con foto
   Densidad visual: imagen protagonista con titular y CTA superpuestos por HTML
   (nunca quemados en la foto), y secciones de fondo verde profundo intercaladas
   para dar ritmo blanco↔verde. El verde es LUZ/escena, jamás texto sobre blanco.
   ============================================================================ */

/* ---- Banner rotativo (full-bleed). Altura fija = cero salto de maquetación,
        no depende de las dimensiones de la foto. ---- */
/* padding:0 — como <section> heredaba los 78 px (54 en móvil) de arriba y abajo:
   una franja blanca entre la barra de especialidades y el banner. */
.hero-c{ position:relative; padding:0; }
.hero-carrusel{ position:relative; width:100%; overflow:hidden; background:var(--tinta);
  height:clamp(420px,42vw,560px); }
.hero-carrusel:focus-visible{ outline:3px solid var(--verde-luz); outline-offset:-3px; }
.hero-pista{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility 0s .8s; }
.hero-slide.on{ opacity:1; visibility:visible; transition:opacity .8s var(--ease), visibility 0s; }
.hero-c-media{ position:absolute; inset:0; overflow:hidden; }
.hero-c-img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.06); transition:transform 7s var(--ease); }
.hero-slide.on .hero-c-img{ transform:scale(1); }          /* Ken Burns sutil */
/* Sin foto todavía: escena de marca (verde profundo) con halo verde. Nunca un
   <img> roto ni un hueco. */
.hero-c-fondo{ background:linear-gradient(125deg,#06371F 0%,#0A1512 62%,#04240F 100%); }
.hero-c-fondo::after{ content:""; position:absolute; width:62%; aspect-ratio:1; right:-8%; top:-24%;
  background:radial-gradient(circle,rgb(12 214 93 / .34),transparent 66%); filter:blur(18px); }
.hero-c-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgb(4 12 8 / .82) 0%, rgb(4 12 8 / .56) 34%, rgb(4 12 8 / .12) 62%, transparent 82%),
             linear-gradient(0deg, rgb(4 12 8 / .5) 0%, transparent 42%); }
.hero-c-in{ position:relative; z-index:2; height:100%; display:flex; align-items:center; }
/* La flecha izquierda (18 + 50 px) tapaba la primera letra del titular en
   pantallas de hasta ~1.380 px. El texto arranca después de la flecha. */
@media (min-width:621px){
  .hero-c-in{ padding-inline:max(24px, calc(84px - max(0px, (100vw - 1240px) / 2))); }
}
.hero-c-panel{ max-width:min(560px,60%); color:#fff; }
.hero-c-kicker{ font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-luz); font-weight:600; margin-bottom:14px; }
.hero-c-t{ color:#fff; font-size:clamp(28px,3.6vw,50px); line-height:1.06; letter-spacing:-.01em;
  margin-bottom:16px; text-shadow:0 2px 20px rgb(0 0 0 / .35); }
.hero-c-sub{ color:#E7F2EC; font-size:clamp(15px,1.4vw,18px); line-height:1.55; max-width:46ch;
  margin-bottom:26px; text-shadow:0 1px 12px rgb(0 0 0 / .4); }
/* Controles: flechas + puntos, navegables por teclado, foco visible. */
.hero-ir{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:50px; height:50px;
  border-radius:999px; display:grid; place-items:center; color:#fff; cursor:pointer;
  background:rgb(10 21 18 / .42); border:1px solid rgb(255 255 255 / .28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s; }
.hero-ir:hover{ background:rgb(12 214 93 / .5); border-color:var(--verde); transform:translateY(-50%) scale(1.07); }
.hero-ir:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:3px; }
.hero-ir.prev{ left:18px; } .hero-ir.next{ right:18px; }
.hero-puntos{ position:absolute; left:0; right:0; bottom:18px; z-index:3;
  display:flex; gap:9px; justify-content:center; }
.hero-puntos button{ width:26px; height:6px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:rgb(255 255 255 / .42); transition:background .25s, width .25s; }
.hero-puntos button[aria-selected="true"]{ background:var(--verde); width:46px; }
.hero-puntos button:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:4px; }

/* ---- Escena verde: heredera del ritmo de .repo. El verde es fondo, el texto
        va claro (blanco / gris claro / verde-luz para el kicker). ---- */
.escena{ position:relative; overflow:hidden; background:var(--tinta); color:#D8E9E1; }
.escena .sec-h h2{ color:#fff; }
.escena .sec-h p{ color:#A9C4B9; }
/* el kicker es un <p> dentro de .sec-h: hace falta subir especificidad para que
   gane a `.escena .sec-h p` y recupere el verde-luz de acento. */
.escena .sec-h .kicker{ color:var(--verde-luz); }
.escena-glow{ width:560px; height:560px; left:-170px; top:-180px;
  background:radial-gradient(circle,rgb(12 214 93 / .30),transparent 68%); }

/* ---- Mosaico "Busca por especialidad": 7 tiles, el primero doble-ancho como
        el tile destacado de Falabella; 2+1·6 = 8 = 4×2, rejilla sin huecos. ---- */
.catmos{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; }
.catmos-i{ position:relative; overflow:hidden; border-radius:var(--r-g); isolation:isolate;
  display:flex; align-items:flex-end; border:1px solid rgb(255 255 255 / .10);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.catmos-i:nth-child(1){ grid-column:span 2; }
.catmos-media{ position:absolute; inset:0; z-index:-2; }
.catmos-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.catmos-fondo{ background:linear-gradient(150deg,#0C4326 0%,#0A1512 72%); }
.catmos-fondo .catmos-media{ background:radial-gradient(120% 82% at 82% 8%,rgb(12 214 93 / .28),transparent 60%); }
.catmos-ov{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgb(4 12 8 / .86) 0%, rgb(4 12 8 / .34) 54%, rgb(4 12 8 / .06) 100%); }
.catmos-i:hover{ transform:translateY(-4px); box-shadow:var(--sombra-l); border-color:rgb(12 214 93 / .5); }
.catmos-i:hover .catmos-img{ transform:scale(1.06); }
.catmos-i:focus-visible{ outline:2px solid var(--verde-luz); outline-offset:3px; }
.catmos-txt{ position:relative; z-index:1; padding:18px 20px; width:100%; }
.catmos-n{ display:block; font-family:Poppins,sans-serif; font-weight:600; font-size:18px;
  color:#fff; line-height:1.2; text-shadow:0 1px 10px rgb(0 0 0 / .45); }
.catmos-i:nth-child(1) .catmos-n{ font-size:24px; }
.catmos-c{ display:inline-flex; align-items:center; gap:7px; margin-top:7px;
  font-family:"JetBrains Mono",monospace; font-size:12.5px; color:#C6EFD8; }
.catmos-c svg{ color:var(--verde-luz); opacity:0; transform:translateX(-5px);
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.catmos-i:hover .catmos-c svg,.catmos-i:focus-visible .catmos-c svg{ opacity:1; transform:none; }

@media (max-width:1080px){
  .catmos{ grid-template-columns:repeat(2,1fr); }
  .catmos-i:nth-child(1){ grid-column:span 2; }
}
@media (max-width:620px){
  .hero-carrusel{ height:clamp(440px,118vw,560px); }
  .hero-c-in{ align-items:flex-end; padding-bottom:58px; }
  .hero-c-panel{ max-width:none; }
  .hero-c-scrim{ background:linear-gradient(0deg, rgb(4 12 8 / .86) 0%, rgb(4 12 8 / .5) 42%, transparent 80%); }
  .hero-ir{ width:44px; height:44px; }
  .hero-ir.prev{ left:10px; } .hero-ir.next{ right:10px; }
  /* En móvil el texto va abajo y las flechas, centradas, tapaban el titular.
     Arriba solo hay foto. */
  .hero-ir{ top:52px; }
  .catmos{ grid-template-columns:1fr; grid-auto-rows:158px; }
  .catmos-i:nth-child(1){ grid-column:auto; }
  /* Sin fotos (las generadas con IA ya no se publican, 25-sep) siete bloques de
     158 px eran 1.200 px de fondo liso en el teléfono: van de dos en dos y más
     bajos. En cuanto haya fotos reales, vuelve la columna de siempre. */
  .catmos:not(:has(.catmos-img)){ grid-template-columns:1fr 1fr; grid-auto-rows:104px; }
  .catmos:not(:has(.catmos-img)) .catmos-i:nth-child(1){ grid-column:span 2; }
  .catmos:not(:has(.catmos-img)) .catmos-n{ font-size:16px; }
  .catmos:not(:has(.catmos-img)) .catmos-i:nth-child(1) .catmos-n{ font-size:20px; }
  .catmos:not(:has(.catmos-img)) .catmos-txt{ padding:14px 14px; }
}

/* prefers-reduced-motion: el autoavance lo apaga premium.js; aquí se corta el
   fundido, el Ken Burns y el zoom del mosaico. El barrido global de estilos.css
   ya mata animation/transition, esto es cinturón y tirantes. */
@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:none!important; }
  .hero-c-img,.catmos-img{ transform:none!important; transition:none!important; }
}