/* ==========================================================================
   Voz a Letra · landing.css
   Estilos solo de la landing, páginas SEO, legales y 404.
   Requiere tokens.css y base.css antes. Solo usa var(--token).
   Idea: la página es una película. La ballena de luz abre, el precio es un boleto,
   el texto sale en hojas y subtítulos, y la ballena vuelve al final.
   ========================================================================== */

:root {
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z' fill='black'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
  --cols: 12;
}

/* Rejilla de 12 columnas (escritorio). En el teléfono todo va en una columna. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ==========================================================================
   1. Barra superior
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color var(--t-ui) ease;
}
.site-header.is-scrolled,
.site-header.is-open,
.site-header--solid { background-color: rgb(6 10 20 / 0.94); }
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--header-h);
}
.site-header__logo { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); overflow: hidden; }
.site-header__logo img { width: auto; max-width: none; height: 28px; }
/* Teléfonos (< 31em): el logo completo (344×64) no entra junto a Precios + Probar gratis + menú.
   - Con el botón "Probar gratis" de la barra: solo la ballena (el enlace corta el resto del logo).
   - Mientras otro botón ámbar de la página se ve (el del héroe), landing.js pone .site-header--cta-off: el botón de la
     barra se esconde y vuelve el logo completo, con el nombre. Sin JS: ballena + botón. */
@media (max-width: 30.99em) {
  .site-header__logo { max-width: 3.6rem; } /* a 28px de alto la ballena llega a ~56px; la letra empieza en ~62px */
  .site-header--cta-off .site-header__logo { max-width: 12rem; }
  .site-header--cta-off .site-header__cta { display: none; }
}
@media (min-width: 26em) and (max-width: 30.99em) {
  .site-header__logo { max-width: 4.1rem; } /* a 32px: la ballena llega a ~64px; la letra empieza en ~71px */
}
@media (max-width: 30.99em) and (prefers-reduced-motion: no-preference) {
  .site-header__logo { transition: max-width var(--t-ui) var(--ease-out); }
}
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-1); }
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-1);
  font-weight: var(--weight-semibold);
  color: var(--text-soft);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:not(.btn):hover { color: var(--text); }
}
.site-nav a.is-highlight { color: var(--text); gap: 0.5em; }
.site-nav a.is-highlight::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--light-cyan);
}
.site-nav__wide { display: none; }
.site-header__cta { flex: none; min-height: 2.75rem; padding-inline: 0.75rem; font-size: var(--fs-small); }
.site-header__menu { flex: none; width: var(--tap); min-height: var(--tap); margin-right: -0.625rem; }

/* Menú del teléfono (desplegable bajo la barra) */
.site-menu { background-color: rgb(6 10 20 / 0.94); padding-bottom: var(--space-5); }
.site-menu__list { display: grid; gap: var(--space-1); }
.site-menu__list a {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  font-size: var(--fs-lead);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-decoration: none;
}

@media (min-width: 26em) {
  .site-header__bar { gap: var(--space-2); }
  .site-header__logo img { height: 32px; }
  .site-nav a:not(.btn) { padding-inline: var(--space-3); }
  .site-header__cta { padding-inline: 1rem; }
}
@media (min-width: 64em) {
  .site-header__bar { gap: var(--space-4); }
  .site-header__logo img { height: 40px; }
  .site-nav__wide { display: list-item; list-style: none; }
  .site-header__menu, .site-menu { display: none; }
  .site-header__cta { font-size: var(--fs-body); padding-inline: 1.375rem; min-height: var(--control-h); }
}

/* ==========================================================================
   2. Héroe: la ballena de luz, título de película
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--bg-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__still img { object-position: 30% 50%; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-film);
}
.hero__video.is-playing { opacity: 1; }
.hero__scrim-side { background-image: linear-gradient(to right, rgb(var(--scrim-rgb) / 0.82) 0%, rgb(var(--scrim-rgb) / 0.42) 30%, rgb(var(--scrim-rgb) / 0) 52%); } /* taste-skill-ignore: velo neutro sobre foto */
.hero__scrim-low { opacity: 0.85; }

.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vh, 3.5rem));
  padding-bottom: clamp(1.5rem, 1rem + 2.5vh, 3rem);
}
.hero__title { max-width: 9.6em; }
.hero__foot { margin-top: auto; display: grid; gap: var(--space-5); }
.hero__lead { max-width: 30ch; }
.hero__toggle {
  position: absolute;
  z-index: 4;
  right: max(var(--margin), env(safe-area-inset-right));
  bottom: clamp(1rem, 0.6rem + 2vh, 2.25rem);
  color: var(--text-soft);
}
.hero__billing {
  font-size: var(--fs-small);
  color: var(--text-soft);
  max-width: none;
}

/* Teléfono y tableta en vertical: todo arriba, la ballena abajo */
@media (orientation: portrait) {
  .hero__still img, .hero__video { object-position: 40% 100%; }
  .hero__foot { margin-top: 0; }
  .hero__billing { margin-top: auto; }
  .hero__scrim-side { display: none; }
  .hero .scrim--top { background-image: linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0.86) 0%, rgb(var(--scrim-rgb) / 0.55) 34%, rgb(var(--scrim-rgb) / 0) 52%); } /* taste-skill-ignore: velo neutro sobre foto */
}
@media (orientation: portrait) and (max-width: 47.99em) {
  .hero__actions { display: grid; justify-items: start; }
}

/* ==========================================================================
   3. Cómo funciona: tres líneas en escalera
   ========================================================================== */
.steps__list { display: grid; gap: var(--space-8); counter-reset: none; }
.steps__item { padding-left: calc(var(--step) * 6vw); }
.steps__line {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
.steps__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-4); } /* sin minmax, el fragmento de 22rem ensancha la columna en 360px */
.steps__body p { max-width: 34ch; color: var(--text); }

/* Fragmentos de la app (interfaz real, a escala) */
.ui-frag {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 22rem);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-small);
  background-color: var(--surface-1);
  border-radius: var(--radius);
}
.ui-frag__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-soft); }
.ui-frag__files { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.25rem;
  padding: 0.25rem 0.85rem;
  font-weight: var(--weight-semibold);
  color: var(--text);
  background-color: var(--surface-3);
  border-radius: var(--radius-pill);
}
.ui-chip .icon { width: 1.1em; height: 1.1em; }

@media (min-width: 48em) {
  .steps__list { gap: var(--space-9); }
  .steps__item { padding-left: calc(var(--step) * 8vw); }
}
@media (min-width: 64em) {
  .steps__item { padding-left: calc(var(--step) * 16.66%); }
  .steps__body { grid-template-columns: minmax(0, 34ch) auto; align-items: start; column-gap: var(--space-7); }
}

/* ==========================================================================
   4. Precios: el boleto (Mensual/Anual + plan; el talón imprime el elegido)
   ========================================================================== */
.pricing__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.pricing__head .lead { max-width: 34ch; }

.ticket {
  --notch: 28px;
  position: relative;
  display: grid;
  max-width: 68rem;
}
.ticket__main {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background-color: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.ticket__stub {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-8) clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--surface-3);
  border-top: 6px dotted var(--bg);   /* perforación: puntos del color del fondo */
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Muescas del boleto: medio círculo mordido en los dos extremos de la perforación */
.ticket__stub { position: relative; }
.ticket__stub::before, .ticket__stub::after {
  content: "";
  position: absolute;
  width: var(--notch);
  height: var(--notch);
  border-radius: 50%;
  background-color: var(--bg);
  top: calc(-3px - var(--notch) / 2);
}
.ticket__stub::before { left: calc(var(--notch) / -2); }
.ticket__stub::after { right: calc(var(--notch) / -2); }

/* Mensual / Anual: control segmentado (base.css) sobre el tono más hondo del boleto */
.ticket__period { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ticket__switch { background-color: var(--surface-1); }
.ticket__save { font-size: var(--fs-small); color: var(--text-soft); }
/* Precio mensual o anual dentro de cada fila (sin :has queda el mensual) */
.per-anio { display: none; }
.ticket:has(#per-anio:checked) .per-mes { display: none; }
.ticket:has(#per-anio:checked) .per-anio { display: inline; }

.ticket__packs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
.ticket__legend { padding: 0; margin-bottom: var(--space-3); font-weight: var(--weight-semibold); color: var(--text-soft); }
.pack {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot name price" "dot hours usdt" "dot feat feat";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: 0;
  min-height: 4.25rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; /* taste-skill-ignore: anillo interior */
}
.pack input {
  grid-area: dot;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--line-field-hover);
  background-color: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--t-press) ease, background-color var(--t-press) ease;
}
.pack input::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--ocean-950);
  transform: scale(0.4); opacity: 0;
  transition: transform var(--t-press) var(--ease-out), opacity var(--t-press) ease;
}
.pack input:checked { border-color: var(--light-cyan); background-color: var(--light-cyan); }
.pack input:checked::before { transform: scale(1); opacity: 1; }
.pack input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pack__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.6em; font-size: var(--fs-lead); line-height: 1.3; }
.pack__name strong { font-weight: var(--weight-semibold); }
.pack__hours { grid-area: hours; color: var(--text-soft); line-height: 1.35; }
.pack__price { grid-area: price; justify-self: end; font-size: var(--fs-lead); font-weight: var(--weight-semibold); white-space: nowrap; }
.pack__price small, .stub__per { margin-left: 0.15em; font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--text-soft); }
.pack__feat { grid-area: feat; margin-top: var(--space-1); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--light-cyan); }
.pack__usdt { grid-area: usdt; justify-self: end; font-size: var(--fs-small); color: var(--text-soft); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .pack:hover { background-color: var(--surface-3); }
}
@media (max-width: 25.99em) {
  .pack { column-gap: var(--space-3); padding-inline: var(--space-3); }
}
.pack:has(input:checked) { background-color: var(--surface-3); box-shadow: var(--ring-selected); } /* taste-skill-ignore: anillo interior de seleccionado */

.ticket__terms { display: grid; gap: var(--space-2) var(--space-6); color: var(--text); }
/* Una frase larga se parte dentro de su línea; el punto de luz se queda a la altura de la primera línea */
.ticket__terms li { display: flex; align-items: baseline; gap: 0.4em; }
.ticket__terms li::before {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.35em;
  border-radius: 50%;
  background-color: var(--light-cyan);
  transform: translateY(-0.15em);
}

/* Express: una línea discreta para quien solo quiere probar (enlace, no otro botón ámbar) */
.ticket__express { padding: var(--space-3) var(--space-4); color: var(--text-soft); background-color: var(--surface-1); border-radius: var(--radius); }
.ticket__express strong { color: var(--text); font-weight: var(--weight-semibold); }
.ticket__express a { font-weight: var(--weight-semibold); white-space: nowrap; }

/* Talón: muestra solo el plan y el período elegidos (Pro mensual si el navegador no entiende :has) */
.stub { display: none; gap: var(--space-2); }
.stub--pro.stub--mes { display: grid; }
@supports selector(:has(a)) {
  .stub--pro.stub--mes { display: none; }
  .ticket:has(#plan-starter:checked):has(#per-mes:checked) .stub--starter.stub--mes,
  .ticket:has(#plan-starter:checked):has(#per-anio:checked) .stub--starter.stub--anio,
  .ticket:has(#plan-pro:checked):has(#per-mes:checked) .stub--pro.stub--mes,
  .ticket:has(#plan-pro:checked):has(#per-anio:checked) .stub--pro.stub--anio,
  .ticket:has(#plan-business:checked):has(#per-mes:checked) .stub--business.stub--mes,
  .ticket:has(#plan-business:checked):has(#per-anio:checked) .stub--business.stub--anio { display: grid; }
}
.stub__price {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--track-heading);
  white-space: nowrap;
}
.stub__what { font-size: var(--fs-lead); line-height: 1.3; }
.stub__what strong { font-weight: var(--weight-semibold); }
.stub__note { font-size: var(--fs-small); color: var(--text-soft); }
.stub .btn { margin-top: var(--space-4); }
.stub__after { font-size: var(--fs-small); color: var(--text-soft); }
@media (prefers-reduced-motion: no-preference) {
  .ticket:has(input:checked) .stub { animation: vl-print var(--t-dialog) var(--ease-out) both; }
}
@keyframes vl-print { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

@media (min-width: 48em) {
  .ticket__terms { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; }
}
@media (min-width: 64em) {
  .ticket { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .ticket__main { border-radius: var(--radius) 0 0 var(--radius); }
  .ticket__stub { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 0; border-left: 6px dotted var(--bg); border-radius: 0 var(--radius) var(--radius) 0; }
  .ticket__stub::before, .ticket__stub::after { left: calc(-3px - var(--notch) / 2); right: auto; }
  .ticket__stub::before { top: calc(var(--notch) / -2); }
  .ticket__stub::after { top: auto; bottom: calc(var(--notch) / -2); }
}

/* ==========================================================================
   5. Para qué sirve: la foto cambia sola, las hojas muestran el texto
   ========================================================================== */
.uses { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--section) / 2); }
.uses__copy { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.uses__side { display: grid; gap: var(--space-3); }
.uses__lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 30ch; }
.uses__note { font-size: var(--fs-small); color: var(--text-soft); }
.uses__stage { position: relative; aspect-ratio: 4 / 3; background-color: var(--bg); }
.uses__photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.uses__photo.is-active { opacity: 1; }
.uses__photo picture, .uses__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uses__photo img { object-position: 50% 55%; }
.uses__photo[data-photo="whatsapp"] img { object-position: 50% 72%; }
.uses__photo[data-photo="reuniones"] img { object-position: 50% 68%; }
.uses__photo[data-photo="subtitulos"] img { object-position: 60% 60%; }
.uses__stage .scrim, .uses__stage .grain { z-index: 1; }
/* Bordes de la foto que se funden con el fondo de la página (velo neutro) */
.uses__fade { background-image: linear-gradient(to bottom, rgb(6 10 20 / 1) 0%, rgb(6 10 20 / 0) 22%, rgb(6 10 20 / 0) 62%, rgb(6 10 20 / 0.92) 100%); } /* taste-skill-ignore: velo neutro sobre foto */

.slips {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-inline: max(var(--margin), env(safe-area-inset-left));
  margin-top: calc(var(--space-8) * -1);
  padding-bottom: calc(var(--section) / 2);
  list-style: none;
}
.slip {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ocean-950);
  background-color: var(--ink);
  border-radius: var(--radius);
  transform: rotate(var(--r, 0deg));
}
.slip p { max-width: none; }
.slip__title { font-weight: var(--weight-bold); line-height: 1.3; }
.slip__meta { margin-top: calc(var(--space-2) * -1); color: var(--ocean-600); }
.slip ul { padding-left: 1.1em; }
.slip li::marker { color: var(--ocean-600); }
.slip__srt { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js .slip {
    opacity: 0;
    transform: rotate(var(--r, 0deg)) translate3d(0, 48px, 0);
    transition: transform 1.1s var(--ease-out), opacity var(--t-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js .slip.is-visible { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .js .slip.is-visible.is-lit { transform: rotate(var(--r, 0deg)) translate3d(0, -18px, 0); transition-delay: 0s; }
}

@media (min-width: 64em) {
  .uses__copy { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .uses__copy h2 { grid-column: 1 / 7; }
  .uses__side { grid-column: 8 / 13; }
}
@media (min-width: 48em) {
  .uses__stage { aspect-ratio: 2.39 / 1; max-height: 78svh; width: 100%; }
  .slips {
    display: flex;
    align-items: flex-start;
    margin-top: calc(var(--space-10) * -1);
    padding-bottom: 0;
    height: calc(var(--space-10) + 15rem);
  }
  .slip {
    flex: var(--grow, 1) 1 0;
    min-width: 0;
    margin-top: calc((40 - var(--h, 34)) * 0.35rem);
    height: 30rem;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .slip:nth-child(n + 5) { display: none; }
}

/* ==========================================================================
   6. Privacidad: la ballena se pierde en lo profundo; el texto vive en el negro
   ========================================================================== */
.privacy { position: relative; isolation: isolate; display: grid; background-color: var(--bg); }
/* La foto se funde arriba y abajo con el fondo de la página */
.privacy__pano::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, rgb(6 10 20 / 1) 0%, rgb(6 10 20 / 0) 14%, rgb(6 10 20 / 0) 80%, rgb(6 10 20 / 1) 100%); } /* taste-skill-ignore: velo neutro sobre foto */
.privacy__copy { order: -1; display: grid; gap: var(--space-5); padding-block: calc(var(--section) / 2) var(--space-6); }
.privacy__notes { display: grid; gap: var(--space-4); }
.privacy__notes p { max-width: 34ch; }
.privacy__pano { aspect-ratio: 4 / 5; }
.privacy__pano img { object-position: 50% 30%; }
@media (min-width: 48em) {
  .privacy { min-height: min(56.25vw, 100svh); align-items: center; }
  .privacy__pano { position: absolute; inset: 0; aspect-ratio: auto; }
  .privacy__pano img { object-position: 50% 50%; }
  .privacy__copy { position: relative; z-index: 2; order: 0; padding-block: var(--space-9); }
  .privacy__copy > * { max-width: min(28rem, 31vw); }
}

/* ==========================================================================
   7. Video: la función (el título antes de la pantalla, luego la pantalla)
   ========================================================================== */
.screening { position: relative; isolation: isolate; padding-top: calc(var(--section) / 2); }
.screening__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.screening__head p { max-width: 34ch; }
.screening__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--bg-deep); }
.screening__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El botón se alinea con el texto del póster (abajo a la izquierda); en el teléfono va debajo */
.screening__controls { position: relative; z-index: 2; display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5) max(var(--margin), env(safe-area-inset-left)) 0; }
.screening__msg:empty { display: none; }
.screening__msg { font-size: var(--fs-small); color: var(--text-soft); }
.screening.is-playing .screening__controls { opacity: 0; pointer-events: none; }
.screening__controls { transition: opacity var(--t-dialog) ease; }
@media (max-width: 47.99em) {
  .screening__frame { aspect-ratio: auto; }
  .screening__video { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .screening.is-playing .screening__controls { opacity: 1; pointer-events: auto; }
  .screening.is-playing .screening__play { display: none; }
}
@media (min-width: 48em) {
  .screening__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .screening__head h2 { grid-column: 1 / 8; }
  .screening__head p { grid-column: 8 / 13; }
  .screening__frame { max-height: 100svh; }
  .screening__controls { position: absolute; left: 6.25%; top: 76%; padding: 0; }
}

/* ==========================================================================
   8. Preguntas: fichas de archivo con pestaña
   ========================================================================== */
.faq__wrap { display: grid; gap: var(--space-7); }
.faq__deck { display: grid; }
.faq__card {
  --tab-w: 8rem;
  --tab-step: 2.5rem;
  --tab-h: 2.5rem;
  position: relative;
  padding-top: var(--tab-h);
}
.faq__card + .faq__card { margin-top: calc(var(--space-4) * -1); }
.faq__card summary {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5) var(--space-6);
  background-color: var(--tone);
  border-radius: 0 var(--radius) 0 0;
}
.faq__card summary::-webkit-details-marker { display: none; }
.faq__tab {
  position: absolute;
  left: calc(var(--x, 0) * var(--tab-step));
  bottom: 100%;
  display: flex;
  align-items: center;
  width: var(--tab-w);
  height: var(--tab-h);
  padding-inline: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--text-soft);
  background-color: var(--tone);
  border-radius: var(--radius) var(--radius) 0 0;
}
.faq__card:first-child summary, .faq__card[style*="--x:0"] summary { border-top-left-radius: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.faq__q::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--text-soft);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform var(--t-ui) var(--ease-out);
}
.faq__card[open] .faq__q::after { transform: rotate(180deg); }
.faq__a {
  position: relative; /* encima del relleno de abajo del summary (si no, tapa la primera línea) */
  padding: 0 var(--space-5) var(--space-7);
  margin-top: calc(var(--space-4) * -1);
  background-color: var(--tone);
}
.faq__a p { max-width: 50ch; color: var(--text); }
.faq__card summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .faq__card summary:hover .faq__q::after { background-color: var(--text); }
  .faq__card summary:hover .faq__tab { color: var(--text); }
}
@media (prefers-reduced-motion: no-preference) {
  .faq__card[open] .faq__a { animation: vl-rise var(--t-dialog) var(--ease-out) both; }
}
@media (min-width: 48em) {
  .faq__card { --tab-w: 12.5rem; --tab-step: 9.375rem; }
}
@media (min-width: 64em) {
  .faq__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .faq__wrap > h2, .faq__deck { grid-column: 3 / 11; }
}

/* ==========================================================================
   9. Final: la ballena vuelve desde otro ángulo
   ========================================================================== */
.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--bg);
}
.finale__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: calc(var(--section) / 2) max(var(--margin), env(safe-area-inset-left)) var(--space-6);
}
.finale__copy { order: -1; }
.finale__copy p { max-width: 30ch; }
.finale__fact { font-size: var(--fs-lead); line-height: 1.35; }
.finale__copy .btn { margin-top: var(--space-3); }
@media (max-width: 47.99em) {
  .finale__copy > div { width: 100%; }
  .finale__copy .btn { display: flex; width: 100%; }
}
.finale__object {
  position: relative;
  margin: 0;
  width: 130vw;
  aspect-ratio: 16 / 10;
  margin-left: -6vw;
  margin-bottom: -10vw;
}
.finale__object picture, .finale__object img { display: block; width: 100%; height: 100%; object-fit: cover; }
.finale__object img { object-position: 60% 50%; }
/* La foto se apaga hacia sus bordes: sin rectángulo visible */
.finale__object {
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 46% 54%, #000 52%, transparent 100%); /* taste-skill-ignore: máscara de fundido, no relleno */
  mask-image: radial-gradient(ellipse 62% 58% at 46% 54%, #000 52%, transparent 100%); /* taste-skill-ignore: máscara de fundido, no relleno */
}
@media (orientation: landscape) and (min-width: 48em) {
  .finale {
    min-height: 74svh;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-inline: max(var(--margin), env(safe-area-inset-left));
  }
  .finale__object {
    grid-column: 1 / 8;
    grid-row: 1;
    width: auto;
    aspect-ratio: auto;
    height: 100%;
    margin: 0 0 0 calc(max(var(--margin), env(safe-area-inset-left)) * -1);
  }
  .finale__object { overflow: hidden; }
  .finale__object img { object-position: 50% 74%; transform: scale(1.12); transform-origin: 0% 100%; }
  .finale__copy { grid-column: 8 / 13; grid-row: 1; align-self: center; padding: var(--space-9) 0; }
}

/* ==========================================================================
   10. Pie
   ========================================================================== */
.site-footer {
  padding-block: var(--space-8) var(--space-7);
  background-color: var(--bg);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-9);
}
.site-footer__logo img { width: auto; height: 32px; }
.site-footer__about { font-size: var(--fs-small); color: var(--text-soft); }
.site-footer__up { margin-left: auto; font-size: var(--fs-small); color: var(--text-soft); text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .site-footer__up:hover { color: var(--text); } }
.site-footer__ask { font-size: var(--fs-lead); color: var(--text-soft); margin-bottom: var(--space-2); }
.site-footer__mail {
  display: inline-flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--track-heading);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .site-footer__mail:hover { color: var(--light-cyan); } }
.site-footer__nav { margin-top: var(--space-8); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-small);
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: rgb(194 206 224 / 0.3);
  text-underline-offset: 0.25em;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover { color: var(--text); text-decoration-color: currentColor; }
}
.site-footer__legal { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--text-muted); }

/* ==========================================================================
   11. Páginas SEO, legales y 404
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: min(88svh, 52rem);
  background-color: var(--bg);
}
/* El velo toma el tono exacto de la página: sin un rectángulo más oscuro al lado de la foto */
.page-hero .scrim, .lost .scrim { --scrim-rgb: 6 10 20; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { object-position: var(--focus-x, 60%) 50%; }
.page-hero__copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--space-5);
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-8);
}
.page-hero__copy h1 { max-width: 14em; }
.page-hero__copy .lead { max-width: 34ch; }

.page-body { padding-block: calc(var(--section) / 2); }
.page-body .prose { max-width: 42rem; }
.prose .steps-ol { list-style: decimal; padding-left: 1.4em; }
.page-aside { display: none; }
.page-aside__card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--surface-1);
  border-radius: var(--radius);
}
.page-aside__price { display: grid; gap: var(--space-1); color: var(--text-soft); }
.page-aside__price .serif { font-size: var(--fs-h2); line-height: 1; color: var(--text); white-space: nowrap; }
.page-aside__facts { display: grid; gap: var(--space-2); }
.page-aside__facts li { display: flex; gap: 0.6em; align-items: baseline; }
.page-aside__facts li::before { content: ""; flex: none; width: 0.42em; height: 0.42em; border-radius: 50%; background-color: var(--light-cyan); transform: translateY(-0.15em); }
@media (min-width: 64em) {
  .page-body { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 22rem); justify-content: space-between; column-gap: var(--space-8); align-items: start; }
  .page-body .prose { grid-column: 1; grid-row: 1; }
  .page-aside { display: block; grid-column: 2; grid-row: 1; align-self: stretch; }
}
@media (orientation: landscape) and (min-width: 64em) {
  .page-hero__media { left: 34%; }
}
.prose .steps-ol li::marker { color: var(--light-cyan); font-weight: var(--weight-bold); }
.page-cta {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  margin-top: var(--space-8);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--surface-1);
  border-radius: var(--radius);
}
.page-cta p { max-width: 40ch; }
.page-cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}
.page-prices { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.page-prices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); background-color: var(--surface-2); border-radius: var(--radius); }
.page-prices li::before { content: none; }

.page-faq { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.page-faq details { background-color: var(--surface-1); border-radius: var(--radius); }
.page-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--control-h-lg);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.page-faq summary::-webkit-details-marker { display: none; }
.page-faq summary::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--text-soft);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform var(--t-ui) var(--ease-out);
}
.page-faq details[open] summary::after { transform: rotate(180deg); }
.page-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.page-faq details > :not(summary) { padding: 0 var(--space-5) var(--space-5); }

.related { padding-bottom: calc(var(--section) / 2); }
.related__title { font-size: var(--fs-h2); margin-bottom: var(--space-6); }
.related__grid { display: grid; gap: var(--space-6) var(--gutter); }
.related__card { display: grid; gap: var(--space-3); color: var(--text); text-decoration: none; }
.related__media { display: block; }
.related__media img { transition: transform var(--t-reveal) var(--ease-soft); }
.related__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.related__label::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--light-cyan);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--t-hover) var(--ease-out);
}
.related__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
  .related__card:hover .related__media img { transform: scale(1.04); }
  .related__card:hover .related__label::after { transform: translateX(4px); }
}
.related__more { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-soft); }
.related__more a { color: var(--link); text-underline-offset: 0.2em; }
@media (min-width: 48em) {
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Legales: lectura tranquila */
.legal { padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: calc(var(--section) / 2); }
.legal__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.legal__date { font-size: var(--fs-small); color: var(--text-muted); }
.legal .prose { max-width: 42rem; }
.legal .prose h2 { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* 404 */
.lost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100svh;
  background-color: var(--bg);
}
.lost__media { position: absolute; inset: 0; z-index: 0; }
.lost__media img { object-position: 50% 40%; }
.lost__copy { position: relative; z-index: 3; display: grid; gap: var(--space-5); justify-items: start; padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8); }
.lost__copy .lead { max-width: 30ch; }
.lost__copy h1 { max-width: 6.4em; }

/* Ejemplo de archivo SRT: es texto real, pero se lee mejor en la letra de la marca */
.srt-sample, .srt-sample code {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

/* Fotos de la ballena sobre negro: el negro de la foto toma el tono exacto del fondo (sin costuras) */
.privacy__pano { background-color: var(--bg); }
.privacy__pano img, .finale__object img { mix-blend-mode: lighten; }

/* La barra y el título del héroe usan el cuadro ancho (como un plano de cine):
   en pantallas grandes el texto queda a la izquierda y no pisa la ballena. */
.site-header__bar, .hero__copy, .page-hero__copy, .lost__copy { max-width: calc(var(--container-wide) + 2 * var(--margin)); }

/* 404 en vertical: el texto arriba y la ballena abajo, sin pisarla */
@media (orientation: portrait) {
  .lost { align-items: start; }
  .lost__media { top: 40%; }
  .lost .scrim--left { display: none; }
}

/* Grano: la página ya lo trae (body.has-grain). Dentro de cada foto sería doble y aclararía los negros. */
.has-grain .media .grain:not(.grain--live) { display: none; }

/* ==========================================================================
   12. Libro de Reclamaciones: enlace fijo en el pie de todas las páginas + su página
   ========================================================================== */
.site-footer__book {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.65em;
  min-height: var(--tap);
  margin-top: var(--space-7);
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
  background-color: var(--surface-1);
  border-radius: var(--radius);
  transition: background-color var(--t-hover) ease;
}
.site-footer__book-icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--light-cyan); }
@media (hover: hover) and (pointer: fine) { .site-footer__book:hover { background-color: var(--surface-2); } }
.site-footer__book + .site-footer__nav { margin-top: var(--space-5); }

.libro .legal__head .lead { max-width: 34ch; }
.libro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "prov" "main" "look";
  gap: var(--space-7);
}
.libro__prov { grid-area: prov; }
.libro__main { grid-area: main; min-width: 0; }
.libro__lookup { grid-area: look; }
@media (min-width: 64em) {
  .libro__grid {
    grid-template-columns: minmax(0, 42rem) minmax(0, 22rem);
    grid-template-areas: "main prov" "main look";
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    align-items: start;
    column-gap: var(--space-8);
  }
}
.libro__card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);
  background-color: var(--surface-1);
  border-radius: var(--radius);
}
.libro__h { font-family: var(--font-text); font-size: var(--fs-lead); font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: 0; }
.libro__dl { display: grid; gap: var(--space-3); }
.libro__dl dt { font-size: var(--fs-small); color: var(--text-muted); }
.libro__dl dd { overflow-wrap: anywhere; }

/* Hoja de reclamación */
.libro__form { display: grid; gap: var(--space-8); }
.libro__req { font-size: var(--fs-small); color: var(--text-soft); }
.libro__set { display: grid; gap: var(--space-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.libro__legend { padding: 0; margin-bottom: var(--space-5); font-size: var(--fs-lead); font-weight: var(--weight-semibold); line-height: 1.3; }
.libro__pair { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 40em) {
  .libro__pair { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .libro__pair--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.libro__opt { font-weight: var(--weight-regular); color: var(--text-muted); }
.libro__fixed { display: grid; gap: var(--space-1); }
.libro__fixed-label { font-weight: var(--weight-semibold); }
.libro__choice { display: grid; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.libro__choice > legend { padding: 0; margin-bottom: var(--space-2); }
.libro__short { min-height: 6rem; }
.libro__end { display: grid; gap: var(--space-5); }
.libro__send { width: 100%; }
@media (min-width: 40em) { .libro__send { width: auto; } }
.libro__notes { display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-soft); }

/* Listo: el código y la copia */
.libro__done { display: grid; gap: var(--space-4); justify-items: start; }
.libro__title2, .libro__code {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
.libro__code { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.libro__actions { margin-top: var(--space-2); }
.libro__status { font-size: var(--fs-small); color: var(--ok); }
.libro__status:empty { display: none; }
.libro-copy {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  margin-top: var(--space-5);
  padding: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);
  background-color: var(--surface-1);
  border-radius: var(--radius);
}
.libro-copy__head { display: grid; gap: var(--space-1); }
.libro-copy__kicker { font-weight: var(--weight-bold); }
.libro-copy__h { margin-bottom: var(--space-3); font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--weight-bold); line-height: 1.35; }
.libro-copy__dl { display: grid; gap: var(--space-3); }
.libro-copy__dl > div { display: grid; gap: 0 var(--space-4); }
@media (min-width: 40em) { .libro-copy__dl > div { grid-template-columns: 11rem minmax(0, 1fr); } }
.libro-copy__dl dt { font-size: var(--fs-small); color: var(--text-muted); }
.libro-copy__dl dd { white-space: pre-line; overflow-wrap: anywhere; }
.libro-copy__notes { display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-soft); }

/* Consulta */
.libro__lookup-form { display: grid; gap: var(--space-4); }
.libro__result:empty { display: none; }
.libro__result-card { display: grid; gap: var(--space-3); padding: var(--space-4); background-color: var(--surface-2); border-radius: var(--radius); }
.libro__result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.libro__answer { margin: 0; padding: var(--space-3) var(--space-4); white-space: pre-line; overflow-wrap: anywhere; background-color: var(--surface-3); border-radius: var(--radius); }

/* Imprimir o guardar PDF: solo la copia del reclamo, en blanco y negro */
@media print {
  .libro-done .site-header, .libro-done .site-footer, .libro-done .legal__head, .libro-done .libro__prov,
  .libro-done .libro__lookup, .libro-done .libro__done > :not(.libro-copy) { display: none !important; }
  .libro-done .legal { padding: 0; }
  .libro-done .libro__grid { display: block; }
  .libro-copy { margin: 0; padding: 0; background: none; }
  .libro-copy, .libro-copy * { color: inherit !important; }
  .libro-copy__sec { break-inside: avoid; }
}