/* Zapatillas Talla Grande — estilo limpio: tipografía del sistema, mucho aire,
   tema oscuro fijo (data-theme="dark" en base.html, orden del usuario 10-oct), botones píldora azules. Sin fuentes externas; las únicas imágenes
   externas son las fotos de producto, cargadas desde los servidores de Amazon. */
:root{
  --fondo:#fff;--fondo-2:#f5f5f7;--tarjeta:#fff;--texto:#1d1d1f;--suave:#6e6e73;--borde:#d2d2d7;
  --acento:#0071e3;--acento-hover:#0077ed;--acento-texto:#fff;--barra:rgba(255,255,255,.72);
  --icono:#1d1d1f;--radio:28px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#000;--fondo-2:#161617;--tarjeta:#1d1d1f;--texto:#f5f5f7;--suave:#a1a1a6;--borde:#424245;
    --acento:#2997ff;--acento-hover:#47a6ff;--acento-texto:#fff;--barra:rgba(22,22,23,.72);
    --icono:#f5f5f7;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#000;--fondo-2:#161617;--tarjeta:#1d1d1f;--texto:#f5f5f7;--suave:#a1a1a6;--borde:#424245;
  --acento:#2997ff;--acento-hover:#47a6ff;--acento-texto:#fff;--barra:rgba(22,22,23,.72);
  --icono:#f5f5f7;color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);overflow-x:hidden;
  font:17px/1.47 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--acento);text-decoration:none;transition:color .2s ease}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .35em;font-weight:600;color:var(--texto)}
h1{font-size:clamp(2.5rem,9vw,5rem);line-height:1.05;letter-spacing:-.045em;font-weight:700}
h2{font-size:clamp(1.5rem,4.5vw,2.5rem);line-height:1.1;letter-spacing:-.035em}
h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.02em}
.contenedor{max-width:1024px;margin:0 auto;padding:0 16px}
@media (min-width:740px){.contenedor{padding:0 22px}}

/* Barra de navegación fina y translúcida */
.barra{position:sticky;top:0;z-index:20;background:var(--barra);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--borde) 60%,transparent)}
.barra-fila{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.logo{color:var(--texto);font-weight:600;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{text-decoration:none;opacity:.8}
.menu{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;font-size:.78rem;min-width:0}
.menu::-webkit-scrollbar{display:none}
.menu a{color:var(--texto);opacity:.8;white-space:nowrap;padding:14px 0}
.menu a:hover{opacity:1;text-decoration:none}
@media (max-width:520px){.barra-fila{flex-wrap:wrap;gap:0 16px;padding-top:6px}.menu{width:100%;gap:16px}.menu a{padding:8px 0 10px}}

/* Héroe */
.heroe{text-align:center;padding:72px 0 64px}
.heroe-corto{padding:56px 0 40px}
.heroe-sub{font-size:clamp(1.15rem,3.2vw,1.6rem);line-height:1.3;letter-spacing:-.025em;color:var(--suave);
  max-width:34em;margin:0 auto .9em;font-weight:500}
.texto .heroe-sub{margin-left:0}
.heroe-acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 20px}
.letra{font-size:.75rem;line-height:1.4;color:var(--suave);letter-spacing:-.005em;max-width:46em;margin:12px auto}
.miga{font-size:.85rem;margin:20px 0 8px}
.heroe .miga{margin:0 0 12px}

/* Botones píldora */
.boton{display:inline-block;background:var(--acento);color:var(--acento-texto);border-radius:980px;
  padding:9px 18px;font-size:.94rem;font-weight:400;letter-spacing:-.01em;line-height:1.2;
  transition:background-color .2s ease,transform .2s ease}
.boton:hover{background:var(--acento-hover);text-decoration:none}
.boton:active{transform:scale(.98)}
.boton-grande{padding:13px 26px;font-size:1.05rem}
.boton-claro{background:transparent;color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.boton-claro:hover{background:var(--acento);color:var(--acento-texto)}
.enlace-mas{font-size:.94rem;white-space:nowrap}
.enlace-mas::after{content:" ›"}

/* Secciones */
.seccion{padding:64px 0}
.seccion-gris{background:var(--fondo-2)}
.seccion-titulo{margin-bottom:.2em}
.seccion-sub{color:var(--suave);margin:0 0 28px}
.seccion-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}

/* Tallas */
.tallas-titulo{font-size:1.1rem;margin:28px 0 12px}
.seccion > .contenedor > .tallas-titulo:first-child{margin-top:0}
.tallas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.talla{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:10px 16px;border-radius:16px;
  background:var(--tarjeta);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde);
  transition:box-shadow .2s ease,transform .2s ease}
.talla strong{font-size:1rem;font-weight:600}
.talla span{font-size:.75rem;color:var(--suave)}
.talla:hover{text-decoration:none;box-shadow:inset 0 0 0 2px var(--acento)}
.talla-actual{box-shadow:inset 0 0 0 2px var(--texto)}

/* Rejilla y tarjetas */
.rejilla{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.rejilla{grid-template-columns:repeat(3,1fr)}}
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);padding:24px 24px 28px;display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease}
.seccion:not(.seccion-gris) .tarjeta{background:var(--fondo-2)}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.tarjeta-icono{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:20px;
  background:var(--fondo-2);color:var(--icono);margin-bottom:20px}
.seccion:not(.seccion-gris) .tarjeta-icono{background:var(--fondo)}
.tarjeta-icono .icono{width:62%;height:auto}
/* Fotos de producto (servidores de Amazon). Fondo blanco siempre: las fotos lo traen. Si la
   foto no carga (onerror añade .sin-foto), se oculta y vuelve el icono. */
.media{position:relative}
.con-foto:not(.sin-foto) .tarjeta-icono,.con-foto:not(.sin-foto) .ficha-icono{display:none}
.sin-foto .tarjeta-foto,.sin-foto .galeria-pista,.sin-foto .galeria-minis,.sin-foto .credito{display:none}
.tarjeta-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:20px;
  background:#fff;margin-bottom:20px;overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--borde) 45%,transparent)}
.tarjeta-foto img{display:block;width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply}
.credito{position:absolute;margin:0;font-size:.65rem;line-height:1;color:#86868b;letter-spacing:0;pointer-events:none}
.tarjeta .credito{right:12px;bottom:30px}
.tarjeta-uso{font-size:.75rem;color:#b64400;margin:0 0 4px;font-weight:600;letter-spacing:0}
.tarjeta-titulo{font-size:1.35rem;margin:0 0 6px}
.tarjeta-titulo a{color:var(--texto)}
.tarjeta-marca{display:block;font-size:.85rem;font-weight:400;color:var(--suave);letter-spacing:-.01em}
.tarjeta-tallas{font-size:.9rem;color:var(--suave);margin:0 0 6px}
.precio{font-size:1rem;margin:0 0 18px;font-weight:500}
.tarjeta-acciones{margin-top:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* Filtros de los listados: talla, género y tipo (los muestra filtros.js; sin JS quedan ocultos) */
[hidden]{display:none!important}
.filtros{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding:16px 0 0;
  border-top:1px solid color-mix(in srgb,var(--borde) 60%,transparent)}
.filtros-grupo{display:flex;align-items:center;gap:12px;min-width:0}
.filtros-etiqueta{flex:0 0 auto;width:6.2em;font-size:.8rem;font-weight:600;color:var(--suave);letter-spacing:-.005em}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:3px 2px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.88rem;letter-spacing:-.01em;
  line-height:1.2;padding:8px 15px;border:0;border-radius:980px;cursor:pointer;white-space:nowrap;
  background:var(--tarjeta);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde);
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.chip:hover{box-shadow:inset 0 0 0 1px var(--texto)}
.chip:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--texto);color:var(--fondo);box-shadow:none}
.chip-cuenta{font-size:.75rem;color:var(--suave);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chip-cuenta{color:inherit;opacity:.7}
.filtros-cuenta{margin:0;font-size:.85rem;color:var(--suave)}
.filtros-vacio{text-align:center;padding:40px 0 8px}
.filtros-vacio p{color:var(--suave);margin:0 0 14px}
.filtros-vacio .boton{border:0;cursor:pointer;font:inherit;font-size:.94rem}
.filtros-vacio .boton:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
@media (max-width:520px){.filtros-grupo{flex-direction:column;align-items:stretch;gap:6px}
  .filtros-etiqueta{width:auto}}
/* Marca: un control de una línea que abre un panel con una casilla por marca (usuario, 12-oct,
   opción B). <details>/<summary>: se abre y cierra con ratón o teclado; filtros.js lo cierra
   además al tocar fuera o con Escape. Con alguna marca marcada, el control va relleno como un
   chip marcado. En móvil el control ocupa el ancho y el panel también, con scroll interno. */
.selector-marca{position:relative;min-width:0;padding:3px 2px}
.selector-marca-boton{list-style:none;user-select:none;padding-right:13px}
.selector-marca-boton::-webkit-details-marker{display:none}
.selector-marca-boton::after{content:"";width:7px;height:7px;margin:-3px 2px 0 4px;border:solid currentColor;
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:.7;transition:transform .2s ease}
.selector-marca[open] .selector-marca-boton::after{transform:rotate(-135deg);margin-top:4px}
.selector-marca-activo .selector-marca-boton{background:var(--texto);color:var(--fondo);box-shadow:none}
.selector-marca-panel{position:absolute;z-index:15;top:calc(100% + 6px);left:2px;width:280px;max-width:calc(100vw - 32px);
  max-height:min(60vh,380px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:18px;
  background:var(--tarjeta);box-shadow:inset 0 0 0 1px var(--borde),0 18px 40px rgba(0,0,0,.45)}
.marca-opcion{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;
  font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
.marca-opcion:hover{background:var(--fondo-2)}
.marca-opcion input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--acento);cursor:pointer}
.marca-opcion input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.marca-nombre{flex:1 1 auto;min-width:0}
.marca-opcion.sin-modelos{opacity:.5}
@media (max-width:520px){.selector-marca-boton{display:flex;justify-content:space-between}
  .selector-marca-panel{left:2px;right:2px;width:auto;max-width:none;max-height:min(55vh,340px)}}
/* Portada: «Ver zapatillas» bajo la fila con tallas marcadas (selección múltiple) */
.tallas-ver{margin:-12px 0 28px}
/* Botones de talla de las páginas de género marcados (multiselección, filtros.js) */
.talla[aria-pressed="true"]{background:var(--texto);color:var(--fondo);box-shadow:none}
.talla[aria-pressed="true"] span{color:inherit;opacity:.7}
.talla:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.seccion-filtros{padding:24px 0 0}
.seccion-filtros .filtros{margin-bottom:0}

/* Ficha */
.ficha{display:grid;gap:32px;padding:8px 0 72px}
@media (min-width:860px){.ficha{grid-template-columns:1.1fr 1fr;align-items:start;gap:56px}
  .ficha-media{position:sticky;top:72px}}
.ficha-media{min-width:0}
/* Galería de la ficha: carrusel con scroll-snap (deslizar en móvil) y miniaturas que saltan
   a cada vista. Sin librerías. */
.galeria-pista{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;border-radius:var(--radio);background:#fff;aspect-ratio:1/1;scrollbar-width:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--borde) 45%,transparent)}
.galeria-pista::-webkit-scrollbar{display:none}
.galeria-pista:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.vista{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.vista img{display:block;width:100%;height:100%;object-fit:contain;padding:28px;mix-blend-mode:multiply}
.galeria-minis{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 2px;scrollbar-width:none}
.galeria-minis::-webkit-scrollbar{display:none}
.galeria-minis a{flex:0 0 64px;height:64px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--borde);transition:box-shadow .2s ease}
.galeria-minis a:hover,.galeria-minis a:focus-visible{box-shadow:inset 0 0 0 2px var(--acento);outline:none}
.galeria-minis img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply;border-radius:14px}
.galeria .credito{position:static;margin:10px 2px 0}
.ficha-icono{background:var(--fondo-2);border-radius:var(--radio);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:var(--icono)}
.ficha-icono .icono{width:72%;height:auto}
.ficha-marca{color:var(--suave);margin:0 0 4px;font-size:1rem}
.ficha h1{font-size:clamp(2.2rem,6vw,3.5rem)}
.ficha-uso{color:#b64400;font-weight:600;font-size:.9rem;margin:0 0 20px}
.precio-grande{font-size:1.3rem;margin-bottom:20px}
.ficha .letra{margin-left:0}
.ficha-bloque{border-top:1px solid var(--borde);padding-top:22px;margin-top:28px}
.ficha-bloque h2{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:12px}
.ficha-bloque p{margin:0}
.ficha-tallas{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px}
.ficha-tallas a{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:10px 16px;border-radius:16px;
  color:var(--texto);background:var(--fondo-2);transition:box-shadow .2s ease}
.ficha-tallas a:hover{text-decoration:none;box-shadow:inset 0 0 0 2px var(--acento)}
.ficha-tallas strong{font-weight:600}
.ficha-tallas span{font-size:.75rem;color:var(--suave)}
.puntos{margin:0;padding-left:1.1em}
.puntos li{margin:.3em 0}

/* Páginas de texto */
.texto{max-width:760px;padding-top:48px;padding-bottom:72px}
.texto h1{font-size:clamp(2.2rem,7vw,3.5rem)}
.texto h2{font-size:1.5rem;margin-top:1.6em}
.texto .letra{margin-left:0}
.texto .importacion{margin:24px 0;padding:14px 16px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio)}
.aviso{background:var(--fondo-2);border-radius:18px;padding:18px 20px}
.pasos{padding-left:1.3em}
.pasos li{margin:.9em 0}
.tabla-envoltura{overflow-x:auto;border-radius:18px;background:var(--fondo-2)}
.tabla-tallas{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla-tallas th,.tabla-tallas td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--borde)}
.tabla-tallas thead th{font-size:.8rem;color:var(--suave);font-weight:600}
.tabla-tallas tbody tr:last-child th,.tabla-tallas tbody tr:last-child td{border-bottom:0}

/* Accesos por tipo de zapatillas (portada) */
.tipos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:740px){.tipos{grid-template-columns:repeat(4,1fr);gap:20px}}
.tipo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 12px 18px;border-radius:var(--radio);
  background:var(--fondo-2);color:var(--texto);text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.tipo:hover{text-decoration:none;transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--acento)}
.tipo-icono{display:block;color:var(--icono);width:78%;max-width:150px;margin-bottom:8px}
.tipo-icono .icono{width:100%;height:auto}
.tipo strong{font-size:1.05rem;font-weight:600}
.tipo span:last-child{font-size:.8rem;color:var(--suave)}

/* Gancho bajo el héroe: cuatro ventajas (2×2 en móvil, 4 en fila desde 900 px) */
.ventajas{padding:0 0 56px}
.ventajas-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ventaja:nth-child(5):last-child{grid-column:1/-1}
@media (min-width:900px){.ventajas-rejilla{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .ventaja:nth-child(5):last-child{grid-column:auto}}
.ventaja{background:var(--fondo-2);border-radius:var(--radio);padding:22px 18px 24px;min-width:0}
.ventaja h2{font-size:clamp(1.02rem,2.6vw,1.25rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 .45em}
.ventaja p{color:var(--suave);font-size:.9rem;line-height:1.42;margin:0;overflow-wrap:anywhere}
.ventaja .enlace-mas{display:inline-block;margin-top:6px;font-size:.9rem}
@media (max-width:360px){.ventajas-rejilla{grid-template-columns:1fr}}
.marca-nota{color:inherit;font-weight:inherit}
.marca-nota:hover{color:var(--acento);text-decoration:none}

/* Notas al pie de la portada (letra pequeña) */
.notas{padding:28px 0 8px;border-top:1px solid color-mix(in srgb,var(--borde) 60%,transparent)}
.notas p{font-size:.75rem;line-height:1.45;color:var(--suave);margin:0 0 8px;max-width:60em;scroll-margin-top:72px}
.notas .marca{color:var(--texto);font-weight:600}
.vacio{color:var(--suave);text-align:center;padding:40px 0}

/* Pie */
.pie{background:var(--fondo-2);color:var(--suave);font-size:.75rem;line-height:1.45;padding:28px 0 40px;
  border-top:1px solid color-mix(in srgb,var(--borde) 60%,transparent)}
.pie p{margin:0 0 10px;max-width:60em}
.pie-gancho{color:var(--texto);font-weight:500}
.pie a{color:var(--texto)}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:6px 20px}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tarjeta-uso,:root:not([data-theme="light"]) .ficha-uso{color:#ff9f45}}
:root[data-theme="dark"] .tarjeta-uso,:root[data-theme="dark"] .ficha-uso{color:#ff9f45}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Ficha: una fila por talla, con su precio y su enlace (DOCTRINA.md, apartado 7) */
.ficha-tallas-lista{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.talla-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border-radius:16px;background:var(--fondo-2)}
.talla-fila.talla-elegida{box-shadow:inset 0 0 0 2px var(--acento)}
.talla-nombre{display:flex;flex-direction:column;min-width:84px;color:var(--texto)}
.talla-nombre:hover{text-decoration:none}
.talla-nombre strong{font-weight:600}
.talla-nombre span{font-size:.75rem;color:var(--suave)}
.talla-precio{flex:1 1 auto;font-weight:500}
.talla-boton{padding:7px 16px;font-size:.9rem}
.talla-elegir{cursor:pointer}
.ficha-talla-elegida{margin:0 0 6px;color:var(--suave);font-size:.95rem}
/* Aviso de cookies (cookies.js): barra fija abajo, sin tapar la web; rechazar y aceptar con el mismo peso */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--fondo-2);border-top:1px solid var(--borde);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));font-size:.85rem;color:var(--texto)}
.cookies-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;justify-content:space-between}
.cookies p{margin:0;flex:1 1 28em}
.cookies a{color:var(--acento)}
.cookies-botones{display:flex;gap:10px;flex:0 0 auto}