:root{
  /* Escala neutra, derivada de la tinta de marca */
  --n-000:#FFFFFF;
  --n-050:#F2F2F4;
  --n-100:#E4E5E9;
  --n-200:#CACBD3;
  --n-400:#9092A2;
  --n-600:#60637A;
  --n-700:#41455F;
  --n-900:#1C2141;
  --n-950:#0E1335;

  /* Marca */
  --onyx:#0E1335;
  --acero:#3E5CAA;
  --bruma:#C3D0EB;
  --cielo:#B4E3F7;
  --accion:#0043FE;
  --ghost:rgba(255,255,255,.24);

  /* Espaciado: base 4, saltos de 8. El nombre es el valor. */
  --e-4:4px;   --e-8:8px;   --e-12:12px; --e-16:16px;
  --e-24:24px; --e-32:32px; --e-40:40px; --e-48:48px;
  --e-64:64px; --e-88:88px; --e-112:112px;

  /* Margen lateral de página. Único origen para todos los bloques. */
  --margen:var(--e-32);

  --r-boton:2px;
  --r-card:8px;

  --t-pie:12px;
  --t-cuerpo:15px;
  --t-boton:16px;
  --t-sub:26px;
  --t-display:64px;
  --t-h1:44px;
  --t-dato:48px;
  --t-bajada:17px;
  --track-marca:.32em;   /* mismo tracking del slogan NÁUTICO */
  --sombra-texto:0 3.79px 11.38px rgba(0,0,0,.25);

  --header-h:56px;
  --slide-h:80svh;
  --curva:cubic-bezier(.75,0,0,1);
  --t-estado:.33s;
}

*,*::before,*::after{box-sizing:border-box}
/* Cualquier display declarado por una clase pisa el [hidden] del navegador */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:var(--t-cuerpo);line-height:1.45;
  color:var(--n-950);background:var(--n-000);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accion);outline-offset:3px;border-radius:2px}

.salto{position:absolute;left:-9999px;top:0;padding:var(--e-8) var(--e-16);background:var(--n-950);color:var(--n-000);z-index:100}
.salto:focus{left:var(--e-8);top:var(--e-8)}

/* ---------- Cabecera ---------- */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--margen);
  background:var(--n-000);
}
.marca{display:flex;align-items:center;color:var(--n-950)}
.marca__logo{
  width:36px;height:28px;background:currentColor;
  -webkit-mask:url(iso.svg) no-repeat center/contain;
  mask:url(iso.svg) no-repeat center/contain;
}
.nav{display:flex;gap:var(--e-32)}
.nav a,.nav .inactivo{
  display:flex;align-items:center;gap:var(--e-8);
  font-size:var(--t-cuerpo);font-weight:500;padding:var(--e-8) 0;
}
.nav a:hover{color:var(--accion)}
/* Categoría en la que está parado el visitante */
.nav a[aria-current="page"]{color:var(--accion);font-weight:600}
.nav .inactivo{color:var(--n-400);cursor:not-allowed}
.chip{
  padding:1px var(--e-4);border-radius:var(--r-boton);
  background:color-mix(in srgb, currentColor 14%, transparent);
  font-size:10px;font-weight:600;line-height:1.6;
}
.cabecera__fin{display:flex;align-items:center;gap:var(--e-4)}
.icon-btn{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-boton);
  background:transparent;color:var(--n-950);cursor:pointer;
  transition:background-color var(--t-estado) ease,
             color var(--t-estado) ease,
             translate var(--t-estado) var(--curva);
}
.icon-btn:hover{background:var(--n-050);color:var(--accion)}
.icono{width:20px;height:20px;flex:none;stroke-width:2}
.menu-btn{
  display:none;min-height:44px;
  align-items:center;justify-content:center;
  padding:var(--e-8) var(--e-16);
  border:0;border-radius:var(--r-boton);
  background:var(--ghost);color:var(--onyx);
  font-size:var(--t-boton);font-weight:400;line-height:1;cursor:pointer;
  transition:background-color var(--t-estado) ease,
             translate var(--t-estado) var(--curva);
}
.menu-btn:hover{background:rgba(255,255,255,.4)}
.menu-btn__x{display:none}
.menu-btn[aria-expanded="true"]{
  width:44px;padding:0;background:transparent;
}
.menu-btn[aria-expanded="true"]:hover{background:var(--n-050)}
.menu-btn[aria-expanded="true"] .menu-btn__texto{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__x{display:block}

/* ---------- Carrusel del héroe ---------- */
.heroe{
  position:relative;
  height:var(--slide-h);
  margin-top:var(--header-h);
}

.diapo{
  position:absolute;inset:0;
  display:grid;grid-template-rows:1fr auto;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--curva),visibility .5s var(--curva);
}
.diapo[data-activa]{opacity:1;visibility:visible}

/* Placeholder de imagen. Fondo n-050, conserva sitio y dirección de arte. */
.marco{
  position:absolute;inset:0;z-index:-1;
  background:var(--n-050);
  display:flex;align-items:center;justify-content:center;
  padding:var(--margen);
}
.marco__nota{
  max-width:40ch;padding:var(--e-16);text-align:center;
  font-size:var(--t-pie);line-height:1.5;color:var(--n-400);
  border:1px dashed var(--n-200);border-radius:var(--r-card);
}

/* Foto a sangre. La imagen entra por --foto; el encuadre cambia por breakpoint.
   Fuente vertical 3:4: en desktop se muestra la franja alta para dejar cielo
   limpio bajo el titular, y el sujeto entra por abajo a la derecha. */
.marco--foto{
  background-image:var(--foto);
  background-size:cover;
  background-position:center 36%;
  background-repeat:no-repeat;
}
.marco--foto .marco__nota{display:none}

.diapo__texto{
  padding:var(--e-88) var(--margen) var(--e-32);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;
}
.diapo__texto > *{max-width:789px}
.diapo h2{
  margin:0;
  font-size:var(--t-display);font-weight:500;line-height:1;
  letter-spacing:-.015em;text-wrap:balance;
}
.sub{
  margin:var(--e-8) 0 0;
  font-size:var(--t-sub);font-weight:400;line-height:1.2;
  color:var(--n-700);
}


.acciones{
  display:flex;gap:var(--e-8);justify-content:center;
  margin-top:var(--e-24);
}
.boton{
  min-width:164px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--e-8) var(--e-24);
  border-radius:var(--r-boton);border:0;
  font-size:var(--t-boton);font-weight:400;line-height:1;
  cursor:pointer;
  transition:background-color var(--t-estado) ease,
             color var(--t-estado) ease,
             translate var(--t-estado) var(--curva);
}
/* Se levanta 2px al pasar el cursor. Solo donde hay puntero real:
   en táctil el hover se queda pegado tras el toque. */
.boton--principal{background:var(--onyx);color:var(--cielo)}
.boton--principal:hover{background:#080C24}
.boton--secundario{background:var(--cielo);color:var(--onyx)}
.boton--secundario:hover{background:var(--n-000)}
.boton--ghost{background:var(--ghost);color:var(--onyx)}
.boton--ghost:hover{background:rgba(255,255,255,.4)}

/* Marca persistente, encima de la paginación. --h es la altura del logotipo.
   El color lo declara cada diapositiva con data-marca, porque quien monta la
   foto sabe si es clara u oscura y no hace falta calcularlo en cada carga:
   marca clara (blanco) para fotos oscuras, marca oscura (#0E1335) para claras. */
.marca-heroe{
  --h:32px;
  display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--h) * 0.157);
  color:var(--marca-tono, var(--onyx));
  /* El cambio acompaña al fundido entre diapositivas */
  transition:color .5s var(--curva);
}
.heroe[data-marca="clara"]{--marca-tono:#FFFFFF}
.heroe[data-marca="oscura"]{--marca-tono:#0E1335}
.marca-heroe__logo{
  height:var(--h);
  aspect-ratio:620.04 / 135.97;
  background:currentColor;
  -webkit-mask:url(logo.svg) no-repeat center/contain;
  mask:url(logo.svg) no-repeat center/contain;
}
.marca-heroe__slogan{
  font-size:10px;
  font-weight:600;line-height:1;letter-spacing:.32em;
  text-indent:.32em;
}

/* Flechas */
.flecha{
  position:absolute;z-index:3;
  inset-block:0;margin-block:auto;  /* centrado sin gastar el translate */
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-boton);
  background:var(--n-000);color:var(--n-950);
  cursor:pointer;
  transition:background-color var(--t-estado) ease,
             opacity var(--t-estado) ease,
             scale var(--t-estado) var(--curva),
             translate var(--t-estado) var(--curva),
             visibility var(--t-estado) ease;
}
.flecha:hover{background:var(--n-100)}
/* Sale del foco y del árbol de accesibilidad, pero con transición:
   display:none no es animable y corta de golpe. */
.flecha[data-oculta]{
  opacity:0;scale:.88;visibility:hidden;pointer-events:none;
}
.flecha--previa{left:var(--e-24)}
.flecha--siguiente{right:var(--e-24)}
.flecha svg{width:24px;height:24px;stroke-width:2}

/* Paginación. El indicador se desliza; los puntos no cambian de color. */
.heroe .puntos{
  position:absolute;inset:auto 0 0 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:var(--e-16);
  padding:var(--e-40) var(--margen) var(--e-24);
}
.pista{
  position:relative;
  display:flex;gap:var(--e-8);
}
.punto{
  position:relative;
  width:12px;height:12px;padding:0;flex:none;
  border:0;border-radius:50%;
  background:var(--n-200);cursor:pointer;
  transition:background-color .3s var(--curva),
             translate var(--t-estado) var(--curva);
}
.punto:hover{background:var(--n-400)}
/* Área táctil sin alterar el tamaño visual. El ancho no puede pasar del paso
   de 20px: si lo hace, las áreas se solapan y el último punto del DOM
   le roba el hover y el toque a los anteriores. */
.punto::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:20px;height:44px;
}
.marcador{
  position:absolute;top:0;left:0;pointer-events:none;
  width:12px;height:12px;border-radius:50%;
  background:var(--n-950);
  translate:calc(var(--i,0) * 20px) 0;
  transition:translate .5s var(--curva);
}

/* ---------- Bloque 2: tarjeta que se expande al scroll ----------
   Estructura de Tesla (FSDCard), comportamiento de Anthropic (big CTA). */
.expansible{padding-block:var(--e-48) 0}

.tarjeta{
  background:var(--n-050);
  border-radius:var(--r-boton);
  margin-inline:var(--e-48);
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  align-items:stretch;
}
.tarjeta__contenido{
  grid-column:1 / 5;
  padding:var(--e-32) var(--e-48) var(--e-16);
  display:flex;flex-direction:column;justify-content:center;
}
.tarjeta h2{
  margin:0;
  font-size:var(--t-h1);font-weight:500;line-height:1.05;
  letter-spacing:-.015em;text-wrap:balance;
}
.tarjeta__bajada{
  margin:var(--e-8) 0 0;
  font-size:var(--t-bajada);font-weight:400;line-height:1.41;
  color:var(--n-600);text-wrap:pretty;
}
.insignias{display:flex;gap:var(--e-40);margin-top:var(--e-32)}
.insignia__dato{
  display:block;
  font-size:var(--t-dato);font-weight:500;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.insignia__etiqueta{
  display:block;
  font-size:var(--t-bajada);font-weight:400;line-height:1.41;
  color:var(--n-600);
}
.acciones--tarjeta{margin-top:var(--e-48);justify-content:flex-start}
.acciones--tarjeta .boton{width:100%;max-width:200px;min-width:0}

.tarjeta__media{grid-column:5 / -1;display:flex;align-items:stretch}
.media-hueco{
  flex:1;aspect-ratio:16/9;
  background:var(--n-100);
  border-radius:0 var(--r-boton) var(--r-boton) 0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--e-24);
}
.media-hueco p{
  margin:0;max-width:34ch;text-align:center;
  font-size:var(--t-pie);line-height:1.5;color:var(--n-400);
  border:1px dashed var(--n-200);border-radius:var(--r-card);
  padding:var(--e-16);
}

/* ---------- Bloque 3: vitrina de productos ----------
   Mecánica del carrusel freeflow de Tesla, proporción vertical para motores. */
.vitrina{
  position:relative;
  padding-block:var(--e-48) var(--e-24);
  background:var(--n-000);
}
.vitrina__carrusel{position:relative}
.vitrina__pista{
  display:flex;gap:var(--e-16);
  /* overflow-y explícito: con overflow-x:auto el navegador lo pondría en auto solo */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--margen);
  scroll-padding-inline-start:var(--margen);
  scrollbar-width:none;
}
.vitrina__pista::-webkit-scrollbar{display:none}

.ficha{
  --safe:var(--e-16);
  container-type:inline-size;
  position:relative;overflow:hidden;
  flex:none;scroll-snap-align:start;
  width:clamp(200px, 62vw, 280px);
  aspect-ratio:3/4;  /* bloqueado */
  border-radius:var(--r-boton);
  background:var(--n-050);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--safe);
  /* Entrada diferida, como el slide-in de Tesla en los slides no vistos.
     Sin desplazamiento vertical: en una pista horizontal genera scroll en el otro eje. */
  opacity:0;scale:.97;
  transition:opacity .5s var(--curva), scale .5s var(--curva);
}
.ficha[data-vista]{opacity:1;scale:1}

/* Hueco de la foto, a sangre detrás del contenido */
.ficha__foto{
  position:absolute;inset:0;z-index:0;
  background:var(--n-100);
  display:flex;align-items:center;justify-content:center;
  padding:var(--e-16);
}
.ficha__foto p{
  margin:0;text-align:center;
  font-size:var(--t-pie);line-height:1.4;color:var(--n-400);
}
.ficha__info{
  position:relative;z-index:2;text-align:left;
  display:flex;flex-direction:column;
  color:var(--n-000);
  /* El tamaño vive aquí para que el gap pueda ir en em y escale con el texto.
     Proporción del Figma: 8px de separación sobre 24px de texto. */
  font-size:clamp(12px, 6.85cqw, 17px);
  gap:.333em;
}
.ficha__nombre,.ficha__precio{
  margin:0;
  font-size:1em;line-height:normal;
  letter-spacing:var(--track-marca);
  white-space:nowrap;
  text-shadow:var(--sombra-texto);
}
.ficha__nombre{font-weight:400;text-transform:uppercase}
.ficha__precio{font-weight:600;font-variant-numeric:tabular-nums}
.ficha__acciones{
  position:relative;z-index:2;
  display:flex;gap:var(--e-8);
}
/* Cuadrado, del alto del botón. No crece. */
.ficha__ver{
  flex:none;width:44px;min-width:0;padding:0;aspect-ratio:1;
}
/* Toma lo que quede tras el cuadrado y el gap, dentro de la safe zone */
.ficha__cta{flex:1;min-width:0;gap:var(--e-8)}
.ficha__acciones .icono{width:18px;height:18px}

.vitrina .paginacion{
  display:flex;justify-content:center;
  padding:var(--e-32) var(--margen) 0;
}


/* Subbloque: dos promos horizontales. Fondo gris, foto a sangre a la derecha. */
.promos{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e-16);
  padding:var(--e-48) var(--margen) 0;
}
.promo{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 34%;
  border-radius:var(--r-boton);
  background:var(--n-050);
  min-height:232px;
}
.promo__texto{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:var(--e-8);
  padding:var(--e-32);
}
.promo h3{
  margin:0;
  font-size:var(--t-h1);font-weight:500;line-height:1.05;
  letter-spacing:-.015em;text-wrap:balance;
}
.promo p{
  margin:0;max-width:34ch;
  font-size:var(--t-bajada);font-weight:400;line-height:1.41;
  color:var(--n-600);text-wrap:pretty;
}
.promo .boton{margin-top:var(--e-16);min-width:0;width:auto}
/* Foto a sangre: llena su columna hasta el borde de la tarjeta */
.promo__foto{background:var(--n-100)}

/* ---------- Pie ----------
   Una sola línea de enlaces. Sin fondo propio ni borde: continúa la página. */
.pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--e-8) var(--e-24);
  padding:var(--e-48) var(--margen);
  font-size:var(--t-cuerpo);color:var(--n-600);
}
.pie a:hover{color:var(--n-950)}
.pie .icono{width:18px;height:18px}
.pie__red{display:flex;color:var(--n-600)}
.pie__red:hover{color:var(--n-950)}



/* ---------- Adaptación ---------- */
@media (max-width:1024px){
  :root{--t-display:52px;--t-sub:22px;--t-h1:36px;--t-dato:40px}
  .tarjeta__contenido{padding-inline:var(--e-32)}
  .insignias{gap:var(--e-24)}
  :root{--margen:var(--e-24)}
  .nav{gap:var(--e-24)}
  .marco--foto{background-position:center 42%}
}
@media (max-width:720px){
  :root{--t-display:38px;--t-sub:19px;--header-h:52px;--slide-h:86svh;--margen:var(--e-16)}
  .nav{
    position:fixed;inset:var(--header-h) 0 0 0;
    display:flex;flex-direction:column;gap:0;align-items:stretch;
    background:var(--n-000);
    padding:var(--e-16) var(--margen) var(--e-32);
    opacity:0;visibility:hidden;translate:0 -8px;
    transition:opacity var(--t-estado) ease,translate var(--t-estado) ease,visibility var(--t-estado) ease;
  }
  .nav[data-abierto]{opacity:1;visibility:visible;translate:0 0}
  .cabecera:has(.nav[data-abierto]){background:var(--n-000)}
  .nav a,.nav .inactivo{
    justify-content:flex-start;
    padding:var(--e-16) 0;
    font-size:24px;font-weight:500;
  }
  .cabecera{background:transparent}
  .heroe{margin-top:0}
  .icon-btn:hover{background:transparent}
  .icon-btn--cuenta{display:none}
  .menu-btn{display:flex}
  .icono{width:22px;height:22px}
  .acciones{width:100%}
  .acciones .boton{flex:1;min-width:0;padding-inline:var(--e-8)}
  .marco__nota{max-width:none}
  .marco--foto{background-position:center center}
  .flecha{display:none}
  .expansible{padding-block:var(--e-32) 0}
  .vitrina{padding-block:var(--e-32) var(--e-24)}
  .vitrina .flecha{display:none}
  .promos{grid-template-columns:1fr;gap:var(--e-16);padding-top:var(--e-32)}
  .promo{grid-template-columns:1fr;grid-template-rows:auto 160px;min-height:0}
  .promo__texto{padding:var(--e-24)}
  .tarjeta{grid-template-columns:1fr;margin-inline:var(--e-16)}
  .tarjeta__contenido{grid-column:1;order:1;padding:var(--e-24)}
  .tarjeta__media{grid-column:1;order:2}
  .insignias{flex-direction:column;gap:var(--e-16)}
  .acciones--tarjeta{margin-top:var(--e-32)}
  .acciones--tarjeta .boton{max-width:none}
  .media-hueco{aspect-ratio:3/4;border-radius:0 0 var(--r-boton) var(--r-boton)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ---------- Página de categoría ----------
   Diagramación de tresur.shop/search con los tokens de EcoBlue.
   Reutiliza .ficha, .boton y .chip sin componentes nuevos. */
.categoria{
  max-width:1280px;margin:0 auto;
  padding:var(--e-24) var(--margen) var(--e-48);
}
.pagina{padding-top:var(--header-h)}
/* Alto total de la cabecera de categoría (min-height + padding).
   Los filtros se anclan justo debajo de ella. */
:root{--cabeza-h:68px}
/* Franja a todo el ancho: sin ella, al hacer scroll se ve pasar el contenido
   por los costados del contenedor centrado. */
.cabeza-franja{
  position:sticky;top:var(--header-h);z-index:10;
  background:var(--n-000);
}
.categoria__cabeza{
  max-width:1280px;margin:0 auto;
  padding:var(--e-8) var(--margen);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--e-16);
  min-height:calc(var(--cabeza-h) - var(--e-16));
}
.migas{display:flex;gap:var(--e-8);font-size:var(--t-cuerpo);color:var(--n-600)}
.migas a:hover{color:var(--n-950)}
.migas [aria-current]{color:var(--n-950)}
.conteo{font-size:var(--t-cuerpo);color:var(--n-600)}

.categoria__cuerpo{display:grid;grid-template-columns:240px 1fr;gap:var(--e-24);align-items:start}

/* Chip activo: mismo lenguaje que el de "Pronto", pero accionable y con cierre */
.chip--activo{
  display:inline-flex;align-items:center;gap:var(--e-4);
  padding:var(--e-4) var(--e-8);border:0;border-radius:var(--r-boton);
  background:var(--cielo);color:var(--onyx);
  font-family:inherit;font-size:var(--t-pie);font-weight:600;line-height:1.4;
  cursor:pointer;
  transition:background-color var(--t-estado) ease,
             translate var(--t-estado) var(--curva);
}
.chip--activo svg{width:12px;height:12px;stroke-width:2.5;flex:none}
.activos{display:flex;flex-wrap:wrap;gap:var(--e-8)}
.activos:empty{display:none}

/* Filtros: quedan fijos mientras corren los resultados */
.filtros{
  position:sticky;top:calc(var(--header-h) + var(--cabeza-h) + var(--e-16));
  display:flex;flex-direction:column;gap:var(--e-32);
  max-height:calc(100svh - var(--header-h) - var(--cabeza-h) - var(--e-32));
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* Acordeón nativo, sin líneas ni divisores */
.filtro > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-8);
  padding:var(--e-4) 0;margin-bottom:var(--e-4);
  font-size:var(--t-cuerpo);font-weight:600;
  cursor:pointer;list-style:none;
}
.filtro > summary::-webkit-details-marker{display:none}
.filtro > summary:hover{color:var(--accion)}
/* El signo se dibuja con dos trazos: al abrir, el vertical se contrae y queda un menos */
.signo{position:relative;width:10px;height:10px;flex:none;color:var(--n-400)}
.signo::before,.signo::after{
  content:"";position:absolute;background:currentColor;
}
.signo::before{inset:4.5px 0;height:1px}
.signo::after{
  inset:0 4.5px;width:1px;
  transition:scale var(--t-estado) var(--curva);
}
.filtro[open]:not([data-cerrando]) .signo::after{scale:1 0}

/* El contenido se despliega con una rejilla de 0fr a 1fr: es lo único
   que se puede animar sin conocer la altura del contenido de antemano. */
.filtro__cuerpo{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-estado) var(--curva);
}
.filtro[open]:not([data-cerrando]) .filtro__cuerpo{grid-template-rows:1fr}
.filtro__cuerpo > *{overflow:hidden;min-height:0}
.filtro ul{margin:0;padding:var(--e-4) 0 0;list-style:none;display:grid;gap:var(--e-8)}
.filtro label{
  display:flex;align-items:center;gap:var(--e-8);
  font-size:var(--t-cuerpo);color:var(--n-700);cursor:pointer;
}
.filtro input[type=checkbox]{
  width:16px;height:16px;flex:none;margin:0;
  accent-color:var(--accion);cursor:pointer;
}
.campo{
  width:100%;padding:var(--e-8) var(--e-12);
  border:1px solid var(--n-200);border-radius:var(--r-boton);
  background:var(--n-000);color:var(--n-700);
  font:inherit;font-size:var(--t-cuerpo);
}
.campo::placeholder{color:var(--n-400)}
.campo:focus-visible{border-color:var(--accion)}
.rango{display:flex;align-items:center;gap:var(--e-8)}
.rango span{color:var(--n-400)}

/* Banner de categoría: alargado, con el nombre en grande sobre la foto */
.banner{
  container-type:inline-size;
  position:relative;overflow:hidden;
  aspect-ratio:6.5/1;min-height:96px;
  margin-bottom:var(--e-16);
  border-radius:var(--r-boton);
  background:var(--n-100);
  display:flex;align-items:center;justify-content:center;
}
.banner h1{
  margin:0;
  font-size:clamp(28px, 9.6cqw, 76px);
  font-weight:600;line-height:1;
  letter-spacing:var(--track-marca);text-indent:var(--track-marca);
  text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.42);
}

/* Rejilla de resultados: la ficha suelta su ancho fijo y se adapta a la columna */
.resultados{
  display:grid;gap:var(--e-16);
  grid-template-columns:repeat(4,1fr);
}
.resultados .ficha{width:auto;scroll-snap-align:none;opacity:1;scale:1}

@media (max-width:1024px){
  .categoria__cuerpo{grid-template-columns:200px 1fr}
  .resultados{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .categoria__cuerpo{grid-template-columns:1fr}
  .resultados{grid-template-columns:repeat(2,1fr)}
  .banner{aspect-ratio:4/1}
  /* En móvil los filtros van arriba en dos columnas: fijarlos comería la pantalla */
  .filtros{
    position:static;max-height:none;overflow:visible;
    display:grid;grid-template-columns:1fr 1fr;
    gap:var(--e-24);padding-bottom:var(--e-8);
  }
}

/* ---------- Carrito ----------
   El panel entra desde la derecha sobre un velo que bloquea el catálogo:
   agregar una pieza interrumpe la navegación y pone el pago a un clic.
   Abre más lento de lo que cierra, para que la entrada se lea y la salida
   no estorbe. El desenfoque de 2px hace que un recorrido corto se sienta
   completo. Técnica tomada de transitions.dev (07-panel-reveal). */
:root{
  --panel-w:384px;
  --panel-abre:.4s;
  --panel-cierra:.35s;
  --panel-curva:cubic-bezier(.22,1,.36,1);
}

/* Contador del icono de la cabecera */
.icon-btn{position:relative}
.carrito-contador{
  position:absolute;top:2px;right:2px;
  min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:var(--accion);color:var(--n-000);
  font-size:11px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}
/* Late al cambiar la cifra: confirma que el clic entró sin robar atención */
.carrito-contador--late{animation:late .4s var(--panel-curva)}
@keyframes late{
  0%{scale:1}
  40%{scale:1.35}
  100%{scale:1}
}

.velo{
  position:fixed;inset:0;z-index:60;
  background:rgba(14,19,53,.4);
  opacity:0;
  transition:opacity var(--panel-cierra) var(--panel-curva);
}
.velo[data-abierto]{opacity:1;transition-duration:var(--panel-abre)}

/* Es un <dialog>: cerrado lo oculta el navegador, así que el panel no cae
   en el flujo de la página si la hoja de estilos no llega. A cambio hay que
   deshacer el borde, el relleno y el centrado que trae de fábrica. */
.panel{
  position:fixed;z-index:70;
  inset:0 0 0 auto;width:var(--panel-w);max-width:100%;
  /* El navegador le da height:fit-content a los dialog: sin esto el panel
     mide lo que su contenido y no llega al borde inferior. */
  height:100%;max-height:100%;
  margin:0;padding:0;border:0;
  color:inherit;background:var(--n-000);
  translate:100% 0;
  filter:blur(2px);
  transition:translate var(--panel-cierra) var(--panel-curva),
             filter var(--panel-cierra) var(--panel-curva);
}
.panel[open]{display:flex;flex-direction:column}
.panel[data-abierto]{
  translate:0 0;filter:blur(0);
  transition-duration:var(--panel-abre);
}
.panel__cabeza{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-16);
  padding:var(--e-12) var(--e-12) var(--e-12) var(--e-24);
  border-bottom:1px solid var(--n-100);
}
.panel__titulo{margin:0;font-size:var(--t-sub);font-weight:600;line-height:1.2}
.panel__cuerpo{
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--e-16) var(--e-24);
  display:flex;flex-direction:column;gap:var(--e-12);
}
.panel__vacio{
  margin:auto 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--e-24);
}
.panel__vacio p{margin:0;color:var(--n-600)}
.panel__pie{
  flex:none;
  display:flex;flex-direction:column;gap:var(--e-12);
  padding:var(--e-16) var(--e-24) var(--e-24);
  border-top:1px solid var(--n-100);
}
.panel__pie:empty{display:none}
.panel__pie .boton{width:100%}
.panel__total{
  margin:0;display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-sub);font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* Acción destructiva: se alinea a la derecha y no compite con los botones */
.enlace-riesgo{
  align-self:flex-end;
  padding:0;border:0;background:none;
  color:#B3261E;font-size:var(--t-cuerpo);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.enlace-riesgo:hover{color:#7F1B15}

/* Línea del carrito */
.linea{
  display:grid;grid-template-columns:56px 1fr;gap:var(--e-12);
  padding:var(--e-12);
  border-radius:var(--r-card);
  background:var(--n-050);
}
.linea__foto{
  aspect-ratio:1;border-radius:var(--r-boton);
  background:var(--n-100);
}
.linea__datos{min-width:0;display:flex;flex-direction:column;gap:var(--e-4)}
.linea__nombre{
  margin:0;font-size:var(--t-cuerpo);font-weight:500;line-height:1.25;
}
.linea__precio{margin:0;font-size:var(--t-pie);color:var(--n-600)}
.linea__pie{
  margin-top:var(--e-4);
  display:flex;align-items:center;gap:var(--e-8);
}
.linea__subtotal{
  margin:0 0 0 auto;
  font-size:var(--t-cuerpo);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Paso de cantidad */
.paso{
  display:flex;align-items:center;gap:var(--e-4);
  border:1px solid var(--n-200);border-radius:var(--r-boton);
  background:var(--n-000);
}
.paso__btn{
  width:28px;height:28px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--n-950);cursor:pointer;
  transition:color var(--t-estado) ease;
}
.paso__btn:hover:not(:disabled){color:var(--accion)}
/* Tope de existencias: el botón se apaga en vez de desaparecer, para que se
   entienda que el límite es el inventario y no un error */
.paso__btn:disabled{color:var(--n-200);cursor:not-allowed}
.paso__n{
  min-width:20px;text-align:center;
  font-size:var(--t-cuerpo);font-variant-numeric:tabular-nums;
}
.icono--paso{width:14px;height:14px}
.icon-btn--riesgo{width:32px;height:32px;color:var(--n-400)}
.icon-btn--riesgo:hover{background:transparent;color:#B3261E}
.icon-btn--riesgo .icono{width:18px;height:18px}

/* Bajo 720 el panel deja de ser panel: toma la pantalla completa, como en la
   referencia. A ese ancho un lateral de 384px dejaría una franja inútil. */
@media (max-width:720px){
  :root{--panel-w:100%}
  .panel__cuerpo{padding:var(--e-16)}
  /* A pantalla completa el pie queda contra el borde del dispositivo: la
     barra de gestos del iPhone se comería el botón de pago. */
  .panel__pie{
    padding:var(--e-16) var(--e-16)
            max(var(--e-24), calc(env(safe-area-inset-bottom) + var(--e-8)));
  }
}

@media (prefers-reduced-motion:reduce){
  .carrito-contador--late{animation:none}
}

/* ---------- Página de carrito ----------
   Mismo reparto que la categoría: el contenido corre a la izquierda y la
   columna de cierre se queda quieta a la derecha. */
.carrito{padding:0 var(--margen) var(--e-64)}
.carrito__titulo{
  margin:0 0 var(--e-24);
  font-size:var(--t-h1);font-weight:600;line-height:1.1;
}
.carrito__cuerpo{
  display:grid;grid-template-columns:1fr 340px;
  gap:var(--e-32);align-items:start;
}
.carrito__lineas{display:flex;flex-direction:column;gap:var(--e-12)}
.carrito__vacio{
  padding:var(--e-64) 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--e-24);
}
.carrito__vacio p{margin:0;color:var(--n-600)}

/* La línea de la página respira más que la del panel */
.linea--pagina{
  grid-template-columns:88px 1fr;
  gap:var(--e-16);padding:var(--e-16);
}
.linea--pagina .linea__nombre{font-size:var(--t-bajada)}
.linea__tope{
  font-size:var(--t-pie);color:var(--n-600);white-space:nowrap;
}

.resumen{
  position:sticky;top:calc(var(--header-h) + var(--e-24));
  display:flex;flex-direction:column;gap:var(--e-12);
  padding:var(--e-24);
  border:1px solid var(--n-100);border-radius:var(--r-card);
  background:var(--n-000);
}
.resumen:empty{display:none}
.resumen__titulo{margin:0;font-size:var(--t-sub);font-weight:600;line-height:1.2}
.resumen__fila{
  margin:0;display:flex;justify-content:space-between;
  color:var(--n-600);font-variant-numeric:tabular-nums;
}
.resumen__total{
  margin:0;padding-top:var(--e-12);
  border-top:1px solid var(--n-100);
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-sub);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.resumen .boton{width:100%;margin-top:var(--e-4)}
.resumen__seguir{
  text-align:center;color:var(--n-600);font-size:var(--t-cuerpo);
}
.resumen__seguir:hover{color:var(--accion)}
.carrito .enlace-riesgo{margin-top:var(--e-4)}

@media (max-width:1024px){
  .carrito__cuerpo{grid-template-columns:1fr}
  /* Sin columna propia el resumen deja de fijarse: quedaría flotando sobre
     las líneas en vez de al lado */
  .resumen{position:static}
}
@media (max-width:720px){
  .carrito__titulo{font-size:var(--t-sub)}
  .linea--pagina{grid-template-columns:64px 1fr;padding:var(--e-12)}
  /* El subtotal salta de renglón: con la papelera y el paso no cabe en 320px */
  .linea--pagina .linea__pie{flex-wrap:wrap}
  .linea--pagina .linea__subtotal{margin-left:0}
}

/* ---------- Checkout ----------
   Mismo reparto de la página de carrito: el formulario corre a la izquierda
   y la columna de cierre se queda quieta a la derecha. */
.checkout{padding:0 var(--margen) var(--e-64)}
.checkout__cuerpo{
  display:grid;grid-template-columns:1fr 340px;
  gap:var(--e-32);align-items:start;
}
.checkout__cuerpo[hidden]{display:none}
.checkout__columna{display:flex;flex-direction:column;gap:var(--e-16)}

.tarjeta-bloque{
  padding:var(--e-24);
  border:1px solid var(--n-100);border-radius:var(--r-card);
  background:var(--n-000);
}
.tarjeta-bloque__titulo{
  margin:0 0 var(--e-4);
  font-size:var(--t-sub);font-weight:600;line-height:1.2;
}
.tarjeta-bloque__nota{margin:0 0 var(--e-16);color:var(--n-600);font-size:var(--t-cuerpo)}
.tarjeta-bloque__titulo:last-of-type{margin-bottom:var(--e-16)}

.campos{display:flex;flex-direction:column;gap:var(--e-12);margin-top:var(--e-16)}
.campos[hidden]{display:none}
.campos__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-12)}
.campo-bloque{display:flex;flex-direction:column;gap:var(--e-4)}
.campo-bloque > span{font-size:var(--t-cuerpo);font-weight:500}
.campo-bloque i{color:#B3261E;font-style:normal}
.campo-bloque .campo{width:100%;height:44px;padding:0 var(--e-12)}
.campo-bloque select.campo{appearance:none;background:var(--n-000)}
.campo[aria-invalid]{border-color:#B3261E}
.campo-error{
  color:#B3261E;font-size:var(--t-pie);font-style:normal;
}
.campo-error[hidden]{display:none}

/* Forma de entrega */
.opciones{display:flex;flex-direction:column;gap:var(--e-8);margin-top:var(--e-16)}
.opcion{
  display:flex;align-items:flex-start;gap:var(--e-12);
  padding:var(--e-12) var(--e-16);
  border:1px solid var(--n-200);border-radius:var(--r-card);
  cursor:pointer;
  transition:border-color var(--t-estado) ease, background-color var(--t-estado) ease;
}
.opcion:hover{border-color:var(--n-400)}
/* La tarjeta entera reacciona al radio que lleva dentro */
.opcion:has(input:checked){border-color:var(--accion);background:#F5F8FF}
.opcion input{margin:3px 0 0;accent-color:var(--accion);flex:none}
.opcion__cuerpo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.opcion__titulo{font-size:var(--t-cuerpo);font-weight:600}
.opcion__nota{font-size:var(--t-pie);color:var(--n-600);line-height:1.4}
.opcion__precio{
  font-size:var(--t-cuerpo);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.retiro{
  margin-top:var(--e-16);padding:var(--e-16);
  border-radius:var(--r-card);background:var(--n-050);
}
.retiro[hidden]{display:none}
.retiro__titulo{margin:0 0 var(--e-4);font-size:var(--t-pie);color:var(--n-600)}
.retiro__dato{margin:0 0 var(--e-8);font-size:var(--t-bajada);font-weight:600}
.retiro__nota{margin:0;font-size:var(--t-pie);color:var(--n-600);line-height:1.4}

/* Línea compacta del resumen: aquí ya no se edita, solo se confirma */
.linea-corta{
  display:grid;grid-template-columns:40px 1fr auto auto;
  align-items:center;gap:var(--e-12);
  padding:var(--e-8) 0;
  border-bottom:1px solid var(--n-100);
}
.linea-corta:last-of-type{border-bottom:0}
.linea-corta__foto{aspect-ratio:1;border-radius:var(--r-boton);background:var(--n-100)}
.linea-corta__nombre{margin:0;font-size:var(--t-cuerpo);min-width:0}
.linea-corta__cantidad{margin:0;font-size:var(--t-pie);color:var(--n-600)}
.linea-corta__precio{
  margin:0;font-size:var(--t-cuerpo);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.checkout__editar{
  display:inline-block;margin-top:var(--e-16);
  color:var(--n-600);font-size:var(--t-cuerpo);
  text-decoration:underline;text-underline-offset:3px;
}
.checkout__editar:hover{color:var(--accion)}

.resumen--checkout{top:calc(var(--header-h) + var(--e-24))}
.resumen__legal{
  margin:0;text-align:center;
  font-size:var(--t-pie);color:var(--n-600);line-height:1.4;
}
.medios{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-4);
}
.medios li{
  padding:2px var(--e-8);
  border:1px solid var(--n-200);border-radius:var(--r-boton);
  font-size:var(--t-pie);color:var(--n-600);
}
.aviso{
  display:flex;gap:var(--e-8);
  padding:var(--e-12);
  border:1px solid #F3C7C4;border-radius:var(--r-card);
  background:#FDF3F2;color:#B3261E;
}
.aviso[hidden]{display:none}
.aviso p{margin:0;font-size:var(--t-cuerpo);line-height:1.4}
.aviso .icono{flex:none;margin-top:1px}

/* ---------- Confirmación ---------- */
.confirmacion{
  max-width:560px;margin:0 auto;
  padding:var(--e-64) var(--margen);
  text-align:center;
}
.confirmacion__marca{
  width:64px;height:64px;margin:0 auto var(--e-24);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--cielo);color:var(--onyx);
}
.confirmacion__marca svg{width:32px;height:32px}
/* El visto se dibuja solo: el trazo entra desde cero al cargar la página */
.confirmacion__trazo{
  stroke-dasharray:22;stroke-dashoffset:22;
  animation:trazar .6s var(--panel-curva) .15s forwards;
}
@keyframes trazar{to{stroke-dashoffset:0}}
.confirmacion__titulo{margin:0 0 var(--e-8);font-size:var(--t-h1);font-weight:600;line-height:1.1}
.confirmacion__bajada{margin:0 0 var(--e-32);color:var(--n-600);font-size:var(--t-bajada)}
.confirmacion__caja{
  text-align:left;
  border:1px solid var(--n-100);border-radius:var(--r-card);
  background:var(--n-000);
}
.confirmacion__caja:empty{display:none}
.datos-pedido{margin:0;padding:var(--e-8) var(--e-24)}
.datos-pedido > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-16);
  padding:var(--e-12) 0;
  border-bottom:1px solid var(--n-100);
}
.datos-pedido > div:last-child{border-bottom:0}
.datos-pedido dt{color:var(--n-600);font-size:var(--t-cuerpo);flex:none}
.datos-pedido dd{margin:0;text-align:right;font-size:var(--t-cuerpo)}
.datos-pedido__fuerte{font-weight:600;font-variant-numeric:tabular-nums}
/* El código es lo que el cliente muestra en el taller: se lee de lejos */
.datos-pedido__codigo{
  font-size:var(--t-sub);font-weight:700;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.confirmacion__acciones{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-12);
  margin-top:var(--e-32);
}

@media (max-width:1024px){
  .checkout__cuerpo{grid-template-columns:1fr}
  .resumen--checkout{position:static}
}
@media (max-width:720px){
  .campos__par{grid-template-columns:1fr}
  .tarjeta-bloque{padding:var(--e-16)}
  .confirmacion{padding:var(--e-40) var(--margen)}
  .confirmacion__titulo{font-size:var(--t-sub)}
  .confirmacion__acciones .boton{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .confirmacion__trazo{animation:none;stroke-dashoffset:0}
}

/* ---------- Ficha de producto ----------
   Dos columnas como en la referencia: la pieza a la izquierda ocupando lo que
   pueda, y a la derecha lo que hace falta para decidir. */
.producto{padding:0 var(--margen) var(--e-64)}
.producto__cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  gap:var(--e-48);align-items:start;
}
.producto__foto{
  aspect-ratio:4/3;border-radius:var(--r-card);
  background:var(--n-100);
}
.producto__datos{display:flex;flex-direction:column;gap:var(--e-8)}
.producto__marca{
  margin:0;color:var(--n-600);
  font-size:var(--t-cuerpo);text-transform:uppercase;letter-spacing:.08em;
}
.producto__nombre{margin:0;font-size:var(--t-h1);font-weight:600;line-height:1.1}
.producto__precio{
  margin:var(--e-8) 0 0;
  font-size:var(--t-dato);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}
.producto__stock{margin:0;color:var(--n-600);font-size:var(--t-cuerpo)}
/* Cuando queda poco, el dato deja de ser informativo y pasa a ser argumento */
.producto__stock--poco{color:#B3261E;font-weight:600}
.producto__compra{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-12);
  margin-top:var(--e-24);
}
.producto__compra .paso{height:44px;padding:0 var(--e-4)}
.producto__compra .paso__btn{width:36px;height:36px}
.producto__cta{flex:1;min-width:200px;gap:var(--e-8)}
.producto__nota{
  margin:var(--e-12) 0 0;color:var(--n-600);
  font-size:var(--t-cuerpo);line-height:1.45;
}

.detalles{
  margin:var(--e-32) 0 0;padding:var(--e-8) var(--e-24);
  border:1px solid var(--n-100);border-radius:var(--r-card);
}
.detalles > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-16);
  padding:var(--e-12) 0;
  border-bottom:1px solid var(--n-100);
}
.detalles > div:last-child{border-bottom:0}
.detalles dt{margin:0;color:var(--n-600);font-size:var(--t-cuerpo);flex:none}
.detalles dd{margin:0;text-align:right;font-size:var(--t-cuerpo)}

@media (max-width:1024px){
  .producto__cuerpo{grid-template-columns:1fr;gap:var(--e-24)}
  .producto__foto{aspect-ratio:16/10}
}
@media (max-width:720px){
  .producto__nombre{font-size:var(--t-sub)}
  .producto__precio{font-size:var(--t-h1)}
  .producto__cta{width:100%;flex-basis:100%}
}