/* NIDDAPP — estilos comunes. Mobile first, sin dependencias externas.
   Paleta cálida y serena: lino, arena, carbón suave y un único acento salvia. */
:root {
  --lino: #f4f1ec;       /* fondo principal (también el fondo de las fotos de producto) */
  --arena: #eae5dc;      /* secciones alternas */
  --blanco: #faf8f4;
  --texto: #2e2c29;
  --texto-2: #66615a;
  --linea: #dcd6cc;
  --salvia: #5a6e5e;     /* acento */
  --salvia-oscuro: #48594c;
  --plata-1: #b9bcbe;
  --plata-2: #eceded;
  --negro-mate: #232325;
  --ancho: 74rem;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lino);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--salvia-oscuro); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--texto); }
:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .3em; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--texto); color: #fff; padding: .6rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; top: 1rem; color: #fff; }
.oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 52rem) { .contenedor { padding: 0 2.5rem; } }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; padding: .5rem 0; }
.marca img { display: block; }
.marca-logo { width: 56px; height: 56px; }
.marca-texto { width: auto; height: 17px; }
@media (min-width: 52rem) {
  .marca-logo { width: 64px; height: 64px; }
  .marca-texto { height: 19px; }
}
.marca--pie img { width: 64px; height: 64px; }
.menu-boton { display: none; background: none; border: 1px solid var(--linea); border-radius: 999px; font: inherit; font-size: .9rem; color: var(--texto); padding: .4rem 1rem; cursor: pointer; }
.js .menu-boton { display: inline-block; }
.nav { width: 100%; }
.js .nav { display: none; }
.js .nav.abierta { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0 0 1rem; }
.nav li { margin: 0; }
.nav a { display: block; padding: .7rem 0; color: var(--texto-2); text-decoration: none; border-top: 1px solid var(--linea); font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); }
@media (min-width: 52rem) {
  .js .menu-boton { display: none; }
  .nav, .js .nav { display: block; width: auto; }
  .nav ul { display: flex; gap: 2.25rem; padding: 0; }
  .nav a { border: 0; padding: .4rem 0; font-size: .9rem; letter-spacing: .02em; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--texto); }
}

/* Secciones */
.seccion { padding: 4.5rem 0; }
.seccion--arena { background: var(--arena); }
.seccion--linea { border-top: 1px solid var(--linea); }
@media (min-width: 52rem) { .seccion { padding: 7rem 0; } }
.antetitulo { font-family: var(--sans); text-transform: uppercase; letter-spacing: .24em; font-size: .75rem; color: var(--texto-2); margin-bottom: 1.25rem; }
.entradilla { font-size: 1.15rem; color: var(--texto-2); max-width: 36rem; }
.cabecera-pagina { padding: 3.5rem 0 1rem; }
@media (min-width: 52rem) { .cabecera-pagina { padding: 6rem 0 2rem; } }
.cabecera-seccion { max-width: 38rem; margin-bottom: 3rem; }

/* Hero */
.hero .contenedor { display: grid; gap: 1.5rem; align-items: center; padding-top: 2.5rem; padding-bottom: 2rem; }
.hero-imagen { margin: 0; justify-self: center; max-width: 34rem; width: 100%; }
/* Funde los bordes de la foto de estudio con el fondo lino */
.fundido {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent);
  mask-composite: intersect;
}
@media (min-width: 52rem) {
  .hero .contenedor { grid-template-columns: 6fr 5fr; gap: 4rem; padding-top: 3rem; padding-bottom: 3rem; }
}

/* Botones y enlaces de acción */
.botones { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 2rem; }
.boton {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--salvia); color: #fff; text-decoration: none; font-size: .95rem; font-weight: 500;
  border: 1px solid var(--salvia); line-height: 1.2; letter-spacing: .01em;
}
.boton:hover { background: var(--salvia-oscuro); border-color: var(--salvia-oscuro); color: #fff; }
.boton--contorno { background: transparent; color: var(--salvia-oscuro); }
.boton--contorno:hover { background: var(--salvia); color: #fff; }
.enlace-flecha { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--texto); padding-bottom: .1em; font-size: .95rem; }
.enlace-flecha::after { content: " →"; }
.enlace-flecha:hover { color: var(--salvia-oscuro); border-color: var(--salvia-oscuro); }

/* Rejillas */
.dos-columnas { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .dos-columnas--estrecha { grid-template-columns: 2fr 3fr; }
}
.foto { margin: 0; }
.foto img { width: 100%; border-radius: 2px; }
.foto figcaption { font-size: .85rem; color: var(--texto-2); padding-top: .75rem; }

/* Lista numerada de características */
.numeradas { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; counter-reset: num; }
.numeradas li { counter-increment: num; border-top: 1px solid var(--texto); padding-top: 1.25rem; margin: 0; }
.numeradas li::before { content: counter(num, decimal-leading-zero); display: block; font-size: .8rem; letter-spacing: .15em; color: var(--texto-2); margin-bottom: .9rem; }
.numeradas h3 { margin-bottom: .4em; }
.numeradas p { color: var(--texto-2); margin: 0; font-size: 1rem; }
@media (min-width: 40rem) { .numeradas { grid-template-columns: repeat(2, 1fr); } }
/* Tarjetas con dibujo del manual: el dibujo se alinea abajo para que ambos queden a la misma altura */
.numeradas .enlace-flecha { display: inline-block; margin-top: 1rem; }
.numeradas--dibujo li { display: flex; flex-direction: column; }
@media (min-width: 40rem) { .numeradas--dibujo { column-gap: 4rem; } }
@media (min-width: 64rem) { .numeradas--dibujo { column-gap: 7rem; } }
.numeradas--dibujo p { margin-bottom: 2.5rem; }
.lista-cuidado { margin: 0; }
.lista-cuidado li { padding: 1.1rem 0; color: var(--texto-2); }
.lista-cuidado strong { display: block; color: var(--texto); font-weight: 600; margin-bottom: .2rem; }
.dibujo-limpieza, .dibujo-lateral { display: block; width: 100%; max-width: 15rem; height: auto; margin-top: 2rem; }
.dibujo-lateral--icono { max-width: 11rem; }
.dibujo-pais { display: block; width: auto; height: 9rem; margin-top: 1.5rem; }
.dibujo-pais--ancho { height: 8rem; }
@media (min-width: 52rem) {
  .dibujo-pais { height: 14rem; margin-top: 2.5rem; }
  .dibujo-pais--ancho { height: 12rem; }
}
@media (min-width: 52rem) {
  .dibujo-limpieza, .dibujo-lateral { max-width: 20rem; margin-top: 2.5rem; }
  .dibujo-lateral--icono { max-width: 14rem; }
}
.numeradas-dibujo { width: 100%; max-width: 34rem; height: auto; margin-top: auto; align-self: center; }
@media (min-width: 64rem) { .numeradas--4 { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } .numeradas--3 { grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; } }

/* Lista con líneas finas */
.lista-lineas { list-style: none; padding: 0; margin: 0 0 2rem; }
.lista-lineas li { padding: .85rem 0; border-bottom: 1px solid var(--linea); margin: 0; }
.lista-lineas li:first-child { border-top: 1px solid var(--linea); }

/* Variantes */
.variantes { display: grid; gap: 0; }
.variante { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--linea); }
.variante:last-child { border-bottom: 1px solid var(--linea); }
.variante h3 { margin: 0; }
.variante p { margin: 0; color: var(--texto-2); font-size: 1rem; }
.variante .boton { grid-column: 1 / -1; justify-self: start; margin-top: .75rem; }
.muestra { width: 4.5rem; height: 4.5rem; border-radius: 50%; grid-row: span 2; }
.muestra--plata { background: radial-gradient(circle at 30% 25%, var(--plata-2), var(--plata-1) 75%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.muestra--negro { background: radial-gradient(circle at 30% 25%, #3a3a3c, var(--negro-mate) 70%); }
@media (min-width: 52rem) {
  .variante { grid-template-columns: auto 1fr auto; padding: 2.25rem 0; }
  .variante .boton { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}

/* Variantes con foto de estudio */
.variantes-fotos { display: grid; gap: 3rem 2rem; }
@media (min-width: 40rem) { .variantes-fotos { grid-template-columns: 1fr 1fr; } }
.variante-foto { display: flex; flex-direction: column; align-items: center; text-align: center; }
.variante-foto figure { margin: 0 0 1.25rem; width: 100%; max-width: 26rem; }
.variante-foto figure img { width: 100%; mix-blend-mode: multiply; }
.variante-foto .cabecera-variante { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: .35rem; }
.variante-foto .muestra { width: 1.1rem; height: 1.1rem; grid-row: auto; }
.variante-foto h3 { margin: 0; }
.variante-foto p { color: var(--texto-2); margin-bottom: 1.25rem; }
.variante-foto .boton { margin-top: auto; }

/* Anatomía 4 en 1: una sola foto con los elementos señalados */
.anatomia { position: relative; max-width: 64rem; margin: 0 auto; }
.anatomia-foto { position: relative; width: min(78%, 22rem); margin: 0 auto; }
.anatomia-foto img { width: 100%; }
.punto {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--lino); border: 1px solid var(--salvia); color: var(--salvia-oscuro);
  font-size: .72rem; letter-spacing: .02em; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(244, 241, 236, .7);
}
.anatomia-lista { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; counter-reset: anat; }
.anatomia-lista li { margin: 0; border-top: 1px solid var(--texto); padding-top: 1rem; counter-increment: anat; }
.anatomia-lista li::before { content: counter(anat, decimal-leading-zero); display: block; font-size: .78rem; letter-spacing: .15em; color: var(--texto-2); margin-bottom: .5rem; }
.anatomia-lista h3 { margin: 0 0 .3em; }
.anatomia-lista p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.anatomia-linea { display: none; }
@media (min-width: 52rem) {
  .anatomia-foto { width: 46%; }
  .anatomia-lista { margin: 0; display: block; }
  .anatomia-lista li { position: absolute; top: var(--y); width: 22%; transform: translateY(-.8rem); border-top: 0; padding-top: 0; }
  .anatomia-lista li::before { display: none; }
  .anatomia-lista .izq { left: 0; text-align: right; }
  .anatomia-lista .der { right: 0; }
  .anatomia-linea { display: block; position: absolute; top: var(--y); left: var(--l); width: var(--w); height: 1px; background: var(--texto-2); opacity: .55; }
}

.enlace-correo { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); }
.enlace-correo:hover { color: var(--salvia-oscuro); border-color: var(--salvia); }

/* ---------- Página de producto ---------- */
/* Apertura con tríptico a todo el ancho */
.p2-apertura { padding: 3.5rem 0 0; text-align: center; }
@media (min-width: 52rem) { .p2-apertura { padding-top: 5rem; } }
.p2-apertura h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.05; margin-bottom: .35em; }
.p2-entradilla { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--texto-2); max-width: 34rem; margin: 0 auto; }
.p2-foto-apertura { display: block; width: min(100%, 42rem); margin: 3rem auto 0; overflow: hidden; border-radius: 4px; cursor: zoom-in; }
.p2-foto-apertura img { width: 100%; transition: transform .8s ease; }
.p2-foto-apertura:hover img { transform: scale(1.02); }

/* Recorrido «Cuatro gestos» */
.p2-gestos { padding: 5rem 0 2rem; background: #fff; }
@media (min-width: 52rem) { .p2-gestos { padding: 7rem 0 3rem; } }
.p2-recorrido { display: grid; }
.p2-escenario { position: sticky; top: 0; z-index: 2; background: #fff; padding: .75rem 0; }
.p2-encuadre { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: min(100%, 34vh); margin: 0 auto; background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; }
.p2-encuadre img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); }
.p2-encuadre[data-paso="1"] img { transform: scale(2) translate(-3%, 36%); }
.p2-encuadre[data-paso="2"] img { transform: scale(2.4) translate(-13%, 21%); }
.p2-encuadre[data-paso="3"] img { transform: scale(2) translate(10.5%, -18%); }
.p2-encuadre[data-paso="4"] img { transform: scale(2) translate(-14%, -15%); }
.p2-encuadre[data-paso="5"] img { transform: scale(1.6) translate(0%, -33%); }
.p2-pasos { list-style: none; padding: 0; margin: 0; }
.p2-pasos li { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 2rem 0; }
.p2-activo .p2-pasos li { opacity: .3; transition: opacity .5s ease; }
.p2-activo .p2-pasos li.p2-actual { opacity: 1; }
.p2-num { font-size: .8rem; letter-spacing: .2em; color: var(--texto-2); margin-bottom: .8rem; }
.p2-pasos h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .35em; }
.p2-pasos p { color: var(--texto-2); font-size: 1.1rem; max-width: 26rem; margin: 0; }
@media (min-width: 52rem) {
  .p2-recorrido { grid-template-columns: 1fr 1fr; column-gap: 5rem; align-items: start; }
  .p2-escenario { top: 12vh; padding: 0; background: none; }
  .p2-encuadre { width: min(100%, 60vh); }
  .p2-pasos li { min-height: 78vh; padding: 0; }
}

/* ¿Cabe en su baño? */
.p2-control { display: block; margin-top: 2rem; color: var(--texto-2); }
.p2-control output { color: var(--texto); font-weight: 600; }
.p2-rango { width: 100%; max-width: 26rem; margin: .75rem 0 1.25rem; accent-color: var(--salvia); }
.p2-veredicto { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; color: var(--salvia-oscuro); margin-bottom: .75rem; }
.p2-veredicto.p2-no-cabe { color: #8a4a32; }
.p2-plano { margin: 0; }
.p2-plano svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Escena isométrica: mismo trazo que los dibujos del manual, sobre el fondo arena de la sección */
.escena { stroke-linejoin: round; stroke-linecap: round; }
.esc-l { fill: var(--arena); stroke: var(--texto); stroke-width: .55; }
.esc-l.sin-borde { stroke: none; }
.esc-l.esc-set { stroke-width: .7; }
.esc-l--no { stroke: #a65a3c; }
.esc-fino.esc-l--no { stroke: #a65a3c; }
.esc-fino { fill: none; stroke: var(--texto); stroke-width: .35; }
.esc-suelo { stroke: #cfc8bc; stroke-width: .3; }
.esc-pared { stroke: #b9b3a8; stroke-width: .45; }
.esc-huella { fill: rgba(90, 110, 94, .32); stroke: none; transition: fill .3s ease; }
.esc-huella--no { fill: rgba(166, 90, 60, .38); }
.esc-cota { stroke: var(--texto); stroke-width: .45; }
.esc-texto { font: 600 5px var(--sans); fill: var(--texto); stroke: none; }
.esc-texto--suave { font-weight: 400; font-size: 4.2px; fill: var(--texto-2); }
.esc-lado { fill: rgba(46, 44, 41, .05); stroke: #b9b3a8; stroke-width: .45; }

/* Comparador de acabados */
.p2-comparar { position: relative; width: min(100%, 30rem); aspect-ratio: 4 / 5; margin: 0 auto; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
/* Fotos de estudio con fondo blanco: se multiplican sobre el fondo de la página y conservan su sombra real */
.p2-comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; }
.p2-comparar-negro { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--corte)); background: var(--lino); isolation: isolate; }
.p2-comparar-linea { position: absolute; top: 4%; bottom: 4%; left: var(--corte); width: 1px; background: var(--texto); opacity: .5; }
.p2-comparar-linea::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--blanco); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; font-size: .95rem; letter-spacing: .1em; color: var(--texto);
  box-shadow: 0 6px 18px -8px rgba(46, 44, 41, .5);
}
.p2-etiqueta { position: absolute; top: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.p2-etiqueta--izq { left: 0; }
.p2-etiqueta--der { right: 0; }
.p2-rango--comparar { display: block; width: min(100%, 30rem); margin: 1.5rem auto 0; }
.p2-comprar { justify-content: center; }

/* Ventajas (sustituye a la infografía comparativa) */
.ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
.ventajas li { margin: 0; }
.ventajas img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 8% 12%; margin-bottom: .75rem; border-bottom: 1px solid var(--linea); }
.ventajas h3 { font-size: 1.15rem; margin-bottom: .25em; }
.ventajas p { color: var(--texto-2); font-size: .95rem; margin: 0; }
@media (min-width: 52rem) { .ventajas { gap: 3rem 2rem; } .ventajas h3 { font-size: 1.3rem; } }

/* Ficha */
.p2-datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.5rem; text-align: center; }
.p2-datos li { margin: 0; }
.p2-datos strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.1; }
.p2-datos span { color: var(--texto-2); font-size: .9rem; }
.p2-caja { text-align: center; color: var(--texto-2); max-width: 44rem; margin: 3rem auto 0; font-size: .95rem; }

.tarjeta-imagen { display: block; cursor: zoom-in; }
.tarjeta-imagen img { transition: transform .6s ease; }
.tarjeta-imagen:hover img { transform: scale(1.015); }
.visor-boton {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: var(--blanco); color: var(--texto); border: 1px solid var(--linea);
}
.visor-boton:hover { border-color: var(--salvia); color: var(--salvia-oscuro); }

/* Visor a pantalla completa */
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lino); color: var(--texto); }
.visor::backdrop { background: transparent; }
.visor-marco { position: absolute; inset: 4rem 1rem 4.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@media (min-width: 52rem) { .visor-marco { inset: 4rem 6rem 4.5rem; } }
.visor-marco img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .35s ease; }
.visor-marco.zoom img { transform: scale(2.4); cursor: zoom-out; }
.visor-pie { position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center; margin: 0; color: var(--texto-2); font-size: .9rem; }
.visor-boton { position: absolute; }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-ant { left: 1rem; bottom: 1rem; }
.visor-sig { right: 1rem; bottom: 1rem; }
@media (min-width: 52rem) { .visor-ant, .visor-sig { top: 50%; bottom: auto; transform: translateY(-50%); } .visor-ant { left: 1.5rem; } .visor-sig { right: 1.5rem; } }
html.visor-abierto { overflow: hidden; }

/* Manual hojeable */
.libro-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; margin-bottom: 2.5rem; }
.libro-cabecera h2 { margin-bottom: .3em; }
.libro-cabecera .nota { margin: 0; }
.libro { max-width: 62rem; margin: 0 auto; }
.libro-idiomas { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.libro-idiomas button {
  font: inherit; font-size: .8rem; letter-spacing: .14em; cursor: pointer;
  background: transparent; color: var(--texto-2); border: 1px solid var(--linea); border-radius: 999px; padding: .4rem 1rem;
}
.libro-idiomas button:hover, .libro-idiomas button[aria-pressed="true"] { border-color: var(--salvia); color: var(--salvia-oscuro); }
.libro-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.25rem; }
.libro.activo .libro-paginas { display: none; }

.hoja {
  display: block; position: relative; aspect-ratio: 148 / 210; overflow: hidden; container-type: inline-size;
  background: #fff; color: var(--texto); text-decoration: none;
  box-shadow: 0 1px 2px rgba(46, 44, 41, .08), 0 18px 40px -18px rgba(46, 44, 41, .35);
}
.hoja img { width: 100%; height: 100%; object-fit: contain; }
a.hoja { cursor: zoom-in; }
.hoja--portada, .hoja--contra { background: var(--lino); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hoja--portada { padding: 10% 8% 7%; }
.hoja .hoja-logo { width: 17%; height: auto; }
.hoja-ante { font-size: 2.4cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-2); margin: 7cqw 0 2cqw; }
.hoja-titulo { font-family: var(--serif); font-size: 8cqw; line-height: 1.1; margin: 0; }
.hoja .hoja-dibujo { flex: 1; min-height: 0; width: 62%; margin: 5cqw 0; object-fit: contain; }
.hoja-idiomas { font-size: 2.6cqw; letter-spacing: .25em; border-top: 1px solid var(--texto); padding-top: 2.5cqw; margin: 0; width: 55%; }
.hoja--contra { justify-content: center; gap: 2.5cqw; }
.hoja--contra p { margin: 0; font-size: 2.8cqw; color: var(--texto-2); letter-spacing: .05em; }

.libro-escenario { position: relative; display: grid; grid-template-columns: 1fr; max-width: 24rem; margin: 0 auto; perspective: 2600px; touch-action: pan-y; }
.libro-escenario.doble { grid-template-columns: 1fr 1fr; max-width: 60rem; }
.libro-lado { position: relative; aspect-ratio: 148 / 210; }
.libro-lado > .hoja, .giro-cara > .hoja, .giro-dorso > .hoja { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.libro-lado.vacio { visibility: hidden; }
.libro-escenario:not(.doble) .libro-lado--der { display: none; }
.doble .libro-lado::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; z-index: 1; }
.doble .libro-lado--izq::after { right: 0; background: linear-gradient(to left, rgba(46, 44, 41, .14), transparent); }
.doble .libro-lado--der::after { left: 0; background: linear-gradient(to right, rgba(46, 44, 41, .12), transparent); }
.libro-giro { position: absolute; top: 0; width: 50%; height: 100%; z-index: 3; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.45, .05, .25, 1); }
.giro-adelante { left: 50%; transform-origin: left center; }
.giro-adelante.girando { transform: rotateY(-180deg); }
.giro-atras { left: 0; transform-origin: right center; }
.giro-atras.girando { transform: rotateY(180deg); }
.giro-cara, .giro-dorso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.giro-dorso { transform: rotateY(180deg); }
.entra-adelante { animation: entra-adelante .35s ease; }
.entra-atras { animation: entra-atras .35s ease; }
@keyframes entra-adelante { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes entra-atras { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.libro-controles { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.libro-flecha {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: transparent; color: var(--texto); border: 1px solid var(--linea);
}
.libro-flecha:hover:not(:disabled) { border-color: var(--salvia); color: var(--salvia-oscuro); }
.libro-flecha:disabled { opacity: .3; cursor: default; }
.libro-estado { min-width: 11rem; text-align: center; margin: 0; font-size: .9rem; color: var(--texto-2); }

/* Infografías del listing */
.infografia { margin: 0 auto; max-width: 44rem; }
.infografia img { width: 100%; border-radius: 2px; }
.dos-columnas .infografia { max-width: none; }
.cabecera-seccion--centro { text-align: center; margin-left: auto; margin-right: auto; }
.cabecera-seccion--centro .entradilla { margin-left: auto; margin-right: auto; }

/* Galería por acabado (producto) */
.variante-galeria { scroll-margin-top: 1rem; }
.variante-galeria + .variante-galeria { margin-top: 4.5rem; }
.variante-galeria-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--linea);
}
.variante-galeria-cabecera .cabecera-variante { display: flex; align-items: center; gap: .9rem; }
.variante-galeria-cabecera .muestra { width: 1.5rem; height: 1.5rem; }
.variante-galeria-cabecera h3 { margin: 0; font-size: 1.6rem; }
.variante-galeria-cabecera p { margin: .3rem 0 0; color: var(--texto-2); }

/* Galería */
.galeria--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 52rem) { .galeria--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.galeria--2 { gap: 1.25rem; }
@media (min-width: 40rem) { .galeria--2 { grid-template-columns: 1fr 1fr; } }
.galeria { display: grid; gap: 1rem; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; border-radius: 2px; }
.galeria figcaption { font-size: .85rem; color: var(--texto-2); padding-top: .6rem; }
@media (min-width: 40rem) { .galeria--3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .galeria--detalles { grid-template-columns: 1fr 2.116fr; gap: 1.25rem; } }
.galeria + .galeria { margin-top: 1.25rem; }
.fondo-blanco { background: #fff; }

/* Tabla */
.tabla-envoltorio { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
tr:first-child th, tr:first-child td { border-top: 1px solid var(--texto); }
th { width: 42%; font-weight: 400; color: var(--texto-2); padding-right: 1.5rem; }

thead th { width: auto; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid var(--texto); }
thead + tbody tr:first-child th, thead + tbody tr:first-child td { border-top: 0; }
/* Tablas con cabecera: mismo margen interior en cabecera y celdas para que las columnas queden alineadas */
thead th, thead ~ tbody td { padding-right: 1.5rem; vertical-align: baseline; }
thead th:last-child, thead ~ tbody td:last-child { padding-right: 0; white-space: nowrap; }

/* Reciclaje por país */
.indice-paises { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.indice-paises a { border: 1px solid var(--linea); border-radius: 999px; padding: .45rem 1.1rem; text-decoration: none; color: var(--texto); font-size: .9rem; }
.indice-paises a:hover { border-color: var(--salvia); color: var(--salvia-oscuro); }
.pais { scroll-margin-top: 1rem; }
.pais .dos-columnas, .alinear-arriba { align-items: start; }
.pais h3 { margin-top: 2rem; }
.pais h3:first-child, .pais [lang] > h3:first-child { margin-top: 0; }
.destino li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.destino strong { font-weight: 500; color: var(--salvia-oscuro); }
.enlaces-oficiales { list-style: none; padding: 0; margin: 0; }
.enlaces-oficiales li { margin: 0; border-bottom: 1px solid var(--linea); }
.enlaces-oficiales li:first-child { border-top: 1px solid var(--linea); }
.enlaces-oficiales a { display: block; padding: .8rem 0; text-decoration: none; color: var(--texto); }
.enlaces-oficiales a::after { content: " ↗"; color: var(--salvia); }
.enlaces-oficiales a:hover { color: var(--salvia-oscuro); }

/* Pasos */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.5rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--linea); margin: 0; }
.pasos li:first-child { border-top: 1px solid var(--linea); }
.pasos li::before { content: counter(paso, decimal-leading-zero); font-size: .8rem; letter-spacing: .1em; color: var(--texto-2); padding-top: .2rem; }

.dibujo { margin: 0; max-width: 22rem; justify-self: center; }
.dibujo--alto { max-width: 14rem; }
@media (min-width: 52rem) { .dibujo--alto { max-width: 18rem; } }
.dibujo figcaption { font-size: .85rem; color: var(--texto-2); padding-top: .75rem; text-align: center; }
.nota { color: var(--texto-2); font-size: .95rem; }
.pendiente { background: #f3e3b5; color: #4d3b00; padding: .05em .35em; border-radius: 2px; font-size: .9em; }
.texto-legal { max-width: 44rem; padding-bottom: 5rem; }
.texto-legal h2 { font-size: 1.45rem; margin-top: 2.5rem; }

/* Pie */
.pie { background: var(--arena); color: var(--texto-2); padding: 3.5rem 0; font-size: .9rem; border-top: 1px solid var(--linea); }
.pie .contenedor { display: grid; gap: 1.5rem; }
.pie .marca { padding: 0; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.pie li { margin: 0; }
.pie p { margin: 0; }
.pie .contenedor { justify-items: center; text-align: center; gap: 1rem; }
.pie ul { justify-content: center; }

/* Solo móvil y tablet vertical: el ordenador (≥52rem) no cambia */
@media (max-width: 51.99rem) {
  .dos-columnas > * { min-width: 0; }
  thead th:last-child, thead ~ tbody td:last-child { white-space: normal; }
  thead th { letter-spacing: .08em; }
  .pie ul { gap: 0 1.5rem; }
  .pie a { display: inline-block; padding: .65rem 0; }
  .p2-rango { height: 2.75rem; margin-top: .25rem; margin-bottom: .75rem; }
  .esc-texto { font-size: 7px; }
  .esc-texto--suave { font-size: 5.6px; }
  /* Recorrido: cada paso lleva su propia foto encima, con el mismo encuadre que en ordenador */
  .p2-recorrido--movil .p2-escenario { display: none; }
  .p2-recorrido--movil .p2-pasos li { min-height: 0; padding: 0 0 3.5rem; opacity: 1; }
  .p2-encuadre--paso { width: min(100%, 22rem); margin: 0 auto 1.75rem; }
}
@media (min-width: 52rem) { .p2-encuadre--paso { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}