/* ==========================================================================
   MOGARDO. Hoja de estilo única del sitio.
   Concepto: el instante en que el día se encuentra con la noche.
   ========================================================================== */

/* Paleta y tipografía según MOGARDO_Brandbook.pdf. Regla dura: solo Rubí, Noir y White.
   Las variaciones visuales usan transparencias de esos tres colores. */
:root {
  --noche:      #000000;  /* NOIR  */
  --noche-2:    #000000;
  --crema:      #FFFFFF;  /* WHITE */
  --crema-2:    rgba(0, 0, 0, 0.08);
  --arena:      #FFFFFF;
  --carmin:     #881326;  /* RUBÍ  */
  --oro:        #881326;  /* la marca no tiene oro: cae a Rubí */
  --texto:      #000000;
  --texto-tenue:#000000;

  /* Gris pedido por la clienta para diferenciar secciones sin salir del
     blanco y negro. Es el único color fuera de Rubí, Noir y White, y se usa
     siempre por variable para poder cambiarlo en un solo sitio. */
  --gris:       #EDEDED;

  /* Arimo: titulares y mensajes importantes, en mayúsculas. Archivo: cuerpo y legales. */
  --serif: 'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ancho: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --t: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.75;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Brandbook p.23: Arimo se usa en MAYÚSCULAS en la mayoría de los casos. */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.contenedor-ancho { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }

/* --------------------------------- tipos -------------------------------- */

.display  { font-size: clamp(2.75rem, 1.5rem + 6vw, 7rem); letter-spacing: 0.02em; }
.titulo   { font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); overflow-wrap: anywhere; }
.duo__texto .titulo, [data-atelier] .titulo { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 600px) { .doc-legal > .titulo { font-size: clamp(1.05rem, 5.3vw, 2rem); overflow-wrap: normal; } }
@media (max-width: 480px) { :lang(de) #taylormade .titulo { font-size: clamp(1.5rem, 7.5vw, 2rem); } }
.subtitulo{ font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

/* Tagline de marca. Literal del brandbook, no se traduce ni se reescribe. */
.tagline {
  font-family: var(--serif);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--carmin);
  margin: 0 0 2rem;
}
.seccion--noche .tagline { color: var(--crema); }

.etiqueta {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.entradilla {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.85;
  max-width: 62ch;
}

/* ---------------------------------- chino -------------------------------- */

/* Preparado para cuando exista `zh`: hoy no hay ninguna pagina con
   lang="zh", asi que esta regla no afecta a nada. Mete una fuente CJK del
   sistema en las dos pilas, delante de las de respaldo y justo detras de la
   tipografia de marca. El orden es deliberado: el navegador resuelve la
   fuente glifo a glifo, asi que con Arimo o Archivo primero el latin
   (MOGARDO, IBIZA, los precios en EUR) mantiene la tipografia de marca y solo
   los ideogramas, que no existen en ellas, caen en la CJK. Poner PingFang
   delante se llevaria tambien el latin, porque trae sus propios glifos
   latinos, y eso si perderia Arimo. Ademas quita el espaciado entre letras,
   que en chino separa ideogramas y estropea la lectura, y el paso a
   mayusculas, que en chino no existe y solo afectaria al latin intercalado. */
:root:lang(zh),
:lang(zh) {
  --serif: 'Arimo', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:  'Archivo', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Hiragino Sans GB', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
:lang(zh) .display, :lang(zh) .titulo, :lang(zh) .subtitulo,
:lang(zh) .tagline, :lang(zh) .etiqueta, :lang(zh) .btn,
:lang(zh) .producto-card h3, :lang(zh) .producto-card .precio,
:lang(zh) .carrito-fila__nombre, :lang(zh) .nav > a, :lang(zh) .desplegable__boton {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --------------------------------- botones ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 2.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--noche);
  background: var(--noche);
  color: var(--crema);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: transparent; color: var(--noche); }

.btn-linea { background: transparent; color: var(--noche); }
.btn-linea:hover { background: var(--noche); color: var(--crema); }

.btn-claro { background: var(--crema); color: var(--noche); border-color: var(--crema); }
.btn-claro:hover { background: transparent; color: var(--crema); }

.enlace-sub {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--t);
}
.enlace-sub:hover { opacity: 0.55; }

/* -------------------------------- cabecera ------------------------------ */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  transition: background var(--t), box-shadow var(--t), padding var(--t);
}
/* Sobre el hero la cabecera es transparente y blanca; en el resto de páginas,
   fondo White desde el primer píxel. Al hacer scroll, las dos se resuelven en
   .cabecera--fija: fondo blanco y texto Noir. */
.cabecera:not(.cabecera--sobre-oscuro) { background: var(--crema); }
.cabecera--fija { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); padding-block: 0.75rem; }

/* Logotipo oficial en línea (img/marca/mogardo-logotipo.svg). Pinta con currentColor:
   se ve en el color que hereda de la cabecera o del pie, que solo es Noir o White. */
.cabecera__marca { flex: none; width: 190px; transition: width var(--t); }
.cabecera--fija .cabecera__marca { width: 160px; }
.cabecera__marca svg, .pie__marca svg { display: block; width: 100%; height: auto; }

/* Menú. Regla de la clienta: los botones no van encuadrados, solo la palabra
   en MAYÚSCULAS y en Arimo. */
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2.1rem); }
.nav > a, .desplegable__boton {
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  position: relative;
  padding-block: 0.35rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.nav > a::after, .desplegable__boton::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--t);
}
.nav > a:hover::after,
.nav > a[aria-current="page"]::after,
.desplegable__boton:hover::after,
.desplegable__boton[aria-expanded="true"]::after { width: 100%; }

/* Contador de wishlist y carrito. */
.contador {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
  padding: 0 0.34rem;
  min-width: 1.15em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* ------------------------------ desplegables ---------------------------- */
/* Sin JavaScript el panel se abre con :hover y :focus-within, así que sus
   enlaces siguen siendo alcanzables con el teclado. site.js solo añade el
   clic, Escape y el cierre al pulsar fuera. */

.desplegable { position: relative; }
.desplegable__punta { width: 0; height: 0; border: 0.26rem solid transparent; border-top-color: currentColor; transform: translateY(0.13rem); transition: transform var(--t); }
.desplegable__boton[aria-expanded="true"] .desplegable__punta { transform: translateY(-0.13rem) rotate(180deg); }

.desplegable__panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  min-width: 13rem;
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.25rem;
  background: var(--crema);
  color: var(--texto);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 12px 34px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 10;
}
.desplegable:hover > .desplegable__panel,
.desplegable:focus-within > .desplegable__panel,
.desplegable__panel[data-abierto="true"] { opacity: 1; visibility: visible; transform: none; }

.desplegable__panel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  transition: color var(--t);
}
.desplegable__panel a:hover { color: var(--carmin); }
.desplegable__panel a[aria-current] { color: var(--carmin); }

.bandera { width: 1.15rem; height: auto; aspect-ratio: 3 / 2; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.desplegable--idioma .desplegable__codigo { font-size: 0.66rem; letter-spacing: 0.14em; }

.hamburguesa { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.hamburguesa span { display: block; width: 24px; height: 1px; margin: 6px auto; background: currentColor; transition: transform var(--t), opacity var(--t); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* cabecera sobre imagen oscura */
.cabecera--sobre-oscuro:not(.cabecera--fija) { color: var(--crema); }

@media (max-width: 900px) {
  .hamburguesa { display: block; }
  /* La cabecera tiene altura fija; el area de scroll comienza debajo,
     tambien cuando backdrop-filter hace de bloque contenedor. */
  .cabecera { height: 5rem; padding-block: .75rem; }
  .nav {
    position: fixed;
    inset: 5rem 0 auto 0;
    height: calc(100vh - 5rem);
    height: calc(100svh - 5rem);
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1rem 1.5rem 2rem;
    gap: 2rem;
    background: var(--crema);
    color: var(--texto);
    transform: translateY(-100vh);
    transform: translateY(-100svh);
    transition: transform var(--t);
  }
  .nav { visibility: hidden; }
  .nav[data-abierto="true"] { visibility: visible; transform: translateY(0); }
  .nav > * { flex-shrink: 0; }
  .nav > a, .desplegable__boton { font-size: 0.95rem; letter-spacing: 0.3em; }
  .cabecera__marca, .cabecera--fija .cabecera__marca { width: 140px; }

  /* Tienda conserva su boton y se abre al pulsarlo tambien en movil. */
  .desplegable { text-align: center; }
  .desplegable__boton { margin-inline: auto; }
  .desplegable__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: none;
    color: inherit;
    padding: 0;
    min-width: 0;
    justify-items: center;
    gap: 1.1rem;
  }
  .desplegable:not(.desplegable--idioma) .desplegable__panel { display: none; padding-top: 1.1rem; }
  .desplegable:not(.desplegable--idioma) .desplegable__panel[data-abierto="true"] { display: grid; }
  .desplegable--idioma .desplegable__boton { display: none; }
  .desplegable__panel a { font-size: 0.9rem; letter-spacing: 0.24em; padding: 0; }
  .desplegable--idioma .desplegable__panel { grid-auto-flow: column; gap: 0.9rem; }
  .desplegable--idioma .desplegable__panel a span { position: absolute; left: -9999px; }
  .desplegable--idioma .bandera { width: 1.6rem; }
  /* El panel es posicionado y tapaba la marca y el botón de cerrar: suben por encima.
     Con el panel abierto la marca pasa a Noir aunque la cabecera esté sobre la foto. */
  .cabecera__marca, .hamburguesa { position: relative; z-index: 1; }
  .cabecera:has(.nav[data-abierto="true"]) { color: var(--texto); background: var(--crema); }
}

/* ---------------------------------- hero -------------------------------- */

/* Primera pantalla: solo la cabecera, la fotografía y el logotipo MOGARDO
   IBIZA en blanco. Nada de tagline, botones ni textos, que es lo que pidió la
   clienta. La foto de telefono se activa hasta 767 px. Mogardo2334 conserva su
   encuadre completo; en horizontal el recorte lo hace CSS, sin cortar las caras. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--crema);
  background: var(--noche);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
@media (max-width: 767px) { .hero__media img { object-position: center bottom; } }
@media (min-width: 768px) and (orientation: portrait) {
  .hero { min-height: 100svh; }
  .hero__media img { object-position: center bottom; }
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* Noir en transparencia: lo justo para que el logotipo blanco se lea sobre
     una fotografía clara, sin apagar la prenda. */
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.46) 100%);
}

.hero__logotipo {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 60vw;
  max-width: 840px;
  letter-spacing: normal;
}
.hero__logotipo svg { display: block; width: 100%; height: auto; color: var(--crema); }
@media (orientation: portrait) { .hero__logotipo { width: 80vw; max-width: 560px; } }

/* --------------------------------- bloques ------------------------------ */

.seccion { padding-block: clamp(4.5rem, 9vw, 9rem); }
.seccion--noche { background: var(--noche); color: var(--crema); }
.seccion--noche .etiqueta { color: var(--arena); }

/* Fondos que rompen el blanco, como pidió la clienta: Noir, Rubí y el gris
   nuevo. Rubí y Noir comparten el tratamiento de texto claro. */
.seccion--rubi { background: var(--carmin); color: var(--crema); }
.seccion--rubi .etiqueta, .seccion--rubi .tagline { color: var(--crema); }
.seccion--gris { background: var(--gris); }

.cabecera-seccion { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cabecera-seccion .etiqueta { display: block; margin-bottom: 1.25rem; }

/* dos columnas texto + imagen */
.duo { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } .duo--invertido > :first-child { order: 2; } }

.atelier-portada .duo > * { min-width: 0; }
@media (max-width: 360px) { .atelier-portada .titulo { font-size: clamp(1.55rem, 8.1vw, 1.8rem); } }
.duo__texto h2 { margin-bottom: 1.5rem; }
.duo__texto p + p { margin-top: 1.25rem; }
.duo__texto .btn, .duo__texto .enlace-sub { margin-top: 2rem; }

/* ------------------------------- colecciones ---------------------------- */

.colecciones { display: grid; gap: 1px; background: var(--crema-2); }
@media (min-width: 800px) { .colecciones { grid-template-columns: repeat(3, 1fr); } }

.coleccion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(24rem, 46vw, 40rem);
  padding: 2.5rem;
  color: var(--crema);
  background: var(--noche-2);
  overflow: hidden;
}
.coleccion-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter var(--t);
  filter: brightness(0.72);
}
.coleccion-card:hover img { transform: scale(1.06); filter: brightness(0.6); }
.coleccion-card__txt { position: relative; z-index: 2; }
.coleccion-card h3 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); margin-bottom: 0.5rem; }
.coleccion-card p { font-size: 0.9rem; margin: 0 0 1.5rem; max-width: 34ch; opacity: 0.85; }

/* --------------------------------- valores ------------------------------ */

.valores { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 760px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valor { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 1.75rem; }
.valor h3 { font-size: 1.65rem; margin-bottom: 0.75rem; }
.valor p { margin: 0; font-size: 0.92rem; opacity: 0.8; }

/* -------------------------------- productos ----------------------------- */

/* Rejilla pedida por la clienta: 2 por fila en teléfono, 3 en tablet y 4 en
   ordenador. Todas las piezas en la misma página, sin paginación. */
.rejilla { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.producto-card { display: block; }
.producto-card__img {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--crema-2);
  margin-bottom: 1.1rem;
}
.producto-card__img > a { display: block; width: 100%; height: 100%; }
.producto-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.producto-card:hover .producto-card__img img { transform: scale(1.05); }

.producto-card h3{ font-size: 1.2rem; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
/* La clienta pidio la tarjeta entera en Arimo: nombre en mayusculas y precio
   mas pequeno debajo. Sin esta linea el precio heredaba Archivo del body.
   Vale para coleccion, portada, relacionados de ficha, wishlist y carrito,
   porque todos usan .producto-card. */
.producto-card .precio { font-family: var(--serif); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--texto-tenue); margin: 0; }

/* -------------------------- corazón de wishlist ------------------------- */
/* Lo pinta site.js con el estado de localStorage. Sin JavaScript no aparece:
   un corazón que no guarda nada engaña. */
.corazon {
  position: absolute;
  top: 0.65rem; right: 0.65rem;
  width: 2.35rem; height: 2.35rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  color: var(--noche);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.js .corazon { display: inline-flex; }
.corazon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.corazon:hover { background: var(--crema); color: var(--carmin); }
.corazon[aria-pressed="true"] { color: var(--carmin); }
.corazon[aria-pressed="true"] svg { fill: currentColor; }

/* En la ficha el corazón va en la fila de acciones, no sobre la foto. */
.ficha__acciones .corazon { position: static; width: 3.2rem; height: 3.2rem; background: transparent; border: 1px solid var(--noche); }
.ficha__acciones .corazon svg { width: 1.3rem; height: 1.3rem; }

/* ------------------------- banda editorial de portada ------------------- */

.banda { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .banda { grid-template-columns: repeat(3, 1fr); } }
.banda img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.banda__pieza { position: relative; display: block; overflow: hidden; }
.banda__pieza img { transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.banda__pieza:hover img { transform: scale(1.05); }
.banda__nombre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 1rem;
  font-family: var(--serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crema);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
}

/* ------------------------ cabecera de colección ------------------------- */
/* Compacta a propósito: al entrar ya se tienen que ver piezas. */

/* Cabecera de coleccion. La clienta pidio ver piezas nada mas entrar, asi que
   esto esta medido, no estimado: el borde superior de la primera imagen de la
   rejilla queda por debajo del 35 % del alto de pantalla en escritorio y del
   45 % en movil. El nombre y la explicacion breve siguen ahi; lo que baja es
   el tamano del H1, los margenes y el aire de la seccion, y la explicacion
   pasa a linea mas ancha y cuerpo menor para ocupar dos o tres lineas en vez
   de cuatro. El padding superior minimo (4.75rem) deja libre la cabecera fija. */
.coleccion-cabeza { text-align: center; padding-block: clamp(4.5rem, 5.5vw, 6rem) clamp(1.25rem, 2vw, 1.5rem); }
.coleccion-cabeza .etiqueta { display: block; }
.coleccion-cabeza__titulo { font-size: clamp(1.6rem, 1.05rem + 1.55vw, 2.4rem); margin-block: 0.5rem; }
.coleccion-cabeza__texto { max-width: 90ch; margin: 0 auto 0.5rem; font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); line-height: 1.6; }
.coleccion-cabeza p.etiqueta { margin: 0; }

/* ------------------------------- pasos ---------------------------------- */

.pasos { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { border-top: 1px solid var(--crema-2); padding-top: 1.5rem; }
.paso__num { font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.24em; color: var(--carmin); }
.paso h3 { font-size: 1.35rem; margin-block: 0.75rem 0.6rem; }
.paso p { margin: 0; font-size: 0.92rem; }

/* --------------------- wishlist y carrito guardados --------------------- */
/* Las dos páginas se pintan desde localStorage con el catálogo que el
   generador deja en línea. Sin JavaScript se ve el mensaje de lista vacía,
   que es la verdad: no hay nada guardado que mostrar. */

.lista-guardada { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .lista-guardada { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .lista-guardada { grid-template-columns: repeat(4, 1fr); } }
.lista-guardada:empty { display: none; }

.lista-guardada--carrito { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--crema-2); }
@media (min-width: 768px)  { .lista-guardada--carrito { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .lista-guardada--carrito { grid-template-columns: 1fr; } }

.guardada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.85rem; }
.guardada__quitar {
  font-family: var(--serif);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  padding: 0.35rem 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.guardada__quitar:hover { color: var(--carmin); }

/* Fila del carrito: foto pequeña, nombre, cantidad e importe. */
.carrito-fila {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0.5rem 1.25rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--crema-2);
}
.carrito-fila img { width: 5rem; aspect-ratio: 2 / 3; object-fit: cover; }
.carrito-fila__nombre { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.carrito-fila__precio { font-family: var(--serif); font-size: 1rem; white-space: nowrap; }
.carrito-fila__cantidad { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.carrito-fila__cantidad label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-tenue); }
.carrito-fila__cantidad input { width: 4rem; font-family: var(--sans); font-size: 0.95rem; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--crema-2); padding: 0.3rem 0; }
.carrito-fila__cantidad input:focus { outline: none; border-color: var(--carmin); }

.carrito-cierre { margin-top: 2.5rem; }
.carrito-total { display: flex; gap: 1.5rem; justify-content: space-between; font-family: var(--serif); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1.5rem; }

.lista-vacia { max-width: 62ch; }
.lista-vacia[hidden] { display: none; }

.nota-produccion {
  display: inline-block;
  margin-bottom: 2.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--carmin);
  font-size: 0.85rem;
  color: var(--texto-tenue);
}

/* --------------------------- ficha de producto -------------------------- */

.ficha { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 950px) { .ficha { grid-template-columns: 1.15fr 1fr; } }

.ficha__media img { width: 100%; }

/* Galería de la ficha. Sin JavaScript las fotos quedan apiladas, que es una
   ficha perfectamente válida. Con él, la primera manda y el resto baja a
   miniaturas que la sustituyen al pulsarlas. */
.galeria { display: grid; gap: 0.75rem; }
.galeria__foto { width: 100%; background: var(--crema-2); }

.galeria__miniaturas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.galeria__mini {
  flex: 0 0 auto;
  width: clamp(52px, 11%, 84px);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  background: var(--crema-2);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--t);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria__mini:hover { opacity: 1; }
.galeria__mini:focus-visible { opacity: 1; outline: 2px solid var(--carmin); outline-offset: 2px; }
.galeria__mini[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--carmin); }

@media (min-width: 950px) { .ficha__info { position: sticky; top: 7rem; } }
.ficha__info h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); margin-bottom: 0.75rem; }
.ficha__precio { font-family: var(--serif); font-size: 1.75rem; margin-block: 1.5rem; }
.ficha__datos { list-style: none; margin: 2rem 0; padding: 0; border-top: 1px solid var(--crema-2); }
.ficha__datos li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--crema-2); font-size: 0.9rem; }
.ficha__datos span:first-child { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.68rem; color: var(--texto-tenue); }
.ficha__desc p + p { margin-top: 1.1rem; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.ficha__aviso { margin-top: 1.5rem; font-size: 0.82rem; color: var(--texto-tenue); }

/* ---------------------------------- blog -------------------------------- */

.articulos { display: grid; gap: clamp(2rem,4vw,3rem); }
@media (min-width: 800px) { .articulos { grid-template-columns: repeat(2, 1fr); } }
.articulo-card { border-top: 1px solid var(--crema-2); padding-top: 1.75rem; }
.articulo-card h3 { font-size: 1.75rem; margin-block: 0.75rem 1rem; }
.articulo-card p { font-size: 0.92rem; color: var(--texto-tenue); margin: 0 0 1.5rem; }

.prosa { max-width: 66ch; margin-inline: auto; }
.prosa p { margin-block: 0 1.5rem; font-size: 1.05rem; line-height: 1.9; }
.prosa p:first-of-type { font-size: 1.2rem; border-left: 2px solid var(--carmin); padding-left: 1.5rem; }

/* -------------------------------- formulario ---------------------------- */

.form { display: grid; gap: 1.5rem; max-width: 46rem; }
@media (min-width: 700px) { .form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.campo { display: flex; flex-direction: column; gap: 0.5rem; }
.campo label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-tenue); }
.campo input, .campo select, .campo textarea {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 300;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--arena);
  padding: 0.7rem 0;
  transition: border-color var(--t);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid currentColor; outline-offset: 4px; border-color: currentColor; }
.campo textarea { resize: vertical; min-height: 7rem; }
.campo select option { color: var(--texto); background: var(--crema); }
.seccion--noche .campo input, .seccion--noche .campo select, .seccion--noche .campo textarea { border-bottom-color: rgba(255,255,255,0.35); color: var(--crema); }
.seccion--noche .campo label { color: var(--arena); }

.form__estado { font-size: 0.9rem; min-height: 1.5rem; }
.form__estado[data-tipo="error"] { color: var(--carmin); }

/* ---------------------------------- pie --------------------------------- */

.pie { background: var(--noche); color: var(--crema); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.pie .tagline { color: var(--crema); }
.pie__cols { display: grid; gap: 2.5rem; margin-bottom: 3.5rem; }
@media (min-width: 800px) { .pie__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pie__titulo { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--arena); margin-bottom: 1.25rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pie a { font-size: 0.9rem; opacity: 0.82; transition: opacity var(--t); }
.pie a:hover { opacity: 1; }
/* El logotipo no lleva la opacidad de los demás enlaces del pie: White exacto. */
.pie .pie__marca { display: block; width: 220px; margin-bottom: 1rem; opacity: 1; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 2rem; font-size: 0.78rem; opacity: 0.6; }

/* ------------------------------- animación ------------------------------ */

/* El estado oculto se cuelga de .js, que pone en <html> el script en linea de
   la cabecera. Quien revela es JavaScript, asi que sin JavaScript no se puede
   ocultar nada: sin esa condicion, un navegador con el script bloqueado veria
   la web entera en blanco. */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--noche); color: var(--crema); padding: 1rem 1.5rem; z-index: 200;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ---------------------------- foco visible ------------------------------ */
/* Un único foco para todo el sitio. Rubí sobre claro y White sobre oscuro,
   para que se vea en las dos mitades de la paleta. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--carmin);
  outline-offset: 3px;
}
.seccion--noche :where(a, button, input, select, textarea):focus-visible,
.seccion--rubi :where(a, button, input, select, textarea):focus-visible,
.pie :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cabecera--sobre-oscuro:not(.cabecera--fija) :where(a, button):focus-visible {
  outline-color: var(--crema);
}

:lang(zh) [data-atelier] .titulo { text-wrap: balance; }

.solicitud-dialog { width: min(40rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--noche); background: var(--crema); color: var(--texto); overflow-y: auto; }
.solicitud-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.solicitud-dialog__cabecera { display: flex; align-items: start; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.solicitud-dialog__cerrar { flex: 0 0 44px; height: 44px; padding: 0; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; }
.solicitud-dialog p { margin: 0 0 1rem; }
.solicitud-dialog .campo, .solicitud-dialog__cabecera h2 { min-width: 0; }
.solicitud-dialog input, .solicitud-dialog textarea { width: 100%; }
.solicitud-dialog .btn { max-width: 100%; white-space: normal; }
.solicitud-dialog__privacidad { font-size: .88rem; }