/* Cotizador (portada). Tokens, tipografía y componentes base: /assets/css/ll-base.css.
   Aquí solo lo propio del cotizador. Las clases que pinta cotizador.js (.prod, .fila, .qty, .add,
   .linea, .mini, .sum, .gancho, .tag, .doc…) conservan su nombre; cambia su aspecto. Monocromo:
   los estados se dicen con texto y peso, no con color. */

.app{display:block}
.hero.ll-hero{padding-top:clamp(40px,7vw,104px);padding-bottom:clamp(40px,6vw,88px)}
.hero .ll-cadena{margin-top:8px}
.mono{font-variant-numeric:tabular-nums}
.gate{min-height:60vh;display:grid;place-items:center;padding:48px var(--gutter)}
.gate form{display:grid;gap:12px;margin-top:20px;max-width:360px}
.gate input{min-height:48px;padding:0 16px;border:1px solid var(--gris);border-radius:999px;background:var(--blanco)}

/* ── Carrito del header ───────────────────────── */
.cart{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 18px;border-radius:999px;border:1.5px solid var(--negro);background:transparent;font:500 15px/1 var(--f);color:var(--negro);cursor:pointer;transition:background-color var(--d-1) var(--sale),color var(--d-1) var(--sale)}
.cart:hover{background:var(--negro);color:var(--blanco)}
.cart b{font-weight:800}
.cart b:empty{display:none}
.cart__corto{display:none;font-weight:800}                          /* «Pedido» pesa lo mismo vacío y con pedido */
.cart .cart__n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--negro);color:var(--blanco);font-size:13px;font-weight:800}
.cart:hover .cart__n{background:var(--blanco);color:var(--negro)}
.cart .cart__n[hidden]{display:none}
@media (max-width:599px){ #cartK{display:none} .cart__corto{display:inline} .cart{padding:0 6px 0 14px} }
@media (max-width:419px){ .cart #cartV{display:none} }
/* FE-05 / FE-03: vacío dice «Pedido», centrado y del ancho de «Cotizar» del resto del sitio: el nav no se mueve
   entre páginas. «vacío» queda para el lector de pantalla. */
.cart{position:relative}
.cart.is-vacio{justify-content:center;padding:0 18px;font-weight:800;letter-spacing:.005em}
/* El ancho lo da un «Cotizar» invisible en la misma celda (como el data-t del nav): mide lo mismo que el
   botón de las demás páginas con cualquier fuente; no se lee (texto alternativo vacío). */
.cart.is-vacio .cart__corto{display:inline-grid;justify-items:center}
.cart.is-vacio .cart__corto::after{content:"Cotizar";content:"Cotizar" / "";grid-area:1/1;height:0;overflow:hidden;visibility:hidden}
.cart.is-vacio #cartK{display:inline;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cart .cart__n .ll-rueda__fantasma,.prod__n .ll-rueda__fantasma{display:grid;place-items:center}

/* ── Hero: datos ──────────────────────────────── */
.hero__datos{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0 56px;margin-top:12px}
.hero__datos>div{border-top:2px solid var(--negro);padding-top:12px}
.hero__datos dt{font-size:14px;color:var(--grafito)}
.hero__datos dd{font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hero__datos dd small{display:block;font-weight:500;font-size:14px;letter-spacing:0;color:var(--grafito);margin-top:4px}

/* ── Pasos: retirados de la vista (repetían la entrada del hero). El bloque sigue en el HTML
   porque cotizador.js lo usa; se oculta aquí. ── */
.pasos{display:none!important;padding:0 var(--gutter) clamp(40px,6vw,64px)}
.pasos__in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;border-top:1px solid var(--linea);padding-top:28px}
.paso__n{display:none}
.paso h3{font-weight:800;font-size:18px;line-height:1.25;margin-bottom:6px}
.paso p{font-size:15px;line-height:1.55;color:var(--grafito);max-width:40ch}
.pasos__ocultar{max-width:var(--ancho);margin:12px auto 0}
.pasos__boton{min-height:44px;padding:0;background:none;border:0;font:500 14px/1 var(--f);color:var(--grafito);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ── Condiciones del pedido (lista tipográfica) ── */
.trust{padding:0 var(--gutter) clamp(48px,7vw,80px)}
.trust--despues{padding-top:clamp(56px,8vw,96px);border-top:1px solid var(--linea)}
.trust__in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.trust .t{border-top:2px solid var(--negro);padding-top:14px}
.trust .t b{display:block;font-size:16px;margin-bottom:6px}
.trust .t span{display:block;font-size:14px;line-height:1.5;color:var(--grafito)}

/* ── Catálogo ─────────────────────────────────── */
.catalogo{padding:clamp(24px,4vw,48px) var(--gutter) clamp(64px,9vw,112px);border-top:1px solid var(--linea)}
.catalogo__in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.tools{position:sticky;top:var(--header-h);z-index:20;background:var(--crema);padding:12px 0;display:grid;gap:12px;border-bottom:1px solid var(--linea)}
.buscador{position:relative}
.buscador input{width:100%;min-height:52px;padding:0 52px 0 20px;border-radius:999px;border:1px solid var(--gris);background:var(--blanco);font-size:16px}
.buscador input:focus-visible{outline:2px solid var(--negro);outline-offset:2px}
.buscador .x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:0;background:none;font-size:22px;line-height:1;color:var(--grafito);display:none;cursor:pointer}
.buscador.has .x{display:block}
/* Categorías en una sola fila deslizable en todos los anchos: la barra pegajosa no se come la pantalla. */
.filtros{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:var(--gutter)}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea-2);background:transparent;font:500 14px/1 var(--f);color:var(--grafito);white-space:nowrap;cursor:pointer;transition:color var(--d-1) var(--sale),border-color var(--d-1) var(--sale)}
.filtro:hover{color:var(--negro);border-color:var(--negro)}
.filtro[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:var(--blanco);font-weight:800}
.reglas{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font-size:14px;color:var(--grafito)}
.reglas b{color:var(--negro)}

.cat-h{display:flex;align-items:baseline;gap:14px;margin:40px 0 16px}
.cat-h h3{font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em}
.cat-h span{font-size:14px;color:var(--grafito)}
/* FE-05: tarjetas vecinas del mismo alto (sin huecos) y el enlace a la ficha siempre abajo. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;align-items:stretch}
.prod{position:relative;display:flex;flex-direction:column;background:transparent;border:1px solid var(--linea-2);border-radius:var(--radio);overflow:hidden;transition:border-color var(--d-1) var(--sale),transform var(--d-1) var(--sale)}
.prod:focus-within{border-color:var(--negro)}
/* M8: el hover solo donde hay puntero fino (en táctil se quedaba pegado): borde negro y sube 3 px. */
@media (hover:hover) and (pointer:fine){ .prod:hover{border-color:var(--negro);transform:translateY(-3px)} }
/* M8: entrada ligada al scroll, sin JS; escalonada por columna en escritorio y más corta en móvil. Mueve
   «translate» (no «transform», que es del hover). Sin soporte o con movimiento reducido, quietas.
   El rango se mide en px desde el borde inferior: una tarjeta alta (Retatrutida, 10 filas) no queda a medias. */
@keyframes ll-prod-entra{from{opacity:0;translate:0 var(--ll-prod-sube,16px)}to{opacity:1;translate:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .prod{animation:ll-prod-entra linear both;animation-timeline:view();animation-range:entry 0% entry 140px}
    @media (min-width:600px){ .grid>.prod:nth-child(2n){animation-range:entry 24px entry 164px} }   /* la rejilla llega a 2 columnas */
    @media (max-width:599px){ .prod{--ll-prod-sube:8px;animation-range:entry 0% entry 96px} }
  }
}
.prod.has{border:1.5px solid var(--negro)}
.prod__h{padding:18px 18px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.prod__h h4{font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.prod__h small{display:block;margin-top:4px;font-size:14px;color:var(--grafito)}
.prod__n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--negro);color:var(--blanco);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.prod__n[hidden]{display:none}
.fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:14px 18px;border-top:1px solid var(--linea)}
.fila.on{background:var(--blanco)}
.fila__spec{grid-column:1;grid-row:1;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.fila__precio{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:2px}
.fila__precio .p{font-weight:800;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fila__precio small{font-size:13px;color:var(--grafito);font-variant-numeric:tabular-nums}
.fila__hint{grid-column:1;grid-row:3;margin-top:4px;font-size:13px;line-height:1.45;color:var(--grafito);text-wrap:pretty}
.fila__hint b,.fila__hint.ok{color:var(--negro);font-weight:800}
.fila__hint:empty{display:none}
.fila__act{grid-column:2;grid-row:1/4;display:flex;justify-content:flex-end}
.tag{display:inline-block;padding:2px 8px;border:1.5px solid var(--negro);border-radius:999px;font-size:12px;font-weight:800;color:var(--negro);font-variant-numeric:tabular-nums;white-space:nowrap}
/* FE-05: «Agregar 5» de línea; se llena al pasar el puntero. El único botón lleno de la vista es el del pedido. */
.add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--negro);background:transparent;color:var(--negro);font:800 15px/1 var(--f);white-space:nowrap;cursor:pointer;transition:background-color var(--d-1) var(--sale),color var(--d-1) var(--sale)}
.add:hover{background:var(--negro);color:var(--blanco)}
.add svg{display:none}
.qty{display:inline-grid;grid-template-columns:44px 48px 44px;align-items:center;height:44px;box-sizing:content-box;border-radius:999px;border:1.5px solid var(--negro);background:var(--blanco);overflow:hidden}
.qty button{height:100%;border:0;background:none;font-size:20px;line-height:1;color:var(--negro);cursor:pointer}
.qty button:hover{background:var(--crema)}
.qty button:focus-visible,.qty input:focus-visible,.mini button:focus-visible{outline-offset:-3px}
.qty input{height:100%;width:100%;border:0;background:none;text-align:center;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;min-width:0}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.masWrap{display:flex;justify-content:center;margin-top:32px}
.mas{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-height:56px;padding:12px 28px;border-radius:999px;border:1.5px solid var(--negro);background:transparent;font:800 15px/1.2 var(--f);cursor:pointer}
.mas:hover{background:var(--negro);color:var(--blanco)}
.mas small{font-size:13px;font-weight:500;color:inherit;opacity:.8}
.vacio{padding:48px 20px;text-align:center;color:var(--grafito);border:1px solid var(--linea-2);border-radius:var(--radio)}
.vacio b{display:block;color:var(--negro);font-size:19px;margin-bottom:6px}

/* ── Pedido: una hoja de cotización ──────────── */
.pedido{position:sticky;top:calc(var(--header-h) + 16px);background:var(--blanco);border:1px solid var(--negro);border-radius:var(--radio-doc);display:grid;grid-template-rows:auto auto 1fr auto;max-height:calc(100vh - var(--header-h) - 32px);overflow:auto}
.pedido__h{grid-row:1} .pedido__enlace{grid-row:2} .pedido__b{grid-row:3} .pedido__f{grid-row:4}
/* FE-05: sin pedido, el panel solo dice cómo empezar (sin campos ni botones apagados). */
.pedido.is-vacio :is(.sum,.gancho,.campos,.acciones){display:none}
/* F3 y F5: de qué cotización parte y a cuál reemplaza. */
.pedido__nota{flex-basis:100%;font-size:13px;line-height:1.45;color:var(--grafito)}
.pedido__nota[hidden]{display:none}
/* F3: un enlace trae otro pedido; se pregunta antes de reemplazar (nunca se fusiona). */
.pedido__enlace{margin:16px 20px 0;padding:14px;border:1.5px solid var(--negro);border-radius:10px;display:grid;gap:12px;font-size:14px;line-height:1.45;color:var(--negro)}
.pedido__enlace[hidden]{display:none}
.pedido__enlace b{font-weight:800}
.pedido__enlace .dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pedido__enlace .ll-btn{padding-inline:12px}
@media (max-width:479px){ .pedido__enlace .dos{grid-template-columns:1fr} }
.pedido__h{padding:20px 20px 14px;border-bottom:2px solid var(--negro);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pedido__h h2{font-weight:800;font-size:22px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.pedido__id{font-size:13px;color:var(--grafito)}
.pedido__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;padding:0;font-size:14px;color:var(--grafito);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pedido__link:hover{color:var(--negro)}
.pedido__cerrar{display:none}
.pedido__b{padding:4px 20px}
.linea{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.linea__n{grid-column:1;grid-row:1;font-weight:800;font-size:15px;line-height:1.35}
.linea__d{grid-column:1;grid-row:2;margin-top:6px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:13px;color:var(--grafito)}
.linea__d>button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;padding:0;font-size:13px;color:var(--grafito);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linea__d>button:hover{color:var(--negro)}
.mini{display:inline-grid;grid-template-columns:44px auto 44px;align-items:center;height:44px;box-sizing:content-box;border-radius:999px;border:1px solid var(--linea-2);overflow:hidden}
.mini button{height:100%;border:0;background:none;color:var(--negro);font-size:17px;line-height:1;cursor:pointer}
.mini button:hover{background:var(--crema)}
.mini span{padding:0 4px;font-weight:800;font-size:14px;color:var(--negro);font-variant-numeric:tabular-nums}
.linea__t{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.pedido__vacio{padding:32px 8px;text-align:center;color:var(--grafito);font-size:14px;max-width:32ch;margin:0 auto}
.pedido__vacio b{display:block;color:var(--negro);font-size:17px;margin-bottom:6px}
.pedido__f{padding:16px 20px 20px;border-top:1px solid var(--linea);display:grid;gap:14px}
.sum{display:grid;gap:8px;font-size:15px}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .k{color:var(--grafito)}
.sum .v{font-variant-numeric:tabular-nums}
.sum .ok{font-weight:800}
.sum .total{margin-top:6px;padding-top:12px;border-top:2px solid var(--negro);align-items:baseline;font-weight:800;font-size:17px}
.sum .total .v{font-size:30px;letter-spacing:-.02em}
.gancho{font-size:14px;line-height:1.5;padding:12px 14px;border:1px solid var(--linea-2);border-radius:10px;color:var(--grafito)}
.gancho b,.gancho.ok{color:var(--negro);font-weight:800}
.gancho.warn{color:var(--negro);border-color:var(--negro)}
/* M4: la barra avanza con transform (no con width) y el texto cambia en su lugar. */
.gancho .barra{height:4px;margin-top:10px;border-radius:2px;background:var(--linea);overflow:hidden}
.gancho .barra i{display:block;height:100%;width:100%;background:var(--negro);transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--sale)}
.gancho__t{display:block;text-wrap:pretty}
.gancho.warn .barra{display:none}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.campos .lbl{grid-column:1/-1;font-size:13px;color:var(--grafito)}
.campos :is(input:not([type="checkbox"]),select){min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--gris);background:var(--blanco);font:400 15px/1.2 var(--f);color:var(--negro);min-width:0;width:100%}
.campos select{padding-right:10px;cursor:pointer}
.campos select:has(option[value=""]:checked){color:var(--grafito)}
.campos :is(input,select):focus-visible{outline:2px solid var(--negro);outline-offset:1px}
.campos .full{grid-column:1/-1}
/* F4: casilla opcional. La caja visible es de 24 px dentro de un objetivo de 44 px (borde transparente);
   marcada, un cuadro negro: sin palomita. */
.campos__ruo{display:flex;align-items:center;gap:2px;min-height:44px;font-size:14px;line-height:1.35;color:var(--negro);cursor:pointer}
.campos__ruo input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:44px;margin:0 0 0 -10px;border:10px solid transparent;border-radius:15px;background:var(--blanco) padding-box;box-shadow:inset 0 0 0 1.5px var(--negro);cursor:pointer}
.campos__ruo input:checked{background-color:var(--negro);box-shadow:inset 0 0 0 1.5px var(--negro),inset 0 0 0 6px var(--blanco)}
.campos__ruo input:focus-visible{outline:2px solid var(--negro);outline-offset:-8px}
.acciones{display:grid;gap:8px}
.acciones .ll-btn{width:100%}
.acciones .dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.acciones .dos .dos__ancho{grid-column:1/-1}
.ll-btn.is-off,.ll-btn[disabled]{opacity:.32;pointer-events:none}
.fina{font-size:13px;line-height:1.5;color:var(--grafito)}

/* ── Archivo de COA ───────────────────────────── */
.archivo{border-top:1px solid var(--linea)}
.coa__resumen{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0 56px;margin-bottom:40px}
.coa__resumen>div{border-top:2px solid var(--negro);padding-top:12px}
.coa__resumen dt{font-size:14px;color:var(--grafito)}
.coa__resumen dd{font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.coa__resumen dd small{display:block;font-weight:500;font-size:14px;letter-spacing:0;color:var(--grafito)}
.coa-grupo{margin-bottom:40px}
.coa-grupo__h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-top:14px;border-top:1px solid var(--linea)}
.coa-grupo__h h3{font-weight:800;font-size:20px}
.coa-grupo__h span{font-size:14px;color:var(--grafito)}
.coa-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.doc__link{display:block;border-radius:var(--radio-doc);overflow:hidden;background:var(--blanco);border:1px solid var(--linea-2);transition:border-color var(--d-1) var(--sale)}
.doc__link:hover,.doc__link:focus-visible{border-color:var(--negro)}
.doc__img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;background:var(--crema)}
.doc__link.sin-img .doc__img{display:none}
.doc__falta{display:none;aspect-ratio:3/4;place-items:center;padding:20px;background:var(--crema)}
.doc__link.sin-img .doc__falta{display:grid}
.doc__falta span{max-width:20ch;text-align:center;font-size:13px;color:var(--grafito)}
.doc__pie{display:flex;flex-direction:column;gap:3px;padding:14px;border-top:1px solid var(--linea)}
.doc__titulo{font-weight:800;font-size:14px}
.doc__meta,.doc__medido{font-size:13px;color:var(--grafito);font-variant-numeric:tabular-nums}
.doc__badge{margin-top:2px;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.doc__abrir{margin-top:6px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.coa__nota{margin-top:8px}

/* ── Pie: contenido que escribía el JS antiguo ── */
.pie__legal{display:grid;gap:16px}
.pie__legal .kicker{font:800 12px/1.4 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--blanco)}

/* ── Aviso y barra móvil ──────────────────────── */
/* FE-03: el aviso usa el ancho de la pantalla (antes, la mitad) y se parte en líneas parejas. */
.aviso{position:fixed;left:16px;right:16px;bottom:calc(28px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:fit-content;max-width:min(520px,calc(100vw - 32px));transform:translateY(16px);z-index:200;background:var(--negro);color:var(--blanco);padding:14px 22px;border-radius:14px;font-size:15px;font-weight:500;line-height:1.35;text-align:center;text-wrap:balance;opacity:0;pointer-events:none;transition:opacity var(--d-2) var(--sale),transform var(--d-2) var(--sale)}
.aviso.on{opacity:1;transform:none}
.mbar{display:none}

@media (max-width:1080px){
  .catalogo__in{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
  .trust__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
}
@media (max-width:900px){
  .tools{padding:10px 0}
  .filtros{margin:0 calc(-1*var(--gutter));padding:0 var(--gutter)}
  .pasos__in{grid-template-columns:1fr;gap:18px}
  .catalogo__in{grid-template-columns:1fr;gap:0}
  .catalogo{padding-bottom:112px}
  .coa-lista{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  /* Cerrada, la hoja sale del orden de tabulación y del árbol de accesibilidad (visibility). */
  .pedido{position:fixed;inset:auto 0 0 0;height:92vh;height:92dvh;max-height:none;overscroll-behavior:contain;border-radius:18px 18px 0 0;border-width:1px 0 0;z-index:150;transform:translateY(105%);visibility:hidden;transition:transform var(--d-2) var(--sale),visibility 0s linear var(--d-2)}
  .pedido.open{transform:none;visibility:visible;transition-delay:0s}
  /* FE-03: con la hoja abierta la página de atrás no se desplaza y queda tras un fondo plano al 28 % (el del filete). */
  html.ll-hoja{overflow:hidden}
  html.ll-hoja body::after{content:"";position:fixed;inset:0;z-index:145;background:var(--linea-2)}
  .pedido__h{padding-top:16px}
  .pedido__cerrar{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--negro);background:transparent;font:800 14px/1 var(--f);cursor:pointer}
  /* FE-03: la barra inferior sale solo con pedido; sin él no ocupa lugar ni se enfoca. */
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;align-items:center;justify-content:space-between;gap:14px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:var(--crema);border-top:1px solid var(--negro);transform:translateY(110%);visibility:hidden;transition:transform var(--d-2) var(--sale),visibility 0s linear var(--d-2)}
  .mbar.is-on{transform:none;visibility:visible;transition-delay:0s}
  html:has(.mbar:not(.is-on)){scroll-padding-bottom:0}
  body:has(.mbar.is-on) .ll-pie{padding-bottom:calc(40px + 88px + env(safe-area-inset-bottom,0px))}
  .mbar__k{font-size:13px;color:var(--grafito)}
  .mbar__v{font-weight:800;font-size:20px}
  html:not(.ll-hoja) body:has(.mbar.is-on) .aviso{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  html.ll-hoja .aviso{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px));transform:translateY(-16px)}
  html.ll-hoja .aviso.on{transform:none}
  /* COMP-05: iOS amplía la página al enfocar un campo de menos de 16 px. */
  .campos :is(input:not([type="checkbox"]),select),.qty input{font-size:16px}
  /* M4: más corto en móvil. */
  .gancho .barra i{transition-duration:var(--d-2)}
}
@media (max-width:599px){
  .trust__in{grid-template-columns:1fr}
  .hero__datos,.coa__resumen{gap:0 32px}
}

/* ── Cotización imprimible (PDF) ───────────────── */
#printDoc{display:none}
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#111214}
  .ll-saltar,.ll-ruo,.ll-header,.app,.aviso,.gate{display:none!important}
  #printDoc{display:block;font-family:var(--f);font-size:12px;color:#111214}
  #printDoc .ph{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111214;padding-bottom:12px;margin-bottom:16px}
  #printDoc .wordmark{font-size:14px;color:#111214}
  #printDoc .wordmark__svg{display:block;height:1em;width:auto;fill:currentColor}
  #printDoc .pm{text-align:right;font-size:11.5px;line-height:1.5;color:#3A3A3C}
  #printDoc .pm b{color:#111214}
  #printDoc .pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;font-size:11.5px}
  #printDoc .pc .eyebrow{font-size:10px;font-weight:800;color:#3A3A3C;margin-bottom:3px}
  #printDoc table{width:100%;border-collapse:collapse;margin-bottom:12px}
  #printDoc th{text-align:left;font-size:10px;font-weight:800;padding:6px 8px;border-bottom:1.5px solid #111214}
  #printDoc td{padding:7px 8px;border-bottom:1px solid rgb(17 18 20 / .16);vertical-align:top}
  #printDoc td.r,#printDoc th.r{text-align:right;font-variant-numeric:tabular-nums}
  #printDoc td small{color:#3A3A3C}
  #printDoc .pt{margin-left:auto;width:280px;font-size:12px}
  #printDoc .pt div{display:flex;justify-content:space-between;padding:4px 8px}
  #printDoc .pt .total{border-top:1.5px solid #111214;font-weight:800;font-size:14px;margin-top:4px;padding-top:8px}
  #printDoc .pf{margin-top:22px;font-size:10.5px;color:#3A3A3C;line-height:1.5;border-top:1px solid rgb(17 18 20 / .16);padding-top:12px}
  #printDoc .pf ul{margin:4px 0 8px;padding-left:16px;list-style:disc}
  #printDoc .pf__enlace{margin:0 0 8px;overflow-wrap:anywhere}
}

/* ── Segunda pasada: dos acciones por tarjeta y lo incluido junto al botón final ── */
.prod__coa{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0 -4px;font-size:14px;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prod__coa::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--negro);flex:none}
.prod__coa:hover{text-decoration-thickness:2px}
.prod__pie{border-top:1px solid var(--linea);padding:2px 18px 6px}
.prod__ficha{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}
.prod__ficha:hover{text-decoration-thickness:2px}
.pedido__incluye{font-size:14px;line-height:1.45;color:var(--negro);margin-top:12px}
.pedido__similar{font-size:14px;line-height:1.45;color:var(--grafito);margin-top:6px;font-weight:800}
.fila__coa{display:inline-flex;align-items:center;min-height:44px;margin-left:8px;font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px;vertical-align:middle}