@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('manrope.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('manrope.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('manrope.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('manrope.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('manrope.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Tokens ────────────────────────────────────────────────────────────────
 * --arctic dejó de ser "el blanco del texto" y pasó a ser "la tinta". El
 * nombre se conserva a propósito: lo usan más de doscientas reglas en dos
 * archivos y renombrarlo habría sido un cambio enorme para ganar nada. Lo que
 * importa es que el PAPEL de cada variable no cambió —principal, secundario,
 * terciario, borde fuerte, borde fino— y por eso la hoja siguió funcionando.
 *
 * La tinta no es negro puro sino el azul marino de la marca. Sobre blanco el
 * negro absoluto se lee duro y barato; el marino se lee a laboratorio, que es
 * exactamente lo que pidió Gerson.
 *
 * --pulse-ink es la única variable nueva y existe por una razón concreta: el
 * azul de marca (#52B2FF) da 2.3:1 de contraste sobre blanco, por debajo de
 * cualquier mínimo legible. Sirve de relleno pero NO de color de letra. Así
 * que el azul quedó partido en dos: --pulse para rellenos y acentos,
 * --pulse-ink (#0E63AE, 5.4:1) para todo lo que sea texto azul. Si mañana se
 * agrega un elemento azul, la pregunta a hacerse es "¿esto es letra o es
 * relleno?" y de ahí sale cuál de las dos usar. */
:root{
  --void:#FFFFFF; --navy:#EEF3F9; --navy-2:#F7FAFD;
  --pulse:#52B2FF; --pulse-ink:#0E63AE; --purple:#9B5CF6; --arctic:#0F1A2A;
  --arctic-60:rgba(15,26,42,.66); --arctic-40:rgba(15,26,42,.52);
  --arctic-14:rgba(15,26,42,.15); --arctic-08:rgba(15,26,42,.09);
  --papel:#FFFFFF; --lienzo:#F4F7FB;
  --sombra:0 1px 2px rgba(15,26,42,.045), 0 10px 28px -16px rgba(15,26,42,.20);
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(18px,4vw,56px);
  --alto-top:64px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-top) + 18px) }
/* El lienzo no es blanco puro sino un gris azulado casi imperceptible. Así las
   tarjetas, que sí son blancas, se despegan del fondo sin necesitar bordes
   gruesos ni sombras marcadas. Es el truco de las interfaces clínicas: la
   jerarquía la hace el papel, no el marco. */
body{
  background:var(--lienzo); color:var(--arctic);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* El fondo son dos halos quietos, no las partículas animadas del deck. Allá
   la lámina dura veinte segundos en pantalla; acá la gente se queda leyendo
   fichas diez minutos con el celular en la mano, y veintidós nodos animándose
   sin parar es batería quemada a cambio de nada.
   Sobre claro van casi apagados: en oscuro daban profundidad, pero cualquier
   halo con peso sobre blanco se lee como una mancha de impresión. El tercero,
   el que levantaba el piso, se eliminó: sobre blanco no tiene nada que hacer. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(62% 44% at 14% -8%, rgba(82,178,255,.11), transparent 64%),
    radial-gradient(54% 38% at 92% 2%,  rgba(155,92,246,.06), transparent 66%);
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
input,select,textarea{ font:inherit; color:inherit }
::selection{ background:rgba(82,178,255,.30) }

/* ── El logo sobre papel ───────────────────────────────────────────────────
 * markSVG() vive en el deck y pinta las dos células grandes de la marca en
 * #F5F7FA, que sobre fondo oscuro es el blanco del logo. Sobre blanco, esas
 * dos células desaparecen y queda un aspa de cuatro puntitos azules sin
 * centro: la marca deja de leerse.
 *
 * Se corrige acá y no en el deck a propósito. El SVG del deck sigue siendo el
 * del deck; la tienda lo repinta con CSS, que es lo que un SVG en línea
 * permite hacer sin tocar el original. Así markSVG() sigue sirviendo para los
 * dos temas y no hay que pasarle un parámetro de color a una función que ya
 * usan el deck, las etiquetas, los PDF y la tienda. */
.mark .cell-l,.mark .cell-r{ fill:var(--arctic) }
.mark .sat{ fill:var(--pulse-ink) }
.mark .fiber{ stroke:var(--pulse-ink) }

/* ── Rejilla ─────────────────────────────────────────────────────────────── */
.env{ width:min(1240px, 100%); margin-inline:auto; padding-inline:var(--pad) }
.sec{ padding-block:clamp(56px,8vw,104px) }
.sec-borde{ border-top:1px solid var(--arctic-08) }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1,h2,h3{ font-weight:800; letter-spacing:-.035em; line-height:1.05 }
h1{ font-size:clamp(36px,6.2vw,72px) }
h2{ font-size:clamp(27px,4vw,46px) }
h3{ font-size:19px; letter-spacing:-.02em }
/* Azul de TEXTO, no de relleno: va con --pulse-ink. Vale también para el
   titular gigante de la portada; el tamaño no rescata a un azul que sobre
   blanco arranca en 2.3:1. */
.pulse{ color:var(--pulse-ink) }
.lead{ font-size:clamp(16px,1.6vw,19px); color:var(--arctic-60); max-width:62ch; line-height:1.62 }
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--arctic-40);
}
.eyebrow.p{ color:var(--pulse-ink) }
.mono{ font-family:var(--mono) }

/* Aviso de uso investigativo. Aparece en la ficha, en el carrito y en el pie.
   Se repite a propósito: es la única frase del sitio que no puede quedar
   sujeta a que el visitante haya bajado hasta el final de la página. */
.ruo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--arctic-40); border:1px solid var(--arctic-08); border-radius:8px;
  padding:9px 13px; display:inline-block; line-height:1.5;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:11px; border:1px solid transparent;
  font-weight:700; font-size:14.5px; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s, background .18s, border-color .18s;
}
.btn svg{ flex:none }
/* Sobre fondo oscuro, el azul de marca relleno con letra negra era el
   contraste más fuerte de la pantalla. Sobre blanco pierde fuerza justo donde
   no puede perderla: el botón que cierra la venta. Por eso el relleno se hunde
   dos paradas —mismo azul de marca, más profundo— y la letra pasa a blanco.
   Ahora el botón es lo más oscuro de la página: imposible no verlo.
   Gerson ya había reportado una vez "no vi ni el botón". */
.btn-1{ background:linear-gradient(135deg,#3E9BF0,#0F63AF); color:#FFFFFF;
  box-shadow:0 10px 26px -14px rgba(15,99,175,.75) }
.btn-1:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -16px rgba(15,99,175,.85) }
.btn-2{ border-color:var(--arctic-14); background:var(--papel) }
.btn-2:hover{ border-color:rgba(14,99,174,.40); background:#F1F7FE; transform:translateY(-2px) }
/* Verde WhatsApp de verdad. Acá no aplica la paleta de marca: ese verde es
   señalización, la gente lo reconoce antes de leer el texto del botón. */
.btn-wa{ background:#25D366; color:#04250F }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 15px 34px -14px rgba(37,211,102,.85) }
.btn-full{ width:100% }
/* Antes era opacity:.4. Sobre negro, un verde al 40% seguía leyéndose como un
   botón apagado: se veía el bloque, se entendía que estaba dormido. Sobre
   blanco se disuelve — el fondo queda menta pálido y la letra gris casi
   invisible, y el botón deja de existir. En la página de pedido, con el
   carrito vacío, eso significa que el visitante no ve el único botón que
   importa. Un gris plano se ve deshabilitado Y se ve. */
.btn:disabled{ background:#E3E9F1; color:var(--arctic-40); border-color:transparent;
  cursor:not-allowed; transform:none; box-shadow:none }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--arctic-60); border:1px solid var(--arctic-08); border-radius:999px; padding:7px 14px;
}
.chips{ display:flex; flex-wrap:wrap; gap:9px }

/* ── Encabezado ──────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--arctic-08);
}
.top-in{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); height:var(--alto-top) }
.marca{ display:flex; align-items:center; gap:9px; flex:none }
.marca .mark{ overflow:visible }
.wordmark{ font-weight:800; font-size:21px; letter-spacing:-.045em }
.nav{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); margin-left:auto }
.nav a{ font-size:14.5px; font-weight:600; color:var(--arctic-60); transition:color .16s }
.nav a:hover,.nav a[aria-current]{ color:var(--arctic) }
.top-acc{ display:flex; align-items:center; gap:10px; flex:none }

/* Botón del carrito con su globito de conteo. */
.b-carro{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--arctic-14); border-radius:10px; padding:9px 14px;
  background:var(--papel);
  font-size:14px; font-weight:700; transition:border-color .16s, background .16s;
}
.b-carro:hover{ border-color:rgba(14,99,174,.45); background:#F1F7FE }
.b-carro .n{
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--pulse-ink); color:#FFFFFF; font-family:var(--mono);
  font-size:11px; font-weight:700; display:grid; place-items:center;
}
.b-carro[data-vacio] .n{ display:none }

.b-menu{ display:none; padding:8px; border:1px solid var(--arctic-14); border-radius:10px;
  background:var(--papel) }
@media (max-width:900px){
  .nav{
    position:fixed; inset:var(--alto-top) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:rgba(255,255,255,.98); border-bottom:1px solid var(--arctic-08);
    padding:8px var(--pad) 18px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s, transform .18s;
  }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--arctic-08); font-size:16px }
  .nav.abierto{ opacity:1; transform:none; pointer-events:auto }
  .b-menu{ display:inline-grid; place-items:center; margin-left:auto }
  .top-acc .rotulo{ display:none }
}

/* ── Portada ─────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding-block:clamp(56px,10vw,120px) clamp(40px,6vw,72px) }
.hero .lockup{ display:flex; align-items:center; gap:14px; margin-bottom:26px }
.hero .wordmark{ font-size:clamp(30px,5vw,46px) }
.hero h1{ margin-top:6px }
.hero .lead{ margin-top:24px }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }
.hero .chips{ margin-top:30px }

/* ── Banda de especificaciones ───────────────────────────────────────────── */
.specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--arctic-08); border:1px solid var(--arctic-08); border-radius:16px; overflow:hidden }
.spec{ background:var(--papel); padding:22px 20px }
.spec .k{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--arctic-40) }
.spec .v{ display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; margin-top:9px }
.spec .u{ display:block; font-size:12.5px; color:var(--arctic-40); margin-top:3px }

/* ── Pilares ─────────────────────────────────────────────────────────────── */
.pilares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px }
.pilar{ border:1px solid var(--arctic-08); border-left:2px solid var(--pulse-ink); border-radius:0 14px 14px 0;
  background:var(--papel); box-shadow:var(--sombra); padding:24px 22px }
.pilar .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--pulse-ink) }
.pilar h3{ margin:11px 0 9px }
.pilar p{ color:var(--arctic-60); font-size:14.5px; line-height:1.6 }

/* ── Líneas del portafolio ───────────────────────────────────────────────── */
.lineas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.linea{ position:relative; border:1px solid var(--arctic-08); border-radius:15px; padding:22px 20px 20px;
  background:var(--papel); box-shadow:var(--sombra);
  transition:border-color .2s, transform .2s, box-shadow .2s }
.linea:hover{ border-color:rgba(14,99,174,.34); transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(15,26,42,.05), 0 22px 44px -22px rgba(15,26,42,.30) }
/* El número gigante de la línea es decoración, no información: va detrás del
   título y tiene que insinuarse, no competir. Sobre oscuro eso era el azul al
   22 %; sobre blanco ese mismo valor desaparece del todo, así que sube. */
.linea .n{ font-family:var(--mono); font-size:34px; font-weight:600; color:rgba(82,178,255,.55);
  letter-spacing:-.04em; line-height:1 }
.linea h3{ margin:10px 0 8px; font-size:17.5px }
.linea p{ font-size:13.5px; color:var(--arctic-40) }

/* ── Bloque de regalo ────────────────────────────────────────────────────── */
.regalo{ display:flex; gap:14px; align-items:flex-start; border:1px solid rgba(14,99,174,.20);
  border-radius:14px; padding:18px 20px; background:rgba(82,178,255,.09) }
.regalo .g{ flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--pulse-ink); color:#FFFFFF; border-radius:6px;
  padding:5px 9px; font-weight:700; margin-top:2px }
.regalo b{ display:block; font-size:15px }
.regalo em{ display:block; font-style:normal; font-size:13.5px; color:var(--arctic-60); margin-top:4px }

/* ── Pasos ───────────────────────────────────────────────────────────────── */
.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; counter-reset:p }
.paso{ border:1px solid var(--arctic-08); border-radius:15px; padding:24px 22px;
  background:var(--papel); box-shadow:var(--sombra); counter-increment:p }
.paso::before{ content:counter(p,decimal-leading-zero); font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; color:var(--pulse-ink) }
.paso h3{ margin:12px 0 8px }
.paso p{ font-size:14.5px; color:var(--arctic-60) }

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--arctic-08) }
.faq details{ border-bottom:1px solid var(--arctic-08) }
.faq summary{ display:flex; align-items:center; gap:14px; padding:20px 4px; cursor:pointer;
  font-weight:700; font-size:16.5px; letter-spacing:-.015em; list-style:none }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; margin-left:auto; font-family:var(--mono); font-size:20px;
  color:var(--pulse-ink); transition:transform .2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq .r{ padding:0 4px 22px; color:var(--arctic-60); font-size:15px; max-width:78ch }
.faq .r p + p{ margin-top:10px }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--arctic-08); padding-block:52px 34px; margin-top:40px }
.pie-cols{ display:grid; grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr)); gap:34px }
.pie h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--arctic-40); font-weight:500; margin-bottom:14px }
.pie ul{ list-style:none; display:grid; gap:9px }
.pie li a{ font-size:14.5px; color:var(--arctic-60); transition:color .16s }
.pie li a:hover{ color:var(--pulse-ink) }
.pie-legal{ margin-top:40px; padding-top:22px; border-top:1px solid var(--arctic-08);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  font-size:12.5px; color:var(--arctic-40) }

/* ── Aparición al hacer scroll ───────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(15px); transition:opacity .55s var(--ease), transform .55s var(--ease) }
.rv.on{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ── Aviso de entrada ────────────────────────────────────────────────────── */
/* Se pinta visible en el HTML y se esconde con una clase que un script de dos
   renglones pone en <html> ANTES de que baje la hoja de estilos. Al revés
   —oculto por defecto y mostrado con JS— el visitante que ya lo aceptó ve el
   parpadeo negro del modal en cada página. */
.aviso{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:rgba(244,247,251,.92); backdrop-filter:blur(8px) }
.aviso-ok .aviso{ display:none }
.aviso-caja{ width:min(560px,100%); border:1px solid var(--arctic-14); border-radius:18px;
  padding:clamp(26px,4vw,40px); text-align:center;
  background:var(--papel);
  box-shadow:0 40px 90px -34px rgba(15,26,42,.35) }
.aviso-caja .lockup{ display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:22px }
.aviso-caja h2{ font-size:clamp(22px,3.2vw,30px) }
.aviso-caja p{ color:var(--arctic-60); font-size:14.5px; margin-top:14px; text-align:left }
.aviso-caja .btn{ margin-top:24px }
.aviso-caja .fino{ font-size:12px; color:var(--arctic-40); margin-top:16px; text-align:center }

/* ── Barra de filtros del catálogo ───────────────────────────────────────── */
.filtros{ position:sticky; top:var(--alto-top); z-index:40; padding-block:14px;
  background:rgba(244,247,251,.90); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--arctic-08) }
.filtros-in{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.buscar{ position:relative; flex:1 1 230px; max-width:340px }
/* Sobre oscuro el campo se marcaba ACLARANDO el fondo. Sobre claro hay que
   hacer lo contrario: el campo es blanco puro contra el lienzo gris y lo que
   lo delimita es el borde. */
.buscar input{ width:100%; background:var(--papel); border:1px solid var(--arctic-14);
  border-radius:10px; padding:11px 14px 11px 38px; font-size:14.5px; outline:none;
  transition:border-color .16s }
.buscar input:focus{ border-color:rgba(14,99,174,.55) }
.buscar svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.42 }
.f-lin{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px }
.f-lin::-webkit-scrollbar{ display:none }
.f-lin button{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--arctic-08); border-radius:999px; padding:8px 14px; white-space:nowrap;
  color:var(--arctic-60); transition:all .16s }
.f-lin button:hover{ border-color:var(--arctic-14); color:var(--arctic) }
.f-lin button[aria-pressed="true"]{ background:rgba(82,178,255,.13); border-color:rgba(14,99,174,.42);
  color:var(--pulse-ink) }
.cuenta{ margin-left:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--arctic-40); white-space:nowrap }

/* ── Rejilla de productos ────────────────────────────────────────────────── */
.rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px }
.grupo-t{ display:flex; align-items:baseline; gap:14px; margin:44px 0 18px; flex-wrap:wrap }
.grupo-t:first-child{ margin-top:0 }
.grupo-t h2{ font-size:clamp(21px,2.6vw,28px) }
.grupo-t .c{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--arctic-40) }
.tarj{ position:relative; display:flex; flex-direction:column; border:1px solid var(--arctic-08);
  border-radius:16px; overflow:hidden;
  background:var(--papel); box-shadow:var(--sombra);
  transition:border-color .2s, transform .2s, box-shadow .2s }
.tarj:hover{ border-color:rgba(14,99,174,.34); transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(15,26,42,.05), 0 22px 44px -22px rgba(15,26,42,.30) }
/* El enlace a la ficha lo cubre TODO menos la zona de compra: así la tarjeta
   entera sigue siendo clicable como antes, pero el <select> y el botón quedan
   por encima y no se los traga el enlace. */
.tarj .tapa::after{ content:''; position:absolute; inset:0; z-index:1 }
.tarj:focus-within{ border-color:rgba(82,178,255,.55) }
/* ── Las fotos de vial sobre papel blanco ──────────────────────────────────
 * Las 18 fotos son fotografías rectangulares con su propio fondo gris oscuro
 * quemado en el JPG: NO son recortes con transparencia. Sobre una tarjeta
 * blanca eso deja un rectángulo oscuro al aire.
 *
 * La salida no es pelear con la foto sino aceptarla como lo que es: se le da
 * un tile gris claro detrás, esquinas redondeadas y su propia sombra. Se lee
 * como una fotografía de producto —el patrón de cualquier tienda seria— y no
 * como un error de recorte.
 *
 * La alternativa de verdad es volver a generar las 18 sobre fondo claro con
 * viales/generar-viales.js. Se le propuso a Gerson el 28/08 junto con la
 * muestra; queda pendiente de que él decida, porque cuesta plata de API. */
.tarj-foto{ aspect-ratio:1/.86; display:grid; place-items:center; padding:16px; position:relative;
  background:radial-gradient(58% 58% at 50% 46%, rgba(82,178,255,.10), transparent 72%), #EFF4FA }
.tarj-foto img{ max-height:100%; width:auto; object-fit:contain; border-radius:12px;
  filter:drop-shadow(0 14px 26px rgba(15,26,42,.30)) }
/* PT-141 todavía no tiene foto de vial. En vez de dejar el hueco o repetir la
   foto de otro producto —que sería mentir sobre lo que le llega al cliente—
   va la marca sobre el degradado. Se nota que falta, y eso es lo correcto. */
.tarj-foto .sinfoto{ opacity:.22 }
/* La línea va sobre la foto y no bajo el nombre: libera el renglón que
   necesitaba el beneficio, que es lo que el visitante sí lee. */
.tarj-foto .lin{ position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--arctic-60); background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid var(--arctic-14); border-radius:999px; padding:5px 10px }
.tarj-cuerpo{ padding:15px 17px 17px; display:flex; flex-direction:column; flex:1;
  border-top:1px solid var(--arctic-08) }
.tarj h3{ font-size:19px }
.tarj h3 a{ color:inherit }
.tarj .tec{ margin-top:5px; font-size:12.5px; color:var(--arctic-40); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* Área de investigación. El ícono le da al visitante una lectura de un
   vistazo; el texto la matiza. Va bajo el antetítulo "Se investiga en" que
   pone el ::before, para que el rótulo no se lea como promesa de resultado. */
.tarj .ben{ display:flex; align-items:flex-start; gap:9px; margin-top:13px; padding-top:13px;
  border-top:1px solid var(--arctic-08); color:var(--pulse-ink) }
.tarj .ben svg{ flex:none; margin-top:1px }
.tarj .ben span{ font-size:13px; font-weight:600; line-height:1.4; color:var(--arctic);
  letter-spacing:-.01em }
.tarj .ben span::before{ content:'Se investiga en'; display:block; font-family:var(--mono);
  font-size:8.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--arctic-40); margin-bottom:3px }

.tarj-compra{ position:relative; z-index:2; margin-top:auto; padding-top:14px }
/* OJO: este control NO puede ir en monoespaciada. Iba en var(--mono) a 11.5px y
   el texto más largo del catálogo —"1000 mg · caja ×10 — $ 1.737.000"— pedía
   221 px dentro de una caja que en pantallas de 1600 y 1920 mide 192. Un <select>
   nativo no desborda ni pone puntos suspensivos: RECORTA. Y recorta por la
   derecha, que es justo donde están los ceros. El cliente leía "$ 1.800.00" y
   creía que la caja de diez costaba lo mismo que un vial. Eran 41 opciones en
   22 de las 25 tarjetas, casi todas las de caja.
   Medido con _diag-select.js, que compara canvas.measureText contra el ancho
   útil real. Si algún día se cambia la fuente, el tamaño o el padding de acá,
   hay que volver a correrlo: no es una decisión estética, es de encaje.
   Las <option> ya venían en var(--sans) desde antes (línea de abajo), así que
   esto además deja el control cerrado y la lista desplegada en la misma letra. */
.sel-d{ width:100%; background:var(--papel); color:var(--arctic-60); cursor:pointer;
  border:1px solid var(--arctic-14); border-radius:9px; padding:9px 10px;
  font-family:var(--sans); font-size:12px; letter-spacing:0; outline:none;
  transition:border-color .16s var(--ease) }
.sel-d:hover,.sel-d:focus{ border-color:rgba(14,99,174,.55); color:var(--arctic) }
.sel-d option{ background:var(--papel); color:var(--arctic); font-family:var(--sans) }
.tarj .fila-p{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:11px }
.tarj .precio{ display:block; font-size:20px; font-weight:800; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums }
.tarj .uni{ display:block; margin-top:1px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--arctic-40) }
.tarj .pv.cot .precio{ font-size:15px; color:var(--arctic-60) }
.b-add{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  border-radius:10px; background:linear-gradient(135deg,#3E9BF0,#0F63AF); color:#FFFFFF;
  font-size:13px; font-weight:700;
  letter-spacing:-.01em; transition:background .16s var(--ease), transform .1s }
.b-add:hover{ background:linear-gradient(135deg,#2E8FE8,#0B5599) }
.b-add:active{ transform:scale(.96) }
/* El verde de confirmación era #4ADE80, calibrado para brillar sobre negro.
   Sobre blanco queda fosforescente y le baja el tono clínico a toda la
   página; además con letra oscura encima apenas se lee. */
.b-add.hecho{ background:#12A150 }
.vacio{ text-align:center; padding:70px 0; color:var(--arctic-40) }

/* Etiqueta solo para lector de pantalla. */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ── Carrusel de los más pedidos ─────────────────────────────────────────── */
/* El desplazamiento lo hace el navegador con scroll-snap, no un temporizador
   de JavaScript. Eso da tres cosas gratis: arrastre con el dedo en el celular,
   rueda del mouse en el escritorio y navegación con el teclado. Los botones de
   flecha solo empujan el scroll; si el JS no carga, el carrusel sigue
   funcionando a puro dedo. Y no avanza solo: nada más molesto que una tarjeta
   que se mueve cuando uno está leyéndola. */
.carr-t{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap }
.carr-nav{ display:flex; gap:8px }
.carr-b{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--arctic-14); color:var(--arctic-60);
  transition:all .16s var(--ease) }
.carr-b{ background:var(--papel) }
.carr-b:hover:not(:disabled){ border-color:var(--pulse-ink); color:var(--pulse-ink) }
.carr-b:disabled{ opacity:.28; cursor:default }
.carr{ margin-top:28px }
/* OJO: el scroll-padding va SIEMPRE pegado al padding y con el mismo valor.
   El padding empuja la primera tarjeta hacia adentro para que quede debajo del
   título, pero scroll-snap-align la engancha contra el borde del scrollport, y
   ese borde por defecto no sabe nada del padding: el navegador termina
   desplazando la pista sola hasta dejar la primera tarjeta pegada al borde de
   la ventana, desalineada de todo lo demás. El scroll-padding corre el borde de
   enganche hacia adentro y las dos medidas vuelven a coincidir. Si algún día se
   cambia una, hay que cambiar la otra. */
.carr-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(252px,272px);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px var(--pad) 18px; scroll-padding-inline:var(--pad);
  scrollbar-width:none; outline:none }
.carr-pista::-webkit-scrollbar{ display:none }
.carr-pista:focus-visible{ box-shadow:inset 0 0 0 2px rgba(82,178,255,.5); border-radius:16px }
.carr-pista > .tarj{ scroll-snap-align:start }
/* En pantallas anchas el carrusel arranca alineado con el resto del contenido
   en vez de pegado al borde de la ventana.
   Va con 100% y NO con 100vw: 100vw incluye el ancho de la barra de scroll y el
   contenedor centrado de al lado no, así que con vw la primera tarjeta quedaba
   ~8 px corrida a la derecha del título —poco, pero se nota—. La pista es hija
   de un bloque que ya mide el ancho real disponible, así que 100% da la cuenta
   exacta en cualquier equipo, con barra o sin ella. */
@media (min-width:1240px){
  .carr-pista{ padding-inline:max(var(--pad), calc((100% - 1240px)/2 + var(--pad)));
    scroll-padding-inline:max(var(--pad), calc((100% - 1240px)/2 + var(--pad))) }
}

/* ── Calculadora en la portada ───────────────────────────────────────────── */
.calc-portada{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,54px); align-items:center }
@media (max-width:900px){ .calc-portada{ grid-template-columns:1fr } }

/* ── Ficha de producto ───────────────────────────────────────────────────── */
.miga{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--arctic-40); padding-top:26px; display:flex; gap:9px; flex-wrap:wrap }
.miga a:hover{ color:var(--pulse-ink) }
.ficha{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px); padding-top:26px; align-items:start }
@media (max-width:940px){ .ficha{ grid-template-columns:1fr } }
.ficha-foto{ position:sticky; top:calc(var(--alto-top) + 22px); border:1px solid var(--arctic-08);
  border-radius:18px; aspect-ratio:1/1.05; display:grid; place-items:center; padding:26px;
  box-shadow:var(--sombra);
  background:radial-gradient(56% 56% at 50% 44%, rgba(82,178,255,.12), transparent 72%), #EFF4FA }
.ficha-foto img{ max-height:100%; width:auto; border-radius:12px;
  filter:drop-shadow(0 16px 30px rgba(15,26,42,.32)) }
@media (max-width:940px){ .ficha-foto{ position:static; aspect-ratio:1/.8 } }
.ficha h1{ font-size:clamp(32px,4.6vw,52px); margin-top:10px }
.ficha .tec{ font-family:var(--mono); font-size:13px; color:var(--pulse-ink); margin-top:12px;
  letter-spacing:.01em; line-height:1.5 }
.ficha .desc{ color:var(--arctic-60); font-size:15.5px; line-height:1.65; margin-top:20px }
/* Mismo rótulo de área de investigación de la tarjeta, en versión ficha. */
.ben-ficha{ display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  border:1px solid rgba(14,99,174,.30); background:rgba(82,178,255,.10);
  border-radius:999px; padding:8px 15px 8px 13px; color:var(--pulse-ink) }
.ben-ficha span{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--arctic) }

/* ── Certificado de análisis ───────────────────────────────────────────────
   El botón NO es .btn-2 (borde gris sobre fondo blanco). Gerson ya reportó
   una vez "no vi ni el botón": en esta ficha compite con la caja de compra,
   que es azul, grande y con precio adentro, así que un botón discreto
   simplemente no existe. Va con fondo azul claro, borde azul y el ícono de
   PDF, que es la señal de "esto abre un documento".
   Tampoco es azul relleno: eso lo pondría al nivel de "Agregar al carrito" y
   la acción que da la venta tiene que seguir siendo la más fuerte de la
   página. Segundo lugar claro, no tercero invisible.
   Cada botón lleva DOS renglones —dosis arriba, pureza y número de reporte
   abajo— porque el dato verificable es justamente lo que convierte el botón
   en respaldo y no en adorno. */
.coa{ border:1px solid rgba(14,99,174,.22); border-radius:14px; padding:18px 18px 16px;
  background:linear-gradient(150deg,#F1F7FE,var(--papel)); display:grid; gap:10px }
.coa-t{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pulse-ink) }
.btn-coa{ justify-content:flex-start; gap:11px; width:100%; text-align:left;
  border-color:rgba(14,99,174,.38); background:rgba(82,178,255,.11); color:var(--arctic);
  padding:11px 14px; height:auto }
.btn-coa:hover{ background:rgba(82,178,255,.19); border-color:rgba(14,99,174,.60);
  transform:translateY(-2px) }
.btn-coa svg{ color:var(--pulse-ink) }
.btn-coa span{ display:grid; gap:2px; min-width:0 }
.btn-coa b{ font-size:14px; font-weight:700; letter-spacing:-.01em }
.btn-coa em{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  color:var(--arctic-40); white-space:normal }
/* Las presentaciones que NO tienen certificado. Va en el mismo bloque a
   propósito: si estuviera en otro lado se leería como letra menuda escondida. */
.coa-falta{ font-size:12.5px; line-height:1.5; color:var(--arctic-60);
  border-left:2px solid rgba(14,99,174,.30); padding-left:11px }
.coa-nota{ font-size:11.5px; line-height:1.55; color:var(--arctic-40) }

.estudia{ margin-top:26px; border:1px solid var(--arctic-08); border-radius:14px; padding:20px 22px;
  background:linear-gradient(150deg,#F2F7FD,var(--papel)) }
.estudia-t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--arctic-40) }
.estudia ul{ list-style:none; margin-top:13px; display:grid; gap:9px }
.estudia li{ position:relative; padding-left:19px; font-size:14.5px; color:var(--arctic-60) }
.estudia li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px;
  border-radius:50%; background:var(--pulse-ink) }

/* ── Caja de compra de la ficha ──────────────────────────────────────────── */
/* Una decisión a la vez y un solo botón. La versión anterior mostraba las
   cuatro combinaciones al tiempo, todas del mismo tamaño, y el "Agregar" era un
   enlace de texto: la acción que cierra la venta era lo menos visible de la
   página. Acá el botón es sólido, ancho y lleva el precio adentro. */
.compra{ margin-top:28px; border:1px solid var(--arctic-14); border-radius:18px; padding:22px;
  background:var(--papel); box-shadow:var(--sombra) }
.compra-paso{ margin-bottom:18px }
.compra-lab{ display:flex; align-items:center; gap:9px; margin-bottom:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--arctic-60) }
.compra-lab .np{ display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:var(--arctic-14); color:var(--arctic); font-size:10.5px; letter-spacing:0 }

/* Presentación: botones a la vista, no lista desplegable. Con dos o tres
   opciones, abrir un menú para comparar precios es un clic de más. */
.pres-chips{ display:flex; flex-wrap:wrap; gap:8px }
.pres-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  border:1.5px solid var(--arctic-14); border-radius:11px; padding:9px 15px; background:transparent;
  transition:all .15s var(--ease) }
.pres-chip b{ font-size:15.5px; letter-spacing:-.02em; color:var(--arctic) }
.pres-chip em{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; font-style:normal;
  color:var(--arctic-40) }
.pres-chip:hover{ border-color:var(--arctic-40) }
.pres-chip.on{ border-color:var(--pulse-ink); background:rgba(82,178,255,.10) }
.pres-chip.on b{ color:var(--pulse-ink) }

/* Cantidad: casillas de radio de verdad. El punto marcado no deja duda de qué
   se está por agregar, que era el reclamo principal del diseño anterior. */
.op-lista{ display:flex; flex-direction:column; gap:9px }
.op-r{ display:flex; align-items:center; gap:13px; cursor:pointer;
  border:1.5px solid var(--arctic-14); border-radius:13px; padding:14px 16px;
  transition:all .15s var(--ease) }
.op-r:hover{ border-color:var(--arctic-40); background:rgba(82,178,255,.04) }
.op-r.on{ border-color:var(--pulse-ink); background:rgba(82,178,255,.08) }
.op-r input{ position:absolute; opacity:0; pointer-events:none }
.op-r-marca{ flex:none; width:19px; height:19px; border-radius:50%;
  border:2px solid var(--arctic-40); transition:all .15s var(--ease) }
.op-r.on .op-r-marca{ border-color:var(--pulse-ink); box-shadow:inset 0 0 0 4px var(--pulse-ink) }
.op-r input:focus-visible + .op-r-marca{ outline:2px solid var(--pulse-ink); outline-offset:3px }
.op-r-txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.op-r-txt b{ font-size:15px; letter-spacing:-.015em }
.op-r-txt em{ font-size:12.5px; font-style:normal; color:var(--arctic-40) }
.op-r-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; font-weight:700;
  color:#FFFFFF; background:#12A150; border-radius:5px; padding:3px 6px }
.op-r-p{ margin-left:auto; font-size:18px; font-weight:800; letter-spacing:-.035em; white-space:nowrap }
.op-r-p.cot{ font-size:14px; font-weight:600; color:var(--arctic-60) }

/* El botón. Relleno, ancho completo y con el precio adentro para que no haya
   que mirar a otro lado para saber qué se está agregando. */
.btn-comprar{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:56px; margin-top:4px; padding:16px 22px; border-radius:13px;
  background:linear-gradient(135deg,#3E9BF0,#0F63AF); color:#FFFFFF;
  font-size:16px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 8px 22px -8px rgba(15,99,175,.45); transition:all .16s var(--ease) }
.btn-comprar:hover{ background:linear-gradient(135deg,#2E8FE8,#0B5599); transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(15,99,175,.55) }
.btn-comprar:active{ transform:translateY(0) }
.btn-comprar b{ font-weight:800 }
.btn-comprar b:empty{ display:none }
/* El rótulo nunca se parte a la mitad. Sin esto, apenas se estrecha la columna
   queda "Agregar al / pedido" en dos renglones con el precio al lado, centrado
   contra el hueco: se lee como dos cosas distintas y no como un botón. */
.btn-comprar [data-btn-txt]{ white-space:nowrap }
/* Confirmación sin sacar al visitante de la página: el botón se pone verde dos
   segundos. Abrir el cajón del carrito en cada clic interrumpe a quien está
   armando un pedido de ocho referencias. */
.btn-comprar.hecho{ background:#12A150; box-shadow:0 8px 22px -8px rgba(18,161,80,.45) }
.compra-pie{ margin-top:13px; font-size:12px; line-height:1.5; color:var(--arctic-40); text-align:center }

@media (max-width:520px){
  .compra{ padding:18px 15px }
  .op-r{ flex-wrap:wrap; gap:10px }
  .op-r-p{ font-size:17px }
}
/* Teléfono angosto (320 px y parecidos): el precio sale del botón, no el icono
   ni el rótulo. En ese ancho no caben los tres, y de los tres el precio es el
   único que ya está dicho: la opción marcada lo muestra en grande dos
   centímetros más arriba. El carrito y las dos palabras son los que hacen que
   el botón se reconozca como botón, y eso era justo lo que faltaba. */
@media (max-width:360px){
  .btn-comprar{ padding:16px 14px }
  .btn-comprar b{ display:none }
}

/* ── Cajón del carrito ───────────────────────────────────────────────────── */
.velo{ position:fixed; inset:0; z-index:90; background:rgba(15,26,42,.40); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .22s }
.velo.on{ opacity:1; pointer-events:auto }
.carro{ position:fixed; top:0; right:0; bottom:0; z-index:100; width:min(420px,100%);
  display:flex; flex-direction:column; border-left:1px solid var(--arctic-14);
  background:var(--papel); box-shadow:-30px 0 60px -30px rgba(15,26,42,.45);
  transform:translateX(102%); transition:transform .28s var(--ease) }
.carro.on{ transform:none }
.carro-h{ display:flex; align-items:center; gap:12px; padding:20px 22px;
  border-bottom:1px solid var(--arctic-08); flex:none }
.carro-h h2{ font-size:19px }
.carro-h .x{ margin-left:auto; padding:7px; border-radius:9px; border:1px solid var(--arctic-08) }
.carro-h .x:hover{ border-color:rgba(82,178,255,.45) }
.carro-lista{ flex:1; overflow-y:auto; padding:14px 22px }
.it{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:15px 0;
  border-bottom:1px solid var(--arctic-08) }
.it b{ font-size:15px; letter-spacing:-.015em }
.it .m{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--arctic-40); margin-top:3px }
.it .pr{ font-size:15px; font-weight:700; text-align:right; white-space:nowrap }
.it .pr.cot{ font-size:12.5px; font-weight:600; color:var(--arctic-40) }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--arctic-08); border-radius:9px;
  overflow:hidden; margin-top:9px }
.qty button{ width:30px; height:29px; display:grid; place-items:center; font-size:16px;
  color:var(--arctic-60); transition:background .14s }
.qty button:hover{ background:rgba(82,178,255,.14); color:var(--pulse-ink) }
.qty span{ min-width:30px; text-align:center; font-family:var(--mono); font-size:13px }
.it .quitar{ align-self:end; justify-self:end; font-size:12px; color:var(--arctic-40);
  text-decoration:underline; text-underline-offset:3px }
.it .quitar:hover{ color:#D92D20 }
.carro-pie{ flex:none; padding:18px 22px 22px; border-top:1px solid var(--arctic-08);
  background:#F7FAFD }
.total{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px }
.total .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--arctic-40) }
.total .v{ font-size:25px; font-weight:800; letter-spacing:-.035em }
.nota-cot{ font-size:12.5px; color:var(--pulse-ink); margin-bottom:12px }
.carro-pie .fino{ font-size:11.5px; color:var(--arctic-40); margin-top:11px; line-height:1.5 }
.carro-vacio{ text-align:center; padding:56px 20px; color:var(--arctic-40) }
.carro-vacio p{ margin:14px 0 20px; font-size:14.5px }

/* ── Página de pedido ────────────────────────────────────────────────────── */
.pedido{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(22px,3.5vw,44px); align-items:start; padding-top:30px }
@media (max-width:900px){ .pedido{ grid-template-columns:1fr } }
.campo{ margin-bottom:15px }
.campo label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--arctic-40); margin-bottom:7px }
.campo label .req{ color:var(--pulse-ink) }
.campo input,.campo select,.campo textarea{ width:100%; background:var(--papel);
  border:1px solid var(--arctic-14); border-radius:10px; padding:12px 14px; font-size:15px;
  outline:none; transition:border-color .16s }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:rgba(14,99,174,.55) }
.campo select option{ background:var(--papel); color:var(--arctic) }
.campo textarea{ resize:vertical; min-height:88px }
.campo .ayuda{ font-size:12px; color:var(--arctic-40); margin-top:6px }
.campo.malo input,.campo.malo select{ border-color:#D92D20 }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:15px }
@media (max-width:520px){ .dos{ grid-template-columns:1fr } }
.resumen{ position:sticky; top:calc(var(--alto-top) + 22px); border:1px solid var(--arctic-08);
  border-radius:16px; padding:22px; background:var(--papel); box-shadow:var(--sombra) }
@media (max-width:900px){ .resumen{ position:static } }
.resumen h2{ font-size:19px; margin-bottom:6px }
.resumen .it{ grid-template-columns:1fr auto }
.resumen .qty{ display:none }
.resumen .quitar{ display:none }

/* ── Páginas de texto ────────────────────────────────────────────────────── */
.texto{ max-width:74ch; padding-top:34px }
.texto h1{ font-size:clamp(30px,4.4vw,48px) }
.texto h2{ font-size:22px; margin:38px 0 12px; letter-spacing:-.025em }
.texto h3{ font-size:16.5px; margin:24px 0 8px }
.texto p,.texto li{ color:var(--arctic-60); font-size:15px; line-height:1.7 }
.texto p{ margin-bottom:12px }
.texto ul{ margin:0 0 14px 20px; display:grid; gap:7px }
.texto strong{ color:var(--arctic); font-weight:700 }
.texto .fecha{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--arctic-40); margin-top:14px }
.texto .caja{ border:1px solid rgba(14,99,174,.22); background:rgba(82,178,255,.09);
  border-radius:13px; padding:18px 20px; margin:22px 0 }
.texto .caja p:last-child{ margin-bottom:0 }

/* ═══ Calculadora de reconstitución ═══ */
.calc{ border:1px solid var(--arctic-08); border-radius:18px; overflow:hidden;
  background:var(--papel); box-shadow:var(--sombra) }
.calc-campos{ padding:26px 26px 6px }
.calc-g{ margin-bottom:22px }
.calc-lab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:11px }
.calc-lab span{ font-size:14px; font-weight:700; letter-spacing:-.01em }
.calc-lab em{ font-style:normal; font-size:12.5px; color:var(--arctic-40) }
.chips-c{ display:flex; flex-wrap:wrap; gap:7px }
.chip-c{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--arctic-60);
  background:transparent; border:1px solid var(--arctic-14); border-radius:999px;
  padding:8px 13px; cursor:pointer; transition:all .16s var(--ease); white-space:nowrap }
.chip-c:hover{ border-color:var(--arctic-40); color:var(--arctic) }
.chip-c.on{ background:var(--pulse-ink); border-color:var(--pulse-ink); color:#FFFFFF; font-weight:700 }
.calc-libre{ display:flex; align-items:center; margin-top:9px; max-width:210px;
  border:1px solid var(--arctic-08); border-radius:10px; overflow:hidden;
  background:var(--papel); transition:border-color .16s var(--ease) }
.calc-libre:focus-within{ border-color:var(--pulse-ink) }
.calc-libre input{ flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--arctic); font-family:var(--mono); font-size:13px; padding:9px 11px }
.calc-libre input::-webkit-outer-spin-button,
.calc-libre input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.calc-libre input[type=number]{ -moz-appearance:textfield }
.calc-libre .u,.calc-libre select{ font-family:var(--mono); font-size:12px; color:var(--arctic-40);
  padding:9px 11px; background:var(--lienzo); border:0;
  border-left:1px solid var(--arctic-08) }
.calc-libre select{ color:var(--arctic-60); cursor:pointer; outline:0 }
.calc-libre select option{ background:var(--papel); color:var(--arctic) }

.calc-out{ border-top:1px solid var(--arctic-08); background:#F7FAFD; padding:24px 26px }
.calc-jer{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.jer{ flex:1; min-width:220px; max-width:360px; height:auto; color:var(--arctic-60) }
.jer-fill{ transition:width .28s var(--ease) }
.calc-uds b{ display:block; font-size:40px; font-weight:800; letter-spacing:-.045em; line-height:1;
  color:var(--pulse-ink); font-variant-numeric:tabular-nums }
.calc-uds span{ display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--arctic-40); max-width:16ch }
.calc.tope .calc-uds b{ color:#B45309 }

.calc-aviso{ margin-top:16px; padding:12px 15px; border-radius:10px;
  border:1px solid rgba(180,83,9,.30); background:rgba(242,163,60,.14);
  font-size:13.5px; line-height:1.5; color:#B45309 }

.calc-res{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:20px;
  background:var(--arctic-08); border:1px solid var(--arctic-08); border-radius:12px; overflow:hidden }
.calc-res .r{ background:var(--lienzo); padding:14px 15px }
.calc-res .k{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--arctic-40) }
.calc-res .v{ display:block; margin-top:7px; font-size:17px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums }
.calc-pie{ padding:16px 26px 22px; font-size:12.5px; line-height:1.6; color:var(--arctic-40);
  border-top:1px solid var(--arctic-08) }
.calc-pie strong{ color:var(--arctic-60) }

/* Pasos de reconstitución, numerados */
.paso-r{ display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--arctic-08) }
.paso-r:first-child{ border-top:0 }
.paso-r .n{ font-family:var(--mono); font-size:20px; font-weight:700; color:var(--pulse-ink);
  line-height:1.1; flex-shrink:0; width:32px }
.paso-r h3{ font-size:16px; font-weight:700; letter-spacing:-.02em }
.paso-r p{ margin-top:6px; font-size:14.5px; line-height:1.62; color:var(--arctic-60) }

/* Versión embebida en la ficha de producto: la columna es más angosta que la
   página propia, así que se aprieta el aire y los cuatro resultados pasan a
   dos por renglón. */
.calc-min .calc-campos{padding:20px 20px 4px}
.calc-min .calc-out{padding:20px}
.calc-min .calc-pie{padding:14px 20px 18px}
.calc-min .calc-res{grid-template-columns:1fr 1fr}
.calc-min .calc-uds b{font-size:32px}
.calc-min .jer{min-width:180px}

@media (max-width:760px){
  .calc-res{grid-template-columns:1fr 1fr}
  .calc-campos,.calc-out,.calc-pie{padding-left:18px;padding-right:18px}
  .calc-uds b{font-size:34px}
}