/* =====================================================================
   LA BODEGA DEL JEANS — ESTILOS
   Identidad: negro, blanco y gris. Las fotografías conservan su color.
   ===================================================================== */

:root {
    --negro: #0a0a0a;
    --carbon: #131313;
    --grafito: #1d1d1d;
    --linea-osc: #2b2b2b;
    --gris-7: #444;
    --gris-6: #5e5e5e;
    --gris-5: #7c7c7c;
    --gris-4: #a3a3a3;
    --gris-3: #c4c4c4;
    --gris-2: #dfdfdf;
    --gris-1: #ededed;
    --claro: #f5f5f5;
    --blanco: #fff;

    --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --f-firma: 'Kaushan Script', 'Segoe Script', cursive;

    --radio: 4px;
    --radio-g: 10px;
    --alto-cabecera: 60px;
    --alto-aviso: 28px;
    --sombra: 0 18px 50px rgba(0, 0, 0, .18);
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1024px) { :root { --alto-cabecera: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
    margin: 0;
    font-family: var(--f-texto);
    font-size: 16px;
    line-height: 1.55;
    color: var(--negro);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blanco); padding: 10px 14px; border-radius: var(--radio); }
.saltar:focus { top: 12px; }

.contenedor { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .contenedor { padding: 0 32px; } }
@media (min-width: 1280px) { .contenedor { padding: 0 48px; } }

.solo-movil { display: inline-flex; }
.solo-movil-tableta { display: inline-flex; }
@media (min-width: 1024px) { .solo-movil, .solo-movil-tableta { display: none !important; } }

/* Iconos */
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tipografía ---------- */
.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gris-6); }
.eyebrow--claro { color: var(--gris-3); }
.titulo-seccion { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 6vw, 60px); line-height: .95; letter-spacing: .01em; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 26px; border-radius: 999px;
    font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
    border: 1.5px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn--claro { background: var(--blanco); color: var(--negro); }
.btn--claro:hover { background: var(--gris-2); }
.btn--oscuro { background: var(--negro); color: var(--blanco); }
.btn--oscuro:hover { background: var(--gris-7); }
.btn--contorno { border-color: var(--negro); color: var(--negro); }
.btn--contorno:hover, .btn--contorno.btn--oscuro { background: var(--negro); color: var(--blanco); }
.btn--contorno-claro { border-color: rgba(255, 255, 255, .7); color: var(--blanco); }
.btn--contorno-claro:hover { background: var(--blanco); color: var(--negro); }
.btn--chico { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--bloque { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.btn-texto { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.btn-texto .ic { width: 16px; height: 16px; }
.icono-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; transition: background-color .2s; }
.icono-btn:hover { background: rgba(127, 127, 127, .16); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.enlace-flecha .ic { width: 16px; height: 16px; transition: transform .2s; }
.enlace-flecha:hover .ic { transform: translateX(3px); }

.estado { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; color: var(--gris-4); }
.estado--ok { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.pendiente { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--gris-4); color: var(--gris-5); vertical-align: middle; margin-left: 6px; white-space: nowrap; }

/* ---------- Logo ---------- */
.logo-svg { display: block; width: 100%; height: 100%; }
.logo-slot { display: inline-flex; color: var(--blanco); }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; }
.logo-slot[data-fondo="claro"] { color: var(--negro); }

/* ---------- Aviso demo ---------- */
.aviso-demo { background: var(--gris-1); color: var(--gris-7); font-size: 12px; text-align: center; height: var(--alto-aviso); display: flex; align-items: center; justify-content: center; padding: 0 12px; letter-spacing: .02em; }
.aviso-demo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--negro); color: var(--blanco); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cabecera__fila { height: var(--alto-cabecera); display: flex; align-items: center; gap: 8px; }
.cabecera__logo { width: 50px; height: 50px; flex: none; }
@media (min-width: 1024px) { .cabecera__logo { width: 60px; height: 60px; } }
.cabecera__nav { display: none; }
@media (min-width: 1024px) {
    .cabecera__nav { display: flex; gap: 30px; margin-left: 40px; font-size: 14px; font-weight: 500; }
    .cabecera__nav a { position: relative; padding: 8px 0; color: var(--gris-3); transition: color .2s; }
    .cabecera__nav a:hover, .cabecera__nav a.activo { color: var(--blanco); }
    .cabecera__nav a.activo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--blanco); }
}
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.btn-ia { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin-right: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); font-size: 13px; font-weight: 500; transition: background-color .2s, color .2s; }
.btn-ia .ic { width: 16px; height: 16px; }
.btn-ia:hover { background: var(--blanco); color: var(--negro); }
.btn-ia b { font-weight: 700; }
@media (max-width: 420px) { .btn-ia__txt { display: none; } .btn-ia { padding: 0 11px; gap: 5px; } }
.contador { position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }

/* ---------- Paneles laterales (menú, bolsa, favoritos) ---------- */
.panel-lateral { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; }
.panel-lateral.abierto { visibility: visible; pointer-events: auto; }
.panel-lateral__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s; }
.panel-lateral.abierto .panel-lateral__fondo { opacity: 1; }
.panel-lateral__caja { position: absolute; top: 0; right: 0; height: 100%; height: 100dvh; width: min(440px, 100%); background: var(--blanco); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--ease); }
.panel-lateral--izq .panel-lateral__caja { right: auto; left: 0; transform: translateX(-100%); width: min(360px, 88%); }
.panel-lateral.abierto .panel-lateral__caja { transform: none; }
.panel-lateral__caja--oscura { background: var(--negro); color: var(--blanco); padding-bottom: 24px; }
.panel-lateral__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--gris-1); }
.panel-lateral__caja--oscura .panel-lateral__cabeza { border-color: var(--linea-osc); }
.panel-lateral__cabeza h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 26px; letter-spacing: .02em; }
.panel-lateral__cabeza h2 span { font-family: var(--f-texto); font-size: 14px; color: var(--gris-5); letter-spacing: 0; margin-left: 4px; }
.panel-lateral__cuerpo { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.panel-lateral__pie { border-top: 1px solid var(--gris-1); padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; justify-items: center; }
.fila-total { width: 100%; display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.fila-total strong { font-size: 20px; }
.nota { font-size: 12.5px; color: var(--gris-6); width: 100%; }

.logo-slot--menu { width: 54px; height: 54px; }
.menu-movil__nav { display: grid; padding: 12px 24px 20px; }
.menu-movil__nav a { font-family: var(--f-display); text-transform: uppercase; font-size: 34px; line-height: 1.15; padding: 6px 0; border-bottom: 1px solid var(--linea-osc); }
.panel-lateral__caja--oscura > .btn { margin: 4px 24px 0; width: auto; }
.menu-movil__pie { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 22px 24px 0; color: var(--gris-3); font-size: 14px; }

/* Ítems de bolsa y favoritos */
.item-bolsa { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--gris-1); }
.item-bolsa img { width: 84px; height: 108px; object-fit: cover; border-radius: var(--radio); background: var(--gris-1); }
.item-bolsa__info { display: flex; flex-direction: column; min-width: 0; }
.item-bolsa__nombre { font-weight: 600; font-size: 15px; line-height: 1.3; }
.item-bolsa__meta { font-size: 13px; color: var(--gris-6); margin-top: 3px; }
.item-bolsa__fila { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--gris-2); border-radius: 999px; }
.cantidad button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.cantidad button:hover { background: var(--gris-1); }
.cantidad .ic { width: 14px; height: 14px; }
.cantidad span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; }
.item-bolsa__quitar { font-size: 12.5px; color: var(--gris-6); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; margin-top: 6px; }
.item-bolsa__precio { font-weight: 700; font-size: 15px; }
.vacio { text-align: center; padding: 60px 10px; color: var(--gris-6); display: grid; justify-items: center; gap: 14px; }
.vacio .ic { width: 38px; height: 38px; stroke-width: 1.2; color: var(--gris-4); }
.vacio strong { color: var(--negro); font-size: 17px; }

/* ---------- Búsqueda ---------- */
.busqueda { position: fixed; inset: 0; z-index: 65; visibility: hidden; }
.busqueda.abierto { visibility: visible; }
.busqueda__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s; }
.busqueda.abierto .busqueda__fondo { opacity: 1; }
.busqueda__caja { position: relative; z-index: 1; background: var(--blanco); padding: 18px 0 26px; max-height: 88dvh; overflow-y: auto; transform: translateY(-16px); opacity: 0; transition: transform .3s var(--ease), opacity .25s; }
.busqueda.abierto .busqueda__caja { transform: none; opacity: 1; }
.busqueda__campo { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--negro); padding-bottom: 6px; }
.busqueda__campo input { flex: 1; border: 0; outline: 0; font-size: 20px; padding: 10px 0; background: transparent; min-width: 0; }
.busqueda__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.busqueda__sugerencias button { border: 1px solid var(--gris-2); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.busqueda__sugerencias button:hover { border-color: var(--negro); }
.busqueda__resultados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .busqueda__resultados { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .busqueda__resultados { grid-template-columns: repeat(6, 1fr); } }
.resultado { display: grid; gap: 8px; font-size: 14px; }
.resultado img { aspect-ratio: 3/4; object-fit: cover; width: 100%; border-radius: var(--radio); background: var(--gris-1); }
.resultado strong { font-weight: 600; line-height: 1.3; }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: calc(100svh - var(--alto-cabecera) - var(--alto-aviso)); background: var(--negro); color: var(--blanco); overflow: hidden; display: flex; align-items: flex-end; }
@media (min-width: 768px) { .portada { min-height: min(860px, calc(100svh - var(--alto-cabecera) - var(--alto-aviso))); min-height: max(620px, min(860px, calc(100svh - var(--alto-cabecera) - var(--alto-aviso)))); align-items: center; } }
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(.15) contrast(1.05); }
.portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .15) 0%, rgba(10, 10, 10, .2) 35%, rgba(10, 10, 10, .9) 70%, var(--negro) 100%); }
/* Tableta y computador: la foto ocupa la derecha y el texto queda sobre negro, como en una portada editorial */
@media (min-width: 768px) {
    .portada__foto { left: auto; width: 62%; object-position: 50% 0%; }
    .portada__velo { left: auto; width: 62%; background: linear-gradient(90deg, var(--negro) 0%, var(--negro) 4%, rgba(10, 10, 10, .6) 30%, rgba(10, 10, 10, 0) 60%), linear-gradient(0deg, rgba(10, 10, 10, .55), transparent 35%); }
}
@media (min-width: 1280px) { .portada__foto, .portada__velo { width: 58%; } }
.portada__contenido { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 768px) { .portada__contenido { padding-top: 80px; padding-bottom: 80px; } }
.portada__titulo { margin: 14px 0 18px; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .86; }
.portada__titulo-sup { display: block; font-size: clamp(40px, 9vw, 84px); letter-spacing: .01em; }
.portada__titulo-jeans { display: block; font-size: clamp(110px, 28vw, 230px); letter-spacing: .005em; background: linear-gradient(180deg, #fff 30%, #9d9d9d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: -2px; }
.portada__lema { display: block; font-family: var(--f-firma); text-transform: none; font-size: clamp(38px, 8vw, 66px); line-height: 1; margin-top: -0.12em; margin-left: .3em; transform: rotate(-4deg); transform-origin: left; }
.portada__texto { max-width: 440px; font-size: 17px; color: #e4e4e4; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 420px) { .portada__botones .btn { flex: 1 1 100%; } }
.portada__destacado { display: none; }
@media (min-width: 1100px) {
    .portada__destacado { display: block; position: absolute; z-index: 3; right: 6%; bottom: 12%; width: 200px; background: var(--blanco); color: var(--negro); border-radius: var(--radio-g); padding: 10px; box-shadow: var(--sombra); transition: transform .25s var(--ease); }
    .portada__destacado:hover { transform: translateY(-4px); }
    .portada__destacado img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
    .portada__destacado .etiqueta { position: static; display: inline-block; margin: 10px 0 2px; }
    .portada__destacado strong { display: block; font-size: 15px; font-weight: 600; }
    .portada__destacado span.precio { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-top: 4px; }
    .portada__destacado span.precio b { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--negro); color: var(--blanco); border-radius: 6px; }
    .portada__destacado .ic { width: 14px; height: 14px; }
}

/* ---------- Beneficios ---------- */
.beneficios { background: var(--blanco); border-bottom: 1px solid var(--gris-1); }
.beneficio > div { min-width: 0; }
.beneficio--pendiente span { font-style: italic; }
.beneficios__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 1024px) { .beneficios__fila { grid-template-columns: repeat(4, 1fr); padding-top: 28px; padding-bottom: 28px; } }
.beneficio { display: flex; gap: 12px; align-items: flex-start; }
.beneficio .ic { width: 26px; height: 26px; stroke-width: 1.4; margin-top: 2px; }
.beneficio strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.beneficio span { display: block; font-size: 13px; color: var(--gris-6); line-height: 1.35; margin-top: 2px; }

/* ---------- Secciones ---------- */
.seccion { padding: 56px 0; }
@media (min-width: 1024px) { .seccion { padding: 88px 0; } }
.seccion--clara { background: var(--claro); }
.seccion + .seccion--clara { padding-top: 0; }
.seccion__cabeza { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.seccion__linea { flex: 1; height: 1px; background: var(--gris-3); margin-bottom: 14px; display: none; }
@media (min-width: 768px) { .seccion__linea { display: block; } }
.seccion__cabeza .enlace-flecha { margin-left: auto; margin-bottom: 8px; }

/* ---------- Categorías ---------- */
.categorias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .categorias { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1280px) { .categorias { grid-template-columns: repeat(6, 1fr); } }
.categoria { position: relative; aspect-ratio: 3/4; border-radius: var(--radio-g); overflow: hidden; background: var(--carbon); color: var(--blanco); isolation: isolate; }
.categoria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: -2; }
.categoria::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); z-index: -1; }
.categoria:hover img { transform: scale(1.04); }
.categoria__texto { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.categoria__texto h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 4vw, 36px); line-height: 1; }
.categoria__texto p { font-size: 13px; color: var(--gris-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.categoria__texto .ic { width: 14px; height: 14px; }

/* ---------- Catálogo ---------- */
.catalogo { scroll-margin-top: var(--alto-cabecera); }
.catalogo__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.catalogo__nota { font-size: 13px; color: var(--gris-6); margin-top: 8px; }
.catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 0; border-top: 1px solid var(--gris-2); border-bottom: 1px solid var(--gris-2); margin-bottom: 24px; position: sticky; top: var(--alto-cabecera); z-index: 20; background: var(--claro); }
.chips-categoria { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; order: 3; width: 100%; padding-bottom: 2px; }
.chips-categoria::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .chips-categoria { order: 0; width: auto; } }
.chip { flex: none; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gris-3); font-size: 14px; font-weight: 500; background: var(--blanco); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--negro); }
.chip[aria-selected="true"], .chip.activo { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.catalogo__resultados { font-size: 14px; color: var(--gris-6); margin-left: auto; }
.selector-orden { position: relative; display: inline-flex; align-items: center; }
.selector-orden select { appearance: none; height: 42px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--gris-3); background: var(--blanco); font-size: 14px; font-weight: 500; cursor: pointer; }
.selector-orden .ic { position: absolute; right: 14px; width: 16px; height: 16px; pointer-events: none; }
.catalogo__cuerpo { display: grid; gap: 32px; }
@media (min-width: 1024px) { .catalogo__cuerpo { grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } }

/* Filtros */
.filtros__caja { background: var(--claro); }
@media (min-width: 1024px) { .filtros { position: sticky; top: calc(var(--alto-cabecera) + 90px); max-height: calc(100vh - var(--alto-cabecera) - 110px); overflow-y: auto; scrollbar-width: thin; } .filtros__fondo { display: none; } .filtros__pie { padding-top: 16px; } }
@media (max-width: 1023px) {
    .filtros { position: fixed; inset: 0; z-index: 62; visibility: hidden; }
    .filtros.abierto { visibility: visible; }
    .filtros__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s; }
    .filtros.abierto .filtros__fondo { opacity: 1; }
    .filtros__caja { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; background: var(--blanco); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .35s var(--ease); }
    .filtros.abierto .filtros__caja { transform: none; }
    .filtros__cabeza { padding: 14px 12px 10px 24px; border-bottom: 1px solid var(--gris-1); }
    .filtros__grupos { overflow-y: auto; padding: 0 24px; flex: 1; overscroll-behavior: contain; }
    .filtros__pie { display: flex; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gris-1); }
    .filtros__pie .btn { flex: 1; }
}
.filtros__cabeza { display: flex; align-items: center; justify-content: space-between; }
.filtros__cabeza h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 24px; letter-spacing: .02em; }
.filtro { border-bottom: 1px solid var(--gris-2); padding: 16px 0; }
.filtro legend, .filtro h4 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; padding: 0; }
.filtro fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.op-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.op-check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--gris-5); border-radius: 4px; display: grid; place-items: center; margin: 0; flex: none; }
.op-check input:checked { background: var(--negro); border-color: var(--negro); }
.op-check input:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.op-check small { margin-left: auto; color: var(--gris-5); font-size: 13px; }
.op-tallas { display: flex; flex-wrap: wrap; gap: 6px; }
.op-talla { min-width: 44px; height: 40px; padding: 0 8px; border: 1px solid var(--gris-3); border-radius: 8px; font-size: 14px; background: var(--blanco); }
.op-talla:hover { border-color: var(--negro); }
.op-talla[aria-pressed="true"] { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.op-tallas__grupo { font-size: 12px; color: var(--gris-5); width: 100%; margin: 6px 0 0; }
.op-colores { display: flex; flex-wrap: wrap; gap: 10px; }
.op-color { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--blanco); box-shadow: 0 0 0 1px var(--gris-3); }
.op-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--negro); }
.op-precio { display: grid; gap: 8px; }
.op-precio output { font-size: 14px; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--negro); height: 28px; }

.filtros-activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtros-activos:empty { display: none; }
.filtro-activo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--negro); color: var(--blanco); font-size: 13px; }
.filtro-activo .ic { width: 14px; height: 14px; }
.filtros-activos .btn-texto { font-size: 13px; padding: 4px 4px; }

/* Tarjetas de producto */
.rejilla-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
@media (min-width: 768px) { .rejilla-productos { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; } }
@media (min-width: 1280px) { .rejilla-productos { grid-template-columns: repeat(4, 1fr); } }
.rejilla-productos--fila { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .rejilla-productos--fila { grid-template-columns: repeat(4, 1fr); } }
.tarjeta { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tarjeta__foto { position: relative; }
.tarjeta__media { position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--radio-g); overflow: hidden; background: var(--gris-1); }
.tarjeta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform .7s var(--ease); }
.tarjeta__media img + img { opacity: 0; }
@media (hover: hover) { .tarjeta:hover .tarjeta__media img + img { opacity: 1; } .tarjeta:hover .tarjeta__media img { transform: scale(1.03); } }
.etiqueta { position: absolute; z-index: 2; top: 10px; left: 10px; background: var(--negro); color: var(--blanco); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.tarjeta__fav { position: absolute; z-index: 2; top: 6px; right: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--negro); transition: transform .15s; }
.tarjeta__fav:active { transform: scale(.9); }
.tarjeta__fav .ic { width: 18px; height: 18px; }
.tarjeta__fav[aria-pressed="true"] .ic, .btn-fav[aria-pressed="true"] .ic { fill: currentColor; }
.tarjeta__probar { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; background: rgba(10, 10, 10, .82); color: var(--blanco); font-size: 12.5px; white-space: nowrap; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s; }
.tarjeta__probar:hover { background: var(--negro); }
.tarjeta__probar .ic { width: 15px; height: 15px; }
@media (hover: hover) and (min-width: 1024px) { .tarjeta__probar { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s, background-color .2s; } .tarjeta:hover .tarjeta__probar, .tarjeta__probar:focus-visible { opacity: 1; transform: none; } }
.tarjeta__info { padding-top: 12px; display: grid; gap: 2px; }
.tarjeta__nombre { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tarjeta__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta__corte { font-size: 13px; color: var(--gris-6); }
.tarjeta__corte b { color: var(--negro); font-weight: 600; }
.tarjeta__media { background: var(--blanco); }
.ficha__estrellas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris-6); margin-top: 6px; }
.ficha__estrellas:hover { color: var(--negro); }
.estrellas { color: var(--negro); letter-spacing: 1px; font-size: 15px; }
.ficha__descuento { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; border: 1px dashed var(--gris-4); border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--claro); }
.ficha__descuento:hover { border-color: var(--negro); }
.ficha__descuento .ic { width: 18px; height: 18px; }

/* Opiniones */
.opiniones { margin-top: 56px; border-top: 1px solid var(--gris-2); padding-top: 40px; display: grid; gap: 28px; }
@media (min-width: 1024px) { .opiniones { grid-template-columns: 320px 1fr; gap: 56px; } }
.opiniones__resumen { display: grid; gap: 10px; align-content: start; }
.opiniones__nota { font-family: var(--f-display); font-size: 64px; line-height: 1; }
.opiniones__barras { display: grid; gap: 4px; font-size: 13px; color: var(--gris-6); }
.opiniones__barras div { display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: center; }
.opiniones__barras i { display: block; height: 6px; border-radius: 999px; background: var(--gris-1); overflow: hidden; }
.opiniones__barras i b { display: block; height: 100%; background: var(--negro); }
.opiniones__lista { display: grid; gap: 0; }
.opinion { padding: 18px 0; border-bottom: 1px solid var(--gris-1); display: grid; gap: 6px; }
.opinion__cabeza { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.opinion__cabeza small { color: var(--gris-5); }
.opinion p { color: var(--gris-7); font-size: 15px; }
.opinion__verificada { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-6); }
.form-opinion { display: grid; gap: 10px; border: 1px solid var(--gris-2); border-radius: var(--radio-g); padding: 18px; }
.form-opinion textarea, .campo textarea { min-height: 96px; border: 1px solid var(--gris-3); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }
.selector-estrellas { display: flex; gap: 4px; }
.selector-estrellas button { font-size: 28px; line-height: 1; color: var(--gris-3); padding: 0 2px; }
.selector-estrellas button[aria-pressed="true"] { color: var(--negro); }
.tarjeta__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.precio { font-weight: 700; font-size: 15px; }
.muestras { display: flex; gap: 4px; }
.muestras span { width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .2); }
.sin-resultados { grid-column: 1 / -1; text-align: center; padding: 60px 16px; display: grid; justify-items: center; gap: 12px; color: var(--gris-6); }
.sin-resultados strong { color: var(--negro); font-size: 18px; }

/* ---------- Editorial ---------- */
.editorial { background: var(--negro); color: var(--blanco); display: grid; }
@media (min-width: 1024px) { .editorial { grid-template-columns: 1.05fr 1fr; min-height: 680px; } }
.editorial__foto { position: relative; min-height: 420px; overflow: hidden; }
.editorial__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.editorial__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .6), transparent 40%); }
.sello { position: absolute; z-index: 1; right: 18px; bottom: 18px; width: 128px; height: 128px; color: var(--blanco); background: rgba(10, 10, 10, .55); border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (min-width: 768px) { .sello { width: 168px; height: 168px; right: 32px; bottom: 32px; } }
.sello svg { width: 100%; height: 100%; }
.editorial__texto { padding: 56px 16px; display: grid; gap: 18px; align-content: center; }
@media (min-width: 768px) { .editorial__texto { padding: 72px 48px; } }
@media (min-width: 1280px) { .editorial__texto { padding: 88px 80px; } }
.editorial__texto > p { color: #d6d6d6; max-width: 560px; }
.titulo-editorial { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 9vw, 96px); line-height: .9; }
.titulo-editorial span { display: block; color: var(--gris-4); font-size: .62em; }
.pilares { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid var(--linea-osc); padding-top: 22px; }
.pilares b { display: block; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.pilares span { font-size: 14px; color: var(--gris-4); }
.editorial__mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.editorial__mini img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radio-g); }
.editorial__texto .btn { justify-self: start; }

/* ---------- Sección probador IA ---------- */
.seccion-ia { background: var(--carbon); color: var(--blanco); padding: 64px 0; border-top: 1px solid var(--linea-osc); }
@media (min-width: 1024px) { .seccion-ia { padding: 100px 0; } }
.seccion-ia__rejilla { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .seccion-ia__rejilla { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.seccion-ia__texto { display: grid; gap: 20px; }
.titulo-ia { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(60px, 11vw, 112px); line-height: .88; }
.titulo-ia span { display: block; color: var(--gris-4); font-size: .55em; }
.titulo-ia .ic { width: .35em; height: .35em; vertical-align: top; stroke-width: 1.4; }
.seccion-ia__intro { color: #d6d6d6; max-width: 520px; font-size: 17px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; }
.pasos b { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--gris-6); display: grid; place-items: center; font-size: 14px; }
.pasos strong { display: block; font-size: 16px; }
.pasos span { font-size: 14px; color: var(--gris-4); }
.modos-ia { display: grid; gap: 12px; }
@media (min-width: 640px) { .modos-ia { grid-template-columns: 1fr 1fr; } }
.modo-ia { border: 1px solid var(--linea-osc); border-radius: var(--radio-g); padding: 18px; display: grid; gap: 8px; align-content: start; background: var(--grafito); }
.modo-ia strong { font-size: 16px; }
.modo-ia p { font-size: 14px; color: var(--gris-4); }
.modo-ia--pendiente { background: transparent; border-style: dashed; }
.seccion-ia__texto > .btn { justify-self: start; }
.seccion-ia__visual { position: relative; display: flex; justify-content: center; padding: 10px 0 30px; }
.telefono { position: relative; width: min(300px, 72vw); aspect-ratio: 9/18; border-radius: 38px; border: 8px solid #2d2d2d; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.telefono img { width: 100%; height: 100%; object-fit: cover; }
.telefono__marca { position: absolute; left: 12px; top: 14px; background: rgba(10, 10, 10, .75); color: var(--blanco); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); }
.seccion-ia__tarjeta { position: absolute; left: max(0px, calc(50% - 230px)); bottom: 70px; display: flex; align-items: center; gap: 10px; background: var(--blanco); color: var(--negro); padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra); }
.seccion-ia__ilustracion { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--gris-5); }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: var(--gris-3); padding: 56px 0 calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea-osc); }
.pie__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
@media (min-width: 1024px) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 40px; } }
.pie__marca { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; }
@media (min-width: 1024px) { .pie__marca { grid-column: auto; } }
.logo-slot--pie { width: 96px; height: 96px; }
.pie__marca p { font-size: 14px; max-width: 280px; }
.pie h3 { color: var(--blanco); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.pie__rejilla > div > a, .pie__rejilla > div > button { display: block; font-size: 14px; padding: 5px 0; text-align: left; transition: color .2s; }
.pie__rejilla a:hover, .pie__rejilla button:hover { color: var(--blanco); }
.pie__contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.pie__contacto li { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.pie__contacto .ic { width: 16px; height: 16px; margin-top: 3px; }
.pie .pendiente { border-color: var(--gris-6); color: var(--gris-4); margin-left: 0; }
.redes { display: flex; gap: 8px; }
.redes a, .redes span { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linea-osc); display: inline-flex; align-items: center; justify-content: center; color: var(--blanco); }
.redes span { opacity: .45; }
.redes .ic { width: 18px; height: 18px; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--linea-osc); margin-top: 40px; padding-top: 20px; font-size: 13px; color: var(--gris-5); }

/* ---------- Ficha de producto ---------- */
#vista-producto { background: var(--blanco); }
.ficha { padding: 16px 0 56px; }
@media (min-width: 1024px) { .ficha { padding: 28px 0 88px; } }
.migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--gris-6); margin-bottom: 16px; }
.migas a:hover { color: var(--negro); text-decoration: underline; }
.migas .ic { width: 12px; height: 12px; }
.ficha__rejilla { display: grid; gap: 24px; }
@media (min-width: 1024px) { .ficha__rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.galeria { display: grid; gap: 10px; min-width: 0; }
@media (min-width: 1024px) { .galeria { grid-template-columns: 76px 1fr; gap: 16px; align-items: start; } }
.galeria__principal { position: relative; aspect-ratio: 3/4; border-radius: var(--radio-g); overflow: hidden; background: var(--blanco); }
/* Computador: todas las fotos una debajo de otra (se recorren bajando), info fija a la derecha */
@media (min-width: 1024px) {
    .galeria__principal { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
    .galeria__pista { flex-direction: column; gap: 14px; overflow: visible; height: auto; }
    .galeria__diapo { flex: none; height: auto; aspect-ratio: 3/4; border-radius: var(--radio-g); background: var(--blanco); scroll-snap-align: none; }
    .galeria__ampliar, .galeria__principal > .etiqueta { position: absolute; }
    .galeria__miniaturas { position: sticky; top: calc(var(--alto-cabecera) + 20px); }
    .ficha__info { position: sticky; top: calc(var(--alto-cabecera) + 20px); }
    .galeria__contador { display: none; }
}
.galeria__contador { position: absolute; z-index: 2; left: 12px; bottom: 12px; background: rgba(10, 10, 10, .72); color: var(--blanco); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.galeria__pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__diapo { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; overflow: hidden; cursor: zoom-in; }
.galeria__diapo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease-out; }
@media (hover: hover) and (min-width: 1024px) { .galeria__diapo.lupa img { transform: scale(2); } }
.galeria__puntos { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.galeria__puntos span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.galeria__puntos span.activo { background: var(--blanco); width: 20px; }
@media (min-width: 1024px) { .galeria__puntos { display: none; } }
.galeria__ampliar { position: absolute; z-index: 2; right: 12px; top: 12px; background: rgba(255, 255, 255, .92); color: var(--negro); }
.galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) { .galeria__miniaturas { flex-direction: column; order: -1; } }
.galeria__miniaturas button { flex: 0 0 64px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 1.5px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
@media (min-width: 1024px) { .galeria__miniaturas button { flex-basis: auto; width: 76px; } }
.galeria__miniaturas button[aria-current="true"] { border-color: var(--negro); opacity: 1; }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.galeria__ayuda { font-size: 12.5px; color: var(--gris-5); display: flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) { .galeria__ayuda { grid-column: 2; } }
.galeria__ayuda .ic { width: 14px; height: 14px; }
.ayuda-escritorio { display: none; }
@media (hover: hover) and (min-width: 1024px) { .ayuda-escritorio { display: inline; } .ayuda-tactil { display: none; } }

.ficha__info { display: grid; gap: 22px; }
.ficha__titulo-fila { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ficha__titulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 50px); line-height: .95; letter-spacing: .01em; }
.ficha__ref { font-size: 13px; color: var(--gris-6); margin-top: 8px; }
.btn-fav { flex: none; width: 46px; height: 46px; border: 1px solid var(--gris-3); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.btn-fav:hover { border-color: var(--negro); }
.ficha__precio { font-size: 28px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ficha__precio small { font-size: 12px; font-weight: 500; color: var(--gris-6); }
.ficha__grupo { display: grid; gap: 10px; }
.ficha__etq { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.ficha__etq b { font-weight: 700; }
.ficha__etq span { color: var(--gris-6); }
.colores { display: flex; gap: 10px; flex-wrap: wrap; }
.color-op { width: 42px; height: 42px; border-radius: 999px; border: 3px solid var(--blanco); box-shadow: 0 0 0 1px var(--gris-3); transition: box-shadow .2s; }
.color-op[aria-checked="true"] { box-shadow: 0 0 0 2px var(--negro); }
.tallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.talla-op { position: relative; height: 48px; border: 1px solid var(--gris-3); border-radius: 8px; font-size: 15px; font-weight: 500; background: var(--blanco); transition: border-color .2s, background-color .2s, color .2s; }
.talla-op:hover:not(:disabled) { border-color: var(--negro); }
.talla-op[aria-checked="true"] { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.talla-op:disabled { color: var(--gris-4); background: var(--claro); cursor: not-allowed; background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--gris-3) 50%, transparent calc(50% + .5px)); }
.ficha__aviso-talla { font-size: 13px; color: var(--negro); font-weight: 600; min-height: 1em; }
.ficha__acciones { display: grid; gap: 10px; }
.ficha__ia { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radio-g); background: var(--negro); color: var(--blanco); }
.ficha__ia .ic { width: 26px; height: 26px; stroke-width: 1.4; flex: none; }
.ficha__ia div { flex: 1; min-width: 0; }
.ficha__ia strong { display: block; font-size: 15px; }
.ficha__ia span { font-size: 13px; color: var(--gris-3); }
.ficha__ia .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 420px) { .ficha__ia { flex-wrap: wrap; } .ficha__ia .btn { width: 100%; } }
.acordeon { border-top: 1px solid var(--gris-2); }
.acordeon details { border-bottom: 1px solid var(--gris-2); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .ic { width: 18px; height: 18px; transition: transform .25s; }
.acordeon details[open] summary .ic { transform: rotate(45deg); }
.acordeon .acordeon__cuerpo { padding: 0 0 18px; font-size: 15px; color: var(--gris-7); display: grid; gap: 8px; }
.ficha__servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 1px solid var(--gris-2); border-radius: var(--radio-g); padding: 14px; }
.ficha__servicios div { display: grid; justify-items: center; text-align: center; gap: 4px; font-size: 12px; color: var(--gris-6); line-height: 1.3; }
.ficha__servicios .ic { width: 22px; height: 22px; color: var(--negro); stroke-width: 1.4; }
.ficha__servicios strong { color: var(--negro); font-size: 12.5px; }
.relacionados { margin-top: 64px; }
.relacionados .seccion__cabeza { margin-bottom: 20px; }
.relacionados .titulo-seccion { font-size: clamp(30px, 4vw, 44px); }
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--blanco); border-top: 1px solid var(--gris-2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s var(--ease); }
.barra-compra.visible { transform: none; }
.barra-compra div { flex: 1; min-width: 0; }
.barra-compra strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra span { font-size: 14px; font-weight: 700; }
.barra-compra .btn { min-height: 46px; padding: 0 20px; }
@media (min-width: 1024px) { .barra-compra { display: none; } }

/* ---------- Ventana (modal) ---------- */
.ventana { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; }
@media (min-width: 640px) { .ventana { align-items: center; padding: 24px; } }
.ventana.abierto { visibility: visible; }
.ventana__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s; }
.ventana.abierto .ventana__fondo { opacity: 1; }
.ventana__caja { position: relative; width: 100%; max-width: 620px; max-height: 90dvh; overflow-y: auto; background: var(--blanco); border-radius: 18px 18px 0 0; padding: 30px 22px calc(24px + env(safe-area-inset-bottom)); transform: translateY(24px); opacity: 0; transition: transform .3s var(--ease), opacity .25s; }
@media (min-width: 640px) { .ventana__caja { border-radius: 16px; padding: 36px; } }
.ventana.abierto .ventana__caja { transform: none; opacity: 1; }
.ventana__cerrar { position: absolute; top: 10px; right: 10px; }
.ventana h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; margin: 0 40px 12px 0; }
.ventana p { color: var(--gris-7); margin-bottom: 12px; }
.ventana .btn { margin-top: 8px; }
.tabla-tallas { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 16px; }
.tabla-tallas th, .tabla-tallas td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gris-2); }
.tabla-tallas th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-6); }
.pestanas { display: flex; gap: 6px; margin: 6px 0 4px; flex-wrap: wrap; }
.resumen { border: 1px solid var(--gris-2); border-radius: var(--radio-g); padding: 4px 16px; margin: 12px 0; }
.resumen div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gris-1); font-size: 14px; }
.resumen div:last-child { border: 0; font-weight: 700; font-size: 16px; }
.caja-aviso { background: var(--claro); border-left: 3px solid var(--negro); padding: 12px 14px; font-size: 14px; color: var(--gris-7); margin: 12px 0; border-radius: 0 8px 8px 0; }

/* ---------- Visor ---------- */
.visor { position: fixed; inset: 0; z-index: 85; background: rgba(10, 10, 10, .97); color: var(--blanco); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity .2s; }
.visor.abierto { visibility: visible; opacity: 1; }
.visor__marco { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; touch-action: none; }
.visor__marco.zoom { cursor: grab; }
.visor__marco img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s var(--ease); user-select: none; -webkit-user-drag: none; }
.visor__cerrar { position: absolute; z-index: 2; top: 12px; right: 12px; background: rgba(255, 255, 255, .12); }
.visor__nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); }
.visor__nav--ant { left: 12px; }
.visor__nav--sig { right: 12px; }
.visor__ayuda { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 13px; color: var(--gris-4); }

/* ---------- Aviso flotante ---------- */
.aviso-flotante { position: fixed; z-index: 90; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--negro); color: var(--blanco); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); }
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-flotante button { text-decoration: underline; font-weight: 600; white-space: nowrap; }

/* =====================================================================
   PROBADOR
   ===================================================================== */
.probador { position: fixed; inset: 0; z-index: 75; background: rgba(0, 0, 0, .7); display: flex; align-items: stretch; justify-content: center; visibility: hidden; opacity: 0; transition: opacity .25s; }
@media (min-width: 1024px) { .probador { padding: 24px; align-items: center; } }
.probador.abierto { visibility: visible; opacity: 1; }
.probador__caja { width: 100%; min-width: 0; max-width: 1320px; height: 100%; background: var(--blanco); display: flex; flex-direction: column; overflow: hidden; }
.probador__cuerpo { grid-template-columns: minmax(0, 1fr); }
.probador__cuerpo > * { min-width: 0; }
@media (min-width: 1024px) { .probador__caja { height: min(880px, 100%); border-radius: 16px; } }
.probador__cabeza { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; background: var(--negro); color: var(--blanco); flex: none; }
.logo-slot--mini { width: 42px; height: 42px; }
.probador__cabeza h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; line-height: 1; }
.probador__cabeza p { font-size: 12.5px; color: var(--gris-4); }
.probador__cabeza .icono-btn { margin-left: auto; }
.probador__cuerpo { flex: 1; overflow-y: auto; display: grid; overscroll-behavior: contain; }
@media (min-width: 1024px) { .probador__cuerpo { grid-template-columns: 300px minmax(0, 1fr) 300px; overflow: hidden; } .probador__panel, .probador__compra { overflow-y: auto; } }
.probador__panel, .probador__compra { padding: 4px 16px 20px; display: grid; align-content: start; gap: 0; }
@media (min-width: 1024px) { .probador__panel { border-right: 1px solid var(--gris-1); padding: 8px 20px 24px; } .probador__compra { border-left: 1px solid var(--gris-1); padding: 8px 20px 24px; } }
/* En celular: escenario primero, luego controles, luego compra */
.probador__escenario { order: -1; background: var(--claro); padding: 12px 12px 14px; display: grid; gap: 10px; align-content: start; }
@media (min-width: 1024px) { .probador__escenario { order: 0; padding: 20px; align-content: center; justify-items: center; } }
.pr-bloque { padding: 18px 0; border-bottom: 1px solid var(--gris-1); display: grid; gap: 12px; }
.pr-bloque:last-child { border-bottom: 0; }
.pr-bloque h3 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pr-bloque h3 b { width: 24px; height: 24px; border-radius: 999px; background: var(--negro); color: var(--blanco); font-size: 12px; display: grid; place-items: center; }
.pr-prenda { display: flex; gap: 12px; align-items: center; }
.pr-prenda img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--gris-1); }
.pr-prenda strong { display: block; font-size: 15px; line-height: 1.25; }
.pr-prenda span { font-size: 14px; color: var(--gris-6); }
.pr-lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.pr-lista button { flex: 0 0 60px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 2px solid transparent; opacity: .65; transition: opacity .2s, border-color .2s; }
.pr-lista button[aria-selected="true"] { border-color: var(--negro); opacity: 1; }
.pr-lista img { width: 100%; height: 100%; object-fit: cover; }
.pr-colores { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.pr-colores .color-op { width: 34px; height: 34px; }
.pr-colores span { color: var(--gris-6); margin-left: 4px; }
.pr-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-botones .btn { flex: 1 1 auto; }
.pr-ayuda { font-size: 13px; color: var(--gris-6); }
.pr-rango { display: grid; gap: 2px; font-size: 14px; }
.pr-rango span { display: flex; justify-content: space-between; }
.pr-rango output { color: var(--gris-6); font-variant-numeric: tabular-nums; }

.pr-escena { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 3/4; max-height: 62dvh; border-radius: 12px; overflow: hidden; background: var(--grafito); color: var(--blanco); display: flex; align-items: center; justify-content: center; user-select: none; }
@media (min-width: 1024px) { .pr-escena { max-height: calc(min(880px, 100dvh - 48px) - 200px); width: auto; height: calc(min(880px, 100dvh - 48px) - 200px); } }
.pr-vacio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px; color: var(--gris-3); }
.pr-vacio .ic { width: 40px; height: 40px; stroke-width: 1.2; }
.pr-vacio strong { color: var(--blanco); font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 26px; letter-spacing: .02em; }
.pr-vacio span { font-size: 14px; max-width: 260px; }
#pr-video, #pr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#pr-video { object-fit: cover; }
#pr-video.espejo { transform: scaleX(-1); }
.pr-comparar { position: absolute; inset: 0; cursor: ew-resize; touch-action: none; --pos: 50%; }
.pr-comparar__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.pr-comparar__asa { position: absolute; top: 50%; left: var(--pos); width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 999px; background: var(--blanco); color: var(--negro); display: grid; place-items: center; box-shadow: var(--sombra); }
.pr-comparar__asa .ic { width: 20px; height: 20px; }
.pr-comparar__etq { position: absolute; top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(10, 10, 10, .7); padding: 4px 9px; border-radius: 999px; }
.pr-comparar__etq--izq { left: 12px; }
.pr-comparar__etq--der { right: 12px; }
.pr-cuenta { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 120px; color: var(--blanco); text-shadow: 0 6px 30px rgba(0, 0, 0, .7); }
.pr-cargando { position: absolute; inset: 0; background: rgba(10, 10, 10, .55); display: grid; place-content: center; justify-items: center; gap: 12px; font-size: 14px; }
.pr-spinner { width: 34px; height: 34px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--blanco); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.pr-sello { position: absolute; left: 12px; bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(10, 10, 10, .75); border: 1px solid rgba(255, 255, 255, .3); padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.pr-sello--realista { background: var(--blanco); color: var(--negro); }
.pr-camara-barra, .pr-herramientas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 520px; margin: 0 auto; }
.pr-herramientas .btn { flex: 1 1 0; }
.pr-estado { font-size: 13.5px; color: var(--gris-7); text-align: center; max-width: 520px; margin: 0 auto; min-height: 1.4em; }
.pr-estado.error { color: var(--negro); font-weight: 600; }
.pr-tallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
.pr-tallas .talla-op { height: 42px; font-size: 14px; }
.pr-orientacion { border: 1px solid var(--gris-2); border-radius: 10px; padding: 0 14px; }
.pr-orientacion summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600; }
.pr-orientacion[open] { padding-bottom: 12px; }
.pr-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; color: var(--gris-6); margin-bottom: 8px; }
.pr-medidas label { display: grid; gap: 4px; }
.pr-medidas__ancho { grid-column: 1 / -1; }
.pr-medidas input, .pr-medidas select { height: 42px; border: 1px solid var(--gris-3); border-radius: 8px; padding: 0 10px; background: var(--blanco); font-size: 16px; color: var(--negro); }
.pr-sugerida { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.pr-realista__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-realista .estado { color: var(--gris-6); }
.pr-realista .estado--ok { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.pr-realista p { font-size: 14px; color: var(--gris-7); }
.pr-consentimiento { display: flex; gap: 8px; font-size: 13px; color: var(--gris-7); align-items: flex-start; }
.pr-consentimiento input { margin-top: 3px; accent-color: var(--negro); }
.pr-privacidad { display: flex; gap: 8px; font-size: 12.5px; color: var(--gris-6); padding-top: 14px; }
.pr-privacidad .ic { width: 16px; height: 16px; margin-top: 1px; }

/* Formularios (finalizar compra) */
.campo { display: grid; gap: 4px; font-size: 13px; color: var(--gris-6); }
.campo input, .campo select { height: 46px; border: 1px solid var(--gris-3); border-radius: 8px; padding: 0 12px; font-size: 16px; color: var(--negro); background: var(--blanco); }
.campos { display: grid; gap: 10px; margin: 8px 0 12px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campos .campo--ancho { grid-column: 1 / -1; } }

/* =====================================================================
   CUENTA, COOKIES, COMPRA
   ===================================================================== */
.icono-btn.con-sesion::after { content: ''; position: absolute; right: 9px; bottom: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--blanco); box-shadow: 0 0 0 2px var(--negro); }
.campos--una { grid-template-columns: 1fr !important; }
.campo--ancho { grid-column: 1 / -1; }
.form-error { background: var(--claro); border-left: 3px solid var(--negro); padding: 10px 12px; font-size: 14px; font-weight: 600; border-radius: 0 8px 8px 0; }
.nota .btn-texto, .nota button { padding: 0; font-size: inherit; }

.cookies { position: fixed; z-index: 66; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; background: var(--negro); color: var(--blanco); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: var(--sombra); }
@media (min-width: 768px) { .cookies { left: 24px; right: auto; margin: 0; } }
.cookies p { font-size: 14px; color: var(--gris-3); margin-top: 2px; }
.cookies__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.cookies .btn--contorno { border-color: var(--gris-5); color: var(--blanco); }
.cookies .btn--oscuro { background: var(--blanco); color: var(--negro); }

.ingreso { display: grid; gap: 14px; padding: 12px 0 24px; }
.ingreso__promo { display: flex; align-items: center; gap: 14px; background: var(--negro); color: var(--blanco); border-radius: 12px; padding: 14px 16px; }
.ingreso__promo b { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1; }
.ingreso__promo span { font-size: 14px; }
.ingreso__o { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gris-5); }
.ingreso__o::before, .ingreso__o::after { content: ''; flex: 1; height: 1px; background: var(--gris-2); }
.ingreso__alterno { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.btn-google { gap: 10px; }
.cuenta__hola { font-size: 17px; padding: 14px 0 6px; }
.direccion { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--gris-1); font-size: 14px; }
.direccion > div:first-child { display: grid; gap: 2px; }
.direccion span { color: var(--gris-6); }
.direccion__acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.direccion__acciones .btn-texto { padding: 0; font-size: 13px; }
#cuenta-seccion { display: grid; gap: 10px; padding: 8px 0 18px; }
.pedido-mini { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--gris-1); font-size: 14px; color: var(--gris-6); }
.pedido-mini__cabeza { display: flex; justify-content: space-between; align-items: center; color: var(--negro); }
.pedido-mini__fotos { display: flex; gap: 6px; margin-top: 6px; }
.pedido-mini__fotos img { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; background: var(--gris-1); }
.estado-pedido { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--gris-3); color: var(--gris-7); white-space: nowrap; }
.estado-pedido--pagado, .estado-pedido--enviado, .estado-pedido--entregado { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.estado-pedido--cancelado { text-decoration: line-through; color: var(--gris-5); }
.promo { display: grid; gap: 10px; text-align: center; justify-items: center; padding: 6px 0; }
.promo__pct { font-family: var(--f-display); font-size: 96px; line-height: .9; }
.promo h2 { margin: 0 !important; }

.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--gris-3); border-radius: 10px; cursor: pointer; font-size: 14px; }
.opcion:has(input:checked) { border-color: var(--negro); box-shadow: 0 0 0 1px var(--negro); }
.opcion input { accent-color: var(--negro); margin-top: 3px; }
.opcion span { display: grid; gap: 2px; color: var(--gris-6); }
.opcion strong { color: var(--negro); }

.compra { position: fixed; inset: 0; z-index: 76; background: var(--claro); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s; overscroll-behavior: contain; }
.compra.abierto { visibility: visible; opacity: 1; }
.compra__caja { min-height: 100%; }
.compra__cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--negro); color: var(--blanco); }
.compra__cabeza h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.compra__cabeza .icono-btn { margin-left: auto; }
.compra__cuerpo { max-width: 1160px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .compra__cuerpo { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; padding: 32px; align-items: start; } }
.compra__pasos { display: grid; gap: 16px; min-width: 0; }
.compra__paso, .compra__resumen, .compra__ingreso { background: var(--blanco); border-radius: 14px; padding: 20px; display: grid; gap: 14px; }
.compra__paso h3, .compra__resumen h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.compra__paso h3 b { width: 26px; height: 26px; border-radius: 999px; background: var(--negro); color: var(--blanco); display: grid; place-items: center; font-size: 13px; }
.compra__paso .campos { margin: 0; }
.compra__ingreso { grid-template-columns: 1fr auto; align-items: center; border: 1px dashed var(--gris-4); }
.compra__ingreso div { display: grid; gap: 2px; font-size: 14px; color: var(--gris-6); }
.compra__ingreso strong { color: var(--negro); }
.compra__dirs, .compra__metodos { display: grid; gap: 8px; }
@media (min-width: 640px) { .compra__dirs, .compra__metodos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .compra__resumen { position: sticky; top: 80px; } }
.compra__items { display: grid; gap: 12px; max-height: 320px; overflow-y: auto; }
.compra__item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.compra__item img { width: 52px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--gris-1); }
.compra__item div { display: grid; gap: 2px; min-width: 0; }
.compra__item span { color: var(--gris-6); }
.compra__item > span { color: var(--negro); font-weight: 600; }
.compra__resumen .resumen { margin: 0; }
.compra__exito { max-width: 560px; margin: 0 auto; padding: 56px 20px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.compra__exito h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 8vw, 64px); line-height: .95; }
.compra__exito p { color: var(--gris-7); }
.compra__check { width: 64px; height: 64px; border-radius: 999px; background: var(--negro); color: var(--blanco); display: grid; place-items: center; }
.compra__check .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.compra__exito-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}