/* ==========================================================================
   Ester Perruca, BOCETO VISUAL 1 (prototipo privado, no es código de producción)
   Sistema: Recursos/Diseño/DESIGN.md. Los valores de los tokens salen de ahí.
   Cómo cambiar algo: los colores, tamaños y tiempos están al principio, en :root.
   ========================================================================== */

/* Fuente de reserva con métricas ajustadas (para que el rótulo no salte al llegar la fuente).
   Valores medidos con la fuente real en el navegador (ver README). */
@font-face {
  font-family: "Familjen Fallback";
  src: local("Arial");
  font-weight: 400 500;
  size-adjust: 95.5%;
  ascent-override: 107.9%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Familjen Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 700;
  size-adjust: 91.6%;
  ascent-override: 112.4%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Color base (DESIGN 2.1) */
  --color-fondo: #ffffff;
  --color-tinta: #17141a;
  --color-ciruela: #6e4a86;
  --color-linea: #e7e3ea;
  --color-borde-campo: #857c8c;
  --color-error: #b3261e;
  --color-carga: #f4f2f5;
  --color-morado-profundo: #3a1b52;

  /* Siete colores de brochazo (DESIGN 2.2) */
  --brocha-hielo: #dceff2;
  --brocha-pervinca: #93a1d0;
  --brocha-rosa: #f59ab3;
  --brocha-magenta: #d12f8f;
  --brocha-morado: #603180;
  --brocha-lila: #c6b4dc;      /* lila de la paleta de pinceladas: banda de Moros y Cristianos (así las letras recortadas se leen oscuras, como en las demás) */
  --brocha-melocoton: #ffb58a;
  --brocha-amarillo: #ffd36e;

  /* Tipografía */
  --fuente: "Familjen Grotesk", "Familjen Fallback", Arial, system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "Courier New", monospace;
  --k: 0.47; /* ancho por carácter del rótulo (em): medido con la fuente real, la palabra más ancha da 0,462 */

  --tipo-rotulo-max: 240px;
  --tipo-display: clamp(2.75rem, 1.73rem + 4.19vw, 5.5rem);
  --tipo-titulo: clamp(2rem, 1.44rem + 2.29vw, 3.5rem);
  --tipo-subtitulo: clamp(1.375rem, 1.24rem + 0.57vw, 1.75rem);
  --tipo-entradilla: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
  --tipo-cuerpo: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --tipo-pequeno: 0.9375rem;
  --tipo-boton: 1.0625rem;
  --tipo-nota: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --tipo-ver: 0.75rem;

  /* Retícula y espaciado */
  --margen: 16px;
  --medianil: 12px;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px;
  --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px; --esp-10: 128px; --esp-11: 192px;
  --esp-seccion: clamp(96px, 12vw, 192px);
  --alto-cabecera: 56px;

  /* Sombras (solo en lo que flota) */
  --sombra-flotante: 0 1px 2px rgba(23, 20, 26, 0.1), 0 8px 24px rgba(23, 20, 26, 0.14);
  --sombra-hoja: 0 -8px 32px rgba(23, 20, 26, 0.12);

  /* Movimiento (DESIGN 2.6) */
  --dur-pulsar: 120ms;
  --dur-rapida: 200ms;
  --dur-salida: 250ms;
  --dur-ventana: 450ms;
  --dur-zoom: 500ms;
  --dur-menu: 500ms;
  --dur-texto: 700ms;
  --dur-foto: 1400ms;
  --curva-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-marco: cubic-bezier(0.65, 0, 0.35, 1);
  --curva-hoja: cubic-bezier(0.32, 0.72, 0, 1);
  --curva-pintar: cubic-bezier(0.33, 1, 0.68, 1);

  /* Movimiento de la iteración 2 (fase 2, "storytelling"). Valores y porqués: DESIGN.md, "Cambios de la iteración 2" */
  --dur-linea: 900ms;          /* línea de texto que se desliza en horizontal (receta de yulia.world) */
  --dur-linea-opacidad: 600ms;
  --dur-aterriza: 1400ms;      /* foto que aterriza por su lado (receta de shopify.design, suave) */
  --aterriza-x: 160px;         /* desplazamiento lateral de partida */
  --aterriza-s: 1.15;          /* escala de partida del marco (la foto de dentro parte de 1,08) */
  --dur-tarjetas: 1500ms;      /* tarjetas que llegan volando (shopify.design, tal cual) */
  --tarjeta-s: 2.25;           /* escala de partida de las tarjetas */
  --dur-paso-entra: 900ms;     /* texto de un paso de "Cómo trabajo" que entra */
  --dur-paso-sale: 380ms;      /* y que sale (siempre más rápido) */

  /* Brochazo horizontal como máscara: la banda ocupa el 28 % central de la máscara */
  --banda-tam: 100% 330%;
  --banda-pos: 0 67%;

  /* Iteración 3 */
  --frase-em: 28.1;              /* ancho de la frase de la portada en em (medido con la fuente real, ver README) */
  --sombra-tarjeta: 0 18px 40px rgba(23, 20, 26, 0.16);
  --sombra-tarjeta-hover: 0 20px 48px rgba(23, 20, 26, 0.22);
  --holgura-sombra: 80px;      /* margen interior de la pista del carrusel para que no se corte la sombra */
  --escala-vecina: 0.88;       /* escala de las tarjetas vecinas en el carrusel móvil */
}

@media (min-width: 768px) { :root { --margen: 32px; --medianil: 16px; } }
@media (min-width: 1024px) {
  :root { --margen: clamp(24px, 4vw, 64px); --medianil: 24px; --alto-cabecera: 72px; --dur-foto: 1400ms; }
}
@media (max-width: 767px) { :root { --dur-foto: 1100ms; --tarjeta-s: 1.3; } }
@media (max-width: 1023px) { :root { --dur-aterriza: 1100ms; --aterriza-x: 72px; --aterriza-s: 1.08; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
html.bloqueado { overflow: hidden; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-tinta);
  font-family: var(--fuente);
  font-size: var(--tipo-cuerpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--brocha-rosa); color: var(--color-tinta); }
input, textarea { caret-color: var(--color-tinta); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: fixed; left: var(--margen); top: 8px; z-index: 100;
  background: var(--color-tinta); color: #fff; padding: 12px 16px; text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; }

/* ---------- Tipografía ---------- */
.rotulo {
  display: block;
  font-weight: 600;
  font-size: min(var(--tipo-rotulo-max), 22svh, max(56px, calc(100cqw / (var(--nn) * var(--k)))));
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin-left: -0.04em; /* alineación óptica con el margen */
  --nn: var(--n-m);
  text-wrap: nowrap;
}
@media (min-width: 1024px) { .rotulo { --nn: var(--n-e); } }
.rotulo__linea { display: block; }
@media (min-width: 1024px) { .rotulo__linea { display: inline; } }
.contenedor-rotulo { container-type: inline-size; }

.titulo { font-size: var(--tipo-titulo); line-height: 1; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.subtitulo { font-size: var(--tipo-subtitulo); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.entradilla { font-size: var(--tipo-entradilla); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.cuerpo { max-width: 62ch; text-wrap: pretty; }
.nota { font-family: var(--mono); font-size: var(--tipo-nota); line-height: 1.4; color: var(--color-ciruela); }
.pequeno { font-size: var(--tipo-pequeno); line-height: 1.45; }

/* ---------- Botones y enlaces ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 176px; height: 52px; padding: 0 28px;
  background: var(--color-tinta); color: #fff;
  font: 500 var(--tipo-boton)/1 var(--fuente);
  text-decoration: none; white-space: nowrap; border: 0; border-radius: 0; cursor: pointer;
  transition: transform var(--dur-pulsar) var(--curva-ui);
}
@media (min-width: 1024px) { .btn { height: 56px; } }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brocha-morado);
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 400ms var(--curva-marco);
}
.btn:active { transform: scale(0.97); }
.btn--pequeno { height: 44px; min-width: 0; padding: 0 20px; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { clip-path: inset(0 0 0 0); } }
.btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn--sec { background: transparent; color: var(--color-tinta); box-shadow: inset 0 0 0 1px var(--color-tinta); }
.btn--sec::before { background: var(--brocha-amarillo); }
.btn--sec:hover { color: var(--color-tinta); }
.btn--sec:focus-visible { outline-offset: 3px; }
.btn svg, .btn img { width: 20px; height: 20px; flex: none; }
/* Iteración 22: los botones de WhatsApp, en verde pastel de la paleta (antes, blancos con borde; el flotante, verde WhatsApp fosforito) */
/* Iteración 22b: texto e icono en blanco (lo pidió Adrián), así que el verde es algo más hondo que el pastel de antes para que el blanco se lea
   (contraste 3:1, el mínimo para texto grande y botones); sigue siendo un verde salvia suave, nada fosforito */
:root { --verde-wa: #55a47a; --verde-wa-fuerte: #458d67; }
.btn--wa, .btn--wa:hover { background: var(--verde-wa); color: #fff; box-shadow: none; }
.btn--wa::before { background: var(--verde-wa-fuerte); }
.btn--wa img { filter: invert(1); }

.enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--dur-rapida), text-decoration-thickness var(--dur-rapida); }
.enlace:hover { text-decoration-thickness: 2px; color: var(--color-ciruela); }
.boton-texto { background: none; border: 0; padding: 0 4px; min-height: 44px; min-width: 44px; font-size: var(--tipo-boton); font-weight: 500; cursor: pointer; color: inherit; }
.boton-texto:hover { text-decoration: underline; text-underline-offset: 4px; }
/* "Pide tu fecha" en la cabecera (iteración 17): siempre a la vista, redondeado y más bajo que los botones de la página */
.btn--cab { height: 38px; min-width: 0; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; }
@media (min-width: 1024px) { .btn--cab { height: 44px; padding: 0 22px; font-size: 0.9375rem; } }
.cabecera__acciones { gap: 14px; }
@media (min-width: 1024px) { .cabecera__acciones { gap: 20px; } }

/* ---------- Cabecera (DESIGN 3.1, iteración 2) ---------- */
/* Móvil: monograma a la izquierda y "Menú" a la derecha. Escritorio (iteración 22): monograma a la izquierda, accesos y servicios al centro,
   Instagram, TikTok y "Pide tu fecha" a la derecha, sin "Menú". */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--alto-cabecera);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding-inline: var(--margen);
  background: #fff; color: var(--color-tinta);
  transition: transform 300ms var(--curva-ui);
}
.cabecera.oculta { transform: translateY(-100%); }
.cabecera__nav { display: none; }
.cabecera__logo { grid-column: 1; display: block; justify-self: start; height: 44px; line-height: 0; padding: 7px 0; transition: opacity 300ms; }
.cabecera__logo img { height: 30px; width: auto; }
.cabecera__logo.esconde { opacity: 0; pointer-events: none; }
.cabecera__acciones { grid-column: 2; display: flex; align-items: center; gap: 20px; justify-self: end; }
.nav-enlace.cabecera__ig { display: none; }
/* Iteración 22: en escritorio ya no hay "Menú" y la barra lleva también los servicios. Con nueve accesos no caben a la izquierda del
   monograma centrado, así que el monograma pasa a la izquierda, los accesos al centro y Instagram, TikTok y "Pide tu fecha" a la derecha. */
@media (min-width: 1024px) {
  .cabecera { grid-template-columns: auto 1fr auto; column-gap: var(--esp-5); }
  .cabecera__logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .cabecera__logo img { height: 34px; }
  .cabecera__acciones { grid-row: 1; }
  .cabecera__nav { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.45vw, 26px); min-width: 0; }
  .cabecera__acciones { grid-column: 3; }
  #btn-menu { display: none; }
}
@media (min-width: 1280px) { .nav-enlace.cabecera__ig { display: inline-flex; } }   /* de 1024 a 1279 no caben: Instagram y TikTok siguen en el pie */
.nav-enlace--servicio[aria-current="page"] { color: var(--color-ciruela); }
/* Con el menú abierto, el propio menú lleva los accesos: se esconden los de la cabecera */
.menu-abierto .cabecera__nav, .menu-abierto .cabecera__ig { visibility: hidden; }

/* Acceso de texto con la receta de yulia.world: mayúsculas pequeñas y, al pasar, el texto se desliza y entra su copia */
.nav-enlace {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--color-tinta);
  font: 500 0.8125rem/1.6 var(--fuente); letter-spacing: -0.2px; text-transform: uppercase;
  transition: color var(--dur-rapida);
}
@media (min-width: 1024px) { .nav-enlace { font-size: clamp(0.8125rem, 0.45rem + 0.57vw, 0.9375rem); } }   /* iteración 22: con nueve accesos, de 13 px (1024) a 15 px (desde 1440); antes llegaba a 17 */
.nav-enlace__caja { display: grid; overflow: hidden; }
.nav-enlace__caja > span { grid-area: 1 / 1; transition: transform 450ms var(--curva-entrada); }
.nav-enlace__caja > span + span { transform: translateY(110%); }
.nav-enlace:focus-visible { outline-offset: 2px; }
.nav-enlace[aria-current="true"] { color: var(--color-ciruela); }
.nav-enlace--red { text-transform: none; }   /* Instagram y TikTok, como nombres propios (iteración 18) */
@media (hover: hover) and (pointer: fine) {
  .nav-enlace:hover .nav-enlace__caja > span { transform: translateY(-110%); }
  .nav-enlace:hover .nav-enlace__caja > span + span { transform: none; }
}
.nav-enlace:focus-visible .nav-enlace__caja > span { transform: translateY(-110%); }
.nav-enlace:focus-visible .nav-enlace__caja > span + span { transform: none; }

/* ---------- Vistas ---------- */
.vista { min-height: 60svh; }
.pagina-cab { padding: calc(var(--alto-cabecera) + var(--esp-7)) var(--margen) 0; }
@media (min-width: 1024px) { .pagina-cab { padding-top: calc(var(--alto-cabecera) + var(--esp-8)); } }
.pagina-cab h1 { font-weight: 400; }
[tabindex="-1"]:focus { outline: none; }
.pagina-cab__pre { font-size: var(--tipo-entradilla); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--esp-3); }
.pagina-cab__post { font-size: var(--tipo-entradilla); line-height: 1.2; letter-spacing: -0.01em; margin-top: var(--esp-3); }
.pagina-cab__intro { margin-top: var(--esp-6); max-width: 46ch; }
.seccion { padding: var(--esp-seccion) var(--margen) 0; }
.seccion--corta { padding-top: clamp(64px, 8vw, 128px); }

/* ---------- Portada (iteración 3): todo centrado y una pieza horizontal gigante que se corta por abajo ----------
   Logo, frase (en una sola línea) y botón centrados; debajo, la foto a todo el ancho útil (menos el margen) con esquinas redondeadas.
   En escritorio la foto (16:9) es más alta que lo que queda de pantalla a propósito: se ve la mitad de arriba y se intuye que sigue.
   En móvil es la foto vertical (4:5) a todo el ancho. Medidas de la referencia (world.org): 1.248 px de ancho en 1.440, margen 96, radio 16. */
.portada {
  --margen-pieza: var(--margen);
  --radio-pieza: 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--alto-cabecera) + 16px) 0 0;
}
.portada__h1 { margin: 0; width: 100%; padding-inline: var(--margen); font-weight: 400; }
.portada__logo-caja { display: block; width: 94%; margin-inline: auto; }
.portada__logo { width: 100%; height: auto; aspect-ratio: 773 / 182; }
.portada__texto { width: 100%; padding-inline: 10px; margin-top: var(--esp-4); display: grid; justify-items: center; container-type: inline-size; }
/* Frase en una sola línea: el tamaño sigue el ancho disponible (la frase mide 27,87 em con la fuente real; se deja un 1 % de aire) */
.portada__frase { max-width: 44ch; margin: 0; text-wrap: balance; }   /* iteración 15: ya no va en una sola línea; texto más largo, centrado */
.portada__btn { margin-top: var(--esp-6); }   /* iteración 15: el botón va debajo de la foto */
.marco-portada {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 2 * var(--margen-pieza)); aspect-ratio: 4 / 5; margin-top: var(--esp-6);
  border-radius: var(--radio-pieza); background: var(--color-carga);
}
.marco-portada picture { display: block; position: absolute; inset: 0; }
.marco-portada img, .marco-portada video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .portada { --radio-pieza: 20px; padding-top: calc(var(--alto-cabecera) + 24px); }
  .portada__logo-caja { width: min(640px, 70%); }
  .portada__texto { padding-inline: var(--margen); }
  .marco-portada { aspect-ratio: 16 / 9; margin-top: var(--esp-7); }
}
@media (min-width: 1024px) {
  .portada { --margen-pieza: clamp(48px, 6.67vw, 96px); }
  .portada__texto { margin-top: var(--esp-5); }
  .portada__btn { margin-top: var(--esp-7); }
}

/* muestra = brochazo pequeño sacado del sprite */
.muestras { display: flex; gap: 10px; margin-top: var(--esp-4); }
.muestra {
  --mw: 28px; --mh: 76px; --sx: 570;
  display: block; width: var(--mw); height: var(--mh);
  background: url("../assets/brochazos/sprite-brochazos.webp") no-repeat;
  background-size: calc(var(--mw) * 1516 / 117) var(--mh);
  background-position: calc(var(--mw) * var(--sx) / -117) 0;
}
.muestra--hielo { --sx: 0; } .muestra--pervinca { --sx: 190; } .muestra--rosa { --sx: 570; }
.muestra--magenta { --sx: 760; } .muestra--morado { --sx: 950; } .muestra--melocoton { --sx: 1140; } .muestra--amarillo { --sx: 1330; }
@media (min-width: 1024px) { .muestra { --mw: 36px; --mh: 92px; } }
.muestra--s { --mw: 20px; --mh: 52px; }
.muestra--m { --mw: 30px; --mh: 80px; }

/* Cara de línea (SVG en línea). Estado final: completa. La fase de movimiento la dibuja con el scroll escribiendo stroke-dashoffset. */
.cara {
  --cara-h: min(40svh, calc(78vw * 1.19));
  height: var(--cara-h); width: auto; aspect-ratio: 329 / 392;
  fill: none; stroke: var(--color-tinta); stroke-width: var(--sw, 2.4); stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.cara path { stroke-dasharray: 1.001 2; stroke-dashoffset: 0; }

/* ---------- Fichas y galería ---------- */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--medianil); row-gap: var(--esp-6); }
.ficha-item { min-width: 0; }
.ficha {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: transform var(--dur-pulsar) var(--curva-ui);
}
.ficha:active { transform: scale(0.98); }
.ficha__marco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-carga); }
.ficha__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms var(--curva-marco); }
.ficha__nombre, .ficha__nota { display: block; }
.ficha__nombre { margin-top: var(--esp-3); font-weight: 500; font-size: var(--tipo-cuerpo); line-height: 1.3; }
.ficha__nota { margin-top: var(--esp-1); transition: color var(--dur-rapida); }
.ficha:focus-visible { outline: 0; }
.ficha:focus-visible .ficha__marco { outline: 2px solid var(--color-tinta); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .ficha:hover .ficha__marco img { transform: scale(1.05); transition-duration: var(--dur-zoom); }
}
@media (min-width: 1024px) {
  .galeria { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .galeria > .ficha-item:nth-child(3n+2) { margin-top: 12svh; }
}
/* Lo que dicen de mí (iteración 17): carrusel de reseñas. Todas las tarjetas del mismo tamaño y alineadas arriba (sin escalones).
   Móvil: se pasa con el dedo; la tarjeta de la derecha, un poco más pequeña (el script escribe la escala). Desde 768 px, una fila con dos
   botones redondos para pasar (2,3 tarjetas a la vista en tableta, 4 en escritorio). Selectores con .galeria delante para ganar al bloque de la iteración 15. */
.destacada--arriba { position: relative; }
.galeria.galeria--resenas {
  display: flex; grid-template-columns: none; gap: var(--medianil); align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--margen) * -1); padding: 4px var(--margen) var(--esp-2); scroll-padding-inline: var(--margen);
}
.galeria--resenas::-webkit-scrollbar { display: none; }
.galeria.galeria--resenas > .ficha-item, .galeria.galeria--resenas > .ficha-item:nth-child(even), .galeria.galeria--resenas > .ficha-item:nth-child(3) {
  flex: 0 0 78%; width: auto; margin: 0; scroll-snap-align: start; transform-origin: 0 0;
}
.galeria.galeria--resenas .ficha__cita { margin-top: var(--esp-2); }
.galeria.galeria--resenas .ficha__nombre { margin-top: var(--esp-3); }
.resenas__botones { display: flex; gap: 10px; justify-content: center; order: 2; margin-top: calc(var(--esp-7) * -1 + var(--esp-4)); }   /* en móvil, debajo de las tarjetas (iteración 19) */
.destacada--arriba .galeria--resenas { order: 1; }
.galeria.galeria--resenas.arrastrando { scroll-snap-type: none; cursor: grabbing; }
.galeria.galeria--resenas.animando { scroll-snap-type: none; }   /* mientras dura el desplazamiento suave propio (iteración 19) */
.galeria.galeria--resenas.arrastrando .ficha { pointer-events: none; }
.galeria.galeria--resenas img { -webkit-user-drag: none; user-select: none; }
@media (pointer: fine) { .galeria.galeria--resenas { cursor: grab; } }
.resenas__flecha {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-tinta); background: #fff; color: var(--color-tinta); display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-rapida), color var(--dur-rapida), opacity var(--dur-rapida), transform var(--dur-pulsar);
}
.resenas__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.resenas__flecha:active { transform: scale(0.94); }
.resenas__flecha:disabled { opacity: 0.25; cursor: default; }
.resenas__flecha:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .resenas__flecha:not(:disabled):hover { background: var(--color-tinta); color: #fff; } }
@media (min-width: 768px) {
  .resenas__botones { margin-top: 0; align-self: end; order: 0; justify-content: flex-end; }
  .destacada--arriba .galeria--resenas { order: 0; }
  .seccion-interna.destacada.destacada--arriba { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-7); }   /* más específico que el bloque de la iteración 15, que va después */   /* el texto a la izquierda y los botones a su altura, a la derecha */
  .destacada--arriba .galeria--resenas { grid-column: 1 / -1; }
  .galeria.galeria--resenas > .ficha-item, .galeria.galeria--resenas > .ficha-item:nth-child(even), .galeria.galeria--resenas > .ficha-item:nth-child(3) { flex-basis: calc((100% - 2 * var(--medianil)) / 2.3); }
}
@media (min-width: 1024px) {
  .galeria.galeria--resenas { gap: clamp(20px, 2.2vw, 40px); }
  .galeria.galeria--resenas > .ficha-item, .galeria.galeria--resenas > .ficha-item:nth-child(even), .galeria.galeria--resenas > .ficha-item:nth-child(3) { flex-basis: calc((100% - 3 * clamp(20px, 2.2vw, 40px)) / 4); }
}

/* Mis últimos trabajos (iteración 15): rejilla compacta. Móvil y tableta, dos columnas (la segunda algo más abajo); escritorio, las cuatro en fila
   bajo el título. "Ver maquillaje" va DENTRO de la foto (toda la foto es el botón). */
.destacada.destacada--arriba { grid-template-columns: 1fr; }
.destacada--arriba .destacada__texto .entradilla { max-width: 46ch; }
.galeria--trabajos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--esp-6); align-items: start; }
.galeria--trabajos > .ficha-item:nth-child(even) { margin-top: var(--esp-6); }
.galeria--trabajos .ficha__cita { margin-top: var(--esp-3); }
.galeria--trabajos .ficha__cita-texto { font-size: var(--tipo-pequeno); }
.galeria--trabajos .cita__trazo-caja { margin-bottom: var(--esp-2); }
.ficha__pildora {   /* iteración 18: negra de base (al pasar el ratón, blanca) */
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--color-tinta); color: #fff; font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 2px 10px rgba(23, 20, 26, 0.18);
  transition: background var(--dur-rapida), color var(--dur-rapida);
}
.ficha__pildora::after { content: "→"; }
@media (hover: hover) and (pointer: fine) { .ficha:hover .ficha__pildora { background: #fff; color: var(--color-tinta); } }
@media (min-width: 768px) { .ficha__pildora { left: 14px; bottom: 14px; padding: 9px 16px; font-size: 0.9375rem; } }
@media (min-width: 1024px) {
  .destacada.destacada--arriba { grid-template-columns: 1fr; }
  .destacada--arriba .destacada__texto { grid-column: auto; position: static; max-width: 46rem; }
  .destacada--arriba .destacada__texto .entradilla { max-width: 52ch; }
  .galeria--trabajos { grid-column: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.2vw, 40px); }
  .galeria--trabajos > .ficha-item:nth-child(even) { margin-top: var(--esp-9); }
  .galeria--trabajos .ficha__cita-texto { font-size: var(--tipo-cuerpo); }
}
.galeria--destacada { grid-template-columns: repeat(2, 1fr); }
.galeria--destacada > .ficha-item:nth-child(3) { grid-column: 1 / -1; width: 62%; }
@media (min-width: 1024px) {
  .galeria--destacada { grid-column: 4 / 13; grid-template-columns: repeat(3, 1fr); }
  .galeria--destacada > .ficha-item:nth-child(3) { grid-column: auto; width: auto; }
}

/* Entradas (se preparan ocultas solo si están fuera de pantalla al cargar) */
[data-rev] { transition: opacity var(--dur-texto) var(--curva-entrada), transform var(--dur-texto) var(--curva-entrada); transition-delay: calc(var(--i, 0) * 60ms); }
[data-rev][data-estado="oculto"] { opacity: 0; transform: translateY(16px); }
.ficha-item[data-foto-entra] .ficha { transition: opacity 700ms var(--curva-entrada), transform var(--dur-foto) var(--curva-entrada); transition-delay: calc(var(--i, 0) * 90ms); }
.ficha-item[data-foto-entra] .ficha__marco img { transition: transform var(--dur-foto) var(--curva-entrada); transition-delay: calc(var(--i, 0) * 90ms); }
.ficha-item[data-foto-entra="oculto"] .ficha { opacity: 0; transform: translate(var(--dx, 0px), 32px); }
.ficha-item[data-foto-entra="oculto"] .ficha__marco img { transform: scale(1.08); }

/* ---------- Lista de servicios (vive en el menú a pantalla completa, DESIGN 3.2) ---------- */
.servicios { display: grid; gap: var(--esp-7); }
.servicios__lista { border-top: 1px solid var(--color-linea); }
.servicio { border-bottom: 1px solid var(--color-linea); }
.servicio__enlace {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--esp-4); align-items: center;
  padding: var(--esp-3) 0; text-decoration: none; transition: transform var(--dur-pulsar) var(--curva-ui);
}
.servicio__enlace:active { transform: scale(0.99); }
.servicio__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-carga); }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.servicio__muestra { display: none; }
.servicio__nombre { font-size: var(--tipo-subtitulo); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; display: flex; align-items: center; gap: 8px; }
.servicio__nombre svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 300ms var(--curva-ui); }
.servicio__texto { display: block; margin-top: 6px; font-size: var(--tipo-pequeno); line-height: 1.4; }
.servicio__enlace:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
.servicio__enlace[aria-current="page"] .servicio__nombre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.servicios__panel { display: none; }
@media (min-width: 1024px) {
  .servicios { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: center; }
  .servicios__lista { grid-column: 1 / 9; }
  .servicio__enlace { grid-template-columns: 56px 1fr; padding: clamp(14px, 3.2svh, 32px) 0; }
  .servicio__foto { display: none; }
  .servicio__muestra { display: block; }
  .servicio__nombre { font-size: var(--tipo-titulo); letter-spacing: -0.03em; line-height: 1; transition: transform 300ms var(--curva-ui); }
  .servicio__texto { font-size: var(--tipo-cuerpo); }
  .servicios__panel {
    display: block; grid-column: 9 / 13; position: relative; justify-self: end; aspect-ratio: 4 / 5; background: var(--color-carga); overflow: hidden;
    width: min(100%, calc((100svh - 290px) * 0.8));
  }
  .servicios__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); }
  .servicios__panel img.act { clip-path: inset(0); z-index: 2; }
  .servicios__panel img.prev { clip-path: inset(0); z-index: 1; }
  .servicios__panel img.entra { transition: clip-path 500ms var(--curva-marco); }
  .servicio__enlace:hover .servicio__nombre, .servicio__enlace:focus-visible .servicio__nombre { transform: translateX(8px); }
  .servicio__enlace:hover svg, .servicio__enlace:focus-visible svg { transform: translateX(4px); }
}

/* Destacada (inicio) */
.destacada { display: grid; gap: var(--esp-7); }
.destacada__texto { display: grid; gap: var(--esp-4); align-content: start; }
.destacada__texto .entradilla { max-width: 26ch; }
@media (min-width: 1024px) {
  .destacada { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); }
  .destacada__texto { grid-column: 1 / 4; position: sticky; top: 120px; align-self: start; }
}

/* Cómo trabajo */

/* ==========================================================================
   Inicio, iteración 2: trabajos, sobre mí y cómo trabajo
   ========================================================================== */

/* Título de sección: el rótulo enorme en dos líneas, centrado (o a la izquierda con .rotulo--izq) */
.rotulo--seccion { font-size: min(200px, 20svh, max(56px, calc(100cqw / (var(--nn) * var(--k))))); text-align: center; margin-left: 0; }
.rotulo--seccion .rotulo__linea { display: block; }
.rotulo--izq { text-align: left; margin-left: -0.04em; }

/* ---------- 2. Trabajos: carrusel de tarjetas de vídeo (receta de "Design in public", shopify.design) ---------- */
.trabajos { padding-top: var(--esp-seccion); }
.trabajos__cab { padding-inline: var(--margen); display: grid; justify-items: center; gap: var(--esp-6); }
.trabajos__entradilla { text-align: center; max-width: 42ch; text-wrap: pretty; }   /* iteración 15: texto más largo */
@media (min-width: 1024px) { .trabajos__cab { gap: var(--esp-8); } }

/* Móvil y tableta (< 1100 px): carrusel con deslizamiento y scroll-snap centrado; las vecinas se asoman por los lados y la central va a escala 1.
   Escritorio (≥ 1100 px): las cuatro tarjetas caben enteras y centradas, sin deslizar. Se usan unidades de contenedor (cqw), no vw,
   para no contar el ancho de la barra de scroll. */
.carrusel { --tarjeta: min(340px, 70cqw); --sep: 12px; margin-top: var(--esp-7); container-type: inline-size; }
@media (min-width: 768px) { .carrusel { --tarjeta: min(360px, 46cqw); --sep: 24px; } }
/* Escritorio (iteración 6): tarjetas más grandes y más altas (9:14): casi de borde a borde (24 px a cada lado), separación de 16 px y tope de 420 px */
@media (min-width: 1280px) { .carrusel { --pad-car: 20px; --sep: 26px; --tarjeta: min(420px, calc((100cqw - 2 * var(--pad-car) - 4 * var(--sep)) / 5)); } }
/* La pista recorta lo que se sale, también la sombra: se le da holgura arriba y abajo y se compensa con margen negativo para no mover nada */
.carrusel__pista {
  display: flex; gap: var(--sep); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: var(--holgura-sombra) calc((100cqw - var(--tarjeta)) / 2); margin: calc(var(--holgura-sombra) * -0.8) 0 calc(var(--holgura-sombra) * -0.6);
  cursor: grab; position: relative;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { scroll-snap-type: none; cursor: grabbing; }
.carrusel__pista.arrastrando .tarjeta { pointer-events: none; }
.tarjeta-item { flex: none; width: var(--tarjeta); scroll-snap-align: center; }
@media (min-width: 1280px) {
  .carrusel__pista { justify-content: safe center; padding-inline: var(--pad-car); cursor: auto; }
  .tarjeta-item { scroll-snap-align: none; }
  .tarjeta-item--clon { display: none; }                          /* las copias del bucle solo existen cuando se desliza */
}
/* Contenedor interior: la escala del carrusel móvil la escribe el script aquí (el li usa transform para la entrada y la a.tarjeta para el hover) */
.tarjeta-escala { transform-origin: 50% 50%; will-change: transform; }
@media (min-width: 1280px) { .tarjeta-escala { will-change: auto; } }

.tarjeta {
  position: relative; isolation: isolate; display: block; aspect-ratio: 9 / 13; overflow: hidden;
  border-radius: 32px; background: var(--color-carga); color: #fff; text-decoration: none; box-shadow: var(--sombra-tarjeta);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 650ms var(--curva-ui);
}
@media (min-width: 768px) { .tarjeta { border-radius: 28px; } }
@media (min-width: 1280px) { .tarjeta { aspect-ratio: 9 / 14; } }
.tarjeta:active { transform: scale(0.97); transition-duration: var(--dur-pulsar); }
.tarjeta:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: scale(1.015); box-shadow: var(--sombra-tarjeta-hover); }
  .tarjeta:hover .tarjeta__medio > * { transform: scale(1.04); }
}
/* El vídeo llena toda la tarjeta: póster debajo, vídeo encima (aparece cuando ya reproduce). El recorte redondeado se repite en el medio y en el degradado
   para que ningún hijo con transform (zoom del hover) asome por una esquina. */
.tarjeta__medio, .tarjeta__medio img, .tarjeta__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta__medio { border-radius: inherit; overflow: hidden; }
.tarjeta__medio > * { transition: transform 900ms var(--curva-ui); }
.tarjeta__medio video { opacity: 0; transition: opacity 300ms linear, transform 900ms var(--curva-ui); }
.tarjeta.con-video .tarjeta__medio video { opacity: 1; }
/* Degradado suave arriba y abajo para que las etiquetas se lean sobre cualquier fotograma */
.tarjeta::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(23, 20, 26, 0.38) 0, rgba(23, 20, 26, 0) 24%, rgba(23, 20, 26, 0) 50%, rgba(23, 20, 26, 0.66) 100%);
}
.tarjeta__etiqueta {
  position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.tarjeta__etiqueta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 300ms var(--curva-ui); }
.tarjeta__etiqueta--sup { position: absolute; top: 22px; left: 24px; right: 24px; }
.tarjeta:hover .tarjeta__etiqueta svg { transform: translateX(4px); }
.tarjeta__pie { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 160px; }
.tarjeta__pie .tarjeta__etiqueta { position: absolute; left: 24px; bottom: 22px; }
/* Banda de brochazo del color del servicio bajo el nombre (la banda visible ocupa ~92 % de este alto). Queda a 40 px del borde: no toca las esquinas redondeadas */
.tarjeta__banda {
  position: absolute; z-index: 1; left: -3%; right: -3%; bottom: 56px; height: 96px; pointer-events: none;
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}
.tarjeta__velo {
  position: absolute; z-index: 0; left: -3%; right: -3%; bottom: 56px; height: 96px; pointer-events: none;
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}
/* Iteración 19: en móvil y tableta, el brochazo con el nombre se pinta de izquierda a derecha cuando la tarjeta queda en el centro (el script pone
   .pista-pinta en la pista y .en-centro en la tarjeta) y se recoge, rápido, al irse. En escritorio ancho, siempre a la vista. */
.pista-pinta .tarjeta__banda, .pista-pinta .tarjeta__velo { clip-path: inset(0 100% 0 0); transition: clip-path 280ms var(--curva-ui); }
.pista-pinta .en-centro .tarjeta__banda, .pista-pinta .en-centro .tarjeta__velo { clip-path: inset(0 0 0 0); transition: clip-path 340ms cubic-bezier(0.6, 0, 0.2, 1); }   /* iteración 21: brochazo rápido */
.pista-pinta .sin-anim .tarjeta__banda, .pista-pinta .sin-anim .tarjeta__velo { transition: none; }
@media (prefers-reduced-motion: reduce) { .pista-pinta .tarjeta__banda, .pista-pinta .tarjeta__velo { clip-path: none; transition: none; } }
/* Nombre recortado (iteración 6): el script mete un SVG dentro de la banda con el color y las letras como hueco, y por el hueco se ve el vídeo */
.tarjeta__recorte { position: absolute; left: 2.83%; width: 94.34%; top: 0; height: 100%; overflow: visible; }   /* = el ancho de la tarjeta (la banda mide el 106 %) */
.tarjeta__recorte text { font-family: var(--fuente); font-weight: 600; font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem); letter-spacing: -0.04em; }
.tarjeta--recorte .tarjeta__nombre { visibility: hidden; }
/* Tarjeta de Talleres (Próximamente): desde la iteración 13 se puede pulsar y abre la ventana #aviso-talleres */
.tarjeta--proximamente { cursor: pointer; }
.tarjeta--recorte .banda__color, .tarjeta--recorte .banda__purpurina { display: none; }
.tarjeta__nombre {
  position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 60px; height: 88px; display: flex; align-items: center;
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em;
  text-wrap: balance; color: var(--txt, var(--color-tinta));
}

.seccion-interna { padding: var(--esp-seccion) var(--margen) 0; }

/* ---------- 3. Sobre mí ---------- */
.sobre { padding-top: var(--esp-seccion); }
.sobre__cab { padding-inline: var(--margen); }
.sobre__historia { display: grid; gap: var(--esp-6); padding: var(--esp-7) var(--margen) 0; }
.sobre__retrato { margin: 0; width: 100%; }
.sobre__retrato-marco { background: var(--color-carga); }            /* sin recorte: la foto (3:2) se ve entera */
.sobre__retrato-marco img { display: block; width: 100%; height: auto; }
.sobre__texto { display: grid; gap: var(--esp-4); align-content: start; max-width: 36rem; }
@media (min-width: 1024px) {
  .sobre__historia { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: center; padding-top: var(--esp-8); }
  .sobre__retrato { grid-column: 1 / 6; width: 100%; }
  .sobre__texto { grid-column: 7 / 12; }
}

/* ---------- Cómo trabajo ----------
   Estado final y versión de "reducir movimiento": la cara completa en el centro y los tres pasos a la vez, alternando lados
   (paso 1 a la izquierda, el 2 a la derecha, el 3 a la izquierda), cada uno con su texto y sus dos fotos en el lado contrario.
   Todo vive en una sola cuadrícula (la de la escena); la fase de movimiento (más abajo) solo la fija y la va componiendo con el scroll.
   Cada paso tiene su color (--c, en el HTML): rosa, melocotón y pervinca de los brochazos de la tarjeta de Ester. */
.ct { margin-top: var(--esp-seccion); container-type: inline-size; }
.ct__escena {
  --arriba: var(--esp-7);
  --abajo: clamp(12px, 2.4svh, 28px);
  --hueco: clamp(4px, 0.9svh, 12px);
  --tit: calc(var(--tipo-display) * 0.92);
  --cara-h: clamp(120px, 24svh, 340px);                           /* alto de la cara en móvil y tableta vertical */
  --col: calc((100cqw - 2 * var(--margen) - 11 * var(--medianil)) / 12);
  --f1: 3; --f2: 4; --f3: 5;                                       /* fila de cada paso (en escritorio, 2, 3 y 4) */
  position: relative; display: grid; align-content: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--hueco);
  grid-template-rows: auto var(--cara-h) repeat(3, minmax(clamp(96px, 14.5svh, 200px), 1fr));
  min-height: 100svh; padding: var(--arriba) var(--margen) var(--abajo);
}
.ct__titulo { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; font-size: var(--tipo-display); line-height: 0.92; letter-spacing: -0.035em; font-weight: 600; text-align: center; text-wrap: balance; }
.ct__cara { grid-column: 3 / 11; grid-row: 2; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ct__lienzo { position: relative; height: var(--cara-h); aspect-ratio: 329 / 392; flex: none; }
.ct__lienzo .cara { position: absolute; inset: 0; width: 100%; height: 100%; }

.ct__pasos, .ct__paso { display: contents; }
.ct__texto { display: grid; align-content: center; gap: 4px; min-width: 0; }
.ct__texto .nota { padding: 0; }
.ct__texto .subtitulo { font-size: clamp(1.25rem, 6.2cqw, 2.25rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.ct__texto .cuerpo { font-size: var(--tipo-pequeno); line-height: 1.36; max-width: 34ch; }
.ct__resalte { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
/* Brochazo horizontal del color del paso bajo el título (misma máscara que las bandas de las tarjetas: la banda visible ocupa ~92 % del alto) */
.ct__resalte::before {
  content: ""; position: absolute; z-index: -1; left: -5%; right: -5%; top: 44%; bottom: -8%; background: var(--c); opacity: 0.9;
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}
.ct__paso[data-paso="1"] .ct__texto { grid-column: 1 / 9; grid-row: var(--f1); }
.ct__paso[data-paso="2"] .ct__texto { grid-column: 5 / 13; grid-row: var(--f2); }
.ct__paso[data-paso="3"] .ct__texto { grid-column: 1 / 9; grid-row: var(--f3); }

/* Fotos: la grande (a) junto a su texto; la pequeña (b) en el hueco a un lado de la cara. Todas en el mismo marco 4:5. */
.ct__fotos { display: contents; }
.ct__foto { margin: 0; overflow: hidden; background: var(--color-carga); aspect-ratio: 4 / 5; min-width: 0; }
.ct__foto img { width: 100%; height: 100%; object-fit: cover; }
.ct__foto--a { height: 100%; width: auto; max-width: 100%; }
.ct__paso[data-paso="1"] .ct__foto--a { grid-column: 9 / 13; grid-row: var(--f1); justify-self: end; }
.ct__paso[data-paso="2"] .ct__foto--a { grid-column: 1 / 5; grid-row: var(--f2); justify-self: start; }
.ct__paso[data-paso="3"] .ct__foto--a { grid-column: 9 / 13; grid-row: var(--f3); justify-self: end; }
.ct__foto--b { width: min(72px, calc(var(--cara-h) * 0.34)); height: auto; z-index: 1; }
.ct__prods { display: none; }          /* los productos solo se ven en la historia con movimiento */
.ct__paso[data-paso="1"] .ct__foto--b { grid-column: 1 / 4; grid-row: 2; align-self: start; justify-self: start; }
.ct__paso[data-paso="2"] .ct__foto--b { grid-column: 10 / 13; grid-row: 2; align-self: center; justify-self: end; }
.ct__paso[data-paso="3"] .ct__foto--b { grid-column: 1 / 4; grid-row: 2; align-self: end; justify-self: start; }

/* Sin fijar (reducir movimiento, pantalla baja) en móvil: hueco abajo para que el botón flotante de WhatsApp no tape la última foto */
@media (max-width: 899px) { .ct:not([data-modo="fijado"]) .ct__escena { padding-bottom: 80px; } }

/* Tableta en vertical: la misma composición que en móvil, con la cara y el texto más grandes */
@media (min-width: 700px) and (max-width: 899px) {
  .ct__escena { --cara-h: clamp(200px, 30svh, 380px); }
  .ct__texto .subtitulo { font-size: clamp(1.5rem, 4.2cqw, 2.25rem); }
  .ct__texto .cuerpo { font-size: var(--tipo-cuerpo); }
}

@media (min-width: 900px) {
  .ct__escena {
    --f1: 2; --f2: 3; --f3: 4;
    --hueco: clamp(8px, 1.6svh, 20px);
    --cara-wmax: calc(4 * var(--col) + 5 * var(--medianil));
    grid-template-rows: auto repeat(3, minmax(clamp(150px, 20svh, 260px), 1fr));
  }
  .ct__cara { grid-column: 5 / 9; grid-row: 2 / 5; }
  .ct__lienzo { height: 100%; max-height: calc(var(--cara-wmax) * 392 / 329); max-width: var(--cara-wmax); }
  .ct__texto .subtitulo { font-size: min(var(--tipo-titulo), 6.4svh, 3.15cqw); }          /* "La prueba, en casa" cabe en una línea del carril */
  .ct__texto .cuerpo { font-size: var(--tipo-entradilla); line-height: 1.32; letter-spacing: -0.01em; max-width: 26ch; }
  .ct__paso[data-paso="1"] .ct__texto { grid-column: 1 / 5; }
  .ct__paso[data-paso="2"] .ct__texto { grid-column: 9 / 13; }
  .ct__paso[data-paso="3"] .ct__texto { grid-column: 1 / 5; }
  /* las dos fotos del paso, juntas en el lado contrario: la grande a toda la altura de la fila y la pequeña pegada abajo (arriba en el paso 2) */
  .ct__fotos { display: flex; align-items: stretch; gap: var(--medianil); min-height: 0; }
  .ct__paso[data-paso="1"] .ct__fotos { grid-column: 9 / 13; grid-row: var(--f1); justify-content: flex-end; }
  .ct__paso[data-paso="2"] .ct__fotos { grid-column: 1 / 5; grid-row: var(--f2); justify-content: flex-end; flex-direction: row-reverse; }
  .ct__paso[data-paso="3"] .ct__fotos { grid-column: 9 / 13; grid-row: var(--f3); justify-content: flex-end; }
  .ct__foto--a, .ct__foto--b { grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; align-self: auto !important; flex: 0 1 auto; }
  .ct__foto--a { height: 100%; width: auto; }
  .ct__foto--b { height: 76%; width: auto; }
  .ct__paso[data-paso="1"] .ct__foto--b, .ct__paso[data-paso="3"] .ct__foto--b { align-self: flex-end !important; }
  .ct__paso[data-paso="2"] .ct__foto--b { align-self: flex-start !important; }
}

/* ==========================================================================
   Fase de movimiento de la iteración 2 ("storytelling")
   Todo lo de este bloque depende de atributos que pone el script (data-estado, data-aterriza, data-modo...) o de la clase
   .js, y nunca de "reducir movimiento": sin JavaScript se ve el estado final de arriba.
   ========================================================================== */

/* ---------- Portada: el logo se escribe y la foto se asienta ----------
   El logo (dentro del H1) no se esconde con opacidad: lo tapa una tapa blanca con el borde de pluma inclinado que se retira
   hacia la derecha (solo transform, va por la GPU aunque la página esté cargando). Arriba el nombre manuscrito; la línea
   "MAKEUP ARTIST" se descubre después, más rápido. La foto, la frase y el botón están visibles desde el primer fotograma:
   la foto solo hace un zoom suave dentro de su marco. Una sola vez por visita (el script pone .logo-escrito al terminar). */
@media (prefers-reduced-motion: no-preference) {
  /* Iteración 15: el logo ya no se descubre con una tapa: es assets/marca/logo-escrito.svg, que se escribe a mano él solo (trazos en orden de pluma) */
  .js:not(.logo-escrito) .portada .marco-portada img { animation: asentar 1200ms var(--curva-entrada) both; }
}
/* La tapa empieza cubriendo todo (su degradado queda fuera, a la izquierda) y acaba fuera de la caja, a la derecha */
@keyframes asentar { from { transform: scale(1.06); } }

/* ---------- Texto línea a línea (receta de yulia.world) ----------
   h2[data-lineas]: se mueven sus .rotulo__linea. p[data-lineas]: el script lo parte en .linea-txt solo mientras entra y luego
   lo deja como estaba. Antes de entrar (y solo si estaba fuera de pantalla) el bloque entero está a opacidad 0. */
[data-lineas][data-estado="oculto"] { opacity: 0; }
.linea-txt { display: block; }

/* ---------- Fotos que aterrizan por su lado ([data-lado="izq|der"]) ---------- */
[data-lado] { --aterriza-dx: var(--aterriza-x); }
[data-lado="izq"] { --aterriza-dx: calc(var(--aterriza-x) * -1); }
[data-aterriza="fuera"] { opacity: 0; transform: translate3d(var(--aterriza-dx), 0, 0) scale(var(--aterriza-s)); }
[data-aterriza="fuera"] img { transform: scale(1.08); }
[data-aterriza="entra"] { transition: transform var(--dur-aterriza) var(--curva-entrada), opacity 500ms var(--curva-pintar); will-change: transform, opacity; }
[data-aterriza="entra"] img { transition: transform var(--dur-aterriza) var(--curva-entrada); }

/* ---------- Carrusel: las tarjetas llegan volando (receta de "Design in public", shopify.design) ----------
   Cada li.tarjeta-item parte a la derecha (100vw + su índice × ancho de tarjeta × 1,4) y grande (2,25; móvil 1,3), y se asienta
   en 1,5 s con la curva de entrada; la opacidad en 0,4 s; 90 ms de retardo por tarjeta. La a.tarjeta no se toca (su hover). */
.carrusel__pista { overflow-y: hidden; }        /* durante la entrada las tarjetas escaladas se recortan, sin scroll vertical (la holgura de la sombra va dentro) */
.tarjeta-item[data-i="1"] { --i: 1; } .tarjeta-item[data-i="2"] { --i: 2; } .tarjeta-item[data-i="3"] { --i: 3; } .tarjeta-item[data-i="4"] { --i: 4; }
.carrusel[data-estado] .carrusel__pista { scroll-snap-type: none; }
.carrusel[data-estado="oculto"] .tarjeta-item {
  opacity: 0;
  transform: translate3d(calc(100vw + var(--i, 0) * var(--tarjeta) * 1.4), 0, 0) scale(var(--tarjeta-s));
}
.carrusel[data-estado="entra"] .tarjeta-item {
  transition: transform var(--dur-tarjetas) var(--curva-entrada) calc(var(--i, 0) * 90ms), opacity 400ms var(--curva-ui) calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}

/* ---------- "Cómo trabajo": historia paso a paso (data-modo="fijado", lo pone el script) ----------
   El contenedor crece (100svh + tramo) y la escena se queda fija (sticky): el título arriba y la cara quieta en el centro, que se va
   dibujando con el scroll. Los pasos llegan UNO A UNO: cada paso es una capa (.ct__paso, posición absoluta sobre la escena) con su texto,
   sus fotos y sus productos; cuando toca, la capa se va (todo sube y se funde) y llega la siguiente. El último paso se queda.
   El texto de cada paso llega en fragmentos sueltos (el título y cada .ct__f), cada uno en su sitio de una pequeña escalera.
   Los productos están a tres profundidades (lejos, medio, cerca): los lejanos son más pequeños, están desenfocados y se mueven menos
   con el scroll (paralaje); los cercanos son más grandes, nítidos y se mueven más.
   El script solo escribe variables por elemento: --k (0 a 1, cuánto ha llegado), --o (opacidad de llegada), --e (0 a 1, cuánto se ha ido),
   --d (0 a 1, avance durante la estancia del paso, para el paralaje) y --r (brochazo bajo el título). Aquí está todo lo demás.
   Regla para los productos: el alto manda y el ancho es automático (nunca los dos), así no se deforman. */
.ct[data-modo="fijado"] { --tramo: 450svh; height: calc(100svh + var(--tramo)); }
@media (min-width: 900px) { .ct[data-modo="fijado"] { --tramo: 560svh; } }
.ct[data-modo="fijado"] .ct__escena {
  position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden;
  --arriba: calc(var(--alto-cabecera) + 6px);
  --abajo: clamp(12px, 3svh, 32px);
  --top-stage: calc(var(--arriba) + var(--tit) + 8px);              /* donde empieza el escenario (bajo el título) */
  --S: calc(100svh - var(--top-stage) - var(--abajo));              /* alto del escenario */
  --U: min(var(--S), calc(1.7 * (4 * var(--col) + 3 * var(--medianil))));   /* unidad de tamaño de los productos (escritorio): el alto del escenario, sin pasarse del ancho de su caja */
  grid-template-rows: auto minmax(0, 1fr);
}
@media (min-width: 900px) { .ct[data-modo="fijado"] .ct__escena { --arriba: calc(var(--alto-cabecera) + 12px); } }

/* La cara, quieta en el centro del escenario */
.ct[data-modo="fijado"] .ct__cara { grid-column: 1 / -1; grid-row: 2; align-self: start; height: calc(var(--S) * 0.4); }
.ct[data-modo="fijado"] .ct__lienzo { height: 100%; max-height: none; max-width: none; }
@media (min-width: 900px) {
  .ct[data-modo="fijado"] .ct__cara { height: auto; align-self: stretch; }
  .ct[data-modo="fijado"] .ct__lienzo { max-height: 100%; max-width: calc(5 * var(--col) + 4 * var(--medianil)); }
}

/* Cada paso es una capa sobre el escenario. Móvil: cara, franja de fotos y productos, y texto. Escritorio: mitad de arriba (texto) y de abajo
   (productos) en el lado del texto, y las fotos en el lado contrario */
.ct[data-modo="fijado"] .ct__paso {
  position: absolute; inset: var(--top-stage) var(--margen) var(--abajo); display: grid; pointer-events: none;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil);
  grid-template-rows: calc(var(--S) * 0.44) calc(var(--S) * 0.23) minmax(0, 1fr);
}

/* Texto: el título y cada fragmento entran por separado (desde su lado, subiendo un poco) y se van hacia arriba */
.ct[data-modo="fijado"] .ct__texto { grid-column: 1 / -1; grid-row: 3; align-self: center; justify-self: stretch; display: block; padding-top: 4px; min-width: 0; }
.ct[data-modo="fijado"] .ct__texto .subtitulo, .ct[data-modo="fijado"] .ct__f {
  --tx: -28px;
  opacity: calc(var(--o, 0) * (1 - var(--e, 0)));
  transform: translate3d(calc((1 - var(--k, 0)) * var(--tx)), calc((1 - var(--k, 0)) * 20px + var(--e, 0) * -48px), 0);
}
.ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__texto .subtitulo, .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__f { --tx: 28px; }
.ct[data-modo="fijado"] .ct__texto .subtitulo { font-size: clamp(1.5rem, 6.6vw, 1.9rem); line-height: 1; }
.ct[data-modo="fijado"] .ct__texto .ct__resalte { display: block; width: fit-content; }
.ct[data-modo="fijado"] .ct__frases { display: block; margin-top: 14px; max-width: none; }
.ct[data-modo="fijado"] .ct__f {
  display: block; width: fit-content; max-width: calc(100% - var(--ix, 0%)); margin: 8px 0 0 calc(var(--ix, 0%) * 0.7);
  font-size: var(--tipo-cuerpo); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
.ct[data-modo="fijado"] .ct__f--enlace { margin-top: 10px; font-size: var(--tipo-nota); font-weight: 400; letter-spacing: -0.01em; }
.ct[data-modo="fijado"] .ct__f a { pointer-events: auto; }

/* Fotos: la grande (a) arriba y la pequeña (b) abajo, en el lado contrario al del texto (en móvil, solo la grande, en la franja) */
.ct[data-modo="fijado"] .ct__fotos, .ct[data-modo="fijado"] .ct__prods { display: block; position: relative; min-height: 0; min-width: 0; }
.ct[data-modo="fijado"] .ct__fotos, .ct[data-modo="fijado"] .ct__prods { grid-row: 2; grid-column: 1 / 13; }
.ct[data-modo="fijado"] .ct__foto {
  --fx: 14cqw; --fy: 12svh; --fs: 0.35; --par: 40px;
  position: absolute; margin: 0; z-index: 1;
  opacity: calc(var(--o, 0) * (1 - var(--e, 0)));
  transform: translate3d(calc((1 - var(--k, 0)) * var(--fx)), calc((1 - var(--k, 0)) * var(--fy) + var(--e, 0) * var(--ey, -80px) + (0.5 - var(--d, 0)) * var(--par)), 0) scale(calc(1 + (1 - var(--k, 0)) * var(--fs)));
}
.ct[data-modo="fijado"] .ct__foto img { transform: scale(calc(1 + (1 - var(--k, 0)) * 0.12)); }
.ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__foto { --fx: -14cqw; }
.ct[data-modo="fijado"] .ct__foto--a { top: 0; left: 0; right: 0; margin: 0 auto; height: 100%; width: calc(var(--S) * 0.184); }
.ct[data-modo="fijado"] .ct__foto--b { display: none; }

/* Productos: tres profundidades. Cada imagen trae su sitio y su tamaño en el HTML (--h, --x, --y y --rot en escritorio; --mh, --mx y --my en móvil) */
.ct[data-modo="fijado"] .ct__prod {
  --rot: 0deg; --py: 80px; --px: 0px; --drot: 18deg; --bl: 0px; --par: 60px; --op: 1; --ey: -150px;
  position: absolute; display: block; width: auto; max-width: none; user-select: none;
  height: calc(var(--mh) * 100%); left: var(--mx); bottom: var(--my);
  opacity: calc(var(--o, 0) * (1 - var(--e, 0)) * var(--op));
  transform: translate3d(calc((1 - var(--k, 0)) * var(--px)), calc((1 - var(--k, 0)) * var(--py) + var(--e, 0) * var(--ey) + (0.5 - var(--d, 0)) * var(--par)), 0) rotate(calc(var(--rot) + (1 - var(--k, 0)) * var(--drot) + var(--e, 0) * 8deg)) scale(calc(1 - var(--e, 0) * 0.08));
}
.ct[data-modo="fijado"] .ct__prod--lejos, .ct[data-modo="fijado"] .ct__prod--medio { filter: blur(var(--bl)); }          /* solo los lejanos llevan filtro: un blur(0) en los nítidos provoca restos de pintado */
.ct[data-modo="fijado"] .ct__prod--lejos { --bl: 1.8px; --op: 0.9; --par: 24px; --ey: -80px; --py: 50px; z-index: 0; }
.ct[data-modo="fijado"] .ct__prod--medio { --bl: 1px; --par: 54px; --ey: -140px; --py: 80px; z-index: 0; }
.ct[data-modo="fijado"] .ct__prod--cerca { --par: 92px; --ey: -230px; --py: 130px; z-index: 2; }
.ct[data-modo="fijado"][data-vivo] .ct__prod { animation: ct-flota 5.6s ease-in-out infinite alternate; }
.ct[data-modo="fijado"][data-vivo] .ct__prod--medio { animation-duration: 6.8s; animation-delay: -2.4s; }
.ct[data-modo="fijado"][data-vivo] .ct__prod--lejos { animation-duration: 8s; animation-delay: -4s; }
@keyframes ct-flota { from { translate: 0 -5px; } to { translate: 0 7px; } }

/* móviles bajos (iPhone SE y parecidos): el texto de los tres pasos baja un punto para no rozar los productos */
@media (min-width: 600px) and (max-width: 899px) { .ct[data-modo="fijado"] .ct__escena { --ct-ancho: 540px; --ct-tit: 2.125rem; --ct-f: 1.1875rem; } }   /* tableta: la escena centrada, a 540 px */
@media (max-width: 899px) and (max-height: 720px) {
  .ct[data-modo="fijado"] .ct__texto .subtitulo { font-size: 1.5rem; }
  .ct[data-modo="fijado"] .ct__f { font-size: 0.95rem; margin-top: 5px; }
  .ct[data-modo="fijado"] .ct__f--enlace { font-size: 0.8rem; margin-top: 10px; }
  .ct[data-modo="fijado"] .ct__frases { margin-top: 8px; }
}
@media (max-width: 899px) {
  .ct[data-modo="fijado"] .ct__prod--lejos { --par: 10px; --ey: -50px; --bl: 1.4px; }
  .ct[data-modo="fijado"] .ct__prod--medio { --par: 22px; --ey: -90px; --bl: 0.8px; }
  .ct[data-modo="fijado"] .ct__prod--cerca { --par: 34px; --ey: -140px; }
}
/* ---------- "Cómo trabajo" en móvil y tableta vertical, rehecho en la iteración 22 ----------
   Antes: la cara ocupaba media pantalla, la foto era pequeña, los productos iban apretados y el texto, diminuto y escalonado.
   Ahora cada paso tiene tres franjas: arriba "01 / 03" y el título con su brochazo (y, a la derecha, la cara, que se sigue dibujando con el
   scroll y hace de indicador de avance); en medio, la foto grande redondeada con la pequeña montada en la esquina contraria y los productos
   alrededor; abajo, el texto a todo el ancho y a tamaño de lectura. Los pasos 1 y 3 llevan la foto grande a la izquierda; el 2, a la derecha.
   Los productos usan aquí sus propias variables (--m2h alto, --m2x izquierda, --m2y abajo, en fracción de la franja del medio): las del HTML
   (--mh, --mx, --my) eran de la composición anterior. */
@media (max-width: 899px) {
  .ct__pasos { counter-reset: ct-paso; }
  .ct__paso { counter-increment: ct-paso; }
  /* franjas: el título siempre tiene sitio para "01 / 03" y dos líneas, y el texto para cuatro; las fotos se quedan con el resto */
  .ct[data-modo="fijado"] .ct__escena { --ct-tit: clamp(1.5rem, 6.9vw, 1.875rem); --ct-f: 1.125rem; --ct-ancho: 100%; }
  .ct[data-modo="fijado"] .ct__paso { left: max(var(--margen), (100% - var(--ct-ancho)) / 2); right: max(var(--margen), (100% - var(--ct-ancho)) / 2);
    grid-template-rows: calc(var(--ct-tit) * 2.04 + 40px) minmax(0, 1fr) calc(var(--ct-f) * 1.4 * 4 + 30px); row-gap: 0; }
  .ct[data-modo="fijado"] .ct__texto { display: contents; }
  .ct[data-modo="fijado"] .ct__texto .subtitulo { grid-row: 1; grid-column: 1 / 9; align-self: end; padding-bottom: 14px; font-size: var(--ct-tit); line-height: 1.02; }
  .ct[data-modo="fijado"] .ct__texto .subtitulo::before {
    content: "0" counter(ct-paso) " / 03"; display: block; margin-bottom: 10px;
    font: 500 var(--tipo-nota)/1 var(--mono); letter-spacing: 0.06em; color: var(--color-ciruela);
  }
  .ct[data-modo="fijado"] .ct__frases { grid-row: 3; grid-column: 1 / -1; align-self: start; margin-top: 20px; }
  .ct[data-modo="fijado"] .ct__f { margin: 3px 0 0; max-width: none; font-size: var(--ct-f); font-weight: 400; line-height: 1.4; letter-spacing: -0.005em; text-wrap: pretty; }
  /* la cara, pequeña, arriba a la derecha (junto al título) */
  .ct[data-modo="fijado"] .ct__cara { grid-area: auto; position: absolute; z-index: 0; top: calc(var(--top-stage) + 4px); right: max(var(--margen), (100% - var(--ct-ancho)) / 2); height: calc(var(--ct-tit) * 2.04 + 34px); width: auto; }
  .ct[data-modo="fijado"] .ct__lienzo { height: 100%; }
  /* fotos */
  .ct[data-modo="fijado"] .ct__foto { border-radius: 18px; }
  .ct[data-modo="fijado"] .ct__foto--a { --par: 14px; top: 10px; left: 0; right: auto; margin: 0; height: calc(84% - 10px); width: auto; }   /* paralaje corto: con 40 px subía hasta pisar el título */
  .ct[data-modo="fijado"] .ct__foto--b { display: block; z-index: 1; top: auto; bottom: 0; left: auto; right: 0; height: 46%; width: auto; box-shadow: 0 0 0 4px #fff; --ey: -110px; --fx: 16cqw; --fy: 3svh; --fs: 0.3; --par: 22px; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__foto--a { left: auto; right: 0; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__foto--b { right: auto; left: 0; --fx: -16cqw; }
  /* productos */
  .ct[data-modo="fijado"] .ct__prod { height: calc(var(--m2h) * 100%); left: var(--m2x); bottom: var(--m2y); }
  .ct[data-modo="fijado"] .ct__prod--cerca { z-index: 3; }
  .ct[data-modo="fijado"] .ct__prod--lejos { --py: 24px; }
  .ct[data-modo="fijado"] .ct__prod--medio { --py: 36px; }
  .ct[data-modo="fijado"] .ct__prod--cerca { --py: 48px; }   /* al llegar suben menos que en escritorio: así no cruzan el texto de abajo */
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__prod:nth-child(1) { --m2h: 0.22; --m2x: 62%; --m2y: 77%; }   /* lejos: arriba a la derecha, detrás */
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__prod:nth-child(2) { --m2h: 0.40; --m2x: 76%; --m2y: 48%; }   /* medio: a la derecha, sobre la foto pequeña */
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__prod:nth-child(3) { --m2h: 0.42; --m2x: -5%; --m2y: -3%; }   /* cerca: abajo a la izquierda, delante de la grande */
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__prod:nth-child(1) { --m2h: 0.20; --m2x: 18%; --m2y: 79%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__prod:nth-child(2) { --m2h: 0.46; --m2x: -3%; --m2y: 46%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__prod:nth-child(3) { --m2h: 0.34; --m2x: 62%; --m2y: -4%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__prod:nth-child(1) { --m2h: 0.24; --m2x: 64%; --m2y: 76%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__prod:nth-child(2) { --m2h: 0.40; --m2x: 77%; --m2y: 47%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__prod:nth-child(3) { --m2h: 0.46; --m2x: -4%; --m2y: -3%; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .ct[data-modo="fijado"] .ct__escena { --ct-tit: 1.4rem; --ct-f: 0.97rem; }
  .ct[data-modo="fijado"] .ct__texto .subtitulo { padding-bottom: 10px; }
  .ct[data-modo="fijado"] .ct__texto .subtitulo::before { margin-bottom: 6px; }
  .ct[data-modo="fijado"] .ct__frases { margin-top: 12px; }
  .ct[data-modo="fijado"] .ct__f { margin-top: 2px; }
}
@media (min-width: 900px) {
  .ct[data-modo="fijado"] .ct__paso { grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr); }
  .ct[data-modo="fijado"] .ct__texto { grid-row: 1 / 3; align-self: center; padding: 0; }          /* centrado en altura: el texto respira, sin productos al lado */
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__texto, .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__texto { grid-column: 1 / 6; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__texto { grid-column: 9 / 13; margin-left: calc(var(--col) * 0.55); }       /* separado del borde derecho de la cara */
  .ct[data-modo="fijado"] .ct__texto .subtitulo { font-size: min(2.8cqw, 5svh); }
  .ct[data-modo="fijado"] .ct__frases { margin-top: 22px; }
  .ct[data-modo="fijado"] .ct__f { font-size: min(var(--tipo-entradilla), 3svh); margin-top: 10px; margin-left: var(--ix, 0%); }
  .ct[data-modo="fijado"] .ct__f--enlace { font-size: var(--tipo-pequeno); }
  .ct[data-modo="fijado"] .ct__fotos { grid-row: 1 / 3; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__fotos, .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__fotos { grid-column: 9 / 13; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__fotos { grid-column: 1 / 5; }
  .ct[data-modo="fijado"] .ct__foto--a { --par: 34px; top: 3%; left: auto; right: 0; margin: 0; height: calc(var(--S) * 0.58); width: auto; max-width: 78%; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__foto--a { left: 0; right: auto; }
  .ct[data-modo="fijado"] .ct__foto--b { --par: 24px; display: block; bottom: 1%; top: auto; height: calc(var(--S) * 0.34); width: auto; left: 0; --ey: -130px; --fx: 8cqw; --fy: 22svh; --fs: 0.5; }
  .ct[data-modo="fijado"] .ct__prods { grid-row: 1 / 3; }          /* los productos comparten caja con las fotos: van delante y detrás de ellas */
  .ct[data-modo="fijado"] .ct__paso[data-paso="1"] .ct__prods, .ct[data-modo="fijado"] .ct__paso[data-paso="3"] .ct__prods { grid-column: 9 / 13; }
  .ct[data-modo="fijado"] .ct__paso[data-paso="2"] .ct__prods { grid-column: 1 / 5; }
  .ct[data-modo="fijado"] .ct__prod { height: calc(var(--U) * var(--h)); left: var(--x); bottom: var(--y); }
  .ct[data-modo="fijado"] .ct__prod--lejos { --bl: 2.2px; }
  .ct[data-modo="fijado"] .ct__prod--medio { --bl: 1.4px; }
}

.ct[data-modo="fijado"][data-vivo] .ct__texto .subtitulo, .ct[data-modo="fijado"][data-vivo] .ct__f, .ct[data-modo="fijado"][data-vivo] .ct__foto, .ct[data-modo="fijado"][data-vivo] .ct__prod { will-change: transform, opacity; }
.ct[data-modo="fijado"] .ct__resalte::before { clip-path: inset(0 calc((1 - var(--r, 0)) * 100%) 0 0); }

/* Para colocar estados sin que se vean transiciones (al cambiar de modo o de vista) */
.sin-transicion, .sin-transicion * { transition: none !important; }

/* ---------- Cierre: Pide tu fecha ---------- */
.cierre { padding: var(--esp-seccion) 0 0; overflow-x: clip; }
.cierre__cartel { position: relative; padding: 0 var(--margen); container-type: inline-size; }
.cierre__cartel h2 { position: relative; z-index: 1; padding: 0.06em 0 0.14em; }
.cierre__cartel a.rotulo { text-decoration: none; display: block; }
.cierre__cartel a.rotulo:focus-visible { outline-offset: 6px; }
.banda {
  position: absolute; z-index: 0; left: -4%; right: -4%; top: -8%; bottom: -14%;
  pointer-events: none;
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--curva-pintar);
}
.banda__color, .banda__purpurina { position: absolute; inset: 0; display: block; }
.banda__color { background: var(--brocha-amarillo); }
.banda__purpurina { background: url("../assets/brochazos/purpurina-384.webp") 0 0 / 300px repeat; opacity: 0.85; }
.banda.pintada, html:not(.js) .banda { clip-path: inset(0 0 0 0); }
.banda.pintada .banda__purpurina { animation: destello 900ms var(--curva-marco) 900ms 1 both; }
@keyframes destello { 0%, 100% { opacity: 0.85; } 45% { opacity: 1; filter: brightness(1.3); } }
.cierre__cuerpo { display: grid; gap: var(--esp-7); padding: var(--esp-7) var(--margen) 0; }
.cierre__texto { display: grid; gap: var(--esp-5); align-content: start; }
.cierre__texto .entradilla { max-width: 30ch; }
.cierre__contacto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-5); }
.tel { font-family: var(--mono); font-size: var(--tipo-nota); color: var(--color-tinta); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .cierre__cuerpo { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); }
  .cierre__texto { grid-column: 1 / 6; }
  .formulario { grid-column: 7 / 12; }
}

/* Formulario */
.formulario { display: grid; gap: var(--esp-5); max-width: 36rem; width: 100%; }
.campo { display: grid; gap: var(--esp-2); }
.campo label, .campo legend { font-weight: 500; }
.campo .pista { color: var(--color-ciruela); font-size: var(--tipo-pequeno); line-height: 1.4; margin-top: -4px; }
/* Iteración 22: menos plano. El formulario va en una tarjeta con trazo fino (como el feed de Instagram), los campos son rellenos suaves y
   redondeados que al escribir se vuelven blancos con un halo rosa, "¿Para qué es?" con pastillas de color y el botón redondeado con flecha. */
.formulario { padding: clamp(20px, 3vw, 40px); border: 1px solid color-mix(in srgb, var(--color-tinta) 14%, #fff); border-radius: 28px; background: #fff; }
.campo input[type="text"], .campo input[type="date"], .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 18px; background: var(--color-carga); color: var(--color-tinta);
  border: 1px solid transparent; border-radius: 14px; font: 400 var(--tipo-cuerpo)/1.4 var(--fuente);
  transition: background var(--dur-rapida), border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.campo textarea { min-height: 132px; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: color-mix(in srgb, var(--color-tinta) 30%, #fff); }
.campo input:focus, .campo textarea:focus { outline: 0; background: #fff; border-color: var(--color-tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brocha-rosa) 40%, transparent); }
.campo [aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 18%, transparent); }
fieldset.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--tipo legend { padding: 0; margin-bottom: var(--esp-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-tinta) 22%, #fff); font-size: var(--tipo-pequeno); font-weight: 500; user-select: none;
  transition: background var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-pulsar) var(--curva-ui);
}
.chip::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.12); flex: none; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip:hover { border-color: var(--color-tinta); }
.chip:active { transform: scale(0.97); }
.chip:has(input:checked) { background: var(--c); border-color: var(--color-tinta); }
.chip:has(input:checked)::before { background: var(--color-tinta); box-shadow: 0 0 0 3px #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
.formulario__enviar { width: 100%; border-radius: 999px; margin-top: var(--esp-2); }
.formulario__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 300ms var(--curva-ui); }
@media (hover: hover) and (pointer: fine) { .formulario__enviar:hover svg { transform: translateX(4px); } }
.error { display: none; align-items: flex-start; gap: 8px; color: var(--color-error); font-size: var(--tipo-pequeno); line-height: 1.4; }
.error svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.campo.con-error .error { display: flex; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.check input {
  width: 24px; height: 24px; margin: 2px 0 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--color-tinta) 45%, #fff); border-radius: 7px; background: #fff center / 16px no-repeat;
  transition: background-color var(--dur-rapida), border-color var(--dur-rapida);
}
.check input:hover { border-color: var(--color-tinta); }
.check input:checked { background-color: var(--color-tinta); border-color: var(--color-tinta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check input[aria-invalid="true"] { border-color: var(--color-error); }
.resumen-errores { display: none; border: 1px solid var(--color-error); padding: var(--esp-4); color: var(--color-error); }
.resumen-errores.visible { display: block; }
.resumen-errores ul { margin-top: 8px; list-style: disc; padding-left: 20px; }
.exito { display: none; padding: var(--esp-5) 0; }
.exito.visible { display: block; }
.exito h3 { margin-bottom: 8px; }

/* ---------- Pie (iteración 20): "¿Hablamos?", tarjetas de contacto con color e icono, y la firma que se escribe ---------- */
.pie { margin-top: var(--esp-seccion); padding: var(--esp-9) var(--margen) var(--esp-5); display: grid; gap: var(--esp-8); border-top: 1px solid var(--color-linea); overflow: hidden; }
.pie__cab { display: grid; gap: var(--esp-4); }
.pie__rotulo { margin: 0; font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; font-size: clamp(3.5rem, 1.6rem + 9vw, 9.5rem); }
.pie__resalte { position: relative; display: inline-block; z-index: 0; }
.pie__resalte::before {
  content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; top: 38%; bottom: -10%;
  background: url("../assets/brochazos/purpurina-384.webp") 0 0 / 300px repeat, var(--brocha-rosa);
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
  clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--curva-pintar) 250ms;
}
.pie__rotulo[data-estado="oculto"] { opacity: 1; transform: none; }
.pie__rotulo[data-estado="oculto"] .pie__resalte::before { clip-path: inset(0 100% 0 0); }
.pie__intro { margin: 0; max-width: 34ch; }
/* Tarjetas de contacto: color de la paleta, icono arriba, etiqueta, dato grande y flecha que sale al pasar */
.pie__contactos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil); }
.pie__contactos li:first-child, .pie__contactos li:nth-child(2) { grid-column: 1 / -1; }   /* móvil: teléfono y WhatsApp a lo ancho; Instagram y TikTok, juntos */
.pie__tarjeta {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: space-between; gap: var(--esp-5); min-height: 150px; padding: 18px 18px 20px;
  border-radius: 24px; color: var(--color-tinta); text-decoration: none;
  /* iteración 22: sin color, solo un trazo fino (antes, relleno suave y borde de cada color) */
  background: #fff; border: 1px solid color-mix(in srgb, var(--color-tinta) 22%, #fff);
  transition: transform 300ms var(--curva-ui), border-color 300ms var(--curva-ui);
}
.pie__tarjeta .nota { color: var(--color-tinta); text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; }
.pie__ico { width: 28px; height: 28px; color: var(--color-tinta); }
.pie__valor { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem); overflow-wrap: anywhere; }
.pie__valor--usuario { overflow-wrap: normal; font-size: clamp(1rem, 0.85rem + 0.45vw, 1.25rem); }   /* el usuario solo se parte tras el guion bajo */
.pie__valor--tel { font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem); letter-spacing: -0.05em; overflow-wrap: normal; white-space: nowrap; }
.pie__flecha { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 300ms var(--curva-ui); }
.pie__tarjeta:active { transform: scale(0.98); }
.pie__tarjeta:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pie__tarjeta:hover { transform: translateY(-3px); border-color: var(--color-tinta); }
  .pie__tarjeta:hover .pie__flecha { transform: translate(3px, -3px); }
}
.pie__meta { display: grid; gap: var(--esp-4); padding-top: var(--esp-5); border-top: 1px solid var(--color-linea); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 4px var(--esp-5); }
.pie__enlaces a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 500; }
.pie__enlaces a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__zona { margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
/* "Volver arriba" (iteración 22): píldora con trazo fino y un círculo de tinta con la flecha; al pasar el ratón la flecha sale por arriba y entra otra por abajo */
.pie__arriba {
  justify-self: start; display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 7px 0 22px;
  border: 1px solid color-mix(in srgb, var(--color-tinta) 22%, #fff); border-radius: 999px; text-decoration: none; font-weight: 500;
  transition: border-color 300ms var(--curva-ui), transform var(--dur-pulsar) var(--curva-ui);
}
.pie__arriba-ico { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--color-tinta); color: #fff; display: grid; place-items: center; overflow: hidden; }
.pie__arriba-ico svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 450ms var(--curva-entrada); }
.pie__arriba-ico svg + svg { transform: translateY(160%); }
.pie__arriba:active { transform: scale(0.97); }
.pie__arriba:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pie__arriba:hover { border-color: var(--color-tinta); }
  .pie__arriba:hover .pie__arriba-ico svg { transform: translateY(-160%); }
  .pie__arriba:hover .pie__arriba-ico svg + svg { transform: none; }
}
.pie__arriba:focus-visible .pie__arriba-ico svg { transform: translateY(-160%); }
.pie__arriba:focus-visible .pie__arriba-ico svg + svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .pie__arriba-ico svg { transition: none; } }
.pie__legal { margin: 0; color: var(--color-ciruela); text-align: center; }
@media (min-width: 768px) {
  .pie__contactos { grid-template-columns: repeat(3, 1fr); }
  .pie__contactos li:first-child { grid-column: 1 / -1; }
  .pie__contactos li:nth-child(2) { grid-column: auto; }
  .pie__tarjeta { min-height: 180px; padding: 22px 24px 24px; }
}
@media (min-width: 1024px) {
  .pie__cab { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--esp-8); }
  .pie__contactos { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .pie__contactos li:first-child { grid-column: auto; }
  .pie__tarjeta { min-height: 230px; }
  .pie__meta { grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--esp-7); }
}

/* ---------- WhatsApp flotante (móvil) ---------- */
.whatsapp-flotante {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 999px; background: var(--verde-wa);   /* iteración 22: verde pastel (antes, el verde de WhatsApp #25d366) */
  display: grid; place-items: center; box-shadow: var(--sombra-flotante);
  opacity: 0; transform: scale(0.9); pointer-events: none;
  transition: opacity 300ms var(--curva-ui), transform 300ms var(--curva-ui);
}
.whatsapp-flotante img { width: 26px; height: 26px; filter: invert(1); }   /* icono blanco */
.whatsapp-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.whatsapp-flotante:active { transform: scale(0.95); }
@media (min-width: 1024px) { .whatsapp-flotante { display: none; } }

/* ---------- Etiqueta VER (cursor) ---------- */
.ver { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ver {
    display: block; position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
    height: 28px; padding: 0 12px; line-height: 28px; border-radius: 999px;
    background: var(--color-tinta); color: #fff; box-shadow: var(--sombra-flotante);
    font: 600 var(--tipo-ver)/28px var(--fuente); letter-spacing: 0.08em;
    opacity: 0; will-change: transform;
  }
  .ver span { display: block; transform: scale(0.9); opacity: 0; transition: transform 150ms var(--curva-ui), opacity 150ms var(--curva-ui); }
  .ver.on { opacity: 1; }
  .ver.on span { transform: none; opacity: 1; }
  .ver:not(.on) span { transition-duration: 100ms; }
}

/* ---------- Menú a pantalla completa (DESIGN 3.2, iteración 2): fondo blanco y la estructura de "Lo que hago" ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: #fff; overflow: hidden;
  opacity: 0; transition: opacity var(--dur-salida) var(--curva-ui);
}
.menu.abierto { opacity: 1; transition-duration: 150ms; }
.menu__cuerpo {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: calc(var(--alto-cabecera) + 8px) var(--margen) 0;
}
.menu__cuerpo > .servicios { flex: none; }
/* Entrada: filas que suben con un escalonado */
.menu .servicio { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--curva-entrada), transform 400ms var(--curva-entrada); transition-delay: calc(var(--i, 0) * 40ms + 80ms); }
.menu.abierto .servicio { opacity: 1; transform: none; }

.menu__pie { margin-top: auto; padding: var(--esp-6) 0 var(--esp-5); display: grid; gap: var(--esp-4); }
.menu__accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-4); }
.menu__acceso {
  display: flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--color-tinta);
  font-size: var(--tipo-subtitulo); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15;
}
.menu__acceso:hover { color: var(--color-ciruela); }
.menu__acceso[aria-current="true"] { color: var(--color-ciruela); }
.menu__redes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-5); font-size: var(--tipo-pequeno); }
.menu__redes a { min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 1024px) {
  .menu__cuerpo { padding-top: calc(var(--alto-cabecera) + 16px); }
  .menu__cuerpo > .servicios { flex: 1; align-content: center; }
  .menu__pie { grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--color-linea); padding: var(--esp-4) 0 var(--esp-5); }
  .menu__accesos { display: flex; gap: 0 var(--esp-6); }
  .menu__acceso { min-height: 44px; font: 500 0.8125rem/1.6 var(--fuente); letter-spacing: -0.2px; text-transform: uppercase; }
  .menu__redes { justify-content: flex-end; }
  .menu__acceso:focus-visible, .menu__redes a:focus-visible { outline-offset: 2px; }
}

/* ---------- Ventana "su día" ---------- */
.ventana {
  --lomo: var(--brocha-rosa);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #fff; color: var(--color-tinta); overflow: hidden;
}
.ventana::backdrop { background: rgba(10, 8, 12, 0.62); }   /* iteración 19: el fondo de detrás se oscurece (antes, blanco) */
.ventana[open] { display: block; }
.ventana__lomo { display: none; }   /* iteración 19: sin la línea de color de arriba */
.ventana__banda { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--margen); background: #fff; touch-action: none; }
.ventana__tirador { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--color-borde-campo); }
.ventana__cuerpo { position: absolute; inset: 52px 0 0 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 96px; }
.ventana__fotos { position: relative; }
.ventana__foto { aspect-ratio: 4 / 5; background: var(--color-carga); overflow: hidden; }
.ventana__foto img { width: 100%; height: 100%; object-fit: cover; }
.ventana__seg { display: flex; gap: 4px; padding: 0 var(--margen) 4px; }
/* Iteración 14: cada tramo de la línea de pasos es un botón (24 px de alto para el dedo; la línea visible sigue siendo de 2 px) */
.ventana__seg button { position: relative; flex: 1; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ventana__seg button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--color-linea); transition: background var(--dur-rapida); }
.ventana__seg button.act::before { background: var(--color-tinta); }
.ventana__seg button:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
/* Sin flechas: se toca la foto (tercio izquierdo, atrás; el resto, adelante) o se desliza */
.ventana__foto.varias { cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.ventana__foto.varias[data-lado="atras"] { cursor: w-resize; }
.ventana__foto.varias[data-lado="adelante"] { cursor: e-resize; }
.ventana__foto img { -webkit-user-drag: none; pointer-events: none; }
.ventana__flecha { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--color-tinta); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra-flotante); transition: transform var(--dur-pulsar); }
.ventana__flecha:active { transform: scale(0.92); }
.ventana__flecha[hidden] { display: none; }
.ventana__flecha svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ventana__flecha::after { content: ""; position: absolute; inset: -6px; }   /* zona de toque de 46 px aunque se vea más pequeña */
/* Cerrar con una X (iteración 21) */
.ventana__x { width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--color-tinta); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-rapida); }
.ventana__x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ventana__x:hover { background: var(--color-carga); }
.ventana__x:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
/* Móvil (iteración 21): etiqueta "1/3" sobre la foto, como en Instagram, y puntos pequeños debajo; en escritorio sigue la línea de pasos */
.ventana__cuenta, .ventana__puntos { display: none; }
.ventana__flecha--ant { left: 12px; }
.ventana__flecha--sig { right: 12px; }
.ventana__texto { padding: var(--esp-6) var(--margen) 0; display: grid; gap: var(--esp-4); align-content: start; }
.ventana__texto h2 { font-size: var(--tipo-display); line-height: 0.92; letter-spacing: -0.035em; font-weight: 600; outline: 0; }
.ventana__texto .subtitulo { margin-top: var(--esp-3); }
.ventana__texto .agradecimiento { font-style: italic; }
.ventana__botones { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: var(--esp-4); }   /* "Pide tu fecha" y "Ver más …", en fila (iteración 19) */
.ventana__botones .btn { border-radius: 999px; flex: 1 1 auto; min-width: 0; padding: 0 18px; }
.ventana__botones .btn[hidden] { display: none; }
.ventana__texto [hidden] { display: none; }
.ventana--resena #ventana-frase { font-size: var(--tipo-subtitulo); line-height: 1.4; text-wrap: pretty; }   /* iteración 16: la reseña real es el texto principal */
@media (max-width: 599px) { .ventana__botones .btn { padding: 0 12px; } }
.ventana__linea { display: block; }

@media (max-width: 1023px) {   /* iteración 19: hoja que sale desde abajo con el alto de su contenido (como mucho, el 94 % de la pantalla) y esquinas de arriba redondeadas */
  .ventana { inset: auto 0 0 0; top: auto; height: auto; max-height: 94dvh; flex-direction: column; border-radius: 24px 24px 0 0; box-shadow: var(--sombra-hoja); }
  .ventana[open] { display: flex; }
  .ventana__banda { position: relative; top: 0; flex: none; border-radius: 24px 24px 0 0; }
  .ventana__cuerpo { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; padding-bottom: 28px; }
  .ventana__fotos { overflow: hidden; }
  .ventana__fotos .ventana__seg { display: none; }
  .ventana__marco { position: relative; }
  .ventana__cuenta:not([hidden]) { display: block; position: absolute; z-index: 2; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(23, 20, 26, 0.62); color: #fff; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.04em; pointer-events: none; }
  .ventana__puntos:not([hidden]) { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; }
  .ventana__puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-linea); transition: background var(--dur-rapida), transform var(--dur-rapida); }
  .ventana__puntos i.act { background: var(--color-tinta); transform: scale(1.2); }
}
@media (min-width: 1024px) {
  /* Iteración 22: la ventana tapa toda la pantalla de blanco, así que el fondo oscuro de detrás no hace falta. Con él, al fundirse la ventana
     al cerrar, la página se oscurecía un instante y volvía de golpe (el parpadeo); al abrir pasaba lo mismo al revés. */
  .ventana::backdrop { background: transparent; }
  .ventana__tirador { display: none; }
  .ventana__banda { top: 6px; height: 64px; background: transparent; pointer-events: none; padding-right: var(--margen); }
  .ventana__banda > * { pointer-events: auto; }
  .ventana__cuerpo { inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); padding: 0 var(--margen); }
  .ventana__fotos { grid-column: 1 / 8; align-self: center; display: grid; justify-items: center; }
  .ventana__marco { position: relative; max-width: 100%; }
  /* Iteración 22: foto más grande (casi todo el alto, antes el 84 %) y redondeada como las del resto de la web */
  .ventana__foto { height: calc(100svh - 48px); width: auto; max-width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; }
  .ventana__foto img { width: 100%; height: 100%; }
  .ventana__fotos .ventana__seg { display: none; }   /* iteración 22: fuera la línea de pasos; "1/3" arriba y puntos sobre la foto, como en Instagram */
  .ventana__cuenta:not([hidden]) { display: block; position: absolute; z-index: 2; top: 16px; right: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(23, 20, 26, 0.62); color: #fff; font: 500 0.8125rem/1.4 var(--mono); letter-spacing: 0.04em; pointer-events: none; }
  .ventana__puntos:not([hidden]) { display: flex; position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; justify-content: center; gap: 7px; pointer-events: none; }
  .ventana__puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 4px rgba(23, 20, 26, 0.25); transition: background var(--dur-rapida), transform var(--dur-rapida); }
  .ventana__puntos i.act { background: #fff; transform: scale(1.2); }
  .ventana__flecha--ant { left: 16px; }
  .ventana__flecha--sig { right: 16px; }
  .ventana__texto { grid-column: 9 / 13; overflow-y: auto; padding: 96px 0 var(--esp-8); height: 100%; align-content: center; }
  /* Iteración 22: botones a su medida (antes se estiraban hasta llenar la columna) y algo más bajos */
  .ventana__botones .btn { flex: none; min-width: 0; height: 48px; padding: 0 24px; font-size: 0.9375rem; }
}

/* ---------- Transición de página: brochazo ---------- */
.brocha { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; visibility: hidden; }
.brocha.activa { visibility: visible; pointer-events: auto; }
.brocha__rot { position: absolute; inset: 0; }
.brocha__tira {
  position: absolute; left: 0; will-change: transform; transform: translateX(-200vw);
  -webkit-mask: var(--mascara-vertical) 0 0 / 100% 100% no-repeat; mask: var(--mascara-vertical) 0 0 / 100% 100% no-repeat;
}
.brocha__tira .banda__purpurina { opacity: 0.9; }
.brocha__plano { position: absolute; inset: 0; opacity: 0; }

/* ==========================================================================
   Iteración 4 (nueva ronda de contenido): lo que busco, testimonios, preguntas frecuentes, Instagram y dónde trabajo.
   Todo con el sistema que ya hay: títulos h2[data-lineas], data-rev, data-lado, brochazos con la máscara horizontal.
   Lo que se ve sin JavaScript es el estado final (los acordeones van abiertos en el HTML y el script los cierra).
   ========================================================================== */

/* ---------- Lo que busco con tu maquillaje (en "Sobre mí", tras "Cómo trabajo") ---------- */
.busco { padding: var(--esp-seccion) var(--margen) 0; }
.busco__titulo { max-width: 14ch; }
.busco__lista { display: grid; gap: var(--esp-5) var(--esp-7); margin-top: var(--esp-7); }
.busco__punto { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--esp-4); align-items: start; padding-top: var(--esp-4); border-top: 1px solid var(--color-linea); }
.busco__muestra { padding-top: 2px; }
.busco__punto .subtitulo { font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.busco__punto .cuerpo { margin-top: 6px; font-size: var(--tipo-pequeno); line-height: 1.45; color: var(--color-ciruela); }
@media (min-width: 768px) { .busco__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .busco { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: start; }
  .busco__titulo { grid-column: 1 / 6; position: sticky; top: 120px; }
  .busco__lista { grid-column: 7 / 13; margin-top: 0; row-gap: var(--esp-7); }
  .busco__punto .cuerpo { font-size: var(--tipo-cuerpo); }
}

/* ---------- Citas bajo las fotos de "Cada novia, su día" (relleno, DESIGN 3.9; antes sección "Lo que dicen") ----------
   Un brochazo fino de color y la cita bajo el nombre y el lugar de cada ficha. Sin foto de perfil, sin estrellas, sin logo de Google, sin nota media. */
.aviso-relleno {
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.02em; color: var(--color-ciruela);
  padding: 5px 12px; border: 1px dashed var(--color-ciruela); border-radius: 999px; text-align: center; width: fit-content;
}
.aviso-relleno--izq { text-align: left; }
.cita__trazo-caja { display: block; margin-bottom: var(--esp-3); }
.cita__trazo {
  display: block; width: clamp(72px, 9vw, 120px); height: 12px; background: var(--c);
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}
/* El brochazo se pinta de izquierda a derecha. Se observa la caja (un clip-path al 100 % deja al elemento sin área visible para el observador) */
@media (prefers-reduced-motion: no-preference) {
  .cita__trazo-caja[data-rev] { transition: none; }
  .cita__trazo-caja[data-rev][data-estado="oculto"] { opacity: 1; transform: none; }
  .cita__trazo { transition: clip-path 900ms var(--curva-pintar) calc(var(--i, 0) * 60ms); }
  .cita__trazo-caja[data-estado="oculto"] .cita__trazo { clip-path: inset(0 100% 0 0); }
}
.ficha__cita { margin: var(--esp-4) 0 0; }
.ficha__cita blockquote { margin: 0; }
.ficha__cita-texto { font-size: var(--tipo-pequeno); line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
@media (min-width: 768px) { .ficha__cita-texto { font-size: var(--tipo-cuerpo); } }

/* ---------- Preguntas frecuentes ----------
   Acordeón nativo (details/summary). Móvil: una columna. Escritorio: título, entradilla y botón a la izquierda (fijos) y las preguntas a la derecha.
   La apertura anima el alto del contenido (::details-content + interpolate-size) en 260 ms; sin soporte (o con "reducir movimiento") abre al instante. */
.faq { padding: var(--esp-seccion) var(--margen) 0; display: grid; gap: var(--esp-7); }
.faq__cab { display: grid; gap: var(--esp-5); align-content: start; justify-items: start; }
.faq__cab .entradilla { max-width: 22ch; }
.faq__lista { border-top: 1px solid var(--color-tinta); min-width: 0; }
.faq__item { border-bottom: 1px solid var(--color-linea); interpolate-size: allow-keywords; }
.faq__pregunta {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  min-height: 68px; padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-size: var(--tipo-subtitulo); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance;
  transition: color var(--dur-rapida);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .faq__pregunta:hover { color: var(--color-ciruela); } }
.faq__mas { width: 44px; height: 44px; flex: none; padding: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.faq__v { transform-box: fill-box; transform-origin: center; transition: transform 260ms var(--curva-ui); }
.faq__item[open] .faq__v { transform: scaleY(0); }
.faq__respuesta { padding: 0 var(--esp-8) var(--esp-5) 0; }
.faq__respuesta .cuerpo { max-width: 56ch; }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--curva-ui), content-visibility 260ms allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: start; }
  .faq__cab { grid-column: 1 / 6; position: sticky; top: 120px; }
  .faq__lista { grid-column: 7 / 13; }
  .faq__pregunta { min-height: 76px; }
}

/* ---------- ¿Aún no me sigues? (maqueta de un feed de Instagram, sin nada de terceros) ---------- */
.instagram { padding-top: var(--esp-seccion); overflow-x: clip; }   /* las fotos que aterrizan por la derecha no ensanchan la página */
.instagram__cab { padding-inline: var(--margen); }
.feed { --pad-feed: clamp(16px, 3vw, 40px); margin: var(--esp-7) var(--margen) 0; padding: var(--pad-feed); border: 1px solid var(--color-linea); border-radius: 28px; }
.feed__perfil { display: grid; grid-template-columns: auto 1fr; column-gap: var(--esp-4); row-gap: 0; align-items: center; }
.feed__avatar { grid-column: 1; grid-row: 1 / 3; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--color-carga); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brocha-rosa); margin: 5px; }
.feed__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.feed__datos { display: contents; }
.feed__nombre { grid-column: 2; align-self: end; font-size: var(--tipo-cuerpo); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.feed__usuario { grid-column: 2; align-self: start; margin-top: 4px; }
.feed__bio { grid-column: 1 / -1; font-size: var(--tipo-entradilla); line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; margin-top: var(--esp-4); }
.feed__seguir { grid-column: 1 / -1; width: 100%; margin-top: var(--esp-4); }
/* Las cinco "publicaciones": en móvil y tableta una fila que se desliza con el dedo (scroll-snap, sin botones) con la siguiente asomando; desde 900 px, rejilla de cinco */
.feed__fotos {
  display: flex; gap: var(--medianil); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: var(--esp-6) calc(var(--pad-feed) * -1) 0; padding: 8px var(--pad-feed); scroll-padding-inline: var(--pad-feed);
}
.feed__fotos::-webkit-scrollbar { display: none; }
.feed__fotos > li { flex: 0 0 62%; max-width: 280px; scroll-snap-align: start; min-width: 0; }
.post {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--color-carga);
  -webkit-tap-highlight-color: transparent; transition: transform var(--dur-pulsar) var(--curva-ui);
}
.post:active { transform: scale(0.98); }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms var(--curva-marco); }
.post:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 4px; }
/* Glifo de Instagram en la esquina: al pasar el ratón o con el foco; en táctil siempre visible, pequeño */
.post__ig {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.92); color: var(--color-tinta); opacity: 0; transform: scale(0.88);
  transition: opacity var(--dur-rapida) var(--curva-ui), transform var(--dur-rapida) var(--curva-ui);
}
.post__ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.post__ig .pt { fill: currentColor; stroke: none; }
.post:focus-visible .post__ig { opacity: 1; transform: none; }
@media (hover: none) { .post__ig { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .post:hover img { transform: scale(1.05); transition-duration: var(--dur-zoom); }
  .post:hover .post__ig { opacity: 1; transform: none; }
}
/* Entrada escalonada: la receta de las fotos que aterrizan, con un retardo por posición (--j) */
.post[data-aterriza="entra"] {
  transition: transform var(--dur-aterriza) var(--curva-entrada) calc(var(--j, 0) * 90ms), opacity 500ms var(--curva-pintar) calc(var(--j, 0) * 90ms);
}
/* Iteración 22: en móvil y tableta, rejilla de 3 × 2 con fotos pequeñas, como el perfil de Instagram (antes, una fila que se deslizaba con fotos grandes) */
@media (max-width: 899px) {
  .feed__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; margin: var(--esp-5) 0 0; padding: 0; scroll-snap-type: none; }
  .feed__fotos > li { max-width: none; }
  .feed__fotos .post { border-radius: 8px; }
  .feed__fotos .post__ig { display: none; }   /* en una rejilla tan pequeña, el glifo tapaba media foto */
}
@media (min-width: 900px) {
  .feed__solo-movil { display: none; }
  .feed { padding-bottom: var(--pad-feed); }
  .feed__perfil { grid-template-columns: auto 1fr auto; column-gap: var(--esp-5); }
  .feed__avatar { width: 88px; height: 88px; grid-row: 1; }
  .feed__datos { display: block; grid-column: 2; }
  .feed__nombre, .feed__usuario, .feed__bio { grid-column: auto; align-self: auto; }
  .feed__usuario { margin-top: 2px; }
  .feed__bio { margin-top: var(--esp-3); max-width: 42ch; font-size: var(--tipo-cuerpo); line-height: 1.45; letter-spacing: 0; }
  .feed__seguir { grid-column: 3; grid-row: 1; width: auto; margin-top: 0; }
  .feed__fotos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: var(--esp-6) 0 0; padding: 0; scroll-snap-type: none; }
  .feed__fotos > li { max-width: none; }
}

/* ---------- Dónde trabajo (franja justo encima del cierre) ---------- */
.zona { display: grid; gap: var(--esp-5); margin: clamp(72px, 9vw, 144px) var(--margen) 0; padding: var(--esp-7) 0; border-top: 1px solid var(--color-linea); border-bottom: 1px solid var(--color-linea); }
.zona__texto { display: grid; gap: var(--esp-3); align-content: start; }
.zona__texto .titulo { font-size: var(--tipo-subtitulo); letter-spacing: -0.015em; font-weight: 600; line-height: 1.15; }
.zona__texto .entradilla { max-width: 26ch; }
.zona__lista { display: flex; flex-wrap: wrap; align-content: center; font: 400 var(--tipo-nota)/2.1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.zona__lista li { white-space: nowrap; }
.zona__lista li:not(:last-child)::after { content: "\00b7" / ""; margin-inline: 0.7em; color: var(--color-ciruela); }
@media (min-width: 1024px) {
  .zona { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: center; padding-block: var(--esp-8); }
  .zona__texto { grid-column: 1 / 6; }
  .zona__lista { grid-column: 7 / 13; font-size: 0.9375rem; }
}

/* ---------- Reducir movimiento (DESIGN sección 6) ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Iteración 4: acordeón sin animación, brochazos de las citas con un fundido, fotos de "Instagram" sin desplazamientos */
  .faq__item::details-content { transition: none; }
  .faq__v { transition: none; }
  .faq__pregunta { transition: none; }
  .post, .post:active { transform: none; transition: none; }
  .post img, .post:hover img { transform: none !important; transition: none; }
  .post__ig { transition: opacity 150ms linear; transform: none; }
  .post[data-aterriza="entra"] { transition: opacity 200ms linear; }
  html { scroll-behavior: auto; }
  .cabecera { transition: none; }
  .nav-enlace__caja > span { transition: none; }
  .nav-enlace:hover .nav-enlace__caja > span, .nav-enlace:focus-visible .nav-enlace__caja > span { transform: none; }
  .nav-enlace:hover .nav-enlace__caja > span + span, .nav-enlace:focus-visible .nav-enlace__caja > span + span { transform: translateY(110%); }
  .nav-enlace:hover { color: var(--color-ciruela); }
  .btn::before { transition: clip-path 150ms linear; }
  .ficha:active, .btn:active, .servicio__enlace:active, .whatsapp-flotante:active { transform: none; }
  .ficha__marco img, .ficha:hover .ficha__marco img { transform: none !important; transition: none; }
  .ficha:hover .ficha__nota { color: var(--color-tinta); }
  [data-rev] { transition: opacity 200ms linear; transition-delay: 0s; }
  [data-rev][data-estado="oculto"] { transform: none; }
  .ficha-item[data-foto-entra] .ficha { transition: opacity 200ms linear; transition-delay: 0s; }
  .ficha-item[data-foto-entra="oculto"] .ficha { transform: none; }
  .ficha-item[data-foto-entra="oculto"] .ficha__marco img { transform: none; }
  .banda, .banda.pintada { clip-path: inset(0 0 0 0); transition: none; }
  .banda.pintada .banda__purpurina { animation: none; }
  .tarjeta, .tarjeta:hover, .tarjeta:active { transform: none; transition: box-shadow 150ms linear; }
  .tarjeta:hover .tarjeta__medio > *, .tarjeta__medio > * { transform: none; transition: none; }
  .tarjeta:hover .tarjeta__etiqueta svg { transform: none; }
  .tarjeta__medio video { transition: none; }
  .tarjeta-escala { transform: none !important; }
  .menu, .menu.abierto { transition: opacity 150ms linear; }
  .menu .servicio, .menu.abierto .servicio { opacity: 1; transform: none; transition: none; }
  .servicios__panel img.entra { transition: opacity 150ms linear; }
  .servicio__enlace:hover .servicio__nombre, .servicio__enlace:hover svg { transform: none; }
  .whatsapp-flotante { transform: none; transition: opacity 200ms linear; }
  .ver span { transform: none; transition: opacity 100ms linear; }
  /* Fase de movimiento (iteración 2): sin desplazamientos ni escalas, solo un fundido de 200 ms; "Cómo trabajo" no se fija */
  [data-aterriza="fuera"], [data-aterriza="fuera"] img { transform: none; }
  [data-aterriza="entra"], [data-aterriza="entra"] img { transition: opacity 200ms linear; }
  .carrusel[data-estado="oculto"] .tarjeta-item { transform: none; }
  .carrusel[data-estado="entra"] .tarjeta-item { transition: opacity 200ms linear; }
}

/* Sin JavaScript, las historias se ven como bloques al final de la galería; con JavaScript viven en la ventana */
html.js .historias { display: none; }
.historia { border-top: 1px solid var(--color-linea); padding: var(--esp-5) 0; display: grid; gap: var(--esp-3); max-width: 62ch; }
.historia figure { margin: 0; max-width: 320px; }
.historia h3 { font-size: var(--tipo-subtitulo); }

/* Lenis (mínimo necesario) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ==========================================================================
   Iteraciones 8 y 9: página de SESIONES DE FOTOS ("fondos de estudio"), FIESTAS (rehecha en la 9) y EVENTOS (iteración 9)
   Dos estructuras propias, distintas entre sí y de Novias. El script (sección 9d de js/app.js) añade data-modo="fijado" a #desfile y #estudio
   cuando hay movimiento y pantalla alta; sin eso (reducir movimiento, sin JavaScript, pantalla baja) se ven como diseños estáticos:
   la tira del desfile se desliza con el dedo y los papeles de estudio son bloques apilados.
   ========================================================================== */

/* ---------- FIESTAS (iteraciones 10 a 13): imagen gigante, introducción, últimos trabajos en mosaico con visor, "¿Tienes cargo este año?" y más confeti ----------
   Sin guirnalda de banderines, sin "Tres días" y sin "En tu casa" (Adrián, 2026-10-18). Misma gramática que el resto: fondo blanco, rótulo con brochazo,
   fotos redondeadas, tinta y ciruela, nota en mono. Estructura inspirada en saraaguilar.makeup/moros-y-cristianos. */
.vista--fiestas { position: relative; overflow-x: clip; }
.fi-hero { position: relative; padding-bottom: 0; }
.fi-h1 { margin: 0; font-weight: 400; position: relative; z-index: 1; }
.fi-rot, .ev-rot { position: relative; display: block; width: fit-content; z-index: 0; }
.fi-rot .rotulo, .ev-rot .rotulo { position: relative; z-index: 1; }
.fi-banda, .ev-banda {                                  /* brochazo de color detrás del rótulo; se pinta de izquierda a derecha al entrar */
  position: absolute; z-index: 0; display: block; left: -3%; right: -3%; top: -4%; bottom: -12%; pointer-events: none;
  background: var(--brocha-lila);
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
  opacity: 1 !important; transform: none !important;
  transition: clip-path 1000ms var(--curva-pintar) 150ms !important;
}
/* Iteración 22: el brochazo de Eventos salía cortado en recto por la derecha (la máscara 1 acaba así): ahora usa la máscara 2, con los dos
   extremos deshilachados, y sobresale un poco más por los lados para que se vean */
.ev-banda {
  background: var(--brocha-melocoton); left: -6%; right: -7%;
  -webkit-mask: var(--mascara-horizontal-2) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal-2) var(--banda-pos) / var(--banda-tam) no-repeat;
}
.fi-banda[data-estado="oculto"], .ev-banda[data-estado="oculto"] { clip-path: inset(0 100% 0 0); }
.fi-banda, .ev-banda { clip-path: inset(0 0 0 0); }
.fi-hero .pagina-cab__intro { position: relative; z-index: 1; }
.fi-cargos { margin: 0 0 var(--esp-5); text-transform: uppercase; letter-spacing: 0.06em; }

/* Imagen gigante de la portada (iteración 12): a todo el ancho del contenido y cortada por el borde de abajo en escritorio, como la portada del inicio */
.fi-portada { position: relative; z-index: 1; margin: var(--esp-7) 0 0; overflow: hidden; border-radius: clamp(16px, 2vw, 28px); aspect-ratio: 4 / 5; background: var(--color-carga); }
.fi-portada picture, .fi-portada img { display: block; width: 100%; height: 100%; }
.fi-portada img { object-fit: cover; }
@media (min-width: 768px) { .fi-portada { aspect-ratio: 2 / 1; margin-top: var(--esp-8); } }

/* Brochazo bajo una palabra (ideas de "¿Tienes cargo?") */
.fi-resalte { position: relative; display: inline-block; z-index: 0; }
.fi-resalte::before {
  content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 46%; bottom: -8%; background: var(--c); opacity: 0.9;
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}

/* Una fiesta, muchos pueblos: introducción a la fiesta (iteración 13: sin el bloque de párrafos de servicios) */
.fi-texto { padding: var(--esp-seccion) var(--margen) 0; }
.fi-texto__cab { display: grid; gap: var(--esp-4); align-content: start; max-width: 44rem; }
.fi-texto__cab > * { margin: 0; }
.fi-texto__cab .nota { text-transform: uppercase; letter-spacing: 0.06em; }

/* Últimos trabajos (iteraciones 12 y 13): mosaico con piezas de tamaños distintos para fotos y vídeos verticales. Cada pieza es un botón que abre el visor. */
.fi-trabajos { padding: var(--esp-seccion) var(--margen) 0; }
.fi-trabajos__cab { display: grid; gap: var(--esp-4); max-width: 34rem; margin-bottom: var(--esp-7); }
.fi-trabajos__cab .titulo, .fi-trabajos__cab .entradilla { margin: 0; }
.fi-mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 34vw, 200px); gap: var(--medianil); grid-auto-flow: dense; }
.fi-mosaico li { margin: 0; overflow: hidden; border-radius: 18px; background: var(--color-carga); min-width: 0; }
.fi-mosaico img, .fi-mosaico video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-mosaico img { transition: transform 700ms var(--curva-marco); }
.fi-ver { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: pointer; overflow: hidden; }
.fi-ver:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: -3px; }
@media (hover: hover) { .fi-mosaico li:hover img { transform: scale(1.06); } }
.fi-mosaico--obra .o-a { grid-column: 1 / 3; grid-row: 1 / 4; } .fi-mosaico--obra .o-b { grid-column: 1 / 2; grid-row: 4 / 6; } .fi-mosaico--obra .o-c { grid-column: 2 / 3; grid-row: 4 / 5; }
.fi-mosaico--obra .o-d { grid-column: 2 / 3; grid-row: 5 / 7; } .fi-mosaico--obra .o-e { grid-column: 1 / 2; grid-row: 6 / 8; } .fi-mosaico--obra .o-f { grid-column: 2 / 3; grid-row: 7 / 8; }
.fi-mosaico--obra .o-g { grid-column: 1 / 3; grid-row: 8 / 10; } .fi-mosaico--obra .o-h { grid-column: 1 / 2; grid-row: 10 / 12; } .fi-mosaico--obra .o-i { grid-column: 2 / 3; grid-row: 10 / 12; }
.fi-mosaico--obra .o-c img { object-position: 50% 30%; } .fi-mosaico--obra .o-f img { object-position: 50% 40%; } .fi-mosaico--obra .o-h img { object-position: 60% 22%; } .fi-mosaico--obra .o-g video { object-position: 50% 12%; }
@media (min-width: 900px) {
  .fi-mosaico { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(90px, 11vw, 190px); }
  .fi-mosaico--obra .o-a { grid-column: 1 / 6; grid-row: 1 / 5; } .fi-mosaico--obra .o-b { grid-column: 6 / 9; grid-row: 1 / 4; } .fi-mosaico--obra .o-c { grid-column: 9 / 13; grid-row: 1 / 3; }
  .fi-mosaico--obra .o-d { grid-column: 9 / 13; grid-row: 3 / 6; } .fi-mosaico--obra .o-e { grid-column: 6 / 9; grid-row: 4 / 7; } .fi-mosaico--obra .o-f { grid-column: 1 / 6; grid-row: 5 / 7; }
  .fi-mosaico--obra .o-g { grid-column: 1 / 4; grid-row: 7 / 9; } .fi-mosaico--obra .o-h { grid-column: 4 / 9; grid-row: 7 / 9; } .fi-mosaico--obra .o-i { grid-column: 9 / 13; grid-row: 6 / 9; }
}

/* Visor a pantalla completa de "Últimos trabajos" (iteración 13): fondo blanco como el resto de la web, la pieza entera y con las esquinas redondeadas,
   "Cerrar" arriba a la derecha, el número de pieza a la izquierda y las mismas flechas que la ventana "su día". El tamaño de la pieza lo calcula el script. */
.visor-fi { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-fondo); color: var(--color-tinta); overflow: hidden; }
.visor-fi[open] { display: block; }
.visor-fi::backdrop { background: var(--color-fondo); }
.visor-fi__barra { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--alto-cabecera); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--margen); }
.visor-fi__cuenta { margin: 0; }
.visor-fi__medio { position: absolute; inset: var(--alto-cabecera) var(--margen) var(--margen); touch-action: pan-y; }
.visor-fi__medio > img, .visor-fi__medio > video { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; border-radius: 18px; background: var(--color-carga); object-fit: cover; }
.visor-fi__flecha { z-index: 2; }
.visor-fi__flecha--ant { left: var(--margen); }
.visor-fi__flecha--sig { right: var(--margen); }
@media (max-width: 767px) { .visor-fi__flecha { top: auto; bottom: calc(var(--margen) + 8px); translate: none; } }

/* ¿Tienes cargo este año? Cuatro ideas y tres pasos */
.fi-cargo { padding: var(--esp-seccion) var(--margen) 0; }
.fi-cargo__cab { display: grid; gap: var(--esp-4); max-width: 40rem; margin-bottom: var(--esp-7); }
.fi-cargo__cab .titulo, .fi-cargo__cab .entradilla { margin: 0; }
.fi-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); }
.fi-ideas li { display: grid; gap: 4px; padding-top: var(--esp-4); border-top: 1px solid var(--color-linea); align-content: start; }
.fi-ideas .subtitulo { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; }
.fi-ideas .cuerpo { margin: 0; color: var(--color-ciruela); max-width: 30ch; }
.fi-pasos { list-style: none; margin: var(--esp-9) 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.fi-pasos li { display: grid; grid-template-columns: 3.5em 1fr; align-items: baseline; gap: var(--esp-3); padding: var(--esp-4) 0; border-top: 1px solid var(--color-linea); }
.fi-pasos li:last-child { border-bottom: 1px solid var(--color-linea); }
.fi-pasos .subtitulo { margin: 0; }
@media (min-width: 768px) { .fi-ideas { grid-template-columns: repeat(2, 1fr); column-gap: var(--medianil); } }
@media (min-width: 1100px) { .fi-ideas { grid-template-columns: repeat(4, 1fr); } }

.fi-cta { padding: var(--esp-seccion) var(--margen) var(--esp-9); display: grid; gap: var(--esp-4); justify-items: start; }
.fi-cta .titulo { margin: 0; font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.fi-cta .entradilla { margin: 0; max-width: 34ch; }
.fi-cta__botones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }
.fi-creditos { margin: var(--esp-7) 0 0; max-width: 60ch; color: var(--color-ciruela); }

/* Confeti (iteración 10: más piezas, algo más grandes y más visibles que en la 9; el script las crea, solo en esta vista) */
.confeti { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; display: none; }
.vista--fiestas:not([hidden]) .confeti { display: block; }
.confeti i {
  position: absolute; top: -24px; left: var(--x); width: var(--s); height: calc(var(--s) * var(--r)); background: var(--c); opacity: 0; border-radius: 1.5px;
  animation: confeti-cae var(--d) linear var(--t) infinite;
}
.confeti i.redondo { border-radius: 50%; }
@keyframes confeti-cae {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  6% { opacity: var(--o); }
  50% { transform: translate3d(var(--b), 55vh, 0) rotate(calc(var(--g) * 0.5)); }
  94% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(calc(var(--b) * -0.6), 112vh, 0) rotate(var(--g)); }
}
@media (prefers-reduced-motion: reduce) { .confeti { display: none !important; } }

/* ---------- EVENTOS (iteración 9): cinta de palabras y selector "¿A qué vas?" ---------- */
.ev-hero { padding-bottom: 0; }
.ev-hero h1 { margin: 0; font-weight: 400; }
.ev-collage { position: relative; margin: var(--esp-7) 0 0; height: clamp(300px, 80vw, 420px); }
.ev-collage figure { position: absolute; margin: 0; width: 46%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-tarjeta); background: var(--color-carga);
  rotate: var(--rot); transition: translate 700ms var(--curva-entrada), rotate 700ms var(--curva-entrada), scale 700ms var(--curva-entrada), box-shadow 500ms var(--curva-ui); }
.ev-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-collage figure:nth-child(1) { --rot: -5deg; --i: 0; left: 2%; top: 8%; z-index: 1; }
.ev-collage figure:nth-child(2) { --rot: 3deg; --i: 1; left: 28%; top: 0; z-index: 2; }
.ev-collage figure:nth-child(3) { --rot: 8deg; --i: 2; right: 2%; top: 14%; z-index: 1; }
/* Iteración 22: las tres fotos entran repartidas como cartas (desde abajo, juntas y rectas, se abren a su giro una tras otra) cada vez que se
   abre Eventos; al pasar el ratón por el grupo se abren en abanico, y la que está debajo del ratón sube y se pone delante. */
@media (prefers-reduced-motion: no-preference) {
  .vista--eventos:not([hidden]) .ev-collage figure { animation: ev-carta 1100ms var(--curva-entrada) calc(380ms + var(--i) * 120ms) both; }
}
@keyframes ev-carta { from { opacity: 0; translate: 0 70px; rotate: 0deg; scale: 0.86; } 35% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: var(--rot); scale: 1; } }
@media (hover: hover) and (pointer: fine) {
  .ev-collage:hover figure:nth-child(1) { translate: -16% 3%; rotate: -11deg; }
  .ev-collage:hover figure:nth-child(2) { translate: 0 -5%; rotate: 0deg; }
  .ev-collage:hover figure:nth-child(3) { translate: 16% 2%; rotate: 13deg; }
  .ev-collage figure:hover { z-index: 3; scale: 1.06; box-shadow: var(--sombra-tarjeta-hover); }
}
@media (min-width: 900px) {
  .ev-hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: center; }
  .ev-hero h1, .ev-hero .pagina-cab__intro { grid-column: 1 / 8; }
  .ev-collage { grid-column: 8 / 13; grid-row: 1 / 3; margin: 0; height: clamp(360px, 36vw, 520px); }
}
.ev-cinta { margin-top: var(--esp-8); overflow: hidden; border-block: 1px solid var(--color-linea); padding: clamp(10px, 2vw, 22px) 0; }
.ev-cinta__pista { display: flex; width: max-content; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-size: clamp(2.5rem, 8vw, 6rem); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--color-tinta); }
.ev-cinta__pista span { flex: none; }
@media (prefers-reduced-motion: no-preference) { .ev-cinta__pista { animation: ev-corre 38s linear infinite; } }
@keyframes ev-corre { to { transform: translateX(-50%); } }

.ev-picker { padding: var(--esp-seccion) var(--margen) 0; }
.ev-picker__cab { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-7); }
.ev-picker__cab .titulo, .ev-picker__cab .entradilla { margin: 0; }
.ev-picker__cuerpo { display: grid; gap: var(--esp-6); }
/* "¿A qué vas?" como una PALETA DE SOMBRAS (iteración 22; antes, pastillas con borde). La caja es el estuche y cada evento es una pastilla
   de color prensado con su brillo de purpurina. La elegida lleva la marca de haber mojado la brocha (un óvalo más claro que se hunde), un
   filo de tinta, y el brochazo bajo la palabra grande del panel se pinta con su color. Móvil: 3 × 2; escritorio: 2 × 3 en la columna fija. */
.ev-tabs {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 14px 16px;
  background: linear-gradient(180deg, #fdfcfb 0%, #f3f0f4 100%); border: 1px solid color-mix(in srgb, var(--color-tinta) 12%, #fff); border-radius: 28px;
  box-shadow: inset 0 1px 0 #fff, 0 24px 48px -28px rgba(23, 20, 26, 0.35);
}
.ev-tabs::before {   /* rótulo del estuche */
  content: "Elige tu tono"; grid-column: 1 / -1; padding: 0 4px 2px; text-align: center;
  font: 500 var(--tipo-nota)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ciruela);
}
.ev-tab {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 1px; aspect-ratio: 1 / 0.96; min-width: 0;
  padding: 9px 9px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; color: var(--color-tinta); font: inherit;
  background: radial-gradient(130% 95% at 26% 14%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 52%), var(--c);
  box-shadow: inset 0 3px 9px rgba(23, 20, 26, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--color-tinta) 10%, #fff);
  transition: transform 300ms var(--curva-ui), box-shadow 300ms var(--curva-ui);
  -webkit-tap-highlight-color: transparent;
}
.ev-tab::after {   /* brillo prensado (purpurina) que se mueve al pasar el ratón */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("../assets/brochazos/purpurina-384.webp") 0 0 / 220px repeat; opacity: 0.32; mix-blend-mode: soft-light;
  transition: background-position 1200ms var(--curva-ui), opacity 300ms;
}
.ev-tab::before {   /* la marca de la brocha: un óvalo más claro, hundido, que aparece en la elegida */
  content: ""; position: absolute; z-index: -1; left: 22%; right: 14%; top: 12%; height: 46%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18) 70%, rgba(255, 255, 255, 0));
  box-shadow: inset 0 3px 6px rgba(23, 20, 26, 0.12);
  opacity: 0; transform: rotate(-14deg) scale(0.4); transition: opacity 260ms var(--curva-ui), transform 520ms var(--curva-entrada);
}
.ev-tab span { font-size: 0.8125rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
.ev-tab small { display: none; font-size: 0.75rem; line-height: 1.25; color: color-mix(in srgb, var(--color-tinta) 72%, transparent); }
.ev-tab[aria-selected="true"] {
  box-shadow: inset 0 3px 9px rgba(23, 20, 26, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.45), 0 0 0 3px #fff, 0 0 0 5px var(--color-tinta);
}
.ev-tab[aria-selected="true"]::before { opacity: 1; transform: rotate(-14deg) scale(1); }
.ev-tab:active { transform: scale(0.95); }
.ev-tab:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 7px; }
@media (hover: hover) and (pointer: fine) {
  .ev-tab:hover { transform: translateY(-3px); }
  .ev-tab:hover::after { background-position: 90px 40px; opacity: 0.5; }
}
/* el brochazo bajo la palabra grande se pinta al elegir */
@media (prefers-reduced-motion: no-preference) {
  .ev-panel:not([hidden]) .ev-resalte::before { animation: ev-pinta 620ms var(--curva-pintar) 120ms both; }
}
@keyframes ev-pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 900px) {
  .ev-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px 16px 18px; }
  .ev-tab { aspect-ratio: 1 / 0.82; padding: 12px 14px; }
  .ev-tab span { font-size: 1.0625rem; }
  .ev-tab small { display: block; }
}
.ev-paneles { position: relative; }
.ev-panel { display: grid; gap: var(--esp-6); align-items: center; }
.ev-panel[hidden] { display: none; }
.ev-foto { position: relative; margin: 0; width: min(78vw, 380px); aspect-ratio: 4 / 5; justify-self: start; isolation: isolate; }
.ev-foto::before { content: ""; position: absolute; z-index: -1; inset: 6% -8% -6% 8%; background: var(--c); border-radius: 24px; }
.ev-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 24px; background: var(--color-carga); }
.ev-info { display: grid; gap: var(--esp-4); justify-items: start; max-width: 34rem; }
.ev-palabra { margin: 0; font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; font-size: clamp(3.2rem, 11vw, 8rem); }
.ev-resalte { position: relative; display: inline-block; z-index: 0; }
.ev-resalte::before {
  content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; top: 44%; bottom: -8%; background: var(--c); opacity: 0.9;
  -webkit-mask: var(--mascara-horizontal-2) var(--banda-pos) / var(--banda-tam) no-repeat; mask: var(--mascara-horizontal-2) var(--banda-pos) / var(--banda-tam) no-repeat;
}
.ev-info .entradilla, .ev-tip { margin: 0; }
.ev-tip { color: var(--color-ciruela); }
.ev-tip b { color: var(--color-tinta); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .ev-panel:not([hidden]) .ev-foto { animation: ev-foto-in 700ms var(--curva-entrada) both; }
  .ev-panel:not([hidden]) .ev-info > * { animation: ev-texto-in 600ms var(--curva-entrada) both; }
  .ev-panel:not([hidden]) .ev-info > :nth-child(2) { animation-delay: 70ms; } .ev-panel:not([hidden]) .ev-info > :nth-child(3) { animation-delay: 130ms; } .ev-panel:not([hidden]) .ev-info > :nth-child(4) { animation-delay: 190ms; }
}
@keyframes ev-foto-in { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes ev-texto-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .ev-picker__cuerpo { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: start; }
  .ev-tabs { grid-column: 1 / 5; position: sticky; top: calc(var(--alto-cabecera) + 24px); }
  .ev-paneles { grid-column: 6 / 13; }
  .ev-panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .ev-foto { width: 100%; max-width: 380px; }
}
.ev-incluye { padding: var(--esp-seccion) var(--margen) var(--esp-9); }
/* Iteración 22: en móvil, Eventos va centrado (portada, "¿A qué vas?", el panel y "Qué te llevas") */
@media (max-width: 899px) {
  .ev-hero { text-align: center; }
  .ev-hero .ev-rot { margin-inline: auto; }
  .ev-banda { left: -4%; right: -5%; }
  .ev-hero .pagina-cab__intro { margin-inline: auto; max-width: 32ch; }
  .ev-picker__cab { text-align: center; justify-items: center; }
  .ev-panel { justify-items: center; text-align: center; }
  .ev-foto { justify-self: center; }
  .ev-info { justify-items: center; margin-inline: auto; }
  .ev-incluye { text-align: center; }
  .ev-incluye__lista li { justify-items: center; }
  .ev-incluye__lista .cuerpo { margin-inline: auto; }
  .ev-incluye__cta { display: flex; justify-content: center; }
}
.ev-incluye .titulo { margin: 0 0 var(--esp-7); }
.ev-incluye__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-6); }
.ev-incluye__lista li { display: grid; gap: 6px; padding-top: var(--esp-4); border-top: 1px solid var(--color-linea); align-content: start; }
.ev-incluye__lista .muestra { margin-bottom: var(--esp-2); }
.ev-incluye__lista .subtitulo, .ev-incluye__lista .cuerpo { margin: 0; }
.ev-incluye__lista .cuerpo { color: var(--color-ciruela); max-width: 30ch; }
.ev-incluye__cta { margin-top: var(--esp-7); }
@media (min-width: 900px) { .ev-incluye__lista { grid-template-columns: repeat(3, 1fr); column-gap: var(--medianil); } }

/* ---------- SESIONES DE FOTOS (iteraciones 8 y 13): visor grande con disparo de móvil, fondos de papel que suben y se acumulan, cierre ---------- */
.vista--sesiones { --se-tinta: var(--color-tinta); }
.se-hero { position: relative; padding: calc(var(--alto-cabecera) + var(--esp-7)) var(--margen) var(--esp-8); display: grid; gap: var(--esp-7); }
.se-hero__texto { container-type: inline-size; display: grid; align-content: center; gap: var(--esp-5); min-width: 0; }
.se-h1 { margin: 0; font-weight: 400; }
.se-rot { display: block; margin: 0.06em 0 0.04em -0.04em; font-weight: 600; letter-spacing: -0.045em; line-height: 0.86; font-size: min(22svh, 24cqw); }
.se-rot__linea { display: block; }
.se-intro { max-width: 36ch; margin: 0; }

/* El visor (iteración 13: más grande; el vídeo es assets/video/estudio.mp4) */
.se-visor { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 80svh; justify-self: center; font-family: var(--mono); font-size: clamp(0.75rem, 0.6rem + 0.35vw, 0.9375rem); letter-spacing: 0.06em; color: #fff; }
@supports (height: 1svh) { .se-visor { width: min(100%, calc(80svh * 4 / 5)); } }
@media (max-width: 1023px) {   /* móvil y tableta: visor a todo el ancho; las marcas de las esquinas, más pegadas para que no se salgan de la pantalla */
  .se-esq--a { left: -9px; top: -9px; } .se-esq--b { right: -9px; top: -9px; } .se-esq--c { left: -9px; bottom: -9px; } .se-esq--d { right: -9px; bottom: -9px; }
  .se-esq { width: 24px; height: 24px; }
}
.se-visor__marco { position: absolute; inset: 0; overflow: hidden; background: var(--color-carga); }
.se-visor__marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-visor__marco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.32)); }   /* para que se lean los datos y el botón */
.se-obturador { position: absolute; z-index: 1; inset: 0; background: #fff; opacity: 0; pointer-events: none; }   /* el destello de disparo, dentro del vídeo (el vídeo no se para) */
.se-visor__deco { position: absolute; inset: 0; pointer-events: none; }
.se-esq { position: absolute; width: 30px; height: 30px; border: 0 solid var(--color-tinta); }
.se-esq--a { left: -14px; top: -14px; border-width: 3px 0 0 3px; }
.se-esq--b { right: -14px; top: -14px; border-width: 3px 3px 0 0; }
.se-esq--c { left: -14px; bottom: -14px; border-width: 0 0 3px 3px; }
.se-esq--d { right: -14px; bottom: -14px; border-width: 0 3px 3px 0; }
.se-af { position: absolute; left: 50%; top: 40%; width: 18%; aspect-ratio: 1; translate: -50% -50%; border: 1.5px solid var(--brocha-amarillo); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.se-dato { position: absolute; display: inline-flex; align-items: center; gap: 6px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); text-transform: uppercase; }
.se-dato--rec { left: 16px; top: 14px; }
.se-dato--rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; }
.se-dato--v { left: 50%; top: 14px; translate: -50% 0; }
.se-dato--iso { right: 16px; top: 14px; }
.se-dato--f { left: 16px; bottom: calc(var(--disparo) / 2 + 22px); translate: 0 50%; }
.se-dato--bat { right: 16px; bottom: calc(var(--disparo) / 2 + 22px); translate: 0 50%; gap: 3px; }
.se-dato--bat i { width: 8px; height: 12px; background: #fff; }
/* Botón de disparo como el de la cámara de un móvil: aro blanco y círculo blanco, abajo en el centro del vídeo */
.se-visor { --disparo: 64px; }
.se-disparar { position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; width: var(--disparo); height: var(--disparo); padding: 0; border: 4px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.12); cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.se-disparar i { position: absolute; inset: 5px; border-radius: 50%; background: #fff; transition: transform var(--dur-pulsar) var(--curva-ui); }
@media (hover: hover) { .se-disparar:hover i { transform: scale(0.93); } }
.se-disparar:active i { transform: scale(0.8); }
.se-disparar:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: 4px; }
@media (min-width: 1024px) {
  .se-visor { --disparo: 76px; }
  .se-hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); align-items: center; min-height: 100svh; padding-top: calc(var(--alto-cabecera) + var(--esp-8)); }
  .se-hero__texto { grid-column: 1 / 7; }
  .se-visor { grid-column: 7 / 13; justify-self: end; }
}

/* Fondos de papel. Estático (sin movimiento): bloques apilados, cada uno con su color */
.se-estudio { position: relative; }
.se-escena { position: relative; }
.se-papel { position: relative; background: var(--c); color: var(--color-tinta); }
.se-papel__in { position: relative; display: grid; gap: var(--esp-6); padding: var(--esp-9) var(--margen); align-items: center; }
.se-num { position: absolute; z-index: 0; margin: 0; left: var(--margen); bottom: 56px; font-weight: 600; letter-spacing: -0.06em; line-height: 0.8; font-size: min(46svh, 52vw); color: transparent; -webkit-text-stroke: 1.5px rgba(23, 20, 26, 0.22); pointer-events: none; user-select: none; }
.se-texto { position: relative; z-index: 1; display: grid; gap: var(--esp-3); max-width: 30rem; }
.se-texto .nota, .se-texto .entradilla, .se-look { margin: 0; }
.se-texto .nota { text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-tinta); }
.se-look { font-weight: 600; letter-spacing: -0.045em; line-height: 0.9; font-size: clamp(3rem, 10vw, 7.5rem); }
.se-foto { position: relative; z-index: 1; margin: 0; width: min(78vw, 360px); aspect-ratio: 4 / 5; justify-self: center; }
.se-foto img, .se-foto video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-carga); }
.se-foto--video { aspect-ratio: 9 / 16; width: min(70vw, 340px); }   /* iteración 13b: el vídeo del estudio, vertical 9:16 y entero */
.se-foto::after {                                     /* marcas de encuadre en las cuatro esquinas */
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(var(--color-tinta), var(--color-tinta)) 0 0 / 28px 3px no-repeat, linear-gradient(var(--color-tinta), var(--color-tinta)) 0 0 / 3px 28px no-repeat,
    linear-gradient(var(--color-tinta), var(--color-tinta)) 100% 0 / 28px 3px no-repeat, linear-gradient(var(--color-tinta), var(--color-tinta)) 100% 0 / 3px 28px no-repeat,
    linear-gradient(var(--color-tinta), var(--color-tinta)) 0 100% / 28px 3px no-repeat, linear-gradient(var(--color-tinta), var(--color-tinta)) 0 100% / 3px 28px no-repeat,
    linear-gradient(var(--color-tinta), var(--color-tinta)) 100% 100% / 28px 3px no-repeat, linear-gradient(var(--color-tinta), var(--color-tinta)) 100% 100% / 3px 28px no-repeat;
}
.se-hud { display: none; }
@media (min-width: 900px) {
  .se-papel__in { grid-template-columns: repeat(12, 1fr); column-gap: var(--medianil); padding-block: var(--esp-10); }
  .se-texto { grid-column: 2 / 7; }
  .se-foto { grid-column: 8 / 12; width: 100%; max-width: 440px; }
  .se-foto--video { width: auto; height: min(78svh, 760px); max-width: none; }
  .se-papel:nth-child(even) .se-texto { grid-column: 7 / 12; grid-row: 1; }
  .se-papel:nth-child(even) .se-foto { grid-column: 2 / 6; grid-row: 1; justify-self: end; }
  .se-papel:nth-child(even) .se-num { left: auto; right: var(--margen); }
}

/* Fondos fijados (iteración 13): el primero ya está puesto; los siguientes SUBEN DESDE ABAJO y se quedan encima, un poco más abajo que el anterior,
   así se ven los bordes de los que ya han llegado (se acumulan como una pila). Los de debajo se encogen un poco y se oscurecen apenas.
   El script escribe --k (llegada, 0 a 1) y --d (cuántos papeles tiene encima, 0 a 3) en cada papel. */
.se-estudio[data-modo="fijado"] { --pila: 14px; height: calc(100svh + var(--tramo, 300svh)); }
.se-estudio[data-modo="fijado"] .se-escena { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.se-estudio[data-modo="fijado"] .se-papeles { position: absolute; inset: 0; }
.se-estudio[data-modo="fijado"] .se-papel {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--alto-cabecera) + var(--n, 0) * var(--pila));
  border-radius: 28px 28px 0 0; transform-origin: 50% 0;
  transform: translate3d(0, calc((1 - var(--k, 1)) * 105%), 0) scale(calc(1 - var(--d, 0) * 0.035));
  box-shadow: 0 -8px 28px rgba(23, 20, 26, calc(0.16 * var(--k, 1)));
  will-change: transform;
}
.se-estudio[data-modo="fijado"] .se-papel:nth-child(2) { --n: 1; } .se-estudio[data-modo="fijado"] .se-papel:nth-child(3) { --n: 2; } .se-estudio[data-modo="fijado"] .se-papel:nth-child(4) { --n: 3; }
.se-estudio[data-modo="fijado"] .se-papel__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.se-estudio[data-modo="fijado"] .se-papel__clip::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(23, 20, 26, calc(var(--d, 0) * 0.06)); }
.se-estudio[data-modo="fijado"] .se-papel__in {
  height: 100%; padding: 32px var(--margen) 56px; align-content: center;
  transform: translate3d(0, calc((1 - var(--k, 1)) * 18%), 0);
}
.se-estudio[data-modo="fijado"] .se-hud {
  display: flex; position: absolute; z-index: 5; left: var(--margen); right: var(--margen); bottom: clamp(14px, 2.6svh, 28px); justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-tinta); text-transform: uppercase; pointer-events: none;
}
.se-hud__puntos { display: inline-flex; gap: 6px; }
.se-hud__puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-tinta); opacity: 0.25; transition: opacity 200ms, transform 200ms; }
.se-hud__puntos i.on { opacity: 1; transform: scale(1.35); }
@media (max-width: 899px) {
  .se-hud__datos { display: none; }
  .se-estudio[data-modo="fijado"] .se-papel__in { gap: 26px; }
  .se-estudio[data-modo="fijado"] .se-foto { width: auto; height: 36svh; max-width: 70vw; }
  .se-estudio[data-modo="fijado"] .se-foto--video { height: 44svh; }
  .se-estudio[data-modo="fijado"] .se-look { font-size: clamp(2.6rem, 14vw, 4.6rem); }
  .se-estudio[data-modo="fijado"] .se-texto { gap: var(--esp-2); }
  .se-estudio[data-modo="fijado"] .se-texto .entradilla { font-size: var(--tipo-cuerpo); }
  .se-estudio[data-modo="fijado"] .se-num { top: 22%; bottom: auto; left: auto; right: var(--margen); font-size: 34svh; }
}
@media (min-width: 900px) {
  .se-estudio[data-modo="fijado"] { --pila: 18px; }
  .se-estudio[data-modo="fijado"] .se-foto { width: auto; height: min(62svh, 600px); max-width: 100%; }
  .se-estudio[data-modo="fijado"] .se-foto--video { height: min(70svh, 680px); max-width: none; }
  .se-estudio[data-modo="fijado"] .se-papel__in { padding-bottom: 64px; }
}

/* ---------- Sesiones, iteración 22: tarjetas de IDEAS con pestaña y tres fotos ----------
   Cada tarjeta lleva arriba una pestaña con su número y su nombre (.se-papel__tab). La pila deja a la vista una franja más alta (--pila), así que
   al acumularse se leen todas; las de debajo (data-debajo, lo pone el script) se levantan al pasar el ratón y, al pulsarlas, la escena vuelve a
   esa idea. Las fotos van en un grupo de tres: una grande y dos pequeñas apiladas a su lado (--h es el alto del grupo). */
.se-papel__tab { display: none; }
.se-claves { margin: 4px 0 0; font: 500 var(--tipo-nota)/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-tinta) 78%, transparent); }
.se-estudio .se-fotos {
  --h: clamp(220px, 34svh, 320px); --g: 8px;
  position: relative; z-index: 1; display: grid; grid-auto-flow: column; justify-content: center; gap: var(--g);
  grid-template-rows: repeat(2, calc((var(--h) - var(--g)) / 2));
}
.se-estudio .se-fotos .se-foto { grid-column: auto; grid-row: auto; width: auto; height: 100%; max-width: none; aspect-ratio: 4 / 5; justify-self: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px -14px rgba(23, 20, 26, 0.45); }
.se-estudio .se-fotos .se-foto::after { display: none; }   /* sin las marcas de encuadre: con tres fotos juntas estorbaban */
.se-estudio .se-fotos .se-foto--grande { grid-row: 1 / 3; border-radius: 18px; }
.se-estudio .se-fotos .se-foto--video { aspect-ratio: 4 / 5; }
.se-estudio[data-modo="fijado"] { --pila: 34px; }
.se-estudio[data-modo="fijado"] .se-papel:nth-child(5) { --n: 4; } .se-estudio[data-modo="fijado"] .se-papel:nth-child(6) { --n: 5; }
.se-estudio[data-modo="fijado"] .se-papel { transition: translate 320ms var(--curva-ui); }
.se-estudio[data-modo="fijado"] .se-papel__tab {
  display: flex; position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: var(--pila); padding: 0 var(--margen); margin: 0;
  align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 28px 28px 0 0; background: transparent; color: var(--color-tinta);
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: default; pointer-events: none;
}
.se-papel__ir { opacity: 0; transition: opacity 200ms; }
.se-estudio[data-modo="fijado"] .se-papel[data-debajo] .se-papel__tab { pointer-events: auto; cursor: pointer; }
.se-estudio[data-modo="fijado"] .se-papel[data-debajo] .se-papel__ir { opacity: 0.6; }
.se-estudio[data-modo="fijado"] .se-papel__tab:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .se-estudio[data-modo="fijado"] .se-papel[data-debajo]:hover { translate: 0 -12px; }
  .se-estudio[data-modo="fijado"] .se-papel[data-debajo]:hover .se-papel__ir { opacity: 1; }
}
.se-estudio[data-modo="fijado"] .se-papel__in { padding: calc(var(--pila) + 14px) var(--margen) 56px; }
.se-estudio[data-modo="fijado"] .se-texto .nota { display: none; }   /* el número ya va en la pestaña */
@media (max-width: 899px) {
  .se-estudio[data-modo="fijado"] .se-papel__in { gap: 18px; align-content: start; }
  .se-estudio[data-modo="fijado"] .se-look { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .se-estudio[data-modo="fijado"] .se-num { top: auto; bottom: 64px; font-size: 26svh; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .se-estudio .se-fotos { --h: clamp(180px, 29svh, 260px); }
  .se-estudio[data-modo="fijado"] .se-claves { display: none; }
  .se-estudio[data-modo="fijado"] .se-texto .entradilla { font-size: 0.95rem; line-height: 1.38; }
}
@media (min-width: 900px) {
  .se-estudio .se-fotos { --h: min(54svh, 540px); --g: 12px; grid-column: 7 / 13; justify-content: end; }
  .se-estudio[data-modo="fijado"] .se-fotos { --h: min(54svh, 540px, calc(100svh - var(--alto-cabecera) - 5 * var(--pila) - 130px)); }   /* la última idea (la más baja de la pila) también cabe en pantallas bajas */
  .se-texto { grid-column: 2 / 6; }
  .se-papel:nth-child(even) .se-texto { grid-column: 8 / 12; grid-row: 1; }
  .se-papel:nth-child(even) .se-fotos { grid-column: 1 / 7; grid-row: 1; justify-content: start; }
  .se-estudio[data-modo="fijado"] { --pila: 40px; }
  .se-estudio[data-modo="fijado"] .se-papel__tab { font-size: 0.8125rem; }
  .se-estudio[data-modo="fijado"] .se-look { font-size: min(7.5rem, 10vw, 11svh); }   /* en pantallas bajas el título no empuja el texto contra la línea de abajo */
}

@media (min-width: 900px) and (max-height: 760px) {   /* escritorio bajo (1280 × 720): sin las palabras clave y el título algo menor */
  .se-estudio[data-modo="fijado"] .se-claves { display: none; }
  .se-estudio[data-modo="fijado"] .se-look { font-size: min(7.5rem, 10vw, 9.5svh); }
}

/* El flash de la cámara al asentarse cada papel */
.se-flash { position: fixed; inset: 0; z-index: 75; background: #fff; opacity: 0; pointer-events: none; }
.se-flash.on { animation: se-flash 280ms ease-out; }
@keyframes se-flash { 0% { opacity: 0; } 14% { opacity: 0.75; } 100% { opacity: 0; } }

/* Cierre (iteración 13: sustituye a la hoja de contactos amarilla) */
.se-cierre { padding: var(--esp-seccion) var(--margen) var(--esp-9); display: grid; gap: var(--esp-4); justify-items: start; }
.se-cierre .titulo { margin: 0; font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.se-cierre .entradilla { margin: 0; max-width: 34ch; }
.se-cta-botones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }

@media (prefers-reduced-motion: no-preference) {
  .se-dato--rec i { animation: se-parpadeo 1.2s steps(2, jump-none) infinite; }
  .se-af { animation: se-enfoca 3.6s var(--curva-ui) infinite; }
}
@keyframes se-parpadeo { 50% { opacity: 0.15; } }
@keyframes se-enfoca { 0%, 100% { scale: 1; opacity: 1; } 12% { scale: 1.18; opacity: 0.5; } 24% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .se-flash, .se-obturador { display: none; }
}

/* ---------- Ventana "Próximamente" de Talleres (iteración 13): tarjeta blanca centrada, título con brochazo hielo y botón a Instagram ---------- */
.aviso { padding: 0; border: 0; margin: auto; width: min(calc(100% - 32px), 560px); max-height: calc(100svh - 32px); background: transparent; color: var(--color-tinta); overflow: visible; }
.aviso::backdrop { background: rgba(255, 255, 255, 0.86); }
.aviso__caja { position: relative; display: grid; gap: var(--esp-4); padding: clamp(28px, 5vw, 48px); padding-top: clamp(40px, 6vw, 56px); background: #fff; border-radius: 28px; box-shadow: var(--sombra-tarjeta); max-height: calc(100svh - 32px); overflow-y: auto; }
.aviso__caja > p, .aviso__titulo { margin: 0; }
.aviso__cerrar { position: absolute; top: 8px; right: 12px; }
.aviso__nota { text-transform: uppercase; letter-spacing: 0.06em; }
.aviso__titulo { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); text-wrap: balance; }
.aviso__resalte { position: relative; display: inline-block; z-index: 0; }
.aviso__resalte::before {
  content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 44%; bottom: -8%; background: var(--brocha-hielo);
  -webkit-mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
          mask: var(--mascara-horizontal) var(--banda-pos) / var(--banda-tam) no-repeat;
}
.aviso__sigue { color: var(--color-ciruela); }
.aviso__botones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }
@media (prefers-reduced-motion: no-preference) {
  .aviso[open] .aviso__caja { animation: aviso-entra 420ms var(--curva-entrada); }
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }