/* Media kit de Laura Marroquín.
   Blanco como base, pasteles de Positano, Bodoni para la voz, máquina de escribir para los datos
   y vidrio líquido para lo que se toca. */

@font-face { font-family: "Bodoni Moda"; src: url("fuentes/bodoni-moda-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fuentes/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fuentes/switzer-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fuentes/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fuentes/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Compagnon"; src: url("fuentes/compagnon-roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Compagnon"; src: url("fuentes/compagnon-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --blanco: #ffffff;
  --marfil: #fbf9f6;
  --tinta: #151313;
  --tinta-2: #5b5552;
  --linea: rgba(21, 19, 19, 0.12);
  --linea-2: rgba(21, 19, 19, 0.24);

  --rosa: #f4dbe0;
  --rosa-pared: #f6e2e5;
  --rosa-2: #e7b3bf;
  --rosa-3: #c35c76;
  --menta: #d5ead9;
  --lila: #e4ddf2;
  --celeste: #d8e7f4;
  --celeste-2: #a9c6e6;
  --mantequilla: #f6eecb;

  --didone: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --grotesca: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --maquina: "Compagnon", "Courier New", monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-lujo: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(18px, 4.6vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 300 1.0625rem/1.65 var(--grotesca);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--rosa-2); color: var(--tinta); }
:focus-visible { outline: 1.5px solid var(--tinta); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 14px; text-decoration: none; transition: top 200ms var(--ease-out); }
.saltar:focus { top: 12px; }
.solo-impresion { display: none !important; }

/* ---------- Letras ---------- */

.titulo {
  margin: 0;
  font: 400 clamp(2.7rem, 6.2vw, 5.6rem)/1 var(--didone);
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  max-width: 14ch;
  text-wrap: balance;
}
.titulo--italica { font-style: italic; }
.titulo--centro { margin-inline: auto; text-align: center; }
.titulo--versal { text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(2.4rem, 5.4vw, 4.6rem); max-width: none; }
.entrada { margin: 0; font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.6; max-width: 44ch; color: var(--tinta-2); text-wrap: pretty; }
.entrada--centro { margin-inline: auto; text-align: center; }
.maquina { font-family: var(--maquina); font-weight: 400; font-size: 0.84rem; letter-spacing: 0.01em; }
.subtitulo { margin: 0; font: italic 400 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--didone); letter-spacing: -0.015em; }
.fuente { margin: 48px 0 0; font-size: 0.78rem; color: var(--tinta-2); max-width: 78ch; line-height: 1.6; }
.fuente a { color: inherit; }
.fuente--centro { margin-inline: auto; text-align: center; }
.ornamento { width: 120px; height: 12px; color: var(--tinta); opacity: 0.7; }

.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.palabra > span { display: inline-block; will-change: transform; }

.js:not(.listo) [data-intro] { opacity: 0; }

/* ---------- Botones de casa ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 50px; padding: 0 2em;
  border: 1px solid var(--tinta); border-radius: 0;
  font: 400 0.72rem/1 var(--grotesca); letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out), transform 160ms var(--ease-out);
}
.boton:active { transform: scale(0.98); }
.boton--negro { background: var(--tinta); color: var(--blanco); }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--ancho { width: 100%; }
.boton.apagado { opacity: 0.35; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .boton--negro:hover { background: var(--blanco); color: var(--tinta); }
  .boton--linea:hover { background: var(--tinta); color: var(--blanco); }
}
.enlace { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Vidrio líquido ---------- */

.vidrio {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.26));
  -webkit-backdrop-filter: blur(14px) saturate(175%) brightness(1.04);
  backdrop-filter: blur(14px) saturate(175%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(255, 255, 255, 0.35),
    inset 1px 0 1px rgba(255, 255, 255, 0.45),
    inset -1px 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 26px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(60, 40, 60, 0.06),
    0 22px 44px -20px rgba(70, 45, 75, 0.3);
}
.vidrio::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.28) 100%);
  mix-blend-mode: soft-light;
}
.vidrio::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 28%) var(--my, 0%), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%);
  opacity: var(--brillo, 0.55);
  transition: opacity 400ms ease;
}
.vidrio--pastilla {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.4em;
  border-radius: 999px; text-decoration: none; color: var(--tinta);
  font: 400 0.72rem/1 var(--grotesca); letter-spacing: 0.2em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out);
}
.vidrio--pastilla:active { transform: scale(0.97); }
.redondo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform 160ms var(--ease-out); }
.redondo svg { width: 18px; height: 18px; }
.redondo:active { transform: scale(0.94); }

/* ---------- La etiqueta de Margiela ---------- */

.etiqueta-m {
  position: fixed; left: var(--gutter); top: 16px; z-index: 60;
  padding: 9px 11px 8px;
  background: var(--blanco);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(21, 19, 19, 0.1), 0 12px 26px -16px rgba(21, 19, 19, 0.35);
}
.etiqueta-m::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--linea-2), var(--linea-2)) left 0 top 0 / 1px 7px no-repeat,
    linear-gradient(var(--linea-2), var(--linea-2)) right 0 top 0 / 1px 7px no-repeat,
    linear-gradient(var(--linea-2), var(--linea-2)) left 0 bottom 0 / 1px 7px no-repeat,
    linear-gradient(var(--linea-2), var(--linea-2)) right 0 bottom 0 / 1px 7px no-repeat;
}
.etiqueta-m__numeros { display: flex; gap: 1px; list-style: none; margin: 0; padding: 0; }
.etiqueta-m__numeros a { display: grid; place-items: center; width: 21px; height: 22px; font: 400 12.5px/1 var(--grotesca); color: var(--tinta); text-decoration: none; }
.etiqueta-m__circulo {
  position: absolute; left: 0; top: 0; width: 31px; height: 27px;
  fill: none; stroke: var(--tinta); stroke-width: 1.05; stroke-linecap: round;
  pointer-events: none;
  transition: transform 560ms var(--ease-out);
}
.etiqueta-m__circulo path { stroke-dasharray: 92; stroke-dashoffset: 0; }
.etiqueta-m__circulo.dibuja path { animation: dibujar 700ms var(--ease-out); }
@keyframes dibujar { from { stroke-dashoffset: 92; } }
.etiqueta-m__nombre { position: absolute; left: 0; top: calc(100% + 9px); margin: 0; font: 400 0.68rem/1 var(--maquina); white-space: nowrap; color: var(--tinta-2); }

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 55;
  display: flex; justify-content: flex-end; align-items: center;
  height: 76px; padding: 0 var(--gutter);
  pointer-events: none;
  transition: background-color 400ms ease, box-shadow 400ms ease;
}
.cabecera > * { pointer-events: auto; }
.cabecera.con-fondo {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--linea);
}
.cabecera__marca {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font: 400 1rem/1 var(--didone); letter-spacing: 0.34em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; opacity: 0; transition: opacity 500ms ease;
}
.cabecera.con-marca .cabecera__marca { opacity: 1; }
.cabecera__acciones { display: flex; align-items: center; gap: 18px; }
.cabecera__pdf { border: 0; background: none; padding: 10px 4px; cursor: pointer; font: 400 0.7rem/1 var(--grotesca); letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- 0 · Portada ---------- */

.copertina {
  position: relative;
  height: 100svh; min-height: 680px; max-height: 1120px;
  overflow: clip;
}
.copertina__plato {
  position: absolute; left: 50%; top: 53%;
  width: min(78svh, 56vw, 860px); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  z-index: 0;
}
.copertina__plato .aurora { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.copertina__plato::before, .copertina__plato::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.copertina__plato::before { inset: -14px; border: 1px solid rgba(21, 19, 19, 0.5); }
.copertina__plato::after { inset: -24px; border: 1px solid rgba(21, 19, 19, 0.16); }
.copertina__borde { position: absolute; inset: -62px; width: calc(100% + 124px); height: calc(100% + 124px); max-width: none; animation: girar 90s linear infinite; }
.copertina__borde text { font: 400 4.6px var(--maquina); fill: var(--tinta); letter-spacing: 0.08em; }
@keyframes girar { to { transform: rotate(360deg); } }

.copertina__nombre {
  position: absolute; left: 0; right: 0; top: clamp(96px, 16svh, 176px);
  margin: 0; z-index: 2;
  text-align: center; white-space: nowrap;
  font: 400 clamp(3.2rem, 9.4vw, 10.8rem)/0.86 var(--didone);
  font-optical-sizing: auto;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.copertina__nombre .linea { display: inline-block; overflow: hidden; padding: 0.16em 0.02em 0.07em; margin-top: -0.16em; vertical-align: top; }
.copertina__nombre .linea > span { display: inline-block; }

.copertina__laura {
  position: absolute; left: 50%; bottom: 6.5%;
  height: min(70svh, 650px); width: auto; max-width: none;
  translate: -50% 0;
  z-index: 3;
  filter: drop-shadow(0 30px 24px rgba(50, 35, 50, 0.18));
}
.copertina__suelo {
  position: absolute; left: 50%; bottom: 6.5%; z-index: 2;
  width: min(620px, 72vw); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--linea-2) 18%, var(--linea-2) 82%, transparent);
}

.widget { position: absolute; z-index: 4; display: grid; gap: 5px; padding: 16px 20px 17px; border-radius: 24px; min-width: 176px; }
.widget__cifra { font: 400 clamp(1.5rem, 2.3vw, 2.15rem)/1 var(--didone); letter-spacing: -0.01em; }
.widget__texto { font: 400 0.76rem/1.3 var(--grotesca); color: var(--tinta-2); }
.widget--a { left: max(3%, calc(50% - 520px)); top: 54%; }
.widget--b { right: max(3%, calc(50% - 520px)); top: 33%; }
.widget--c { right: max(6%, calc(50% - 440px)); top: 66%; }

.copertina__bio {
  position: absolute; left: var(--gutter); bottom: 74px; z-index: 4; margin: 0;
  display: flex; align-items: center; gap: 0.35em;
  font: italic 400 clamp(1.3rem, 1.9vw, 1.7rem)/1 var(--didone);
}
.copertina__bio svg { width: 0.9em; height: 0.9em; fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.3; }
.copertina__pie {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  font: 400 0.76rem/1 var(--maquina);
}
.copertina__desliza { display: inline-flex; align-items: center; gap: 10px; }
.copertina__desliza::after { content: ""; width: 1px; height: 28px; background: var(--tinta); transform-origin: top; animation: deslizar 2.4s var(--ease-lujo) infinite; }
@keyframes deslizar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 1 · Tema e variazioni ---------- */

.variazioni { position: relative; padding: clamp(120px, 14vw, 210px) var(--gutter) clamp(90px, 10vw, 150px); }
.prefacio { max-width: 920px; margin: 0 auto clamp(110px, 13vw, 190px); display: grid; justify-items: center; gap: 34px; text-align: center; }
.prefacio__texto { margin: 0; font: italic 400 clamp(1.55rem, 3vw, 2.75rem)/1.28 var(--didone); letter-spacing: -0.012em; text-wrap: balance; }
.prefacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.variazioni__cabeza { display: grid; justify-items: center; gap: 16px; text-align: center; }
.variazioni__cabeza .titulo { max-width: none; }
.variazioni__cabeza .maquina { margin: 0; color: var(--tinta-2); line-height: 1.7; }

.variazioni__escena { position: relative; max-width: 1320px; height: clamp(920px, 86vw, 1180px); margin: 40px auto 0; }
.variazioni__platos { position: absolute; inset: 0; }
.plato {
  position: absolute; left: var(--x); top: var(--y); width: var(--t);
  display: grid; justify-items: center; gap: 14px;
  padding: 0; border: 0; background: none; cursor: pointer;
  will-change: transform;
}
.plato__aro {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--blanco);
  box-shadow:
    0 0 0 6px var(--blanco),
    0 0 0 7px rgba(21, 19, 19, 0.5),
    0 0 0 12px var(--blanco),
    0 0 0 12.6px rgba(21, 19, 19, 0.2),
    0 28px 40px -24px rgba(50, 35, 50, 0.45);
  transition: transform 700ms var(--ease-out);
}
.plato__aro img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(1.05) brightness(1.04); transition: filter 600ms var(--ease-out), transform 1100ms var(--ease-out); }
.plato__num { font: 400 0.68rem/1 var(--maquina); color: var(--tinta-2); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .plato:hover .plato__aro { transform: translateY(-6px) rotate(-3deg); }
  .plato:hover .plato__aro img { filter: none; transform: scale(1.07); }
}
.plato:focus-visible .plato__aro img { filter: none; }

.telefono {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(236px, 21vw, 292px); aspect-ratio: 9 / 19.3;
  padding: 7px; border-radius: 50px;
  background: linear-gradient(150deg, #fdfdfc, #d9d9d6 20%, #f7f7f5 46%, #cbcbc8 70%, #f4f4f2);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.85),
    0 70px 90px -42px rgba(50, 35, 50, 0.5),
    0 24px 34px -22px rgba(50, 35, 50, 0.35);
  z-index: 2;
}
.telefono__pantalla { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: #000; border: 5px solid #0d0d0d; isolation: isolate; }
.telefono__isla { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 30%; height: 21px; border-radius: 20px; background: #000; z-index: 6; }
.telefono__progreso { position: absolute; top: 40px; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; z-index: 5; }
.telefono__progreso i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.telefono__progreso i.corre { animation: progreso 3.8s linear forwards; }
.telefono.pausado .telefono__progreso i, .telefono:hover .telefono__progreso i { animation-play-state: paused; }
@keyframes progreso { to { transform: scaleX(1); } }
.feed { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.feed__item { position: absolute; inset: 0; transform: translateY(100%); transition: transform 760ms var(--ease-in-out); }
.feed__item[data-s="actual"] { transform: translateY(0); }
.feed__item[data-s="pasado"] { transform: translateY(-100%); }
.feed__item[data-s="abajo"] { transform: translateY(100%); }
.feed__item[data-s="antes"] { transform: translateY(-100%); transition: none; }
.feed__item[data-s="espera"] { transition: none; }
.feed__item img { width: 100%; height: 100%; object-fit: cover; }
.feed__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 46%); }
.feed__info { position: absolute; left: 14px; right: 56px; bottom: 18px; z-index: 2; display: grid; gap: 4px; color: #fff; font: 400 0.78rem/1.35 var(--grotesca); }
.feed__usuario { font-weight: 500; }
.feed__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed__vistas { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.feed__vistas svg { width: 12px; height: 12px; fill: #fff; }
.telefono__lado { position: absolute; right: 9px; bottom: 74px; z-index: 4; display: grid; gap: 16px; justify-items: center; }
.telefono__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.telefono__like { width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; transition: transform 160ms var(--ease-out); }
.telefono__like svg { width: 29px; height: 29px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.telefono__like:active { transform: scale(0.88); }
.telefono__like.latido svg { animation: latido 420ms var(--ease-out); fill: var(--rosa-2); }
@keyframes latido { 30% { transform: scale(1.3); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } }
.telefono__corazones { position: absolute; right: 12px; bottom: 120px; width: 44px; height: 70%; z-index: 3; pointer-events: none; }
.corazon-lluvia { position: absolute; bottom: 0; left: 50%; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.telefono__ver { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; }
.telefono__ver span {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 400 0.72rem/1 var(--grotesca); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta);
  opacity: 0; transform: scale(0.94); transition: opacity 220ms ease, transform 220ms var(--ease-out);
}
.telefono__ver svg { width: 12px; height: 12px; fill: currentColor; }
.telefono__ver:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .telefono__pantalla:hover .telefono__ver span { opacity: 1; transform: none; } }
.telefono__controles { position: absolute; left: 50%; top: calc(100% + 26px); translate: -50% 0; display: flex; gap: 10px; }
.telefono__controles .js-anterior svg { rotate: -90deg; }
.telefono__controles .js-siguiente svg { rotate: 90deg; }

/* ---------- Cinta ---------- */

.cinta { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--linea); white-space: nowrap; background: var(--blanco); }
.cinta__pista { display: inline-flex; will-change: transform; }
.cinta__pista span { display: inline-flex; align-items: center; gap: 0.7em; padding-right: 0.7em; font: italic 400 clamp(1.4rem, 3vw, 2.5rem)/1.1 var(--didone); letter-spacing: -0.01em; }
.cinta__pista svg { width: 0.55em; height: 0.55em; flex: none; fill: var(--rosa-2); }

/* ---------- Secciones ---------- */

.seccion { position: relative; padding: clamp(110px, 13vw, 190px) var(--gutter); }
.cabeza-doble { display: grid; gap: 26px; align-items: end; margin-bottom: 56px; }
@media (min-width: 980px) { .cabeza-doble { grid-template-columns: 1.15fr 0.85fr; gap: 72px; } }
.cabeza-centrada { display: grid; justify-items: center; gap: 24px; text-align: center; margin-bottom: clamp(56px, 7vw, 90px); }

/* ---------- 2 · Cifras ---------- */

.cifras__cabeza { display: grid; gap: 34px; align-items: end; margin-bottom: 56px; }
.cifras__cabeza .entrada { margin-top: 26px; }
@media (min-width: 980px) { .cifras__cabeza { grid-template-columns: 1fr auto; } }
.sello { position: relative; width: 168px; height: 168px; color: var(--tinta); justify-self: start; }
@media (min-width: 980px) { .sello { justify-self: end; margin-right: 3%; } }
.sello svg:first-child { width: 100%; height: 100%; animation: girar 34s linear infinite; }
.sello text { font: 400 10.4px var(--maquina); fill: currentColor; letter-spacing: 0.06em; }
.sello__corazon { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; fill: var(--rosa-2); stroke: var(--tinta); stroke-width: 0.8; }

.escenario { position: relative; isolation: isolate; overflow: hidden; border-radius: 44px; padding: clamp(22px, 3.6vw, 52px); min-height: 540px; display: grid; align-items: center; }
.escenario .aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.escenario__grilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cifra { display: flex; flex-direction: column; padding: 30px 26px 30px; border-radius: 30px; min-height: 320px; transform-style: preserve-3d; }
.cifra__valor { display: flex; align-items: baseline; gap: 0.12em; margin: 0 0 auto; font: 400 clamp(3.6rem, 6.4vw, 6rem)/0.9 var(--didone); letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.cifra__unidad { font-size: 0.3em; font-style: italic; letter-spacing: 0; }
.cifra__etiqueta { margin: 34px 0 8px; font: 400 1rem/1.35 var(--grotesca); }
.cifra__detalle { margin: 0; font: 300 0.88rem/1.5 var(--grotesca); color: var(--tinta-2); }

/* ---------- 3 · Audiencia ---------- */

.audiencia__grilla { display: grid; border-block: 1px solid var(--linea); }
@media (min-width: 900px) { .audiencia__grilla { grid-template-columns: 1fr 1.2fr 1fr; } }
.dato-aud { padding: 40px clamp(10px, 3vw, 48px) 46px; }
.dato-aud + .dato-aud { border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .dato-aud + .dato-aud { border-top: 0; border-left: 1px solid var(--linea); } }
.dato-aud__titulo { margin: 0; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
.dato-aud__grande { display: flex; align-items: baseline; margin: 26px 0 8px; font: 400 clamp(4.6rem, 8vw, 7.6rem)/0.86 var(--didone); letter-spacing: -0.045em; }
.por { font: italic 400 0.36em/1 var(--didone); margin-left: 0.06em; letter-spacing: 0; }
.dato-aud__nota { margin: 0; color: var(--tinta-2); font-size: 0.95rem; max-width: 26ch; }
.barra-par { display: flex; height: 5px; margin-top: 30px; background: var(--celeste); }
.barra-par__a { display: block; width: 71%; height: 100%; background: var(--rosa-2); transform-origin: left; }
.edades { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.edades li { display: grid; grid-template-columns: 72px 1fr 62px; align-items: center; gap: 16px; }
.edades__rango { font: 400 0.8rem/1 var(--maquina); color: var(--tinta-2); }
.edades__pista { height: 5px; background: #f1eeeb; overflow: hidden; }
.edades__pista i { display: block; height: 100%; transform-origin: left; }
.edades li:nth-child(1) .edades__pista i { background: var(--rosa-2); }
.edades li:nth-child(2) .edades__pista i { background: var(--celeste-2); }
.edades li:nth-child(3) .edades__pista i { background: #c9bfe3; }
.edades__valor { text-align: right; font: 400 1.5rem/1 var(--didone); letter-spacing: -0.02em; }

/* ---------- 4 · Constancia ---------- */

.ritmo { background: linear-gradient(180deg, var(--blanco), #f3f7fb 18%, #f3f7fb 82%, var(--blanco)); }
.segmentos { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 5px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmentos::-webkit-scrollbar { display: none; }
.segmentos__pulgar {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; z-index: 0;
  border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 16px -6px rgba(60, 40, 70, 0.35), inset 0 0 0 0.5px rgba(21, 19, 19, 0.06);
  transition: transform 460ms var(--ease-out), width 460ms var(--ease-out);
}
.filtro {
  position: relative; z-index: 1; flex: none;
  min-height: 40px; padding: 0 1.15em; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 400 0.84rem/1 var(--grotesca); color: var(--tinta-2);
  transition: color 300ms ease;
}
.filtro[aria-pressed="true"] { color: var(--tinta); }

.ritmo__mapa { margin-top: 34px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; }
.ritmo__mapa::-webkit-scrollbar { display: none; }
.ritmo__mapa svg { width: 100%; min-width: 880px; height: auto; overflow: visible; }
.ritmo__desliza { position: sticky; left: 0; margin: 0 0 10px; font-size: 0.74rem; color: var(--tinta-2); }
@media (min-width: 900px) { .ritmo__desliza { display: none; } }
.dia { transition: opacity 420ms ease var(--d, 0ms); }
.dia.vacio { fill: rgba(255, 255, 255, 0.9); stroke: rgba(21, 19, 19, 0.1); stroke-width: 1; }
.dia.n1, .leyenda .n1 { fill: #f6e4e8; background: #f6e4e8; }
.dia.n2, .leyenda .n2 { fill: #edc4cd; background: #edc4cd; }
.dia.n3, .leyenda .n3 { fill: #da98a8; background: #da98a8; }
.dia.n4, .leyenda .n4 { fill: #a95e73; background: #a95e73; }
.dia.n5, .leyenda .n5 { fill: #4b2534; background: #4b2534; }
.mapa-texto { font: 400 10.5px var(--maquina); fill: var(--tinta-2); }
svg[data-filtro]:not([data-filtro="*"]) .dia { opacity: 0.12; }
svg[data-filtro="b"] .dia.f-b, svg[data-filtro="u"] .dia.f-u, svg[data-filtro="v"] .dia.f-v, svg[data-filtro="h"] .dia.f-h { opacity: 1; }
.ritmo__mapa svg:not(.visible) .dia { opacity: 0; }
.ritmo__pie { display: grid; gap: 22px; margin-top: 22px; align-items: start; }
@media (min-width: 980px) { .ritmo__pie { grid-template-columns: auto 1fr; gap: 72px; } }
.leyenda { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--tinta-2); }
.leyenda i { width: 13px; height: 13px; border-radius: 3px; }
.leyenda span:first-child { margin-right: 4px; }
.leyenda span:last-child { margin-left: 4px; }
.notas { max-width: 62ch; }
.nota { margin: 0; font: italic 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.4 var(--didone); }
.nota:not([hidden]) { animation: nota 420ms var(--ease-out); }
@keyframes nota { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 5 · Marcas ---------- */

.dispersion { margin: 0; position: relative; }
.dispersion svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.dispersion__pie { margin-top: 14px; font-size: 0.76rem; color: var(--tinta-2); max-width: 66ch; }
.eje { font: 400 10.5px var(--maquina); fill: var(--tinta-2); }
.guia { stroke: var(--linea); stroke-width: 1; }
.punto { fill: var(--tinta); fill-opacity: 0.22; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 520ms var(--ease-out) var(--d, 0ms); }
.punto--marca { fill: var(--rosa-3); fill-opacity: 1; stroke: var(--blanco); stroke-width: 2; }
.dispersion.visible .punto { transform: scale(1); }
.mediana { stroke-width: 1.2; stroke-dasharray: 2 5; }
.mediana--resto { stroke: var(--tinta-2); }
.mediana--marca { stroke: var(--rosa-3); }
.mediana-texto { font: 400 11px var(--maquina); paint-order: stroke; stroke: var(--blanco); stroke-width: 5px; stroke-linejoin: round; }
.etiqueta-marca { font: italic 400 16px var(--didone); fill: var(--tinta); paint-order: stroke; stroke: var(--blanco); stroke-width: 5px; stroke-linejoin: round; }
.anillo { fill: none; stroke: var(--tinta); stroke-width: 1.2; opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
.anillo.visible { opacity: 1; }

.repiten { margin-top: clamp(100px, 11vw, 160px); }
.lista-marcas { list-style: none; margin: 22px 0 0; padding: 0; border-bottom: 1px solid var(--linea); }
.marca {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 24px;
  padding: 24px 0; background: none; border: 0; border-top: 1px solid var(--linea); text-align: left; cursor: default;
}
button.marca { cursor: pointer; }
.marca__nombre { font: 400 clamp(1.9rem, 4.4vw, 3.6rem)/1 var(--didone); text-transform: uppercase; letter-spacing: 0.02em; transition: letter-spacing 700ms var(--ease-out), color 400ms ease; }
.marca__veces { font: 400 0.9rem/1 var(--maquina); color: var(--tinta-2); }
.marca__vistas { grid-column: 1 / -1; font: 300 0.92rem/1 var(--grotesca); color: var(--tinta-2); }
.marca__flecha { display: none; width: 26px; height: 26px; transition: transform 500ms var(--ease-out); }
@media (min-width: 760px) {
  .marca { grid-template-columns: 1fr 90px 180px 34px; align-items: center; }
  .marca__vistas { grid-column: auto; }
  .marca__flecha { display: block; }
}
@media (hover: hover) and (pointer: fine) {
  button.marca:hover .marca__nombre { letter-spacing: 0.08em; color: var(--rosa-3); }
  button.marca:hover .marca__flecha { transform: translateX(8px); }
}
.tambien { margin: 30px 0 0; font-size: 1.02rem; max-width: 64ch; color: var(--tinta-2); }

/* ---------- 6 · Colección ---------- */

.coleccion { position: relative; overflow: hidden; background: var(--rosa-pared); padding: clamp(110px, 12vw, 170px) 0; }
.coleccion::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(214, 232, 217, 0.5), transparent 50%); }
.coleccion__marco { position: relative; padding: 0 var(--gutter); }
.coleccion__cabeza { margin-bottom: 30px; }
.coleccion__pista {
  display: flex; gap: clamp(48px, 6vw, 120px);
  margin: 40px calc(var(--gutter) * -1) 0; padding: 70px var(--gutter) 30px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.coleccion__pista::-webkit-scrollbar { display: none; }
.look { flex: 0 0 min(76vw, 350px); scroll-snap-align: start; }
.look:nth-child(odd) .estampilla { --giro: -1.6deg; }
.look:nth-child(even) .estampilla { --giro: 1.4deg; }
.look__objeto { position: relative; margin-bottom: 30px; filter: drop-shadow(0 20px 22px rgba(110, 50, 70, 0.2)); }
.estampilla {
  --r: 7px;
  position: relative; display: block; width: 100%;
  padding: calc(2 * var(--r)); border: 0; background: var(--blanco); cursor: pointer;
  rotate: var(--giro, 0deg);
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  transition: rotate 700ms var(--ease-out);
}
.estampilla__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.estampilla__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 1200ms var(--ease-out); }
.estampilla__valor { position: absolute; left: calc(2 * var(--r) + 12px); top: calc(2 * var(--r) + 12px); padding: 5px 8px 4px; background: var(--blanco); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .estampilla:hover { rotate: 0deg; }
  .estampilla:hover .estampilla__foto img { transform: scale(1.05); }
}
.matasellos { position: absolute; left: -22px; bottom: 18px; width: 112px; height: 112px; color: rgba(21, 19, 19, 0.6); rotate: -14deg; pointer-events: none; mix-blend-mode: multiply; }
.matasellos svg { width: 100%; height: 100%; }
.matasellos circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.matasellos text { font: 400 7.6px var(--maquina); fill: currentColor; letter-spacing: 0.05em; }
.ficha {
  position: absolute; top: -26px; right: -30px; width: 196px;
  padding: 26px 16px 15px;
  background: #fffdf8;
  font: 400 0.7rem/1.5 var(--maquina);
  transform-origin: 50% -44px;
  rotate: var(--balanceo, 5deg);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}
.ficha__hilo { display: none; }
.look__objeto::after { content: ""; position: absolute; right: 68px; top: -70px; width: 1px; height: 52px; background: rgba(21, 19, 19, 0.4); rotate: 6deg; transform-origin: bottom; pointer-events: none; }
.ficha__ojal { position: absolute; top: 9px; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; background: var(--rosa-pared); box-shadow: inset 0 0 0 1.4px rgba(21, 19, 19, 0.4); }
.ficha dl { margin: 0; display: grid; gap: 3px; }
.ficha dl div { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
.ficha dt { text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-2); font-size: 0.62rem; padding-top: 1px; }
.ficha dd { margin: 0; }
.look__titulo { margin: 0 0 8px; font: 400 clamp(1.45rem, 2vw, 1.85rem)/1.1 var(--didone); letter-spacing: -0.012em; text-wrap: balance; }
.look__desc { margin: 0; font: 300 0.94rem/1.55 var(--grotesca); color: var(--tinta-2); max-width: 34ch; }

@media (min-width: 980px) {
  .anclado.coleccion { padding-block: 0; }
  .anclado .coleccion__marco { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 90px; padding-bottom: 40px; }
  .anclado .coleccion__pista { overflow: visible; scroll-snap-type: none; padding-top: 60px; padding-bottom: 10px; margin-top: 10px; }
  .anclado .look { flex-basis: clamp(290px, 23vw, 340px); }
  .anclado .estampilla__foto { aspect-ratio: 4 / 4.4; }
  .anclado .look__desc { display: none; }
}

/* ---------- 7 · Listino ---------- */

.listino {
  background-color: #f4f2ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cdefs%3E%3CradialGradient id='a' cx='28' cy='28' r='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='0' cy='0' r='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='56' cy='0' r='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='0' cy='56' r='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='56' cy='56' r='28' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M28 0 56 28 28 56 0 28z' fill='url(%23a)'/%3E%3Cpath d='M0 0h28L0 28z' fill='url(%23b)'/%3E%3Cpath d='M28 0h28v28z' fill='url(%23c)'/%3E%3Cpath d='M0 28v28h28z' fill='url(%23d)'/%3E%3Cpath d='M56 28v28H28z' fill='url(%23e)'/%3E%3Cpath d='M28 0 56 28 28 56 0 28z' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='.7'/%3E%3Cg fill='%23000' fill-opacity='.12'%3E%3Ccircle cx='28' cy='0' r='1.3'/%3E%3Ccircle cx='28' cy='56' r='1.3'/%3E%3Ccircle cx='0' cy='28' r='1.3'/%3E%3Ccircle cx='56' cy='28' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
}
.listino::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--blanco), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, var(--blanco)); }
.listino > * { position: relative; }
.listino__grilla { display: grid; gap: 52px; align-items: start; max-width: 1180px; margin: 0 auto; }
@media (min-width: 980px) { .listino__grilla { grid-template-columns: 1.1fr 0.9fr; gap: 80px; } }
.servicios { list-style: none; margin: 0; padding: 0; }
.servicio { display: grid; grid-template-columns: 1fr auto; gap: 10px 22px; align-items: center; padding: 26px 0; }
.servicio + .servicio { border-top: 1px solid var(--linea); }
.servicio__linea { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; }
.servicio__nombre { margin: 0; font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 var(--didone); letter-spacing: -0.015em; white-space: nowrap; }
.servicio__puntos { flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(21, 19, 19, 0.5); translate: 0 -0.32em; }
.servicio__precio { white-space: nowrap; font-size: 0.95rem; }
.servicio__desc { margin: 0; font-size: 0.95rem; color: var(--tinta-2); max-width: 44ch; }
.paso { display: inline-flex; align-items: center; gap: 10px; justify-self: end; }
.paso button { width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; font: 300 1.3rem/1 var(--grotesca); transition: transform 160ms var(--ease-out); }
.paso button:active { transform: scale(0.9); }
.paso button:disabled { opacity: 0.35; cursor: default; }
.paso output { min-width: 2ch; text-align: center; font: 400 1.4rem/1 var(--didone); font-variant-numeric: lining-nums; }

.recibo { padding: 34px 30px 30px; border-radius: 34px; }
@media (min-width: 980px) { .recibo { position: sticky; top: 108px; } }
.recibo__titulo { margin: 0 0 22px; font: italic 400 1.8rem/1 var(--didone); }
.recibo__lineas { list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--linea-2); display: grid; gap: 11px; min-height: 40px; font-size: 0.95rem; }
.recibo__lineas li { display: flex; justify-content: space-between; gap: 12px; }
.recibo__lineas li span:last-child { font-family: var(--maquina); font-size: 0.9rem; }
.recibo__lineas li.vacia, .recibo__lineas li.extra-linea { color: var(--tinta-2); }
.recibo__extras { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linea-2); }
.extra {
  min-height: 34px; padding: 0 0.95em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-2); background: rgba(255, 255, 255, 0.45);
  font: 400 0.76rem/1 var(--grotesca);
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 160ms var(--ease-out);
}
.extra:active { transform: scale(0.96); }
.extra[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.recibo__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; }
.recibo__total > span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.recibo__total p { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.recibo__total .js-total { display: inline-block; font: 400 clamp(3.4rem, 5vw, 4.4rem)/1 var(--didone); letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.recibo__total small { font-size: 0.8rem; color: var(--tinta-2); }
.recibo__nota { margin: 4px 0 24px; font-size: 0.74rem; color: var(--tinta-2); }
.recibo .boton + .boton { margin-top: 10px; }

/* ---------- 8 · Contacto ---------- */

.contacto { padding-bottom: 40px; }
.contacto__titulo { margin: 0; text-align: center; font: italic 400 clamp(3.8rem, 13.5vw, 12.6rem)/0.92 var(--didone); letter-spacing: -0.045em; }
.contacto__titulo .palabra { padding-bottom: 0.24em; margin-bottom: -0.24em; }
.contacto__grilla { display: grid; gap: 44px; margin-top: clamp(56px, 7vw, 90px); align-items: start; max-width: 1180px; margin-inline: auto; }
@media (min-width: 980px) { .contacto__grilla { grid-template-columns: 0.75fr 1.25fr; } .contacto__acciones { grid-column: 2; } }
.contacto__lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.contacto__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-top: 1px solid var(--linea); }
.contacto__lista li > span:first-child { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--tinta-2); }
.contacto__lista a, .contacto__lista .enlace { font: 400 clamp(1.3rem, 2.3vw, 1.85rem)/1.1 var(--didone); letter-spacing: -0.01em; text-decoration: none; text-align: right; }
.contacto__lista .js-copiar { font-family: var(--grotesca); font-weight: 300; font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: 0; }
.arroba { font-family: var(--grotesca); font-weight: 300; font-size: 0.82em; margin-right: 0.04em; }
@media (hover: hover) and (pointer: fine) { .contacto__lista a:hover, .contacto__lista .enlace:hover { color: var(--rosa-3); } }
.contacto__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.pie { margin-top: clamp(100px, 12vw, 170px); }
.pie__firma { display: flex; justify-content: space-between; margin: 0 0 26px; font: 400 clamp(1.7rem, 7.2vw, 7.6rem)/0.9 var(--didone); text-transform: uppercase; }
.pie__firma .esp { width: 0.4em; }
.pie__datos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 0.72rem; color: var(--tinta-2); }
.pie__datos p { margin: 0; max-width: 70ch; }

/* ---------- Reproductor ---------- */

.reproductor { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; color: var(--tinta); }
.reproductor::backdrop { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.reproductor[open] { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: aparecer 300ms var(--ease-out); }
@keyframes aparecer { from { opacity: 0; transform: scale(0.97) translateY(8px); } }
.reproductor__marco { width: min(86vw, 42svh, 360px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 50px 90px -36px rgba(50, 35, 50, 0.55); }
.reproductor__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.reproductor__info { text-align: center; max-width: min(86vw, 380px); }
.reproductor__info p { margin: 0; }
.js-rep-titulo { font: italic 400 1.3rem/1.25 var(--didone); }
.reproductor__datos { margin-top: 6px !important; font-size: 0.8rem; color: var(--tinta-2); }
.reproductor__cerrar { position: absolute; top: -6px; right: -62px; font: 300 1.5rem/1 var(--grotesca); }
@media (max-width: 560px) { .reproductor__cerrar { right: 0; top: -58px; } }

/* ---------- Flotantes ---------- */

.cursor-portada { position: fixed; top: 0; left: 0; z-index: 60; width: 200px; padding: 8px; border-radius: 22px; pointer-events: none; opacity: 0; transition: opacity 240ms ease; }
.cursor-portada.visible { opacity: 1; }
.cursor-portada img { width: 100%; aspect-ratio: 3 / 4; border-radius: 15px; object-fit: cover; object-position: top; }

.tip { position: fixed; top: 0; left: 0; z-index: 80; display: flex; gap: 10px; align-items: center; max-width: 270px; padding: 10px 12px; border-radius: 16px; background: rgba(21, 19, 19, 0.92); color: var(--blanco); font: 300 0.8rem/1.35 var(--grotesca); pointer-events: none; opacity: 0; transition: opacity 140ms ease; }
.tip.visible { opacity: 1; }
.tip img { width: 52px; height: 70px; border-radius: 8px; object-fit: cover; object-position: top; flex: none; }
.tip__cifra { display: block; margin-bottom: 2px; font: 400 1.25rem/1.1 var(--didone); }
.tip small { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.6); font-family: var(--maquina); font-size: 0.7rem; }

.corazon-tap { position: fixed; top: 0; left: 0; z-index: 90; width: 84px; height: 84px; pointer-events: none; stroke: var(--tinta); stroke-width: 0.9; filter: drop-shadow(0 10px 18px rgba(60, 40, 60, 0.22)); }
.chispa { position: fixed; top: 0; left: 0; z-index: 89; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }

.contador, .aviso {
  position: fixed; z-index: 70; bottom: 18px; margin: 0;
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 42px; padding: 0 1em; border-radius: 999px;
  font: 400 0.82rem/1 var(--grotesca); color: var(--tinta);
  opacity: 0; transform: translateY(12px);
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
  pointer-events: none;
}
.contador { right: var(--gutter); }
.aviso { left: 50%; translate: -50% 0; }
.contador.visible, .aviso.visible { opacity: 1; transform: none; }
.contador svg { width: 16px; height: 16px; fill: var(--rosa-2); stroke: var(--tinta); stroke-width: 1; }
.contador.late svg { animation: latido 420ms var(--ease-out); }

/* ---------- Celular ---------- */

@media (max-width: 979px) {
  .etiqueta-m { top: auto; bottom: 14px; padding: 7px 8px 6px; }
  .etiqueta-m__numeros a { width: 24px; height: 28px; font-size: 12px; }
  .etiqueta-m__circulo { width: 34px; height: 31px; }
  .etiqueta-m__nombre { top: auto; bottom: calc(100% + 8px); }
  .cabecera { height: 64px; }
  .cabecera__marca { font-size: 0.78rem; letter-spacing: 0.22em; left: var(--gutter); translate: 0 -50%; }
  .cabecera__pdf { display: none; }
  .contador { bottom: 70px; }

  .copertina { min-height: 700px; max-height: none; height: 100svh; }
  .copertina__nombre { top: 86px; font-size: clamp(3rem, 15vw, 6.6rem); line-height: 0.9; white-space: normal; }
  .copertina__nombre .linea { display: block; }
  .copertina__plato { width: min(88vw, 520px); top: 54%; }
  .copertina__borde { display: none; }
  .copertina__laura { height: min(56svh, 520px); bottom: 12%; }
  .copertina__suelo { bottom: 12%; }
  .widget { min-width: 0; padding: 11px 14px 12px; border-radius: 18px; }
  .widget__cifra { font-size: 1.25rem; }
  .widget__texto { font-size: 0.68rem; }
  .widget--a { left: 4%; top: auto; bottom: 22%; }
  .widget--b { right: 4%; top: 41%; }
  .widget--c { display: none; }
  .copertina__bio { left: 50%; translate: -50% 0; bottom: 112px; font-size: 1.25rem; }
  .copertina__pie { bottom: 84px; font-size: 0.66rem; }
  .copertina__laura { bottom: 19%; }
  .copertina__suelo { bottom: 19%; }
  .copertina__desliza { display: none; }

  .variazioni__escena { height: auto; display: flex; flex-direction: column; align-items: center; gap: 120px; margin-top: 50px; }
  .telefono { position: relative; left: auto; top: auto; translate: none; width: min(68vw, 280px); order: -1; }
  .variazioni__platos { position: relative; inset: auto; width: calc(100% + var(--gutter) * 2); display: flex; gap: 34px; overflow-x: auto; padding: 26px var(--gutter) 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .variazioni__platos::-webkit-scrollbar { display: none; }
  .plato { position: relative; left: auto; top: auto; width: 128px; flex: none; scroll-snap-align: center; }
  .plato__aro img { filter: none; }

  .escenario { border-radius: 30px; min-height: 0; }
  .cifra { min-height: 0; }
  .ficha { right: -10px; width: 176px; }
  .look__objeto::after { right: 48px; }
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .copertina__borde, .sello svg:first-child, .copertina__desliza::after { animation: none; }
  .feed__item { transition: opacity 300ms ease; }
  .punto { transition: none; transform: scale(1); }
}

/* ---------- PDF ---------- */

@media print {
  @page { size: A4; margin: 11mm 12mm; }
  html, body { background: #fff; font-size: 12px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .etiqueta-m, .cabecera, .saltar, .cinta, .telefono, .variazioni__escena, .segmentos, .ritmo__desliza, .dispersion__pie,
  .contador, .aviso, .tip, .cursor-portada, .reproductor, .paso, .recibo, .contacto__acciones, .copertina__pie, .copertina__borde,
  .sello, .prefacio__acciones, .matasellos { display: none !important; }
  .solo-impresion { display: flex !important; }
  [data-intro], [data-revela], .palabra > span, .linea > span, .copertina__laura, .widget, .barra-par__a, .edades__pista i { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .vidrio { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, 0.75) !important; }
  .seccion, .variazioni { padding: 14px 0 !important; break-inside: auto; }
  .copertina { height: 120mm; min-height: 0; max-height: none; }
  .copertina__nombre { top: 6mm; font-size: 46px; }
  .copertina__plato { width: 92mm; top: 58%; }
  .copertina__laura { height: 96mm; bottom: 4mm; }
  .copertina__suelo { bottom: 4mm; }
  .widget { padding: 8px 12px; }
  .widget__cifra { font-size: 16px; }
  .widget--a { left: 4mm; } .widget--b { right: 4mm; } .widget--c { right: 10mm; }
  .copertina__bio { bottom: 4mm; font-size: 14px; }
  .prefacio { margin: 0 auto 8mm; }
  .prefacio__texto { font-size: 17px; }
  .variazioni__cabeza { display: none; }
  .titulo { font-size: 28px; max-width: none; }
  .entrada { font-size: 11.5px; max-width: none; }
  .fuente { margin-top: 8px; font-size: 8.5px; }
  .cabeza-doble, .cifras__cabeza { grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
  .cabeza-centrada { margin-bottom: 14px; gap: 8px; }
  .escenario { min-height: 0; padding: 12px; border-radius: 16px; }
  .escenario__grilla { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cifra { min-height: 0; padding: 12px; border-radius: 14px; }
  .cifra__valor { font-size: 34px; }
  .cifra__etiqueta { font-size: 10.5px; margin: 10px 0 4px; }
  .cifra__detalle { font-size: 9px; }
  .audiencia__grilla { grid-template-columns: repeat(3, 1fr); }
  .dato-aud { padding: 12px; }
  .dato-aud + .dato-aud { border-top: 0; border-left: 1px solid var(--linea); }
  .dato-aud__grande { font-size: 44px; margin: 10px 0 4px; }
  .ritmo { background: #fff; }
  .ritmo__mapa { margin-top: 6px; overflow: visible; }
  .ritmo__mapa svg { min-width: 0; }
  .nota { font-size: 13px; }
  .nota[hidden] { display: none !important; }
  .dispersion .punto { transform: scale(1) !important; }
  .repiten { margin-top: 12px; }
  .subtitulo { font-size: 20px; }
  .lista-marcas { columns: 2; column-gap: 26px; margin-top: 6px; }
  .lista-marcas li { break-inside: avoid; }
  .marca { padding: 7px 0; grid-template-columns: 1fr auto; }
  .marca__nombre { font-size: 19px; }
  .marca__vistas { grid-column: 1 / -1; font-size: 10px; }
  .marca__flecha { display: none; }
  .tambien { font-size: 10.5px; margin-top: 8px; }
  .coleccion { padding: 12px 0 !important; break-before: page; }
  .pin-spacer { height: auto !important; padding: 0 !important; width: auto !important; }
  .coleccion, .coleccion__marco { position: static !important; transform: none !important; min-height: 0 !important; height: auto !important; max-height: none !important; width: auto !important; max-width: none !important; }
  .coleccion__marco { padding: 0 6mm; }
  .coleccion__pista { transform: none !important; display: grid !important; grid-template-columns: repeat(5, 1fr); overflow: visible !important; margin: 10px 0 0 !important; padding: 0 !important; gap: 8px !important; }
  .look__objeto { filter: none; margin-bottom: 8px; }
  .look__objeto::after { display: none; }
  .estampilla { --r: 3px; rotate: 0deg; }
  .ficha { position: static; width: auto; rotate: 0deg; padding: 6px; margin-top: 6px; clip-path: none; font-size: 7.5px; }
  .ficha__ojal { display: none; }
  .ficha dl div { grid-template-columns: 48px 1fr; }
  .look__titulo { font-size: 12px; }
  .look__desc { display: none; }
  .listino { background-image: none; }
  .listino__grilla { display: block; }
  .servicio { padding: 8px 0; break-inside: avoid; }
  .servicio__nombre { font-size: 18px; }
  .servicio__desc { font-size: 10.5px; }
  .contacto__titulo { font-size: 52px; }
  .contacto__grilla { grid-template-columns: 0.8fr 1.2fr; margin-top: 10px; gap: 18px; }
  .contacto__lista li { padding: 7px 0; }
  .contacto__lista a, .contacto__lista .enlace, .js-telefono-impreso { font-size: 14px !important; }
  .pie { margin-top: 14px; }
  .pie__firma { font-size: 28px; margin-bottom: 8px; }
  .pie__datos { font-size: 8.5px; }
  a { text-decoration: none; }
}