:root {
  --fondo: #07060d;
  --superficie: #14111f;
  --texto: #F4F1FF;
  --borde: #3a2f66;
  --negro: #111111;
  --lima: #C6FF3D;
  --violeta: #6C3BFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* CABECERA */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: var(--fondo);
  border-bottom: 2px solid var(--violeta);
}

/* CABECERA DE LA TIENDA (la que tiene menú; la de la ficha sigue como arriba).
   Ordenador: tres columnas (logo | menú | buscador). Las de los lados miden lo mismo y el margen es
   igual a los dos lados: así el menú queda centrado respecto a toda la página, no al hueco que sobra */
@media (min-width: 701px) {
  /* minmax(0, 1fr): las dos columnas de los lados miden siempre lo mismo, aunque lo de dentro sea ancho */
  .cabecera:has(> .menu) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 24px;
    padding-right: 40px;
  }

  .cabecera:has(> .menu) .logo {
    justify-self: start;
  }

  .cabecera:has(> .menu) .menu {
    justify-self: center;
  }

  /* El buscador se aparta del carrito flotante, que está fijo encima de la cabecera a la derecha */
  .cabecera:has(> .menu) .buscar-form {
    justify-self: end;
    margin-right: 140px;
    /* Ocupa lo que quede en su columna (hasta 250 px), sin empujar al menú */
    width: min(250px, calc(100% - 140px));
  }

  .cabecera:has(> .menu) .buscador {
    width: 100%;
  }
}

/* Tablet y portátil pequeño: no cabe todo en una fila sin tapar el carrito, así que el menú
   pasa a su propia fila, centrada, debajo del logo y el buscador */
@media (min-width: 701px) and (max-width: 1199px) {
  .cabecera:has(> .menu) {
    grid-template-columns: 1fr auto;
    row-gap: 12px;
  }

  .cabecera:has(> .menu) .logo {
    grid-column: 1;
    grid-row: 1;
  }

  .cabecera:has(> .menu) .buscar-form {
    grid-column: 2;
    grid-row: 1;
  }

  .cabecera:has(> .menu) .menu {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.logo {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--lima);
}

.menu {
  display: flex;
  gap: 36px;
}

/* Cada enlace: 44 px de alto para pulsar cómodo; la raya de abajo marca el activo */
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.menu a:hover {
  color: var(--lima);
}

/* Enlace de la categoría que se está viendo (lo marca script.js con aria-current) */
.menu a[aria-current="page"] {
  color: var(--lima);
  border-bottom-color: var(--lima);
}

.menu a:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hueco a la derecha para el carrito flotante (está fijo encima de la cabecera).
   La cabecera de la tienda lo deja en su propia columna (arriba) */
.cabecera {
  padding-right: 190px;
}

/* BARRA FIJA (index.html): la franja de ofertas y la cabecera se quedan pegadas arriba al bajar.
   --alto-barra lo mide script.js (altura entera de la barra); --recorte-barra es lo que sube la barra
   compacta en el móvil (franja y logo), así solo quedan el ☰ y el buscador.
   z 8: por encima del contenido, por debajo del carrito flotante (9), su panel (10, 11) y las ventanas */
:root {
  --alto-barra: 0px;
  --recorte-barra: 0px;
}

/* Saltar a la tienda o a un producto (scrollIntoView, #catalogo): lo de arriba no queda debajo de la barra */
html {
  scroll-padding-top: var(--alto-barra);
}

.barra-fija {
  position: sticky;
  top: 0;
  z-index: 8;
  background: rgba(7, 6, 13, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease-out;
}

/* Sin desenfoque (navegadores antiguos): fondo opaco, para que no se vea el contenido a través */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra-fija {
    background: var(--fondo);
  }
}

/* Dentro de la barra, la franja y la cabecera no llevan fondo ni desenfoque propios: los pone la barra */
.barra-fija .franja-ofertas,
.barra-fija .cabecera {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Móvil: el menú ☰ abierto se despliega por encima del contenido, justo debajo de la barra
   (si empujara la página, al abrirlo con la página bajada todo saltaría hacia abajo) */
@media (max-width: 700px) {
  .barra-fija .menu.abierto {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 20px 8px;
    background: var(--fondo);
    border-bottom: 2px solid var(--violeta);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  }
}

/* Sombra al bajar (solo cambia su opacidad): oscura, con un filo lima muy suave bajo la línea violeta */
.barra-fija::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  background: linear-gradient(rgba(198, 255, 61, 0.14), rgba(198, 255, 61, 0) 2px),
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.barra-fija.bajada::after {
  opacity: 1;
}

/* Móvil al bajar: la barra sube hasta dejar solo el ☰ y el buscador (vuelve entera al subir).
   El carrito flotante sube a la vez (--sube-carrito) hasta la fila del ☰, para no tapar el buscador.
   Va con "translate" (no con "transform"), así no pisa el efecto al pulsarlo */
.barra-fija.compacta {
  transform: translateY(calc(-1 * var(--recorte-barra)));
}

body.barra-compacta .carrito-flotante {
  translate: 0 calc(-1 * var(--sube-carrito, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .barra-fija,
  .barra-fija::after {
    transition: none;
  }
}

/* BANNER */
.banner {
  background: linear-gradient(135deg, #6C3BFF, #2a0f7a);
  color: white;
  text-align: center;
  padding: 120px 20px;
}

.banner-etiqueta {
  color: var(--lima);
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* El tamaño crece con el ancho de la pantalla: 34 px en móvil, hasta 72 px en ordenador */
.banner h1 {
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1.08;
  margin: 20px auto;
  text-wrap: balance;
}

/* Cada frase en bloque: el corte de línea cae entre las dos (y, si una no cabe, se reparte equilibrada) */
.banner-frase {
  display: inline-block;
}

/* ACENTO DEL TÍTULO ("en tu armario."): degradado morado eléctrico con resplandor, un reflejo de luz
   que lo recorre y destellos. El reflejo y los destellos van superpuestos (absolute): el título no
   cambia de tamaño ni de sitio. Solo se anima transform y opacity */
.banner-acento {
  position: relative;
}

/* Si el acento queda pegado al borde (unos 1.190 px de ancho), un destello asomaba por la derecha
   y salía barra de desplazamiento horizontal: lo que sobresalga por los lados se recorta */
.banner {
  overflow-x: clip;
}

.acento-texto {
  /* El final es #9B6CF8 y no #8B5CF6: sobre la parte clara de la foto, #8B5CF6 se quedaba en 2,8:1
     de contraste (menos de 3:1); #9B6CF8 pasa de 3:1 y se ve casi igual */
  background: linear-gradient(100deg, #C4A1FF 0%, #A855F7 55%, #9B6CF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* drop-shadow y no text-shadow: con el texto en degradado, la sombra se vería encima de las letras */
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.45));
}

/* Reflejo: una "ventana" estrecha con una copia blanca del texto. La ventana avanza y la copia
   retrocede lo mismo, así las letras no se mueven y solo pasa la luz por encima de ellas */
.acento-reflejo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.acento-reflejo-ventana {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  overflow: hidden;
  /* Bordes difuminados: la franja de luz es suave */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  transform: translateX(-100%);
  animation: reflejoVentana 5.5s ease-in-out 1.2s infinite;
}

/* Mide lo mismo que el acento (4 veces la ventana) y empieza alineada con él */
.acento-reflejo-texto {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  /* Sin centrar ni partir líneas (lo heredaría del título): así coincide letra a letra con el acento */
  white-space: nowrap;
  text-align: left;
  text-wrap: nowrap;
  color: rgba(255, 255, 255, 0.85);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  transform: translateX(25%);
  animation: reflejoTexto 5.5s ease-in-out 1.2s infinite;
}

/* La luz cruza en el primer 35 % del ciclo (unos 2 s) y luego descansa fuera, a la derecha */
@keyframes reflejoVentana {
  0% { transform: translateX(-100%); }
  35%, 100% { transform: translateX(400%); }
}

@keyframes reflejoTexto {
  0% { transform: translateX(25%); }
  35%, 100% { transform: translateX(-100%); }
}

/* Destellos: estrellas de 4 puntas (clip-path) en blanco y lila, cada una a su ritmo */
.destellos {
  position: absolute;
  inset: -0.35em -0.4em;
  pointer-events: none;
}

.destello {
  position: absolute;
  width: 0.3em;
  height: 0.3em;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  transform: scale(0.3) rotate(0deg);
  animation: destello 2.6s ease-in-out infinite;
}

.destello:nth-child(1) { top: 2%; left: 4%; animation-delay: 0s; }
.destello:nth-child(2) { top: 6%; left: 47%; width: 0.22em; height: 0.22em; background: #D8C2FF; animation-duration: 2.2s; animation-delay: 0.7s; }
.destello:nth-child(3) { top: -2%; right: 4%; width: 0.34em; height: 0.34em; animation-duration: 3s; animation-delay: 1.4s; }
.destello:nth-child(4) { bottom: 4%; left: 22%; width: 0.2em; height: 0.2em; background: #D8C2FF; animation-duration: 2.4s; animation-delay: 1.9s; }
.destello:nth-child(5) { bottom: 0; right: 24%; width: 0.26em; height: 0.26em; animation-duration: 2.8s; animation-delay: 0.4s; }
.destello:nth-child(6) { top: 40%; right: -3%; width: 0.18em; height: 0.18em; background: #D8C2FF; animation-duration: 2.5s; animation-delay: 2.3s; }

@keyframes destello {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* En el móvil, solo 3 destellos */
@media (max-width: 700px) {
  .destello:nth-child(2),
  .destello:nth-child(4),
  .destello:nth-child(6) {
    display: none;
  }
}

.banner-texto {
  font-size: 20px;
  margin-bottom: 30px;
}

.boton {
  display: inline-block;
  background: var(--lima);
  color: var(--negro);
  padding: 16px 36px;
  border-radius: 40px;
  font-weight: bold;
}

/* CATÁLOGO */
.catalogo {
  padding: 80px 40px;
}

.catalogo h2 {
  font-size: 40px;
  margin-bottom: 40px;
  text-align: center;
}

/* auto-fill: si el filtro deja un solo producto, no se estira a todo el ancho */
.productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 28px;
}

/* TARJETA DE PRODUCTO */
.producto {
  display: flex;
  flex-direction: column;
}

/* Foto cuadrada (como las fotos reales): misma forma en todas y sin franjas */
.producto-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  margin-bottom: 16px;
  /* Contorno fino que se ve sobre cualquier color de foto */
  outline: 1px solid rgba(244, 241, 255, 0.12);
  outline-offset: -1px;
}

.producto h3 {
  font-size: 17px;
  line-height: 1.3;
  text-wrap: balance;
}

/* El nombre es un enlace: así la ficha también se abre con el teclado */
.producto-enlace:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
  border-radius: 4px;
}

.precio {
  font-size: 18px;
  font-weight: 700;
  color: var(--lima);
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ETIQUETA DEL TIPO junto al precio (tarjeta y ficha): Fan violeta, Player lima rellena, Retro lima */
.etiqueta-tipo {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--violeta);
  border-radius: 30px;
  color: #b9a4ff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.etiqueta-tipo.tipo-player {
  background: var(--lima);
  border-color: var(--lima);
  color: var(--negro);
}

.etiqueta-tipo.tipo-retro {
  border-color: var(--lima);
  color: var(--lima);
}

.ficha-precio .etiqueta-tipo {
  margin-left: 6px;
  font-size: 13px;
}

/* "(pantalón aparte del precio)" bajo el precio de las de niño (tarjeta y ficha) */
.nota-pantalon {
  margin-bottom: 8px;
  color: #a9a2c9;
  font-size: 13px;
}

.ficha-precio + .nota-pantalon {
  margin: -14px 0 20px;
  font-size: 13px;
}

.tallas {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #a9a2c9;
  margin-bottom: 16px;
}

/* ELEGIR TALLA EN LA TARJETA */
.elegir-talla {
  position: relative;
  margin-bottom: 24px;
}

.tallas-tarjeta {
  display: flex;
  gap: 6px;
}

/* Tallas de niño (16 a 28): dos filas de 4 */
.tallas-tarjeta.tallas-muchas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.talla-mini {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .talla-mini:not(.elegida):hover {
    border-color: var(--violeta);
  }
}

.talla-mini.elegida {
  background: var(--lima);
  color: var(--negro);
  border-color: var(--lima);
}

.talla-mini:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

/* El aviso ocupa el hueco bajo las tallas: la tarjeta no cambia de tamaño */
.aviso-talla {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  color: var(--lima);
}

/* Si se intenta añadir sin talla: las tallas se marcan y se mueven un poco */
.tallas-tarjeta.avisar .talla-mini,
.tallas-lista.avisar .talla {
  border-color: var(--lima);
}

.tallas-tarjeta.avisar,
.tallas-lista.avisar {
  animation: avisarTalla 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes avisarTalla {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* El botón va siempre abajo: alineado en toda la fila */
.producto .anadir {
  margin-top: auto;
}

/* "CONSULTAR PRECIO" (conjuntos, pantalones, chaquetas...): etiqueta violeta sobre la foto,
   texto en vez de precio y botón de contorno lima que abre WhatsApp */
.producto.consultar {
  position: relative;
}

.etiqueta-consultar {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 30px;
  background: var(--violeta);
  color: white;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  /* Sube con la foto al pasar el ratón */
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .producto:hover .etiqueta-consultar {
    transform: translateY(-4px);
  }
}

.precio-consultar {
  font-size: 16px;
  margin-bottom: 16px;
}

.boton-consulta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  color: var(--lima);
  border: 2px solid var(--lima);
  border-radius: 30px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.producto .boton-consulta {
  margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
  .boton-consulta:hover {
    background: var(--lima);
    color: var(--negro);
    transform: scale(1.03);
  }
}

.boton-consulta:active {
  transform: scale(0.97);
}

.boton-consulta:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

/* ANIMACIONES */
.producto {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.producto-foto {
  transition:
    box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  /* Se mueve solo la foto (no la tarjeta) para que no tiemble */
  .producto:hover .producto-foto {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--lima);
  }
}

.boton {
  transition: transform 0.2s ease, background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .boton:hover {
    transform: scale(1.03);
    background: white;
  }
}

.boton:active {
  transform: scale(0.97);
}

.banner h1 {
  animation: aparecer 1s ease both;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* VERSIÓN MÓVIL */
@media (max-width: 700px) {
  .cabecera {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
  }

  .menu {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    order: 3;
  }

  .banner {
    padding: 80px 20px;
  }

  .catalogo {
    padding: 50px 20px;
  }

  /* Dos columnas en móvil (una sola si la pantalla es muy estrecha) */
  .productos {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 28px 14px;
  }

  .producto-foto {
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .producto h3 {
    font-size: 15px;
  }

  .precio {
    font-size: 16px;
  }

  .tallas {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .producto .anadir {
    padding: 10px 8px;
    font-size: 14px;
  }

  .producto .boton-consulta {
    padding: 8px;
    font-size: 14px;
  }

  .etiqueta-consultar {
    top: 8px;
    left: 8px;
    font-size: 13px;
  }

  .precio-consultar {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .talla-mini {
    min-height: 44px;
  }
}

/* HAMBURGUESA */
.hamburguesa {
  display: none;
  background: var(--lima);
  color: var(--negro);
  border: none;
  font-size: 22px;
  padding: 8px 14px;
  border-radius: 30px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .hamburguesa {
    display: block;
  }

  .menu {
    display: none;
  }

  /* Menú abierto: lista vertical, cada enlace de 44 px de alto y separado */
  .menu.abierto {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--borde);
  }

  .menu.abierto a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-bottom: 1px solid var(--borde);
  }

  /* En el panel, el activo va en lima con un fondo suave (la raya de abajo es la del separador) */
  .menu.abierto a[aria-current="page"] {
    border-bottom-color: var(--borde);
    background: rgba(198, 255, 61, 0.08);
  }
}

/* BUSCADOR */
.buscador {
  padding: 10px 18px;
  border: 2px solid var(--borde);
  border-radius: 30px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* Ancho suficiente para leer la pista ("barça retro, betis 16/17…") */
  width: clamp(190px, 22vw, 270px);
}

.buscar-form {
  display: flex;
  margin: 0;
}

.buscador::placeholder {
  color: #9a93b8;
}

.buscador:focus {
  border-color: var(--violeta);
  box-shadow: 4px 4px 0 var(--violeta);
}

@media (max-width: 700px) {
  .buscar-form {
    width: 100%;
    order: 4;
  }

  /* 16 px: así el iPhone no amplía la pantalla al tocar el campo */
  .buscador {
    width: 100%;
    font-size: 16px;
  }
}

/* RESULTADOS DE BÚSQUEDA: título, "Borrar búsqueda" y la sugerencia cuando no hay resultados */
.cabecera-busqueda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(108, 59, 255, 0.45);
}

.cabecera-busqueda[hidden] {
  display: none;
}

.cabecera-busqueda-titulo {
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.borrar-busqueda {
  min-height: 44px;
  padding: 8px 18px;
  background: transparent;
  color: var(--lima);
  border: 2px solid var(--lima);
  border-radius: 30px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .borrar-busqueda:hover {
    background: var(--lima);
    color: var(--negro);
  }
}

.borrar-busqueda:focus-visible,
.sugerencia-busqueda:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

.sugerencia-busqueda {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 4px;
  color: var(--lima);
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px;
}

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

/* BOTÓN AÑADIR */
.anadir {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  background: var(--violeta);
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .anadir:hover {
    background: var(--lima);
    color: var(--negro);
    transform: scale(1.03);
  }
}

.anadir:active {
  transform: scale(0.97);
}

.anadir:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

/* PANEL DEL CARRITO */
.fondo-carrito {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.fondo-carrito.abierto {
  opacity: 1;
  pointer-events: auto;
}

.panel-carrito {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100%;
  height: 100%;
  background: var(--superficie);
  border-left: 2px solid var(--violeta);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 11;
  display: flex;
  flex-direction: column;
}

.panel-carrito.abierto {
  transform: translateX(0);
}

.panel-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cerrar,
.quitar {
  background: none;
  border: none;
  color: var(--texto);
  font-size: 18px;
  cursor: pointer;
}

.cerrar:hover,
.quitar:hover {
  color: var(--lima);
}

/* ✕ del carrito: círculo de 44 × 44 px, bien visible */
.cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--fondo);
  font-size: 20px;
}

/* En el móvil el carrito ocupa todo el ancho */
@media (max-width: 700px) {
  .panel-carrito {
    width: 100%;
    border-left: none;
  }
}

.lista-carrito {
  list-style: none;
  flex: 1;
  overflow-y: auto;
}

/* Cada línea: nombre y talla arriba, cantidad y subtotal abajo */
.linea-carrito {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}

.linea-nombre {
  display: block;
  font-weight: bold;
}

.linea-detalle {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #b5aed4;
  font-variant-numeric: tabular-nums;
}

.quitar {
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.linea-cantidad {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border: 1px solid var(--borde);
  border-radius: 30px;
}

.cantidad-boton {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--texto);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .cantidad-boton:hover:not(:disabled) {
    background: var(--violeta);
    color: white;
  }
}

.cantidad-boton:active:not(:disabled) {
  transform: scale(0.94);
}

.cantidad-boton:disabled {
  opacity: 0.3;
  cursor: default;
}

.cantidad-numero {
  min-width: 28px;
  text-align: center;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.linea-precio {
  justify-self: end;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.cerrar:focus-visible,
.quitar:focus-visible,
.cantidad-boton:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

/* Aviso discreto: productos quitados del carrito porque ya no existen */
.aviso-carrito {
  font-size: 13px;
  line-height: 1.4;
  color: #b5aed4;
}

.aviso-carrito[hidden] {
  display: none;
}

.panel-carrito .aviso-carrito {
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.ficha-info .aviso-carrito:not(:empty) {
  margin-top: 8px;
}

.carrito-vacio {
  padding: 32px 0;
  text-align: center;
  color: #b5aed4;
}

/* RESUMEN DEL CARRITO: queda fijo abajo; la lista de arriba es la que se desplaza */
.resumen-carrito {
  flex-shrink: 0;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.progreso-texto,
.progreso-oferta {
  font-size: 13px;
  line-height: 1.4;
}

.progreso-texto {
  font-weight: bold;
}

.progreso-barra {
  height: 8px;
  margin: 8px 0 10px;
  border-radius: 30px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.progreso-relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 30px;
  background: var(--violeta);
  transition: width 0.35s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s ease;
}

.progreso-barra.conseguido .progreso-relleno {
  background: var(--lima);
}

.progreso-oferta {
  color: #b5aed4;
}

.resumen-lineas {
  margin-top: 14px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.resumen-fila dt {
  color: #b5aed4;
}

.resumen-fila dd {
  font-weight: bold;
  white-space: nowrap;
}

.resumen-oferta dt,
.resumen-oferta dd {
  color: var(--lima);
}

.total {
  font-size: 20px;
  font-weight: bold;
  padding-top: 12px;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}

/* FRANJA DE OFERTAS (arriba del todo, discreta) */
.franja-ofertas {
  padding: 7px 16px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  color: var(--lima);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-align: center;
}

.franja-ofertas:empty {
  display: none;
}

/* BOTÓN DE WHATSAPP (verde WhatsApp con texto oscuro para que se lea bien) */
.enviar-whatsapp {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 14px 18px;
  background: #25D366;
  color: var(--negro);
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .enviar-whatsapp:hover:not(:disabled) {
    background: #4be083;
    transform: scale(1.02);
  }
}

.enviar-whatsapp:active:not(:disabled) {
  transform: scale(0.97);
}

.enviar-whatsapp:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

.enviar-whatsapp:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.panel-carrito {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* FICHA DE PRODUCTO */
.volver {
  font-weight: bold;
}

.volver:hover {
  color: var(--lima);
}

.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding: 60px 40px;
}

.ficha-foto {
  height: 500px;
  border-radius: 16px;
  border: 2px solid var(--violeta);
}

.ficha-info h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.ficha-precio {
  font-size: 26px;
  font-weight: bold;
  color: var(--lima);
  margin-bottom: 20px;
}

.ficha-info h3,
.ficha-subtitulo {
  margin: 30px 0 12px;
  font-size: 1.17em;
}

.tallas-lista {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.talla {
  min-width: 52px;
  min-height: 44px;
  padding: 12px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .talla:not(.elegida):hover {
    background: var(--violeta);
    color: white;
  }
}

.talla.elegida {
  background: var(--lima);
  color: var(--negro);
  border-color: var(--lima);
}

.talla:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

/* En la ficha, el aviso tiene su hueco reservado: nada salta al aparecer */
.ficha-info .aviso-talla {
  position: static;
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 14px;
}

.ficha-whatsapp {
  margin-top: 12px;
}

/* FICHA: "Añadir al carrito" es el botón principal (lima) y WhatsApp el secundario (contorno), mismo ancho */
.ficha-info .anadir {
  min-height: 56px;
  margin-top: 20px;
  background: var(--lima);
  color: var(--negro);
  font-size: 17px;
}

@media (hover: hover) and (pointer: fine) {
  .ficha-info .anadir:hover {
    background: #d4ff6b;
    transform: scale(1.02);
  }
}

/* FICHA de "Consultar precio": el botón de WhatsApp es el principal (lima, como "Añadir al carrito") */
.ficha-precio.precio-consultar {
  font-size: 22px;
  margin-bottom: 20px;
}

.ficha-info .boton-consulta {
  min-height: 56px;
  margin-top: 20px;
  background: var(--lima);
  color: var(--negro);
  font-size: 17px;
}

@media (hover: hover) and (pointer: fine) {
  .ficha-info .boton-consulta:hover {
    background: #d4ff6b;
    transform: scale(1.02);
  }
}

.enviar-whatsapp.ficha-whatsapp {
  min-height: 48px;
  background: transparent;
  color: #25D366;
  border: 2px solid #25D366;
  font-size: 15px;
}

@media (hover: hover) and (pointer: fine) {
  .enviar-whatsapp.ficha-whatsapp:hover:not(:disabled) {
    background: rgba(37, 211, 102, 0.12);
    transform: none;
  }
}

/* "← Volver a la tienda": área táctil de 44 px de alto (gap: el espacio entre la flecha y el texto) */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  padding: 0 6px;
}

/* MARKETING DE LA FICHA: ventajas, personalización y nota final */
.ventajas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
}

.ventajas li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.35;
  text-wrap: pretty;
}

.ventaja-icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 18px;
}

.personaliza {
  margin-top: 28px;
  padding: 4px 20px 20px;
  background: var(--superficie);
  border: 2px solid var(--violeta);
  border-radius: 16px;
}

/* Título y precio de la personalización en la misma fila (en móvil, si no cabe, el precio baja) */
.personaliza-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 18px;
}

.personaliza .ficha-subtitulo {
  margin: 0;
  color: var(--lima);
}

.personaliza-precio {
  padding: 4px 12px;
  border-radius: 30px;
  background: var(--lima);
  color: var(--negro);
  font-size: 14px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.personaliza-precio[hidden] {
  display: none;
}

/* Aviso de "no admiten devolución": solo ocupa sitio cuando tiene texto */
.aviso-devolucion {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--texto);
}

.aviso-devolucion:not(:empty) {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--lima);
  border-radius: 10px;
  background: var(--fondo);
}

.personaliza-campos {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  margin-top: 14px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
}

.campo-opcional {
  font-weight: normal;
  color: #b5aed4;
}

.campo input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: 16px; /* 16 px o más: el iPhone no hace zoom al escribir */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-numero input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.campo input:focus {
  outline: none;
  border-color: var(--lima);
  box-shadow: 0 0 0 2px var(--lima);
}

.campo-pista {
  margin-top: 4px;
  font-size: 13px;
  color: #b5aed4;
}

.personaliza .enviar-whatsapp {
  margin-top: 16px;
}

.ficha-nota {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #b5aed4;
}

/* En el móvil, nombre y número uno debajo de otro (al lado, "Número (opcional)" ocupaba dos líneas) */
@media (max-width: 700px) {
  .personaliza-campos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ficha {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }

  .ficha-foto {
    height: 340px;
  }
}

/* GALERÍA */
.ficha-foto.con-galeria {
  height: auto;
  border: none;
}

.foto-grande {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid var(--violeta);
  display: block;
}

.miniaturas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
}

/* Cada miniatura es un botón: se puede usar con teclado */
.miniatura {
  display: block;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
}

.miniaturas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--borde);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .miniaturas img:hover {
    transform: scale(1.08);
    border-color: var(--lima);
  }
}

/* La foto que se está viendo */
.miniatura.activa img {
  border-color: var(--lima);
}

.miniatura:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .foto-grande {
    height: 340px;
  }
}

/* FOTOS ENTERAS (sin recortar) */
img.producto-foto {
  display: block;
  width: 100%;
  height: auto;
}

img.producto-foto,
.foto-grande {
  object-fit: contain;
  background: white;
}

.miniaturas img {
  object-fit: contain;
  background: white;
}

/* TIENDA: BARRA LATERAL + REJILLA */
.oculto {
  display: none !important;
}

.tienda {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

/* Nunca más alta que la pantalla: si la lista crece, tiene scroll por dentro.
   Se pega justo debajo de la barra fija de arriba (--alto-barra) */
.filtros {
  position: sticky;
  top: calc(var(--alto-barra) + 20px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--alto-barra) - 40px);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 16px;
  padding: 20px 12px 12px;
}

.filtros h3 {
  margin: 0 8px 14px;
}

/* "Categorías ▾" solo en el móvil (más abajo); en el ordenador la caja está siempre abierta */
.categorias-boton {
  display: none;
}

.filtros-lista {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

.filtro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  text-align: left;
  background: none;
  color: var(--texto);
  border: none;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Número de productos de cada categoría */
.filtro-cantidad {
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(244, 241, 255, 0.08);
  color: #b5aed4;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Equipos que todavía no tienen productos: más apagados, pero se pueden pulsar */
.filtro.vacio .filtro-nombre {
  color: #9a93b8;
}

@media (hover: hover) and (pointer: fine) {
  .filtro:hover {
    background: var(--lima);
    color: var(--negro);
  }

  .filtro:hover .filtro-nombre {
    color: var(--negro);
  }

  .filtro:hover .filtro-cantidad {
    background: rgba(17, 17, 17, 0.12);
    color: var(--negro);
  }
}

.filtro.activo {
  background: var(--violeta);
  color: white;
}

.filtro.activo .filtro-nombre {
  color: white;
}

.filtro.activo .filtro-cantidad {
  background: var(--lima);
  color: var(--negro);
}

.filtro:focus-visible,
.liga-boton:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: -2px;
}

.contador {
  margin-bottom: 20px;
  color: #9a93b8;
  font-variant-numeric: tabular-nums;
  scroll-margin-top: 20px;
}

/* Recibe el foco al cambiar de página: solo se marca si se usa teclado */
.contador:focus {
  outline: none;
}

.contador:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 4px;
  border-radius: 4px;
}

/* PAGINACIÓN DEL CATÁLOGO */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.paginacion:empty {
  display: none;
}

.pagina-boton {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .pagina-boton:not(.actual):not(:disabled):hover {
    border-color: var(--violeta);
    background: var(--violeta);
    color: white;
  }
}

.pagina-boton:active:not(:disabled) {
  transform: scale(0.97);
}

.pagina-boton.actual {
  background: var(--lima);
  color: var(--negro);
  border-color: var(--lima);
}

.pagina-boton:disabled {
  opacity: 0.35;
  cursor: default;
}

.pagina-boton:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

.pagina-puntos {
  min-width: 20px;
  text-align: center;
  color: #9a93b8;
}

/* En móvil, todo en una fila: ‹ 1 … 5 … 13 › (script.js quita las palabras de las flechas) */
@media (max-width: 700px) {
  .paginacion {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .pagina-boton {
    padding: 0 10px;
  }

  .pagina-flecha {
    font-size: 20px;
    line-height: 1;
  }

  .pagina-puntos {
    min-width: 14px;
  }
}

@media (max-width: 700px) {
  .tienda {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .filtros {
    position: static;
    min-width: 0; /* un nombre largo en "Categorías ▾" (sin partir) no ensancha la columna: acaba en … */
    max-height: none;
    padding: 12px;
  }

  .filtros h3 {
    display: none;
  }

  /* "Categorías ▾": la caja va plegada y se abre con este botón (script.js) */
  .categorias-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 4px 8px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--texto);
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
  }

  .categorias-boton:focus-visible {
    outline: 2px solid var(--lima);
    outline-offset: 2px;
  }

  /* La que se está viendo, en lima; si no cabe, termina en … */
  .categorias-elegida {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--lima);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .categorias-flecha {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.2s ease;
  }

  .filtros.abierta .categorias-flecha {
    transform: rotate(180deg);
  }

  .filtros:not(.abierta) .filtros-lista {
    display: none;
  }

  .filtros.abierta .filtros-lista {
    margin-top: 12px;
  }

  /* En móvil, botones redondeados que bajan de fila en vez de salirse */
  .filtros-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }

  .filtro {
    width: auto;
    min-height: 44px;
    white-space: nowrap;
    border: 2px solid var(--borde);
    border-radius: 30px;
  }
}

/* AVISO */
.aviso {
  padding: 60px 20px;
  text-align: center;
  font-size: 18px;
  color: #b5aed4;
  border: 2px dashed var(--borde);
  border-radius: 16px;
}

/* LIGA DESPLEGABLE */
.liga-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  color: var(--lima);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .liga-boton:hover {
    background: var(--lima);
    color: var(--negro);
  }
}

/* La flecha gira al abrir la liga */
.liga-flecha {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.liga-boton[aria-expanded="true"] .liga-flecha {
  transform: rotate(90deg);
}

.liga-equipos {
  display: none;
  margin: 2px 0 4px 12px;
  padding-left: 6px;
  border-left: 1px solid var(--borde);
}

.liga-equipos.abierto {
  display: block;
}

/* La liga lleva su número de productos; al elegirla se ven todos sus productos */
.liga-boton .filtro-nombre {
  flex: 1;
  min-width: 0;
}

.liga-boton .filtro-cantidad {
  font-weight: bold;
}

.liga-boton.activo {
  background: var(--violeta);
  color: white;
}

.liga-boton.activo .filtro-cantidad {
  background: var(--lima);
  color: var(--negro);
}

/* Ligas con cuadrícula: botón simple, sin flecha. Un hueco del ancho de la flecha
   deja su número alineado con el de Camiseta retro (que sí se despliega) */
.liga-simple::after {
  content: '';
  flex-shrink: 0;
  width: 0.6em;
}

.liga-boton:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: -2px;
}

/* Apartados (Selección Nacional, Camiseta retro): un nivel dentro del grupo */
.filtro-apartado .filtro-nombre {
  font-weight: bold;
}

.apartado-equipos {
  margin: 2px 0 4px 12px;
  padding-left: 6px;
  border-left: 1px dashed var(--borde);
}

@media (max-width: 700px) {
  .liga-boton {
    width: auto;
    min-height: 44px;
    white-space: nowrap;
    margin-top: 0;
    border: 2px solid var(--violeta);
    border-radius: 30px;
  }

  /* En móvil cada liga es una pastilla: no hace falta alinear números */
  .liga-simple::after {
    display: none;
  }

  /* Equipos en varias filas, sin caja con scroll propio: los que no tienen productos van en "Ver más equipos" */
  .liga-equipos.abierto {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 4px 0 0;
    padding: 4px;
    border-left: none;
  }

  /* Cada apartado ocupa su fila, con sus equipos debajo */
  .apartado,
  .apartado-equipos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .apartado-equipos {
    margin: 0;
    padding: 0 0 0 12px;
  }
}

/* "Ver más equipos": los equipos que aún no tienen productos, plegados */
.mas-equipos-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  color: #b5aed4;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mas-equipos-boton:hover {
    background: rgba(244, 241, 255, 0.08);
    color: var(--texto);
  }
}

.mas-equipos-boton[aria-expanded="true"] .liga-flecha {
  transform: rotate(90deg);
}

.mas-equipos-boton:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: -2px;
}

.mas-equipos {
  display: none;
}

.mas-equipos.abierto {
  display: block;
}

@media (max-width: 700px) {
  .mas-equipos-boton {
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 8px 14px;
    border: 2px dashed var(--borde);
    border-radius: 30px;
  }

  .mas-equipos.abierto {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
}

/* CUADRÍCULA DE EQUIPOS (ligas, Selección Nacional y Camiseta de club retro): ruta clicable
   centrada y caja con los nombres, encima de los productos. 6 columnas en ordenador,
   3 en tablet y 2 en móvil; plegada se ven las dos primeras filas */
.cuadricula-vista {
  margin-bottom: 24px;
}

.cuadricula-vista[hidden] {
  display: none;
}

.ruta ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  list-style: none;
  font-size: 14px;
}

/* El punto va detrás de cada paso: si la ruta baja de línea, no empieza la línea con "·" */
.ruta li:not(:last-child)::after {
  content: '·';
  content: '·' / '';   /* el lector de pantalla no lo lee (si el navegador lo entiende) */
  margin: 0 6px;
  color: #6f6893;
}

.ruta-paso {
  min-height: 44px;
  padding: 6px 4px;
  background: none;
  border: none;
  border-radius: 6px;
  color: #b5aed4;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ruta-paso[aria-current="page"] {
  color: var(--texto);
  font-weight: bold;
}

@media (hover: hover) and (pointer: fine) {
  .ruta-paso:hover {
    color: var(--lima);
    text-decoration: underline;
  }
}

.ruta-paso:focus-visible,
.cuadricula-equipo:focus-visible,
.cuadricula-mas:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

/* La ruta y "Historia puesta." reciben el foco al volver a pulsar la categoría: solo se marca con teclado */
.ruta:focus,
.cabecera-retro-titulo:focus {
  outline: none;
}

.ruta:focus-visible,
.cabecera-retro-titulo:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 4px;
  border-radius: 6px;
}

/* CABECERA DE "CAMISETA RETRO" (la crea script.js): entre la ruta y la caja de equipos, solo en retro */
.cabecera-retro {
  margin: 4px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(108, 59, 255, 0.45);
  text-align: center;
}

.cabecera-retro[hidden] {
  display: none;
}

.cabecera-retro-titulo {
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cabecera-retro-acento {
  color: var(--lima);
}

.cabecera-retro-texto {
  margin-top: 6px;
  font-size: 15px;
  color: #b5aed4;
  text-wrap: balance;
}

.cuadricula-caja {
  padding: 12px;
  background: var(--superficie);
  border: 1px solid rgba(108, 59, 255, 0.45);
  border-radius: 16px;
}

.cuadricula-caja[hidden] {
  display: none;
}

/* Segunda caja (selecciones de Europa), justo debajo de la de Selección Nacional */
.cuadricula-sub {
  margin-top: 10px;
}

.cuadricula-equipos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.cuadricula-equipos:not(.abierta) .cuadricula-equipo:nth-child(n + 13) {
  display: none;
}

.cuadricula-equipo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  background: rgba(244, 241, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease-out;
}

.cuadricula-nombre {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cuadricula-cantidad {
  flex-shrink: 0;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(244, 241, 255, 0.08);
  color: #b5aed4;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Equipos que todavía no tienen productos: más apagados, pero se pueden pulsar */
.cuadricula-equipo.vacio .cuadricula-nombre {
  color: #9a93b8;
}

@media (hover: hover) and (pointer: fine) {
  .cuadricula-equipo:hover {
    background: rgba(108, 59, 255, 0.18);
    border-color: var(--violeta);
  }
}

.cuadricula-equipo:active {
  transform: scale(0.97);
}

/* El equipo elegido, en lima */
.cuadricula-equipo.activo {
  background: var(--lima);
  border-color: var(--lima);
  color: var(--negro);
  font-weight: bold;
}

.cuadricula-equipo.activo .cuadricula-nombre {
  color: var(--negro);
}

.cuadricula-equipo.activo .cuadricula-cantidad {
  background: rgba(17, 17, 17, 0.14);
  color: var(--negro);
}

.cuadricula-mas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 8px 18px;
  background: none;
  border: 1px dashed var(--borde);
  border-radius: 30px;
  color: #b5aed4;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cuadricula-mas:hover {
    color: var(--texto);
    border-color: var(--violeta);
  }
}

/* Flecha hacia abajo con "Más" y hacia arriba con "Menos" */
.cuadricula-mas .liga-flecha {
  transform: rotate(90deg);
}

.cuadricula-mas[aria-expanded="true"] .liga-flecha {
  transform: rotate(-90deg);
}

/* Sin "Más" si todo cabe en dos filas (script.js pone hasta-4 / hasta-6 / hasta-12) */
.cuadricula-caja.hasta-12 .cuadricula-mas {
  display: none;
}

@media (max-width: 1024px) {
  .cuadricula-equipos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cuadricula-equipos:not(.abierta) .cuadricula-equipo:nth-child(n + 7) {
    display: none;
  }

  .cuadricula-caja.hasta-12 .cuadricula-mas {
    display: flex;
  }

  .cuadricula-caja.hasta-6 .cuadricula-mas {
    display: none;
  }
}

@media (max-width: 700px) {
  .cuadricula-caja {
    padding: 8px;
  }

  .cuadricula-equipos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cuadricula-equipos:not(.abierta) .cuadricula-equipo:nth-child(n + 5) {
    display: none;
  }

  .cuadricula-caja.hasta-6 .cuadricula-mas {
    display: flex;
  }

  .cuadricula-caja.hasta-4 .cuadricula-mas {
    display: none;
  }
}

/* INTRO: CAMISETA DE PARTÍCULAS (lienzo 2D, sin librerías) */
body.intro-activa {
  overflow: hidden;
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  /* Focos del estadio */
  background:
    radial-gradient(ellipse 45% 60% at 12% -12%, rgba(198, 255, 61, 0.1), transparent 70%),
    radial-gradient(ellipse 45% 60% at 88% -12%, rgba(108, 59, 255, 0.24), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 115%, rgba(108, 59, 255, 0.1), transparent 70%),
    var(--fondo);
  transition:
    opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Salida: zoom suave con fundido; detrás aparece la tienda */
#intro.saliendo {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

#intro-lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* El nombre, debajo de la camiseta (intro.js ajusta su altura) */
.intro-titulo {
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(30px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--lima);
  text-shadow: 0 0 24px rgba(198, 255, 61, 0.45);
  pointer-events: none;
}

.intro-titulo span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
}

#intro.con-titulo .intro-titulo span {
  animation: introLetra 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  /* --velocidad-intro: en el móvil la intro va más deprisa (intro.js) */
  animation-duration: calc(0.5s / var(--velocidad-intro, 1));
  animation-delay: calc(var(--i) * 40ms / var(--velocidad-intro, 1));
}

@keyframes introLetra {
  to { opacity: 1; transform: none; }
}

.intro-saltar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease-out;
}

.intro-saltar:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .intro-saltar:hover {
    background: var(--lima);
    color: var(--negro);
  }
}

.intro-saltar:active {
  transform: scale(0.97);
}

/* VENTANA DE BIENVENIDA (oferta de envío gratis) */
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 50; /* por encima del carrito (11), por debajo de la intro (100) */
  display: grid;
  place-items: center;
  padding: 16px;
}

.bienvenida[hidden] {
  display: none;
}

body.bienvenida-abierta {
  overflow: hidden;
}

.bienvenida-fondo {
  position: absolute;
  inset: 0;
  background: rgba(7, 6, 13, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* Cerrada (y al salir): más rápida y suave. Abierta (al entrar): 250 ms con ease-out */
.bienvenida-caja {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 44px 28px 28px;
  background: var(--superficie);
  border: 2px solid var(--violeta);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.bienvenida.abierta .bienvenida-fondo {
  opacity: 1;
  transition-duration: 250ms;
}

.bienvenida.abierta .bienvenida-caja {
  opacity: 1;
  transform: none;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.bienvenida-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--texto);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bienvenida-cerrar:hover {
    background: var(--fondo);
    color: var(--lima);
  }
}

.bienvenida-titulo {
  color: var(--lima);
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  text-wrap: balance;
}

.bienvenida-texto {
  margin-top: 10px;
  color: #b5aed4;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

.bienvenida-boton {
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  padding: 14px 18px;
  border: none;
  border-radius: 30px;
  background: var(--lima);
  color: var(--negro);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s ease-out, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bienvenida-boton:hover {
    background: #d4ff6b;
  }
}

.bienvenida-boton:active {
  transform: scale(0.97);
}

.bienvenida-cerrar:focus-visible,
.bienvenida-boton:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

/* El título del catálogo recibe el foco al pulsar "Ver camisetas": sin recuadro, no es un botón */
#catalogo-titulo:focus {
  outline: none;
}

/* PACKS SORPRESA (categoría de la barra lateral) */
.productos.modo-packs {
  display: block;
}

.packs-apartado + .packs-apartado {
  margin-top: 48px;
}

.packs-subtitulo {
  font-size: 24px;
  font-weight: 900;
  color: var(--lima);
  text-wrap: balance;
}

.packs-explicacion {
  margin-top: 6px;
  color: #b5aed4;
  line-height: 1.45;
  text-wrap: pretty;
}

/* auto-fit (no auto-fill): las columnas vacías se pliegan y los packs ocupan todo el ancho */
.packs-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  margin-top: 20px;
}

/* Tablet y móvil: una tarjeta por fila */
@media (max-width: 1024px) {
  .packs-lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 20px 20px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 16px;
  transition: border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pack:hover {
    border-color: var(--violeta);
  }
}

.pack-nombre {
  font-size: 18px;
}

.pack-precio {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}

/* "Te ahorras X €" debajo del precio, con su letra pequeña */
.pack-te-ahorras {
  margin-top: 4px;
  color: #C6FF3D;
  font-size: 16px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.pack-te-ahorras-nota {
  margin-bottom: 6px;
  color: #8a83a8;
  font-size: 13px;
}

.pack-unidad {
  margin-top: 2px;
  color: #b5aed4;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.pack-envio {
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
}

.pack-ahorro {
  margin-top: 4px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.pack-detalle {
  list-style: none;
  margin: 14px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 14px;
  line-height: 1.45;
  color: #b5aed4;
}

.pack-detalle li + li {
  margin-top: 4px;
}

.pack-detalle strong {
  color: var(--texto);
}

.pack-elegir {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  background: var(--violeta);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s ease-out, background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pack-elegir:hover {
    background: var(--lima);
    color: var(--negro);
  }
}

.pack-elegir:active {
  transform: scale(0.97);
}

.pack-elegir:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

/* Tarjeta ancha (ordenador): título y precio más grandes; textos y botón con ancho cómodo */
.pack-detalle,
.pack-elegir {
  max-width: 420px;
}

.pack-detalle {
  width: 100%;
}

@media (min-width: 1025px) {
  .pack {
    padding: 30px 28px 26px;
  }

  .pack-nombre {
    font-size: 22px;
  }

  .pack-precio {
    font-size: 44px;
  }

  .pack-unidad,
  .pack-envio,
  .pack-ahorro {
    font-size: 15px;
  }

  .pack-te-ahorras {
    font-size: 18px;
  }

  .pack-te-ahorras-nota {
    font-size: 13px;
  }
}

/* "Número exacto": caja debajo de los packs con el botón de WhatsApp (mismo estilo que "Consultar precio") */
.packs-exacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding: 26px 22px;
  background: var(--superficie);
  border: 2px dashed var(--violeta);
  border-radius: 16px;
  text-align: center;
}

.packs-exacto-texto {
  max-width: 520px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.45;
  text-wrap: balance;
}

.packs-exacto .boton-consulta {
  max-width: 320px;
}

/* VENTANA DEL PACK (dialog nativo: Esc y foco dentro los gestiona el navegador) */
body.pack-abierto {
  overflow: hidden;
}

.pack-ventana {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--texto);
  overflow: visible;
}

.pack-ventana::backdrop {
  background: rgba(7, 6, 13, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Tres zonas: cabecera fija, contenido con scroll y pie fijo con el botón de WhatsApp */
.pack-ventana-caja {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid var(--violeta);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Mientras se arrastra, la hoja sigue al dedo sin retraso */
.pack-ventana-caja.arrastrando {
  transition: none;
}

.pack-ventana[open] .pack-ventana-caja {
  animation: entrar-ventana 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pack-ventana-cabecera {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 14px 14px 24px;
  border-bottom: 1px solid var(--borde);
  touch-action: none; /* el arrastre hacia abajo lo gestiona script.js */
}

.pack-asa {
  display: none;
}

.pack-ventana-textos {
  flex: 1;
  min-width: 0;
}

.pack-cerrar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--texto);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pack-cerrar:hover {
    color: var(--lima);
    border-color: var(--lima);
  }
}

.pack-cerrar:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 2px;
}

.pack-ventana-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 20px;
}

.pack-ventana-pie {
  flex-shrink: 0;
  padding: 14px 24px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

.pack-ventana-pie .enviar-whatsapp {
  margin-top: 0;
}

/* En el móvil: hoja casi a pantalla completa que sube desde abajo, con asa para arrastrar */
@media (max-width: 700px) {
  .pack-ventana {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 24px);
    max-height: none;
    margin: auto 0 0;
  }

  .pack-ventana-caja {
    height: 100%;
    max-height: none;
    /* La línea violeta de arriba va como sombra: sigue la curva de las esquinas sin adelgazarse */
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 0 var(--violeta), 0 -12px 40px rgba(0, 0, 0, 0.5);
  }

  .pack-ventana[open] .pack-ventana-caja {
    animation-name: subir-hoja;
  }

  .pack-asa {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: var(--borde);
  }

  .pack-ventana-cabecera {
    padding: 24px 12px 12px 20px;
  }

  .pack-ventana-cuerpo {
    padding: 0 20px 20px;
  }

  .pack-ventana-pie {
    padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  }
}

@keyframes subir-hoja {
  from {
    transform: translateY(100%);
  }
}

.pack-ventana[open]::backdrop {
  animation: entrar-fondo 250ms ease-out;
}

@keyframes entrar-ventana {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

@keyframes entrar-fondo {
  from {
    opacity: 0;
  }
}

.pack-ventana-titulo {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--lima);
  text-wrap: balance;
}

.pack-ventana-resumen {
  margin-top: 6px;
  font-size: 14px;
  color: #b5aed4;
  font-variant-numeric: tabular-nums;
}

.pack-grupo {
  margin-top: 20px;
  border: none;
}

.pack-grupo[hidden] {
  display: none;
}

.pack-grupo legend,
.pack-etiqueta {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}

.pack-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pack-opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 30px;
  font-size: 15px;
  cursor: pointer;
}

.pack-opcion:has(input:checked) {
  border-color: var(--lima);
  color: var(--lima);
  font-weight: bold;
}

.pack-opcion input {
  accent-color: var(--lima);
}

.pack-talla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.pack-talla + .pack-talla {
  border-top: 1px solid var(--borde);
}

.pack-talla-nombre {
  font-weight: bold;
}

.pack-contador {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #b5aed4;
  font-variant-numeric: tabular-nums;
}

.pack-contador.completo {
  color: var(--lima);
}

.pack-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: 16px; /* 16 px o más: el iPhone no hace zoom */
}

.pack-select:focus {
  outline: none;
  border-color: var(--lima);
  box-shadow: 0 0 0 2px var(--lima);
}

.pack-aviso {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
}

.pack-ventana-pie .pack-aviso:not(:empty) {
  margin: 0 0 10px;
}

.pack-aviso:not(:empty) {
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--lima);
  border-radius: 10px;
  background: var(--fondo);
}

/* CARRITO FLOTANTE: fijo arriba a la derecha, por encima del contenido (z 9) pero por debajo
   del fondo del carrito (10), su panel (11), la bienvenida (50), la ventana de packs y la intro (100) */
.carrito-flotante {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 48px);
  right: calc(env(safe-area-inset-right) + 40px);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 2px solid var(--borde);
  border-radius: 30px;
  background: var(--superficie);
  color: #b5aed4; /* vacío: apagado y sin brillo */
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  /* translate: sube con la barra compacta del móvil (ver BARRA FIJA) */
  transition: transform 150ms ease-out, translate 0.25s ease-out, background 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}

.carrito-flotante.con-articulos {
  background: var(--lima);
  border-color: var(--lima);
  color: var(--negro);
}

@media (hover: hover) and (pointer: fine) {
  .carrito-flotante:hover {
    transform: scale(1.06);
  }
}

.carrito-flotante:active {
  transform: scale(0.94);
}

.carrito-flotante:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 3px;
}

/* Con el panel abierto, el botón se esconde */
body.carrito-abierto .carrito-flotante {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.carrito-icono {
  flex-shrink: 0;
}

.carrito-burbuja {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 2px solid var(--fondo);
  border-radius: 12px;
  background: var(--violeta);
  color: white;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* El número da un salto al cambiar: crece, se pasa un poco al encoger y vuelve a su tamaño */
.carrito-burbuja.rebote {
  animation: rebote-burbuja 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes rebote-burbuja {
  35% {
    transform: scale(1.55);
  }
  70% {
    transform: scale(0.92);
  }
}

/* Brillo lima que late despacio (se anima la opacidad de una capa con la sombra: va fluido en móvil).
   Pedido expresamente para la tienda; discreto a propósito */
.carrito-flotante::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 16px 2px rgba(198, 255, 61, 0.45);
  opacity: 0;
  pointer-events: none;
}

.carrito-flotante.con-articulos::before {
  animation: latido-carrito 2.6s ease-in-out infinite;
}

@keyframes latido-carrito {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.9;
  }
}

/* Al añadir (clase "anadido"): un anillo lima que se abre y se desvanece.
   No se llama "destello": esa clase es la de las estrellitas del banner y encogía el botón hasta esconderlo */
.carrito-flotante::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--lima);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.carrito-flotante.anadido::after {
  animation: anillo-carrito 450ms ease-out;
}

@keyframes anillo-carrito {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* Chispas: 4 destellos pequeños de 4 puntas que parpadean por turnos alrededor */
.carrito-chispas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.carrito-chispas span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--lima);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}

.carrito-chispas span:nth-child(1) { top: -10px; left: 6px; }
.carrito-chispas span:nth-child(2) { top: -6px; right: 22px; width: 6px; height: 6px; }
.carrito-chispas span:nth-child(3) { bottom: -10px; right: 10px; }
.carrito-chispas span:nth-child(4) { bottom: -6px; left: 24px; width: 6px; height: 6px; }

.con-articulos .carrito-chispas span {
  animation: chispa-carrito 2.4s ease-in-out infinite;
}

.con-articulos .carrito-chispas span:nth-child(2) { animation-delay: 0.6s; }
.con-articulos .carrito-chispas span:nth-child(3) { animation-delay: 1.2s; }
.con-articulos .carrito-chispas span:nth-child(4) { animation-delay: 1.8s; }

@keyframes chispa-carrito {
  0%, 60%, 100% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  30% {
    opacity: 0.9;
    transform: scale(1) rotate(45deg);
  }
}

/* En el móvil: círculo con icono y burbuja (sin texto), a la derecha del logo */
@media (max-width: 700px) {
  .carrito-flotante {
    top: calc(env(safe-area-inset-top) + 40px);
    right: calc(env(safe-area-inset-right) + 12px);
    justify-content: center;
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
  }

  .carrito-texto {
    display: none;
  }

  /* El logo va en su propia fila (el carrito flotante queda a su derecha) y la hamburguesa
     baja a la fila siguiente, centrada, para que el botón flotante no la tape */
  .logo {
    flex-basis: 100%;
    text-align: center;
    font-size: 24px; /* un poco más pequeño para dejar aire al botón flotante */
  }
}

/* Móviles muy estrechos (360 px o menos): el logo un poco más pequeño todavía */
@media (max-width: 380px) {
  .logo {
    font-size: 20px;
    letter-spacing: 1px;
  }
}

/* MÓVIL, CABECERA DE LA TIENDA: ☰ y logo en la misma fila (a la derecha queda el hueco del carrito
   flotante) y el buscador debajo. Así la barra entera solo es una línea más alta que la compacta
   (la franja) y al subir apenas tapa lo de debajo. La de la ficha va en MÓVIL, CABECERA DE LA FICHA */
@media (max-width: 700px) {
  .cabecera:has(> .menu) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 52px;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 16px 12px;
  }

  .cabecera:has(> .menu) .hamburguesa {
    grid-row: 1;
    grid-column: 1;
  }

  .cabecera:has(> .menu) .logo {
    grid-row: 1;
    grid-column: 2;
    flex-basis: auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cabecera:has(> .menu) .buscar-form {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  /* Franja de ofertas en una sola línea (si no caben las dos ofertas, script.js las turna) */
  .barra-fija .franja-ofertas {
    padding: 7px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .franja-turno {
    display: inline-block;
  }

  .franja-turno.entra {
    animation: franjaEntra 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* "Ver 24 más" (script.js): el texto encima y el botón debajo, a todo el ancho */
  .paginacion:has(> .ver-mas-info) {
    flex-direction: column;
    gap: 12px;
  }
}

/* MÓVIL, CABECERA DE LA FICHA: "←" (volver a la tienda), logo y el hueco del carrito flotante en una
   sola fila, como el ☰ y el logo de la tienda. Así la barra fija de la ficha mide menos de 100 px.
   "Volver a la tienda" entero no cabe al lado del logo en 360 px: solo se ve la flecha (el enlace se
   sigue llamando "Volver a la tienda" para el lector de pantalla) */
@media (max-width: 700px) {
  .cabecera:has(> .volver) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
  }

  .cabecera:has(> .volver) .volver {
    grid-row: 1;
    grid-column: 1;
    justify-content: center;
    width: 44px;
    padding: 0;
    border-radius: 30px;
    background: var(--lima);
    color: var(--negro);
    font-size: 22px;
  }

  .cabecera:has(> .volver) .volver:hover {
    color: var(--negro);
  }

  .cabecera:has(> .volver) .volver:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: 3px;
  }

  .cabecera:has(> .volver) .volver-texto {
    display: none;
  }

  .cabecera:has(> .volver) .logo {
    grid-row: 1;
    grid-column: 2;
    flex-basis: auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@keyframes franjaEntra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* "VER 24 MÁS" (móvil): sustituye a los números de página y añade productos debajo (script.js) */
.ver-mas-info {
  color: #b5aed4;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ver-mas {
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--violeta);
  border-radius: 30px;
  font: inherit;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease-out;
}

.ver-mas:active {
  transform: scale(0.97);
}

.ver-mas:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .franja-turno.entra {
    animation: none;
  }

  .ver-mas {
    transition: none;
  }
}

/* MENOS MOVIMIENTO (si la persona lo pide en su sistema) */
@media (prefers-reduced-motion: reduce) {
  .producto,
  .producto-foto,
  .boton,
  .carrito-flotante,
  .anadir,
  .buscador,
  .menu a,
  .borrar-busqueda,
  .fondo-carrito,
  .panel-carrito,
  .talla,
  .miniaturas img,
  .filtro,
  .liga-boton,
  .filtro-cantidad,
  .liga-flecha,
  .talla-mini,
  .cantidad-boton,
  .enviar-whatsapp,
  .pagina-boton,
  .progreso-relleno,
  .bienvenida-fondo,
  .bienvenida-caja,
  .bienvenida-cerrar,
  .bienvenida-boton,
  .campo input,
  .pack,
  .pack-elegir,
  .pack-ventana-caja,
  .pack-cerrar,
  .mas-equipos-boton,
  .ruta-paso,
  .cuadricula-equipo,
  .cuadricula-mas,
  .etiqueta-consultar,
  .boton-consulta,
  #intro,
  .intro-saltar {
    transition: none;
  }

  /* Las letras de la intro empiezan invisibles: se muestran directamente */
  .intro-titulo span {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .producto:hover .producto-foto,
  .boton:hover,
  .carrito-flotante:hover,
  .anadir:hover,
  .boton:active,
  .carrito-flotante:active,
  .anadir:active,
  .intro-saltar:active,
  .miniaturas img:hover,
  .cantidad-boton:active:not(:disabled),
  .pagina-boton:active:not(:disabled),
  .enviar-whatsapp:hover:not(:disabled),
  .enviar-whatsapp:active:not(:disabled),
  .bienvenida-caja,
  .bienvenida-boton:active,
  .pack-elegir:active,
  .producto:hover .etiqueta-consultar,
  .boton-consulta:hover,
  .boton-consulta:active {
    transform: none;
  }

  .pack-ventana[open] .pack-ventana-caja,
  .pack-ventana[open]::backdrop {
    animation: none;
  }

  /* Carrito flotante: sin latido, chispas, rebote ni destello; solo un borde lima fijo con artículos */
  .carrito-flotante.con-articulos::before,
  .carrito-flotante.anadido::after,
  .carrito-burbuja.rebote,
  .con-articulos .carrito-chispas span {
    animation: none;
  }

  .carrito-chispas {
    display: none;
  }

  .carrito-flotante.con-articulos::before {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--lima);
    inset: -5px;
  }

  /* Sin sacudida: el aviso se ve igual por el texto y el borde lima */
  .tallas-tarjeta.avisar,
  .tallas-lista.avisar {
    animation: none;
  }

  .banner h1 {
    animation: none;
  }

  /* Acento del título: sin reflejo y solo 2 destellos fijos y suaves (el degradado se queda) */
  .acento-reflejo,
  .destello:nth-child(n + 3) {
    display: none;
  }

  .destello {
    animation: none;
    opacity: 0.8;
    transform: scale(0.8) rotate(0deg);
  }

  .cuadricula-equipo:active {
    transform: none;
  }
}
/* FOTO DE FONDO DEL BANNER */
.banner {
  background:
    linear-gradient(rgba(7, 6, 13, 0.55), rgba(7, 6, 13, 0.8)),
    linear-gradient(135deg, rgba(108, 59, 255, 0.35), rgba(42, 15, 122, 0.35)),
    url('imagenes/banner-1200.jpg') center / cover no-repeat;   /* copia de 1200 px (el original, banner.jpg, pesa 2,5 MB) */
}
/* FONDO CÉSPED APAGADO */
body {
  background: #07130b;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(7, 6, 13, 0) 0%, rgba(7, 6, 13, 0.8) 100%),
    repeating-linear-gradient(90deg, #0a2310 0 110px, #0d2c15 110px 220px);
}

.cabecera {
  background: rgba(7, 6, 13, 0.88);
  backdrop-filter: blur(6px);
}

.pie {
  background: rgba(7, 6, 13, 0.7);
}

/* PIE DE PÁGINA (tienda y ficha): marca, pago y envíos, y contacto. No hay nada fijo abajo,
   así que no tapa el carrito flotante, la barra fija ni los botones de añadir */
.pie {
  border-top: 2px solid var(--violeta);
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #b5aed4;
}

/* Cada dato es un bloque que no se parte: en móvil bajan enteros a la línea siguiente */
.pie-linea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.pie-linea + .pie-linea {
  margin-top: 8px;
}

.pie-linea > * {
  white-space: nowrap;
}

.pie-marca {
  color: var(--texto);
}

.pie-enlace {
  display: inline-block;
  padding: 6px 2px;
  color: var(--lima);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie-enlace:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .pie-enlace:hover {
    color: var(--texto);
  }
}

/* Ordenador: cabe todo en dos líneas, con puntos entre los datos */
@media (min-width: 701px) {
  .pie-linea {
    gap: 0;
  }

  .pie-linea > :not([hidden]) ~ :not([hidden])::before {
    content: "·";
    display: inline-block;
    margin: 0 10px;
    color: var(--violeta);
    text-decoration: none;
  }
}

/* TÍTULO DE NOVEDADES ("Lo más exótico"): se escribe letra a letra en morado y luego brilla con
   purpurina (script.js: crearTituloEfecto y escribirTitulo). Solo se animan opacidad y transform */
.catalogo h2.titulo-efecto {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  color: var(--violeta);
  text-shadow: 0 0 18px rgba(108, 59, 255, 0.45);
}

/* Las letras de una palabra no se separan al bajar de línea */
.titulo-palabra {
  white-space: nowrap;
}

.titulo-efecto .titulo-letra {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.titulo-efecto .titulo-letra.visible,
.titulo-efecto.escrito .titulo-letra {
  opacity: 1;
}

.titulo-brillos {
  position: absolute;
  inset: -0.3em -0.45em;
  pointer-events: none;
}

.titulo-brillos span {
  position: absolute;
  width: 0.26em;
  height: 0.26em;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  transform: scale(0.3) rotate(0deg);
  animation-duration: 2.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Al terminar de escribirse; quietos mientras el título no se ve (script.js pone "en-pantalla").
   Sin el atajo "animation", que borraría el ritmo de cada destello (nth-child de abajo) */
.titulo-efecto.escrito .titulo-brillos span {
  animation-name: purpurina-titulo;
  animation-play-state: paused;
}

.titulo-efecto.escrito.en-pantalla .titulo-brillos span {
  animation-play-state: running;
}

.titulo-brillos span:nth-child(1) { top: 0; left: 2%; animation-delay: 0s; }
.titulo-brillos span:nth-child(2) { top: 8%; left: 38%; width: 0.18em; height: 0.18em; background: #D8C2FF; animation-duration: 2.3s; animation-delay: 0.8s; }
.titulo-brillos span:nth-child(3) { top: -4%; right: 6%; width: 0.3em; height: 0.3em; animation-duration: 3.1s; animation-delay: 1.5s; }
.titulo-brillos span:nth-child(4) { bottom: 6%; left: 18%; width: 0.16em; height: 0.16em; background: #D8C2FF; animation-duration: 2.5s; animation-delay: 2s; }
.titulo-brillos span:nth-child(5) { bottom: 0; right: 26%; width: 0.22em; height: 0.22em; animation-duration: 2.9s; animation-delay: 0.4s; }
.titulo-brillos span:nth-child(6) { top: 42%; right: -2%; width: 0.16em; height: 0.16em; background: #D8C2FF; animation-duration: 2.6s; animation-delay: 2.4s; }

@keyframes purpurina-titulo {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1) rotate(45deg); }
}

/* En el móvil, solo 3 destellos */
@media (max-width: 700px) {
  .titulo-brillos span:nth-child(2n) {
    display: none;
  }
}

/* Con "reducir animaciones": el título sale entero, en morado y sin destellos */
@media (prefers-reduced-motion: reduce) {
  .titulo-efecto .titulo-letra {
    opacity: 1;
    transition: none;
  }

  .titulo-brillos {
    display: none;
  }
}

/* LETRERO DE "PACKS SORPRESA" ("Ideal para grupos de amigos"): el mismo efecto que el título de
   Novedades, con el texto en lima y los destellos en violeta. El tamaño baja con la pantalla para que
   quepa en el móvil (cada palabra entera; si no caben, pasa a la línea siguiente) */
.catalogo h2.titulo-efecto.titulo-packs {
  max-width: 100%;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.2;
  color: var(--lima);
  text-shadow: 0 0 18px rgba(198, 255, 61, 0.35);
}

.titulo-packs .titulo-brillos span {
  background: var(--violeta);
}

.titulo-packs .titulo-brillos span:nth-child(2n) {
  background: #A98BFF;
}