/*
 * La tienda de Enmarca Lab.
 *
 * Escrito a mano, sin framework y sin paso de compilación. La razón no es
 * purismo: una tienda pública se juega la venta en los primeros dos segundos
 * de carga, y meter React + antd aquí sería mandar un megabyte de JavaScript
 * para enseñar una cuadrícula de imágenes. Además, sin compilación, publicar
 * un cambio es copiar archivos.
 *
 * La paleta es la de la marca, la misma del sistema:
 *   dorado #BA7517 · negro #2C2C2A · crema #F1EFE8
 */

:root {
  --dorado: #BA7517;
  --dorado-oscuro: #9a610f;
  --negro: #2C2C2A;
  --crema: #F1EFE8;
  --crema-claro: #FBFAF6;
  --borde: #ddd9cf;
  --gris: #6B6A66;
  --gris-claro: #9A9892;
  /* El fondo de la portada. Va como token porque se usa en TRES lugares —la
     sección, el panel del texto y su desvanecido— y si uno se queda atrás
     aparece un rectángulo detrás del titular. La versión con alfa 0 se
     escribe a mano y no como `transparent`: en un degradado, `transparent`
     es negro transparente y el desvanecido saldría sucio. */
  --hero-fondo: #F1EDE3;
  --hero-fondo-0: rgba(241, 237, 227, 0);
  --verde: #3d8b5f;
  --rojo: #b3402f;

  --ancho: 1200px;
  --radio: 14px;
  --sombra: 0 2px 14px rgba(44,44,42,.07);
}

*, *::before, *::after { box-sizing: border-box; }

/* Solo afecta a los saltos programados —el ancla de "Cómo funciona" y las
   flechas de las tiras—, no a la rueda: por eso no tiene nada que ver con
   cómo se siente pasar del panel de la ficha a la página. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--negro);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
/* Para lo que se mira y no se lee: la ficha de un cuadro y las tiras de
   recomendados. El tope evita que en una pantalla ultra ancha la foto y el
   botón de comprar queden en extremos opuestos. */
.contenedor.ancho { max-width: 1680px; padding: 0 32px; }
@media (max-width: 700px) { .contenedor.ancho { padding: 0 18px; } }

/* ── Tipografía ── */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.1rem; }

.subtitulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dorado);
}

/* ════════════════════════════════════════════
   ENCABEZADO
   ════════════════════════════════════════════ */
/* Tres franjas: el aviso dorado (se va con el scroll), la fila blanca con
   el logotipo AL CENTRO (la única que se queda pegada) y los beneficios en
   negro. El mega menú cuelga de la fila blanca, a todo lo ancho. */
/* La barra de arriba en tres: correo, aviso y redes. Con grid y no con
   flex, para que el aviso quede centrado de verdad aunque los lados midan
   distinto. */
/* Una LÍNEA de anuncio, no una franja. El dorado se queda —es lo que ancla
   la marca arriba— pero en 30 px deja de competir con el encabezado. */
.aviso-barra {
  background: var(--dorado); color: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  height: 30px; padding: 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .2px;
}
.aviso-correo { display: inline-flex; align-items: center; gap: 7px; color: #fff; justify-self: start; }
.aviso-correo:hover { text-decoration: underline; }
.aviso-nota { text-align: center; font-weight: 700; }
/* Sin el círculo detrás: en una línea de 30 px no cabe y se veía apretado. */
.aviso-redes { display: flex; gap: 12px; justify-self: end; }
.aviso-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .9; transition: opacity .15s;
}
.aviso-redes a:hover { opacity: 1; }
.aviso-redes img { width: 14px; height: 14px; display: block; }

/* La franja de beneficios, la negra: va donde la página le deje su hueco */
.beneficios-barra {
  background: #141414; color: #fff;
  display: flex; justify-content: space-around; align-items: center;
  gap: 6px 18px; flex-wrap: wrap; padding: 11px 18px;
  font-size: 12.5px; font-weight: 600;
}
.beneficios-barra span { display: inline-flex; align-items: center; gap: 8px; }

.encabezado {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado-fila {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px; height: 84px;
}
.lado { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lado.der { justify-content: flex-end; }
/* El logotipo con presencia: más grande que los rótulos del menú y con la
   barra un poco más alta para que respire — grande sin verse inflado. */
.logo { flex-shrink: 0; }
.logo img { height: 44px; width: auto; display: block; }

.menu { display: flex; gap: 22px; align-items: center; }
.menu-liga {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--gris);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.menu-liga:hover, .menu-liga.abierto { color: var(--negro); border-bottom-color: var(--negro); }

/* ── Submenús ──
   Se abren al pasar el ratón y no al picar, porque el renglón de arriba ya es
   una liga que lleva a algún lado: quien sabe a dónde va le pica directo. El
   padding de arriba del submenu tapa el hueco entre la liga y el panel — sin
   él, el menú se cierra al bajar el ratón y no se alcanza a picar nada. */
.menu-con-hijos { position: relative; }
.menu-con-hijos > .submenu {
  position: absolute; left: -14px; top: 100%; z-index: 60;
  min-width: 190px; padding: 8px; margin-top: 2px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(44,44,42,.13);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu-con-hijos:hover > .submenu,
.menu-con-hijos:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-con-hijos > .submenu a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-family: Outfit, Inter, sans-serif; font-size: 14px; font-weight: 500;
  color: var(--gris); white-space: nowrap;
}
.menu-con-hijos > .submenu a:hover { background: var(--crema); color: var(--negro); }

/* La letra de la navegación: Outfit (Google Fonts), geométrica y moderna.
   Solo el menú y sus barras — el cuerpo de la tienda sigue en Inter. La
   fuente la inyecta tienda.js en todas las páginas. */
.aviso-barra, .beneficios-barra, .menu-liga, .mega-col h5, .mega-col a,
.mega-card span, .menu-movil-cuerpo a, .menu-movil-cuerpo h5 {
  font-family: 'Outfit', Inter, sans-serif;
}
.menu-liga { font-size: 15px; letter-spacing: .2px; }
.menu-liga.con-flecha svg { transition: transform .15s; }
.menu-liga.abierto svg { transform: rotate(180deg); }

.icono-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  color: var(--negro); border: none; background: none; cursor: pointer;
}
.icono-btn:hover { background: var(--crema); }
.carrito-num {
  position: absolute; top: 0; right: -3px;
  background: var(--dorado); color: #fff;
  min-width: 17px; height: 17px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* El botón de buscar del menú móvil: abre la misma guía que la lupa. */
.mm-buscar-btn {
  display: block; width: 100%; text-align: left; padding: 10px 0;
  background: none; border: none; border-bottom: 1px solid var(--crema); cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 16px; font-weight: 700;
  color: var(--dorado);
}

/* ── La búsqueda guiada: un modal, una pantalla ── */
.guia-velo {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26,25,23,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.guia-caja {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 18px; padding: 34px 32px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.guia-cerrar {
  position: absolute; top: 12px; right: 14px; padding: 6px;
  background: none; border: none; font-size: 17px; color: var(--gris-claro); cursor: pointer;
}
.guia-titulo { font-size: 21px; margin: 0 0 16px; }
.guia-sug > span { display: block; font-size: 12.5px; color: var(--gris-claro); margin: 0 0 9px; }
.guia-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.guia-chip {
  padding: 11px 18px; cursor: pointer; border-radius: 999px;
  border: 1.5px solid var(--borde); background: #fff;
  font-family: inherit; font-size: 14px; color: var(--negro);
}
.guia-chip:hover { border-color: var(--dorado); }
.guia-chip.activa { background: var(--negro); border-color: var(--negro); color: #fff; }
.guia-texto {
  width: 100%; padding: 14px 16px; margin-bottom: 16px;
  border: 1.5px solid var(--borde); border-radius: 12px;
  font-family: inherit; font-size: 16px;
}
.guia-texto:focus { outline: none; border-color: var(--dorado); }

/* ── El mega menú ── */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--borde);
  box-shadow: 0 18px 30px rgba(44,44,42,.10);
}
.mega-rejilla {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr;
  gap: 36px; padding: 34px 0 38px;
}
.mega-col h5 {
  font-size: 15px; font-weight: 700; letter-spacing: .4px;
  color: var(--negro); margin: 0 0 12px;
}
.mega-col a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--gris); }
.mega-col a:hover { color: var(--negro); }
.mega-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.mega-card { display: block; }
.mega-card img {
  width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover;
  border-radius: 4px; display: block; background: var(--crema);
}
.mega-card span {
  display: block; text-align: center; margin-top: 10px;
  font-size: 14px; font-weight: 700; color: var(--negro);
}
.mega-card:hover span { color: var(--dorado); }

/* ── El menú móvil (hamburguesa) ── */
.hamburguesa {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.hamburguesa span { display: block; height: 2px; background: var(--negro); border-radius: 2px; }

.menu-movil { position: fixed; inset: 0; z-index: 200; background: #fff; overflow-y: auto; }
.menu-movil-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--borde);
}
.menu-movil-cabeza img { height: 28px; }
.menu-movil-cabeza button {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--negro); padding: 6px 10px;
}
.menu-movil-cuerpo { padding: 16px 22px 46px; }
.menu-movil-cuerpo h5 {
  margin: 24px 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--gris-claro);
}
.menu-movil-cuerpo a {
  display: block; padding: 10px 0; font-size: 16px;
  color: var(--negro); border-bottom: 1px solid var(--crema);
}
.mm-liga { font-weight: 600; }
/* En el celular no hay dónde desplegar: el submenú va sangrado bajo su padre. */
.menu-movil-cuerpo a.mm-hijo {
  padding-left: 16px; font-size: 14.5px; font-weight: 500; color: var(--gris);
}

/* ── Mi cuenta ── */
.cta-caja {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px 26px 24px;
}
.cta-para-que { font-size: 14.5px; color: var(--gris); margin: 0 0 18px; line-height: 1.6; }
.prov-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; margin-bottom: 10px; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--negro);
}
.prov-btn:hover:not(:disabled) { border-color: var(--negro); }
.prov-btn:disabled { cursor: default; opacity: .6; }
.prov-pronto {
  font-size: 11px; font-weight: 700; color: var(--dorado);
  background: var(--crema); border-radius: 999px; padding: 3px 9px;
}
.cta-invitado {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borde);
  text-align: center; font-size: 14px; color: var(--gris); line-height: 1.7;
}
.cta-invitado a { color: var(--dorado); font-weight: 600; }
.cta-perfil { display: flex; align-items: center; gap: 14px; }
.cta-perfil img { width: 54px; height: 54px; border-radius: 50%; }
.cta-nombre { font-size: 18px; font-weight: 700; color: var(--negro); }
.cta-email { font-size: 13px; color: var(--gris); }
.cta-pedido {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 2px; border-bottom: 1px solid var(--crema);
}
.cta-pedido-folio { font-size: 14px; font-weight: 700; color: var(--negro); }
.cta-pedido-fecha { font-size: 12px; color: var(--gris-claro); }
.cta-pedido-der { text-align: right; }
.cta-pedido-total { font-size: 14.5px; font-weight: 700; color: var(--negro); }
.cta-pedido-estatus { font-size: 12px; color: var(--dorado); font-weight: 600; }
.cta-salir {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--gris-claro);
  text-decoration: underline;
}
/* El icono de cuenta con sesión abierta lleva su punto dorado. */
.icono-btn.con-sesion::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--dorado);
}
/* La foto de perfil de quien entró. Va redonda y con su aro para que se lea
   como avatar y no como una imagen suelta dentro del botón. */
.cuenta-foto {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  object-fit: cover; background: var(--crema);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.35);
}
/* Con foto, el puntito de "hay sesión" estorba: la cara ya lo dice. */
.icono-btn.con-sesion:has(.cuenta-foto)::after { display: none; }

/* ── El submenú de la cuenta ──
   Cuelga del botón de la foto y va alineado a la DERECHA: ese botón vive
   pegado al borde de la ventana, y uno alineado a la izquierda como los del
   menú se saldría de la pantalla.

   Se abre al pasar el ratón, igual que los del menú. El `top: 100%` sin
   margen es a propósito: cualquier hueco entre el botón y el panel lo cierra
   antes de que el ratón alcance a llegar. */
.cuenta-menu { position: relative; display: flex; }
.cuenta-menu > .submenu {
  position: absolute; right: -6px; top: 100%; z-index: 60;
  min-width: 186px; padding: 8px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(44, 44, 42, .13);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.cuenta-menu:hover > .submenu,
.cuenta-menu:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.cuenta-menu > .submenu a,
.cuenta-menu > .submenu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none; border-radius: 8px;
  font-family: Outfit, Inter, sans-serif; font-size: 14px; font-weight: 500;
  color: var(--gris); white-space: nowrap; cursor: pointer;
}
.cuenta-menu > .submenu a:hover,
.cuenta-menu > .submenu button:hover { background: var(--crema); color: var(--negro); }

/* De quién es la sesión. Va arriba y sin ser liga: contesta "¿con cuál cuenta
   estoy?" sin que haya que entrar a averiguarlo. */
.cuenta-menu > .submenu .submenu-quien {
  display: block; padding: 6px 12px 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borde);
  font-family: Outfit, Inter, sans-serif; font-size: 12.5px;
  color: var(--gris-claro); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* Cerrar sesión va apartado del resto: es el único que deshace algo, y pegado
   a "Mis compras" se pica sin querer. */
.cuenta-menu > .submenu button {
  margin-top: 5px; padding-top: 11px;
  border-top: 1px solid var(--borde); border-radius: 0 0 8px 8px;
}

/* ── El corazón del encabezado ──
   Mismo globito que el del carrito. Se pinta dorado solo cuando hay algo
   guardado: en gris y vacío sería un icono más que no dice nada. */
.favoritos-icono { position: relative; }
.favoritos-icono.con-guardados svg { fill: var(--dorado); stroke: var(--dorado); }
.favoritos-num {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--dorado); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── Vista rápida ── */

/* El botón aparece al pasar el ratón por la tarjeta. En pantallas de tocar no
   hay "pasar el ratón", así que ahí se queda siempre visible (más abajo). */

.rapida-caja { max-width: 720px; width: min(720px, 94vw); }
.rapida-cargando { padding: 40px 10px; text-align: center; color: var(--gris); }
.rapida-nota { color: var(--gris); margin: 0 0 16px; }
.rapida-cuerpo { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.rapida-foto img { width: 100%; border-radius: 10px; }
.rapida-titulo { margin: 0 0 2px; font-size: 20px; }
.rapida-cat { margin: 0 0 14px; font-size: 13px; color: var(--gris-claro); font-style: italic; }

/* La lista se limita en alto y se corre por dentro: hay cuadros con catorce
   combinaciones, y sin tope el modal se sale de la pantalla y el botón de
   agregar queda donde nadie lo ve. */
.rapida-lista {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; margin-bottom: 14px;
  padding-right: 4px;
}
.rapida-var {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 10px 13px; cursor: pointer; text-align: left;
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
  font-family: Outfit, Inter, sans-serif; font-size: 13.5px; color: var(--gris);
}
.rapida-var:hover { border-color: var(--dorado); color: var(--negro); }
.rapida-var.activa { border-color: var(--dorado); background: var(--crema-claro); color: var(--negro); }
.rapida-var b { font-size: 14.5px; color: var(--negro); white-space: nowrap; }
.rapida-ficha {
  display: block; margin-top: 11px; text-align: center;
  font-size: 13px; color: var(--gris); text-decoration: underline;
}

@media (max-width: 620px) {
  .rapida-cuerpo { grid-template-columns: 1fr; gap: 14px; }
  /* La foto se encoge: en el teléfono lo que importa es ver las medidas y el
     precio sin tener que bajar. */
  .rapida-foto { max-width: 160px; margin: 0 auto; }
  .rapida-lista { max-height: 200px; }
}


/* ── Entrar / registrarse: dos paneles ──
   El de la izquierda es el formulario con sus círculos decorativos; el de
   la derecha, el panel dorado con el logotipo. La referencia con nuestra
   paleta. */
.cuenta-perfil-marco { max-width: 680px; margin: 0 auto; padding: 40px 20px 60px; }

.entrar-caja {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff;
  /* De borde a borde y hasta abajo: lo que queda de pantalla tras el aviso,
     el menú y la barra de beneficios. Nada de cuadro isla. */
  min-height: calc(100vh - 234px);
}
.entrar-izq {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 36px;
}
.entrar-forma-caja { position: relative; width: 100%; max-width: 400px; }
.entrar-titulo {
  font-size: 34px; line-height: 1.15; letter-spacing: -.5px;
  font-weight: 800; color: var(--negro); margin: 0 0 28px;
}
.entrar-olvide { text-align: right; margin: -6px 0 16px; }
.entrar-olvide a { font-size: 12.5px; color: var(--gris); }
.entrar-olvide a:hover { color: var(--dorado); }
.entrar-boton {
  display: flex; align-items: stretch; width: 100%; margin-top: 6px;
  border: none; border-radius: 10px; overflow: hidden; cursor: pointer;
  font-family: inherit; padding: 0;
}
.entrar-boton span {
  flex: 1; background: var(--dorado); color: #fff;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1.2px;
  padding: 15px 10px;
}
.entrar-boton i {
  width: 52px; background: var(--dorado-oscuro); color: #fff;
  font-style: normal; font-size: 22px; display: flex;
  align-items: center; justify-content: center;
}
.entrar-boton:hover span { background: var(--dorado-oscuro); }
.entrar-boton:disabled { opacity: .6; cursor: default; }
.entrar-aviso { color: var(--rojo); font-size: 13px; margin-top: 10px; min-height: 18px; }
.entrar-cambio { font-size: 13px; color: var(--gris); margin-top: 4px; }
.entrar-cambio button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--dorado); letter-spacing: .5px;
}
.entrar-o {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 12px; color: var(--gris-claro); font-size: 12px;
}
.entrar-o::before, .entrar-o::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.entrar-sociales { display: flex; gap: 10px; }
/* El botón oficial de Google llega en un iframe de ancho fijo (tope 400 de
   ellos). Se centra por si el hueco es más ancho, para que no quede
   recargado a la izquierda junto a un formulario que sí abarca todo. */
#google-oficial { display: flex; justify-content: center; }
.entrar-sociales .prov-btn { margin-bottom: 0; min-height: 44px; font-size: 14px; }
.entrar-invitado {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--crema);
  font-size: 13px; color: var(--gris); line-height: 1.6;
}
.entrar-invitado a { color: var(--dorado); font-weight: 600; }

/* El logotipo arriba del formulario, en el lado blanco: ahí se lee entero. */
.entrar-logo { width: 225px; max-width: 75%; display: block; margin-bottom: 18px; }

.entrar-der {
  position: relative; overflow: hidden;
  /* La FOTO va a la izquierda (order -1) y el inicio de sesión, blanco, a
     la derecha. La viñeta es un velo radial suave encima de la imagen:
     centro limpio, orillas apenas oscurecidas — se ve padre sin comerse
     la foto. */
  order: -1;
  background: url('/assets/louvre-abu-dhabi.jpg') center / cover no-repeat, var(--negro);
}
.entrar-der::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* La viñeta suave, más un degradado abajo: es la cama donde se lee la
     leyenda sin que la foto pierda el centro. */
  background:
    linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 46%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 46%, rgba(0,0,0,.34) 100%);
}

/* ── La leyenda sobre la foto ──
   Playfair en grande, blanca, entrando línea por línea de abajo hacia
   arriba: editorial, no letrero. El remate en cursiva dorada es la firma. */
.entrar-der { display: flex; align-items: flex-end; }
.entrar-leyenda { position: relative; z-index: 2; padding: 52px 54px 56px; }
.leyenda-arriba {
  display: block; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 3.5px;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  opacity: 0; animation: leyendaSube .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.leyenda-linea {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.16;
  font-weight: 600; color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(20px);
  animation: leyendaSube .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.leyenda-linea em { font-style: italic; color: #F5D9A8; }
.leyenda-linea.l1 { animation-delay: .35s; }
.leyenda-linea.l2 { animation-delay: .55s; }
.leyenda-linea.l3 { animation-delay: .8s; margin-top: 10px; }
@keyframes leyendaSube {
  to { opacity: 1; transform: translateY(0); }
}

/* El pie trae aire arriba en las demás páginas; aquí el panel debe llegar
   hasta él sin la franja de por medio. */
.cuenta-plena + .pie { margin-top: 0; }

/* Los círculos decorativos de la referencia, en nuestra paleta. */
.entrar-circulo { position: absolute; border-radius: 50%; pointer-events: none; }
.entrar-circulo.uno { width: 120px; height: 120px; left: -60px; top: 90px; background: #F3CE9A; }
.entrar-circulo.dos { width: 74px; height: 74px; right: -30px; bottom: -30px; background: #F5E2C8; }
.entrar-circulo.tres { width: 110px; height: 110px; right: -40px; top: -40px; background: rgba(255,255,255,.18); }

@media (max-width: 820px) {
  .entrar-caja { grid-template-columns: 1fr; min-height: calc(100vh - 180px); }
  .entrar-der { display: none; }
  .entrar-izq { padding: 34px 26px 40px; }
  .entrar-titulo { font-size: 28px; }
}

/* ── Métodos de pago en el carrito ── */
.metodo {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1.5px solid var(--borde); border-radius: 11px; font-size: 13.5px;
}
.metodo-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--borde); flex-shrink: 0; }
/* Desde que el método se ELIGE —Mercado Pago o transferencia— el renglón es
   un <label> con su radio dentro: se pica entero, que en el teléfono es la
   diferencia entre poder elegir y no. El fondo tenue marca el elegido, igual
   que en el menú de paqueterías: el cliente ya aprendió ahí qué significa. */
.metodo { cursor: pointer; background: #fff; transition: border-color .15s ease, background .15s ease; }
.metodo:hover { border-color: #C9BFAE; }
.metodo.activo { background: #FDF9F3; }
.metodo input[type="radio"] { margin: 0; flex-shrink: 0; }
.metodo.activo { border-color: var(--dorado); }
.metodo.activo .metodo-punto { background: var(--verde); }
.metodo-nombre { font-weight: 700; color: var(--negro); white-space: nowrap; }
.metodo-detalle { font-size: 12px; color: var(--gris-claro); margin-left: auto; text-align: right; }
.metodo.apagado { opacity: .65; }
.metodo.apagado .metodo-detalle { color: var(--dorado); font-weight: 700; }

@media (max-width: 940px) {
  .lado .menu { display: none; }
  .lupa { display: none; }
  .hamburguesa { display: inline-flex; }
  .encabezado-fila { height: 66px; }
  .logo img { height: 32px; }
  .mega { display: none !important; }
  .aviso-barra { grid-template-columns: 1fr auto; font-size: 11.5px; padding: 7px 14px; }
  .aviso-correo { display: none; }
  .beneficios-barra { font-size: 11.5px; justify-content: center; }
}

/* ════════════════════════════════════════════
   EL CARRUSEL DE LA PORTADA (Swiper)
   ════════════════════════════════════════════ */
.hero { background: var(--negro); }
.hero-swiper { height: min(74vh, 640px); }
.hero-slide {
  position: relative;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
/* El velo: la foto manda, pero el texto tiene que leerse SIEMPRE, venga la
   imagen clara u oscura. */
.hero-slide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,19,17,.82) 0%, rgba(20,19,17,.55) 45%, rgba(20,19,17,.12) 100%);
}
.hero-cuerpo {
  position: relative; z-index: 2; color: #fff;
  max-width: 620px; padding-bottom: 28px;
  font-family: 'Outfit', Inter, sans-serif;
}
.hero-etiqueta {
  display: inline-block; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
  color: #F0C98A;
}
.hero-cuerpo h1 {
  font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -1.2px;
  color: #fff; margin: 0 0 16px;
}
.hero-cuerpo p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0 0 26px; max-width: 480px; }
.hero-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.boton.fantasma {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.boton.fantasma:hover { background: rgba(255,255,255,.22); }
.hero-precio { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.9); }

/* Los controles de Swiper, con nuestra paleta */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; transition: background .15s;
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover { background: var(--dorado); }
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.hero-swiper .swiper-pagination-bullet {
  width: 26px; height: 4px; border-radius: 3px; background: #fff; opacity: .45;
}
.hero-swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--dorado); }
@media (max-width: 700px) {
  .hero-swiper { height: min(78vh, 520px); }
  .hero-swiper .swiper-button-prev, .hero-swiper .swiper-button-next { display: none; }
  .hero-slide::before { background: linear-gradient(180deg, rgba(20,19,17,.5) 0%, rgba(20,19,17,.85) 100%); }
}

/* La cinta de promesas, pegada bajo el carrusel */
/* En blanco, no en crema. La portada que va justo arriba es crema (--hero-fondo,
   #F1EDE3) y la cinta era --crema (#F1EFE8): dos tonos a dos puntos de
   distancia, pegados uno al otro. No se leía como una franja aparte sino como
   el final de la portada, y estas tres frases son las que responden las dudas
   de quien nunca ha comprado un cuadro en línea — se tienen que ver.

   La raya de abajo se queda porque lo que sigue también es claro. */
.cinta { background: #fff; border-bottom: 1px solid var(--borde); }
.cinta-fila {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 0; font-family: 'Outfit', Inter, sans-serif;
  font-size: 13px; color: var(--gris);
}
.cinta-fila b { display: block; color: var(--negro); font-size: 13.5px; }

/* ════════════════════════════════════════════
   EXPLORA — tarjetas altas por colección
   ════════════════════════════════════════════ */
/* A todo el ancho de la página, sin el tope del .contenedor */
.cat-envoltura { width: 100%; padding: 0 24px; }
.cat-carrusel { position: relative; }
/* Una tira que se desliza; el ancho de cada tarjeta lo fija el script
   según cuántas quepan enteras. */
.cat-rejilla {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 16px;
  /* Aire arriba y abajo para que el brinquito del hover y su sombra no se
     corten contra el borde de la tira */
  padding: 5px 0 12px;
  /* Sin scroll-snap ni scroll-behavior: pelean con el paseo automático,
     que mueve la tira pixel por pixel. Las flechas piden su propio suave. */
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  font-family: 'Outfit', Inter, sans-serif;
}
.cat-rejilla::-webkit-scrollbar { display: none; }

.cat-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(44,44,42,.08); background: #fff;
  color: var(--negro); font-size: 27px; line-height: 1; padding: 0 0 4px;
  box-shadow: 0 6px 20px rgba(44,44,42,.26);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.cat-flecha:hover {
  box-shadow: 0 9px 26px rgba(44,44,42,.34);
  transform: translateY(-50%) scale(1.07);
}
.cat-flecha.izq { left: 12px; }
.cat-flecha.der { right: 12px; }
/* La flecha que ya no lleva a ningún lado se quita: apagada estorba más
   de lo que ayuda */
.cat-flecha:disabled { opacity: 0; pointer-events: none; }
.cat-carrusel.sin-flechas .cat-flecha { display: none; }
/* En celular estorban: tapan un pedazo de la tarjeta y ahí se desliza con
   el dedo, que es lo natural */
@media (max-width: 700px) { .cat-flecha { display: none; } }
.cat-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 16px; background: var(--crema);
  transition: box-shadow .2s, transform .2s;
}
.cat-card:hover { box-shadow: 0 16px 38px rgba(44,44,42,.18); transform: translateY(-3px); }
.cat-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.cat-card:hover img { transform: scale(1.045); }
.cat-nombre {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(28,28,26,.78); color: #fff; border-radius: 10px;
  padding: 9px 12px; font-size: 14px; font-weight: 700; line-height: 1.25;
}
.cat-nombre small {
  display: block; margin-top: 1px;
  font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.75);
}

/* ════════════════════════════════════════════
   PORTADA (secciones interiores)
   ════════════════════════════════════════════ */
.portada {
  padding: 76px 0 64px;
  background: linear-gradient(180deg, var(--crema) 0%, #fff 100%);
}
.portada-cuerpo { max-width: 720px; }
.portada h1 { margin: 14px 0 20px; }
.portada p {
  font-size: 1.12rem; color: var(--gris); margin: 0 0 30px;
  max-width: 580px;
}
.portada-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--dorado); color: #fff;
  padding: 14px 30px; border-radius: 999px; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s, transform .1s;
}
.boton:hover { background: var(--dorado-oscuro); }
.boton:active { transform: translateY(1px); }
.boton:disabled { background: var(--borde); color: var(--gris-claro); cursor: default; }
.boton.secundario { background: #fff; color: var(--negro); border: 1.5px solid var(--borde); }
.boton.secundario:hover { background: var(--crema-claro); border-color: var(--dorado); }
.boton.ancho { width: 100%; }

/* Sellos de confianza bajo la portada */
.sellos {
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--borde);
}
.sello { display: flex; align-items: center; gap: 11px; }
.sello-icono { font-size: 21px; }
.sello-txt { font-size: 13px; line-height: 1.35; }
.sello-txt b { display: block; color: var(--negro); }
.sello-txt span { color: var(--gris-claro); font-size: 12px; }

/* ════════════════════════════════════════════
   SECCIONES
   ════════════════════════════════════════════ */
.seccion { padding: 68px 0; }
.seccion.crema { background: var(--crema-claro); }
.seccion-cabeza { margin-bottom: 34px; }
.seccion-cabeza h2 { margin: 10px 0 8px; }
.seccion-cabeza h2 em { font-style: normal; color: var(--dorado); }
.seccion-cabeza p { color: var(--gris); margin: 0; font-size: 15px; }

/* Cabecera con liga "Ver todo" al costado */
.seccion-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 28px;
}
.seccion-fila .seccion-cabeza { margin: 0; }
.ver-todo {
  flex-shrink: 0; padding-bottom: 6px;
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 13.5px; font-weight: 700; color: var(--gris);
}
.ver-todo:hover { color: var(--dorado); }

/* Chips de filtro en "Nuestros favoritos" */
.fav-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
  font-family: 'Outfit', Inter, sans-serif;
}
.fav-chip {
  padding: 8px 16px; cursor: pointer; border-radius: 999px;
  border: 1.5px solid var(--borde); background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gris);
}
.fav-chip:hover { border-color: var(--dorado); color: var(--negro); }
.fav-chip.activa { background: var(--negro); border-color: var(--negro); color: #fff; }

/* ── Personalizados: enmarcamos tus fotos ── */
.perso {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px; align-items: center;
  font-family: 'Outfit', Inter, sans-serif;
}
.perso-intro { color: var(--gris); font-size: 15.5px; line-height: 1.65; margin: 0 0 30px; max-width: 440px; }

.perso-pasos { list-style: none; margin: 0 0 32px; padding: 0; }
.perso-pasos li { position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
.perso-pasos li:last-child { padding-bottom: 0; }
/* La línea que cose un paso con el siguiente, como un hilo de la guía */
.perso-pasos li:not(:last-child)::before {
  content: ''; position: absolute; left: 21px; top: 48px; bottom: 4px;
  border-left: 2px solid var(--borde);
}
.perso-icono {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dorado); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.perso-icono svg { width: 20px; height: 20px; }
.perso-pasos b { display: block; font-size: 16px; margin: 10px 0 4px; }
.perso-pasos p { color: var(--gris); font-size: 14px; line-height: 1.55; margin: 0; max-width: 380px; }

/* La pared de "Enmarcamos tus fotos": cuatro escenas escalonadas, tres con
   cuadros colgados de verdad y la cuarta esperando la foto del cliente.

   Antes eran marcos dibujados con CSS —un borde de color alrededor de una
   lámina plana— y al lado del catálogo, que enseña salas de verdad, cantaban.
   Un marco dibujado no vende marcos. */
.perso-pared { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.perso-escena {
  position: relative; overflow: hidden;
  border-radius: 14px; background: var(--crema);
  aspect-ratio: 4 / 5;
  box-shadow: 0 2px 6px rgba(44, 44, 42, .06), 0 16px 34px rgba(44, 44, 42, .09);
}
.perso-escena img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.perso-escena:hover img { transform: scale(1.04); }

/* El escalonado: las dos de en medio desplazadas, para que la pared se lea
   como una pared colgada a mano y no como una tabla. */
.perso-pared .perso-escena:nth-child(2) { margin-top: 26px; }
.perso-pared .perso-escena:nth-child(3) { margin-top: -26px; }

/* El hueco que espera la foto del cliente. Sin sombra ni foto: es un sitio
   vacío a propósito, y lo vacío no se ilumina, se señala. */
.perso-tuya {
  display: grid; place-items: center;
  background: var(--crema-claro); box-shadow: none;
  border: 1.5px dashed var(--borde);
}
.perso-tuya span {
  display: grid; justify-items: center; gap: 9px;
  font-family: Outfit, Inter, sans-serif; font-size: 13px; font-weight: 600;
  color: var(--gris);
}
.perso-tuya svg { width: 26px; height: 26px; color: var(--dorado); }

@media (max-width: 940px) {
  .perso { grid-template-columns: 1fr; gap: 38px; }
  .perso-pared { max-width: 520px; }
}

/* ── La vitrina: el bloque de favoritos, sobre vidrio esmerilado ──
   El panel se ve traslúcido porque detrás hay manchas de color que el
   desenfoque revuelve; sobre un fondo plano, un backdrop-filter no se
   nota. Todo va contenido en la sección, que recorta lo que se salga. */
/* "Nuestros favoritos" iba sobre manchas de color desenfocadas y un panel
   de vidrio esmerilado. Se quitó: con las tarjetas blancas y limpias, el
   vidrio las dejaba lavadas y el degradado competía con las obras, que son
   lo único que esta sección tiene que enseñar. */
.vitrina-zona { position: relative; }

.vitrina {
  position: relative;
  padding: 34px 0 40px;
}
/* Las tarjetas de aquí son idénticas a las del catálogo: blancas y sólidas.
   Una sola tarjeta para toda la tienda es una tarjeta que se arregla una vez. */
.vitrina .fav-chip {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.8);
}
.vitrina .fav-chip:hover { background: rgba(255,255,255,.85); border-color: var(--dorado); }
.vitrina .fav-chip.activa { background: var(--negro); border-color: var(--negro); color: #fff; }
.vitrina .boton.secundario {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.85);
}
.vitrina .boton.secundario:hover { background: #fff; border-color: var(--dorado); }

@media (max-width: 700px) {
  .vitrina { padding: 22px 16px 28px; border-radius: 18px; }
}

/* ── Cómo funciona ── */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.paso-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--dorado); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; margin-bottom: 13px;
}
.paso h3 { margin-bottom: 6px; }
.paso p { color: var(--gris); font-size: 14px; margin: 0; }

/* ── Cuadrícula de obras ── */
.obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
}
/* La vitrina de la portada va apretada a propósito: caben hasta nueve por
   renglón en pantalla grande, para que se vea catálogo y no muestrario.
   El 186px de aquí es el mismo número con el que el script calcula cuántas
   pedir — si se cambia uno, se cambia el otro. */
.obras.densa {
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 18px;
}
.obras.densa .obra-marco { padding: 10px; }
.obras.densa .obra-info { padding: 10px 2px 0; }
.obras.densa .obra-titulo { font-size: 13px; }
.obras.densa .obra-precio { font-size: 12.5px; margin-top: 3px; }
/* Apretada no hay lugar para la descripción: título y precio, como en
   cualquier vitrina. Ahí se pasa mirando, no leyendo. */
.obras.densa .obra-meta { display: none; }
.obra { display: block; }
.obra-marco {
  /* El "marco" de la miniatura: no es decoración, es el producto. Un borde
     grueso y un fondo crema hacen que la imagen se lea como cuadro colgado y
     no como foto suelta. */
  position: relative;   /* la etiqueta de rebaja se cuelga de aquí */
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 15px;
  transition: box-shadow .2s, transform .2s;
}
.obra:hover .obra-marco { box-shadow: var(--sombra); transform: translateY(-3px); }
.obra-img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 4px; background: var(--crema);
}
.obra-info { padding: 13px 3px 2px; }
.obra-titulo {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* La descripción se corta a dos renglones: la que escribe la IA es para la
   ficha, y a lo largo hace tarjetas de nueve renglones desparejos. */
.obra-meta { font-size: 12.5px; color: var(--gris-claro); margin-top: 2px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Y en las tiras ni eso: título y precio, como en cualquier vitrina. Ahí se
   pasa mirando, no leyendo. */
.obra-precio { font-size: 13.5px; color: var(--dorado); font-weight: 600; margin-top: 5px; }

.vacio {
  text-align: center; padding: 70px 24px;
  color: var(--gris-claro); font-size: 15px;
  border: 1.5px dashed var(--borde); border-radius: var(--radio);
  background: var(--crema-claro);
}

/* ── Filtros ── */
.filtros {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.filtro {
  background: #fff; border: 1.5px solid var(--borde);
  border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: 500; color: var(--gris);
  cursor: pointer; font-family: inherit;
}
.filtro:hover { border-color: var(--dorado); color: var(--negro); }
.filtro.activo { background: var(--negro); border-color: var(--negro); color: #fff; }

.buscador {
  width: 100%; max-width: 380px;
  padding: 11px 17px; border: 1.5px solid var(--borde);
  border-radius: 999px; font-size: 14px; font-family: inherit;
  margin-bottom: 18px;
}
.buscador:focus { outline: none; border-color: var(--dorado); }

/* ════════════════════════════════════════════
   PÁGINA DE OBRA
   ════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   LA FICHA DEL PRODUCTO
   ══════════════════════════════════════════════════════════════════
   Dos columnas: la obra a la izquierda, la compra a la derecha. La de la
   compra se queda quieta y la de la obra se va con el scroll — al revés de lo
   que se suele hacer, pero es la obra la que se mira mientras se decide. */

/* La obra manda: se lleva más de la mitad. Es lo que se está comprando, y
   la columna de la derecha no necesita ancho —son botones y un precio. */
/* La obra manda: se lleva más de la mitad. Es lo que se está comprando, y
   la columna de la derecha no necesita ancho —son botones y un precio. */
.ficha { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
/* Las dos columnas son paneles sobre un fondo apenas gris. Es lo que las
   separa del resto sin dibujar cajas adentro de cajas. */
body.ficha-producto { background: #F6F5F1; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; gap: 22px; } }

/* ── La obra ── */
/* La que se queda quieta es LA OBRA, no la compra: la foto cabe siempre en
   pantalla —está topada a 64vh—, así que puede pegarse sin esconder nada,
   mientras las opciones corren con la página. Así el scroll es UNO, el de
   la página, y no existe el instante muerto de pasar de un scroll a otro:
   eso era lo que se sentía trabado. Es lo mismo que hace la referencia. */
.ficha-obra {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(44,44,42,.05), 0 8px 26px rgba(44,44,42,.05);
  padding: 22px;
}
@media (min-width: 901px) {
  .ficha-obra { position: sticky; top: 18px; }
}
.ficha-marco {
  position: relative;
  padding: 0 0 0 86px;
}
@media (max-width: 560px) { .ficha-marco { padding: 0; } .ficha-obra { padding: 16px; } }

/* ── El visor ──
   Una tira con todas las fotos que se corre con transform. No se cambia el
   `src` de una sola imagen porque entonces cada paso espera a que cargue la
   siguiente y parpadea; así ya están todas y el cambio es instantáneo. */
.visor {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  touch-action: pan-y;          /* deslizar de lado lo maneja el visor; hacia abajo, la página */
  cursor: grab;
  user-select: none;
}
.visor:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }
.visor.vacio {
  display: grid; place-items: center; min-height: 320px;
  color: var(--gris); font-size: .95rem; cursor: default;
}

.visor-tira { display: flex; transition: transform .32s cubic-bezier(.4,0,.2,1); }
.visor-lamina {
  flex: 0 0 100%; min-width: 100%;
  display: grid; place-items: center;
  min-height: 340px;
}
.visor-lamina img {
  max-width: 100%; max-height: 64vh; width: auto; height: auto; display: block;
  border-radius: 4px; box-shadow: 0 18px 44px rgba(44,44,42,.17);
  -webkit-user-drag: none;
}

.visor-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: none; border-radius: 50%;
  color: var(--negro); cursor: pointer;
  box-shadow: 0 3px 14px rgba(44,44,42,.18);
  transition: opacity .18s, background .18s;
}
.visor-flecha svg { width: 19px; height: 19px; }
.visor-flecha.izq { left: 10px; }
.visor-flecha.der { right: 10px; }
.visor-flecha:hover:not(:disabled) { background: #fff; color: var(--dorado); }
/* Se apagan en los extremos en vez de esconderse: si desaparecieran, el visor
   cambiaría de aspecto a media pasada. */
.visor-flecha:disabled { opacity: .28; cursor: default; }

/* El botón que avisa que la foto se puede ampliar. Aparece siempre en
   celular —donde no hay cursor que lo insinúe— y al pasar el ratón en
   escritorio. */
.visor-lupa {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: none; border-radius: 50%;
  color: var(--negro); cursor: zoom-in;
  box-shadow: 0 3px 14px rgba(44,44,42,.18);
  opacity: 0; transition: opacity .18s, background .18s;
}
.visor-lupa svg { width: 18px; height: 18px; }
.visor:hover .visor-lupa, .visor:focus-within .visor-lupa { opacity: 1; }
.visor-lupa:hover { background: #fff; color: var(--dorado); }
@media (hover: none) { .visor-lupa { opacity: 1; } }
.visor-lamina img { cursor: zoom-in; }

/* ── La lupa: la foto a pantalla completa ── */
.lupa {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(18,18,16,.94);
  display: grid; place-items: center;
  overscroll-behavior: contain;
  animation: lupa-entra .16s ease-out;
}
@keyframes lupa-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lupa { animation: none; } }

.lupa img {
  max-width: 94vw; max-height: 88vh;
  border-radius: 3px;
  cursor: zoom-in; touch-action: none;
  -webkit-user-drag: none; user-select: none;
  transition: transform .14s ease-out;
  will-change: transform;
}
/* Ya acercada, el cursor dice que ahora se arrastra */
.lupa.acercada img { cursor: grab; transition: none; }
.lupa.acercada img:active { cursor: grabbing; }

.lupa-cerrar {
  position: absolute; top: 16px; right: 18px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: none; border-radius: 50%;
  color: #fff; cursor: pointer; transition: background .15s;
}
.lupa-cerrar svg { width: 20px; height: 20px; }
.lupa-cerrar:hover { background: rgba(255,255,255,.26); }

.lupa-pie {
  position: absolute; bottom: 18px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,.72); font-size: 12.5px; font-weight: 600;
  font-family: 'Outfit', Inter, sans-serif; pointer-events: none;
}
.lupa-ayuda { font-weight: 400; font-size: 11.5px; color: rgba(255,255,255,.5); }
@media (max-width: 700px) { .lupa-ayuda { display: none; } }

.visor-cuenta {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(44,44,42,.72); color: #fff;
  border-radius: 999px; padding: 4px 11px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 11.5px; font-weight: 500;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.visor-cuenta b { font-weight: 700; }

@media (max-width: 560px) {
  .visor-lamina { min-height: 260px; }
  .visor-flecha { width: 34px; height: 34px; }
}


/* Los sellos, pegados al borde de la foto */
.obra-sellos {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  width: 78px; text-align: center;
}
@media (max-width: 560px) { .obra-sellos { display: none; } }
.obra-sellos > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.obra-sellos span {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: #fff; border-radius: 50%; color: var(--dorado);
  box-shadow: 0 2px 8px rgba(44,44,42,.09);
}
.obra-sellos svg { width: 19px; height: 19px; }
.obra-sellos b {
  font-family: 'Outfit', Inter, sans-serif; font-size: 10.5px; font-weight: 500;
  color: var(--gris); line-height: 1.3;
}

.miniaturas { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.miniatura {
  width: 72px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--crema); border: 2px solid transparent; border-radius: 10px;
  outline: 1px solid var(--borde);
}
.miniatura:hover { outline-color: var(--dorado); }
.miniatura.activa { border-color: var(--dorado); outline-color: var(--dorado); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

.obra-porques {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;
}
@media (max-width: 560px) { .obra-porques { grid-template-columns: repeat(2, 1fr); } }
.obra-porques > div {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 8px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 11.5px; font-weight: 500;
  color: var(--gris); text-align: center; line-height: 1.3;
}
.obra-porques svg { width: 18px; height: 18px; color: var(--dorado); }

/* ── La compra ──
   Las dos columnas son PANELES sobre un fondo apenas gris. Es lo que las
   separa del resto de la página sin dibujar cajas: adentro de cada panel las
   partes se dividen con una raya fina, no con más recuadros —eso encajona lo
   encajonado y se llena de bordes.

   Y hay UN solo scroll, el de la página. Antes esta columna se recorría por
   dentro, con su propia barra, y se sentía el brinco al pasar de un scroll al
   otro: es el precio de tener dos. */
.ficha-compra {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(44,44,42,.05), 0 8px 26px rgba(44,44,42,.05);
  padding: 26px 28px 28px;
}
/* Se pega arriba SOLO si cabe entera. Si no cabe —un cuadro con tres ejes en
   una laptop chica— se va con la página como cualquier otra cosa: pegarla ahí
   escondería justo lo de abajo, que es el botón de comprar. Lo decide
   acomodarColumna() en producto.html, midiendo. */
@media (max-width: 700px) { .ficha-compra { padding: 20px; } }

.ficha-coleccion {
  display: block; font-family: 'Outfit', Inter, sans-serif; font-size: 11.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 7px;
}
.ficha-titulo {
  font-family: 'Outfit', Inter, sans-serif; font-size: 1.95rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -.5px; margin: 0 0 6px; color: var(--negro);
}

/* El autor: discreto, porque lo que se compra es la obra, pero ligado a su
   catálogo. A quien le gusta un trazo casi siempre le gusta otro del mismo. */
.ficha-artista {
  display: inline-block; margin: 0 0 14px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 14px;
  color: var(--gris); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
.ficha-artista:hover { color: var(--dorado); border-bottom-color: var(--dorado); }

.ficha-sellos { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha-sellos span {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--crema); border-radius: 999px; padding: 6px 13px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 12px; font-weight: 500;
  color: var(--gris);
}
.ficha-sellos svg { width: 15px; height: 15px; color: var(--dorado); }

/* La raya que separa cada parte. Va de borde a borde del panel —de ahí los
   márgenes negativos— para que se lea como una división y no como un subrayado. */
.ficha-raya {
  border-top: 1px solid var(--borde);
  margin: 18px -28px; height: 0;
}
@media (max-width: 700px) { .ficha-raya { margin: 16px -20px; } }

/* ── El precio ── */
.precio-linea { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; }
.precio-grande {
  font-family: 'Outfit', Inter, sans-serif; font-size: 2.1rem; font-weight: 700;
  letter-spacing: -1px; color: var(--negro); line-height: 1;
}
.precio-antes { font-size: 1.05rem; color: var(--gris-claro); text-decoration: line-through; }
.precio-ahorro {
  background: #E8F3EC; color: #2f7350; border-radius: 999px; padding: 4px 11px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 12px; font-weight: 700;
}
.precio-pendiente { font-size: .95rem; color: var(--gris); line-height: 1.5; }
.precio-nota { font-size: 12px; color: var(--gris); margin-top: 6px; }

/* ── Las pestañas ── */
.ficha-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); }
.ficha-pestanas button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 13px; margin-bottom: -1px; cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 13.5px; font-weight: 500;
  color: var(--gris);
}
.ficha-pestanas button:hover { color: var(--negro); }
.ficha-pestanas button.activa { color: var(--negro); font-weight: 600; border-bottom-color: var(--dorado); }
.ficha-panel { padding: 14px 0 2px; font-size: 13.5px; line-height: 1.65; color: var(--gris); }

/* ── Los ejes ──
     Botones grandes, no un menú desplegable: lo que se puede comprar se tiene
     que poder ver de un vistazo, sin abrir nada. */
.config-grupo { margin-bottom: 15px; }
/* ── La muestra del acabado del marco ──
   Una foto chica bajo los botones del marco, que se abre en grande. Existe
   porque "Nogal" y "Pino" son palabras: quien nunca ha comprado un cuadro no
   sabe qué tan oscuro es un nogal, y ésa es la duda que frena la compra. */
.muestra-acabado {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 6px 12px 6px 6px;
  background: #fff; border: 1.5px solid var(--borde); border-radius: 11px;
  cursor: zoom-in; transition: border-color .16s;
  font-family: 'Outfit', Inter, sans-serif; font-size: 12px; color: var(--gris);
}
.muestra-acabado:hover { border-color: var(--dorado); color: var(--dorado); }
.muestra-acabado img {
  width: 62px; height: 40px; object-fit: cover;
  border-radius: 7px; background: var(--crema); display: block;
}

/* En grande. Visor propio y no el de la obra: aquel vive atado a las fotos
   del producto y aquí se enseña un acabado. */
.muestra-grande {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(26, 26, 25, .93);
  display: grid; place-items: center; padding: 28px;
  cursor: zoom-out;
}
.muestra-grande figure {
  margin: 0; cursor: default; text-align: center;
  max-width: min(860px, 92vw);
}
.muestra-grande img {
  max-width: 100%; max-height: 78vh;
  border-radius: 10px; display: block; margin: 0 auto;
}
.muestra-grande figcaption {
  margin-top: 14px; color: #fff;
  font-family: 'Outfit', Inter, sans-serif; font-size: 14px; font-weight: 500;
}
.muestra-cerrar {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
}
.muestra-cerrar:hover { background: rgba(255, 255, 255, .22); }
.muestra-cerrar svg { width: 20px; height: 20px; }

/* ── Las fotos del cliente en un set ──
   Los huecos se dibujan con la proporción REAL a la que se imprime cada foto,
   no cuadrados: así el cliente ve desde el primer momento que su foto vertical
   va a quedar vertical, antes de subir nada. */
/* ══════════ LAS VENTANAS DEL SET, QUE SON EL BOTÓN DE SUBIR ══════════

   El dibujo del set enseña los marcos vacíos; encima de cada uno va un botón
   que dice "Tu foto". Es lo que hace entender el producto sin leer: quien
   llega a la ficha ve nueve huecos pidiendo foto, no un catálogo con un botón
   de comprar apagado.

   Las cajas las coloca el JS en FRACCIONES de la imagen, y por eso la imagen
   necesita un envoltorio que se ciña a ella: dentro de .visor-lamina —que es
   una rejilla centrada— la foto casi nunca llena el hueco, así que un overlay
   pegado al hueco quedaría corrido respecto de los marcos. */
/* La lámina es el sistema de referencia de la capa: el JS le da a la capa la
   posición y el tamaño de la IMAGEN medidos en pantalla.

   Hubo una versión que envolvía la imagen en una caja ceñida a ella, y salió
   cara: el max-width: 100% de la imagen pasaba a medirse contra una caja cuyo
   ancho lo decidía la propia imagen —una pescadilla que el navegador resuelve
   ignorando el tope—, así que en un teléfono la foto se pintaba a su tamaño
   original y desbordaba la ficha entera, en TODOS los productos, no solo en
   los sets. */
.visor-lamina { position: relative; }
.sf-ventanas {
  position: absolute; display: block;
  /* La capa no intercepta nada: solo sus botones. Así el visor se sigue
     arrastrando y la lupa sigue abriéndose desde cualquier otro punto. */
  pointer-events: none;
}
.sf-ventanas[hidden] { display: none; }

.sf-ventana {
  position: absolute; pointer-events: auto;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; line-height: 1.2; border-radius: 3px;
  transition: background .16s;

  /* El distintivo va DEBAJO de la marca de agua, que vive en el centro de la
     ventana: al centro los dos peleaban por el mismo sitio y no se leía
     ninguno.

     El hueco se reserva con una FILA de rejilla al 62% y no con relleno,
     porque un relleno en porcentaje se mide contra el ANCHO del elemento y en
     un marco vertical bajaba la mitad de lo que parecía decir. Y los hijos se
     colocan a mano en las filas 2 y 3: la rejilla rellena desde la primera
     fila libre, así que sin decírselo se metían en el hueco reservado. */
  container-type: size;   /* lo que da sentido a los cqw de aquí abajo */
}

/* El rótulo no se coloca contra el MARCO sino contra el PAPEL, cuyo sitio
   manda el servidor en --fx/--fy/--fw/--fh: cuánto papel tapa la María Luisa
   cambia en cada set —5 cm en el de 40×40, 10 en el de 60×90— y un porcentaje
   fijo dejaba el "Tu foto" colgando fuera del papel en la mitad de ellos.

   Dentro del papel se apoya ABAJO, con un respiro: el logotipo vive arriba y
   así cada uno tiene su mitad. */
.sf-v-caja {
  position: absolute; left: var(--fx); top: var(--fy);
  width: var(--fw); height: var(--fh);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 3px; padding-bottom: 7%;
}
/* El marco vacío: el signo de más se ve siempre, no solo al pasar el ratón.
   En un teléfono no hay "pasar por encima", y es justo ahí donde hace falta
   que se note que el hueco se toca. */
/* El tamaño se mide contra EL MARCO y no en píxeles fijos: el mismo dibujo
   sirve para un set de dos marcos grandes y para uno de dieciséis chicos, y un
   círculo de 34 px que en el primero queda discreto en el segundo tapa la
   ventana entera. Con unidades de contenedor (cqw) el distintivo guarda
   siempre la misma proporción con su marco, y los topes evitan que se vuelva
   gigante en un set de dos o ilegible en uno de veinticuatro. */
.sf-ventana .sf-v-mas {
  width: clamp(17px, 17cqw, 27px); aspect-ratio: 1;
  border-radius: 50%; background: var(--dorado); color: #fff;
  display: grid; place-items: center;
  font-size: clamp(11px, 11cqw, 17px); line-height: 1;
  box-shadow: 0 2px 8px rgba(44, 44, 42, .20);
  transition: transform .16s;
}
.sf-ventana .sf-v-texto {
  font-family: Outfit, Inter, sans-serif; font-weight: 600;
  font-size: clamp(7.5px, 6.4cqw, 11px);
  color: var(--negro); text-align: center;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .85);
}

/* La × para quitar la foto: comparte caja con el marco y se coloca en su
   esquina. Va como hermano y no como hijo del botón del marco porque un botón
   dentro de otro no es HTML válido. */
.sf-v-quitar {
  position: absolute; pointer-events: none;
  border: 0; background: none; padding: 0;
  opacity: 0; transition: opacity .16s;
}
/* En la esquina del PAPEL, no en la del marco: en la del marco caía sobre la
   moldura, y sobre una moldura negra una pastilla gris oscuro no se ve. Las
   mismas variables que colocan el rótulo dicen dónde acaba el papel. */
.sf-v-quitar span {
  position: absolute;
  top: calc(var(--fy) + 3%);
  right: calc(100% - var(--fx) - var(--fw) + 3%);
}
.sf-v-quitar span {
  pointer-events: auto; cursor: pointer;
  width: clamp(16px, 15cqw, 22px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(28, 28, 26, .68); color: #fff;
  display: grid; place-items: center;
  font-size: clamp(11px, 10cqw, 15px); line-height: 1;
}
.sf-v-quitar span:hover { background: var(--rojo, #b3402f); }
.sf-ventana.puesta:hover + .sf-v-quitar, .sf-v-quitar:hover,
.sf-v-quitar:focus-within { opacity: 1; }
/* En táctil no hay "pasar por encima": ahí se queda visible o no habría cómo
   borrar una foto. */
@media (hover: none) { .sf-v-quitar { opacity: 1; } }
/* El latido del primer marco: dice "se empieza por aquí" sin una línea de
   texto más. Late el halo y no el botón —un botón que crece y encoge se lee
   como un fallo—, y se para solo en cuanto hay una foto (lo decide el JS).

   A quien pide menos animación en su sistema no se le mueve nada: para esa
   persona el mismo halo se queda quieto y encendido, que es la misma pista
   sin el movimiento. */
@keyframes sf-latido {
  0%, 100% { box-shadow: 0 2px 8px rgba(44, 44, 42, .20), 0 0 0 0 rgba(186, 117, 23, .45); }
  70%      { box-shadow: 0 2px 8px rgba(44, 44, 42, .20), 0 0 0 12px rgba(186, 117, 23, 0); }
}
.sf-ventana.late .sf-v-mas { animation: sf-latido 2.1s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sf-ventana.late .sf-v-mas {
    animation: none;
    box-shadow: 0 2px 8px rgba(44, 44, 42, .20), 0 0 0 4px rgba(186, 117, 23, .35);
  }
}

.sf-ventana:hover { background: rgba(186, 117, 23, .10); }
.sf-ventana:hover .sf-v-mas { transform: scale(1.08); }
.sf-ventana:focus-visible { outline: 2px solid var(--dorado); outline-offset: 1px; }

/* El marco que YA tiene foto: en reposo no se le pone nada encima —la foto
   del cliente es lo que se quiere mirar— y al pasar por encima aparece la
   invitación a reencuadrarla. */
.sf-ventana.puesta .sf-v-ajustar {
  font-family: Outfit, Inter, sans-serif; font-size: 11px; font-weight: 600;
  color: #fff; background: rgba(28, 28, 26, .72);
  padding: 5px 11px; border-radius: 999px;
  opacity: 0; transition: opacity .16s;
}
.sf-ventana.puesta:hover .sf-v-ajustar,
.sf-ventana.puesta:focus-visible .sf-v-ajustar { opacity: 1; }

/* ── El marcador de fotos, debajo del precio ──
   No es una alerta: es el segundo paso de la compra, y se ve como parte de la
   ficha. Por eso lleva el crema de la casa y no un color de aviso. */
.sf-avance:empty { display: none; }
.sf-avance {
  margin-top: 16px; padding: 13px 15px 14px;
  background: var(--crema-claro); border: 1.5px solid var(--borde);
  border-radius: 12px;
}
.sf-avance-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: Outfit, Inter, sans-serif;
}
.sf-avance-cabeza b { font-size: 14px; font-weight: 600; color: var(--negro); }
.sf-avance-cabeza span { font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.sf-avance p {
  margin: 9px 0 0; font-family: Outfit, Inter, sans-serif;
  font-size: 12.5px; line-height: 1.5; color: var(--gris);
}

/* Una marca por marco, no un porcentaje: "4 de 9" se ve de un vistazo y un
   44% no dice nada. */
.sf-barra { display: flex; gap: 4px; margin-top: 11px; }
.sf-marca {
  flex: 1 1 0; min-width: 0; height: 5px; border-radius: 3px;
  background: var(--borde); transition: background .2s;
}
.sf-marca.llena { background: var(--dorado); }

.set-fotos:empty { display: none; }
.set-fotos { margin-top: 20px; }
.set-fotos.sf-cargando { opacity: .55; pointer-events: none; }

/* ── El modal de «te vas con el set a medias» ──
   Reemplaza al cuadro del navegador, que no se puede estilizar ni traducir a
   lo que de verdad pasa aquí. Mismos radios, mismo dorado y misma tipografía
   que el resto de la tienda: si va a interrumpir, que al menos se vea de
   casa. */
.sf-salida {
  position: fixed; inset: 0; z-index: 1400;
  display: grid; place-items: center; padding: 20px;
  background: rgba(23, 23, 26, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sf-salida-entra .16s ease-out;
}
@keyframes sf-salida-entra { from { opacity: 0; } }
.sf-salida-caja {
  background: var(--crema-claro); border-radius: var(--radio);
  padding: 28px 26px 22px; max-width: 400px; width: 100%;
  box-shadow: 0 24px 60px rgba(44, 44, 42, .28);
  animation: sf-salida-sube .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sf-salida-sube { from { transform: translateY(10px); } }
.sf-salida-caja h3 {
  margin: 0 0 10px; font-size: 19px; color: var(--negro); font-weight: 600;
}
.sf-salida-caja p {
  margin: 0 0 10px; font-family: 'Outfit', Inter, sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--gris);
}
.sf-salida-fino { font-size: 12.5px !important; color: var(--gris-claro) !important; }
.sf-salida-botones {
  display: flex; gap: 10px; margin-top: 18px;
}
.sf-salida-botones button {
  flex: 1; padding: 11px 12px; border-radius: 9px; cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 13.5px;
}
/* El que sigue trabajando es el que pesa: es lo que el cliente casi siempre
   quiere de verdad cuando el clic fue un descuido. */
.sf-salida-quedarse {
  border: 0; background: var(--dorado); color: #fff; font-weight: 600;
}
.sf-salida-quedarse:hover { background: var(--dorado-oscuro); }
.sf-salida-salir {
  border: 1px solid var(--borde); background: none; color: var(--gris);
}
.sf-salida-salir:hover { border-color: var(--gris-claro); color: var(--negro); }
@media (max-width: 420px) {
  .sf-salida-botones { flex-direction: column-reverse; }
}

/* ── El editor de encuadre ──
   A pantalla completa porque encuadrar dentro de un recuadro de 92 px es
   imposible en un teléfono, que es donde la gente tiene sus fotos. */
.sf-editor {
  position: fixed; inset: 0; z-index: 1300;
  background: #17171a; display: flex; flex-direction: column;
}
.sf-editor-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; flex-shrink: 0;
  font-family: 'Outfit', Inter, sans-serif; font-size: 13.5px; color: #efece5;
}
.sf-editor-barra button {
  background: none; border: 0; color: #efece5; cursor: pointer;
  font-family: inherit; font-size: 14px; padding: 8px 12px; border-radius: 8px;
}
.sf-editor-barra .sf-listo { background: var(--dorado); color: #fff; font-weight: 600; }
.sf-editor-barra .sf-listo:hover { background: var(--oroOsc, #a3660f); }
.sf-editor-barra .sf-cancelar:hover { background: rgba(255,255,255,.1); }

.sf-lienzo {
  position: relative; flex: 1; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none;
}
.sf-lienzo:active { cursor: grabbing; }
.sf-original { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }

/* El recuadro del marco: lo de fuera se oscurece con una sombra enorme en vez
   de con cuatro capas, que es una sola regla y no se desalinea nunca. */
.sf-recuadro {
  position: absolute; pointer-events: none;
  border: 2px solid #fff; border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(23, 23, 26, .72);
}

.sf-zoom {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); flex-shrink: 0;
  font-family: 'Outfit', Inter, sans-serif; font-size: 12px; color: #a9a49a;
}
.sf-zoom button {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #efece5;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.sf-zoom button:hover { background: rgba(255,255,255,.22); }

@media (max-width: 520px) {
  .sf-hueco { width: 78px; }
}

/* El aviso de la María Luisa: un recuadro de información.

   El azul no está en la paleta de la tienda —que es dorado, crema y negro— y
   entra a propósito: es el único color de la ficha que no se usa para nada
   más, así que se lee como "esto es un dato, no parte del producto". Un
   dorado o un rojo aquí competirían con los botones o parecerían un error.

   Traslúcido y no un azul sólido para que no se despegue del fondo crema de
   la página. Y todo chico —11.5px, poco aire— porque es una nota: tiene que
   verse, no que pesar más que el precio.

   En Outfit y no en Inter porque vive DENTRO del configurador, entre los
   rótulos de los ejes. Con la tipografía del cuerpo se leía como un párrafo
   del artículo que se coló en medio de los botones. */
.aviso-ml {
  margin-top: 10px;
  padding: 7px 10px 7px 26px;
  position: relative;
  border: 1px solid rgba(58, 110, 165, 0.22);
  background: rgba(58, 110, 165, 0.06);
  border-radius: 8px;
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: #4a6b8f;
}
/* El icono va en CSS y no en el HTML: es decoración, y en el marcado
   acabaría leyéndolo un lector de pantalla como si fuera texto. */
.aviso-ml::before {
  content: 'i';
  position: absolute; left: 9px; top: 7px;
  width: 12px; height: 12px;
  border: 1px solid rgba(58, 110, 165, 0.5);
  border-radius: 50%;
  font-size: 9px; font-weight: 600; font-style: italic;
  line-height: 12px; text-align: center;
  color: rgba(58, 110, 165, 0.85);
}
.aviso-ml b { color: #2f5680; font-weight: 600; }
.config-grupo:last-child { margin-bottom: 0; }
.config-titulo {
  font-family: 'Outfit', Inter, sans-serif; font-size: 13px; font-weight: 500;
  color: var(--gris); margin-bottom: 8px;
}
.config-titulo b { color: var(--negro); font-weight: 600; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  background: #fff; border: 1.5px solid var(--borde); border-radius: 11px;
  padding: 11px 17px; cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 14px; font-weight: 500;
  color: var(--negro); line-height: 1.25; text-align: center;
}
.opcion:hover { border-color: var(--dorado); }
.opcion.activa { border-color: var(--dorado); background: #FDF6E9; font-weight: 600; }
.opcion small { display: block; font-size: 11.5px; color: var(--gris); margin-top: 2px; }
.opcion.activa small { color: #8a5a12; }

/* El desplegable, para los ejes con muchas opciones (nueve cantidades de
   marcos se desbordaban a dos renglones de botones y se leían como un muro).
   Mismo borde, mismo radio y misma tipografía que un botón de opción: cambia
   la forma de elegir, no el aspecto de la ficha.

   `appearance: none` porque el select nativo de Windows y el de macOS no se
   parecen en nada, y el de Windows rompe el radio de 11 px. La flecha se
   dibuja con un SVG de fondo. */
.config-lista { display: flex; }
.opcion-lista {
  flex: 1; min-width: 0; max-width: 320px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: #fff; border: 1.5px solid var(--borde); border-radius: 11px;
  padding: 12px 40px 12px 17px; cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 14px; font-weight: 600;
  color: var(--negro); line-height: 1.25;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
}
.opcion-lista:hover { border-color: var(--dorado); }
.opcion-lista:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

/* ── El cierre ──
     Éste sí lleva fondo: es el bloque en el que se ACTÚA, y tiene que verse
     distinto de los que solo se leen. */
/* Separado de las opciones: es donde se actúa, y pegado a los botones de
   arriba se leía como un renglón más de opciones. */
.ficha-cierre { background: var(--crema); border-radius: 12px; padding: 15px 16px;
  margin-top: 20px; }
.cantidad-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 12px; font-family: 'Outfit', Inter, sans-serif; font-size: 13px;
  color: var(--gris);
}
.cantidad { display: flex; align-items: center; gap: 2px; background: #fff;
  border: 1px solid var(--borde); border-radius: 10px; padding: 3px; }
.cantidad button {
  width: 32px; height: 32px; background: none; border: none; border-radius: 8px;
  font-size: 17px; color: var(--negro); cursor: pointer;
}
.cantidad button:hover { background: var(--crema); }
.cantidad span { min-width: 30px; text-align: center; font-weight: 600; font-size: 14px; }

.ficha-cierre .boton.ancho { width: 100%; padding: 15px; font-size: 15px; border-radius: 12px; }
.ficha-cierre .boton.ancho:disabled { opacity: .5; cursor: default; }

.ficha-tranquilidad {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--gris);
}
.ficha-tranquilidad svg { width: 17px; height: 17px; flex-shrink: 0; color: #2f7350; margin-top: 1px; }
.ficha-tranquilidad b { color: var(--negro); }

/* ── Las molduras del configurador a la medida ──
   Se eligen viendo la foto, no leyendo el modelo. Siguen como estaban: esta
   parte de la ficha no cambió. */
.molduras { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.moldura {
  border: 2px solid transparent; border-radius: 10px;
  padding: 0; background: none; cursor: pointer; overflow: hidden;
}
.moldura img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.moldura.activa { border-color: var(--dorado); }
.moldura-nom { font-size: 10.5px; color: var(--gris-claro); padding: 4px 2px 2px; text-align: center; }

/* Los renglones de precio del CARRITO y de la pantalla de gracias. Viven aquí
   por historia; la ficha ya no los usa. */
.precio-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--gris); padding: 3px 0; }
.precio-fila.total {
  border-top: 1px solid var(--borde); margin-top: 10px; padding-top: 13px;
  font-size: 15px; color: var(--negro);
}

.garantias {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--borde);
}
.garantias div { display: flex; flex-direction: column; }
.garantias b { font-family: 'Outfit', Inter, sans-serif; font-size: 13px; color: var(--negro); }
.garantias span { font-size: 12px; color: var(--gris-claro); }

.aviso {
  background: #FBF6EC; border: 1px solid rgba(186,117,23,.3);
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; color: #8a5a12; margin-top: 12px;
}
.aviso.error { background: #fbeae7; border-color: rgba(179,64,47,.3); color: var(--rojo); }

/* ════════════════════════════════════════════
   CARRITO Y PAGO
   ════════════════════════════════════════════ */
.carrito-linea {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}
.carrito-linea img {
  width: 82px; height: 100px; object-fit: cover;
  border-radius: 8px; background: var(--crema); flex-shrink: 0;
}
.carrito-info { flex: 1; min-width: 0; }
.carrito-tit { font-weight: 600; font-size: 15px; }
.carrito-desc { font-size: 12.5px; color: var(--gris-claro); margin-top: 3px; line-height: 1.5; }
.carrito-precio { font-weight: 700; font-size: 15px; white-space: nowrap; }
.quitar {
  background: none; border: none; color: var(--gris-claro);
  font-size: 12.5px; cursor: pointer; padding: 4px 0; font-family: inherit;
  text-decoration: underline;
}
.quitar:hover { color: var(--rojo); }
/* El bote de basura: icono sin subrayado, rojo al pasarle encima. */
.quitar.bote { display: inline-flex; align-items: center; padding: 4px; text-decoration: none; }

.pago-rejilla { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 860px) { .pago-rejilla { grid-template-columns: 1fr; } }

/* ── El carrito a lo grande (mismo esqueleto que las tiendas grandes,
      con nuestra paleta) ── */
.carrito-tarjeta {
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 8px 20px 12px;
}
.envio-banner {
  background: #FBF6EC; border-radius: 10px;
  margin: 12px 0 2px; padding: 13px 16px;
  font-size: 14px; color: var(--negro);
}
.envio-banner b { color: var(--verde); }
.surtido-por {
  padding: 12px 2px 2px; font-size: 13px; color: var(--gris); font-weight: 600;
}
.surtido-por b { color: var(--negro); }
.chips-linea { display: flex; gap: 6px; margin-bottom: 5px; }
.chip-mini {
  font-size: 10.5px; font-weight: 700; padding: 2.5px 8px; border-radius: 4px;
  background: var(--crema); color: var(--gris);
}
.chip-mini.dorado { background: #FBF6EC; color: var(--dorado); }
.carrito-abajo { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.carrito-abajo .punto { color: var(--gris-claro); }
.quitar.dorada { color: var(--dorado); font-weight: 600; }
.carrito-linea:last-child { border-bottom: none; }

/* ── El resumen: botón arriba, banner de ahorro y sesión ── */
.resumen .boton { margin-bottom: 8px; }
.resumen-banner {
  background: var(--negro); color: #fff; border-radius: 10px;
  padding: 12px 15px; font-size: 13px; margin: 4px 0 6px; line-height: 1.5;
}
.resumen-banner b { color: #FFD89B; }
.sesion-linea {
  text-align: center; font-size: 12.5px; color: var(--gris);
  padding: 7px 0 11px; border-bottom: 1px solid var(--borde); margin-bottom: 9px;
}
.sesion-linea a { color: var(--dorado); font-weight: 600; text-decoration: underline; }
.precio-fila.ahorro { color: var(--verde); font-weight: 700; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--borde); border-radius: 10px;
  /* 16px o más: con menos, el navegador del celular hace zoom al enfocar */
  font-size: 16px; font-family: inherit; color: var(--negro);
  background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--dorado);
}
.campo-fila { display: flex; gap: 12px; }
.campo-fila .campo { flex: 1; }

.resumen {
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px;
  position: sticky; top: 92px;
}

/* ════════════════════════════════════════════
   PIE
   ════════════════════════════════════════════ */
.pie {
  background: var(--negro); color: var(--crema);
  padding: 50px 0 26px; margin-top: 70px;
  /* La misma letra moderna del menú (Outfit) para todo el pie. */
  font-family: 'Outfit', Inter, sans-serif;
}
.guia-caja { font-family: 'Outfit', Inter, sans-serif; }

/* ── Contacto con sus iconos, y los sellos de pago ── */
.pie-redes { display: flex; gap: 12px; margin-top: 16px; }
/* `.pie .pie-redes` y no solo `.pie-redes`: más abajo hay un
   `.pie a { display: block }` que, con la misma especificidad y estando
   después, le ganaba al inline-flex — y sin flex el icono se iba a la
   izquierda por más que el círculo dijera "centrado". */
.pie .pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.09); color: var(--crema);
  font-size: 0; line-height: 0;
}
.pie .pie-redes img { width: 16px; height: 16px; display: block; opacity: .9; }
.pie .pie-redes a:hover img { opacity: 1; }
.pie .pie-redes a:hover { background: var(--dorado); }
.pie-dato {
  display: flex !important; align-items: flex-start; gap: 8px;
  font-size: 13px !important; line-height: 1.5;
}
.pie-dato svg { flex-shrink: 0; margin-top: 2px; color: var(--dorado); }
.pie-pagos-tit {
  margin: 18px 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: #85827b;
}
/* Los sellos, todos del mismo set (flat-rounded) y a la misma altura. */
.pie-pagos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pago-icono { height: 32px; width: auto; border-radius: 5px; display: block; }
.pie-abajo-ligas { display: flex; gap: 18px; }
.pie-abajo-ligas a { color: #85827b; }
.pie-abajo-ligas a:hover { color: var(--crema); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.35fr; gap: 34px; }
@media (max-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .pie-rejilla { grid-template-columns: 1fr; gap: 24px; } }
.pie img { height: 30px; margin-bottom: 14px; }
.pie p { font-size: 13.5px; color: #b8b5ac; margin: 0; max-width: 320px; }
.pie h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--dorado); margin: 0 0 12px; }
.pie a { display: block; font-size: 13.5px; color: #b8b5ac; padding: 3px 0; }
.pie a:hover { color: var(--crema); }
.pie-abajo {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 34px; padding-top: 20px;
  font-size: 12px; color: #85827b;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* ── WhatsApp flotante ── */
.wa-flota {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  font-size: 27px;
}
/* El pulso: un aro verde que respira detrás del botón cada dos segundos.
   Llama al ojo sin taparle nada a nadie. */
.wa-flota::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; z-index: -1;
  animation: waPulso 2s ease-out infinite;
}
@keyframes waPulso {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.wa-flota:hover { transform: scale(1.05); }

/* ── Utilidades ── */
.cargando { text-align: center; padding: 60px; color: var(--gris-claro); }
.oculto { display: none !important; }
.centrado { text-align: center; }

/* ════════════════════════════════════════════
   CATEGORÍAS (portada)
   ════════════════════════════════════════════ */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.categoria {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px 22px;
  transition: border-color .15s, transform .15s;
}
.categoria:hover { border-color: var(--dorado); transform: translateY(-2px); }
.categoria-nom { font-size: 15px; font-weight: 600; color: var(--negro); }
.categoria-num { font-size: 12.5px; color: var(--gris-claro); }

/* ── Filtros y paginación del catálogo ── */
.filtro-num { opacity: .55; font-size: 11.5px; margin-left: 3px; }
.filtro:disabled { opacity: .4; cursor: default; }
.paginacion {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; margin-top: 40px;
  font-family: 'Outfit', Inter, sans-serif;
}
.paginacion-txt { font-size: 13px; color: var(--gris); }

.pagina {
  min-width: 38px; height: 38px; padding: 0 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--negro);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s, color .15s;
}
.pagina:hover:not(:disabled):not(.activa) { border-color: var(--dorado); color: var(--dorado); }
.pagina.activa { background: var(--negro); border-color: var(--negro); color: #fff; cursor: default; }
.pagina.flecha { font-size: 18px; line-height: 1; padding-bottom: 3px; }
.pagina:disabled { opacity: .35; cursor: default; }
.pagina-puntos { padding: 0 2px; color: var(--gris-claro); user-select: none; }

/* En la galería caben menos por fila que en la portada: la barra de filtros
   se lleva su ancho. La rejilla mide 1340 px en pantalla grande, así que con
   170 de mínimo salen SIETE de 176 —y no se brinca a seis por unos pixeles de
   diferencia, como pasaba con 200—. En una pantalla angosta salen menos por
   fila y más filas; el total por página no cambia. */
.plp-cuerpo .obras.densa { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.obra-img.sin-foto {
  display: flex; align-items: center; justify-content: center;
  background: var(--crema); color: var(--gris-claro);
}

/* ════════════════════════════════════════════
   FICHA DE PRODUCTO
   ════════════════════════════════════════════ */
.miga { font-size: 12.5px; color: var(--gris-claro); padding: 20px 0 0; }
.miga a { color: var(--gris); }
.miga a:hover { color: var(--dorado); }

/* ════════════════════════════════════════════
   CARRITO
   ════════════════════════════════════════════ */
.carrito-sinfoto {
  width: 82px; height: 100px; border-radius: 8px;
  background: var(--crema); flex-shrink: 0;
}
.carrito-acciones { display: flex; align-items: center; gap: 14px; margin-top: 9px; }

/* El empujón para alcanzar el envío gratis. Sube el ticket promedio más que
   ninguna otra cosa en una tienda así, y aquí es un dato real: sale del mismo
   umbral que se configuró en el panel. */
.empujon {
  background: #FBF6EC; border: 1px solid rgba(186,117,23,.3);
  border-radius: 9px; padding: 9px 12px; margin: 9px 0 3px;
  font-size: 12.5px; color: #8a5a12; text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   LA TIRA DE RECOMENDADOS
   ══════════════════════════════════════════════════════════════════
   En rejilla, cuatro cuadros ocupan una pantalla entera y el cliente que venía
   a comprar ÉSTE se pone a bajar. En tira caben ocho a la vista, se pasan sin
   salirse de su renglón, y el que ya decidió sigue con lo suyo. */

/* Acotado a esta seccion: .seccion-cabeza ya la usan la galeria y la
   portada, y ahi no lleva flechas al lado. */
/* ── Las sugerencias de la ficha ──
   Cinco, más chicas que las del catálogo y con la tarjeta MARCADA.

   En la rejilla normal se veían como una continuación de la ficha: el borde
   de --borde contra el fondo claro de esta sección casi no existe, y sin un
   contorno claro cinco obras seguidas se leen como un collage, no como cinco
   productos distintos que se pueden abrir. Aquí el borde sube de tono y la
   tarjeta lleva una sombra mínima, lo suficiente para despegarla del fondo.

   Cinco columnas fijas y no auto-fill: son exactamente cinco obras, y con
   auto-fill sobraría un hueco en las pantallas donde caben seis. */
#relacionados {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
#relacionados .obra-marco {
  padding: 14px;
  border-color: #d5cfc0;
  box-shadow: 0 1px 3px rgba(44, 44, 42, .05);
}
#relacionados .obra-info { padding: 10px 2px 0; }
#relacionados .obra-titulo { font-size: 13px; }
#relacionados .obra-artista { font-size: 11.5px; }
#relacionados .obra-precio { font-size: 12.5px; }
#relacionados .obra-desde { font-size: 10.5px; }
/* El botón de la tarjeta grande no cabe a este tamaño sin verse apretado, y
   la tarjeta entera ya es un enlace: quitarlo no quita ninguna acción. */
#relacionados .obra-boton { display: none; }

@media (max-width: 1100px) { #relacionados { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { #relacionados { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

#seccion-relacionados .seccion-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
#seccion-relacionados .seccion-cabeza h2 { font-size: 1.4rem; margin: 0; }



/* La rebaja, donde se ve antes que nada */
.obra-rebaja {
  position: absolute; left: 0; top: 12px; z-index: 2;
  background: var(--dorado); color: #fff;
  border-radius: 0 999px 999px 0; padding: 4px 11px 4px 10px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em;
}
.obra-antes { color: var(--gris-claro); text-decoration: line-through; font-weight: 400; margin-left: 7px; }

.obra-precio.sin-precio { color: var(--gris-claro); font-weight: 500; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════
   LA CINTA DE PROMESAS
   ══════════════════════════════════════════════════════════════════
   Las cuatro dudas que frenan a quien nunca ha comprado un cuadro en línea:
   y si no me gusta, cuánto sale el envío, con quién hablo, con qué está hecho.
   Va al final, cuando ya se miró el cuadro y falta decidirse. */

.cinta-promesas { padding: 44px 0 52px; background: #F6F5F1; }
/* En la ficha el fondo de la página ya es ese gris; ahí la cinta se separa
   con una raya en vez de repetir el mismo tono contra sí mismo. */
body.ficha-producto .cinta-promesas { background: transparent; border-top: 1px solid var(--borde); }

.promesas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 1000px) { .promesas { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px) { .promesas { grid-template-columns: 1fr; gap: 20px; } }

.promesa { display: flex; align-items: flex-start; gap: 14px; }
.promesa-icono {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--dorado);
}
.promesa-icono svg { width: 32px; height: 32px; }

.promesa h4 {
  font-family: 'Outfit', Inter, sans-serif; font-size: 15px; font-weight: 600;
  color: var(--negro); margin: 2px 0 5px; letter-spacing: -.01em;
}
.promesa p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gris);
}
.promesa a { color: var(--dorado); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.promesa a:hover { color: var(--dorado-oscuro); }

/* ══════════════════════════════════════════════════════════════════
   LA GALERÍA CON FILTROS
   ══════════════════════════════════════════════════════════════════
   Los filtros a la izquierda, siempre a la vista, y la mercancía a la
   derecha. Casillas y no botones de una sola elección: se miran dos o tres
   colecciones juntas, que es como se compra. */

.plp { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .plp { grid-template-columns: 1fr; gap: 14px; } }

.plp-lado { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) {
  .plp-lado { position: static; display: none; }
  .plp-lado.abierto { display: flex; }
}

.plp-abrir-filtros {
  display: none; align-items: center; gap: 8px; justify-content: center;
  background: #fff; border: 1.5px solid var(--borde); border-radius: 11px;
  padding: 11px; font-family: 'Outfit', Inter, sans-serif; font-size: 14px;
  font-weight: 600; color: var(--negro); cursor: pointer;
}
@media (max-width: 860px) { .plp-abrir-filtros { display: flex; } }
.plp-abrir-filtros span {
  background: var(--dorado); color: #fff; border-radius: 999px;
  min-width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 11.5px;
}

.plp-caja {
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px 15px;
}
.plp-caja h4 {
  font-family: 'Outfit', Inter, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 10px;
}

.plp-buscador {
  width: 100%; border: 1.5px solid var(--borde); border-radius: 9px;
  padding: 9px 12px; font-family: inherit; font-size: 13.5px; background: #fff;
}
.plp-buscador:focus { outline: none; border-color: var(--dorado); }

/* Las casillas, con su cuenta al final del renglón */
.plp-lista { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; }
.plp-casilla {
  display: flex; align-items: center; gap: 9px; padding: 6px 7px;
  border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--negro);
}
.plp-casilla:hover { background: #fff; }
.plp-casilla input {
  appearance: none; width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--borde); border-radius: 5px; background: #fff;
  cursor: pointer; display: grid; place-items: center;
}
.plp-casilla input:checked { background: var(--dorado); border-color: var(--dorado); }
.plp-casilla input:checked::after {
  content: ''; width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.plp-casilla span { flex: 1; line-height: 1.3; }
.plp-casilla i { font-style: normal; font-size: 11px; color: var(--gris-claro); }

/* El rango de precio: dos deslizadores encimados sobre el mismo riel */
.plp-precio-textos {
  display: flex; justify-content: space-between; font-size: 13px;
  font-weight: 600; color: var(--negro); margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.plp-rango { position: relative; height: 22px; }
.plp-rango-riel {
  position: absolute; left: 0; right: 0; top: 9px; height: 4px;
  background: var(--borde); border-radius: 2px;
}
.plp-rango-lleno { position: absolute; top: 0; height: 100%; background: var(--dorado); border-radius: 2px; }
.plp-rango input[type=range] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%;
  appearance: none; background: none; pointer-events: none; height: 22px; margin: 0;
}
.plp-rango input[type=range]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; cursor: grab;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--dorado);
  box-shadow: 0 1px 4px rgba(44,44,42,.25);
}
.plp-rango input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--dorado);
}

/* Las bolitas de color */
.plp-colores { display: flex; flex-wrap: wrap; gap: 6px; }
.plp-color {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--borde); border-radius: 999px;
  padding: 5px 11px 5px 6px; font-family: inherit; font-size: 12px;
  color: var(--negro); cursor: pointer;
}
.plp-color span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(44,44,42,.15);
}
.plp-color:hover { border-color: var(--dorado); }
.plp-color.activo { border-color: var(--dorado); background: #FDF6E9; font-weight: 600; }

.plp-favoritos {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; padding: 2px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--negro);
}
.plp-favoritos .corazon { color: #c94a4a; font-size: 15px; }
.plp-favoritos b {
  margin-left: auto; background: var(--crema); border-radius: 999px;
  padding: 2px 9px; font-size: 11.5px; color: var(--gris);
}
.plp-favoritos.activo b { background: var(--dorado); color: #fff; }

.plp-limpiar {
  background: none; border: none; padding: 4px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--gris); text-decoration: underline; text-underline-offset: 3px;
}
.plp-limpiar:hover { color: var(--rojo); }

/* La barra de arriba de la mercancía */
.plp-barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.plp-barra p { margin: 0; font-size: 13px; color: var(--gris); }
.plp-barra b { color: var(--negro); }
.plp-orden {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--gris);
}
.plp-orden select {
  border: 1.5px solid var(--borde); border-radius: 9px; padding: 7px 10px;
  font-family: inherit; font-size: 13px; color: var(--negro); background: #fff;
  cursor: pointer;
}
.plp-orden select:focus { outline: none; border-color: var(--dorado); }

/* El corazón de cada tarjeta */
.obra-fav {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: rgba(255,255,255,.93); border: none; border-radius: 50%;
  cursor: pointer; box-shadow: 0 1px 6px rgba(44,44,42,.14);
}
.obra-fav svg {
  width: 16px; height: 16px; fill: none;
  stroke: var(--gris); stroke-width: 1.8;
  transition: fill .15s, stroke .15s, transform .15s;
}
.obra-fav:hover svg { stroke: #c94a4a; }
.obra-fav.activo svg { fill: #c94a4a; stroke: #c94a4a; transform: scale(1.08); }

/* ══════════════════════════════════════════════════════════════════
   OBSIDIANA — el encabezado
   ══════════════════════════════════════════════════════════════════
   La barra negra con la búsqueda al centro, el listón con el menú del panel
   debajo, y el hover que enmarca: las esquinas del logotipo se le ponen a
   cada renglón al pasar el ratón. Elegido por el dueño sobre tres
   propuestas; la barra de anuncios quedó intacta. */

.encabezado {
  background: rgba(255, 255, 255, .97);
  border-bottom: none;
}
.encabezado-fila {
  grid-template-columns: auto 1fr auto;
  gap: 26px; height: 76px;
}
.logo img { height: 38px; }

/* Los iconos, sobre fondo claro */
.encabezado .icono-btn { color: var(--negro); }
.encabezado .icono-btn:hover { background: var(--crema); color: var(--negro); }
.encabezado .hamburguesa span { background: var(--negro); }

/* ── La búsqueda, protagonista ── */
.ob-buscar {
  display: flex; align-items: center; gap: 11px;
  /* Crema y no crema-claro: sobre blanco, el claro no se distinguía del fondo
     y la caja de búsqueda desaparecía. */
  background: var(--crema); border: 1.5px solid transparent;
  border-radius: 999px; padding: 0 18px; height: 46px;
  width: 100%; max-width: 520px; margin: 0 auto;
  color: var(--gris); transition: border-color .18s;
}
.ob-buscar:focus-within { border-color: var(--dorado); }
.ob-buscar input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--negro);
}
.ob-buscar input::placeholder { color: var(--gris-claro); }
.ob-buscar input::-webkit-search-cancel-button { display: none; }
.ob-buscar kbd {
  font-family: 'Inter', sans-serif; font-size: 11px; color: var(--gris-claro);
  border: 1px solid var(--borde); border-radius: 6px; padding: 1px 7px;
}

/* ── Explorar y su panel oscuro ── */

/* ── El listón: el menú del panel, con el hover que enmarca ── */
.liston {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  /* Blanco, con línea arriba y abajo. Se probó dándole un tono para separarlo
     del encabezado, pero eso fue mientras la portada era blanca también: ahora
     que la portada lleva crema, el listón teñido metía un tercer valor entre
     dos superficies que ya se distinguen solas. */
  background: #fff;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 6px 24px;
}
.liston .menu-liga {
  position: relative; padding: 9px 16px; border-bottom: none;
  font-size: 14px; color: var(--gris);
}
.liston .menu-liga::before, .liston .menu-liga::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  border: 2px solid var(--dorado); opacity: 0; transform: scale(.5);
  transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.liston .menu-liga::before { left: 2px; top: 2px; border-right: none; border-bottom: none; }
.liston .menu-liga::after { right: 2px; bottom: 2px; border-left: none; border-top: none; }
.liston .menu-liga:hover, .liston .menu-liga.abierto {
  color: var(--negro); border-bottom: none;
}
.liston .menu-liga:hover::before, .liston .menu-liga:hover::after,
.liston .menu-liga.abierto::before, .liston .menu-liga.abierto::after {
  opacity: 1; transform: scale(1);
}
/* Los submenús del listón cuelgan de su renglón, como siempre */
.liston .menu-con-hijos > .submenu { left: 50%; transform: translate(-50%, -4px); }
.liston .menu-con-hijos:hover > .submenu,
.liston .menu-con-hijos:focus-within > .submenu { transform: translate(-50%, 0); }

/* El mega de siempre se cuelga debajo del encabezado completo */
.encabezado { position: sticky; }

/* ── Teléfono: barra compacta, la guía hace de buscador ── */
.solo-movil { display: none !important; }
@media (max-width: 940px) {
  .ob-buscar, .liston { display: none; }
  .solo-movil { display: inline-flex !important; }
  .encabezado-fila { grid-template-columns: auto 1fr auto; height: 64px; }
  .logo { justify-self: start; }
  .logo img { height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   TARJETA DEL CATÁLOGO
   Estructura de la referencia: sello arriba, la foto en su caja
   blanca, y debajo precio grande, categoría, título y botón ancho.

   Sin estrellas ni puntos: no hay valoraciones en la tienda ni
   programa de puntos, y pintarlos sería decorar con datos falsos.
   ═══════════════════════════════════════════════════════════════ */

.obra { display: block; height: 100%; }

/* La foto vive en su propia caja con aire alrededor: un cuadro
   pegado al borde se lee como un banner, no como una obra. */
.obra-marco {
  position: relative;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 26px 22px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.obra:hover .obra-marco {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  border-color: #cfcabb;
}
.obra-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  /* La sombra hace que la lámina se despegue del fondo blanco y se
     lea como un objeto y no como un recorte pegado. */
  filter: drop-shadow(0 6px 16px rgba(44,44,42,.13));
}

/* ── El sello, arriba a la derecha ── */
.obra-sello {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  line-height: 1; white-space: nowrap;
}
.obra-sello.rebaja    { background: var(--verde); color: #fff; }
.obra-sello.destacado { background: var(--dorado); color: #fff; }

/* ── El corazón, arriba a la izquierda ── */
.obra-fav {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: #fff; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.obra-fav svg { width: 17px; height: 17px; fill: none; stroke: var(--gris); stroke-width: 1.7; }
.obra-fav:hover { border-color: var(--negro); transform: scale(1.06); }
.obra-fav.activo svg { fill: var(--rojo); stroke: var(--rojo); }

/* ── Lo de debajo de la foto ── */
.obra-info { padding: 14px 2px 0; }

/* El precio anterior va ENCIMA y tachado: así el número que importa
   se queda solo en su renglón y se lee de un vistazo. */
.obra-antes {
  font-size: 12.5px; color: var(--gris-claro);
  text-decoration: line-through; line-height: 1.2; margin-bottom: 1px;
}
.obra-precio {
  font-family: Outfit, Inter, sans-serif;
  font-size: 21px; font-weight: 700; color: var(--negro);
  line-height: 1.15; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.obra-precio.sin-precio { font-size: 14px; font-weight: 500; color: var(--gris-claro); }

.obra-cat {
  font-size: 12px; color: var(--gris-claro);
  margin-top: 7px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obra-titulo {
  font-size: 14.5px; font-weight: 600; color: var(--negro);
  margin-top: 1px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.obra:hover .obra-titulo { color: var(--dorado); }

/* El botón ancho. No añade al carrito porque un cuadro se pide con
   medida y acabado: lleva a elegirlos, que es el paso siguiente de
   verdad. Es un <span> y no un <a> porque la tarjeta entera ya es
   un enlace y anidar dos rompe el HTML. */
.obra-boton {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: #fff; color: var(--negro);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.obra-boton i { font-style: normal; font-size: 16px; line-height: 1; color: var(--gris); }
.obra:hover .obra-boton {
  background: var(--negro); border-color: var(--negro); color: #fff;
}
.obra:hover .obra-boton i { color: #fff; }

/* ── La cuadrícula densa (tiras de la portada) ──
   Ahí no caben ni el botón ni la categoría: son tarjetas chicas y
   apretarlas más las vuelve ilegibles. */
.obras.densa .obra-marco  { padding: 14px; }
.obras.densa .obra-info   { padding: 10px 2px 0; }
.obras.densa .obra-precio { font-size: 16px; }
.obras.densa .obra-antes  { font-size: 11px; }
.obras.densa .obra-titulo { font-size: 13px; }
.obras.densa .obra-cat,
.obras.densa .obra-boton  { display: none; }
.obras.densa .obra-fav    { width: 29px; height: 29px; top: 8px; left: 8px; }
.obras.densa .obra-sello  { top: 8px; right: 8px; padding: 4px 9px; font-size: 10.5px; }

@media (max-width: 640px) {
  .obra-marco  { padding: 16px; }
  .obra-precio { font-size: 18px; }
  .obra-boton  { padding: 9px 12px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL ENCABEZADO AL DESLIZAR
   Mientras la página corre, la barra se vuelve translúcida y deja
   ver el contenido pasar por debajo. En cuanto se detiene —y arriba
   del todo, donde no hay movimiento— vuelve a ser sólida.

   La transparencia va por MOVIMIENTO y no por posición: así el
   logotipo y el menú se quedan oscuros siempre y nunca hay que
   cambiarles el color según lo que tengan detrás.
   ═══════════════════════════════════════════════════════════════ */

.encabezado {
  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.encabezado.deslizando {
  /* .62 y no menos: por debajo, el texto oscuro empieza a pelearse con las
     fotos del catálogo que pasan por detrás. El desenfoque es lo que hace
     que se lea igual — sin él, una lámina con mucho detalle vuelve ilegible
     el menú. */
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 1px 14px rgba(44, 44, 42, .06);
}

/* El listón vive dentro del encabezado y es blanco sólido: si no se hace
   translúcido con él, se ve una banda opaca colgando de una barra que sí deja
   pasar la luz. */
.encabezado.deslizando .liston {
  background: rgba(255, 255, 255, .30);
  border-top-color: rgba(221, 217, 207, .55);
  border-bottom-color: rgba(221, 217, 207, .55);
  transition: background .22s ease, border-color .22s ease;
}

/* El buscador se aclara un punto para no quedar como un bloque macizo
   dentro de una barra que se ve a través. */
.encabezado.deslizando .ob-buscar {
  background: rgba(241, 239, 232, .72);
  transition: background .22s ease;
}

/* Quien pidió menos movimiento no quiere que la barra parpadee al bajar. */
@media (prefers-reduced-motion: reduce) {
  .encabezado, .encabezado .liston, .encabezado .ob-buscar { transition: none; }
  .encabezado.deslizando {
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .encabezado.deslizando .liston { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════
   LA PORTADA: el mensaje a un lado, las obras al otro

   Antes la foto iba de fondo y recortada: se veía un trozo de la
   obra, no la lámina que se compra. Aquí se enseña entera y
   enmarcada, que es el producto.
   ═══════════════════════════════════════════════════════════════ */

/* El color plano da el piso; el resplandor dorado cae sobre la mitad
   derecha, detrás de los cuadros, donde el panel del texto no llega. El color
   va AL FINAL de la lista: en `background`, las capas de arriba son imágenes
   y el color siempre cierra — puesto primero, la regla entera es inválida y
   el navegador la tira sin avisar. */
.hero {
  background:
    radial-gradient(70% 110% at 78% 42%, rgba(186, 117, 23, .13) 0%, rgba(186, 117, 23, 0) 62%),
    var(--hero-fondo);
  border-bottom: 1px solid var(--borde);
}

.hero-rejilla {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  align-items: center; gap: 40px;
  min-height: min(72vh, 620px);
  padding-top: 34px; padding-bottom: 34px;
}
/* Sin obras, el mensaje ocupa la portada él solo en vez de dejar un hueco. */
.hero-rejilla.sin-obras { grid-template-columns: 1fr; }
.hero-rejilla.sin-obras .hero-vitrina { display: none; }

/* ── El mensaje ── */
.hero-dicho .hero-etiqueta {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dorado);
}
.hero-dicho h1 {
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(34px, 3.6vw, 50px); font-weight: 700; color: var(--negro);
  line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 0;
}
.hero-dicho p {
  font-size: 16px; color: var(--gris); line-height: 1.6;
  margin: 16px 0 0; max-width: 380px; text-wrap: pretty;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Los puntos van BAJO el texto, no encima de la obra: sobre la lámina
   tapaban justo lo que se está enseñando. */
.hero-puntos { display: flex; gap: 7px; margin-top: 34px; }
.hero-puntos .swiper-pagination-bullet {
  width: 26px; height: 3px; border-radius: 2px; margin: 0;
  background: #d5d0c4; opacity: 1; transition: background .2s;
}
.hero-puntos .swiper-pagination-bullet-active { background: var(--dorado); }

/* ── La vitrina ── */
.hero-vitrina { position: relative; min-width: 0; }
.hero-tira { overflow: visible; }
/* El carrusel recorta por los lados para que las obras entren y salgan del
   encuadre en vez de aparecer de golpe. */
.hero-tira .swiper-wrapper { align-items: center; }

.hero-obra {
  width: 232px; flex-shrink: 0;
  opacity: .45; transform: scale(.88);
  transition: opacity .45s ease, transform .45s ease;
}
.hero-obra.swiper-slide-active { opacity: 1; transform: scale(1.14); }
.hero-obra a { display: block; text-decoration: none; }

/* El marco blanco con su sombra: es lo que hace que se lea como un cuadro
   colgado y no como una foto pegada al fondo. */
.hero-marco {
  background: #fff; padding: 15px;
  box-shadow: 0 16px 40px rgba(44,44,42,.15);
  transition: box-shadow .45s ease;
}
.hero-obra.swiper-slide-active .hero-marco { box-shadow: 0 26px 62px rgba(44,44,42,.24); }
.hero-marco img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--borde);
}

/* El pie solo bajo la obra del centro: repetido en todas, la tira se
   convierte en una lista y deja de leerse como una pared. */
.hero-pie {
  text-align: center; margin-top: 13px;
  opacity: 0; transition: opacity .35s ease;
}
.hero-obra.swiper-slide-active .hero-pie { opacity: 1; }
.hero-pie b {
  display: block; font-family: Outfit, Inter, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--negro);
}
.hero-pie span { display: block; font-size: 12.5px; color: var(--gris-claro); margin-top: 2px; }

/* ── Las flechas ── */
.hero-flecha {
  position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--negro);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.hero-flecha:hover { border-color: var(--negro); background: #fff; }
.hero-flecha svg { width: 18px; height: 18px; }
.hero-flecha.izq { left: -8px; }
.hero-flecha.der { right: -8px; }

@media (max-width: 940px) {
  .hero-rejilla {
    grid-template-columns: 1fr; gap: 30px;
    min-height: 0; padding-top: 30px; padding-bottom: 34px;
  }
  .hero-dicho p { max-width: none; }
  .hero-puntos { margin-top: 22px; }
  .hero-obra { width: 176px; }
  .hero-obra.swiper-slide-active { transform: scale(1.08); }
  .hero-flecha { display: none; }   /* en el teléfono se pasa con el dedo */
}

/* ═══════════════════════════════════════════════════════════════
   PORTADA · corrección: la tira se salía sobre el texto

   Con `overflow: visible` las obras a media opacidad flotaban encima
   del titular y se leía como una capa translúcida mal puesta. Se
   recorta por su columna, con hueco arriba y abajo para que la obra
   del centro pueda crecer sin que le corten la sombra.

   Y la portada enseña ahora la obra COLGADA EN UNA SALA, no la
   lámina suelta: un cuadro en una pared se entiende de un vistazo y
   es lo que se está vendiendo.
   ═══════════════════════════════════════════════════════════════ */

.hero-vitrina {
  /* El recorte va aquí y no en el carrusel: Swiper mide su contenedor y
     recortarlo a él descuadraría el centrado. */
  overflow: hidden;
  /* Hueco para que la escala de la obra activa y su sombra no se corten. */
  padding: 46px 0;
  margin: -46px 0;
}
.hero-tira { overflow: visible; }

/* La escena ya trae su propia pared: un passe-partout blanco alrededor
   sobraría y la haría parecer una foto dentro de otra foto. */
.hero-marco {
  background: none;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(44, 44, 42, .16);
}
.hero-obra.swiper-slide-active .hero-marco { box-shadow: 0 26px 58px rgba(44, 44, 42, .26); }
.hero-marco img { border: none; border-radius: 10px; }

/* Las escenas son cuadradas, así que la tira necesita menos ancho por
   obra que cuando eran láminas verticales. */
.hero-obra { width: 272px; }
.hero-obra.swiper-slide-active { transform: scale(1.1); }

@media (max-width: 940px) {
  .hero-vitrina { padding: 30px 0; margin: -30px 0; }
  .hero-obra { width: 208px; }
  .hero-obra.swiper-slide-active { transform: scale(1.06); }
}

/* ═══════════════════════════════════════════════════════════════
   PORTADA · el texto va sobre su propio panel

   Aunque la tira ya se recorta, el mensaje se apoya en un fondo
   propio y por encima: es la garantía de que NUNCA se le cruce una
   obra por detrás, pase lo que pase con el carrusel. Del color del
   hero, así que no se ve como una caja pegada — solo tapa.
   ═══════════════════════════════════════════════════════════════ */

.hero-dicho {
  position: relative;
  z-index: 2;
  background: var(--hero-fondo);
  padding: 26px 34px 26px 0;
  margin: -26px 0;
}

/* Un desvanecido a la derecha para que la obra que entra no aparezca
   cortada por una línea recta. */
.hero-dicho::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 100%;
  width: 80px; pointer-events: none;
  background: linear-gradient(90deg, var(--hero-fondo), var(--hero-fondo-0));
}

@media (max-width: 940px) {
  /* Apilado no hay nada que tapar, y el desvanecido sobraría. */
  .hero-dicho { padding: 0; margin: 0; background: none; }
  .hero-dicho::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTADA · el texto sigue a la obra, y las flechas se meten
   ═══════════════════════════════════════════════════════════════ */

/* Al borde se veían pegadas al filo de la pantalla y parecían cortadas.
   Dentro del encuadre se leen como control del carrusel. */
.hero-flecha.izq { left: 16px; }
.hero-flecha.der { right: 16px; }

/* El texto se va y vuelve en vez de saltar: un cambio seco a media
   transición de la imagen se lee como un error de carga. */
.hero-dicho [data-hero-etiqueta],
.hero-dicho [data-hero-titulo],
.hero-dicho [data-hero-boton] {
  transition: opacity .19s ease, transform .19s ease;
}
.hero-dicho.cambiando [data-hero-etiqueta],
.hero-dicho.cambiando [data-hero-titulo],
.hero-dicho.cambiando [data-hero-boton] {
  opacity: 0;
  transform: translateY(6px);
}

/* El titular pasa a ser el nombre de una obra, que puede ser largo: se le
   pone tope de dos renglones para que el bloque no crezca y empuje los
   botones fuera de sitio en cada cambio. */
.hero-dicho h1 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.1em;
}

/* El botón lleva ahora el precio, así que necesita respirar más. */
.hero-acciones .boton { white-space: nowrap; }

@media (max-width: 940px) {
  .hero-dicho h1 { min-height: 0; }
}

/* El párrafo del hero también rota con la obra: entra en el mismo
   desvanecido que la etiqueta, el titular y el botón. */
.hero-dicho [data-hero-resumen] {
  transition: opacity .19s ease, transform .19s ease;
  /* Dos renglones y tope: los resúmenes varían de largo y sin esto el
     bloque crecería y encogería en cada vuelta, empujando los botones. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.2em;
}
.hero-dicho.cambiando [data-hero-resumen] {
  opacity: 0;
  transform: translateY(6px);
}
@media (max-width: 940px) {
  .hero-dicho [data-hero-resumen] { min-height: 0; }
}

/* ── El texto del hero no aparece hasta tener con qué llenarse ──
   El HTML trae el texto de la marca y el JS lo cambia por la primera obra.
   Ese relevo se veía como un parpadeo al recargar. */
.hero-dicho.esperando [data-hero-etiqueta],
.hero-dicho.esperando [data-hero-titulo],
.hero-dicho.esperando [data-hero-resumen],
.hero-dicho.esperando [data-hero-boton] {
  opacity: 0;
  /* Sin transición: aparecer es cosa del desvanecido de abajo, y una
     transición aquí encadenaría dos y volvería a parpadear. */
  transition: none;
}

/* Tres renglones en vez de dos: los resúmenes se cortaban a media palabra
   ("...celebren el amo...") y quedaba raro. */
.hero-dicho [data-hero-resumen] {
  -webkit-line-clamp: 3;
  min-height: 4.8em;
}
@media (max-width: 940px) {
  .hero-dicho [data-hero-resumen] { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   TARJETA · un solo panel, la obra grande

   Es una tienda de cuadros: lo que decide la compra es la obra, no
   la ficha. Así que la imagen se lleva la tarjeta y el texto va
   debajo, dentro del mismo panel, en un solo renglón.

   Sin estrellas: no hay ni una valoración en la tienda. En ese hueco
   va el descuento o el sello de destacado, que sí son reales.
   ═══════════════════════════════════════════════════════════════ */

.obra {
  display: flex; flex-direction: column;
  background: var(--crema-claro);
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  transition: background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.obra:hover {
  background: #fff;
  border-color: var(--borde);
  box-shadow: 0 10px 30px rgba(44,44,42,.09);
  transform: translateY(-3px);
}

/* ── La obra ── */
.obra-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: 30px 30px 22px;
}
.obra-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  /* La sombra despega la lámina del panel: sin ella se lee como un
     recorte pegado y no como un cuadro. */
  filter: drop-shadow(0 10px 22px rgba(44,44,42,.18));
  transition: transform .28s ease;
}
.obra:hover .obra-img { transform: scale(1.035); }
.obra-img.sin-foto { width: 60%; aspect-ratio: 3/4; background: var(--crema); border-radius: 4px; }

/* Arriba a la izquierda, donde el ejemplo pone la valoración. */
.obra-sello {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.obra-sello.rebaja    { background: var(--verde);  color: #fff; }
.obra-sello.destacado { background: var(--dorado); color: #fff; }

.obra-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%; background: none;
  cursor: pointer; transition: transform .15s;
}
.obra-fav svg { width: 18px; height: 18px; fill: none; stroke: var(--gris); stroke-width: 1.7; }
.obra-fav:hover { transform: scale(1.12); }
.obra-fav:hover svg { stroke: var(--negro); }
.obra-fav.activo svg { fill: var(--rojo); stroke: var(--rojo); }

/* ── El pie: nombre y precio a la izquierda, la acción a la derecha ── */
.obra-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 18px 18px;
  margin-top: auto;
}
.obra-textos { min-width: 0; }
.obra-titulo {
  font-size: 14px; font-weight: 600; color: var(--negro); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obra-precio {
  font-family: Outfit, Inter, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--negro);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.obra-precio.sin-precio { font-size: 12.5px; font-weight: 500; color: var(--gris-claro); }
.obra-antes {
  font-size: 12px; color: var(--gris-claro);
  text-decoration: line-through; line-height: 1.2;
}

/* El círculo de la derecha: la flecha se pinta al pasar, como en el
   ejemplo, para que la tarjeta en reposo sea solo la obra. */
.obra-accion {
  flex-shrink: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: #fff; color: var(--gris);
  transition: background .18s, border-color .18s, color .18s;
}
.obra-accion svg { width: 16px; height: 16px; }
.obra:hover .obra-accion { background: var(--negro); border-color: var(--negro); color: #fff; }

/* La cuadrícula densa de la portada: mismo panel, todo más apretado. */
.obras.densa .obra-foto { padding: 16px 16px 12px; }
.obras.densa .obra-pie  { padding: 0 12px 12px; }
.obras.densa .obra-titulo { font-size: 13px; }
.obras.densa .obra-precio { font-size: 13.5px; }
.obras.densa .obra-accion { width: 28px; height: 28px; }
.obras.densa .obra-accion svg { width: 14px; height: 14px; }
.obras.densa .obra-fav { width: 27px; height: 27px; top: 7px; right: 7px; }
.obras.densa .obra-fav svg { width: 15px; height: 15px; }
.obras.densa .obra-sello { top: 7px; left: 7px; padding: 4px 9px; font-size: 10.5px; }

@media (max-width: 640px) {
  .obra-foto { padding: 18px 18px 14px; }
  .obra-pie  { padding: 0 13px 13px; }
}

/* ── Las tarjetas suben al entrar ──
   El efecto se nota más que un fundido a secas: la obra llega desde
   abajo, como si se colocara en la pared. */
[data-aos="fade-up"] { transform: translate3d(0, 34px, 0); }

/* ═══════════════════════════════════════════════════════════════
   TARJETA "MOBILIARIO" — calcada de la referencia que trajo el dueño

   La obra sobre un bloque gris cálido, sello naranja "¡Oferta!"
   arriba a la derecha, y el pie sobre el fondo de la página, sin
   panel: título con categorías en cursiva a la izquierda, precio a
   la derecha (tachado encima, naranja subrayado con rebaja).

   Estas reglas pisan a las generaciones anteriores (van después en
   la hoja). El corazón de favoritos pasa a la izquierda, que la
   esquina derecha ahora es del sello.
   ═══════════════════════════════════════════════════════════════ */

:root { --naranja: #E8622C; }

/* Menos por fila: tarjetas grandes, como en la referencia.
   La galería ya no lleva "densa" — esa queda solo para la vitrina de
   portada, cuyo mínimo (230) va sincronizado con el cálculo de
   columnas de index.html: si se cambia uno, se cambia el otro. */
.obras { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 26px; }
.obras.densa { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

.obra {
  display: flex; flex-direction: column; gap: 13px;
  background: none; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible; padding: 0; height: 100%;
  transform: none; transition: none;
}
.obra:hover { background: none; border: 0; box-shadow: none; transform: none; }

/* ── El bloque de la obra ── */
.obra-foto {
  position: relative;
  background: #F0EFEB;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: 34px;
}
.obra-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  filter: drop-shadow(0 8px 18px rgba(44,44,42,.15));
  transition: transform .28s ease;
}
.obra:hover .obra-img { transform: scale(1.03); }
.obra-img.sin-foto { width: 60%; aspect-ratio: 3/4; background: var(--crema); border-radius: 4px; }

/* El sello, como el "Sale!" de la referencia: rectangulito naranja con
   letra de imprenta en cursiva. */
.obra-sello {
  position: absolute; top: 14px; right: 14px; left: auto; z-index: 2;
  padding: 6px 12px; border-radius: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.obra-sello.oferta    { background: var(--naranja); color: #fff; }
.obra-sello.rebaja    { background: var(--naranja); color: #fff; }
.obra-sello.destacado { background: var(--dorado);  color: #fff; }

.obra-fav {
  position: absolute; top: 12px; left: 12px; right: auto; z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%; background: none;
  cursor: pointer; transition: transform .15s;
}
.obra-fav svg { width: 18px; height: 18px; fill: none; stroke: var(--gris); stroke-width: 1.7; }
.obra-fav:hover { transform: scale(1.12); }
.obra-fav:hover svg { stroke: var(--negro); }
.obra-fav.activo svg { fill: var(--rojo); stroke: var(--rojo); }

/* ── El pie, sobre el fondo de la página ── */
.obra-pie {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 0 2px; margin-top: 0;
}
.obra-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.obra-titulo {
  font-size: 15px; font-weight: 600; color: var(--negro); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obra:hover .obra-titulo { color: var(--dorado); }
.obra-cat {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-size: 12.5px; color: var(--gris-claro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obra-cifras {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0; text-align: right; line-height: 1.2;
}
.obra-desde { font-size: 11px; color: var(--gris-claro); }
.obra-antes {
  font-size: 13px; color: var(--gris-claro);
  text-decoration: line-through; margin: 0;
}
.obra-precio {
  font-family: Outfit, Inter, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--negro);
  margin-top: 0; font-variant-numeric: tabular-nums;
}
.obra-precio.oferta {
  color: var(--naranja);
  text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.obra-precio.especial { font-size: 12.5px; font-weight: 500; color: var(--gris-claro); }
.obra-accion { display: none; }

/* ── La vitrina densa de la portada: mismo estilo, más apretado ── */
.obras.densa .obra { gap: 9px; }
.obras.densa .obra-foto   { padding: 18px; border-radius: 8px; }
.obras.densa .obra-titulo { font-size: 13px; }
.obras.densa .obra-cat    { display: none; }
.obras.densa .obra-desde  { display: none; }
.obras.densa .obra-antes  { font-size: 11.5px; }
.obras.densa .obra-precio { font-size: 13.5px; }
.obras.densa .obra-fav    { width: 27px; height: 27px; top: 8px; left: 8px; right: auto; }
.obras.densa .obra-fav svg { width: 15px; height: 15px; }
.obras.densa .obra-sello  { top: 9px; right: 9px; left: auto; padding: 5px 9px; font-size: 11px; }

@media (max-width: 640px) {
  .obras { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 14px; }
  .obra-foto { padding: 18px; }
  .obra-titulo { font-size: 13.5px; }
  .obra-cat { font-size: 11.5px; }
  .obra-precio { font-size: 14px; }
  .obra-pie { flex-wrap: wrap; gap: 4px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTADA DE TARJETA: LA OBRA COLGADA, Y TODAS DEL MISMO TAMAÑO

   La lámina suelta no dejaba parejo el catálogo: una obra vertical
   se veía alta y flaca al lado de una horizontal ancha y baja,
   aunque el recuadro midiera lo mismo. Con la escena de sala
   recortada al mismo cuadro, todas las tarjetas pesan igual en la
   página.

   La escena llena el bloque (cover) y se recorta por los lados; el
   cuadro va al centro del render, así que el recorte se come pared,
   no obra. Si Pictufy no da el render, la tarjeta cae a la lámina
   —clase 'obra-sala' fuera— y esa sí se muestra entera.
   ═══════════════════════════════════════════════════════════════ */

.obra-foto {
  padding: 0;
  overflow: hidden;
  background: var(--crema);
}

/* La escena de sala: llena el bloque, sin sombra postiza — ya es una foto. */
.obra-img.obra-sala {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; object-position: center;
  filter: none;
}

/* La lámina suelta (solo si el render falló): entera y con aire. */
.obra-img:not(.obra-sala) {
  max-width: 74%; max-height: 74%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(44,44,42,.15));
}

/* Sello y corazón sobre la foto: un velo suave detrás del corazón para que
   no se pierda contra una pared clara. */
.obra-fav {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(2px);
}
.obra-fav svg { stroke: var(--negro); }
.obra-fav:hover { background: #fff; }

.obras.densa .obra-foto { padding: 0; }

@media (max-width: 640px) {
  .obra-foto { padding: 0; }
}

/* El recorte cuadrado se sesga hacia arriba: los cuadros cuelgan altos y el
   suelo no aporta nada, así que cortar por abajo deja el marco entero. Con
   el recorte centrado se comía el borde superior en varias escenas. */
.obra-img.obra-sala { object-position: center top; }

/* ══════════════════════════════════════════════════════════════════
   LOS FILTROS, EN UN RENGLÓN SOBRE LA CUADRÍCULA

   La columna lateral se comía 250 px y ponía cinco cajas de formulario
   entre el título y el primer cuadro. Ahora es una tira discreta de
   pastillas que solo ocupan sitio cuando se abren, y la mercancía
   empieza arriba del todo y a todo lo ancho.

   Van después de las reglas viejas de .plp, así que las pisan.
   ══════════════════════════════════════════════════════════════════ */

.plp { display: block; grid-template-columns: none; gap: 0; }
.plp-lado, .plp-abrir-filtros, .plp-barra { display: none; }

.plp-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 15px; margin-bottom: 22px;
  border-bottom: 1px solid var(--borde);
}

/* ── La búsqueda: una pastilla más, no una caja aparte ── */
.plp-buscar {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 14px; height: 36px; width: 232px;
  color: var(--gris-claro); transition: border-color .18s, background .18s;
}
.plp-buscar:focus-within { border-color: var(--dorado); background: #fff; }
.plp-buscar svg { width: 15px; height: 15px; flex-shrink: 0; }
.plp-buscador {
  border: none; background: none; padding: 0; width: 100%;
  font-family: inherit; font-size: 13.5px; color: var(--negro);
}
.plp-buscador:focus { outline: none; border: none; }
.plp-buscador::-webkit-search-cancel-button { cursor: pointer; }

/* ── Las pastillas ── */
.plp-menu { position: relative; }
.plp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 13px; height: 36px;
  font-family: inherit; font-size: 13.5px; color: var(--negro);
  cursor: pointer; white-space: nowrap;
  transition: border-color .16s, background .16s;
}
.plp-chip svg { width: 13px; height: 13px; color: var(--gris-claro); transition: transform .18s; }
.plp-chip:hover { border-color: var(--gris-claro); background: #fff; }
.plp-menu.abierto .plp-chip { border-color: var(--dorado); background: #fff; }
.plp-menu.abierto .plp-chip svg { transform: rotate(180deg); }
.plp-menu.puesto .plp-chip { border-color: var(--dorado); background: #FDF6E9; font-weight: 600; }

.plp-cuenta {
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--dorado); color: #fff;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: inline-grid; place-items: center;
}

/* ── El panel que cuelga de cada pastilla ── */
.plp-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 258px; max-width: min(340px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--borde); border-radius: 13px;
  padding: 12px; box-shadow: 0 16px 38px rgba(44,44,42,.15);
}
.plp-panel.ancho { min-width: 272px; padding: 15px; }
.plp-menu.abierto .plp-panel { display: block; }
/* Si el panel se saldría por la derecha, el guion le pone esta clase y lo
   ancla al otro lado de la pastilla. Se decide midiendo, no por su posición
   en el renglón: las pastillas cambian de sitio según el ancho. */
.plp-panel.volteado { left: auto; right: 0; }

.plp-panel .plp-lista { max-height: 292px; }
.plp-panel .plp-casilla { font-size: 13px; }
.plp-panel .plp-casilla:hover { background: var(--crema-claro); }

/* ── Favoritos y limpiar: del mismo alto que las pastillas ── */
.plp-favoritos {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 13px; height: 36px; width: auto;
  font-family: inherit; font-size: 13.5px; color: var(--negro);
  cursor: pointer; white-space: nowrap;
}
.plp-favoritos:hover { border-color: var(--gris-claro); background: #fff; }
.plp-favoritos.activo { border-color: var(--dorado); background: #FDF6E9; font-weight: 600; }
.plp-favoritos b {
  font-size: 11px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--borde); color: var(--negro);
}
.plp-favoritos.activo b { background: var(--dorado); color: #fff; }

.plp-limpiar {
  background: none; border: none; padding: 0 6px; height: 36px;
  font-family: inherit; font-size: 13px; color: var(--gris);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.plp-limpiar:hover { color: var(--rojo); }

/* ── El conteo y el orden, al otro extremo del renglón ── */
.plp-derecha {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
}
.plp-derecha #conteo { margin: 0; font-size: 13px; color: var(--gris); white-space: nowrap; }
.plp-derecha #conteo b { color: var(--negro); }
.plp-orden { display: inline-flex; align-items: center; }
.plp-orden select {
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--crema-claro); height: 36px; padding: 0 12px;
  font-family: inherit; font-size: 13.5px; color: var(--negro); cursor: pointer;
}
.plp-orden select:focus { outline: none; border-color: var(--dorado); }

@media (max-width: 720px) {
  /* Aquí la tira se parte en dos renglones. Nada de deslizarla de lado: al
     recortar en horizontal el navegador recorta también hacia abajo y se
     comería los paneles desplegados. */
  .plp-filtros { gap: 7px; padding-bottom: 12px; margin-bottom: 16px; }
  .plp-buscar { width: 100%; order: -1; }
  .plp-chip, .plp-favoritos, .plp-orden select { height: 34px; font-size: 13px; }
  .plp-derecha { gap: 10px; }
  .plp-derecha #conteo { display: none; }
}

/* ── Iconos en las pastillas, y fuera los puntos naranjas ──
   El punto naranja era el globo de la cuenta VACÍO: el navegador apaga un
   elemento con `hidden` poniéndole display:none desde su propia hoja, y mi
   regla de arriba le puso display:inline-grid, que gana por ser de autor.
   Quedaban pelotitas sin número en todas las pastillas. */
.plp-cuenta[hidden] { display: none !important; }

.plp-icono {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--gris-claro);
  transition: color .16s;
}
.plp-chip:hover .plp-icono,
.plp-menu.abierto .plp-icono,
.plp-menu.puesto .plp-icono { color: var(--dorado); }
.plp-buscar:focus-within .plp-icono { color: var(--dorado); }

/* El icono manda al principio; la flechita, al final y más discreta. */
.plp-chip { gap: 8px; padding: 0 12px 0 11px; }
.plp-chip > svg:last-child { width: 12px; height: 12px; margin-left: -1px; opacity: .75; }

/* ══════════════════════════════════════════════════════════════════
   LA PORTADA APARECE DE UNA PIEZA

   Antes cada cosa llegaba por su lado: el texto de marca se pintaba y
   desaparecía al cargar los scripts, el nuevo entraba cuando contestaba
   la API, y las obras de la vitrina caían una por una según terminaba
   su descarga. Ese goteo era el "parpadeo".

   Ahora un guion en el <head> pone .con-js antes del primer pintado y
   la rejilla nace invisible; el guion de la portada la revela entera
   —texto, marcos, flechas y puntos a la vez— cuando las imágenes ya
   están decodificadas. Sin JS no hay clase y se ve todo, como siempre.
   ══════════════════════════════════════════════════════════════════ */

.con-js .hero-rejilla { opacity: 0; }
.con-js .hero-rejilla.lista {
  opacity: 1;
  transition: opacity .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .con-js .hero-rejilla.lista { transition: none; }
}

/* Ya no hace falta esconder pieza por pieza: el mecanismo 'esperando'
   queda anulado por si algún guion viejo en caché lo pusiera. */
.hero-dicho.esperando [data-hero-etiqueta],
.hero-dicho.esperando [data-hero-titulo],
.hero-dicho.esperando [data-hero-resumen],
.hero-dicho.esperando [data-hero-boton] { opacity: 1; }

/* ── "Cómo funciona", visible sobre fondo claro ──
   El botón fantasma era blanco translúcido con letra blanca: venía del
   hero oscuro anterior y sobre la crema de ahora era un fantasma de
   verdad. Delineado y con la letra del sitio, ya juega en armonía con
   el botón dorado de al lado. */
.boton.fantasma {
  background: none;
  color: var(--negro);
  border: 1.5px solid var(--borde);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.boton.fantasma:hover {
  background: var(--crema);
  border-color: var(--gris-claro);
  color: var(--negro);
}

/* ── El pie, pegado a lo que tenga encima ──
   Tenía margin-top:70px, y un margen no se pinta: dejaba ver el fondo
   blanco del body como una franja entre la última sección y el negro del
   pie. No se notaba mientras la última sección fue blanca; en cuanto la
   página terminó en crema, apareció el escalón de color.

   El hueco no hace falta: TODAS las páginas cierran con un <section>, y
   .seccion ya trae 68px de relleno abajo. Esa separación sí va pintada del
   color de su propia sección, así que el pie arranca limpio. */
.pie { margin-top: 0; }

/* ── El logotipo, más grande ──
   Iba a 38px dentro de un encabezado de 76: se veía pequeño para ser la
   marca. Sube a 52, que deja 12px de aire arriba y abajo y no obliga a
   crecer la barra. El archivo mide 560x140, así que a 52 (104 en pantalla
   de doble densidad) sigue por debajo de su tamaño real y no se pixelea.
   El del pie sube en la misma proporción para que no se descompensen. */
.logo img { height: 52px; }
.pie img { height: 40px; }
.menu-movil-cabeza img { height: 40px; }

@media (max-width: 940px) {
  /* Aquí la barra mide 64px, así que el tope es 40. */
  .logo img { height: 40px; }
}
@media (max-width: 560px) {
  /* En pantalla estrecha el logotipo compite con la búsqueda y los iconos:
     grande, pero sin empujarlos fuera. */
  .logo img { height: 36px; }
  .pie img { height: 34px; }
}

/* ══════════════════════════════════════════════════════════════════
   LA PÁGINA DE ARTISTAS

   Arriba, los cien con más obra: una lámina suya colgada, su nombre y
   cuánto tiene. Abajo, los otros mil quinientos como nombres sueltos
   con buscador. Darles tarjeta con foto a todos habría llenado la
   página de fichas de una lámina, que se leen como algo a medio
   hacer.
   ══════════════════════════════════════════════════════════════════ */

.artistas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 30px 22px;
}

.artista { display: flex; flex-direction: column; gap: 9px; text-decoration: none; }
.artista-foto {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--crema); border-radius: 12px;
}
.artista-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: transform .3s ease;
}
.artista:hover .artista-foto img { transform: scale(1.04); }
.artista-sinfoto { width: 100%; height: 100%; background: var(--crema); }

.artista-nombre {
  font-family: Outfit, Inter, sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--negro); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.artista:hover .artista-nombre { color: var(--dorado); }
.artista-cuenta { font-size: 12.5px; color: var(--gris-claro); margin-top: -4px; }

/* ── Los demás: nombres, no fichas ── */
.artistas-nombres { display: flex; flex-wrap: wrap; gap: 8px; }
.artista-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; color: var(--negro); text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.artista-chip:hover { border-color: var(--dorado); background: #fff; color: var(--dorado); }
.artista-chip i {
  font-style: normal; font-size: 11.5px; color: var(--gris-claro);
  font-variant-numeric: tabular-nums;
}
.artista-chip:hover i { color: var(--dorado); }
.artista-chip[hidden] { display: none !important; }

.artistas-vacio { color: var(--gris); font-size: 14px; padding: 18px 2px; }

@media (max-width: 640px) {
  .artistas-rejilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 14px; }
  .artista-nombre { font-size: 13.5px; }
  .artista-chip { font-size: 12.5px; padding: 6px 12px; }
}

/* El rótulo de "estás viendo la obra de X", en la galería */
.rotulo-artista {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 10px;
  background: var(--crema); border-radius: 999px; padding: 7px 8px 7px 15px;
  font-size: 13.5px; color: var(--gris);
}
.rotulo-artista b { color: var(--negro); font-weight: 600; }
.rotulo-artista button {
  border: none; background: #fff; color: var(--gris);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.rotulo-artista button:hover { background: var(--negro); color: #fff; }

/* Cada renglón del menú de celular con su bloque de enlaces debajo. Antes
   las columnas de "Colecciones" salían sueltas al final, sin decir de quién
   eran, y los demás renglones no tenían nada. */
.mm-grupo { border-bottom: 1px solid var(--borde); padding-bottom: 6px; margin-bottom: 6px; }
.mm-grupo:last-child { border-bottom: none; }
.mm-grupo h5 {
  font-family: 'Outfit', Inter, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gris-claro);
  margin: 12px 0 4px 14px;
}
.mm-grupo > div { display: flex; flex-direction: column; }
.mm-grupo > div a {
  padding: 8px 14px 8px 26px; font-size: 14px;
  color: var(--gris); text-decoration: none;
}
.mm-grupo > div a:hover { color: var(--dorado); }

/* ── La puerta a los otros artistas ──
   Sustituye a la pared de mil quinientos nombres: obra suya de verdad a la
   izquierda, y un solo enlace. Un nombre desconocido no invita a picar; un
   cuadro sí. */
.otros-banda {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center;
  gap: 34px; margin-top: 56px; padding: 30px;
  background: var(--crema-claro); border: 1px solid var(--borde);
  border-radius: 18px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
}
.otros-banda:hover {
  border-color: var(--dorado);
  box-shadow: 0 14px 34px rgba(44,44,42,.09);
}
.otros-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.otros-fotos img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center top;
  border-radius: 10px; display: block;
}
.otros-texto .subtitulo { display: block; margin-bottom: 6px; }
.otros-texto h3 {
  font-family: Outfit, Inter, sans-serif;
  font-size: 26px; font-weight: 700; color: var(--negro); margin: 0 0 8px;
}
.otros-banda:hover .otros-texto h3 { color: var(--dorado); }
.otros-texto p { margin: 0 0 18px; color: var(--gris); font-size: 14.5px; }
.otros-boton {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--negro); color: #fff; border-radius: 999px;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  transition: background .18s;
}
.otros-boton svg { width: 15px; height: 15px; }
.otros-banda:hover .otros-boton { background: var(--dorado); }

@media (max-width: 780px) {
  .otros-banda { grid-template-columns: 1fr; gap: 22px; padding: 22px; margin-top: 40px; }
  .otros-fotos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .otros-texto h3 { font-size: 22px; }
}

/* ── La página de sets de marcos ──
   Las tarjetas son las mismas del catálogo, pero aquí la foto es un dibujo
   del acomodo sobre pared crema: se recorta menos y se enseña entera, que
   lo que se compra es justo la disposición. */
#sets-rejilla .obra-img { object-fit: contain; object-position: center; }
#sets-rejilla .obra-foto { background: var(--crema-claro); }
#sets-rejilla .obra-cat { display: none; }

#sets-mandos { border-bottom: none; padding-bottom: 0; margin-bottom: 26px; }
/* ── Los filtros de los sets ──
   No tenían UN SOLO estilo: eran botones de HTML en crudo, con el gris del
   navegador y su esquina cuadrada, en una página donde todo lo demás está
   cuidado. Por eso se veían prestados.

   Toman el mismo lenguaje que los botones del configurador —pastilla blanca,
   borde de 1.5, dorado al elegir— porque hacen lo mismo: elegir entre pocas
   opciones excluyentes. Que dos cosas que se usan igual se vean igual es lo
   que hace que un sitio se sienta de una pieza. */
.mandos-titulo {
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--gris);
  margin-right: 4px; flex-shrink: 0;
}

.mando {
  background: #fff; border: 1.5px solid var(--borde); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  font-family: 'Outfit', Inter, sans-serif; font-size: 13.5px; font-weight: 500;
  color: var(--negro); line-height: 1.2; white-space: nowrap;
  transition: border-color .16s, background .16s, color .16s;
}
.mando:hover { border-color: var(--dorado); color: var(--dorado); }

/* El elegido va en NEGRO sólido y no en dorado claro: en una fila de once
   pastillas iguales, un borde de color no basta para encontrar de un vistazo
   cuál está puesto. */
.mando[aria-pressed="true"] {
  background: var(--negro); border-color: var(--negro); color: #fff;
  font-weight: 600;
}
.mando[aria-pressed="true"]:hover { color: #fff; }

/* En teléfono la fila se corre de lado en vez de romperse en cuatro
   renglones: once pastillas apiladas empujan el catálogo fuera de la
   pantalla y la página abre en un muro de botones. */
@media (max-width: 720px) {
  #sets-mandos {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px; margin-right: -20px; padding: 0 20px 2px;
  }
  #sets-mandos::-webkit-scrollbar { display: none; }
  .mandos-titulo { display: none; }
}

.sets-nota {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--borde);
  font-size: 14px; color: var(--gris);
}
.sets-nota a { color: var(--dorado); }

/* ═══════════════════════════════════════════════════════════════════
   LA TARJETA DEL CATÁLOGO, COMO LA DE WALL STUDIO

   No está copiada de ojo: los valores salen de su propia hoja de
   estilos (wallstudio.mx/cdn/shop/t/4/assets/theme.css), así que son
   los suyos y no una aproximación.

     bloque      #F2F2F2  (--colorBodyDim)
     texto       #002A32  (--colorTextBody, --colorPrice)
     magenta     #B61151  (--colorSaleTag, --colorBtnPrimary)
     tipografía  Poppins, base 14 px
     título      base + 3 = 17 px
     artista     base - 3 = 11 px, opacidad .65
     precio      base + 2 = 16 px, negrita
     aire        10% del ancho de la tarjeta (--productTileMargin)

   La obra va DENTRO del bloque gris, y el título, el artista y el
   precio también: es un solo rectángulo, no una foto con letras
   sueltas debajo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ws-bloque: #F2F2F2;
  --ws-texto: #002A32;
  --ws-magenta: #B61151;
  --ws-magenta-claro: #E51566;
}

/* La rejilla se aprieta: con el bloque gris cargando también las letras,
   36 px de calle entre tarjetas dejaban islas flotando. */
.obras { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* La vitrina de sets: DIEZ productos, uno por medida, así que en pantalla
   ancha se acomodan a propósito en dos filas de cinco — el catálogo entero
   de un vistazo, sin renglón cojo. Con auto-fill salían 4+4+2. Debajo de
   1350px las tarjetas de quinta parte quedarían muy angostas y se vuelve a
   la rejilla normal, que ahí acomoda 4, 3, 2… según quepa. */
@media (min-width: 1350px) {
  /* minmax(0, 1fr) y no 1fr a secas: un `1fr` es `minmax(auto, 1fr)`, y ese
     `auto` es el ANCHO MÍNIMO DEL CONTENIDO. Como el título de la tarjeta va
     con white-space: nowrap, cada columna se negaba a bajar de lo que mide el
     título entero —"Marco para diploma 21.5 × 28 cm · Caoba · moldura 23 mm"
     son casi 600 px— y las cinco columnas se desbordaban de la pantalla en vez
     de repartirse. Con el mínimo en 0, la columna encoge y el ellipsis del
     título hace su trabajo. */
  #sets-rejilla.obras,
  #mayoreo-rejilla.obras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.obra {
  display: flex; flex-direction: column;
  background: var(--ws-bloque);
  border: 0; border-radius: 0; box-shadow: none;
  padding: 0 0 20px; gap: 0; height: 100%;
  overflow: visible; transform: none; transition: none;
  font-family: Poppins, Inter, sans-serif;
}
.obra:hover {
  background: var(--ws-bloque); border: 0; box-shadow: none; transform: none;
}

/* ── La obra, con su aire alrededor ── */
.obra-foto {
  position: relative;
  background: none; border-radius: 0;
  aspect-ratio: 1 / 1;
  padding: 10%;
  display: block; overflow: visible; margin: 0;
}
/* El aviso de mayoreo. Va antes de la rejilla porque el precio de mayoreo
   solo vale si se sabe ANTES de mirarlo: quien lo descubre hasta la ficha ya
   comparó contra el menudeo y se fue. */
.mayoreo-aviso {
  background: #FDF6E9; border: 1px solid #EBD9BC; border-radius: 12px;
  padding: 14px 18px; margin: 0 0 24px;
  font-family: 'Outfit', Inter, sans-serif; font-size: 14px; line-height: 1.55;
  color: var(--gris);
}
.mayoreo-aviso strong { color: var(--negro); font-weight: 600; }
.mayoreo-aviso b { color: var(--dorado-oscuro); font-weight: 600; }

/* Los sets respiran menos que una obra suelta. Una obra es una lámina
   vertical que llena el cuadro ella sola; un set son tres marcos en fila, que
   dejan pared arriba y abajo por su propia forma. Con el 10% de todos, esa
   pared se sumaba al relleno.

   Cuelga de la TARJETA y no de `#sets-rejilla`, que es como estaba y por eso
   no se veía el cambio: los sets no salen solo en /sets. También caen en el
   catálogo (#catalogo) y en los destacados de la portada (#destacadas), y ahí
   la regla no llegaba. La tarjeta sabe qué es; la rejilla no tiene por qué. */
#sets-rejilla .obra-foto { background: none; }
/* El dibujo del set LLENA la tarjeta, como las escenas de sala de las obras.

   Con relleno alrededor quedaba una hojita crema flotando en medio de un
   recuadro gris —y encima con sombra propia, así que se leía como una tarjeta
   dentro de otra tarjeta—. Al lado de las obras, que sí llenan su cuadro, se
   veía como un error de carga.

   El dibujo ya trae su propia pared: ese crema ES el fondo, no un papel
   puesto sobre el fondo. Dejándolo llenar, la pared de la imagen y el hueco
   de la tarjeta pasan a ser la misma cosa.

   `cover` y no `contain` porque el hueco de la tarjeta no siempre es cuadrado
   —la altura la pone la fila de la cuadrícula— y con `contain` volvería a
   sobrar aire por algún lado. Lo que se recorta es pared: los marcos ocupan
   la franja de en medio y el dibujo lleva aire de sobra arriba y abajo.

   Y sin `drop-shadow`: la sombra ya está dibujada dentro, marco por marco y
   medida en centímetros. La del CSS le sumaba una segunda sombra al conjunto
   entero, que es lo que lo hacía parecer una calcomanía. */
.obra/* El recorte de la imagen vive en .obra-lienzo —la capa que solo envuelve a
   la imagen— y NO en .obra-foto: ahí dentro también están la lupa y el
   corazón, que sobresalen del borde a propósito, y un overflow:hidden en la
   caja los partía por la mitad. Cada capa recorta lo suyo. */
.obra-set .obra-foto { padding: 0; overflow: visible; border-radius: 0; }
.obra-set .obra-lienzo { overflow: hidden; }
/* Las de mayoreo llegan ya con zoom —el marco al 82% de un cuadrado, obra de
   sellar-fotos-mayoreo.js— así que aquí NO se recortan: 'contain' las enseña
   enteras. Con 'cover' se las comía por los costados, y no hay proporción que
   perseguir para evitarlo: la altura del hueco la pone la fila de la rejilla,
   y cambia con el ancho de pantalla y con las líneas que ocupe el título.

   El hueco conserva su relleno y su gris, como el de cualquier obra: es lo
   que envuelve la foto por los cuatro lados y lo que hace que una tarjeta se
   lea como tarjeta. Quitárselo dejaba la foto a sangre y el gris solo en la
   barra del título, que es justo lo que se veía distinto al resto.

   La foto llega con ese mismo gris de fondo (lo pone sellar-fotos-mayoreo.js)
   así que el aire que deja contain no se distingue del panel. Y sin
   drop-shadow: sobre una foto con fondo dibuja la sombra del RECTÁNGULO, no
   la del marco. */
.obra.obra-mayoreo .obra-foto { background: var(--ws-bloque); }
.obra.obra-mayoreo .obra-img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain; object-position: center;
  /* El fondo del PROPIO <img>, que con contain se ve en las bandas que
     sobran. Venía en crema desde una regla de hace mucho (.obra-img, allá
     arriba) que ninguna posterior reinicia; con cover jamás se notó porque
     no sobra nada, y aquí pintaba dos franjas beige a lo ancho de la
     tarjeta que parecían un error de la foto. */
  background: var(--ws-bloque);
  filter: none; border-radius: 0;
}
/* Con .obra delante a propósito, para pesar más que las reglas de 'lámina
   suelta'. Esas le ponen max-width: 74% y object-fit: contain a toda imagen
   que no sea escena de sala —la pose de una obra cuyo render falló—, y el
   dibujo de un set cae justo en esa clasificación sin ser eso: su render no
   falló, el dibujo ES la imagen buena. El max-width fue el que encogió las
   tarjetas al 74% aunque aquí dijera width: 100%: un máximo recorta a un
   ancho aunque el ancho venga de una regla que gana. Por eso también se
   apagan los máximos, no solo se declara el ancho. */
.obra.obra-set .obra-img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; object-position: center;
  filter: none; border-radius: 0;
}

/* Todas del mismo tamaño: la escena llena su hueco y se recorta por los
   lados, que es donde solo hay pared. Si el render de Pictufy falló, la
   lámina suelta sí se enseña entera. */
.obra-img, .obra-img.obra-sala {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; object-position: center top;
  display: block; filter: none; transform: none; transition: none;
}
.obra:hover .obra-img { transform: none; }
.obra-img:not(.obra-sala) {
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 42, 50, .14));
}
.obra-img.sin-foto {
  width: 70%; height: auto; aspect-ratio: 3/4; margin: 0 auto;
  background: #E6E5E1; border-radius: 2px;
}

/* ── El sello, abajo a la izquierda ──
   Sobresale por la izquierda como el suyo: la esquina cuadrada de ese
   lado hace que se lea pegado al borde y no flotando encima. */
.obra-sello {
  position: absolute; left: 0; right: auto; top: auto; bottom: 11%;
  z-index: 2; margin: 0;
  padding: 6px 10px; border-radius: 0 2px 2px 0;
  font-family: inherit; font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  line-height: 1; text-transform: uppercase; white-space: nowrap;
  background: var(--ws-magenta); color: #fff;
}
.obra-sello.oferta, .obra-sello.rebaja { background: var(--ws-magenta); color: #fff; }
.obra-sello.destacado { background: var(--ws-texto); color: #fff; }

/* El cintillo de mayoreo: misma forma, mismo magenta y misma altura que el de
   oferta —la tienda ya enseña así sus rebajas y el cliente ya sabe leerlo—
   pero con el NÚMERO de protagonista y la palabra en pequeño al lado. Un
   "hasta 10% de descuento por volumen" escrito entero no se lee en una
   tarjeta de 300 px; "−10%" sí. */
.obra-sello.mayoreo {
  display: flex; align-items: baseline; gap: 5px;
  padding: 7px 11px 7px 10px; border-radius: 0 3px 3px 0;
  letter-spacing: normal; text-transform: none;
  box-shadow: 0 2px 10px rgba(182, 17, 81, .28);
}
.obra-sello.mayoreo b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* En mayoreo el título DESCRIBE —color y milímetros de moldura— y es lo que
   separa un modelo de otro; cortarlo con puntos suspensivos en una rejilla de
   cinco deja treinta tarjetas que dicen "Marco para diploma · Gris…". Se le
   dan dos renglones y una altura fija, para que los pies sigan alineados. */
.obra-mayoreo .obra-titulo {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; min-height: 2.8em;
}
.obra-unidad {
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 11px; font-weight: 600; color: var(--gris); margin-left: 3px;
}
.obra-sello.mayoreo span {
  font-family: 'Outfit', Inter, sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; opacity: .92;
}

/* ── Los dos botones redondos, arriba a la derecha ──
   Salen al pasar el ratón. En pantallas de tocar no hay "pasar el
   ratón", así que ahí se quedan puestos (más abajo). */
.obra-acciones {
  position: absolute; top: 7%; right: -6px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.obra:hover .obra-acciones, .obra:focus-within .obra-acciones {
  opacity: 1; visibility: visible;
}
.obra-redonda {
  all: unset;
  box-sizing: border-box;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ws-magenta); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 42, 50, .18);
  transition: background .15s ease, transform .15s ease;
}
.obra-redonda:hover { background: var(--ws-magenta-claro); transform: scale(1.06); }
.obra-redonda svg {
  width: 19px; height: 19px;
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Un favorito ya guardado se queda a la vista: si solo saliera al pasar
   el ratón, no habría forma de ver qué está guardado. */
.obra-redonda.obra-fav.activo svg { fill: #fff; stroke: #fff; }
.obra:not(:hover) .obra-acciones:has(.obra-fav.activo) { opacity: 1; visibility: visible; }
.obra:not(:hover) .obra-acciones:has(.obra-fav.activo) .obra-rapida { display: none; }

/* ── El pie, dentro del mismo bloque gris ── */
.obra-pie {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 0;
  padding: 0 6.5%; margin: 0; text-align: left; flex-wrap: nowrap;
}
.obra-titulo {
  font-size: 17px; font-weight: 500; color: var(--ws-texto);
  line-height: 1.4; letter-spacing: .01em; margin: 0;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obra:hover .obra-titulo {
  color: var(--ws-texto);
  text-decoration: underline; text-underline-offset: 3px;
}

/* El artista, en pequeñito debajo del título. */
.obra-artista {
  font-size: 11px; font-weight: 400; color: var(--ws-texto); opacity: .65;
  line-height: 1.5; margin-top: 5px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── El precio, todo en un renglón ── */
.obra-cifras {
  display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap;
  gap: 0 8px; margin-top: 9px; text-align: left; line-height: 1.3;
}
.obra-desde {
  font-size: 13px; font-weight: 700; color: var(--ws-texto);
  margin-right: -3px;
}
.obra-precio {
  font-family: inherit;
  font-size: 16px; font-weight: 700; color: var(--ws-texto);
  margin: 0; letter-spacing: 0; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.obra-precio.oferta { color: var(--ws-texto); text-decoration: none; }
.obra-precio sup, .obra-antes sup {
  font-size: .58em; font-weight: 700; top: -.62em; margin-left: 1px;
}
.obra-antes {
  font-size: 14.4px; font-weight: 700; color: var(--ws-texto); opacity: .5;
  text-decoration: line-through; margin: 0;
  font-variant-numeric: tabular-nums;
}
.obra-ahorra {
  font-size: 12px; font-weight: 600; color: var(--ws-magenta); letter-spacing: .01em;
}
.obra-precio.especial {
  font-size: 13px; font-weight: 500; color: var(--ws-texto); opacity: .6;
  text-decoration: none;
}

/* ── La vitrina apretada de la portada: lo mismo, más chico ── */
.obras.densa { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.obras.densa .obra { gap: 0; padding-bottom: 15px; }
.obras.densa .obra-foto { padding: 8%; }
.obras.densa .obra-pie { padding: 0 6%; }
.obras.densa .obra-titulo { font-size: 14px; }
.obras.densa .obra-artista { display: block; font-size: 10.5px; margin-top: 3px; }
.obras.densa .obra-cat { display: none; }
.obras.densa .obra-desde { font-size: 11.5px; }
.obras.densa .obra-precio { font-size: 14px; }
.obras.densa .obra-antes { font-size: 12.5px; }
.obras.densa .obra-ahorra { font-size: 10.5px; }
.obras.densa .obra-sello { bottom: 9%; padding: 5px 8px; font-size: 9.5px; }
.obras.densa .obra-redonda { width: 34px; height: 34px; }
.obras.densa .obra-redonda svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .obras { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .obra { padding-bottom: 15px; }
  .obra-foto { padding: 8%; }
  .obra-titulo { font-size: 14px; }
  .obra-artista { font-size: 10.5px; }
  .obra-desde { font-size: 11.5px; }
  .obra-precio { font-size: 14px; }
  .obra-antes { font-size: 12.5px; }
  .obra-ahorra { font-size: 10.5px; }
  .obra-pie { flex-wrap: nowrap; }
  /* Pegados al borde y no fuera: en el teléfono la calle entre tarjetas
     es de 12 px y un botón que sobresale se monta sobre la vecina. */
  .obra-acciones { right: 6px; top: 6px; }
  .obra-redonda { width: 36px; height: 36px; }
  .obra-redonda svg { width: 16px; height: 16px; }
}

/* Sin ratón no hay hover: los botones se quedan puestos. */
@media (hover: none) {
  .obra-acciones { opacity: 1; visibility: visible; }
  .obra:not(:hover) .obra-acciones:has(.obra-fav.activo) .obra-rapida { display: grid; }
}
.obra-ahorra { text-transform: uppercase; }

.obra-redonda:hover svg, .obra-redonda:focus svg { stroke: #fff; }
.obra-redonda.obra-fav.activo:hover svg { fill: #fff; stroke: #fff; }

/* ── La vuelta de la tarjeta ──
   Debajo va la escena de sala; encima, la lámina sola sobre el mismo
   gris del bloque, así que al aparecer no se ve la sala por detrás. */
.obra-lienzo { position: relative; display: block; width: 100%; height: 100%; }
.obra-vuelta {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: var(--ws-bloque);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.obra-vuelta img {
  max-width: 82%; max-height: 82%;
  width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 42, 50, .18));
}
.obra:hover .obra-vuelta.lista, .obra:focus-within .obra-vuelta.lista {
  opacity: 1; visibility: visible;
}

/* ═══════════ POR DÓNDE VA A COLGARSE ═══════════
   Cinco tarjetas que entran por el cuarto y no por el estilo. La primera
   ocupa dos columnas: la sala es donde más se compra, y una rejilla de cinco
   iguales deja un hueco feo en la última fila. */
/* Cinco tarjetas: la primera, alta, a la izquierda, y las otras cuatro en un
   cuadro de 2×2 a su lado. Antes era una rejilla de 4 columnas con la primera
   a doble ancho: 2+1+1 arriba y 1+1 abajo, que dejaba dos espacios vacíos a
   la derecha de la segunda fila. Con cinco cuartos, 1+4 es la única forma de
   que la sección cierre en rectángulo.

   Las alturas las pone la fila y no el aspect-ratio: con aspect-ratio, la
   grande (3:2 a doble ancho) y las chicas (3:4) salían a alturas distintas y
   los bordes de abajo no coincidían. */
.uso-rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: clamp(200px, 20vw, 300px);
  gap: 16px;
  margin-top: 34px;
}
.uso-tarjeta {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  background: var(--crema);
}
.uso-tarjeta:first-child { grid-row: span 2; }

.uso-tarjeta img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Son mockups: el cuadro cuelga en la mitad de arriba de la escena y abajo
     va el mueble. Recortado al centro, la tarjeta ancha del teléfono (16:9)
     le cortaba la parte de arriba al marco; cargado hacia arriba se queda
     entero y lo que se sacrifica es el piso. */
  object-position: center 28%;
  display: block;
  transition: transform .5s ease;
}
.uso-tarjeta:hover img { transform: scale(1.04); }

/* El velo va de abajo hacia arriba y solo en la mitad baja: la obra tiene que
   seguir viéndose: es lo que se está vendiendo. */
.uso-tarjeta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,18,.78) 0%, rgba(20,20,18,.35) 38%, transparent 62%);
}
.uso-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 18px 18px 16px;
  color: #fff;
}
.uso-texto h3 {
  margin: 0 0 3px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.06rem; font-weight: 600; line-height: 1.25;
  color: #fff;
}
.uso-texto span {
  font-size: .82rem;
  color: rgba(255,255,255,.82);
}

/* En pantallas chicas, dos columnas: la primera a todo lo ancho y las otras
   cuatro en 2×2 debajo, que sigue siendo 1+4 y cierra igual. Aquí sí manda el
   aspect-ratio: sin columna vecina no hay fila con cuál empatar la altura. */
@media (max-width: 900px) {
  .uso-rejilla { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 12px; }
  .uso-tarjeta { aspect-ratio: 3 / 4; }
  .uso-tarjeta:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .uso-texto { padding: 14px; }
  .uso-texto h3 { font-size: .97rem; }
  .uso-texto span { font-size: .76rem; }
}

/* El encabezado de una página de uso: el título de verdad de la página y un
   párrafo que explica de qué va. */
.uso-intro-titulo {
  margin: 0 0 10px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  color: var(--negro);
}
.uso-intro-texto {
  margin: 0;
  max-width: 68ch;
  color: #6B6A66;
  line-height: 1.62;
}

/* ═══════════ CONSENTIMIENTO ═══════════
   Abajo y discreto, no un muro a media pantalla: la ley pide preguntar, no
   secuestrar la tienda hasta que alguien conteste. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--borde, #e6e2d8); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 10px 40px rgba(28,28,26,.16);
}
.consent-texto { flex: 1 1 320px; font-size: .84rem; line-height: 1.55; color: #5d5c58; }
.consent-texto a { color: var(--dorado, #BA7517); }
.consent-botones { display: flex; gap: 9px; flex: 0 0 auto; }
.consent-botones button {
  border-radius: 9px; padding: 10px 16px; cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.consent-no { background: none; border: 1.5px solid var(--borde, #e6e2d8); color: #5d5c58; }
.consent-no:hover { border-color: #b9b5aa; }
.consent-si { background: var(--negro, #2C2C2A); border: 1.5px solid var(--negro, #2C2C2A); color: #fff; }
.consent-si:hover { background: #000; }
@media (max-width: 560px) {
  .consent { left: 10px; right: 10px; bottom: 10px; padding: 14px; }
  .consent-botones { width: 100%; }
  .consent-botones button { flex: 1; }
}