/* Tienda Club Promesas. Identidad sobre base.css, que trae la vitrina de S3R (catálogo con panel, tarjetas, ficha con galería,
   destacados que se mueven, cinta de avisos y menú de tarjetas):
   - Navy #0D2850 y rojo #E01E2B del uniforme; el ribete rojo-blanco-rojo del cuello del peto como firma.
   - Archivo (la familia de Archivo Narrow que ya usaba la tienda), en un solo archivo variable:
     condensada y pesada para títulos y números de dorsal, ancho normal para leer.
   - Esquinas redondeadas como las de S3R y fotos de estudio a sangre, como una camiseta de juego. */
:root {
  --navy: #0D2850;
  --navy-hondo: #081B38;
  --navy-tinte: #E9EEF6;
  --rojo: #E01E2B;          /* blanco encima: 4,8:1 */
  --rojo-hondo: #B8121F;    /* rojo para texto chico sobre blanco: 6,7:1 */
  --rojo-claro: #FF6B74;    /* rojo para texto sobre navy: 5,3:1 */
  --fondo: #ffffff;
  --fondo-2: #F2F4F7;
  --superficie: #ffffff;
  --foto: #E7E9EC;          /* el gris del estudio de las fotos de producto */
  --carbon: var(--navy-hondo);
  --texto: #0B1A33;
  --suave: #4B5A70;         /* 7:1 sobre blanco */
  --tenue: #5F6E84;         /* 5,2:1 sobre blanco */
  --linea: #D5DCE6;
  --linea-fuerte: #B9C3D2;
  --acento: var(--rojo);
  --acento-texto: #ffffff;
  --ok: #117A45;
  --error: #B42318;
  --aviso-fondo: #FFF2F0;
  --radio: 12px;            /* las esquinas de S3R: redondas de verdad, no un filo de 3 px que parece un error */
  --radio-grande: 22px;
  --ancho: 1320px;          /* el de S3R: caben las categorías, el buscador y «Rastrea tu pedido» en una fila */
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: var(--fuente);
  --display: var(--fuente);
  --mono: var(--fuente);    /* etiquetas chicas en mayúscula: la misma Archivo, un poco condensada */
  --ribete: linear-gradient(var(--rojo) 0 33.4%, #fff 33.4% 66.6%, var(--rojo) 66.6%);
  --ribete-v: linear-gradient(90deg, var(--rojo) 0 33.4%, #fff 33.4% 66.6%, var(--rojo) 66.6%);
  --cancha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 1500' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='7'%3E%3Cpath d='M1400 90H1101a675 675 0 0 0 0 1320h299M820 505h580v490H820zM820 570a180 180 0 0 1 0 360M1400 690h-110v120h110M0 570a180 180 0 0 1 0 360'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { font-family: var(--fuente); color: var(--texto); }
h1, h2 { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .95; color: var(--navy); overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-weight: 700; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.cabecera :focus-visible, .pie :focus-visible, .personaliza :focus-visible { outline-color: #fff; }
.saltar { background: var(--navy); color: #fff; }
.icono { stroke-width: 2.2; }
.mono { font-weight: 700; font-stretch: 87.5%; letter-spacing: .12em; }

/* Antetítulo con el ribete del peto */
.antetitulo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-hondo); }
.antetitulo::before { content: ""; width: 26px; height: 6px; flex: none; background: var(--ribete); }
@media (max-width: 479px) { .antetitulo { font-size: .72rem; letter-spacing: .1em; } }

/* Botones */
.boton { border-radius: var(--radio); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-stretch: 87.5%; font-size: 1rem; }
.boton:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }
.boton--secundario { background: transparent; color: var(--navy); border-color: var(--navy); }
.boton--secundario:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.boton--grande { font-size: 1.05rem; padding-inline: 26px; }
.boton:disabled:hover { background: var(--acento); border-color: var(--acento); }
.enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 600; }

/* Cinta de avisos: navy hondo con puntos rojos */
.cinta { background: var(--navy-hondo); color: rgba(255, 255, 255, .92); }
.cinta__aviso::before { background: var(--rojo-claro); opacity: 1; }

/* Cabecera: fila navy con el ribete del cuello — el logo a la izquierda, las secciones al centro (pastilla en la que se ve)
   y a la derecha buscar, «Rastrea tu pedido» y el carrito */
.cabecera { background: var(--navy); color: #fff; border-bottom: 0; }
.cabecera::after { content: ""; display: block; height: 6px; background: var(--ribete); }
.cabecera__fila { position: relative; min-height: 72px; gap: clamp(8px, 1.6vw, 20px); }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.marca__logo { width: auto; height: 38px; }
.marca__escudo { width: 40px; height: 40px; flex: none; }
.marca__texto { display: grid; font-size: 1.2rem; font-weight: 800; font-stretch: 75%; line-height: 1; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.marca__texto small { margin-bottom: 3px; font-size: .6rem; font-weight: 700; font-stretch: 100%; letter-spacing: .24em; color: var(--rojo-claro); }
.cabecera__nav { flex: 1 1 auto; min-width: 0; }
.cabecera__nav ul { gap: 2px; justify-content: center; }
.cabecera__nav a { display: flex; align-items: center; min-height: 40px; padding: 0 clamp(12px, 1.2vw, 18px); border: 1px solid transparent; border-radius: 999px;
  color: #fff; font-size: .88rem; font-weight: 700; font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cabecera__nav a:hover { text-decoration: none; background: rgba(255, 255, 255, .12); }
.cabecera__nav a[aria-current] { background: rgba(224, 30, 43, .24); border-color: var(--rojo); }
/* A la derecha solo la lupa y el carrito, del mismo peso que el resto de la fila */
.cabecera__acciones { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.cabecera__icono, .cabecera__carrito { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; color: #fff; }
.cabecera__icono:hover, .cabecera__carrito:hover { background: rgba(255, 255, 255, .12); }
.cabecera__icono[aria-current] { background: rgba(255, 255, 255, .16); }
.contador { top: 0; right: -2px; background: var(--rojo); color: #fff; box-shadow: 0 0 0 2px var(--navy); }
.marca, .cabecera__acciones { flex: none; }
.cabecera .cabecera__menu { color: #fff; }

@media (max-width: 900px) { .cabecera__fila { min-height: 64px; } .marca__logo { height: 32px; } }
@media (max-width: 380px) { .cabecera__fila { gap: 4px; } .marca__logo { height: 28px; } }

/* Menú del celular: tarjetas navy, navy hondo y roja sobre blanco */
.menu-tarjetas { background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--linea); }
.menu-tarjetas__buscar { border-color: var(--linea-fuerte); border-radius: var(--radio); }
.menu-tarjeta { border-radius: var(--radio); background: var(--navy-hondo); }
.menu-tarjeta:nth-of-type(2) { background: var(--navy); }
.menu-tarjeta:nth-of-type(3) { background: var(--rojo-hondo); }
.menu-tarjeta__titulo { font: normal 900 2rem/.9 var(--fuente); font-stretch: 68%; text-transform: uppercase; }

/* Migas con toque cómodo */
.migas ol { gap: 0 6px; align-items: center; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--suave); }

/* Secciones */
.seccion { padding-block: clamp(40px, 7vw, 88px); }
.seccion--gris { background: var(--fondo-2); }
.seccion__cabeza { display: grid; gap: 4px 32px; margin-bottom: clamp(20px, 3vw, 32px); }
.seccion__cabeza h2 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.4rem); }
.seccion__cabeza .antetitulo { margin: 0 0 6px; }
.seccion__bajada { max-width: 60ch; margin: 8px 0 0; color: var(--suave); font-size: 1.05rem; }
.seccion__enlaces { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 4px 0 0; }
.seccion__enlaces a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); font-weight: 700; }
@media (min-width: 900px) {
  .seccion__cabeza { grid-template-columns: minmax(0, 1fr) auto; }
  .seccion__cabeza > * { grid-column: 1; }
  .seccion__cabeza .seccion__enlaces { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-content: flex-end; }
}

/* Portada */
/* La foto ocupa toda la portada y el texto va encima, sobre el degradado navy (como la tienda anterior) */
.portada { padding: 0; }
/* El alto nunca baja de 40vw: en pantallas anchas y bajas, si no, la foto se recorta tanto que le corta la cabeza al jugador.
   Y el encuadre va arriba (24 %) por lo mismo: lo que sobra se quita del piso, no de la cabeza. */
.portada__marco { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(520px, calc(100svh - 160px), 40vw);
  overflow: hidden; background: var(--navy-hondo); color: #fff; }
.portada__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 24%; }
.portada__marco::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 27, 56, .94), rgba(8, 27, 56, .74) 40%, rgba(8, 27, 56, .1) 78%); }
.portada__marco::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: var(--ribete); }
.portada__contenido { padding-block: clamp(40px, 8vh, 96px); }
.portada .antetitulo { color: #fff; }
.portada__titulo { margin: 0 0 18px; max-width: 14ch; font-size: clamp(3rem, 1.4rem + 6.6vw, 6.4rem); font-stretch: 68%; font-weight: 900; line-height: .86; letter-spacing: 0; color: #fff; }
.portada__titulo span { display: block; color: var(--rojo); }
.portada__bajada { max-width: 44ch; margin-bottom: 24px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, .84); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada__acciones .boton--secundario { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.portada__acciones .boton--secundario:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }
@media (max-width: 479px) { .portada__acciones .boton { flex: 1 1 100%; } }
.portada__datos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .84); }
.portada__datos li { display: flex; align-items: center; gap: 8px; }
.portada__datos .icono { color: var(--rojo-claro); }
/* En celular la foto se ve entera arriba y el texto entra sobre el degradado; el marco va con esquinas redondas, como en S3R */
@media (max-width: 700px) {
  .portada { padding: 12px var(--gutter) 0; }
  .portada__marco { display: block; min-height: 0; border-radius: var(--radio-grande); }
  .portada__foto { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; object-position: 64% 20%; }
  .portada__marco::before { inset: auto 0 0; height: 58%; background: linear-gradient(rgba(8, 27, 56, 0), rgba(8, 27, 56, .88) 42%, var(--navy-hondo) 78%); }
  .portada__marco::after { display: none; }
  .portada__contenido { position: relative; margin-top: -90px; padding: 0 20px clamp(26px, 5vw, 34px); }
}

/* Destacados y tarjetas de producto: fotos de estudio a sangre, etiquetas como parches del uniforme */
.destacados { padding-top: clamp(40px, 7vw, 88px); }
.destacados h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.destacados .antetitulo { margin-bottom: 6px; }
.producto__foto { border-radius: var(--radio); background: var(--foto); }
.producto__img { object-fit: cover; padding: 0; }
.producto__img--2 { background: var(--foto); }
.producto__hueco { color: #CDD4DE; font-family: var(--fuente); font-style: normal; font-weight: 900; font-stretch: 68%; }
.producto__etiqueta { top: 8px; left: 8px; padding: 5px 8px 4px; border-radius: 6px; background: var(--navy); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.producto__etiqueta--oficial, .galeria__etiqueta--oficial { box-shadow: inset 0 -3px 0 var(--rojo); }
.producto__etiqueta--oferta, .galeria__etiqueta--oferta { background: var(--rojo); }
.producto__etiqueta--nuevo, .galeria__etiqueta--nuevo { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.producto__agotado span { border-radius: 6px; }
.producto__nombre { font-size: 1.02rem; font-weight: 700; line-height: 1.25; color: var(--texto); }
@media (hover: hover) { .producto__enlace:hover .producto__nombre { text-decoration-color: var(--rojo); text-decoration-thickness: 2px; } }
.producto__precio { color: var(--navy); font-weight: 800; }
.producto__tallas { font-size: .66rem; }
.producto__perso { color: var(--rojo-hondo); font-weight: 700; }

/* Personaliza tu peto (portada) y vista previa en la ficha */
.personaliza { padding-block: clamp(44px, 8vw, 96px); color: #fff; background: var(--navy); }
@media (min-width: 800px) { .personaliza { background: var(--cancha) no-repeat 112% 50% / auto 125%, var(--navy); } }
.personaliza__grilla { display: grid; gap: 32px; }
@media (min-width: 800px) { .personaliza__grilla { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; } }
.personaliza h2 { color: #fff; font-size: clamp(2.4rem, 5.6vw, 4rem); margin-bottom: 14px; }
.personaliza .antetitulo { color: var(--rojo-claro); }
.personaliza__texto { max-width: 600px; }
.personaliza__bajada { max-width: 46ch; font-size: 1.1rem; color: rgba(255, 255, 255, .88); }
.personaliza__precio { margin: 0 0 18px; font-size: 1.05rem; }
.personaliza__precio b { font-size: 1.6rem; font-stretch: 75%; color: #fff; margin-right: 4px; }
.personaliza .nota { max-width: 52ch; margin-top: 16px; color: rgba(255, 255, 255, .78); }
.pasos-club { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: paso; }
.pasos-club li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 10px; counter-increment: paso; }
.pasos-club li::before { content: counter(paso, decimal-leading-zero); font-size: 1.9rem; font-weight: 900; font-stretch: 62%; line-height: 1; color: var(--rojo-claro); }
.espalda { position: relative; margin: 0; container-type: inline-size; border-radius: var(--radio); overflow: hidden; background: #E3E4E6; }
.espalda img { width: 100%; height: auto; }
.espalda__nombre, .espalda__numero { position: absolute; left: 0; right: 0; color: #fff; text-align: center; text-transform: uppercase; line-height: 1; pointer-events: none; font-stretch: 75%; }
.espalda__nombre { top: 15.5%; font-size: min(8.4cqw, calc(80cqw / var(--letras, 9))); font-weight: 800; letter-spacing: .06em; }
.espalda__numero { top: 23%; font-size: 40cqw; font-weight: 900; font-stretch: 70%; }
.espalda[data-producto="peto-blanco"] span { color: var(--navy); }
.espalda .espalda--ejemplo { opacity: .55; }
.espalda--portada { width: 100%; max-width: 400px; box-shadow: 0 0 0 6px var(--navy-hondo); }
@media (max-width: 799px) { .espalda--portada { max-width: 250px; } }
.espalda figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgba(8, 27, 56, .82); color: #fff; font-size: .72rem; line-height: 1.3; }

/* Catálogo: el panel de la vitrina en navy, con el ribete sobre el título */
.catalogo__cabeza h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
.catalogo__cabeza h1::before { content: ""; display: block; width: 40px; height: 6px; margin-bottom: 16px; background: var(--ribete); }
.catalogo__intro { font-size: 1.05rem; }
.panel__categoria { border-radius: var(--radio); color: var(--navy); font-size: .88rem; font-weight: 700; font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; }
.panel__fondo { border-radius: var(--radio); background: var(--navy); box-shadow: inset 4px 0 0 var(--rojo); }
.opcion-filtro input { accent-color: var(--navy); }
.chip-talla span { border-radius: var(--radio); font-weight: 700; }
.chip-talla input:checked + span { background: var(--navy); border-color: var(--navy); }
.filtro select { border-radius: var(--radio); }
.panel__limpiar { color: var(--navy); font-weight: 700; }
.panel__filtros > summary, .panel__filtros form { border-radius: var(--radio); }
.panel__filtros[open] > summary { background: var(--navy); border-color: var(--navy); }
.pildoras, .pildora, .pildora__fondo { border-radius: var(--radio); }
.pildora__fondo { background: var(--navy); }
.vacio h1 { margin-top: 12px; }

/* Formularios */
select, input:not([type=checkbox]):not([type=radio]), textarea { border-color: #B9C3D2; border-radius: var(--radio); }
select:hover, input:not([type=checkbox]):not([type=radio]):hover, textarea:hover { border-color: var(--suave); }
.casilla input { accent-color: var(--navy); }

/* Ficha de producto: galería con fundido y tallas con anillo (vitrina), en navy; fotos a sangre */
.galeria__marco, .galeria__mini { border-radius: var(--radio); background: var(--foto); }
.galeria__img, .galeria__mini img { object-fit: cover; padding: 0; }
.galeria__mini img { opacity: .8; }
.galeria__mini.activa { border-color: var(--navy); }
.galeria__num { border-radius: 6px; background: var(--navy); color: #fff; }
.galeria__etiqueta { border-radius: 6px; background: var(--navy); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.objeto__precio { color: var(--navy); font-weight: 800; font-stretch: 80%; letter-spacing: 0; }
.opciones legend { color: var(--navy); font-weight: 800; font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; }
.talla-opcion span:first-of-type { min-width: 64px; border-radius: var(--radio); font-weight: 700; }
.talla-opcion:hover span:first-of-type { border-color: var(--navy); }
.opciones__anillo { border-radius: var(--radio); background: var(--navy); }
.opciones__lista:not(.con-anillo) .talla-opcion input:checked + span { background: var(--navy); }
.opciones__pie a { color: var(--navy); font-weight: 600; }
.cantidad { border-radius: var(--radio); }
.cantidad button { border-radius: 6px; }
.enlace--comprar { color: var(--navy); font-weight: 700; }
.confianza .icono { color: var(--rojo); }
.pronto { border-radius: 6px; background: var(--navy); }
.compra .personalizar { position: relative; padding: 22px 16px 16px; border-radius: var(--radio); background: var(--navy-tinte); }
.compra .personalizar::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ribete); border-radius: var(--radio) var(--radio) 0 0; }
.personalizar .casilla { font-weight: 700; color: var(--navy); }
.personalizar .casilla b { color: var(--rojo-hondo); white-space: nowrap; }
.personalizar__campos label { font-weight: 700; color: var(--navy); }
.personalizar__campos:has(.espalda) { grid-template-columns: minmax(118px, 38%) minmax(0, 1fr); grid-template-areas: "vista nombre" "vista numero" "vista nota"; align-items: start; }
.personalizar__campos:has(.espalda) .espalda { grid-area: vista; }
.personalizar__campos:has(.espalda) > label:nth-of-type(1) { grid-area: nombre; }
.personalizar__campos:has(.espalda) > label:nth-of-type(2) { grid-area: numero; }
.personalizar__campos:has(.espalda) .nota { grid-area: nota; }
.personalizar__campos input { background: #fff; font-weight: 700; letter-spacing: .04em; }

/* Carrito, checkout, pago y pedido */
.resumen { background: var(--ribete) top / 100% 6px no-repeat, var(--navy-tinte); padding-top: 26px; }
.resumen h2, .pedido__detalle h2 { font-size: 1.5rem; }
.linea__nombre { color: var(--navy); }
.linea__perso { color: var(--texto) !important; }
.linea__perso b { color: var(--rojo-hondo); letter-spacing: .04em; }
.checkout__formulario legend { font-stretch: 75%; text-transform: uppercase; color: var(--navy); font-size: 1.6rem; }
.opcion { border-color: #B9C3D2; min-height: 64px; }
.opcion:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-tinte); }
.opcion input { accent-color: var(--navy); width: 20px; height: 20px; margin-top: 2px; }
.pago h1, .estado h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.pasos li.actual::before { background: var(--navy); border-color: var(--navy); }
.alerta { border-left-color: var(--rojo); }

/* Texto largo y tablas */
.texto-largo h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
.texto-largo h2 { font-size: 1.35rem; }
.texto-largo a { color: var(--navy); font-weight: 600; }
th { background: var(--navy-tinte); color: var(--navy); }

/* Copa y entrega */
.copa--pronto { padding-block: clamp(32px, 5vw, 56px) 0; }
.copa__pronto { display: grid; gap: 8px 28px; align-items: center; padding: 20px 22px; border-left: 6px solid var(--navy); border-radius: var(--radio); background: var(--navy-tinte); }
@media (min-width: 800px) { .copa__pronto { grid-template-columns: auto minmax(0, 1fr); } }
.copa__pronto h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.copa__pronto p { margin: 0; color: var(--suave); }
.sello { display: inline-block; margin-right: 8px; padding: 3px 8px 2px; border-radius: 6px; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.entrega__lista { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .entrega__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .entrega__lista { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.entrega__lista li { padding-top: 16px; border-top: 3px solid var(--navy); }
.entrega__lista .icono { width: 28px; height: 28px; color: var(--rojo); }
.entrega__lista h3 { margin: 10px 0 6px; font-size: 1.15rem; color: var(--navy); }
.entrega__lista p { margin: 0; color: var(--suave); }
.entrega__lista a { color: var(--navy); font-weight: 700; }

/* Categorías de protección y accesorios */
.categorias-club { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .categorias-club { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; } }
.categorias-club a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 8px 14px 8px 8px; border-radius: var(--radio); background: #fff; color: var(--texto); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea); }
@media (min-width: 800px) { .categorias-club a { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 10px 18px 10px 10px; } }
.categorias-club a:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.categorias-club__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #E7E9EC; }
.categorias-club__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.categorias-club__texto { display: grid; gap: 3px; }
.categorias-club__nombre { font-size: 1.35rem; font-weight: 800; font-stretch: 75%; line-height: 1; text-transform: uppercase; color: var(--navy); }
.categorias-club__intro { display: none; font-size: .88rem; line-height: 1.35; color: var(--suave); }
@media (min-width: 1100px) { .categorias-club__intro { display: block; } }
.categorias-club__conteo { font-size: .85rem; font-weight: 600; color: var(--suave); }
.categorias-club__flecha { color: var(--rojo); }

/* Pie: navy con el ribete arriba */
.pie { margin-top: clamp(64px, 9vw, 120px); padding: 64px 0 28px; background: var(--navy-tinte); color: var(--texto); border-top: 1px solid #CFD9E8; }
.pie__columnas { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 800px) { .pie__columnas { grid-template-columns: 1fr 1fr; } .pie__club { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie__columnas { grid-template-columns: 1fr; gap: 24px; } }
.marca--pie { margin-bottom: 16px; }
.marca--pie .marca__logo { height: 46px; }
.pie ul { gap: 0; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--suave); }
.pie a:hover { color: var(--navy); }
.pie__titulo { margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.pie__texto { max-width: 42ch; color: var(--suave); }
.pie__redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pie__redes a { gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fondo); box-shadow: inset 0 0 0 1px #C8D3E4;
  color: var(--navy); font-size: .86rem; font-weight: 700; font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; }
.pie__redes a:hover { background: var(--navy); color: #fff; box-shadow: none; text-decoration: none; }
.pie__cierre { margin-top: clamp(32px, 4vw, 48px); padding-top: 18px; border-top-color: #CFD9E8; color: var(--tenue); }
.pie__pagos { display: inline-flex; align-items: center; gap: 8px; }
.pie__pagos .icono { width: 18px; height: 18px; color: var(--navy); }

/* Cargando: el escudo rebota como un balón (pantalla de carga, espera del pago y catálogo que filtra) */
.carga-iso { width: 56px; height: 56px; border: 0; border-radius: 50%; background: url("club/escudo.webp") center / contain no-repeat;
  animation: carga-bote .42s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.carga-iso--grande { width: 76px; height: 76px; }
.pantalla-carga .carga-iso { width: 96px; height: 96px; }
@keyframes carga-bote { from { transform: translateY(-18px); } to { transform: translateY(6px) scale(1.06, .94); } }
[data-catalogo][aria-busy="true"] .resultados { position: relative; }
[data-catalogo][aria-busy="true"] .resultados::before { content: ""; position: absolute; inset: -12px; z-index: 3; background: rgba(255, 255, 255, .72); opacity: 0; animation: carga-aparece .2s .25s forwards; }
[data-catalogo][aria-busy="true"] .resultados::after { content: ""; position: absolute; z-index: 4; left: 50%; top: min(38vh, 50%); width: 72px; height: 72px; translate: -50% -50%;
  background: url("club/escudo.webp") center / contain no-repeat; opacity: 0; animation: carga-aparece .2s .25s forwards, carga-bote .42s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .carga-iso { animation: none; } [data-catalogo][aria-busy="true"] .resultados::after { animation: carga-aparece .2s .25s forwards; } }

/* Aviso flotante */
.toast { background: var(--navy); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(8, 27, 56, .35); }
.toast a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- Copa Internacional Promesas
   La Copa dejó de ser una tienda aparte: es una sección de esta, con la cara del torneo. Los colores son los de
   copapromesas.com —naranja #FF4713, azul eléctrico #0019EC y su fondo azul claro— y la letra sigue siendo la
   Archivo condensada del Club, que ya está cargada y es casi la Oswald del torneo. Todo cuelga de .copa13,
   .pagina-copa y .cabecera__copa: fuera de ahí, el Club sigue navy y rojo.
   El naranja de marca sobre blanco da 3,4:1, así que nunca lleva texto encima: es fondo de acento, subrayado
   y el «13». Lo que hay que leer va en azul (8,9:1 en blanco) o en un naranja más claro sobre el navy. */
.copa13, .pagina-copa {
  --copa-naranja: #FF4713;
  --copa-azul: #0019EC;
  --copa-fondo: #D5E2EF;
  --copa-tinta: #0A1A4D;
}

/* La Copa en la barra: la única pastilla que no es del Club */
.cabecera__copa { color: #FF8A5C; background: rgba(255, 71, 19, .16); border-color: rgba(255, 122, 77, .55) !important; }
.cabecera__copa:hover { color: #fff; background: #FF4713; border-color: #FF4713 !important; }
.cabecera__nav a.cabecera__copa[aria-current] { color: #fff; background: #FF4713; border-color: #FF4713 !important; }

/* Banda de la portada y portada de /copa: misma cara, distinto tamaño */
.copa13 { margin-top: clamp(40px, 6vw, 72px); padding-block: clamp(36px, 5vw, 60px); background: var(--copa-fondo);
  border-block: 4px solid var(--copa-naranja); }
.copa13__grilla, .copa-portada__grilla { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .copa13__grilla, .copa-portada__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.copa13__logo, .copa-portada__logo { width: min(290px, 74%); height: auto; }
.copa13__titulo, .copa-portada__titulo { margin: 14px 0 0; color: var(--copa-azul); font-stretch: 68%; font-weight: 800;
  text-transform: uppercase; line-height: .9; }
.copa13__titulo { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.copa-portada__titulo { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.copa13__titulo span, .copa-portada__titulo span { color: var(--copa-naranja); }
.copa13__bajada, .copa-portada__bajada { max-width: 46ch; margin: 12px 0 0; color: var(--copa-tinta); font-size: 1.02rem; }
.copa13__acciones, .copa-portada__acciones { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 22px 0 0; }
.copa13__conteo { color: var(--copa-tinta); font-size: .86rem; font-weight: 600; opacity: .8; }
.copa-boton { background: var(--copa-azul); border-color: var(--copa-azul); color: #fff; }
.copa-boton:hover { background: #0010B8; border-color: #0010B8; color: #fff; }
.copa-enlace { display: inline-flex; gap: 6px; align-items: center; color: var(--copa-azul); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--copa-naranja); text-underline-offset: 4px; }
.copa13__foto img, .copa-portada__foto img { display: block; width: 100%; height: auto; }
.copa13__foto, .copa-portada__foto { margin: 0; }

/* La página de la Copa: la portada ocupa el ancho completo, como la del Club */
.pagina-copa .copa-portada { padding-block: clamp(28px, 5vw, 56px) clamp(32px, 6vw, 64px); background: var(--copa-fondo);
  border-bottom: 4px solid var(--copa-naranja); }
.pagina-copa .seccion__cabeza h2 { color: var(--copa-azul); }
.pagina-copa .antetitulo { color: var(--copa-naranja); }
/* el ribete rojo-blanco-rojo del cuello del peto es del Club: en la Copa la raya es naranja */
.pagina-copa .antetitulo::before { background: var(--copa-naranja); }
.pagina-copa .seccion__enlaces a { color: var(--copa-azul); }

/* Entradas del Club: ni las letras se voltean ni los títulos se despliegan uno a uno. Todo —títulos y textos— entra con el mismo
   fundido con desenfoque (la idea de FadeContent de React Bits, sin librerías): un segundo, ease-out, y de 10 px de blur a nada.
   vitrina.js les pone .aparecio al entrar en pantalla; base.css es quien los esconde antes. */
@media (prefers-reduced-motion: no-preference) {
  .entradas :is(.portada h1, .destacados h2, .catalogo__cabeza h1, .catalogo__cabeza h2, .perso h2, .guia h2, .relacionados h2, .objeto__cabeza h1,
    .pagina-carrito h1, .pagina-checkout h1, .exito h1, .seguimiento h1, .rastreo h1, .pago h1, .estado h1, .seccion__cabeza h2, .personaliza h2, .copa__pronto h2,
    .portada__sobre, .portada__texto, .portada__acciones, .catalogo__intro, .objeto__resumen, .perso__texto > p, .guia__columnas,
    .exito__texto, .exito__llegada, .codigo, .seguimiento__texto, .rastreo__sobre, .rastreo__texto, .rastreo__form,
    .antetitulo, .portada__bajada, .portada__datos, .seccion__bajada, .personaliza__bajada, .pasos-club):not(.aparecio) { filter: blur(10px); }
  .aparecio { filter: blur(0); transition: opacity .5s ease-out, filter .5s ease-out, transform .5s ease-out; }
  /* Las tarjetas de producto y de categoría entran con el mismo fundido. Sin vitrina.js aparecen solas a los 3 s. */
  .js :is(.producto, .categorias-club a):not(.aparecio) { opacity: 0; filter: blur(10px); transform: translateY(14px); animation: revelar .01s 3s forwards; }
  .entradas :is(.producto, .categorias-club a):not(.aparecio) { animation: none; }
}