/* ============================================================================
   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.svg        1000 × 232.37  → 4.3034 : 1
     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).
   ============================================================================ */
.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.svg); mask-image:url(../img/logo-denkor.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 → 267px de ancho. Antes medía ~100px de ancho y no se leía
   "BOTICA DENTAL", que es justamente lo que dice a qué se dedica Denkor. */
.marca-nav{ height:62px; width:267px; 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:275px; 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); } }
.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;
}
.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 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;
}
.slide-ir:hover{ background:rgb(12 214 93 / .5); border-color:var(--verde); transform:translateY(-50%) 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: a 46px de alto el
     "BOTICA DENTAL" todavía se lee, que era el reclamo. */
  .marca-nav{ height:46px; width:198px; }
  .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 → 172px de ancho. Sigue siendo casi el doble de lo que medía
     antes en móvil y entra sin empujar al carrito ni a la hamburguesa. */
  .marca-nav{ height:40px; width:172px; }
  .marca-pie{ height:52px; width:224px; }
  .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 (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; }
}