/* ═══════════════════════════════════════════════════════════════════════
   RELIC — LO QUE VENDE

   Hoja aparte, y no es por gusto: `estilo.css` la está reescribiendo otro
   proceso ahora mismo y dos manos en el mismo fichero acaban en una regla
   perdida. Aquí sólo va lo que se trajo de la ficha de eclipseando el
   19-08-2026: el envío dicho antes de pagar, el plazo por encima del botón,
   la escalera de cantidad, el doble botón, la tabla de tallas y las
   preguntas frecuentes.

   Se carga DESPUÉS de estilo.css a propósito: donde compite con una regla de
   la misma especificidad —`.barra-compra .boton`, por ejemplo— tiene que
   ganar ésta, que es la que conoce los dos botones nuevos.

   Ni un hexadecimal copiado de eclipseando: allí es tinta sobre papel, aquí
   es una sala oscura. Todo sale de las variables de la casa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── el envío, dicho en la ficha ────────────────────────────────────────
   Pegado al precio a propósito: es parte del precio. El <select> se pinta a
   mano (appearance:none + flecha propia) porque el nativo de macOS sale
   blanco sobre negro y canta en una sala oscura. */
.envio-ficha{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:10px 0 0; font-size:.87rem; color:var(--luz-2)}
.envio-ficha b{color:var(--luz); font-weight:600}
.envio-pais select{
  appearance:none; font:inherit; font-size:.82rem;
  padding:5px 26px 5px 10px; cursor:pointer; border-radius:2px;
  /* La flecha iba dentro de un SVG con el ámbar de la sala escrito a mano
     (#E8A33D), y un data-URI no puede leer una variable CSS: con la web en
     claro daba 1,88:1 y desaparecía. Se dibuja con dos degradados —igual que
     la del filtrador— y así sigue al color de texto de la casa en las dos
     caras, sin un solo hexadecimal. */
  background-color:var(--sala-2);
  background-image:linear-gradient(45deg,transparent 50%,var(--luz-3) 50%),
                   linear-gradient(135deg,var(--luz-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  color:var(--luz); border:1px solid var(--borde-vivo);
}
.envio-pais select:hover{border-color:var(--haz)}
.envio-pais select:focus-visible{outline:2px solid var(--haz); outline-offset:2px}

/* ── el plazo y la honestidad, encima del botón ─────────────────────── */
.plazo-ficha{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin:14px 0 0; padding-left:18px; position:relative; font-size:.92rem}
.plazo-ficha::before{content:"›"; position:absolute; left:2px; color:var(--haz)}
.plazo-ficha strong{color:var(--luz); font-weight:600}
.plazo-ficha .letra-chica{color:var(--luz-3)}
.honestidad{margin:6px 0 20px; padding-left:18px; font-size:.82rem;
  line-height:1.5; color:var(--luz-3); max-width:46ch}

/* ── el recargo, dicho en el propio botón de la talla ───────────────── */
.talla-precio{display:block; font-size:.62rem; letter-spacing:.04em;
  color:var(--luz-3); font-weight:400; margin-top:2px}
.talla input:checked + span .talla-precio,
.talla:has(input:checked) .talla-precio{color:var(--haz)}

/* ── cantidad: contador y atajos ──────────────────────────────────────
   OJO CON EL NOMBRE: `.contador` ya existía en estilo.css y es OTRA COSA —los
   tres números grandes de la portada (56 piezas · 297 películas · desde 15 €)—.
   Escrito a pelo, esta hoja se carga después y les montaba encima el filete y
   el fondo del selector de cantidad: en la portada salía un recuadro con
   borde alrededor de las cifras. Se ve de lejos con la web en claro y también
   estaba en la oscura, sólo que un negro sobre otro negro no se notaba.
   Todo lo de aquí abajo va ANCLADO a `.cantidad-bloque`, que es su fieldset. */
.cantidad-bloque{border:0; padding:0; margin:0 0 16px}
.cantidad-bloque .contador{display:inline-flex; align-items:stretch;
  border:1px solid var(--borde-vivo);
  border-radius:2px; overflow:hidden; background:var(--sala-2)}
.cantidad-bloque .contador button{width:40px; border:0; background:transparent;
  color:var(--luz); font-size:1.15rem; line-height:1; cursor:pointer}
.cantidad-bloque .contador button:hover{background:var(--sala-3); color:var(--haz)}
.cantidad-bloque .contador button:focus-visible{outline:2px solid var(--haz); outline-offset:-2px}
.cantidad-bloque .contador input{width:56px; border:0; background:transparent;
  color:var(--luz); text-align:center; font:inherit; font-size:1rem;
  -moz-appearance:textfield; appearance:textfield}
.cantidad-bloque .contador input::-webkit-outer-spin-button,
.cantidad-bloque .contador input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* Los atajos: la cantidad grande y su IMPORTE debajo. El importe es la mitad
   del truco — «3» no dice nada, «3 · 71,85 €» sí. */
.atajos{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.atajo{flex:1 1 0; min-width:72px; display:grid; gap:1px; justify-items:center;
  padding:7px 6px; cursor:pointer; border-radius:2px;
  border:1px solid var(--borde); background:var(--sala-2); color:var(--luz-2);
  font:inherit}
.atajo:hover{border-color:var(--haz); color:var(--luz)}
.atajo:focus-visible{outline:2px solid var(--haz); outline-offset:2px}
.atajo[aria-pressed="true"]{border-color:var(--haz); background:var(--ambar-hondo);
  color:var(--luz)}
.atajo-n{font-family:"Anton",sans-serif; font-size:1.05rem; line-height:1.1}
.atajo-p{font-size:.66rem; letter-spacing:.03em; color:var(--luz-3)}
.atajo[aria-pressed="true"] .atajo-p{color:var(--haz-fuerte)}

/* ── los dos botones ────────────────────────────────────────────────────
   El que vende va entero y en ámbar; el de la cesta, en hueco y debajo.
   Es la misma jerarquía que la barra de eclipseando. */
.boton--hueco{background:transparent; color:var(--luz); border:1px solid var(--borde-vivo)}
.boton--hueco:hover{border-color:var(--haz); color:var(--haz)}
.comprar .boton--vende{margin-bottom:8px}

.pago-seguro{display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin:10px 0 18px; font-size:.76rem; color:var(--luz-3)}
.pago-seguro b{color:var(--luz-2); font-weight:600}
.pago-candado{filter:grayscale(1) opacity(.7)}

/* ── barra fija: el que vende manda ─────────────────────────────────── */
.barra-compra .barra-vende{min-width:15rem; justify-content:center; flex:none}
.barra-compra .barra-cesta{padding:13px 20px; flex:none}
@media (max-width:560px){
  /* En 390 px los dos botones en línea dejan el que vende en 140 px y el
     texto se parte en tres renglones. El que vende ocupa toda la fila de
     abajo; la cesta se queda arriba con el precio. */
  .barra-compra-int{flex-wrap:wrap; gap:10px 14px}
  .barra-compra .barra-cesta{order:1}
  .barra-compra .barra-vende{flex:1 0 100%; order:2; min-width:0; padding:15px}
}

/* ── tabla de tallas y preguntas ────────────────────────────────────── */
.franja--tallas .tabla-tallas th[scope="row"]{font-family:"Anton",sans-serif;
  font-weight:400; letter-spacing:.04em}
.franja--tallas .letra-chica{max-width:70ch}

.faq{margin:0; display:grid; gap:0}
.faq dt{margin-top:20px; font-weight:600; color:var(--luz);
  font-size:1.02rem; padding-left:18px; position:relative}
.faq dt::before{content:"›"; position:absolute; left:2px; color:var(--haz)}
.faq dt:first-child{margin-top:0}
.faq dd{margin:6px 0 0 18px; color:var(--luz-2); max-width:70ch; line-height:1.6}

/* ── el hueco fantasma bajo «CANTIDAD» ──────────────────────────────────
   MEDIDO: la leyenda acaba en y=757 y el contador arrancaba en y=812. Son
   55 px de aire donde los demás pasos tienen 11, y no venían de ningún
   margen: `.contador` era `inline-flex`, o sea una caja EN LÍNEA, y el
   fieldset le montaba encima un renglón de 25,6 px de alto (line-height 1,6
   sobre 16 px) más el hueco de la línea base. Pasando a `flex` con
   `width:max-content` desaparece el renglón y se queda en los 11 px de la
   leyenda, como el resto. */
.cantidad-bloque .contador{display:flex; width:max-content}

/* Un botón de 30 px de alto no se acierta con el pulgar: el mínimo cómodo
   son 44. En escritorio da igual, en el móvil no. */
@media (max-width:700px){
  .cantidad-bloque .contador button{min-height:44px}
  .cantidad-bloque .contador input{min-height:44px}
  .atajo{padding:9px 6px}
}

/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL: LA GALERÍA ACOTADA

   MEDIDO a 390×844 en /pieza/el-minotauro-camiseta, hoy: la foto ocupa
   425 px y la tira 176 px más —las cinco miniaturas no caben en 354 px y la
   quinta envuelve a una segunda fila—. Galería completa: 697 px. Resultado:
   el H1 cae en el píxel 995, el precio en el 1.037 y el botón que vende en
   el 1.712. La primera pantalla no enseña ni precio, ni talla, ni botón:
   sólo la camiseta.

   Eclipseando midió exactamente esto en su ficha (583 px de galería, caja de
   compra a partir del píxel 847) y lo dejó escrito en GaleriaViva.astro. Su
   arreglo es el que se copia aquí, con nuestras medidas: se ACOTA, no se
   quita. La foto pasa a una ventana de 300 px con la imagen entera dentro
   (object-fit ya estaba) y la tira deja de envolver: pasa a un carril
   horizontal que se arrastra con el dedo. Siguen estando todas las fotos y
   todas las miniaturas, y siguen conmutando igual.

   VA EN ESTA HOJA Y AL FINAL A PROPÓSITO. `.galeria-principal` está definida
   dos veces en estilo.css con la misma especificidad, así que gana la última
   que se lee; escrito allí arriba este bloque moriría en silencio sin dar
   ningún error. Y va en venta.css porque estilo.css lo está reescribiendo
   otro proceso.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  .galeria-principal{aspect-ratio:auto; height:300px; padding:10px}
  .galeria-principal img{height:100%; width:100%; object-fit:contain}
  .galeria-tiras{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; padding:2px; scrollbar-width:none;
  }
  .galeria-tiras::-webkit-scrollbar{display:none}
  /* `.galeria-tiras .tira` y no `.tira` a secas: gana a la regla de estilo.css
     sin tener que repetir el resto de sus propiedades. */
  .galeria-tiras .tira{flex:0 0 auto; width:62px; scroll-snap-align:start}
  .pie-galeria{margin-top:6px}
}

/* ═══════════════════════════════════════════════════════════════════════
   [CONFIGURADOR Y COMPRA] LA BARRA FIJA — PORTE DE ECLIPSEANDO
   Origen: `.barra-movil` de web/src/components/tienda/ConfiguradorProducto.astro
   en /Users/victorgomez/Code/eclipse-2026 (bloque <style>, líneas 2737-2912).
   Que NO es `BarraCompraMovil.astro`: ése es el de las fichas de gafas, una
   sola fila y sólo por debajo de 768 px. El de merch sale también en
   escritorio, que es el que hace falta aquí.

   AQUÍ SÓLO QUEDA LA BARRA, Y ES A PROPÓSITO. Hoy somos cuatro manos sobre
   los mismos ficheros y el vestido de los mandos —muestras de color, botones
   de talla, cantidad y los dos botones de compra— acabó escrito DOS VECES:
   aquí y en `galeria.css` (bloques 10 y 11, `.pieza-detalle .cfg-…`).
   `galeria.css` entra por `hoja_pagina`, o sea DESPUÉS de tema.css, así que
   gana por orden y es la que se ve. Se ha mirado con capturas y está bien
   portada, así que se retira la copia de aquí en vez de dejar dos
   definiciones peleándose: dos manos en la misma regla es justo lo que
   avisa la cabecera de esta hoja.
   Lo que sí se queda es la barra, porque va pegada a un marcado que se ha
   cambiado en `pieza.html` —se fue `.barra-compra-int`, se fue la miniatura
   y `.barra-vende` pasó a `.barra-boton`— y `galeria.css` sigue apuntando al
   marcado viejo (sus reglas de las líneas 659-663 ya no casan con nada).

   Ni un hexadecimal copiado: allí es tinta sobre papel y aquí hay dos caras.
     molde                     → RELIC
     --color-fondo-elevado     → --sala-2
     --color-borde             → --borde
     --color-acento (relleno)  → --campo  + --campo-tinta encima
     --color-acento-suave      → --ambar-hondo
     --color-foco  (texto)     → --haz
     --color-tinta/-suave      → --luz / --luz-3
   ═══════════════════════════════════════════════════════════════════════ */

/* ── EL HUECO ENTRE «por» Y EL IMPORTE, MEDIDO ──────────────────────────
   El botón que cobra lo viste `galeria.css` y lo deja en `display:flex`. Ahí
   el importe, que va en su propio <span>, deja de separarse con el espacio
   del texto: en una caja flexible el blanco del final de «Comprar ahora por »
   SE TIRA, y lo único que separa es el `gap`. O sea que ese `gap` no es un
   adorno, es la palabra: con `gap:0` se lee «Comprar ahora por23,95 €», que
   es lo que salió en la primera captura de este botón.
   Se fija en `.25em` —4,8 px a los 19,2 px del botón, que es lo que mide un
   espacio en esta tipografía— en vez de los .4rem de ahora, que son 6,4 px
   fijos y no siguen al tamaño de la letra cuando el botón encoge a 1,05rem
   por debajo de 768 px.

   Tres clases y no dos: `galeria.css` entra DESPUÉS que esta hoja, así que a
   igualdad de peso gana ella. Con `.comprar` en medio pesa (0,3,0) y gana
   ésta, que es la que ha mirado el botón con una captura. */
.pieza-detalle .comprar .cfg-boton-pago,
.pieza-detalle .comprar .cfg-boton-cesta{gap:.25em}

/* ── LA BARRA FIJA ──────────────────────────────────────────────────────
   `.barra-movil` de ConfiguradorProducto.astro, que sale TAMBIÉN en
   escritorio. REJILLA y no fila: a 390 px «Comprar ahora por 23,95 €» al lado
   de un segundo botón se parte en tres renglones, así que el que cobra se
   queda con la fila entera de abajo y la cesta comparte la de arriba con el
   precio. A partir de 768 px caben los tres en una sola fila. */
.barra-compra{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; column-gap:.75rem; row-gap:.5rem;
  padding:.5rem 1rem; padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
  background:var(--sala-2); backdrop-filter:none;
  border-top:1px solid var(--borde); box-shadow:var(--sombra-2);
  pointer-events:none}
.barra-compra.visible{pointer-events:auto}
.barra-precio{grid-column:1; grid-row:1; margin:0; min-width:0;
  line-height:1.2; font-family:inherit; font-size:1rem; color:var(--luz); flex:initial}
/* El importe en la serif del molde —la misma pila que usa `galeria.css` en
   `--fc-serif`, con su propio respaldo por si esa hoja no está—; el nombre de
   la pieza NO. `galeria.css` pone la serif en el <p> entero y el nombre la
   heredaba: en el molde el importe es serif de 1,5rem y el renglón de debajo
   es el texto normal de .8rem en gris. Se dice aquí a pelo para que no dependa
   de quién herede qué. */
.barra-precio strong{display:block;
  font-family:var(--fc-serif, Georgia,"Iowan Old Style","Times New Roman",Charter,serif);
  font-size:1.5rem; font-weight:700; color:var(--luz); letter-spacing:0}
.barra-precio span{display:block; font-size:.8rem; color:var(--luz-3);
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif; font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw}
.barra-compra .barra-boton{
  grid-column:1 / -1; grid-row:2; min-height:44px;
  font:inherit; font-size:1.2rem; font-weight:700; letter-spacing:0;
  text-transform:none; background:var(--campo); color:var(--campo-tinta);
  border:none; border-radius:.6rem; padding:.5rem 1rem; cursor:pointer}
.barra-compra .barra-boton:hover{filter:brightness(1.08)}
/* La cesta: la MISMA acción, con jerarquía de secundaria. Ni se esconde ni se
   apaga: es lo que usan los que se llevan dos piezas en un solo envío. */
.barra-compra .barra-cesta{
  grid-column:2; grid-row:1; justify-self:end; min-height:40px;
  font:inherit; font-size:.9rem; font-weight:600; letter-spacing:0;
  text-transform:none; background:transparent; color:var(--haz);
  border:1px solid var(--campo); border-radius:.6rem;
  padding:.25rem .75rem; cursor:pointer; white-space:nowrap; flex:none}
.barra-compra .barra-cesta:hover{background:var(--ambar-hondo); color:var(--haz)}
.barra-compra .barra-boton:focus-visible,
.barra-compra .barra-cesta:focus-visible{outline:2px solid var(--haz); outline-offset:2px}
@media (min-width:768px){
  .barra-compra{grid-template-columns:minmax(0,1fr) auto auto; padding-inline:1.5rem}
  .barra-compra .barra-cesta{grid-column:2; grid-row:1}
  .barra-compra .barra-boton{grid-column:3; grid-row:1; min-width:16rem}
  .barra-precio span{max-width:20rem}
}
/* EL HUECO DEL PIE —el que evita que la barra tape el último renglón del pie
   legal, que es justo donde está el enlace de devoluciones— NO se escribe
   aquí: ya lo pone `galeria.css` (`body:has(.barra-compra)`, 4,5rem en
   escritorio y 7,5rem por debajo de 768 px, que es exactamente la altura
   medida de esta barra en las dos formas: 64 px y 116 px). Escribirlo dos
   veces sería la misma regla peleándose consigo misma. */