/* LIMITLESS · sistema web (tokens, base y componentes compartidos).
   Fuente de verdad del sistema: diseno/DISENO.md (§ Sitio web). Monocromo crema y negro,
   Archivo variable como única familia, sin sombras difusas, sin degradados, sin otros colores.
   Lo usan todas las páginas; cada plantilla suma su hoja propia (cotizador.css, ll-hub.css). */

@font-face{font-family:"Archivo";src:url("/assets/fonts/limitless-font-archivo-latin-2.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --crema:#F0EBE5; --crema-foto:#F2EDE6; --negro:#111214; --grafito:#3A3A3C; --gris:#6B6B6D; --blanco:#FFFFFF;
  /* Filetes: negro con opacidad, no un color nuevo. */
  --linea:rgb(17 18 20 / .14); --linea-2:rgb(17 18 20 / .28);
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --t-heroe:clamp(200px,44vw,620px);
  --t-h1:clamp(40px,6.6vw,96px);
  --t-h2:clamp(28px,4.6vw,64px);
  /* Páginas de documento (portada-cotizador, catálogo, fichas, legales, 404): un mismo H1 y H2, más contenidos. */
  --t-h1-doc:clamp(36px,5.6vw,72px);
  --t-h2-doc:clamp(26px,3.2vw,40px);
  --t-mega:clamp(76px,13.2vw,208px);
  --t-h3:clamp(20px,1.8vw,24px);
  --t-entrada:clamp(18px,1.55vw,22px);
  --t-texto:17px; --t-nota:14px;

  /* Margen lateral: nunca menor que la zona segura (viewport-fit=cover; muesca en apaisado). */
  --gutter:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --ancho:1200px; --lectura:62ch; --header-h:60px;
  /* Ritmo: entre dos secciones seguidas el hueco es sec-y + ¾ sec-y (≈ 100 px en móvil, 160–180 en escritorio). */
  --sec-y:clamp(56px,7vw,104px);
  --radio:16px; --radio-doc:6px;
  --d-1:150ms; --d-2:250ms; --d-3:400ms;
  --sale:cubic-bezier(.215,.61,.355,1); /* cúbica de salida */
}
@media (min-width:600px){ :root{ --gutter:max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) } }
@media (min-width:1024px){ :root{ --gutter:max(48px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) } }

*,*::before,*::after{box-sizing:border-box}
/* Solo claro por decisión (DISENO §11): «only light» saca al sitio del oscurecido automático de Chrome/Samsung/Opera. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:only light;background:var(--crema);scroll-padding-top:calc(var(--header-h) + 16px)}
/* Controles nativos en la paleta: sin el destello de color al tocar (la respuesta es :active), barra de scroll,
   casillas y cursor de texto en negro sobre crema. */
html{-webkit-tap-highlight-color:transparent;scrollbar-color:var(--gris) var(--crema);accent-color:var(--negro);caret-color:var(--negro)}
/* El foco nunca queda tapado por barras fijas (WCAG 2.4.11): la barra de búsqueda del cotizador arriba y la de pedido abajo. */
html:has(.tools){scroll-padding-top:calc(var(--header-h) + 150px)}
@media (max-width:900px){ html:has(.mbar){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))} }
body{margin:0;background:var(--crema);color:var(--negro);font:500 var(--t-texto)/1.55 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:800}
em,i{font-style:normal}
[hidden]{display:none!important}
::selection{background:var(--negro);color:var(--crema)}
/* Sobre negro (barra RUO, pie) la selección se invierte. */
.ll-ruo::selection,.ll-pie ::selection{background:var(--crema);color:var(--negro)}
:focus-visible{outline:2px solid var(--negro);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;scroll-behavior:auto!important} }

.ll-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* «Saltar al contenido»: baja sobre el header crema (debajo de la barra RUO negra) para que el anillo negro se vea. */
.ll-saltar{position:absolute;left:var(--gutter);top:40px;z-index:300;background:var(--negro);color:var(--blanco);font-weight:800;padding:12px 18px;border-radius:999px;transform:translateY(-200%);opacity:0;transition:transform var(--d-2) var(--sale),opacity var(--d-1) var(--sale)}
.ll-saltar:focus{transform:none;opacity:1}
.ll-saltar:focus-visible{outline:2px solid var(--negro);outline-offset:3px;box-shadow:0 0 0 3px var(--crema)}
.ll-tnum{font-variant-numeric:tabular-nums}

/* ── Tipografía ───────────────────────────────── */
.ll-h1{font-weight:800;font-size:var(--t-h1);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.ll-h2{font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.ll-h1--doc{font-size:var(--t-h1-doc);line-height:1.02}
.ll-h2--doc{font-size:var(--t-h2-doc);line-height:1.08;letter-spacing:-.025em}
/* Migas de pan (fichas, familias y guías): Inicio / sección / página. Viven aquí porque las guías no cargan ll-hub.css. */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;font-size:14px;line-height:1.3;color:var(--grafito)}
.migas li{display:flex;align-items:center;min-height:44px}
.migas li+li::before{content:"/";margin-right:8px;color:var(--gris)}
/* Objetivo de 44 × 44 sin separar el texto de su «/»: el relleno lateral se compensa con margen negativo. */
.migas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;margin:0 -4px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ll-hero .migas{margin:-12px 0 -8px}
.ll-h3{font-weight:800;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em}
.ll-entrada{font-size:var(--t-entrada);line-height:1.45;color:var(--grafito);max-width:40ch;text-wrap:pretty}
.ll-antetitulo{font-weight:800;font-size:15px;line-height:1.3;color:var(--grafito)}
.ll-nota{font-size:var(--t-nota);line-height:1.5;color:var(--grafito)}
.ll-texto{max-width:var(--lectura);text-wrap:pretty}
.ll-texto p+p{margin-top:1em}
/* Enlaces dentro de un párrafo: subrayados (en monocromo el color no los distingue; WCAG 1.4.1). */
.ll-texto a,.ll-nota a,.ll-pie a,.ll-enlace{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){ .ll-texto a:hover,.ll-nota a:hover,.ll-enlace:hover{text-decoration-thickness:2px} }
.ll-filete{display:block;width:120px;height:3px;background:var(--negro);border:0;margin:0}

/* ── Barra RUO ────────────────────────────────── */
.ll-ruo{background:var(--negro);color:var(--blanco);font:800 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:10px var(--gutter)}

/* ── Wordmark oficial (SVG en línea; toma currentColor) ── */
.ll-wordmark{display:block;height:1em;width:auto;fill:currentColor}

/* ── Header ───────────────────────────────────── */
.ll-header{position:sticky;top:0;z-index:100;background:var(--crema);border-bottom:1px solid var(--linea)}
.ll-header__in{max-width:calc(var(--ancho) + 2*var(--gutter));margin:0 auto;min-height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;gap:24px}
.ll-marca{display:inline-flex;flex:none;align-items:center;min-height:44px;font-size:13px;color:var(--negro)}
@media (max-width:419px){ .ll-header__in{gap:12px} }
@media (max-width:379px){ .ll-header__in{gap:8px} .ll-marca{font-size:11px} a.ll-header__accion{display:none} }
.ll-nav{display:none;gap:4px;margin-left:auto}
.ll-nav a,.ll-menu nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;color:var(--grafito);border-radius:999px;transition:color var(--d-1) var(--sale)}
.ll-nav a:hover{color:var(--negro)}
.ll-nav a[aria-current="page"]{color:var(--negro);font-weight:800}
/* COAs con su conteo: la prueba se ve desde el menú. */
.ll-nav__n{display:inline-grid;place-items:center;min-width:24px;height:20px;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--negro);color:var(--blanco);font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ll-header__accion{margin-left:auto}
.ll-menu{position:static}
.ll-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 0 0 8px;font-weight:800;font-size:15px}
.ll-menu>summary::-webkit-details-marker{display:none}
.ll-menu .ll-menu__cerrar,.ll-menu[open] .ll-menu__abrir{display:none}
.ll-menu[open] .ll-menu__cerrar{display:inline}
.ll-menu nav{position:absolute;left:0;right:0;top:100%;background:var(--crema);border-bottom:1px solid var(--linea);padding:4px var(--gutter) 16px;display:grid}
.ll-menu nav a{font-size:20px;font-weight:800;color:var(--negro);min-height:52px;padding:0;border-radius:0;border-top:1px solid var(--linea)}
.ll-menu nav a:first-child{border-top:0}
.ll-menu nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media (min-width:900px){
  .ll-nav{display:flex}
  .ll-menu{display:none}
  .ll-header__accion{margin-left:0}
}

/* ── Botones ──────────────────────────────────── */
.ll-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:8px 26px;border-radius:999px;background:var(--negro);color:var(--blanco);font:800 16px/1.15 var(--f);text-align:center;border:1.5px solid var(--negro);cursor:pointer;transition:background-color var(--d-1) var(--sale),color var(--d-1) var(--sale),transform var(--d-1) var(--sale)}
@media (hover:hover){ .ll-btn:hover{background:var(--grafito);border-color:var(--grafito)} }
.ll-btn:active{transform:scale(.98)}
.ll-btn--linea{background:transparent;color:var(--negro)}
@media (hover:hover){ .ll-btn--linea:hover{background:var(--negro);border-color:var(--negro);color:var(--blanco)} }
/* Apagado: sin respuesta al toque y con el cursor que lo dice. */
.ll-btn:disabled,.ll-btn[aria-disabled="true"]{cursor:not-allowed}
.ll-btn:disabled:active,.ll-btn[aria-disabled="true"]:active{transform:none}
.ll-btn--sm{min-height:44px;padding:6px 18px;font-size:15px}
.ll-acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ── Estructura ───────────────────────────────── */
.ll-seccion{padding:var(--sec-y) var(--gutter)}
/* Dos secciones seguidas no suman dos sec-y completos; una pregunta y su respuesta van más juntas (--previa). */
.ll-seccion+.ll-seccion{padding-top:calc(var(--sec-y) * .75)}
.ll-seccion--previa{padding-bottom:calc(var(--sec-y) * .35)}
/* El canal va pegado al cierre: es la salida suave del mismo llamado. */
.ll-seccion--cierre+.ll-seccion:has(.ll-canal){padding-top:0}
.ll-seccion--foto{background:var(--crema-foto)}
.ll-contenedor{max-width:var(--ancho);margin:0 auto}
.ll-cabeza{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,72px)}
.ll-cabeza .ll-entrada{max-width:46ch}

/* ── Hero ─────────────────────────────────────── */
.ll-hero{padding:clamp(56px,10vw,136px) var(--gutter) clamp(40px,6vw,88px)}
.ll-hero__in{max-width:var(--ancho);margin:0 auto;display:grid;gap:28px}
.ll-hero .ll-entrada{max-width:44ch}
.ll-hero .ll-acciones{margin-top:8px}
.ll-hero .ll-cadena{margin-top:clamp(24px,4vw,40px);width:clamp(168px,18vw,232px)}
.ll-lineas>span{display:block}

/* Entrada por líneas y cadena: solo CSS, para no depender del JS ni retrasar el LCP. */
@media (prefers-reduced-motion:no-preference){
  .ll-lineas>span{overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
  .ll-lineas>span>span{display:block;animation:ll-sube var(--d-3) var(--sale) both}
  .ll-lineas>span:nth-child(2)>span{animation-delay:90ms}
  .ll-lineas>span:nth-child(3)>span{animation-delay:180ms}
  .ll-lineas>span:nth-child(4)>span{animation-delay:270ms}
  .ll-cadena--dibuja .ll-cadena__e{animation:ll-esfera var(--d-2) var(--sale) both}
  .ll-cadena--dibuja .ll-cadena__b{animation:ll-barra var(--d-2) var(--sale) both}
}
@keyframes ll-sube{from{transform:translateY(105%)}to{transform:none}}
@keyframes ll-esfera{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ll-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Cadena de aminoácidos (motivo de marca) ─────
   Esferas r=24 cada 90 unidades, unidas por barras de 10. Se dibuja esfera por esfera. */
.ll-cadena{width:min(100%,420px);height:auto;color:var(--negro);overflow:visible}
.ll-cadena__e,.ll-cadena__b{fill:currentColor;transform-box:fill-box}
.ll-cadena__e{transform-origin:center}
.ll-cadena__b{transform-origin:left center}
.ll-cadena--dibuja .ll-cadena__e:nth-of-type(1){animation-delay:520ms}
.ll-cadena--dibuja .ll-cadena__b:nth-of-type(1){animation-delay:600ms}
.ll-cadena--dibuja .ll-cadena__e:nth-of-type(2){animation-delay:680ms}
.ll-cadena--dibuja .ll-cadena__b:nth-of-type(2){animation-delay:760ms}
.ll-cadena--dibuja .ll-cadena__e:nth-of-type(3){animation-delay:840ms}
.ll-cadena--dibuja .ll-cadena__b:nth-of-type(3){animation-delay:920ms}
.ll-cadena--dibuja .ll-cadena__e:nth-of-type(4){animation-delay:1000ms}
.ll-cadena--dibuja .ll-cadena__b:nth-of-type(4){animation-delay:1080ms}
.ll-cadena--dibuja .ll-cadena__e:nth-of-type(5){animation-delay:1160ms}
/* Cadena que se traza (hero de /proveedor y de la guía): primero el contorno, aro por aro y barra por barra de
   izquierda a derecha; después las esferas se llenan en orden, como pasos que se cumplen. Solo CSS, fuera del LCP.
   Quieta (movimiento reducido), el aro y su relleno forman la misma esfera de siempre. */
.ll-cadena__aro{fill:none;stroke:currentColor;stroke-width:10;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .ll-cadena--traza .ll-cadena__aro{animation:ll-aro var(--d-2) var(--sale) both}
  .ll-cadena--traza .ll-cadena__b{animation:ll-barra var(--d-2) var(--sale) both}
  .ll-cadena--traza .ll-cadena__e{animation:ll-esfera var(--d-2) var(--sale) both}
}
.ll-cadena__traza>:nth-child(1){animation-delay:480ms}
.ll-cadena__traza>:nth-child(2){animation-delay:540ms}
.ll-cadena__traza>:nth-child(3){animation-delay:600ms}
.ll-cadena__traza>:nth-child(4){animation-delay:660ms}
.ll-cadena__traza>:nth-child(5){animation-delay:720ms}
.ll-cadena__traza>:nth-child(6){animation-delay:780ms}
.ll-cadena__traza>:nth-child(7){animation-delay:840ms}
.ll-cadena__traza>:nth-child(8){animation-delay:900ms}
.ll-cadena__traza>:nth-child(9){animation-delay:960ms}
.ll-cadena__llenos>:nth-child(1){animation-delay:1100ms}
.ll-cadena__llenos>:nth-child(2){animation-delay:1170ms}
.ll-cadena__llenos>:nth-child(3){animation-delay:1240ms}
.ll-cadena__llenos>:nth-child(4){animation-delay:1310ms}
.ll-cadena__llenos>:nth-child(5){animation-delay:1380ms}
@keyframes ll-aro{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ── Documento COA (objeto protagonista) ─────── */
.ll-doc{position:relative;background:var(--blanco);border:1px solid var(--negro);border-radius:var(--radio-doc);padding:clamp(22px,3vw,40px);max-width:560px;width:100%;color:var(--negro)}
.ll-doc__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding-bottom:18px;border-bottom:2px solid var(--negro)}
.ll-doc__emisor{font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;line-height:1.1}
.ll-doc__num{font-size:15px;color:var(--grafito);white-space:nowrap}
.ll-doc__capas{display:grid}
.ll-doc__capa{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.ll-doc__capa dt{font-size:14px;color:var(--grafito)}
.ll-doc__capa dd{font-weight:800;font-size:clamp(17px,1.6vw,20px);line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ll-doc__capa dd small{display:block;font-weight:500;font-size:14px;color:var(--grafito);margin-top:4px}
.ll-doc__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin-top:12px;font-size:14px;color:var(--grafito)}
.ll-doc__pie a{display:inline-flex;align-items:center;min-height:44px}
.ll-doc__cabeza .ll-doc__sello{flex-basis:auto;order:-1;margin-bottom:6px}
.ll-doc__sello{display:inline-block;border:1.5px solid var(--negro);border-radius:4px;padding:6px 10px;font-weight:800;font-size:12px;line-height:1.2;letter-spacing:.02em;color:var(--negro)}
@media (max-width:520px){ .ll-doc__capa{grid-template-columns:1fr} }

/* ── Escena COA: documento + notas que explican cada capa ── */
.ll-coa{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
.ll-coa__notas{display:grid;gap:0;counter-reset:nota}
.ll-coa__nota{padding:18px 0;border-top:1px solid var(--linea)}
.ll-coa__nota:last-child{border-bottom:1px solid var(--linea)}
.ll-coa__nota b{display:block;font-size:18px}
.ll-coa__nota span{display:block;color:var(--grafito);margin-top:4px;max-width:44ch}
@media (min-width:900px){ .ll-coa{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)} }

/* ── Escena del vial (secuencia por scroll) ──── */
.ll-vial{background:var(--crema)}
.ll-vial__marco{max-width:var(--ancho);margin:0 auto;padding:var(--sec-y) var(--gutter)}
.ll-vial__visual{position:relative;aspect-ratio:16/9;margin:0 auto;max-width:1280px}
.ll-vial__visual img,.ll-vial__visual canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ll-vial__visual canvas{opacity:0}
.ll-vial__textos{display:grid;gap:12px;margin-top:clamp(24px,4vw,48px)}
.ll-vial__textos p{font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.ll-vial__textos p+p{color:var(--grafito)}
@media (max-width:699px){ .ll-vial__visual{aspect-ratio:4/5} }

/* ── Escena «Desde 5 viales» ─────────────────── */
.ll-cinco__rejilla{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
.ll-cinco__num{font-weight:800;font-size:var(--t-heroe);line-height:.74;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:-.04em}
.ll-cinco__num span{display:inline-block}
.ll-cinco__rejilla .ll-h2{margin-bottom:clamp(20px,2.5vw,32px)}
.ll-cinco__pasos{display:grid}
.ll-cinco__paso{padding:22px 0;border-top:1px solid var(--linea)}
.ll-cinco__paso:last-child{border-bottom:1px solid var(--linea)}
.ll-cinco__paso b{display:block;font-size:var(--t-h3);line-height:1.2}
.ll-cinco__paso span{display:block;color:var(--grafito);margin-top:6px;max-width:40ch}
.ll-escalera{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.ll-escalera div{border-top:3px solid var(--negro);padding-top:10px}
.ll-escalera dt{font-size:14px;color:var(--grafito)}
.ll-escalera dd{font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ll-cinco__foto{margin-top:clamp(40px,6vw,80px)}
@media (min-width:900px){ .ll-cinco__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ── Proceso en la cadena ────────────────────── */
.ll-proceso{display:grid;gap:0;position:relative}
.ll-proceso__paso{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding-bottom:32px;position:relative}
.ll-proceso__paso:last-child{padding-bottom:0}
.ll-proceso__esfera{width:48px;height:48px;border-radius:50%;border:10px solid var(--negro);background:var(--crema);position:relative;z-index:1}
/* El relleno cubre también el aro (inset:-10px): la esfera llena no deja un filo claro. */
.ll-proceso__esfera::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:var(--negro)}
.ll-proceso__barra{position:absolute;left:19px;top:48px;bottom:0;width:10px;background:var(--linea-2)}
.ll-proceso__barra i{position:absolute;inset:0;background:var(--negro);transform-origin:top;transform:scaleY(1)}
.ll-proceso__paso:last-child .ll-proceso__barra{display:none}
.ll-proceso__paso b{display:block;font-size:var(--t-h3);line-height:1.2;margin-top:10px}
.ll-proceso__paso span{display:block;color:var(--grafito);margin-top:6px;max-width:34ch;text-wrap:pretty}
@media (min-width:900px){
  .ll-proceso{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* align-content:start: las filas no se estiran con el texto y los cuatro títulos quedan a la misma altura. */
  .ll-proceso__paso{grid-template-columns:1fr;gap:18px;padding-bottom:0;padding-right:24px;align-content:start}
  .ll-proceso__barra{left:48px;right:0;top:19px;bottom:auto;width:auto;height:10px}
  .ll-proceso__barra i{transform-origin:left}
  .ll-proceso__paso b{margin-top:0}
}

/* ── Especificaciones (condiciones como hoja técnica) ── */
.ll-specs{display:grid;border-top:2px solid var(--negro)}
.ll-specs>div{display:grid;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--linea)}
.ll-specs dt{font-weight:800}
.ll-specs dd{color:var(--grafito);max-width:56ch}
@media (min-width:760px){ .ll-specs>div{grid-template-columns:minmax(0,15em) minmax(0,1fr)} }

/* ── Preguntas ────────────────────────────────── */
.ll-faq{border-top:2px solid var(--negro);max-width:860px}
.ll-faq details{border-bottom:1px solid var(--linea)}
.ll-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;font-weight:800;font-size:18px;line-height:1.3}
.ll-faq summary::-webkit-details-marker{display:none}
.ll-faq summary::after{content:"+";content:"+" / "";flex:none;width:24px;text-align:center;font-weight:500;font-size:26px;line-height:1}
.ll-faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.ll-faq details>p,.ll-faq details>div{padding:0 0 22px;color:var(--grafito);max-width:64ch}

/* ── Cierre ───────────────────────────────────── */
.ll-cierre{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;justify-items:start}

/* ── Pie ──────────────────────────────────────── */
.ll-pie{background:var(--negro);color:var(--blanco);padding:clamp(56px,8vw,96px) var(--gutter) 40px}
.ll-pie__in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ll-pie__marca{display:grid;gap:20px;justify-items:start}
.ll-pie .ll-marca{font-size:14px;color:var(--blanco)}
.ll-pie__ruo{font:800 12px/1.4 var(--f);letter-spacing:.16em;text-transform:uppercase}
.ll-pie p{font-size:14px;line-height:1.6;color:rgb(255 255 255 / .74);max-width:72ch}
/* Grupos de enlaces: rótulo pequeño en 800 y lista; cada enlace es un objetivo de 44 px de alto. */
.ll-pie__links{display:grid;gap:32px}
.ll-pie__t{font:800 14px/1.3 var(--f);color:rgb(255 255 255 / .74);margin-bottom:6px}
.ll-pie ul{display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px}
.ll-pie__grupo,.ll-pie__grupo--guias{min-width:0}
.ll-pie__grupo--sitio ul,.ll-pie__grupo--areas ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.ll-pie__links a,.ll-pie__redes a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:4px 0;color:var(--blanco);font-size:15px;line-height:1.3;text-decoration:none}
.ll-pie__redes a{font-weight:800}
@media (hover:hover){ .ll-pie__links a:hover,.ll-pie__redes a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} }
.ll-pie :focus-visible{outline-color:var(--blanco)}
.ll-pie__redes{border-top:1px solid rgb(255 255 255 / .18);padding-top:24px}
.ll-pie__in>p:last-child{border-top:1px solid rgb(255 255 255 / .18);padding-top:20px;max-width:none}
@media (min-width:600px){
  .ll-pie__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .ll-pie__grupo--sitio ul{grid-template-columns:minmax(0,1fr)}
  .ll-pie__grupo--areas{grid-column:1 / -1;grid-row:2}
  .ll-pie__grupo--areas ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Escritorio: marca y redes arriba; Sitio, Áreas y Guías en columnas debajo. */
@media (min-width:1024px){
  .ll-pie__in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:64px}
  .ll-pie__marca{grid-column:1 / span 7}
  /* El rótulo «Redes y contacto» arranca a la altura del wordmark (centrado en su enlace de 44 px). */
  .ll-pie__redes{grid-column:8 / -1;grid-row:1;align-self:start;border-top:0;padding-top:13px}
  .ll-pie__links{grid-column:1 / -1;grid-row:2;grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,3fr);column-gap:32px}
  .ll-pie__grupo--areas{grid-column:auto;grid-row:auto}
  .ll-pie__grupo--areas ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ll-pie__in>p:last-child{grid-column:1 / -1}
}

/* ── Vista entre páginas (View Transitions, CSS nativo) ──
   Fundido en secuencia: la página sale y después entra la nueva, nunca dos páginas encimadas (sale en 120 ms; la
   nueva entra a los 100 ms, cuando la vieja ya está en menos del 1 %, y dura 240: 340 ms). La barra RUO y el header no se funden contra sí mismos: cambian al instante y se
   quedan quietos. El nombre del compuesto viaja del catálogo a la ficha (ll-transicion-1.js, 350 ms). */
@view-transition{navigation:auto}
.ll-ruo{view-transition-name:ll-ruo}
.ll-header{view-transition-name:ll-header}
::view-transition-old(root){animation:120ms var(--sale) both ll-vt-sale}
::view-transition-new(root){animation:240ms var(--sale) 100ms both ll-vt-entra}
::view-transition-group(ll-header),::view-transition-group(ll-ruo),::view-transition-new(ll-header),::view-transition-new(ll-ruo){animation:none}
::view-transition-old(ll-header),::view-transition-old(ll-ruo){display:none}
::view-transition-group(ll-nombre){animation-duration:350ms;animation-timing-function:var(--sale)}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }
@keyframes ll-vt-sale{to{opacity:0}}
@keyframes ll-vt-entra{from{opacity:0;transform:translateY(8px)}}
/* Nav sin brincos: cada enlace reserva debajo, sin alto, el ancho de su texto en 800 (data-t). Así el enlace
   actual en negrita no empuja a los demás y el nav queda en el mismo lugar en todas las páginas. */
.ll-nav a{display:inline-grid;grid-auto-flow:column;align-content:center;align-items:center;justify-items:center}
.ll-nav a::after{content:attr(data-t);content:attr(data-t) / "";grid-area:2 / 1;height:0;overflow:hidden;visibility:hidden;font-weight:800;pointer-events:none;user-select:none}

/* ── Motion por scroll ─────────────────────────────
   CSS primero: lo que el navegador liga al scroll por sí solo (animation-timeline) no necesita JS y corre fuera
   del hilo principal; va dentro de @supports y de prefers-reduced-motion: no-preference (sin soporte se ve quieto).
   Las escenas con scrub (vial, 5, proceso, galería) las mueve ll-motion.js y sus estados iniciales solo existen
   con html.ll-motion. Sin JS, sin soporte o con movimiento reducido todo se ve completo. ── */

/* Vial: el marco es sticky a pantalla completa dentro de una sección alta (sin pin de GSAP: sin pin-spacer ni
   saltos al entrar o salir). El recorrido es el alto extra: 100svh en móvil, 140svh donde ll-motion.js fija escenas. */
.ll-motion .ll-vial{height:calc(100svh - var(--header-h) + var(--ll-vial-extra,100svh))}
@media (min-width:900px) and (min-height:640px){ .ll-motion .ll-vial{--ll-vial-extra:140svh} }
.ll-motion .ll-vial__marco{position:sticky;top:var(--header-h);max-width:none;height:calc(100svh - var(--header-h));padding:0;overflow:hidden}
.ll-motion .ll-vial__visual{position:absolute;inset:0;max-width:none;aspect-ratio:auto}
/* El canvas entra fundido sobre la foto (que es su cuadro 001); la foto se va cuando ya está cubierta. */
.ll-motion .ll-vial__visual canvas{transition:opacity var(--d-2) var(--sale)}
.ll-motion .ll-vial__visual.is-listo canvas{opacity:1}
.ll-motion .ll-vial__visual.is-listo picture{opacity:0;transition:opacity 0s linear var(--d-2)}
.ll-motion .ll-vial__textos{position:absolute;left:max(var(--gutter),calc((100vw - var(--ancho)) / 2));top:50%;width:min(30vw,400px);margin:0;display:grid;transform:translateY(-50%)}
/* Relevo con dirección: la frase que sale sube y se apaga rápido; la nueva entra desde abajo 90 ms después, sin
   encimarse. Al subir el scroll, al revés (is-pasado lo pone ll-motion.js). */
.ll-motion .ll-vial__textos p{grid-area:1/1;font-size:clamp(28px,3vw,46px);color:var(--negro);opacity:0;transform:translateY(16px);transition:opacity var(--d-1) var(--sale),transform var(--d-2) var(--sale)}
.ll-motion .ll-vial__textos p.is-pasado{transform:translateY(-16px)}
.ll-motion .ll-vial__textos p.is-activo{opacity:1;transform:none;transition-delay:90ms}
@media (max-width:899px){
  .ll-motion .ll-vial__visual img{object-fit:contain;transform:translateY(6%)}
  .ll-motion .ll-vial__textos{top:24px;right:var(--gutter);width:auto;transform:none}
  .ll-motion .ll-vial__textos p{font-size:clamp(24px,7vw,34px)}
}

/* 5 viales: el número se queda; cada paso se enciende en su turno. */
/* Inactivo al 78 %: sigue pasando AA (grafito 5.2:1, negro >6:1). El activo traza un filete de 3 px sobre el suyo
   (scaleX; el borde y el alto no cambian). */
.ll-motion .ll-cinco__paso{position:relative;opacity:.78;transition:opacity var(--d-2) var(--sale)}
.ll-motion .ll-cinco__paso::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--negro);transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--sale)}
.ll-motion .ll-cinco__paso.is-activo{opacity:1}
.ll-motion .ll-cinco__paso.is-activo::before{transform:none}

/* COA sin scroll timelines (Firefox, Safari < 26; ll-motion.js pone .is-por-capas): la hoja se ve completa desde
   el principio, con etiquetas y filetes; solo el dato de cada capa entra al llegar. La nota en curso traza su barra. */
[data-escena="coa"].is-por-capas .ll-doc__capa dd{opacity:0;transform:translateY(8px);transition:opacity var(--d-3) var(--sale),transform var(--d-3) var(--sale)}
[data-escena="coa"].is-por-capas .ll-doc__capa.is-visible dd,[data-escena="coa"].is-por-capas .ll-doc:focus-within dd{opacity:1;transform:none}
[data-escena="coa"].is-por-capas .ll-coa__nota{position:relative;opacity:.78;transition:opacity var(--d-2) var(--sale)}
[data-escena="coa"].is-por-capas .ll-coa__nota::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--negro);transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--sale)}
[data-escena="coa"].is-por-capas .ll-coa__nota.is-visto{opacity:.9}
[data-escena="coa"].is-por-capas .ll-coa__nota.is-activo{opacity:1}
[data-escena="coa"].is-por-capas .ll-coa__nota.is-activo::before{transform:none}

/* COA con scroll timelines, solo CSS (Chrome, Edge, Safari 26+; también sin JS). En escritorio el documento y sus
   notas quedan sticky dentro de un bloque alto: la hoja está completa desde el primer cuadro (etiquetas y filetes),
   cada dato entra en su tramo del scroll, su filete se traza y la nota de esa capa se enciende con una barra.
   En móvil, sin sticky: cada dato entra al llegar a la pantalla. Con foco dentro de la hoja, todo se muestra. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px) and (min-height:760px){
    [data-escena="coa"] .ll-coa{height:calc(100svh + 120svh);view-timeline:--ll-coa block;view-timeline-inset:var(--header-h) 0}
    [data-escena="coa"] .ll-coa>.ll-doc,[data-escena="coa"] .ll-coa>.ll-coa__notas{position:sticky;top:calc(var(--header-h) + 32px)}
    [data-escena="coa"] .ll-doc__capa dd{animation:ll-dato linear both;animation-timeline:--ll-coa}
    /* El lote entra mientras la hoja sube a su lugar: al llegar (también por #coa) el primer dato ya está. */
    [data-escena="coa"] .ll-doc__capa[data-capa="1"] dd{animation-range:entry 35% entry 65%}
    [data-escena="coa"] .ll-doc__capa[data-capa="2"] dd{animation-range:contain 18% contain 24%}
    [data-escena="coa"] .ll-doc__capa[data-capa="3"] dd{animation-range:contain 36% contain 42%}
    [data-escena="coa"] .ll-doc__capa[data-capa="4"] dd{animation-range:contain 54% contain 60%}
    [data-escena="coa"] .ll-doc__capa[data-capa="5"] dd{animation-range:contain 72% contain 78%}
    [data-escena="coa"] .ll-doc__capa{position:relative}
    [data-escena="coa"] .ll-doc__capa::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--negro);transform-origin:left;animation:ll-barra linear both;animation-timeline:--ll-coa}
    [data-escena="coa"] .ll-doc__capa[data-capa="1"]::after{animation-range:entry 45% entry 80%}
    [data-escena="coa"] .ll-doc__capa[data-capa="2"]::after{animation-range:contain 20% contain 28%}
    [data-escena="coa"] .ll-doc__capa[data-capa="3"]::after{animation-range:contain 38% contain 46%}
    [data-escena="coa"] .ll-doc__capa[data-capa="4"]::after{animation-range:contain 56% contain 64%}
    [data-escena="coa"] .ll-doc__capa[data-capa="5"]::after{animation-range:contain 74% contain 82%}
    [data-escena="coa"] .ll-coa__nota{position:relative;animation:ll-nota linear both;animation-timeline:--ll-coa}
    [data-escena="coa"] .ll-coa__nota::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--negro);transform-origin:left;animation:ll-nota-barra linear both;animation-timeline:--ll-coa}
    [data-escena="coa"] .ll-coa__nota[data-capa="1"],[data-escena="coa"] .ll-coa__nota[data-capa="1"]::before{animation-range:entry 35% contain 18%}
    [data-escena="coa"] .ll-coa__nota[data-capa="2"],[data-escena="coa"] .ll-coa__nota[data-capa="2"]::before{animation-range:contain 18% contain 36%}
    [data-escena="coa"] .ll-coa__nota[data-capa="3"],[data-escena="coa"] .ll-coa__nota[data-capa="3"]::before{animation-range:contain 36% contain 54%}
    [data-escena="coa"] .ll-coa__nota[data-capa="4"],[data-escena="coa"] .ll-coa__nota[data-capa="4"]::before{animation-range:contain 54% contain 72%}
    [data-escena="coa"] .ll-coa__nota[data-capa="5"],[data-escena="coa"] .ll-coa__nota[data-capa="5"]::before{animation-range:contain 72% contain 100%}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:899px),(prefers-reduced-motion:no-preference) and (max-height:759px){
    [data-escena="coa"] .ll-doc__capa dd{animation:ll-dato linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
  }
  [data-escena="coa"] .ll-doc:focus-within dd,[data-escena="coa"] .ll-doc:focus-within .ll-doc__capa::after{animation:none}
}

/* Proceso: las esferas se llenan cuando la barra llega. */
.ll-motion .ll-proceso__esfera::after{transform:scale(0);transition:transform var(--d-2) var(--sale)}
.ll-motion .ll-proceso__paso.is-hecho .ll-proceso__esfera::after{transform:scale(1)}

/* Titulares y pruebas que entran con el scroll, sin JS (antes, SplitText: 3.7 KB y GSAP en cada página).
   Nada dentro del 5 fijado (lo mueve GSAP). En una fila, cada pieza entra un poco después que la anterior. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ll-seccion:not([data-escena="cinco"]) .ll-h2,.ll-cifras>li,.ll-cuando__pasos li,.ll-lote-vista__pasos li,.ll-riesgo__prueba li{animation:ll-sube-suave var(--sale) both;animation-timeline:view();animation-range:entry 10% entry 55%}
    .ll-cifras>li:nth-child(2),.ll-cuando__pasos li:nth-child(2),.ll-lote-vista__pasos li:nth-child(2){animation-range:entry 18% entry 63%}
    .ll-cifras>li:nth-child(3),.ll-cuando__pasos li:nth-child(3),.ll-lote-vista__pasos li:nth-child(3){animation-range:entry 26% entry 71%}
    .ll-cifras>li:nth-child(4){animation-range:entry 34% entry 79%}
  }
}

/* Menú móvil y respuestas: se abren con un paso corto (@starting-style; sin soporte, aparecen como antes). */
@media (prefers-reduced-motion:no-preference){
  .ll-menu[open] nav{transition:opacity var(--d-2) var(--sale),transform var(--d-2) var(--sale)}
  @starting-style{ .ll-menu[open] nav{opacity:0;transform:translateY(-8px)} }
  .ll-faq details[open]>p,.ll-faq details[open]>div{animation:ll-sube-suave var(--d-2) var(--sale)}
}

/* ── Lectura: en /proveedor y en la guía (main[data-lectura]) el header se asienta al bajar ──
   Arriba es parte de la página (sin filete); en los primeros 96 px de scroll aparece su filete y el wordmark se
   compacta, y una línea de 2 px sobre el filete marca cuánto llevas de la página. Solo transform y opacity,
   ligado al scroll sin JS; el alto del header no cambia. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ll-header:has(~main[data-lectura]){border-bottom-color:transparent}
    .ll-header:has(~main[data-lectura])::before,.ll-header:has(~main[data-lectura])::after{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;animation-timeline:scroll(root)}
    .ll-header:has(~main[data-lectura])::after{height:1px;background:var(--linea);animation:ll-aparece linear both;animation-timeline:scroll(root);animation-range:0 96px}
    .ll-header:has(~main[data-lectura])::before{z-index:1;height:2px;background:var(--negro);transform-origin:left;animation:ll-barra linear both;animation-timeline:scroll(root)}
    .ll-header:has(~main[data-lectura]) .ll-marca .ll-wordmark{transform-origin:left center;animation:ll-compacta linear both;animation-timeline:scroll(root);animation-range:0 96px}
  }
}
@keyframes ll-dato{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ll-nota{0%{opacity:.78}12%,88%{opacity:1}100%{opacity:.9}}
@keyframes ll-nota-barra{0%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes ll-aparece{from{opacity:0}to{opacity:1}}
@keyframes ll-compacta{to{transform:scale(.88)}}

/* ── Utilidades de composición ───────────────── */
.ll-dos{display:grid;gap:24px 64px;align-items:start}
@media (min-width:900px){ .ll-dos{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.ll-coa__cierre,.ll-specs__nota{margin-top:28px}
/* Líneas que solo tienen enlaces: cada enlace con área de 44 px. */
.ll-coa__cierre a,.ll-specs__nota a{display:inline-flex;align-items:center;min-height:44px}
.ll-seccion--cierre{border-top:1px solid var(--linea)}

/* Total que rueda en el cotizador (ll-motion.js, WAAPI): el número viejo sale, el nuevo entra. */
.ll-rueda{position:relative;display:inline-block;overflow:clip;vertical-align:bottom}
.ll-rueda__fantasma{position:absolute;inset:0;pointer-events:none}

/* ── Guía: preguntas y comparativo ───────────── */
.ll-preguntas{display:grid;counter-reset:preg}
.ll-pregunta{counter-increment:preg;padding:28px 0;border-top:1px solid var(--linea)}
.ll-pregunta:first-child{border-top:2px solid var(--negro)}
.ll-pregunta .ll-h3::before{content:counter(preg) ". ";content:counter(preg) ". " / ""}
.ll-pregunta p{margin-top:10px;color:var(--grafito);max-width:58ch}
.ll-pregunta__aqui{color:var(--negro)!important}
.ll-compara{border-top:2px solid var(--negro)}
.ll-compara__fila{display:grid;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--linea)}
.ll-compara__fila p{margin-top:4px}
@media (min-width:760px){ .ll-compara__fila{grid-template-columns:1fr 1fr} }
.ll-legal p{color:var(--grafito)}
.ll-legal p strong{color:var(--negro)}

/* ════════ Segunda pasada · 26-sep-2026 ════════
   Pruebas a la vista: cifras, notas al pie, biblioteca de COAs, galería de lotes, demo del cotizador,
   ancla 30–50 → 5, riesgo cero y canal. Todo dentro del sistema: crema, negro, grafito, gris, blanco. */

/* ── Titular gigante (el gancho del anuncio) ── */
.ll-mega{font-weight:800;font-size:var(--t-mega);line-height:.86;letter-spacing:-.055em}
.ll-mega>span{display:block}
.ll-mega .ll-mega__gris{color:var(--gris)}

/* ── Cabeza de sección con un enlace a la derecha (Apple) ── */
.ll-cabeza--enlace{grid-template-columns:minmax(0,1fr);align-items:end}
.ll-cabeza__enlace{display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;justify-self:start}
@media (hover:hover){ .ll-cabeza__enlace:hover{text-decoration-thickness:2px} }
@media (min-width:900px){ .ll-cabeza--enlace{grid-template-columns:minmax(0,1fr) auto} .ll-cabeza--enlace .ll-cabeza__enlace{justify-self:end} }

/* ── Enunciado en dos tonos (Linear) ── */
.ll-dostonos{font-weight:800;font-size:clamp(28px,4.2vw,58px);line-height:1.08;letter-spacing:-.03em;max-width:24ch;text-wrap:balance}
.ll-dostonos span{color:var(--gris)}

/* ── Cifras (Stripe): número grande, frase exacta ── */
.ll-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;border-top:2px solid var(--negro);padding-top:28px}
.ll-cifras>li,.ll-cifras>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.ll-cifras b,.ll-cifras dd{display:block;font-weight:800;font-size:clamp(28px,8.4vw,76px);line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.ll-cifras b small{display:block;font-size:15px;letter-spacing:0;line-height:1.3;margin-bottom:6px;color:var(--grafito)}
.ll-cifras li>span,.ll-cifras dt{font-size:16px;line-height:1.35;color:var(--negro);font-weight:800}
.ll-cifras dt{order:-1;font-size:14px;color:var(--grafito);font-weight:800;letter-spacing:.02em}
.ll-cifras div small{font-size:14px;color:var(--grafito)}
.ll-cifras sup{font-size:max(.55em,11px);letter-spacing:0}
@media (min-width:900px){ .ll-cifras{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ll-similar{margin-top:28px;font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.01em;max-width:34ch}
.ll-ciudades{margin-top:10px;color:var(--grafito)}

/* ── Notas al pie numeradas (Apple): la marca junto al dato, la condición al final ── */
.ll-sup{font-size:max(.62em,11px);line-height:0;vertical-align:super;font-weight:800;letter-spacing:0;margin-left:.03em}
/* La llamada se ve igual de chica, pero se toca con un área de ~30 × 34 px (A11Y-03). */
.ll-sup a{position:relative;text-decoration:none;padding:0 .04em;border-radius:3px}
.ll-sup a::after{content:"";position:absolute;inset:-12px -10px}
@media (hover:hover){ .ll-sup a:hover{background:var(--negro);color:var(--blanco)} }
.ll-notas{padding:40px var(--gutter) 56px;border-top:1px solid var(--linea)}
.ll-notas ol{max-width:var(--ancho);margin:0 auto;display:grid;gap:10px}
.ll-notas li{display:grid;grid-template-columns:1.8em minmax(0,1fr);font-size:var(--t-nota);line-height:1.55;color:var(--grafito);max-width:92ch;scroll-margin-top:calc(var(--header-h) + 24px)}
.ll-notas li>span{font-weight:800;color:var(--negro)}
.ll-notas li:target{background:var(--blanco);outline:1px solid var(--negro);outline-offset:6px;border-radius:2px}
.ll-notas a{text-decoration:underline;text-underline-offset:3px}

/* ── Prueba en el hero: último COA publicado ── */
.ll-ultimo{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center;background:var(--blanco);border:1px solid var(--negro);border-radius:var(--radio-doc);padding:14px;max-width:420px;transition:transform var(--d-2) var(--sale)}
@media (hover:hover) and (pointer:fine){ .ll-ultimo:hover{transform:translateY(-3px)} }
.ll-ultimo__foto{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--linea);border-radius:3px;background:var(--crema)}
.ll-ultimo__foto img{width:100%;height:100%;object-fit:cover;object-position:top}
.ll-ultimo__txt{display:grid;gap:3px;min-width:0}
.ll-ultimo__k{font-size:14px;font-weight:800;color:var(--grafito)}
.ll-ultimo__n{font-weight:800;font-size:20px;line-height:1.2}
.ll-ultimo__d{font-size:14px;color:var(--grafito)}
.ll-hero__prueba{display:grid;gap:14px;align-content:start}
.ll-hero__dato{font-size:15px;color:var(--grafito);max-width:40ch}
.ll-hero__dato b{color:var(--negro)}
@media (min-width:1024px){
  .ll-hero--prueba .ll-hero__in{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .ll-hero--prueba .ll-hero__in>*{grid-column:1}
  .ll-hero--prueba .ll-hero__prueba{grid-column:2;grid-row:2 / span 4;align-self:end}
}

/* ── Galería horizontal de lotes (Lando): se desliza; en escritorio la fija ll-motion.js ── */
/* clip y no hidden: hidden haría de la sección un contenedor de scroll y rompería el sticky de la galería fijada. */
.ll-galeria{overflow:hidden;overflow:clip}
.ll-recientes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,264px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter) 20px;margin:0 calc(-1 * var(--gutter));scrollbar-width:thin;scrollbar-color:var(--gris) transparent}
.ll-contenedor .ll-recientes{margin:0 calc(-1 * var(--gutter))}
.ll-reciente{scroll-snap-align:start;min-width:0}
.ll-reciente__a{display:grid;gap:6px;height:100%;background:var(--blanco);border:1px solid var(--linea-2);border-radius:var(--radio-doc);padding:12px 12px 16px;transition:border-color var(--d-1) var(--sale),transform var(--d-2) var(--sale)}
@media (hover:hover) and (pointer:fine){ .ll-reciente__a:hover{border-color:var(--negro);transform:translateY(-4px)} }
.ll-reciente__foto{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--crema);margin-bottom:6px;border:1px solid var(--linea)}
.ll-reciente__foto img{width:100%;height:auto;transform-origin:50% 42%;transition:transform var(--d-3) var(--sale)}
/* Dos estados (Lando): al pasar el mouse, el documento se acerca a sus resultados. */
@media (hover:hover) and (pointer:fine){ .ll-reciente__a:hover .ll-reciente__foto img{transform:scale(1.55)} }
.ll-reciente__fecha{font-size:14px;font-weight:800;color:var(--grafito)}
.ll-reciente__nombre{font-weight:800;font-size:18px;line-height:1.2}
.ll-reciente__nombre span{font-weight:500;color:var(--grafito)}
.ll-reciente__meta,.ll-reciente__dato{font-size:14px;color:var(--grafito)}
.ll-reciente__dato{color:var(--negro);font-weight:800}

/* ── Biblioteca de COAs ── */
.ll-biblio__filtros{position:sticky;top:var(--header-h);z-index:5;background:var(--crema);display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.ll-campo{min-height:48px;width:min(100%,360px);border:1px solid var(--gris);border-radius:999px;padding:0 18px;background:var(--blanco);font-size:16px}
.ll-campo:focus-visible{outline:2px solid var(--negro);outline-offset:2px}
.ll-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--negro);background:transparent;font-weight:800;font-size:15px;cursor:pointer}
.ll-chip[aria-pressed="true"]{background:var(--negro);color:var(--blanco)}
.ll-biblio__cuenta{margin-left:auto;font-size:14px;color:var(--grafito)}
.ll-biblio__grupo{padding:40px 0 8px;border-top:1px solid var(--linea)}
.ll-biblio__grupo:first-of-type{border-top:0}
.ll-biblio__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:18px}
.ll-biblio__cabeza .ll-enlace{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.ll-biblio__docs{display:grid;gap:16px}
@media (min-width:900px){ .ll-biblio__docs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ll-lote{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;background:var(--blanco);border:1px solid var(--linea-2);border-radius:var(--radio-doc);padding:16px;scroll-margin-top:calc(var(--header-h) + 88px)}
.ll-lote:target{border-color:var(--negro);outline:2px solid var(--negro);outline-offset:3px}
@media (min-width:600px){ .ll-lote{grid-template-columns:148px minmax(0,1fr);gap:20px} }
.ll-lote__foto{display:block;align-self:start;border:1px solid var(--linea);border-radius:3px;overflow:hidden;background:var(--crema)}
.ll-lote__foto img{width:100%;height:auto}
.ll-lote__nombre{font-weight:800;font-size:20px;line-height:1.2}
.ll-lote__nombre span{font-weight:500;color:var(--grafito)}
.ll-lote__prueba{font-size:13px;color:var(--grafito);margin-top:4px}
.ll-lote dl{display:grid;margin-top:10px}
.ll-lote dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px;padding:6px 0;border-top:1px solid var(--linea);font-size:14px}
@media (min-width:600px){ .ll-lote dl>div{grid-template-columns:minmax(0,10.5em) minmax(0,1fr)} }
.ll-lote dt{color:var(--grafito)}
.ll-lote dd{font-weight:800;overflow-wrap:anywhere}
.ll-lote dd small{font-weight:500;color:var(--grafito)}
.ll-mono{letter-spacing:.06em}
.ll-lote__acciones{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.ll-lote__acciones a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ll-lote__revisar{font-size:13px;color:var(--grafito)}
.ll-biblio__vacio{padding:32px 0;color:var(--grafito)}
/* «Verifícalo tú»: el título y, debajo, el enlace a la herramienta. */
.ll-dos__cab{display:grid;gap:6px;justify-items:start}
/* En móvil el filtro fijo cabe en una fila que se desliza (antes eran tres, unos 170 px) y la tarjeta usa el ancho:
   la miniatura queda junto al nombre y cada dato lleva su etiqueta al lado. */
@media (max-width:599px){
  .ll-biblio__filtros{flex-wrap:nowrap;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter)}
  .ll-biblio__filtros::-webkit-scrollbar{display:none}
  .ll-biblio__filtros .ll-campo{flex:0 0 min(100%,300px)}
  .ll-biblio__filtros .ll-acciones{flex:none;flex-wrap:nowrap;gap:8px}
  .ll-biblio__filtros .ll-chip{flex:none;white-space:nowrap}
  .ll-biblio__cuenta{flex:none;margin-left:0;white-space:nowrap}
  .ll-lote{grid-template-columns:72px minmax(0,1fr);gap:0 14px;padding:14px}
  .ll-lote__datos{display:contents}
  .ll-lote__foto{grid-row:1 / span 2}
  .ll-lote__nombre,.ll-lote__prueba{grid-column:2}
  .ll-lote__nombre{font-size:18px}
  .ll-lote dl,.ll-lote__acciones,.ll-lote__revisar{grid-column:1 / -1}
  .ll-lote dl>div{grid-template-columns:minmax(0,8.5em) minmax(0,1fr);padding:5px 0}
}

/* ── Gráfica de pureza ── */
.ll-grafica{margin-top:40px;background:var(--blanco);border:1px solid var(--linea-2);border-radius:var(--radio-doc);padding:clamp(18px,3vw,32px)}
.ll-grafica figcaption{font-size:15px;line-height:1.5;color:var(--grafito);max-width:72ch}
.ll-grafica figcaption b{color:var(--negro)}
.ll-grafica__plano{margin-top:22px}
.ll-grafica__plano svg{width:100%;height:112px;overflow:visible}
.ll-grafica__eje{stroke:var(--linea-2);stroke-width:1}
.ll-grafica__med{stroke:var(--negro);stroke-width:2}
.ll-grafica__p{stroke:var(--negro);stroke-width:14;stroke-linecap:round}
.ll-grafica__ejex{display:flex;justify-content:space-between;padding:6px 0 0;font-size:13px;color:var(--grafito);font-variant-numeric:tabular-nums}
.ll-grafica__ejex span{width:3.2em;text-align:center}
.ll-grafica__ejex span:first-child{text-align:left}
.ll-grafica__ejex span:last-child{text-align:right}
.ll-grafica__lectura{margin-top:14px;font-size:15px;color:var(--grafito);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.ll-grafica__lectura b{color:var(--negro)}
.ll-grafica__clave{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px}
.ll-grafica__clave-p{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--negro)}
.ll-grafica__clave-m{display:inline-block;width:2px;height:14px;background:var(--negro);margin-left:10px}
.ll-grafica__tabla{margin-top:14px}
.ll-grafica__tabla summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* La gráfica se traza al entrar en pantalla, solo con CSS: sin JS y sin contadores (las cifras del texto nunca cambian).
   Los puntos entran por banda de pureza, de izquierda a derecha (coa-biblioteca.js marca la banda 0 a 7 de cada uno);
   después crece la mediana y al final entra su lectura. Sin soporte o con movimiento reducido se ve completa y quieta. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ll-grafica{view-timeline:--ll-graf block}
    .ll-grafica__p,.ll-grafica__med,.ll-grafica__lectura{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ll-graf}
    .ll-grafica__p{animation-name:ll-punto}
    .ll-grafica__p--b0{animation-range:entry 5% entry 35%}
    .ll-grafica__p--b1{animation-range:entry 10% entry 40%}
    .ll-grafica__p--b2{animation-range:entry 16% entry 46%}
    .ll-grafica__p--b3{animation-range:entry 21% entry 51%}
    .ll-grafica__p--b4{animation-range:entry 26% entry 56%}
    .ll-grafica__p--b5{animation-range:entry 32% entry 62%}
    .ll-grafica__p--b6{animation-range:entry 37% entry 67%}
    .ll-grafica__p--b7{animation-range:entry 42% entry 72%}
    .ll-grafica__med{animation-name:ll-mediana;animation-range:entry 55% entry 85%;transform-box:fill-box;transform-origin:50% 100%}
    .ll-grafica__lectura{animation-name:ll-lectura;animation-range:entry 75% entry 100%}
  }
}
@keyframes ll-punto{from{opacity:0;transform:translateY(-12px)}}
@keyframes ll-mediana{from{transform:scaleY(0)}}
@keyframes ll-lectura{from{opacity:0}}
/* Impresión de /coa: sin la barra de filtros, y ni una tarjeta ni la gráfica se parten entre páginas. */
@media print{
  .ll-biblio__filtros{display:none!important}
  .ll-biblio__cabeza{break-after:avoid;page-break-after:avoid}
  .ll-biblio__docs{display:block}
  .ll-biblio__docs>.ll-lote:first-child{break-before:avoid}
  .ll-biblio__grupo:has(.ll-lote:only-child){break-inside:avoid}
  .ll-lote,.ll-reciente,.ll-grafica{break-inside:avoid;page-break-inside:avoid}
  .ll-lote{margin-bottom:12px}
  .ll-grafica__p,.ll-grafica__med,.ll-grafica__lectura{animation:none!important}
}
.ll-tabla{overflow-x:auto}
.ll-tabla table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.ll-tabla th,.ll-tabla td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea)}
.ll-tabla thead th{font-size:13px;color:var(--grafito);border-bottom:2px solid var(--negro)}

/* ── Demo del cotizador en el hero (Linear): el producto real, con precios de la lista ── */
.ll-demo{background:var(--blanco);border:1px solid var(--negro);border-radius:var(--radio);padding:clamp(18px,2.2vw,26px);display:grid;gap:14px;width:100%;max-width:520px}
.ll-demo__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
.ll-demo__cabeza b{font-size:20px}
.ll-demo__cabeza span{font-size:var(--t-nota);color:var(--grafito)}
.ll-demo__linea{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ll-demo__nombre{font-weight:800;font-size:17px;line-height:1.25}
.ll-demo__nombre small{display:block;font-weight:500;font-size:var(--t-nota);color:var(--grafito);margin-top:2px}
.ll-demo__cant{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grafito)}
/* El ejemplo no imita un control que no responde: la cantidad se lee como texto («5 viales × $490»). */
.ll-demo__paso{display:none}
.ll-demo__tot{align-self:end;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.ll-demo__sum{display:grid;gap:6px;font-size:15px}
.ll-demo__sum div{display:flex;justify-content:space-between;gap:12px}
.ll-demo__sum dt{color:var(--grafito)}
.ll-demo__sum dd{font-variant-numeric:tabular-nums;font-weight:800}
.ll-demo__total{border-top:2px solid var(--negro);padding-top:10px;margin-top:4px}
.ll-demo__total dt{color:var(--negro)!important;font-weight:800;font-size:18px}
.ll-demo__total dd{font-size:clamp(28px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em}
.ll-demo__gancho{font-size:14px;color:var(--grafito)}
.ll-demo__barra{display:block;height:6px;background:var(--linea);border-radius:99px;margin-top:8px;overflow:hidden}
.ll-demo__barra i{display:block;height:100%;width:50%;background:var(--negro);transform-origin:left}
.ll-demo__acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ll-demo__nota{font-size:var(--t-nota);color:var(--grafito)}
.ll-hero--demo .ll-hero__in{align-items:center}
@media (min-width:1024px){
  .ll-hero--demo .ll-hero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:56px}
  .ll-hero--demo .ll-hero__in>*{grid-column:1}
  .ll-hero--demo .ll-demo{grid-column:2;grid-row:1 / span 6;justify-self:end}
}
/* Se arma solo: línea, cantidad y total entran en orden (solo transform y opacity; sin JS se ve completo). */
@media (prefers-reduced-motion:no-preference){
  .ll-demo__linea,.ll-demo__sum,.ll-demo__gancho,.ll-demo__acciones{animation:ll-sube-suave var(--d-3) var(--sale) both}
  .ll-demo__linea{animation-delay:700ms}
  .ll-demo__sum{animation-delay:900ms}
  .ll-demo__gancho{animation-delay:1050ms}
  .ll-demo__acciones{animation-delay:1150ms}
  .ll-demo__barra i{animation:ll-barra var(--d-3) var(--sale) 1200ms both}
}
@keyframes ll-sube-suave{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Ancla: 30–50 antes que el 5 ── */
.ll-ancla{display:grid;gap:4px;justify-items:start}
.ll-ancla__antes{position:relative;font-weight:800;font-size:clamp(56px,8.6vw,132px);line-height:.9;letter-spacing:-.05em;color:var(--gris);font-variant-numeric:tabular-nums}
.ll-ancla__rotulo{font-size:15px;font-weight:800;color:var(--grafito)}
.ll-ancla .ll-cinco__num{margin-top:8px}

/* ── Riesgo cero ── */
.ll-riesgo{display:grid;gap:clamp(28px,4vw,56px);align-items:end}
.ll-riesgo__prueba{display:grid;gap:0;border-top:2px solid var(--negro)}
.ll-riesgo__prueba li{padding:18px 0;border-bottom:1px solid var(--linea)}
.ll-riesgo__prueba b{display:block;font-size:var(--t-h3);line-height:1.2}
.ll-riesgo__prueba span{display:block;color:var(--grafito);margin-top:4px;max-width:44ch}
@media (min-width:900px){ .ll-riesgo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }

/* ── Proceso con su prueba en cada paso ── */
.ll-proceso__prueba{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea);font-size:14px;color:var(--grafito)}
.ll-proceso__prueba b{display:inline!important;font-size:inherit!important;margin:0!important;color:var(--negro)}

/* ── Proceso con nombre propio ── */
.ll-nombrado{display:inline-block;border:1.5px solid var(--negro);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:800}

/* ── Canal (reciprocidad): un regalo sin pedir nada ── */
.ll-canal{display:grid;gap:16px;border:1px solid var(--negro);border-radius:var(--radio);padding:clamp(22px,3vw,40px);background:var(--blanco)}
.ll-canal .ll-h3{font-size:clamp(24px,2.4vw,32px)}
.ll-canal p{color:var(--grafito);max-width:52ch}
@media (min-width:900px){ .ll-canal{grid-template-columns:minmax(0,1fr) auto;align-items:center} }

/* ── Cierre centrado (Linear) ── */
.ll-cierre--centro{justify-items:center;text-align:center}
.ll-cierre--centro .ll-entrada{max-width:40ch}
.ll-cierre--centro .ll-acciones{justify-content:center}

/* ── Firma: la cadena de aminoácidos vuelve en cada sección como separador ── */
.ll-firma{display:block;width:92px;height:auto;color:var(--negro);margin-bottom:18px}
.ll-firma--claro{color:var(--blanco)}
.ll-lote__falta{font-weight:500;color:var(--grafito)}
.ll-mega--cierre{font-size:clamp(56px,9.4vw,144px);line-height:.9;text-wrap:balance}
.ll-similar--chica{font-size:16px;margin-top:8px;color:var(--grafito)}
.ll-lote-vista{display:grid;gap:14px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--linea);justify-items:start}
.ll-lote-vista__pasos{display:grid;gap:10px}
.ll-lote-vista__pasos li{font-size:clamp(18px,1.6vw,21px);font-weight:800;line-height:1.3}
.ll-lote-vista__pasos li b{display:inline-block;min-width:1.6em;color:var(--grafito)}
@media (min-width:900px){ .ll-lote-vista{grid-template-columns:auto minmax(0,1fr);column-gap:32px;align-items:start} .ll-lote-vista__pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} }
/* En el hero de /proveedor la prueba es el documento: más grande, en vertical. */
@media (min-width:1024px){
  .ll-hero--prueba .ll-ultimo{grid-template-columns:1fr;max-width:340px;padding:16px}
  .ll-hero--prueba .ll-ultimo__foto{aspect-ratio:1/1}
  .ll-hero--prueba .ll-hero__prueba{justify-items:start}
}
.ll-demo__t{font-size:20px;font-weight:800}
.ll-demo__cant{grid-column:1 / -1}
.ll-demo__nombre small a{font-weight:800}

/* ── Motion de la segunda pasada (solo con html.ll-motion; sin JS todo se ve completo) ── */
/* El 30–50 empieza en negro y pasa a gris con opacidad (negro al 60 % sobre crema ≈ #6B6B6D), no con color. */
.ll-motion .ll-ancla.is-listo .ll-ancla__antes{color:var(--negro);transition:opacity var(--d-3) var(--sale)}
.ll-motion .ll-ancla.is-tachado .ll-ancla__antes{opacity:.6}
/* El 5 nunca desaparece: espera como fantasma al 14 % (el valor del filete) y entra a su turno. */
.ll-motion .ll-ancla.is-listo .ll-cinco__num,.ll-motion .ll-ancla.is-listo .ll-ancla__aqui{opacity:.14;transform:translateY(4%);transition:opacity var(--d-3) var(--sale),transform var(--d-3) var(--sale)}
.ll-motion .ll-ancla.is-cinco .ll-cinco__num,.ll-motion .ll-ancla.is-cinco .ll-ancla__aqui{opacity:1;transform:none}
/* Galería fijada (escritorio): la sección toma de alto el recorrido horizontal (--ll-gal-extra, ll-motion.js) y el
   contenedor queda sticky y centrado en la pantalla; la pista se mueve con el scroll, sin barra ni imán. */
.ll-motion .ll-galeria--fija{padding-block:0;height:calc(100svh - var(--header-h) + var(--ll-gal-extra,0px))}
.ll-motion .ll-galeria--fija>.ll-contenedor{position:sticky;top:var(--header-h);min-height:calc(100svh - var(--header-h));display:grid;align-content:center}
.ll-motion .ll-galeria--fija .ll-recientes{overflow:visible;scroll-snap-type:none}
.ll-hero--demo .ll-h1{font-size:var(--t-h1-doc)}
.ll-hero__dato{max-width:62ch}
/* Vial (Igloo): una línea guía une la frase activa con el vial; datos mínimos en la esquina. Solo escritorio y con motion. */
.ll-vial__guia,.ll-vial__esquina{display:none}
@media (min-width:900px){
  .ll-motion .ll-vial__textos{width:min(22vw,300px)}
  .ll-motion .ll-vial__guia{display:block;position:absolute;top:50%;left:calc(100% + 16px);width:calc(41.4vw - 16px - max(var(--gutter),(100vw - var(--ancho)) / 2) - min(22vw,300px));height:1px;background:var(--negro);transform-origin:left;transform:scaleX(0);transition:transform var(--d-3) var(--sale)}
  .ll-motion .ll-vial__guia::after{content:"";position:absolute;right:-5px;top:-5px;width:11px;height:11px;border-radius:50%;border:2px solid var(--negro);background:var(--crema)}
  .ll-motion .ll-vial__textos:has(p.is-activo) .ll-vial__guia{transform:scaleX(1)}
  .ll-motion .ll-vial__esquina{display:block;position:absolute;top:28px;right:max(var(--gutter),calc((100vw - var(--ancho)) / 2));text-align:right;font-size:14px;font-weight:800;line-height:1.6;color:var(--grafito)}
}
.ll-grafica__tabla{max-width:100%;overflow:hidden}
.ll-tabla{max-width:100%}
.ll-demo__nombre small a{display:inline-flex;align-items:center;min-height:44px}
.ll-cierre .ll-nota a{display:inline-flex;align-items:center;min-height:44px}
/* La cifra se ajusta al ancho de su columna (cabe «99.65 %» o «4,000» en cualquier rejilla). */
.ll-cifras>li,.ll-cifras>div{container-type:inline-size}
@supports (font-size:1cqi){ .ll-cifras b,.ll-cifras dd{font-size:clamp(28px,24cqi,76px)} }
.ll-cifras dd small{display:block;margin-top:8px;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.35;color:var(--grafito)}
/* Qué verificas y cuándo: antes de pagar, al pagar, al recibir. */
.ll-cuando{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:2px solid var(--negro);display:grid;gap:20px}
.ll-cuando__pasos{display:grid;gap:0;counter-reset:cuando}
.ll-cuando__pasos li{counter-increment:cuando;display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--linea)}
.ll-cuando__pasos b{font-size:var(--t-h3);line-height:1.2}
.ll-cuando__pasos span{color:var(--grafito);max-width:40ch}
@media (min-width:900px){ .ll-cuando__pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .ll-cuando__pasos li{border-bottom:0;padding:0} }
/* El 30–50 es un riesgo hipotético, no un precio anterior: sin tachado; solo pasa a gris cuando entra el 5. */
/* Aviso visible de imagen ilustrativa, en todos los anchos. */
.ll-vial__aviso{margin:12px 0 0;font-size:14px;font-weight:800;color:var(--grafito);text-align:right}
.ll-motion .ll-vial__aviso{position:absolute;right:max(var(--gutter),calc((100vw - var(--ancho)) / 2));bottom:18px;margin:0;z-index:2}
.ll-cinco__pie{margin-top:10px;text-align:right}

/* ════════ Sistema fino · 29-sep-2026 ════════
   Microtipografía, estados, campos, botones del hero en móvil, menú e impresión. Solo tokens de :root. */

/* ── Microtipografía: titulares balanceados; párrafos sin una palabra sola al final ── */
h1,h2,h3,h4,.ll-h3,.ll-cinco__paso b,.ll-riesgo__prueba b,.ll-proceso__paso b,.ll-coa__nota b,.ll-cuando__pasos b,.ll-similar{text-wrap:balance}
p,li,dd,figcaption,blockquote,summary,.ll-cinco__paso span,.ll-proceso__paso span,.ll-coa__nota span,.ll-riesgo__prueba span,.ll-cuando__pasos span{text-wrap:pretty}
p,h1,h2,h3,blockquote,figcaption{hanging-punctuation:first allow-end}
/* Tracking óptico: el 800 chico se abre un poco; en pantallas chicas los titulares se cierran menos. */
.ll-antetitulo,.ll-ultimo__k,.ll-reciente__fecha,.ll-pie__t,.ll-nombrado,.ll-ancla__rotulo{letter-spacing:.01em}
.ll-btn,.ll-chip{letter-spacing:.005em}
@media (max-width:599px){ .ll-h1{letter-spacing:-.03em} .ll-h2,.ll-dostonos{letter-spacing:-.02em} .ll-mega{letter-spacing:-.045em} }
.ll-reciente__dato,.ll-ultimo__d,.ll-notas li>span{font-variant-numeric:tabular-nums}
/* Tablas: encabezado en 800, como el resto de los rótulos (dos pesos, 500 y 800). */
th{font-weight:800}

/* ── Estados: al tocar responde :active (ll-ui.js hace que iOS lo aplique); el hover solo existe con puntero ──
   :where() no suma especificidad: si un componente ya mueve o transforma el elemento, manda el componente. */
:where(.ll-chip,button:not(:disabled)):active{transform:scale(.98)}
:where(a:not(.ll-btn),summary):active{opacity:.64}

/* ── Buscadores: sin la apariencia ni la × azul del sistema; la × es negra y hay una sola ── */
input[type="search"]{-webkit-appearance:none;appearance:none}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
/* La misma × que la del cotizador: trazo fino en #3A3A3C (--grafito; un data: URI no lee variables). */
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0 -2px 0 8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 5l8 8m0-8l-8 8' stroke='%233A3A3C' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;cursor:pointer}
/* Si el campo ya trae su propio botón de borrar (un botón type="button" junto al campo, como en el cotizador),
   el del sistema no aparece. Un botón de enviar («Buscar») no cuenta. */
input[type="search"]:has(+button[type="button"])::-webkit-search-cancel-button{display:none}

/* ── Campos: 16 px en pantallas táctiles o chicas para que iOS no amplíe la página al enfocarlos ──
   Es un piso de la plataforma, no un estilo: por eso !important (gana a cualquier campo de 14–15 px). */
@media (max-width:900px),(pointer:coarse){
  input:not([type="checkbox"],[type="radio"],[type="range"],[type="button"],[type="submit"],[type="reset"]),select,textarea{font-size:max(16px,1em)!important}
}

/* ── Botones del hero y del cierre en móvil: uno debajo del otro y del mismo ancho ── */
@media (max-width:479px){
  .ll-hero .ll-acciones,.ll-cierre .ll-acciones{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .ll-hero .ll-acciones .ll-btn,.ll-cierre .ll-acciones .ll-btn{width:100%}
}

/* ── Menú móvil: el panel entra con un desliz corto (también sin JS). Escape, tocar fuera,
   navegar y volver con «atrás» lo cierran: ll-ui.js ── */
@media (prefers-reduced-motion:no-preference){ .ll-menu[open] nav{animation:ll-menu-entra var(--d-2) var(--sale) both} }
@keyframes ll-menu-entra{from{opacity:0;transform:translateY(-8px)}}

/* ── Páginas legales: en escritorio el título acompaña la lectura ── */
@media (min-width:900px){ .ll-dos:has(>.ll-legal)>.ll-cabeza{position:sticky;top:calc(var(--header-h) + 40px)} }

/* ── Impresión y PDF: el documento completo, en blanco y negro, sin header pegajoso ni motion;
   los enlaces llevan su dirección. La cotización de la portada tiene su propia hoja (cotizador.css). ── */
@media print{
  @page{margin:16mm 14mm}
  :root{--sec-y:28px;--gutter:0px;--header-h:0px;--t-heroe:150px;--t-mega:88px;--t-h1:48px;--t-h1-doc:40px;--t-h2:30px;--t-h2-doc:26px;--t-h3:18px;--t-entrada:17px;--t-texto:15px;--t-nota:13px}
  /* Escala de papel: todo al 86 % (el texto queda en ~10 pt) para que tarjetas y tablas quepan de dos en dos. */
  html{zoom:.86}
  html,body{background:#fff!important}
  body{color:#000}
  main a,.ll-pie a{color:#000!important}
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}
  /* Lo que el motion deja a medias (opacidad, desplazamientos, pines de GSAP) se imprime completo y en su lugar. */
  main :not(svg,svg *){opacity:1!important;transform:none!important;translate:none!important;scale:none!important;rotate:none!important}
  .pin-spacer{padding:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;inset:auto!important}
  .pin-spacer>*{position:static!important;inset:auto!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important}
  /* Escenas con recorrido (alto extra + sticky): en papel vuelven a su maqueta sin JS. */
  .ll-motion .ll-vial,.ll-motion .ll-galeria--fija{height:auto!important;min-height:0!important}
  .ll-motion .ll-galeria--fija{padding-block:var(--sec-y)}
  .ll-motion .ll-vial__marco,.ll-motion .ll-galeria--fija>.ll-contenedor{position:static!important;height:auto!important;min-height:0!important;overflow:visible;display:block}
  .ll-motion .ll-vial__marco{padding:var(--sec-y) 0}
  .ll-motion .ll-vial__visual{position:relative;inset:auto;aspect-ratio:16/9}
  .ll-motion .ll-vial__textos{position:static;width:auto;margin-top:16px}
  .ll-motion .ll-vial__textos p{grid-area:auto;font-size:var(--t-h2)}
  .ll-motion .ll-vial__aviso{position:static;margin-top:8px}
  .ll-motion .ll-cinco__paso::before{content:none}
  .ll-motion .ll-proceso__esfera::after{transform:none!important}
  .ll-motion .ll-cinco__paso.is-activo{border-top:1px solid var(--linea);padding-top:22px}
  .ll-motion .ll-coa__nota.is-activo{border-top:1px solid var(--linea);padding-top:18px}
  .ll-galeria,.ll-motion .ll-galeria--fija{overflow:visible}
  /* Galería → tres por fila. En bloques en línea y no en rejilla: Chrome encima la rejilla que se parte entre páginas. */
  .ll-recientes,.ll-motion .ll-galeria--fija .ll-recientes{display:block;overflow:visible;margin:0!important;padding:0;scroll-snap-type:none}
  .ll-reciente{display:inline-block;vertical-align:top;width:31.5%;margin:0 1.5% 14px 0}
  /* Fuera: navegación, controles y lo que solo sirve en pantalla. */
  .ll-saltar,.ll-nav,.ll-header__accion,.ll-menu,.ll-pie__links,canvas,video,button,input,select,textarea,.ll-demo__acciones,.ll-vial__guia,.ll-vial__esquina,.ll-rueda__fantasma,.ll-biblio__filtros,.alta,.mbar,.indice__cotizar{display:none!important}
  /* Barra RUO, header y pie en tinta negra sobre papel; el descargo se queda. */
  .ll-ruo{background:none!important;color:#000!important;padding:0 0 6px;border-bottom:1px solid #000}
  .ll-header{position:static;background:none;border-bottom:0}
  .ll-header__in{min-height:0;padding:10px 0 0}
  .ll-marca{min-height:0}
  .ll-hero{padding:24px 0 var(--sec-y)}
  .ll-seccion,.ll-seccion+.ll-seccion{padding:var(--sec-y) 0}
  .ll-pie{background:none!important;color:#000!important;padding:16px 0 0;margin-top:24px;border-top:1px solid #000;break-inside:avoid}
  .ll-pie *{color:#000!important}
  .ll-pie__in{display:block}
  .ll-pie__in>*+*{margin-top:12px}
  .ll-pie p,.ll-pie__in>p:last-child{max-width:none;border:0;padding:0}
  .ll-pie__redes{border:0;padding:0}
  .ll-pie__redes ul{display:block}
  .ll-pie__redes a{display:inline;min-height:0;min-width:0;padding:0}
  /* Botones y chips a filete: el papel no lleva bloques negros. */
  .ll-btn{background:none!important;color:#000!important;border:1px solid #000;min-height:0;padding:4px 12px}
  .ll-nav__n,.ll-chip{background:none!important;color:#000!important}
  /* Gráficos pequeños hechos con fondo (cadena del proceso, filete, clave de la gráfica): se imprimen tal cual. */
  .ll-proceso__esfera,.ll-proceso__esfera::after,.ll-proceso__barra,.ll-proceso__barra i,.ll-filete,.ll-grafica__clave-p,.ll-grafica__clave-m,.ll-demo__barra,.ll-demo__barra i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Tablas completas, fotos a tamaño de documento. */
  .ll-tabla{overflow:visible}
  .ll-tabla table{min-width:0}
  .ll-vial__visual,.ll-cinco__foto{max-width:120mm}
  /* Preguntas: la respuesta se imprime (ll-ui.js abre los <details> antes de imprimir). */
  summary::after{content:none!important}
  /* Sin cortes feos. */
  h1,h2,h3,h4,.ll-h3,.ll-cabeza,summary{break-after:avoid;page-break-after:avoid}
  tr,figure,picture,img,.ll-vial__visual,.ll-cinco__foto,.ll-doc,.ll-doc__capa,.ll-demo,.ll-canal,.ll-ultimo,.ll-reciente,.ll-cifras>*,.ll-specs>div,.ll-pregunta,.ll-faq details,.ll-notas li,.ll-cinco__paso,.ll-proceso__paso,.ll-riesgo__prueba li{break-inside:avoid;page-break-inside:avoid}
  p,li{orphans:3;widows:3}
  /* Enlaces con su dirección: los del texto corrido y los botones. No en listas de navegación, tablas,
     tarjetas con imagen ni WhatsApp (el número va en el pie). */
  main :is(p,[class*="acciones"]) a[href^="/"]:not(:has(img))::after,main a.cta[href^="/"]::after{content:" (limitlesssupply.mx" attr(href) ")"}
  main :is(p,[class*="acciones"]) a[href^="http"]:not([href*="wa.me"],:has(img))::after,.ll-pie__redes a[href^="http"]:not([href*="wa.me"])::after{content:" (" attr(href) ")"}
  main :is(p,[class*="acciones"]) a[href^="/"]:not(:has(img))::after,main a.cta[href^="/"]::after,main :is(p,[class*="acciones"]) a[href^="http"]:not([href*="wa.me"],:has(img))::after,.ll-pie__redes a[href^="http"]:not([href*="wa.me"])::after{position:static;display:inline;inset:auto;width:auto;height:auto;background:none;border:0;transform:none;font-weight:500;font-size:.8em;overflow-wrap:anywhere;text-decoration:none}
}
/* Chrome 131+ y Safari 18.4+: el contenido de un <details> cerrado también se imprime (respaldo del JS). */
@media print{ details:not(.ll-menu)::details-content{content-visibility:visible} }