/**
 * tema.css — Identidad visual de Tu Jersey Favorita (tienda).
 *
 * Misma idea que el sistema de inventario: negro y blanco del logo, rojo solo
 * donde hay que actuar (comprar, avisos). Letra condensada inclinada, la de los
 * dorsales. Superficies planas con línea fina; sin degradados, sombras de color
 * ni emojis. Se carga al final y pisa los estilos antiguos.
 */

:root {
  --color-primary: #d91b24;
  --color-primary-dark: #b3121b;
  --color-primary-light: #fbe8e9;
  --color-secondary: #d91b24;
  --color-accent: #d91b24;
  --color-bg: #f3f3f1;
  --color-surface: #ffffff;
  --color-text: #111113;
  --color-text-light: #54545b;
  --color-border: #dcdcd7;
  --color-dark: #000000;
  --font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-primary: none;
  --shadow-secondary: none;
  --shadow-accent: none;
}

body { font-family: var(--font-family); font-size: 16px; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4,
.section__title, .hero__title, .product-detail__name, .product-card__name, .version-card__title,
.catalog-header h1, .cart-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.05;
  color: inherit;
}

/* ---------------------------------------------------------------
   Cabecera
--------------------------------------------------------------- */
.top-banner {
  background: #000;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-bottom: 3px solid var(--color-primary);
}
.site-header { background: #000; border-bottom: 1px solid #1d1d20; box-shadow: none; }
.main-nav a { font-family: var(--font-family); font-weight: 600; font-size: 0.95rem; color: #fff; }
.main-nav a:hover, .main-nav a.active { color: #fff; box-shadow: inset 0 -3px 0 var(--color-primary); background: transparent; }
.header-utils__btn { color: #fff; background: transparent; border: 1px solid #2c2c30; border-radius: var(--radius); }
.header-utils__btn:hover { background: #17171a; }
.cart-badge { background: var(--color-primary); color: #fff; border-radius: 3px; font-weight: 700; }
.currency-toggle { border: 1px solid #2c2c30; border-radius: var(--radius); background: transparent; }
.currency-toggle button { color: #bdbdc4; border-radius: 0; }
.currency-toggle button.active { background: #fff; color: #000; }

/* ---------------------------------------------------------------
   Portada
--------------------------------------------------------------- */
.hero--home { background: #000; color: #fff; padding: 4.5rem 0 4rem; border-bottom: 3px solid var(--color-primary); }
.hero--home .hero__overlay { display: none; }
.hero__title { font-size: clamp(2.8rem, 9vw, 5.2rem); line-height: 0.95; color: #fff; text-shadow: none; }
.hero__subtitle { color: #cfcfd4; font-size: 1.1rem; max-width: 34rem; margin-inline: auto; }
.hero__badges { gap: 0.5rem; }
.hero__badge {
  background: transparent; border: 1px solid #3a3a40; border-radius: 3px; color: #e8e8ea;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: none;
}

/* Botones */
.btn { border-radius: var(--radius); font-family: var(--font-family); font-weight: 600; letter-spacing: 0; box-shadow: none; transform: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn--primary { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--white { background: #fff; color: #000; border: 1px solid #fff; }
.btn--white:hover { background: #e9e9e7; }
.btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-text); }
.btn--outline.btn--white { color: #fff; border-color: #fff; }
.btn--outline:hover { background: var(--color-text); color: #fff; }
.btn--outline.btn--white:hover { background: #fff; color: #000; }
.btn--whatsapp { background: #000; color: #fff; border: 1px solid #000; }
.btn--whatsapp:hover { background: #1f1f23; }

/* ---------------------------------------------------------------
   Secciones y tarjetas
--------------------------------------------------------------- */
.section__title { color: var(--color-text); font-size: clamp(1.9rem, 5vw, 2.8rem); }
.section__subtitle { color: var(--color-text-light); }
.section--gray { background: #ebebe8; }

.version-card, .benefit, .category-card, .product-card,
.checkout-section, .cart-summary, .checkout-summary, .cart-item, .product-info-tab {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; transform: none;
}
.version-card:hover, .category-card:hover, .product-card:hover { transform: none; box-shadow: none; border-color: #000; }
.version-card--featured { border: 2px solid #000; }
.version-card__icon, .benefit__icon, .empty-cart-icon { display: none; }
.version-card__badge, .product-card__badge, .badge {
  background: #000; color: #fff; border-radius: 3px; font-family: var(--font-family); font-size: 0.75rem;
  text-transform: lowercase; letter-spacing: 0; font-weight: 600; box-shadow: none; display: inline-block;
}
.version-card__badge { background: var(--color-primary); }
.badge-sale, .product-card__badge--new { background: var(--color-primary); }

.product-card__image { background: #fff; border-bottom: 1px solid var(--color-border); }
.product-card__image img { object-fit: cover; transition: none; }
.product-card:hover .product-card__image img { transform: none; }
.product-card__category { color: var(--color-text-light); font-size: 0.8rem; font-weight: 500; }
.product-card__name { font-size: 1.2rem; line-height: 1.1; }
.product-card__name a { color: var(--color-text); }
.product-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--color-text); font-variant-numeric: tabular-nums; }

.product-detail__name { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1; }
.product-detail__price { font-family: var(--font-display); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.product-detail__image { border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; box-shadow: none; }
.product-thumbs__item { border-radius: 4px; border: 1px solid var(--color-border); }
.product-thumbs__item.active, .product-thumbs__item:hover { border-color: #000; }

/* Filtros */
.filter-bar a { border-radius: 3px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font-weight: 600; box-shadow: none; }
.filter-bar a.active, .filter-bar a:hover { background: #000; color: #fff; border-color: #000; }

/* Formularios */
.form-control, .search-input { border-radius: var(--radius); border: 1px solid var(--color-border); background: #fff; }
.form-control:focus, .search-input:focus { outline: 2px solid #000; outline-offset: 1px; border-color: #000; box-shadow: none; }

/* Pie */
.site-footer { background: #000; color: #bdbdc4; border-top: 3px solid var(--color-primary); }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer a { color: #e2e2e5; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Avisos */
.flash { border-radius: var(--radius); box-shadow: none; }
.cta-whatsapp { background: #000; color: #fff; border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Etiquetas de categoría: texto simple, sin pastilla de color */
.product-card__category, .product-detail__category {
  background: transparent; color: var(--color-text-light); padding: 0; border-radius: 0;
}
.breadcrumb a { color: var(--color-text-light); }
.breadcrumb a:hover { color: var(--color-primary); }
.site-header { border-bottom-color: #1d1d20; }

.badge::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------
   Foco visible para quien navega con teclado
--------------------------------------------------------------- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid #000; outline-offset: 2px;
}
.top-banner :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .cta-whatsapp :focus-visible {
  outline-color: #fff;
}

/* ---------------------------------------------------------------
   Tallas en cada tarjeta: lo que el comprador quiere saber primero
--------------------------------------------------------------- */
.tallas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0.25rem; padding: 0; }
.tallas__t {
  min-width: 2.1rem; padding: 0.15rem 0.45rem; text-align: center; font-size: 0.8rem; font-weight: 600;
  border: 1px solid #000; border-radius: 3px; background: #fff; color: #000; line-height: 1.4;
}
.tallas__t--agotada { border-color: var(--color-border); color: #8a8a92; font-weight: 500; }
.product-card__price { margin-top: 0.4rem; }

/* ---------------------------------------------------------------
   Inicio: el catálogo es la portada
--------------------------------------------------------------- */
.inicio { padding: 2rem 0 3rem; }
.inicio__cab { max-width: 40rem; margin-bottom: 1.25rem; }
.inicio__titulo { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.inicio__sub { color: var(--color-text-light); margin-top: 0.5rem; max-width: 34rem; }
.inicio__filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.inicio__filtros a, .inicio__equipos a {
  display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); border-radius: 3px;
  background: #fff; color: var(--color-text); font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.inicio__filtros a:hover, .inicio__equipos a:hover { background: #000; color: #fff; border-color: #000; }
.inicio__mas { margin-top: 1.75rem; }
.inicio__equipos-titulo { font-size: 1.7rem; margin: 3rem 0 0.9rem; }
.inicio__equipos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; }
/* En el teléfono caben dos tarjetas por fila */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .product-card__info { padding: 0.7rem; }
  .product-card__name { font-size: 1.02rem; }
  .tallas__t { min-width: 1.8rem; padding: 0.1rem 0.3rem; font-size: 0.74rem; }
  .product-card__price { font-size: 1.15rem; }
}

/* Aviso de pocas unidades y filtro por talla */
.tallas__t--pocas { border-color: var(--color-primary); }
.tallas__t sup { font-size: 0.75rem; margin-left: 0.15rem; color: var(--color-primary); font-weight: 700; }
.tallas__t--sel { background: #000; color: #fff; }
.tallas__t--sel sup { color: #fff; }
.inicio__versiones { color: var(--color-text-light); font-size: 0.92rem; max-width: 46rem; margin: -0.5rem 0 1rem; }
.inicio__versiones strong { color: var(--color-text); }
.inicio__tallas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; }
.inicio__tallas-t { font-weight: 600; margin-right: 0.3rem; }
.inicio__tallas a {
  min-width: 2.6rem; text-align: center; padding: 0.35rem 0.7rem; border: 1px solid #000; border-radius: 3px;
  background: #fff; color: #000; font-weight: 600; text-decoration: none;
}
.inicio__tallas a:hover, .inicio__tallas a.activa { background: #000; color: #fff; }
/* Filtro por talla: control secundario (borde fino); negro solo en la talla activa */
.inicio__tallas-t { font-size: 0.9rem; color: var(--color-text-light); }
.inicio__tallas a {
  min-width: 2.3rem; padding: 0.3rem 0.55rem; border: 1px solid var(--color-border); background: #fff; color: var(--color-text);
  font-size: 0.92rem; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.inicio__tallas a:active { transform: scale(0.97); }
.inicio__tallas a:hover { border-color: #000; }
.inicio__tallas a.activa { border-color: #000; }
/* En móvil la etiqueta "1 disp." ensancha la talla: el borde rojo ya avisa; el texto sigue en aria-label y title */
@media (max-width: 640px) { .tallas__t--pocas sup { display: none; } }

/* Los estilos antiguos forzaban mayúsculas en títulos, botones y pie: aquí se anulan */
h1, h2, h3, h4, .btn, .section__title, .cart-header h1,
.site-footer h3, .site-footer h4, .footer-section h3, .footer-section h4,
.checkout-section__title, .cart-summary h3, .filter-group h3, .filter-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.cart-item__remove { font-size: 1.5rem; line-height: 1; color: var(--color-text-light); }
.cart-item__remove:hover { background: #000; color: #fff; }

/* Detalle deportivo: banda de rayas bajo la cabecera y talla como dorsal */
.site-header { position: relative; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--color-primary) 0 18px, #fff 18px 22px, #000 22px 40px);
}
.tallas__t {
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.95rem;
  border-radius: 2px; min-width: 2.4rem; letter-spacing: 0.02em;
}

/* Páginas de información: el contenido guardado trae colores antiguos (naranja, azul, verde) */
.info-page__header { background: #000 !important; color: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
.info-page__header::before { display: none !important; }
.info-page__title { text-shadow: none !important; font-family: var(--font-display) !important; font-style: italic; font-weight: 700 !important; font-size: clamp(2rem, 6vw, 2.8rem) !important; }
.info-page__content { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--color-border); }
.info-page__content h2 { border-bottom: 3px solid #000 !important; color: #000 !important; font-family: var(--font-display); font-style: italic; }
.info-page__content h2::before, .info-page__content h3::before { color: var(--color-primary) !important; }
.info-page__content h3 { color: #000 !important; }
.info-page__content a { color: var(--color-primary) !important; }
.info-page__content [style*="background"], .info-page__content [style*="border"] { background-color: #f3f3f1 !important; border-color: #dcdcd7 !important; color: #111113 !important; }
.info-page__content [style*="gradient"] { background-image: none !important; background-color: #000 !important; color: #fff !important; }

.info-page__content table thead, .info-page__content table thead th { background: #000 !important; background-image: none !important; color: #fff !important; }
.info-page__content table tbody tr:hover { background: #f3f3f1 !important; transform: none !important; box-shadow: none !important; }
.info-page__content table tbody td strong, .info-page__content ul li::marker, .info-page__content h2::before { color: var(--color-primary) !important; }
.info-page__content .alert-info, .info-page__content .alert-warning, .info-page__content .alert-success, .info-page__content .alert-error {
  background: #f3f3f1 !important; background-image: none !important; border-color: #000 !important; color: #111113 !important; }
.contact-banner { background: #000 !important; background-image: none !important; color: #fff !important; }
.contact-banner::before { display: none !important; }

/* Títulos de sección de las páginas de información: sin línea ni marca decorativa */
.info-page__content h2 { border-bottom: none !important; padding-bottom: 0 !important; }
.info-page__content h2::before { content: none !important; display: none !important; }

/* Línea bajo la cabecera: roja y sólida, igual que la barra de arriba */
.site-header::after { background: var(--color-primary) !important; height: 3px !important; bottom: -3px !important; }

/* Tallas agotadas: contraste suficiente (WCAG AA) */
.tallas__t--agotada { color: #6b6b73; }
.tallas__t--agotada s { color: #6b6b73; }

/* Cajas de aviso de las páginas de información: negro, blanco y rojo (gana al estilo guardado en la página) */
.info-page .info-page__content .alert, .info-page .info-page__content .alert-info, .info-page .info-page__content .alert-success, .info-page .info-page__content .alert-warning, .info-page .info-page__content .alert-error, .info-page .info-page__content .contact-box {
  background: #f3f3f1 !important; background-image: none !important; border: 1px solid #000 !important; border-left: 4px solid var(--color-primary) !important; color: #111113 !important; box-shadow: none !important;
}

.info-page .info-page__content .size-guide-note { background: #f3f3f1 !important; border-left: 4px solid var(--color-primary) !important; color: #111113 !important; }

.info-page .info-page__content .size-guide-table p { background: #f3f3f1 !important; border-left: 4px solid var(--color-primary) !important; color: #111113 !important; }
/* Guía de tallas: recuadro plano como el resto de la tienda y tabla que quepa en el teléfono */
.info-page .info-page__content .size-guide-table { background: #fff !important; border: 1px solid var(--color-border) !important; border-radius: 0 !important; padding: 0.5rem !important; }
.info-page .info-page__content .size-guide-table th, .info-page .info-page__content .size-guide-table td { padding: 0.6rem 0.35rem; }
@media (max-width: 640px) {
  .info-page .info-page__content .size-guide-table table { font-size: 0.82rem; }
  .info-page .info-page__content .size-guide-table th, .info-page .info-page__content .size-guide-table td { padding: 0.5rem 0.25rem; }
}

/* Botón de menú en móvil: barras blancas sobre la barra negra del encabezado */
.menu-toggle span,
.menu-toggle__bar { background: #fff; }

/* Menú móvil: fondo negro para que los enlaces blancos se vean */
@media (max-width: 767px) {
    .main-nav { background: #000; border-top-color: #1a1a1a; }
}

/* Menú móvil: filas planas con icono de línea, carrito como botón rojo */
@media (max-width: 767px) {
    .main-nav { top: 70px; padding: 0.25rem 0 0.5rem; border: none; border-top: 1px solid #1f1f23; box-shadow: none; }
    .main-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; margin: 0; border: none; border-bottom: 1px solid #1f1f23; border-radius: 0; box-shadow: none; background: transparent; color: #fff; font-size: 1rem; font-weight: 600; }
    .main-nav a:last-child { border-bottom: none; }
    .main-nav a:hover, .main-nav a.active { box-shadow: none; background: #1a1a1a; color: #fff; }
    .main-nav a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .main-nav a.main-nav__cart { margin: 0.75rem 1rem 0.25rem; padding: 0.9rem; justify-content: center; border: none; border-radius: 6px; background: #dc2626; }
    .main-nav a.main-nav__cart:hover { background: #b91c1c; }
}

/* Escritorio: el menú de iconos vuelve a ser una fila de texto; el carrito ya está en la barra */
@media (min-width: 768px) {
    .main-nav a svg { display: none; }
    .main-nav a.main-nav__cart { display: none; }
}

/* Escritorio: la barra muestra solo las categorías; Inicio, Guía de tallas y Envíos quedan en el menú móvil y en el pie */
@media (min-width: 768px) {
    .main-nav a.main-nav__solo-movil { display: none; }
}

/* Escritorio: enlaces planos como en el móvil (sin píldora ni línea inferior) */
@media (min-width: 768px) {
    .main-nav a { border-radius: 0; box-shadow: none; background: transparent; color: #fff; }
    .main-nav a:hover { box-shadow: none; background: #1a1a1a; color: #fff; }
    .main-nav a.active { box-shadow: none; background: #1a0a0b; color: #dc2626; }
}

/* Portada: titular grande sobre negro, foto recortada y equipos como lista tipográfica */
.portada { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; background: #0b0b0b; color: #fff; padding: 28px 36px; margin-bottom: 28px; }
.portada__titulo { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 0.95; margin: 0 0 16px; color: #fff; }
.portada__sub { color: #d4d4d8; margin: 0 0 24px; }
.portada__cta { display: inline-block; background: #d7261e; color: #fff; padding: 0.85rem 1.4rem; border-radius: 4px; text-decoration: none; font-weight: 600; }
.portada__cta:hover { background: #b91c1c; }
.portada__foto { width: 100%; height: 280px; object-fit: contain; }
.equipos__titulo { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 1.6rem; margin: 0 0 12px; }
.equipos__lista { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #d9d8d2; }
.equipos__lista li { border-bottom: 1px solid #d9d8d2; }
.equipos__lista a { display: block; padding: 14px 12px 14px 0; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: #0b0b0b; text-decoration: none; }
.equipos__lista a:hover { color: #d7261e; }
@media (max-width: 768px) { .portada { grid-template-columns: 1fr; padding: 24px 20px; } .portada__foto { height: auto; max-height: 240px; } .equipos__lista { grid-template-columns: repeat(2, 1fr); } }

/* Portada: seis equipos destacados con foto de camiseta */
/* Fila de escudos: se desplaza con flechas; en móvil 2 a la vista y en escritorio 6 */
.equipos-carrusel { position: relative; margin: 0 0 16px; padding: 0 44px; }
.equipos__tiles { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.equipos__tiles::-webkit-scrollbar { display: none; }
.equipos__tiles > li { flex: 0 0 44%; scroll-snap-align: start; }
.equipos__flecha { position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #0b0b0b; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; transition: transform 160ms ease-out, background-color 160ms ease-out; }
.equipos__flecha:active { transform: translateY(-50%) scale(0.95); }
.equipos__flecha--prev { left: 0; }
.equipos__flecha--next { right: 0; }
.equipos__flecha[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .equipos__flecha:hover { background: #d7261e; } }
@media (prefers-reduced-motion: reduce) { .equipos__tiles { scroll-behavior: auto; } }
.equipos__tile { display: block; text-decoration: none; color: #0b0b0b; }
.equipos__tile img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #ededeb; border-radius: 4px; }
.equipos__tile span { display: block; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .equipos__tile:hover span { color: #d7261e; } }
.equipos__mas { margin: 0 0 40px; font-weight: 600; }
.equipos__mas a { color: #0b0b0b; }

/* Escudos de equipo: pequeños y en una sola fila en escritorio */
@media (min-width: 768px) { .equipos__tiles > li { flex-basis: calc((100% - 80px) / 6); } }
.equipos__tile { text-align: center; }
.equipos__tile img { width: 110px; max-width: 100%; margin: 0 auto; background: none; transition: transform 160ms ease-out; }
.equipos__tile:active img { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .equipos__tile:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .equipos__tile img { transition: none; } .equipos__tile:active img, .equipos__tile:hover img { transform: none; } }
.equipos__tile span { font-size: 1.05rem; }

/* Alerta de error: roja, grande y centrada abajo para que se lea */
.toast--error { background: #b91c1c; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.4; padding: 1rem 1.25rem; left: 1rem; right: 1rem; bottom: 1.5rem; width: min(520px, calc(100% - 2rem)); margin: 0 auto; border: 2px solid #fff; border-radius: 8px; text-align: center; }

/* Portada: título de productos y tres columnas para Fan, Jugador y Retro */
.inicio__productos-titulo { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 1.8rem; margin: 40px 0 16px; }
.versiones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 8px; }
.versiones p { margin: 0; }
.versiones strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-size: 1.2rem; }
.versiones span { color: #54545b; font-size: 0.95rem; }
@media (max-width: 768px) { .versiones { grid-template-columns: 1fr; } }

/* Beneficios dentro de la portada: sin fondo blanco, igual al resto de la página */
.inicio .benefits { background: transparent; padding: 0; margin: 0 0 8px; }

/* Buscador visible en escritorio: barra debajo del menú y resultados debajo del campo */
@media (min-width: 768px) {
    #searchToggle { display: none; }
    .search-bar-container { display: block; position: relative; top: auto; left: auto; right: auto; background: #000; border: none; box-shadow: none; padding: 0.6rem 0; }
    .search-bar-container .search-input { background: #fff; color: #0b0b0b; }
    .search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 200; background: #fff; box-shadow: var(--shadow-md); margin-top: 0; padding: 0.5rem; }
}

/* Buscador: campo centrado entre el menú y el banner */
@media (min-width: 768px) {
    .search-bar-container { background: #f3f3f1; border-bottom: 1px solid #dcdcd7; padding: 1rem 0; }
    .search-bar-wrapper { max-width: 640px; margin: 0 auto; }
    .search-bar-container .search-input { background: #fff; color: #0b0b0b; height: 52px; padding: 0 1.25rem; border: 1.5px solid #dcdcd7; border-radius: 999px; font-size: 1rem; }
    .search-bar-container .search-input:focus { border-color: #d7261e; }
    .search-results { width: 640px; max-width: 100%; left: 50%; transform: translateX(-50%); border-radius: 12px; }
}

/* Escritorio: la barra siempre está abierta, así que no hace falta el botón de cerrar y los resultados vacíos no se ven */
@media (min-width: 768px) {
    .search-bar-container .search-close { display: none; }
    .search-bar-container .search-results:empty { display: none; }
}

/* Buscador integrado al encabezado negro: campo oscuro, sin franja gris */
@media (min-width: 768px) {
    .search-bar-container { background: #000; border-bottom: none; padding: 0.75rem 0 1rem; }
    .search-bar-container .search-input { background: #1a1a1a; color: #fff; border: 1.5px solid #3f3f46; }
    .search-bar-container .search-input::placeholder { color: #a1a1aa; }
    .search-bar-container .search-input:focus { border-color: #d7261e; }
    .search-results { background: #fff; }
}

/* Encabezado en una sola fila: logo, menú, buscador y iconos */
@media (min-width: 768px) {
    .site-header { display: grid; grid-template-columns: auto auto minmax(240px, 1fr) auto; align-items: center; column-gap: 1.5rem; }
    .site-header > .site-header__inner { display: contents; }
    .site-header__inner > :first-child { grid-column: 1; }
    .site-header .main-nav { grid-column: 2; }
    .site-header .header-utils { grid-column: 4; }
    .search-bar-container { grid-column: 3; grid-row: 1; background: transparent; border: none; padding: 0; position: relative; }
    .search-bar-container > .container { max-width: none; padding: 0; }
    .search-bar-container .search-bar-wrapper { max-width: none; margin: 0; }
    .search-bar-container .search-input { height: 44px; padding: 0 1rem 0 2.6rem; border-radius: 999px; background-color: #1a1a1a; color: #fff; border: 1.5px solid #3f3f46; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.9rem center; font-size: 0.95rem; }
    .search-bar-container .search-results { width: 100%; left: 0; right: 0; transform: none; top: calc(100% + 6px); border-radius: 12px; }
}

/* Buscador: ancho fijo máximo y el resto del encabezado repartido */
@media (min-width: 768px) {
    .site-header { grid-template-columns: auto auto minmax(220px, 440px) auto; justify-content: space-between; }
}

/* Encabezado: la fila alinea con el contenido de la página, sin pegarse a los bordes */
@media (min-width: 768px) {
    .site-header { padding-inline: max(1rem, calc((100% - var(--max-width, 1200px)) / 2 + 1rem)); }
}

/* Encabezado: botones de 44 px para tocar y promoción más delgada */
@media (min-width: 768px) {
    .top-banner { padding: 0.35rem 1rem; font-size: 0.82rem; }
    .site-header .header-utils__btn { width: 44px; height: 44px; }
    .site-header .currency-toggle button { min-width: 44px; min-height: 44px; }
    .site-header .currency-toggle { height: 44px; }
}

/* Encabezado en escritorio: más altura para que la fila respire */
@media (min-width: 768px) {
    .site-header { padding-top: 0.9rem; padding-bottom: 0.9rem; }
}

/* Enlace "Ver los N equipos" como botón visible */
.equipos__mas { text-align: center; }
.equipos__mas a { display: inline-block; border: 2px solid #0b0b0b; border-radius: 4px; padding: 0.7rem 1.4rem; font-weight: 600; color: #0b0b0b; text-decoration: none; }
.equipos__mas a:hover { background: #0b0b0b; color: #fff; }

/* Encabezado fijo arriba al hacer scroll: el carrito y el buscador siempre a la vista */
header.site-header { position: sticky; top: 0; z-index: 100; }

/* Ficha de producto: respuesta al tocar, con propiedades concretas y curva ease-out */
.size-option { transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out; }
.btn--primary { transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.btn--primary:active { transform: scale(0.97); }
.qty-control .qty-btn { transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out; }
@media (max-width: 767px) { .qty-control .qty-btn { width: 40px; height: 40px; } }

/* Ficha de producto en la paleta de la marca: negro para la talla elegida, sin azul ni ámbar */
.size-options .size-option:not(.out-of-stock):not(.selected):hover { border-color: #000; background: #f3f3f1; color: #000; box-shadow: none; transform: none; }
.size-options .size-option.selected { border-color: #000; background: #000; color: #fff; box-shadow: none; transform: none; }
.size-options .size-option.out-of-stock { border: 1px solid var(--color-border); background: #fff; color: #6b6b73; opacity: 1; }
.size-options .size-option.out-of-stock--consultable:hover { border-color: #000; background: #f3f3f1; color: #6b6b73; opacity: 1; transform: none; }
.size-options .size-option.out-of-stock--consultable.selected { border-color: #000; background: #000; color: #fff; text-decoration: line-through; }
.size-options .size-option.out-of-stock--consultable.selected::after { content: none; }
/* La palabra "Agotado" bajo cada talla sobra: la talla tachada ya lo dice */
.size-option.out-of-stock::after { display: none; }
.size-options { margin-bottom: 0.25rem; }
/* En el teléfono las tallas ocupan todo el ancho, en columnas iguales */
@media (max-width: 640px) {
  .size-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 0.5rem; }
  .size-options .size-option { padding: 0.5rem 0.25rem; min-width: 0; }
}
/* Aviso "bajo pedido": gris neutro con franja roja, como el resto de los avisos */
.stock-notice--preorder { background: #f3f3f1 !important; border: 1px solid #000 !important; border-left: 4px solid var(--color-primary) !important; color: #111113 !important; }
.stock-notice--preorder svg { color: var(--color-primary); }

/* Carrito en móvil: cantidad y subtotal en una sola fila, sin cajas grises apiladas */
@media (max-width: 767px) {
  .cart-item { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .cart-item__product { grid-column: 1 / -1; }
  .cart-item__quantity, .cart-item__total { background: none; padding: 0; }
  .cart-item__quantity { justify-content: flex-start; }
  .cart-item__total { justify-content: flex-end; text-align: right; }
  .cart-item__total::before { margin-right: 0.5rem; }
}

/* Pago: respuesta al tocar con transiciones concretas (no "all"); hover solo con puntero fino */
.payment-method__content, .resumen-toggle {
  transition: transform 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}
.payment-method:active .payment-method__content, .resumen-toggle:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .payment-method:hover .payment-method__content { border-color: var(--color-primary); }
}

/* Accesibilidad (WCAG 2.5.5): enlaces del pie y migas de pan con área táctil de 44 px */
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
/* Migas de pan: enlaces con 44 px de área táctil, centrados y con el mismo tamaño de letra que el texto */
.breadcrumb { align-items: center; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }

/* Tarjetas del catálogo (emil-design-eng): el hover no se queda pegado al tocar en el teléfono; la tarjeta responde al pulsar */
@media (hover: none) {
  .product-grid .product-card:hover { transform: none; box-shadow: none; }
  .product-grid .product-card:hover .product-card__image img { transform: none; }
}
.product-grid .product-card { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.product-grid .product-card:active { transform: scale(0.98); }
/* Consistencia (revisión de diseño): los botones y campos usan la tipografía de la tienda, no Arial del navegador */
button, input, select, textarea { font-family: inherit; }
/* Textos guardados en las páginas de información con grises azulados: se unifican al negro de la marca */
.info-page__content, .info-page__content p, .info-page__content li, .info-page__content td, .info-page__content [style*="color"] { color: #111113 !important; }
/* Envíos: la regla de pagina-info.css es más específica; aquí se iguala para que el recuadro sea blanco y gris, sin azul */
.info-page__content .shipping-info { background: #fff !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; }
.info-page__content .shipping-info h4 { color: #111113 !important; border-color: #000 !important; }

/* Banner de la portada en carrusel (diapositivas editables desde el panel) */
.banner { position: relative; display: grid; background: #0b0b0b; color: #fff; overflow: hidden; margin: 1.5rem 0; }
.banner__slide { grid-area: 1 / 1; display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; opacity: 0; visibility: hidden; transform: translateX(3%); transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms; }
.banner__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.banner__img { width: 34%; max-width: 280px; aspect-ratio: 1; object-fit: cover; flex-shrink: 0; }
.banner__texto { min-width: 0; }
.banner__titulo { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.05; color: #fff; margin: 0 0 0.4rem; }
.banner__sub { color: #c9c9cf; font-size: 0.95rem; margin: 0 0 0.75rem; }
.banner__cta { display: inline-block; background: var(--color-primary); color: #fff; padding: 0.8rem 1.4rem; border-radius: 3px; font-weight: 600; text-decoration: none; transition: transform 160ms ease-out; }
.banner__cta:active { transform: scale(0.97); }
.banner__ctrl { position: absolute; top: 50%; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; transform: translateY(-50%); transition: transform 160ms ease-out, background-color 160ms ease-out; }
.banner__ctrl:active { transform: translateY(-50%) scale(0.95); }
.banner__ctrl--prev { left: 0.5rem; }
.banner__ctrl--next { right: 0.5rem; }
.banner__puntos { position: absolute; bottom: 0.6rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.5rem; z-index: 2; }
.banner__punto { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.banner__punto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background-color 160ms ease-out, transform 160ms ease-out; }
.banner__punto:active::before { transform: scale(0.85); }
.banner__punto.is-active::before { background: #fff; }
@media (hover: hover) and (pointer: fine) { .banner__ctrl:hover { background: rgba(255, 255, 255, 0.3); } }
@media (max-width: 640px) {
  .banner__slide { flex-direction: column; align-items: flex-start; padding: 0.75rem 0.75rem 2.25rem; gap: 0.75rem; }
  .banner__img { width: 100%; max-width: none; aspect-ratio: 2 / 1; }
  .banner__titulo { font-size: 1.4rem; }
  .banner__cta { padding: 0.6rem 1.1rem; }
  .banner__ctrl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .banner__slide { transform: none !important; transition: opacity 200ms ease-out; } }

/* Índice de las páginas de información: enlaces con área táctil de 44 px (WCAG 2.5.5) */
.info-indice a { display: inline-flex; align-items: center; min-height: 44px; }
/* Portada: la foto se separa del fondo negro del recuadro */
.portada__foto { box-shadow: 0 0 0 1px #2a2a2f; }

/* Revisión de diseño (design-critique): jerarquía de botones en la ficha, carrito y guía de tallas */
.btn--lg#buyNowBtn { background: #fff; color: #000; border: 2px solid #000; }
.btn--lg#buyNowBtn:hover { background: #000; color: #fff; }
.cart-clear { display: flex; justify-content: flex-end; padding-top: 0.75rem; }
.info-page .info-page__content .size-guide-table table { width: 100%; }
.info-page .info-page__content .size-guide-table th { white-space: normal; line-height: 1.25; }

/* Mejoras de interacción (criterios de emil-design-eng) */
/* 1. Transiciones concretas en lugar de "all" */
.product-card, .btn, .header-utils__btn, .main-nav a, .currency-toggle button {
    transition-property: background-color, border-color, color, transform, box-shadow, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}
/* 2. Tarjetas: elevación y zoom suaves al pasar el cursor */
.product-grid .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.product-grid .product-card:hover .product-card__image img { transform: scale(1.02); }
.product-grid .product-card__image img { transition: transform 0.25s ease-out; }
/* 3. Menú móvil: aparece con un desvanecido corto */
@keyframes menuAparece { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.main-nav.active { animation: menuAparece 0.15s ease-out; }
/* 4. Botones secundarios: responden al presionar */
.btn:active, .header-utils__btn:active, .currency-toggle button:active { transform: scale(0.97); }
/* 5. Notificación: entrada con curva ease-out */
.toast { animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
    .main-nav.active, .toast, .product-grid .product-card:hover .product-card__image img { animation: none; transition: none; }
}

/* Formulario de pago: errores debajo de cada campo, resumen fijo y métodos de pago uniformes */
.field-error { color: #b91c1c; font-size: 0.85rem; font-weight: 600; margin: 0.35rem 0 0; }
.is-invalid { border-color: #b91c1c !important; }
.payment-method__icon { display: none; }
.payment-method__name::after { content: 'Recibes las instrucciones por WhatsApp'; display: block; font-size: 0.8rem; font-weight: 400; color: #54545b; margin-top: 0.15rem; }
@media (min-width: 768px) {
    .checkout-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
    .checkout-summary { position: sticky; top: 110px; }
}

/* Resumen plegable en celular (en escritorio se muestra completo al lado) */
.resumen-toggle { display: none; }
@media (max-width: 767px) {
    .resumen-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.9rem 1rem; background: #fff; border: 1.5px solid #0b0b0b; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
    .checkout-summary { display: none; }
    .checkout-summary.resumen-abierto { display: block; margin-bottom: 1rem; }
}

/* Formulario de pago: un solo recuadro, secciones separadas por una línea fina */
.checkout-section { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.checkout-section + .checkout-section { border-top: 1px solid var(--color-border); margin-top: 1.75rem; padding-top: 1.75rem; }
.checkout-section__title { margin: 0 0 1rem; }

/* Catálogo: explicación de versiones en una línea, sin buscador repetido y cuadrícula más compacta */
.section .container > .versiones { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; grid-template-columns: none; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.section .container > .versiones p { margin: 0; }
.catalog-filters .filter-section:has(#searchForm) { display: none; }
.catalog-content .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Quitada la explicación de versiones del catálogo */
.section .container > .versiones { display: none; }

/* Tamaño para tocar (mínimo 44 px) y más espacio en los enlaces del pie */
.cart-item__remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
.site-footer a { display: inline-block; padding: 0.4rem 0; }

/* Botones + y − de la cantidad: 44 px en todas las pantallas */
.qty-control .qty-btn { width: 44px; height: 44px; }

/* Índice en páginas de información largas */
.info-indice { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.info-indice strong { display: block; margin-bottom: 0.5rem; }
.info-indice ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.info-indice li { margin: 0.3rem 0; break-inside: avoid; }
.info-indice a { color: #0b0b0b; text-decoration: underline; }
.info-page__content h3 { scroll-margin-top: 120px; }
@media (max-width: 640px) { .info-indice ul { columns: 1; } }

/* Páginas de información: recuadros blancos con borde, como el resto de la tienda */
.shipping-info { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; }

/* Aviso del carrito: esquina inferior izquierda para no tapar el botón de WhatsApp; entrada ease-out rápida */
.toast { left: 1.5rem; right: auto; bottom: 1.5rem; animation: slideUp 220ms ease-out; }
@media (max-width: 640px) { .toast { left: 1rem; right: 5rem; bottom: 1rem; } }

/* Pie: redes sociales (Emil): propiedades concretas, respuesta al tocar, hover solo en computadora */
.social-links a { transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.social-links a:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
    .social-links a:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .social-links a, .social-links a:active, .social-links a:hover { transition: none; transform: none; }
}