@import url("../base/tema.css");

/* ═══════════════════════════════════════════════════════════════════════════
   ⚠⚠ ESE `@import` DE ARRIBA NO SE TOCA. ES LO PRIMERO DEL FICHERO Y ES
   OBLIGATORIO.
   ═══════════════════════════════════════════════════════════════════════════

   Un tema NO reemplaza al de la base: lo VISTE. `Vista.php` solo hereda las
   PLANTILLAS (`temas/base/*.php`); el CSS no se hereda solo — se carga
   `temas/{tema}/tema.css` y punto.

   Sin este import, todo lo que el tema no haya redefinido a mano se queda con
   los estilos del navegador. Medido el 09/08/2026 en `/de/carrito`: la tabla
   del carrito descuadrada, «Nettobetrag133,28 €» pegado sin alineación, los
   botones con el aspecto por defecto de Chrome y el «Aktualisieren» montado
   encima de la cantidad. Y lo mismo en checkout, cuenta, blog, legales y
   gracias — o sea, TODAS las pantallas que no toqué al hacer el tema.

   No daba ningún error: simplemente no había reglas. El fallo más caro de
   esta clase, porque parece «un diseño feo» y en realidad es media tienda sin
   CSS.

   ⚠ El `@import` tiene que ir ANTES de cualquier regla: el navegador ignora
   los `@import` que aparezcan después de la primera declaración, en silencio.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA «ESCAPARATE»
   ═══════════════════════════════════════════════════════════════════════════

   Andreu, 09/08/2026, enseñando nullure.com: «quiero lo mismo».

   Lo que hace que esa web parezca una marca y no un catálogo, medido en la
   página real y no de memoria:

     · **tipografía ligera y apretada** — titulares en peso 300 con
       `letter-spacing` NEGATIVO. Un H1 en negrita a espaciado normal se lee
       como una oferta de supermercado; el mismo texto en 300 con -.02em se lee
       como una marca. Es el cambio más barato y el que más se nota.
     · **cada producto sobre su propio color** — ver `Paleta::`
     · **menú centrado** y la marca a la izquierda, sin buscador a la vista
     · **muchísimo aire**: los márgenes verticales son del doble de lo normal
     · **nada de sombras ni degradados**: solo color plano y líneas de 1 px

   ── CÓMO SE CARGA ESTO ────────────────────────────────────────────────────

   ⚠ `comun/tienda.css` se carga DESPUÉS que este fichero (ver layout.php).
   Es la capa de estructura y va casi entera dentro de `@media`, así que en
   escritorio manda el tema y en móvil manda la capa común. Por eso aquí NO se
   repiten las reglas de móvil de la cabecera, el cajón ni el checkout: ya
   están resueltas una vez para los siete temas.

   ⚠⚠ PERO EL AZULEJO ES NUEVO Y NADIE MÁS LO CONOCE. `comun/tienda.css` sabe
   de `.tarjeta`, no de `.azulejo`. Todo lo del azulejo —incluido su móvil— se
   define aquí, completo. Si algún día se mueve a la capa común, hay que
   moverlo entero, no la mitad.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Cimientos ─────────────────────────────────────────────────────── */

:root {
  --primario: #222323;
  --tinta: #222323;
  --tinta-2: #6b6c6c;      /* secundario, sigue pasando contraste sobre blanco */
  --linea: #e7e5e1;
  --fondo: #ffffff;
  --fondo-2: #f6f5f3;
  --radio: 10px;
  /* Roboto es la del original; el resto son respaldos del sistema para no
     depender de ninguna fuente externa (ver la memoria: sin CDN de terceros). */
  --fuente: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ⚠⚠ AQUÍ ESTÁ EL TEMA. Peso 300 y espaciado negativo: sin esto, todo lo
   demás da igual, la web se sigue leyendo como un catálogo. */
h1, h2, h3, .titulo-seccion {
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--tinta);
}
h1, .titulo-seccion { font-size: clamp(2.2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.1rem; letter-spacing: -.01em; }

a { color: inherit; }

.contenido { max-width: 1360px; margin: 0 auto; padding: 0 2.5rem 6rem; }

/* ── 2 · Cabecera: marca arriba a la izquierda, menú centrado debajo ────── */

/**
 * ⚠ AQUÍ NO SE REESCRIBE `cabecera.php`, solo se le da estilo. Y es a
 * propósito: son 244 líneas que ya llevan resueltos el cajón de móvil, los
 * submenús sin JavaScript, el selector de país, los idiomas y el globito del
 * carrito. Copiarlas al tema es heredar la copia y que dentro de un mes un
 * arreglo del cajón se aplique a seis temas y a este no.
 *
 * La estructura de la base ya es la buena: `.cab-barra` arriba y
 * `.menu-tienda` debajo. El tema solo la centra y le da aire.
 */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--fondo); }

/**
 * ⚠⚠ `header.cabecera` Y NO `.cabecera`. NO ES UN CAPRICHO.
 *
 * `comun/tienda.css` declara `.cabecera { display: block }` —a propósito, para
 * que la banda del menú llegue de lado a lado y el cajón de móvil se coloque
 * solo— y se carga DESPUÉS del tema. Con la misma especificidad gana el
 * último, así que un `.cabecera { display: flex }` aquí no hace nada: el menú
 * se queda en su segunda fila y no da ningún error.
 *
 * Medido el 09/08/2026: `getComputedStyle(.cabecera).display` seguía dando
 * `block` con la regla del tema desplegada y visible en el fichero servido.
 * `header.cabecera` (0,1,1) le gana a `.cabecera` (0,1,0) sin `!important`,
 * que es lo que hay que evitar en una capa que otros temas comparten.
 */
/**
 * ⚠⚠ DOS FILAS, NO UNA. AQUÍ SE INTENTÓ UNA Y SE ROMPIÓ.
 *
 * El original mete marca, menú y acciones en la misma fila… con CUATRO
 * enlaces. Copiado tal cual a una tienda con DIEZ, medido el 09/08/2026 en
 * `/de/`: cabecera de **307 px**, el menú partido en dos líneas, el país y los
 * idiomas flotando a media altura y las acciones cayendo en `y=308`, o sea
 * FUERA de la caja de su propia cabecera. Y sin un solo error en consola.
 *
 * La lección no es «afinar los huecos»: es que una fila única depende de
 * cuántas secciones tenga cada tienda, y eso no lo decide el tema. Dos filas
 * aguantan cuatro enlaces y veinte:
 *
 *   fila 1 · marca a la izquierda, buscador y acciones a la derecha
 *   fila 2 · el menú, centrado y a todo lo ancho
 *
 * Es la estructura que ya trae `cabecera.php`, así que aquí solo se le da el
 * aire y el centrado del tema. Nada de `display: contents` ni de `order`.
 */
@media (min-width: 861px) {
  header.cabecera > .cab-barra {
    max-width: 1360px; margin: 0 auto; padding: 1.1rem 2.5rem .9rem;
    gap: 1.5rem;
  }

  header.cabecera .menu-tienda {
    max-width: 1360px; margin: 0 auto; padding: 0 2.5rem 1rem;
    display: flex; align-items: center; justify-content: center; gap: 2rem;
    flex-wrap: wrap;
    position: static; transform: none; box-shadow: none; border: 0;
    background: none; width: auto; height: auto; overflow: visible;
  }
  header.cabecera .menu-paginas {
    display: flex; align-items: center; justify-content: center;
    gap: 1.8rem; flex-wrap: wrap;
  }
  header.cabecera .cab-cerrar,
  header.cabecera .cab-hamburguesa,
  header.cabecera .cab-velo { display: none; }

  header.cabecera .menu-enlace {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem 0; font-size: .98rem; text-decoration: none;
    border-bottom: 1px solid transparent; white-space: nowrap;
  }
  header.cabecera .menu-enlace:hover { border-bottom-color: currentColor; }

  header.cabecera .acciones { display: flex; align-items: center; gap: .3rem; }
  /* ⚠ 44×44 de objetivo táctil aunque el icono mida 20: WCAG 2.5.8 pide 24×24
     como mínimo absoluto y 44 es lo cómodo con el pulgar. */
  header.cabecera .acciones > a {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: 0 .5rem; text-decoration: none;
  }

  /* País e idiomas al final del menú, no sueltos: son ajustes, no navegación. */
  header.cabecera .pais-envio,
  header.cabecera .idiomas { flex: none; margin-left: .8rem; }

  /**
   * El buscador, reducido a la lupa hasta que se usa.
   *
   * ⚠ Se abre con `:focus-within`, NO se esconde con `display:none`. Un campo
   * quitado del DOM no lo encuentra ni el teclado ni el lector de pantalla, y
   * buscar es de las tres cosas que más se usan en una tienda.
   */
  header.cabecera .buscador {
    flex: 0 0 auto; width: 44px; overflow: hidden;
    transition: width .22s ease; border-radius: 999px; align-items: center;
  }
  header.cabecera .buscador:focus-within { width: 260px; border: 1px solid var(--linea); }
  header.cabecera .buscador input {
    width: 0; opacity: 0; border: 0; padding: 0; background: none; font: inherit;
    transition: width .22s ease, opacity .18s ease;
  }
  header.cabecera .buscador:focus-within input { width: 100%; opacity: 1; padding: .6rem .9rem; }
  header.cabecera .buscador button {
    min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer;
  }
}

/* La marca escrita, cuando no hay logo: versalitas muy espaciadas, que es lo
   que le da el aire de marca. Al revés que los titulares — aquí el espaciado
   es POSITIVO y grande, a propósito. */
.marca span {
  font-size: 1.15rem; font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; text-decoration: none;
}

/* Banda de avisos de arriba: negra, fina, centrada. */
.barra-aviso {
  background: #1b1c1c; color: #fff; text-align: center;
  font-size: .86rem; letter-spacing: .01em; padding: .7rem 3rem;
}
.barra-aviso a { color: #fff; }

/* ── 3 · EL AZULEJO ────────────────────────────────────────────────────── */

.parrilla {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.azulejo {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--azulejo, #eee);
  color: var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
  /* ⚠ Proporción fija: sin ella, cada azulejo mide lo que mida su foto y la
     parrilla queda como una escalera. Y además reserva el hueco antes de que
     llegue la imagen, que es la mitad del CLS de esta página. */
  aspect-ratio: 3 / 4;
  isolation: isolate;
}

.azulejo-foto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8% 12% 30%;
}
.azulejo-foto img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* ⚠ `mix-blend-mode: multiply` funde el fondo BLANCO de las fotos de Amazon
     con el color del azulejo. Sin esto se ve un rectángulo blanco encima del
     color y el efecto entero se pierde — que es exactamente lo que separa
     esto de «una tarjeta con un color detrás».
     Solo se aplica sobre azulejos CLAROS: sobre uno oscuro, multiplicar apaga
     el producto hasta hacerlo ilegible. Lo decide la clase de abajo. */
  mix-blend-mode: multiply;
}
/* Con tinta blanca el azulejo es oscuro → nada de multiplicar. */
.azulejo[style*="--tinta:#ffffff"] .azulejo-foto img { mix-blend-mode: normal; }

.sin-foto { opacity: .35; }

.azulejo-marcas {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.az-marca {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--tinta-suave, rgba(0,0,0,.2));
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--tinta);
}

.azulejo-rapido { position: absolute; top: .8rem; right: .8rem; z-index: 3; margin: 0; }
.azulejo-rapido button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px; border: 0;
  background: #1b1c1c; color: #fff; cursor: pointer;
}
.azulejo-rapido button:hover { background: #000; }

/* ⚠ El corazón de «me gusta» y el añadir rápido comparten esquina. Si están
   los dos, el corazón baja: superpuestos, uno de los dos no se puede pulsar y
   nadie sabría por qué. `:has()` lo resuelve sin que la plantilla tenga que
   saber si el otro botón existe. */
.azulejo:has(.azulejo-rapido) .mod-megusta { top: 3.6rem; }

.azulejo-pie { position: relative; z-index: 2; padding: 1rem 1.1rem 1.1rem; }

.azulejo-linea {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
}
.azulejo-nombre {
  margin: 0; font-size: 1.32rem; font-weight: 300; letter-spacing: -.02em;
  line-height: 1.12;
}
.azulejo-nombre a { text-decoration: none; }
/* ⚠ El enlace se estira por TODO el azulejo: el objetivo táctil es la tarjeta
   entera, no las cinco palabras del nombre. Va por debajo (`z-index:1`) del
   botón de añadir, que tiene que seguir siendo pulsable por su cuenta. */
.azulejo-nombre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.azulejo-precio { text-align: right; white-space: nowrap; }
.azulejo-precio .precio { font-size: 1.02rem; }
.azulejo-precio .precio-antes { display: block; font-size: .82rem; opacity: .7; }
.azulejo-precio .precio-unidad,
.azulejo-precio .etiqueta-demo { display: block; font-size: .72rem; opacity: .75; }

.azulejo-variantes { margin: .35rem 0 0; font-size: .8rem; opacity: .82; }

.azulejo-etiquetas {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.azulejo-etiquetas a {
  display: inline-block; padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--tinta-suave, rgba(0,0,0,.2));
  font-size: .76rem; text-decoration: none;
  /* ⚠ Por encima del `::after` del nombre, o la píldora no se puede pulsar:
     el enlace estirado la taparía entera. */
  position: relative; z-index: 2;
}
.azulejo-etiquetas a:hover { background: var(--tinta); color: var(--azulejo); }

.azulejo-resenas {
  display: inline-block; margin-top: .5rem; font-size: .78rem;
  text-decoration: none; position: relative; z-index: 2; opacity: .85;
}

/* Móvil: dos columnas, que es lo que hace el original, y el azulejo un poco
   más alto para que el nombre no se coma la foto. */
@media (max-width: 760px) {
  .contenido { padding: 0 1rem 4rem; }
  .cab-barra { padding: .8rem 1rem; }
  .parrilla { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .azulejo { aspect-ratio: 3 / 4.4; }
  .azulejo-nombre { font-size: 1.02rem; }
  .azulejo-pie { padding: .7rem .75rem .8rem; }
  .azulejo-linea { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .azulejo-precio { text-align: left; }
  /* Con dos columnas no caben cuatro píldoras: se enseñan las dos primeras y
     el resto se oculta, en vez de romper la tarjeta en cuatro líneas. */
  .azulejo-etiquetas li:nth-child(n+3) { display: none; }
}
/**
 * ⚠⚠ EL CORTE A UNA COLUMNA VA EN 340 px, NO EN 400.
 *
 * Estaba en 400 y eso deja a UNA COLUMNA a casi todos los móviles reales:
 * iPhone SE 375, iPhone 15 393, Pixel 412, Galaxy 360. Medido el 09/08/2026 a
 * 375 px: `grid-template-columns: 339.8px`, o sea un azulejo gigante por fila.
 * Se ven dos productos por pantalla en vez de seis y hay que hacer scroll tres
 * veces más para lo mismo.
 *
 * Dos columnas es lo que hacen nullure y Zalando, y por debajo de 340 px —que
 * ya casi no existe— una sola sigue teniendo sentido.
 */
@media (max-width: 340px) {
  .parrilla { grid-template-columns: 1fr; }
  .azulejo { aspect-ratio: 4 / 3.4; }
}

/* ── 4 · Cabecero editorial de categoría ───────────────────────────────── */

.cat-cabecero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  padding: 4.5rem 0 3rem; align-items: start;
}
.cat-cabecero h1 { margin: 0 0 2.5rem; }
.cat-intro-titulo { font-weight: 500; font-size: 1rem; margin: 0 0 .5rem; }
.cat-intro { max-width: 42ch; font-size: .9rem; color: var(--tinta-2); margin: 0; }

.cat-filtros-titulo {
  font-size: .82rem; color: var(--tinta-2); margin: 0 0 .8rem;
}
.cat-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.cat-filtros a {
  display: inline-block; padding: .55rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--linea); font-size: .88rem; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cat-filtros a:hover { border-color: var(--tinta); }
/* ⚠ La activa se marca con `aria-current`, no con una clase suelta: así el
   lector de pantalla también sabe cuál es, no solo quien la ve. */
.cat-filtros a[aria-current="page"] { background: #1b1c1c; color: #fff; border-color: #1b1c1c; }

.cat-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linea); padding: 0 0 1rem; margin: 0 0 2rem;
  font-size: .9rem;
}
.cat-orden { display: flex; align-items: center; gap: .5rem; margin: 0 auto; }
.cat-orden select {
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  padding: .3rem 1.4rem .3rem .3rem;
}
.cat-cuantos { color: var(--tinta-2); }

@media (max-width: 860px) {
  .cat-cabecero { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 0 1.5rem; }
  .cat-cabecero h1 { margin-bottom: 1rem; }
  .cat-barra { flex-wrap: wrap; }
  .cat-orden { margin: 0; }
}

/* ── 5 · Ficha: la columna de compra se queda a la vista ───────────────── */

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; padding-top: 2rem; align-items: start; }

/* El mosaico: la foto principal a lo ancho y el resto a dos columnas. Es lo
   que hace el original — NO es un carrusel, se baja y ya. Un carrusel esconde
   el 80 % de las fotos detrás de una flecha que casi nadie pulsa. */
.ficha-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ficha-galeria > :first-child { grid-column: 1 / -1; }
.ficha-galeria img { width: 100%; height: auto; border-radius: var(--radio); display: block; background: var(--fondo-2); }

/* ⚠ `position: sticky` + `align-items: start` en la rejilla. Sin el `start`,
   la columna se estira a la altura de la galería y `sticky` no hace NADA:
   es el fallo clásico y no da ningún aviso. */
.ficha-datos { position: sticky; top: 1.5rem; }

.ficha-antetitulo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .9rem; color: var(--tinta-2); margin-bottom: .6rem;
}
.ficha h1 { margin: 0 0 1.2rem; }

.ficha-pildoras { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 1.8rem; padding: 0; }
.ficha-pildoras a, .ficha-pildoras span {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px;
  background: var(--fondo-2); font-size: .86rem; text-decoration: none;
}

.ficha-confianza {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.5rem;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 1.1rem 0; margin: 1.6rem 0 0; list-style: none;
  font-size: .88rem;
}
.ficha-confianza li { display: flex; align-items: flex-start; gap: .5rem; }
.ficha-confianza svg { flex: none; margin-top: .15rem; }

@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; gap: 1.5rem; }
  .ficha-datos { position: static; }
  .ficha-confianza { grid-template-columns: 1fr; }
}

/* ── 6 · Cinta de sellos ───────────────────────────────────────────────── */

.sellos {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  margin: 4rem 0; padding: 1.4rem 0; overflow: hidden;
}
.sellos ul {
  display: flex; gap: 3.5rem; list-style: none; margin: 0; padding: 0;
  justify-content: center; flex-wrap: wrap;
}
.sellos li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; white-space: nowrap; }
.sellos svg { opacity: .75; }

/* En móvil no caben cinco: se deslizan a lo ancho, con el pulgar. */
@media (max-width: 860px) {
  .sellos { margin: 2.2rem 0; }
  .sellos ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 2rem; padding: 0 1rem; scrollbar-width: none; }
  .sellos ul::-webkit-scrollbar { display: none; }
}

/* ── 7 · Bloques de contenido a dos columnas ───────────────────────────── */

.bloque-doble {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  margin: 4rem 0; align-items: start;
}
.bloque-doble h2 { margin: 0; }
.bloque-doble p { margin: 0; color: var(--tinta-2); font-size: .95rem; max-width: 48ch; }
@media (max-width: 860px) { .bloque-doble { grid-template-columns: 1fr; gap: 1rem; margin: 2.4rem 0; } }

/* Acordeón de detalles: líneas finas y un + que gira. Es `<details>` nativo,
   así que abre sin JavaScript y el buscador lee el contenido igual. */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; font-size: 1.05rem; list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; line-height: 1; }
.acordeon details[open] summary::after { content: "–"; }
.acordeon .acordeon-cuerpo { padding: 0 0 1.3rem; color: var(--tinta-2); font-size: .95rem; }

/* ── 8 · Relacionados ──────────────────────────────────────────────────── */

.relacionados { margin: 4.5rem 0 0; }
.relacionados h2 { margin: 0 0 1.6rem; }

/* ── 9 · Botones ───────────────────────────────────────────────────────── */

.ck-btn, .ficha-comprar button, button[type="submit"].principal {
  background: #1b1c1c; color: #fff; border: 0; border-radius: 8px;
  padding: 1rem 1.6rem; font: inherit; font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
}
.ck-btn:hover, .ficha-comprar button:hover { background: #000; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARREGLOS MEDIDOS EN /de/ EL 09/08/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * ⚠⚠ EL NOMBRE, A DOS LÍNEAS COMO MUCHO.
 *
 * «Swarovski Hyperbelanhänger transparent» ocupaba TRES líneas y se salía del
 * azulejo por abajo, encima de la foto del de al lado. El alemán compone
 * palabras y hace títulos un 30 % más largos que el español: un diseño que
 * solo se prueba en español se rompe al cambiar de idioma, y no avisa.
 *
 * Se recorta con puntos suspensivos, no se encoge la letra: reducir el cuerpo
 * hasta que quepa deja tarjetas con tipografías de tamaños distintos.
 */
.azulejo-nombre a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 861px) {
  /* La lupa, a la derecha con las acciones. Estaba pegada al logo porque
     `.cab-barra` la coloca antes de `.acciones`; `order` la manda al final
     sin tocar el HTML. */
  header.cabecera > .cab-barra { align-items: center; }
  header.cabecera .marca    { order: 1; margin-right: auto; }
  header.cabecera .acciones { order: 2; }
  header.cabecera .buscador { order: 3; }

  /* Los idiomas caían solos a una tercera línea. Con el menú un poco más
     apretado entran en la suya; y si aun así no caben, quedan centrados
     debajo, que es lo correcto — no descolgados a un lado. */
  header.cabecera .menu-tienda { gap: 1.4rem; padding-bottom: .8rem; }
  header.cabecera .menu-paginas { gap: 1.4rem; }
  header.cabecera .idiomas { margin-left: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALERÍA DE FICHA — miniaturas a la IZQUIERDA, no debajo
   ═══════════════════════════════════════════════════════════════════════════

   Andreu, 09/08/2026: *«las imágenes pequeñas tendrían que salir en pequeño al
   lado izquierdo, ahora salen debajo y dificultan verlas»*. Y es cierto: una
   tira horizontal bajo una foto alta queda fuera de la primera pantalla, así
   que en la práctica el comprador no sabe que hay más fotos.

   ⚠ Se coloca con `grid-column`/`grid-row` EXPLÍCITOS, no con `order`. Dentro
   de `.ficha-galeria` puede haber además un vídeo y un botón de pausa; con
   `order` cada elemento nuevo que alguien añada se cuela en medio de la
   columna de miniaturas. Diciendo dónde va cada cosa, lo que no se nombra cae
   en la columna de la foto grande, que es lo correcto por defecto. */

@media (min-width: 861px) {
  .ficha-galeria {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 1rem; align-items: start;
  }
  .ficha-galeria > .miniaturas {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    gap: .55rem; margin: 0;
    /* Con muchas fotos, la tira se desplaza sola en vez de estirar la página
       hasta el doble de alto que la foto grande. */
    max-height: 78vh; overflow-y: auto; scrollbar-width: thin;
  }
  .ficha-galeria > .miniaturas img {
    width: 86px; height: 86px; object-fit: contain;
    background: var(--fondo-2); border-radius: 8px; padding: 4px;
    border: 1px solid transparent; cursor: pointer;
  }
  .ficha-galeria > .miniaturas img:hover { border-color: var(--tinta); }
  /* Todo lo demás —la caja de la foto (con el vídeo y su mando dentro)— a la
     columna 2. */
  .ficha-galeria > :not(.miniaturas) { grid-column: 2; grid-row: 1; }
  /* ⚠ `> #foto-grande` DEJÓ DE CASAR el 09/08/2026: la foto pasó a vivir
     dentro de `.ficha-foto` (el bloque contenedor del vídeo). Con el hijo
     directo, esta regla no se aplicaba y la foto grande perdía su redondeo sin
     que nada fallara. */
  .ficha-galeria .ficha-foto > #foto-grande { width: 100%; height: auto; border-radius: var(--radio); }
}

/* En móvil no hay sitio para una columna: vuelven abajo, en una tira que se
   desliza con el pulgar. */
@media (max-width: 860px) {
  .ficha-galeria > .miniaturas {
    /**
     * ⚠⚠ `grid-column: 1 / -1` — LA TIRA OCUPA LAS DOS COLUMNAS.
     *
     * `.ficha-galeria` es una rejilla de DOS columnas (el mosaico del tema) y
     * la tira caía en UNA: medido en un móvil de 375, la galería medía 340 px
     * y la tira **164**. Con dos miniaturas no se notaba; con TRES, la tercera
     * quedaba fuera de su columna — se veía asomar y el toque se lo comía
     * `.ficha-galeria`. Parecía que algo la tapaba, y era la propia rejilla.
     *
     * Comprobado en `tous-b-time-reloj-digital-mujer-137610`, que tiene tres
     * fotos: la 3ª iba de x=178 a 250, fuera de una tira de 164.
     */
    grid-column: 1 / -1;
    display: flex; gap: .5rem; margin-top: .6rem;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    /* Que el desplazamiento con el pulgar se sienta como el del sistema. */
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .ficha-galeria > .miniaturas img { scroll-snap-align: start; }
  .ficha-galeria > .miniaturas::-webkit-scrollbar { display: none; }
  .ficha-galeria > .miniaturas img { flex: none; width: 72px; height: 72px; object-fit: contain; }
}

/* ⚠⚠ EN MÓVIL EL PIE SE MONTABA ENCIMA DE LA FOTO.
   `.azulejo-foto` reserva el hueco del texto con su `padding-bottom` (30 % en
   escritorio). A dos columnas de 170 px ese 30 % son 50 px y el pie ocupa el
   doble: nombre a dos líneas + precio + píldoras. Medido en /de/ a 375 px: el
   collar de Swarovski con «161,27 €» escrito por encima.
   Se arregla dando MÁS hueco y quitando píldoras, no encogiendo la letra. */
@media (max-width: 760px) {
  .azulejo { aspect-ratio: 3 / 4.9; }
  .azulejo-foto { padding: 6% 8% 52%; }
  .azulejo-nombre { font-size: .95rem; }
  .azulejo-nombre a { -webkit-line-clamp: 2; }
  .azulejo-pie { padding: .6rem .65rem .7rem; }
  /* Una sola píldora: con dos, la tarjeta crece otra línea y vuelve a
     comerse la foto. */
  .azulejo-etiquetas li:nth-child(n+2) { display: none; }
  .azulejo-etiquetas a { font-size: .7rem; padding: .22rem .5rem; }
  .azulejo-precio .precio { font-size: .92rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIE: TEXTO LEGIBLE SOBRE FONDO OSCURO
   ═══════════════════════════════════════════════════════════════════════════

   ⚠⚠ LAS VARIABLES DEL TEMA SUPONEN FONDO CLARO. `--tinta-2: #6b6c6c` pasa
   contraste de sobra sobre blanco… y sobre el pie oscuro queda gris sobre
   gris. Medido el 09/08/2026 en `/de/`: los titulares del pie («WIR HELFEN
   DIR», «ECOMGI, S.L.») prácticamente invisibles, mientras el cuerpo —que
   hereda otro color— sí se leía. Ese contraste está por debajo del 4,5:1 que
   pide la WCAG, así que no es cuestión de gusto.

   El pie declara sus propios colores en vez de heredar los de la página. */

.pie, footer.pie {
  --tinta:   #f2f0ec;
  --tinta-2: #bdb9b1;   /* sobre #2a2a26 da ~7:1 */
  --linea:   rgba(255, 255, 255, .16);
  color: var(--tinta);
}
.pie h2, .pie h3, .pie h4, .pie .pie-titulo, .pie strong { color: var(--tinta); }
.pie p, .pie li, .pie small, .pie address { color: var(--tinta-2); }
.pie a { color: var(--tinta); }
.pie a:hover { text-decoration: underline; }

/**
 * El botón de cookies, a icono abajo a la izquierda — como el original.
 * Se enciende con la opción `cookies_icono` del PIE (esquema de áreas), y en
 * esta tienda está encendida.
 *
 * ⚠ Aquí solo queda LA PIEL. Dónde se coloca, cuánto mide y cómo se aparta de
 * la barra de compra en móvil está en `assets/comun/tienda.css`, que se carga
 * DESPUÉS: si se repitiera la geometría aquí, la del común ganaría igual y
 * esto sería una copia muerta que despista al siguiente que la lea.
 *
 * ⚠ Sigue siendo un `<button>` con su texto dentro (`.sr`), no un icono
 * pelado: quien navega con lector de pantalla tiene que oír qué hace. Lo que
 * se oculta es el texto, no la función.
 *
 * ⚠ Y en el pie sigue existiendo el botón de siempre. Retirar el
 * consentimiento tiene que poder hacerse desde donde está el resto de lo
 * legal, no solo desde un icono flotante que alguien puede no ver.
 */
.cookies-icono {
  background: #fff; color: #1b1c1c; border: 1px solid rgba(0, 0, 0, .14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.cookies-icono:hover { background: #f4f4f4; }