/* store.css — la capa de tienda sobre la web publicada.
 *
 * `styles.css` es de la sesión de diseño y NO se toca: cada revisión lo reescribe entera, así que un
 * bloque nuestro al final se perdería en la siguiente publicación (design.md, decisión 2). Aquí viven
 * los cuatro tokens de estado y los estilos de la ficha y de la caja de compra, y nada más.
 *
 * Este es el ÚNICO archivo de la capa donde se admite un color en hexadecimal
 * (`.sdd/config.yml → gates.hex_allowed_files`). Todo lo demás usa los tokens de `styles.css`:
 * --ink, --paper, --lime, --lilac, --white, --muted, --line, --max, --pad.
 *
 * `--lime` nunca se usa como color de texto sobre fondo claro (SSOT/08 §4): aquí solo aparece como
 * fondo con texto --ink, o como anillo de foco sobre --ink.
 *
 * Base de diseño: móvil 390 px. Objetivos táctiles ≥ 44 px. Sin `!important` en todo el archivo.
 */

:root {
  /* Tokens de estado · contrastes medidos sobre --paper #f5f5ee (UX_SPEC_FICHA_Y_COMPRA_R01 §6.3) */
  --ok: #166534;      /* 6,51:1 · código aplicado, confirmaciones */
  --warn: #7a4300;    /* 7,29:1 · avisos que no bloquean */
  --error: #8a1c16;   /* 8,49:1 · rechazos duros y errores de compra */
  --surface: #ffffff; /* superficie de tarjetas y campos; mismo valor que --white, con el nombre que
                         usa la tienda para no depender de un token de diseño que puede cambiar */
  --photo-backdrop: #e3e3dd; /* detrás de una foto que no llena su caja. El valor NO se elige aquí:
                                es el mismo que styles.css usa en .card-image, donde la sesión de
                                diseño ya decidió qué se ve alrededor de sus fotos */
}

/* ─────────────────────────── Conmutador de idioma de la ficha ───────────────────────────
 * En la ficha el conmutador son ENLACES, no botones: sin `app.js` un botón no lleva a ninguna parte,
 * y la ficha tiene que funcionar con JavaScript apagado. Estas reglas replican las de
 * `.language-switcher button` de `styles.css` con los mismos tokens. */

.language-switcher a {
  min-width: 3.35rem;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.35rem 0.48rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 800;
}

.language-switcher a:hover,
.language-switcher a:focus-visible,
.language-switcher a.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ─────────────────────────── Foco visible en todo lo operable ─────────────────────────── */

.store-product a:focus-visible,
.store-product button:focus-visible,
.store-product summary:focus-visible,
.language-switcher a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.store-cta:focus-visible,
.store-join a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

/* ─────────────────────────── Estructura ─────────────────────────── */

.store-product {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 5.5rem; /* el hueco de abajo evita que la barra fija tape el final */
}

.store-layout {
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr`: un elemento de rejilla trae `min-width: auto`, asi que la columna
   * crece hasta el contenido mas ancho que no se puede encoger —aqui, el carrusel de seis vistas— y
   * la PAGINA se desplaza en horizontal. Medido en un Pixel 5: ventana 393 px, columna 454 px,
   * `scrollWidth` 471 px. Se vio con un navegador; ninguna sonda HTTP lo habria visto. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.store-section {
  margin-top: 2.5rem;
}

.store-section h2 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

/* ─────────────────────────── Galería (seis vistas worn) ───────────────────────────
 * Carrusel de desplazamiento con anclas: las miniaturas son enlaces `#vista-N`, así que cambiar de
 * vista funciona sin una sola línea de JavaScript. */

.store-gallery-views {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: var(--surface);
  border: 1px solid var(--line);
}

.store-gallery-view {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.store-gallery-view figure {
  margin: 0;
}

/* `contain`, no `cover`: la foto se ve ENTERA o no se enseña bien.
 *
 * Con `cover` la caja 4:6 se llenaba recortando lo que sobraba, y lo que sobraba no era fondo:
 * medido el 18/09 sobre las doce fichas, 60 de 72 fotos perdían parte —hasta el 60 % en
 * `campeones/06.jpg`—, y entre lo perdido estaban el patrocinador de la camiseta del Atlético
 * cortado por la mitad y el dorsal de la espalda. La ficha es la página donde alguien decide
 * comprar un diseño: enseñárselo cortado no es una decisión de maquetación.
 *
 * El fondo es el mismo gris que la sesión de diseño usa en sus propias tarjetas (`.card-image`),
 * que ya resolvió esto igual y por lo mismo. La caja sigue midiendo 4:6 para que la galería no dé
 * saltos al pasar de una vista a otra.
 *
 * Lo mide `scripts/gates/check_no_crop.mjs` en cada commit. */
.store-gallery-view img {
  width: 100%;
  aspect-ratio: 4 / 6;
  object-fit: contain;
  background: var(--photo-backdrop);
}

.store-gallery-view figcaption {
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.store-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.store-gallery-thumb {
  display: block;
  width: 3.25rem;
  min-height: 2.75rem; /* con el área táctil de la fila, ≥ 44 px reales */
  padding: 0.15rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.store-gallery-thumb[aria-current="true"] {
  border-color: var(--ink);
  border-width: 2px;
}

.store-gallery-thumb img {
  aspect-ratio: 4 / 6;
  object-fit: contain;
}

/* ─────────────────────────── Identidad ─────────────────────────── */

.store-identity {
  margin: 0 0 1rem;
}

.store-club {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.store-name {
  margin: 0.15rem 0 0.3rem;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.store-note {
  margin: 0;
  color: var(--muted);
}

.store-edition {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ─────────────────────────── Caja de compra ─────────────────────────── */

.store-buy {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--ink);
}

.store-state {
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border-left: 4px solid var(--warn);
  background: var(--paper);
}

.store-state-title {
  margin: 0;
  color: var(--warn);
  font-weight: 800;
}

.store-state-body {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
}

.store-field {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.store-legend {
  width: 100%;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-chip {
  min-width: 2.75rem;
  min-height: 2.75rem; /* 44 px */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.store-chip[aria-disabled="true"] {
  /* El significado no lo lleva solo el color: el borde pasa a discontinuo y el motivo está escrito
     encima, en el bloque de estado (WCAG 1.4.1). */
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

.store-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.store-chip-note {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-hint,
.store-price-includes,
.store-cta-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.store-hint {
  width: 100%;
}

.store-size-guide {
  margin: 0 0 1rem;
  font-size: 0.85rem;
}

.store-size-guide a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}

.store-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
}

.store-price-tier {
  align-self: flex-start;
  padding: 0.2rem 0.45rem;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.store-price-amount {
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
}

/* Barra del CTA. `sticky` y no `fixed`: el botón es el mismo nodo del documento, solo anclado
   visualmente. Duplicarlo anunciaría dos botones «Comprar» al lector de pantalla (spec UX §2.1). */

.store-cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 1rem -1rem -1rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.store-cta {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.store-cta[aria-disabled="true"] {
  background: var(--surface);
  color: var(--ink);
  border-style: dashed;
  cursor: default;
}

.store-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.store-alt {
  flex: 1 1 12rem;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}

.store-alt:hover,
.store-alt:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* ─────────────────────────── Confianza ─────────────────────────── */

.store-trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.store-trust-list li {
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* ─────────────────────────── Detalles (acordeones) ───────────────────────────
 * `<details>` y no un botón con `aria-expanded`: es el único acordeón que abre sin JavaScript, y es
 * el mismo primitivo que ya usa la portada publicada en su bloque de preguntas. */

.store-details {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.store-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.store-details summary::-webkit-details-marker {
  display: none;
}

.store-details summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
}

.store-details[open] summary::after {
  content: "\2212";
}

.store-details-body {
  padding: 0 0.9rem 1rem;
  font-size: 0.9rem;
}

.store-details-body h3 {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
}

.store-details-body p,
.store-details-body div {
  margin: 0 0 0.5rem;
  color: var(--muted);
}

.store-details-body ul {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
  color: var(--muted);
}

/* ─────────────────────────── Fidelización ─────────────────────────── */

.store-join {
  padding: 1.25rem;
  background: var(--lilac);
  border: 1px solid var(--ink);
}

.store-join p {
  margin: 0 0 0.75rem;
  max-width: 34rem;
}

/* ─────────────────────────── Otras camisetas ─────────────────────────── */

.store-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-related-card {
  display: block;
  padding-bottom: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
}

.store-related-card img {
  aspect-ratio: 4 / 6;
  object-fit: contain;
}

.store-related-name {
  display: block;
  padding: 0.5rem 0.6rem 0;
  font-weight: 800;
}

.store-related-note {
  display: block;
  padding: 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ─────────────────────────── Mensajes de estado, aviso y error ───────────────────────────
 * El significado NUNCA lo lleva solo el color (WCAG 1.4.1): el texto ya dice qué pasa, el borde
 * izquierdo cambia de tono y además cada tono trae su marca delante. Los tres tonos son los de la
 * spec UX §4.2: error (rechazos duros), aviso (lo que no bloquea) e información. */

.store-message {
  display: flex;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  background: var(--paper);
  border-left: 4px solid var(--muted);
  font-size: 0.88rem;
}

.store-message[hidden] {
  display: none;
}

.store-message::before {
  flex: 0 0 auto;
  font-weight: 800;
}

.store-message-error {
  border-left-color: var(--error);
  color: var(--error);
}

.store-message-error::before {
  content: "\2715"; /* aspa */
}

.store-message-warn {
  border-left-color: var(--warn);
  color: var(--warn);
}

.store-message-warn::before {
  content: "\26A0"; /* triángulo de aviso */
}

.store-message-ok {
  border-left-color: var(--ok);
  color: var(--ok);
}

.store-message-ok::before {
  content: "\2713"; /* marca de verificación */
}

.store-message-info {
  border-left-color: var(--ink);
  color: var(--ink);
}

.store-message-info::before {
  content: "\2139"; /* información */
}

/* ─────────────────────────── Precio anterior tachado ─────────────────────────── */

.store-price-was {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: line-through;
}

.store-price-was[hidden] {
  display: none;
}

/* ─────────────────────────── Acordeón «¿Tienes un código?» ─────────────────────────── */

.store-code {
  margin: 0.9rem 0 0;
  border-top: 1px solid var(--line);
}

.store-code-toggle {
  width: 100%;
  min-height: 2.75rem; /* 44 px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.store-code-toggle::after {
  content: "+";
  font-size: 1.15rem;
  font-weight: 800;
}

.store-code-toggle[aria-expanded="true"]::after {
  content: "\2212"; /* signo menos */
}

.store-code-panel {
  padding: 0 0 0.9rem;
}

.store-code-panel[hidden] {
  display: none;
}

.store-code-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-code-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.store-code-input[type="email"] {
  text-transform: none;
}

.store-code-input[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}

.store-code-email {
  margin: 0.7rem 0 0;
}

.store-code-email[hidden] {
  display: none;
}

.store-code-why {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.store-code-apply {
  min-height: 2.75rem;
  margin: 0.7rem 0 0;
  padding: 0.5rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.store-code-remove,
.store-code-switch {
  min-height: 2.75rem;
  margin: 0.5rem 0 0;
  padding: 0.4rem 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.store-code-remove[hidden],
.store-code-switch[hidden] {
  display: none;
}

.store-code-choice {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.store-code-choice[hidden] {
  display: none;
}

/* ─────────────────────────── «Avísame de próximas ediciones» ─────────────────────────── */

.store-notify {
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
}

.store-notify[hidden] {
  display: none;
}

.store-notify-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}

/* ─────────────────────────── Compartir (solo si el navegador puede) ─────────────────────────── */

.store-share-button {
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* ═══════════════════ Gracias y cancelado (UX_SPEC_GRACIAS_CANCELADO_R01) ═══════════════════
 * Las dos superficies de la vuelta de la pasarela comparten esqueleto: una tarjeta con el desenlace
 * y, debajo, lo que ese desenlace permite enseñar.
 *
 * El TONO de la tarjeta nunca es lo único que significa (WCAG 1.4.1): el título ya dice qué ha
 * pasado, el borde izquierdo cambia y además cada tono trae su marca delante, igual que en
 * `.store-message`. Los cuatro tonos son los tokens de estado del principio del archivo. */

.store-outcome {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 3.5rem;
}

.store-outcome a:focus-visible,
.store-outcome button:focus-visible,
.store-outcome input:focus-visible,
.store-outcome [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.store-outcome-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
}

.store-outcome-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.15;
}

.store-outcome-title::before {
  flex: 0 0 auto;
}

.store-outcome-ok {
  border-left-color: var(--ok);
}

.store-outcome-ok .store-outcome-title {
  color: var(--ok);
}

.store-outcome-ok .store-outcome-title::before {
  content: "\2713"; /* marca de verificación */
}

.store-outcome-warn {
  border-left-color: var(--warn);
}

.store-outcome-warn .store-outcome-title {
  color: var(--warn);
}

.store-outcome-warn .store-outcome-title::before {
  content: "\26A0"; /* triángulo de aviso */
}

.store-outcome-error {
  border-left-color: var(--error);
}

.store-outcome-error .store-outcome-title {
  color: var(--error);
}

.store-outcome-error .store-outcome-title::before {
  content: "\2715"; /* aspa */
}

.store-outcome-body {
  margin: 0.6rem 0 0;
}

.store-outcome-body:empty {
  display: none;
}

.store-outcome-note,
.store-outcome-ref {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.store-outcome-note {
  font-weight: 400;
  color: var(--muted);
}

/* La región viva del sondeo. Vacía no ocupa: un hueco reservado para un texto que quizá no llegue
   nunca deja la tarjeta descuadrada durante el minuto entero. */

.store-outcome-wait {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.store-outcome-wait:empty {
  display: none;
}

/* ─────────────────────────── El número de edición ───────────────────────────
 * Es el héroe de la pantalla pagada (spec §2.4): lo que la persona ha comprado de verdad y lo que
 * va a fotografiar. Por eso va grande y por encima del registro y del compartir. */

.store-serial-label {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.store-serial {
  margin: 0.15rem 0 0;
  font-size: clamp(3.2rem, 18vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.store-serial-label[hidden],
.store-serial[hidden] {
  display: none;
}

/* ─────────────────────────── Resumen del pedido ─────────────────────────── */

.store-outcome-order {
  margin-top: 1.25rem;
}

.store-outcome-order[hidden] {
  display: none;
}

.store-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.8rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}

.store-summary dt {
  margin: 0;
  color: var(--muted);
}

.store-summary dd {
  margin: 0;
  font-weight: 700;
}

.store-outcome-email {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
}

.store-outcome-email[hidden],
.store-outcome-ref[hidden] {
  display: none;
}

/* ─────────────────────────── «Qué pasa ahora» ─────────────────────────── */

.store-next[hidden],
.store-join[hidden],
.store-share[hidden] {
  display: none;
}

.store-next-list {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}

/* ─────────────────────────── Registro en un clic ─────────────────────────── */

.store-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

.store-consent input {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
}

/* La etiqueta es el objetivo táctil de verdad: la casilla sola no llega a 44 px y no se puede
   agrandar sin que parezca otra cosa. Así toda la línea es pulsable. */

.store-consent label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
}

.store-fineprint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ─────────────────────────── Compartir ─────────────────────────── */

.store-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}

.store-share-note {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ok);
}

.store-share-note:empty {
  display: none;
}

/* ─────────────────────────── Salidas y atención ─────────────────────────── */

.store-outcome-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
}

.store-outcome-links a[hidden] {
  display: none;
}

.store-outcome-support {
  margin: 1.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.store-outcome-support a {
  color: var(--ink);
}

@media (min-width: 62rem) {
  .store-outcome {
    max-width: 46rem;
  }
}

/* ─────────────────────────── Portada: tarjetas hidratadas ───────────────────────────
 * Los chips de talla de la tarjeta son de SOLO LECTURA (`SSOT/10 §3`): informan, no se pulsan. La
 * talla agotada se tacha Y se anuncia con su etiqueta accesible, nunca solo con el color. */

.store-card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.store-card-size {
  padding: 0.2rem 0.45rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.store-card-size.is-sold-out {
  color: var(--muted);
  border-style: dashed;
  text-decoration: line-through;
}

/* ─────────────────────────── Portada: filtro por talla ─────────────────────────── */

.store-size-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.6rem 0 0;
}

.store-size-filter-chip {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.store-size-filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.store-size-filter-chip:focus-visible,
.store-card-size:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ─────────────────────────── Tableta: cabe el CTA en el flujo ─────────────────────────── */

@media (min-width: 768px) {
  .store-cta-bar {
    position: static;
    margin: 1rem 0 0;
    padding: 0;
    padding-bottom: 0;
    border-top: 0;
    background: transparent;
  }

  .store-trust-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ─────────────────────────── Escritorio: galería 7/12 y caja 5/12 ─────────────────────────── */

@media (min-width: 1024px) {
  .store-layout {
    /* Mismo motivo que arriba: sin `minmax(0, …)` la galeria impide que su columna se encoja. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: start;
  }

  .store-column {
    position: sticky;
    top: 6rem; /* la cabecera del sitio ya reserva este hueco con scroll-padding-top */
    /* Una caja más alta que la pantalla escondería el CTA, que es lo contrario de lo que se busca. */
    max-height: calc(100vh - 7rem);
    overflow: auto;
  }

  .store-gallery-views {
    flex-wrap: wrap;
    gap: 0.75rem;
    overflow: visible;
    padding: 0.75rem;
  }

  .store-gallery-view:first-child {
    flex: 0 0 100%;
  }

  .store-gallery-view {
    flex: 0 0 calc(50% - 0.375rem);
  }

  .store-details-list,
  .store-join,
  .store-related {
    max-width: 58rem;
  }
}

/* ─────────────────────────── Movimiento reducido ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .store-gallery-views {
    scroll-behavior: auto;
  }
}

/* ─────────────────────────── Textos legales (unidad 03.04) ───────────────────────────
   Una página de lectura larga, no una superficie de tienda. Lo que se persigue aquí es que
   alguien pueda LEER esto: medida de línea corta, interlineado holgado, jerarquía clara y
   tablas que no se salen por el lado en un móvil. Nada decorativo, y ni un color fuera de
   los tokens de `styles.css` (E-07). */

.store-legal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 3.5rem;
}

.store-legal a:focus-visible,
.store-legal [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.store-legal-doc {
  /* 42rem ≈ 70-75 caracteres: la medida a partir de la cual el ojo pierde el renglón. */
  max-width: 42rem;
}

.store-legal-title {
  margin: 0 0 0.35rem;
}

.store-legal-meta {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.store-legal-doc h2 {
  margin: 2.25rem 0 0.6rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.store-legal-doc h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

.store-legal-doc p,
.store-legal-doc li {
  line-height: 1.65;
}

.store-legal-doc ul,
.store-legal-doc ol {
  padding-left: 1.25rem;
}

.store-legal-doc li + li {
  margin-top: 0.4rem;
}

/* La banda de «borrador pendiente de revisión». Se ve, y se ve antes que el texto. */
.store-legal-doc blockquote {
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
}

.store-legal-doc blockquote p {
  margin: 0;
}

/* Los huecos que faltan por rellenar: que no se cuelen inadvertidos en una lectura rápida. */
.legal-pending {
  padding: 0.05em 0.3em;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
}

.store-legal-doc code {
  font-size: 0.9em;
  word-break: break-word;
}

/* Una tabla más ancha que la pantalla no se encoge: se desplaza dentro de su caja, y solo ella
   (el cuerpo de la página nunca se desplaza en horizontal). */
.legal-table {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
}

.legal-table table {
  width: 100%;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}

.legal-table th {
  background: var(--surface);
  font-weight: 600;
}

.store-legal-others {
  max-width: 42rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.store-legal-others-title {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.store-legal-others ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.store-legal-contact {
  max-width: 42rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Los cuatro enlaces en el pie de TODAS las páginas ── */

.store-footer-legal {
  margin-top: 1rem;
}

.store-footer-legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  font-size: 0.85rem;
}

/* ─────────────── Registro, promoción y baja (unidad 03.04) ───────────────
 * Las cuatro superficies de `UX_SPEC_REGISTRO_PROMO_BAJA_R01.md`. Dos reglas gobiernan el bloque:
 *
 *  1. **Objetivo táctil ≥ 44 px** en todo lo que se pulsa (§1.6). Aquí eso se consigue con
 *     `min-height` en el control y, en las casillas y los chips, haciendo que la ETIQUETA sea el
 *     objetivo: una casilla de 1,4 rem no llega a 44 px y agrandarla la convierte en otra cosa.
 *  2. **Nada se sale de la pantalla a 375 px.** Por eso las rejillas van con `minmax(0, 1fr)` y no
 *     con `1fr` a secas: un elemento de grid trae `min-width: auto`, y esa fue exactamente la
 *     regresión que se coló en la ficha (columna de 454 px en una ventana de 393).
 *
 * Cero hexadecimales fuera de los cuatro tokens de estado del principio del archivo. */

.store-form-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 3.5rem;
}

.store-form-page a:focus-visible,
.store-form-page button:focus-visible,
.store-form-page input:focus-visible,
.store-form-page [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.store-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.store-form-title {
  margin: 0 0 0.6rem;
}

.store-form-value {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.store-form-benefits {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.store-form-benefits li {
  margin: 0 0 0.35rem;
}

.store-form-note {
  margin: 0 0 0.75rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--lilac);
}

.store-form-note[hidden] {
  display: none;
}

.store-form-steps-title {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.05rem;
}

.store-form-steps {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.store-form-steps li {
  margin: 0 0 0.6rem;
}

.store-form-profile {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.6rem 0 0;
  color: var(--ink);
}

/* ── La tarjeta del formulario ── */

.store-form-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* El margen va ARRIBA y no abajo: debajo de un campo puede venir su «por qué», su mensaje de error
   o una casilla, y cada uno traía su propio espacio. Con el margen arriba, la separación entre
   bloques la decide siempre el bloque que llega, que es el único que sabe cuánto aire necesita.
   Sin esto, la etiqueta EMAIL de la landing de promoción quedaba pegada a la casilla declarativa. */

.store-form-field {
  margin: 1.4rem 0 0;
}

.store-form > .store-form-field:first-child,
.store-form > .store-form-group:first-child {
  margin-top: 0;
}

/* La etiqueta de la casilla de privacidad lleva un enlace DENTRO del texto («He leído la {enlace}»).
   `.store-consent label` es un contenedor flexible, y en uno de ellos cada hijo es un elemento: el
   espacio entre el texto y el enlace desaparecía y se leía «He leído lapolítica de privacidad».
   La plantilla envuelve el contenido en un `<span>`, así que el contenedor tiene UN solo elemento y
   el texto vuelve a comportarse como texto; esta regla deja que ese span ocupe el ancho y envuelva. */

.store-consent label > span {
  display: block;
}

.store-form-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* «opcional» va DENTRO de la etiqueta y en minúscula: ningún campo opcional lleva asterisco ni
   se presenta como obligatorio (§1.3, regla dura). */

.store-form-optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--muted);
}

.store-form-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: inherit;
}

.store-form-input[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}

.store-form-input[readonly] {
  background: var(--paper);
}

.store-form-why {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.store-form-group {
  margin: 1.4rem 0 0;
  padding: 0;
  border: 0;
}

.store-form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}

/* El chip es la etiqueta entera: así el objetivo táctil llega a 44 px sin deformar el control
   nativo, que sigue siendo un radio o una casilla de verdad (§1.6: controles nativos con aspecto
   de chip; la ficha usa `button aria-pressed` y la diferencia es deliberada). */

.store-form-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--ink);
  cursor: pointer;
}

.store-form-choice input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ink);
}

.store-form-choice:has(input:checked) {
  background: var(--lime);
}

.store-form-choice:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.store-form-declared {
  margin: 0 0 0.75rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--ink);
}

.store-turnstile:empty {
  display: none;
}

.store-turnstile {
  margin: 1rem 0 0;
}

.store-form-submit {
  width: 100%;
  min-height: 3rem;
  margin: 1.1rem 0 0;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.store-form-submit[aria-busy="true"] {
  background: var(--surface);
  color: var(--muted);
  cursor: progress;
}

.store-form-again {
  min-height: 2.75rem;
  padding: 0.4rem 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.store-form-again[hidden] {
  display: none;
}

/* ── J5 / P6: el bloque que sustituye al formulario ── */

.store-form-sent {
  border-left: 4px solid var(--ok);
  padding-left: 0.8rem;
}

.store-form-sent[hidden] {
  display: none;
}

.store-form-sent-title {
  margin: 0 0 0.5rem;
  color: var(--ok);
}

.store-form-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}

.store-form-links a[hidden] {
  display: none;
}

.store-form-result:empty {
  display: none;
}

.store-form-result {
  margin: 1rem 0 0;
}

/* ── El código entregado en pantalla (C2) ── */

.store-code-gift {
  margin: 1rem 0 0;
  padding: 0.9rem;
  background: var(--lime);
  border: 1px solid var(--ink);
}

.store-code-gift[hidden] {
  display: none;
}

.store-code-gift-label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.store-code-gift-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

/* `--lime` como FONDO con texto `--ink` (15,39:1). Nunca al revés: el lima no se usa como color de
   texto sobre claro (SSOT/08 §4). */

.store-code-gift-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
  word-break: break-all;
}

.store-code-gift-copy {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── La baja: qué se deja de recibir y qué no ── */

.store-keeps {
  margin: 1.25rem 0 0;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
}

.store-keeps[hidden] {
  display: none;
}

.store-keeps-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.store-keeps-body {
  margin: 0;
}

/* ── Escritorio: dos columnas 6/6 (§1.2 y §3.3). Nada se duplica entre columnas. ── */

@media (min-width: 64rem) {
  .store-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    max-width: 68rem;
  }

  .store-form-card {
    max-width: 30rem;
  }
}