/**
 * La portada de Vinyo en dos escenas: el dueño delante de la palabra, y su hija
 * hecha de puntos de luz sobre una aurora índigo.
 *
 * Solo la enlaza `index.html`. Las cinco páginas de servicio no la cargan y no
 * pueden enterarse de nada de lo que hay aquí, así que todo va colgado de
 * `.portada`, `.escena-hija`, `.escenas` o de `.cabecera--recogida`.
 *
 * No introduce ningún color: los tonos de las dos escenas son variables de la
 * cabecera de `estilos.css`, mezclas de la paleta que eligió el cliente. El
 * dorado de marca no lleva texto: aquí es nodo de la malla y luz. «Vinyo» del
 * titular usa `--dorado-sobre-crema`, el mismo tono bajado hasta que se lee.
 *
 * ## Escena 1: la palabra detrás, la persona delante
 *
 * «VINYO» es un `<svg>` con `textLength`: las cinco letras llenan el marco de
 * lado a lado midan lo que midan con la tipografía que haya llegado, sin
 * calcular anchos de glifo con `vw`. Va en Plus Jakarta Sans a peso 200 y en
 * mayúsculas, que es la familia de la marca en su registro más fino. La
 * cursiva de Dancing Script se queda en la firma (cabecera, titular y pie):
 * a este tamaño sus trazos de enlace y la cola de la «y» no dejan una línea de
 * mayúsculas que la figura pueda pisar limpia. La palabra es decoración
 * (`aria-hidden`): el `h1` ya dice Vinyo.
 *
 * El recorte lleva una máscara que lo funde hacia abajo. No se confía en que el
 * archivo venga fundido: el provisional trae el fondo azul de su foto de
 * origen en el último cuarto, y la foto real del dueño puede traer cualquier
 * cosa. La máscara hace que cualquier recorte con fondo transparente siente
 * igual en la escena.
 *
 * ## Escena 2 cubre a la 1 como un telón, solo si cabe
 *
 * En pantallas anchas y con altura suficiente la escena 1 se queda pegada y la
 * aurora sube por encima de ella, mientras la primera se aleja un poco y se
 * oscurece. En el móvil no: una escena pegada más alta que la ventana esconde
 * para siempre la parte que no cabía (el titular y el botón), porque la
 * siguiente la tapa antes de que el scroll llegue a enseñarla.
 *
 * El alejamiento usa `animation-timeline` con la línea de tiempo de la escena
 * 2, compartida con `timeline-scope`. Donde el navegador no la sabe, la escena
 * 2 cubre a la 1 igual pero sin alejamiento, que es un fallo que no se nota.
 * Como en la cabecera, las propiedades de la animación van sueltas: la forma
 * abreviada reinicia `animation-timeline`.
 *
 * ## La malla
 *
 * La pinta `js/portada.js` en un `<canvas>`. Aquí solo se le da sitio. Si el
 * guion o el lienzo fallan, el contenedor queda vacío y la escena se lee igual:
 * aurora, titular y opiniones.
 */

:root {
  --portada-cabecera-alto: 4.47rem;
  --portada-margen: clamp(1.25rem, 3vw, 3rem);
  --portada-marco-maximo: 1600px;
  --portada-ancho-util: min(100% - 2 * var(--portada-margen), var(--portada-marco-maximo));
  --portada-figura-sobre-la-palabra: -12.5%;
  --portada-alto: calc(100svh - var(--portada-cabecera-alto));
  /*
   * Lo que mide la figura: en tres columnas, su alto en fracción de la escena; en una
   * o dos, la parte de su franja (de la palabra al titular) que ocupa, apoyada abajo.
   * Hasta el 15 de octubre de 2026 eran 0,9 y la franja entera; Luiggi la vio
   * demasiado cerca y se alejó un paso. El modelo 3D se encuadra en la caja del
   * recorte, así que los dos cambian a la vez.
   */
  --portada-figura-alto: 0.78;
  --portada-figura-en-su-franja: 86%;
  --portada-fundido-desde: 56%;
  --portada-fundido-hasta: 76%;
  --portada-palabra-alto-maximo: 0.46;
  --portada-alejamiento-escala: 0.94;
  --portada-alejamiento-velo: 0.5;
  --portada-texto-maximo: 34ch;
  --escena-hija-margen-superior: calc(var(--portada-cabecera-alto) + clamp(1.5rem, 4vw, 3rem));
  --escena-hija-deriva-ciclo: 28s;
  --ranura-hueco: 0.75rem;
  --carrusel-alto: clamp(13rem, 30svh, 17rem);
  --flotante-margen: 1.15rem;
  --flotante-asistente-alto: 48px;
  --flotante-aire: 1rem;
  --portada-aire-flotantes: calc(var(--flotante-margen) + var(--flotante-asistente-alto) + var(--flotante-aire));
}

/*
 * El botón flotante del asistente (`asistente.css`) vive abajo a la derecha,
 * justo donde la escena 1 apoya su acción: el pie de la escena reserva su
 * altura. Las medidas copian las de `asistente.css`; si cambian allí, cambian
 * aquí.
 */

/* ── La cabecera de la portada no se abre ─────────────────────────────── */

/*
 * En las páginas de servicio la cabecera se abre arriba del todo para enseñar
 * de quién es la clínica. En la portada eso ya lo hacen el telón con el emblema
 * y la palabra de lado a lado: una barra de 140 px encima robaría la altura
 * que la escena 1 necesita para caber en una ventana. Se queda recogida desde
 * el primer píxel, con las medidas de `@keyframes cabecera-se-recoge`,
 * `emblema-se-recoge` y `marca-se-recoge` de `estilos.css`.
 */
.cabecera--recogida .cabecera__fila,
.cabecera--recogida .cabecera__emblema,
.cabecera--recogida .cabecera__nombre strong {
  animation-name: none;
}

.cabecera--recogida .cabecera__fila { padding-block: 0.7rem; }
.cabecera--recogida .cabecera__emblema { width: 48px; height: 48px; }
.cabecera--recogida .cabecera__nombre strong { font-size: 1.7rem; }

/* ── Escena 1: el dueño delante de la palabra ─────────────────────────── */

.escenas { position: relative; }

.portada {
  position: relative;
  z-index: 0;
  overflow: clip;
  color: var(--tinta);
  background-color: var(--crema);
  background-image: radial-gradient(ellipse 40% 56% at 50% 44%, var(--luz-de-estudio) 0%, transparent 72%);
}

.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--velo-de-escena-cubierta);
  opacity: 0;
  pointer-events: none;
}

.portada__marco {
  position: relative;
  width: var(--portada-ancho-util);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "palabra"
    "figura"
    "lema"
    "cierre";
  padding-block: clamp(1rem, 2.2vw, 2rem) clamp(2.5rem, 7vw, 3.5rem);
}

.portada__palabra {
  grid-area: palabra;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--indigo);
}

.portada__palabra-texto {
  fill: currentColor;
  font-family: var(--tipo-titulos);
  font-weight: 200;
  font-size: 322px;
  letter-spacing: 0;
}

/*
 * En una columna la figura sube sobre la palabra la mitad de su alto. El
 * `viewBox` de la palabra es 1000 × 250, así que su alto es la cuarta parte
 * del ancho del marco, y un margen en porcentaje se mide contra ese mismo
 * ancho: -12,5 % es media palabra, mida lo que mida la pantalla.
 */
.portada__figura {
  grid-area: figura;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(82%, 26rem);
  margin-top: var(--portada-figura-sobre-la-palabra);
  margin-bottom: -18%;
  pointer-events: none;
}

.portada__recorte {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, var(--tinta) var(--portada-fundido-desde), transparent var(--portada-fundido-hasta));
  mask-image: linear-gradient(to bottom, var(--tinta) var(--portada-fundido-desde), transparent var(--portada-fundido-hasta));
}

.portada__lema,
.portada__cierre {
  position: relative;
  z-index: 2;
}

.portada__lugar {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.portada h1 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.7rem, 3.4vw + 1rem, 3.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

/*
 * «Vinyo» del titular va en dorado, como el logotipo de la cabecera, pero un
 * tono más tostado: el dorado de marca sobre el crema mide 1,94:1 y la cursiva,
 * de trazo fino, es lo peor que se puede escribir con un color que no contrasta.
 */
.portada h1 em {
  font-family: var(--tipo-marca);
  font-style: normal;
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: 0;
  color: var(--dorado-sobre-crema);
}

.portada__cierre { grid-area: cierre; margin-top: 1.5rem; }
.portada__lema { grid-area: lema; margin-top: 1.75rem; }

.portada .portada__acciones {
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

.portada__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.portada__enlace:hover { text-decoration-thickness: 2px; }

@media (min-width: 700px) {
  .portada__marco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "palabra palabra"
      "figura figura"
      "lema cierre";
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }

  .portada__figura {
    width: min(56%, 30rem);
    margin-bottom: -12%;
  }

  .portada__cierre { margin-top: 1.75rem; }
}

/*
 * Tres columnas: el titular a la izquierda, la persona en medio y el texto con
 * la acción a la derecha, como en la referencia. La figura ocupa las cuatro
 * filas de su columna y se apoya abajo; su altura sale de la de la escena, así
 * que la cabeza siempre pisa la palabra aunque la ventana sea baja.
 */
@media (min-width: 1200px) {
  .portada { min-height: var(--portada-alto); }

  .portada__marco {
    min-height: var(--portada-alto);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: none;
    column-gap: clamp(1.5rem, 2.5vw, 3rem);
    padding-block-end: 0;
  }

  /*
   * En una ventana ancha y baja (un portátil con la barra del navegador) la
   * palabra de lado a lado mediría casi la mitad de la escena y empujaría el
   * titular y el botón fuera de la primera pantalla. Ahí la palabra deja de
   * crecer al 46 % del alto y se queda centrada: pierde los bordes, pero la
   * acción de la página se sigue viendo sin bajar.
   */
  .portada__palabra {
    grid-area: 1 / 1 / 2 / -1;
    max-height: calc(var(--portada-alto) * var(--portada-palabra-alto-maximo));
  }

  .portada__figura {
    grid-area: 1 / 2 / 5 / 3;
    align-self: end;
    width: auto;
    margin: 0;
  }

  .portada__recorte {
    width: auto;
    height: calc(var(--portada-alto) * var(--portada-figura-alto));
  }

  .portada__lema,
  .portada__cierre {
    align-self: end;
    margin-top: 0;
    padding-block-end: max(clamp(2rem, 5vh, 3.25rem), var(--portada-aire-flotantes));
  }

  .portada__lema { grid-area: 4 / 1 / 5 / 2; }

  .portada__cierre {
    grid-area: 4 / 3 / 5 / 4;
    justify-self: end;
  }

  .portada h1 { font-size: clamp(2.7rem, 2vw + 1rem, 3.4rem); max-width: 18ch; }
}

/* ── La escena 2 sube por encima de la 1 ──────────────────────────────── */

@media (min-width: 1200px) and (min-height: 640px) {
  .portada {
    position: sticky;
    top: var(--portada-cabecera-alto);
    height: var(--portada-alto);
  }
}

@supports (animation-timeline: view()) and (timeline-scope: --portada-cubierta) {
  @media (min-width: 1200px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
    .escenas { timeline-scope: --portada-cubierta; }

    .escena-hija {
      view-timeline-name: --portada-cubierta;
      view-timeline-axis: block;
    }

    .portada__marco,
    .portada::after {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: auto;
      animation-timeline: --portada-cubierta;
      animation-range: entry 0% entry 100%;
    }

    .portada__marco { animation-name: portada-se-aleja; }
    .portada::after { animation-name: portada-se-oscurece; }
  }
}

@keyframes portada-se-aleja {
  to { scale: var(--portada-alejamiento-escala); }
}

@keyframes portada-se-oscurece {
  to { opacity: var(--portada-alejamiento-velo); }
}

/* ── Escena 2: la hija, hecha de luz ──────────────────────────────────── */

/*
 * La aurora son tres manchas quietas en el fondo y dos que derivan despacio
 * detrás de todo. Las quietas van en `background-image` y el índigo oscuro en
 * `background-color` por separado: si un navegador no entiende `color-mix()`,
 * pierde las manchas pero conserva el fondo, y el texto claro sigue teniendo
 * contraste. El punto más claro de la aurora es el índigo claro, y el crema
 * del texto mide sobre él más de 9:1.
 */
.escena-hija {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  color: var(--texto-sobre-aurora);
  background-color: var(--aurora-fondo);
  background-image:
    radial-gradient(ellipse 46% 58% at 50% 62%, var(--aurora-luz) 0%, transparent 72%),
    radial-gradient(ellipse 42% 40% at 10% 12%, var(--aurora-luz-tenue) 0%, transparent 70%),
    radial-gradient(ellipse 38% 44% at 92% 88%, var(--aurora-velo-magenta) 0%, transparent 72%);
}

.escena-hija__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.escena-hija__aurora::before,
.escena-hija__aurora::after {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  animation-duration: var(--escena-hija-deriva-ciclo);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.escena-hija__aurora::before {
  left: 42%;
  top: -38%;
  background: radial-gradient(closest-side, var(--aurora-velo-magenta), transparent);
  animation-name: aurora-deriva-alta;
}

.escena-hija__aurora::after {
  left: -30%;
  top: 40%;
  background: radial-gradient(closest-side, var(--aurora-velo-dorado), transparent);
  animation-name: aurora-deriva-baja;
}

@keyframes aurora-deriva-alta {
  to { translate: -12vmax 10vmax; }
}

@keyframes aurora-deriva-baja {
  to { translate: 14vmax -8vmax; }
}

.escena-hija__marco {
  width: var(--portada-ancho-util);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /*
   * En una columna las opiniones van antes que la nota. La figura se dibuja
   * detrás del titular y baja hasta media pantalla: las tarjetas la aguantan
   * porque llevan velo, pero la nota y los seguidores son texto suelto y encima
   * de los puntos no se leen. Puestos al pie caen donde la figura ya se acabó.
   */
  grid-template-areas:
    "titular"
    "malla"
    "opiniones"
    "aval";
  padding-block: var(--escena-hija-margen-superior) clamp(3rem, 8vw, 4rem);
}

.escena-hija__titular {
  grid-area: titular;
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(2.7rem, 7.6vw, 8rem);
  font-weight: 200;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--texto-sobre-aurora);
}

.escena-hija__linea { display: block; }
.escena-hija__linea--desplazada { padding-left: 12%; }

.escena-hija__malla {
  grid-area: malla;
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(118vw, 36rem);
  margin-top: -1.5rem;
}

.escena-hija__lienzo {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * La escena 2 no presume, enseña. A la izquierda la nota de Google con el
 * enlace a la ficha y la cuenta de seguidores; a la derecha las opiniones, que
 * entran de una en una mientras se baja. Las cuatro ocupan su sitio desde el
 * principio aunque estén invisibles: si aparecieran empujando, la columna
 * saltaría en cada paso del scroll y el texto ya leído cambiaría de altura.
 */
.escena-hija__aval,
.escena-hija__opiniones {
  position: relative;
  z-index: 2;
}

/*
 * `align-content: start` no es decorativo: la fila que ocupa el aval es más
 * alta que sus tres líneas, y con el reparto por defecto las filas automáticas
 * se estiraban hasta llenarla, dejando el enlace flotando a media altura y la
 * cuenta de seguidores pegada abajo.
 */
.escena-hija__aval {
  grid-area: aval;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

/*
 * La nota es el dato más duro de la escena, así que se lee como un dato y no
 * como una frase: las estrellas arriba, el número en grande y las opiniones
 * debajo. Las estrellas van dibujadas y no escritas porque la nota es 4,3 y
 * pide media estrella: el glifo de media estrella no está en casi ninguna
 * tipografía y con cinco caracteres ★ no hay forma de partir el quinto. Aquí el
 * quinto se dibuja dos veces, uno apagado entero y otro encendido recortado por
 * la mitad, como lo enseña la propia ficha de Google.
 */
.escena-hija__nota {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  margin: 0;
}

.escena-hija__marcas {
  display: block;
  width: clamp(7.5rem, 10.5vw, 10.5rem);
  height: auto;
  color: var(--dorado);
}

.escena-hija__puntuacion {
  font-size: clamp(3.8rem, 6.4vw, 6.2rem);
  font-weight: 200;
  line-height: 0.86;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.escena-hija__base {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--texto-tenue-sobre-aurora);
}

.escena-hija__estrellas {
  color: var(--dorado);
  letter-spacing: 0.12em;
}

.escena-hija__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-sobre-aurora);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/*
 * Los seguidores no llevan enlace: los botones a las dos redes ya están en el
 * pie y la escena los perdió a propósito por repetidos. Aquí son un dato, no
 * una puerta. El logotipo nombra la red, así que la línea sólo dice la cifra.
 */
.escena-hija__redes { display: grid; gap: 0.5rem; }

.escena-hija__redes-titulo {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue-sobre-aurora);
}

.escena-hija__redes-lista {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.escena-hija__red {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--texto-tenue-sobre-aurora);
}

.escena-hija__red svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--texto-sobre-aurora);
}

.escena-hija__red b {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto-sobre-aurora);
  font-variant-numeric: tabular-nums;
}

.escena-hija__opiniones {
  grid-area: opiniones;
  display: grid;
  align-content: end;
  margin-top: 2rem;
  /*
   * El cuerpo de la cita se escala con una sola variable (`--escala-cita`) y
   * todo lo de dentro va en `em`: así `portada-3d.js` puede encoger la reseña
   * entera, letra, comilla y huecos, hasta que el par quepa en la ventana.
   */
  font-size: calc(var(--cita-cuerpo, 1rem) * var(--escala-cita, 1));
}


/*
 * La reseña se lee como una cita de revista, no como una caja: un filete fino
 * arriba, la comilla de la marca (la misma letra manuscrita del nombre) en
 * dorado, el texto en crema a cuerpo de lectura y debajo quién lo dice, con las
 * estrellas. Sin fondo ni borde propios: en tres columnas la cita cae en la
 * columna libre de la derecha y se apoya directamente sobre la aurora. Debajo
 * de las tres columnas se monta sobre la figura y recupera el velo (más abajo).
 */
.escena-hija__opinion {
  display: grid;
  grid-template-areas:
    "marca"
    "texto"
    "autor";
  row-gap: 0.6em;
  margin: 0 0 2em;
  padding: 0.9em 0 0;
  border: 0;
  border-top: 1px solid var(--filete-sobre-aurora);
}

.escena-hija__opinion::before {
  content: "“";
  grid-area: marca;
  height: 0.47em; /* 1,7 del cuerpo de la cita: la em es la de la propia comilla (3,6) */
  font-family: var(--tipo-titulos);
  font-size: 3.6em;
  font-weight: 800;
  line-height: 1;
  color: var(--dorado);
}

.escena-hija__opinion p {
  grid-area: texto;
  margin: 0;
  font-size: 1em;
  line-height: 1.55;
  color: var(--texto-sobre-aurora);
  text-wrap: pretty;
}

.escena-hija__opinion footer {
  grid-area: autor;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.7em;
  padding-top: 0.15em;
}

.escena-hija__opinion footer b {
  color: var(--texto-sobre-aurora);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.2;
}

.escena-hija__meta {
  font-size: 0.8em;
  line-height: 1.2;
  color: var(--texto-tenue-sobre-aurora);
}

@media (min-width: 700px) {
  .escena-hija__marco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "titular titular"
      "malla malla"
      "aval opiniones";
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  /*
   * Desde dos columnas el titular deja de cruzar la figura. Con el cuerpo de
   * una columna (7,6vw) y la sangría del 12 %, a 900 px «reseñas» llegaba hasta
   * los 368 y la figura empezaba en los 330.
   */
  .escena-hija__titular { font-size: clamp(2.4rem, 5.6vw, 5.2rem); }
  .escena-hija__linea--desplazada { padding-left: 6%; }

  .escena-hija__malla { height: min(86vw, 44rem); }
  .escena-hija__opiniones { margin-top: 1.25rem; }
}

/*
 * En escritorio la malla deja el flujo y se planta en medio, apoyada abajo, y
 * el texto se reparte a su alrededor: el titular arriba cruzándole la cabeza,
 * la nota de Google a la izquierda y las opiniones a la derecha. El índice en
 * píldora se fue con la escena vieja: repetía los cuatro enlaces de la cabecera
 * y volvía a pedir cita, que es lo que ya pide la escena 1.
 */
@media (min-width: 1200px) {
  .escena-hija__marco {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "titular titular titular"
      "aval . opiniones";
    padding-block: var(--escena-hija-margen-superior) max(clamp(2rem, 5vh, 3rem), var(--portada-aire-flotantes));
  }

  /*
   * En tres columnas el titular se queda a la izquierda de la figura en vez de
   * cruzarla. Medido a 1440: la figura empieza en 491 y el marco en 43, o sea
   * 424 px libres, y «reseñas» a 7,6vw medía 384: no cabía ni sin sangría, y
   * con la del 28 % se plantaba encima del pecho. A 5,6vw mide 283 y la sangría
   * cabe entera. El tope del 28 % del marco lo sujeta en pantallas anchas.
   */
  .escena-hija__titular {
    max-width: 28%;
    font-size: clamp(2.6rem, 5.6vw, 6.4rem);
  }

  .escena-hija__linea--desplazada { padding-left: 18%; }

  .escena-hija__malla {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(46vw, 48rem);
    height: calc(100% - var(--portada-cabecera-alto) - 2rem);
    margin: 0;
    translate: -50% 0;
  }

  .escena-hija__aval {
    align-content: center;
    margin-top: 0;
  }


  .escena-hija__opiniones {
    align-self: end;
    justify-self: end;
    width: min(100%, 25rem);
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .escena-hija__aurora::before,
  .escena-hija__aurora::after {
    animation-name: none;
  }
}

.escena-hija__malla--sin-lienzo .escena-hija__lienzo { visibility: hidden; }

/* ── Modo modelo: la pista, el escenario fijado y las capas ───────────── */

/*
 * Todo lo que sigue solo existe bajo `html.con-modelo`, que cuelga
 * `js/portada-3d.js` cuando puede encender el modelo 3D. Sin esa clase (movimiento
 * reducido, sin WebGL 2, ahorro de datos, sin JavaScript o si el modelo falla),
 * la portada es la de las dos escenas de arriba, con el recorte y la malla 2D.
 *
 * `.escenas` es la pista: tan alta como `--pista-pantallas` ventanas. Dentro,
 * `.escenario` se queda fijado bajo la cabecera y todo lo demás son capas
 * apiladas en él, de atrás hacia delante:
 *
 * 1. el crema y la palabra VINYO (`--capa-nombre`);
 * 2. la aurora, recortada por arriba en `--linea-corte`: sube con la misma
 *    línea que parte la figura en piel y red, como en la referencia;
 * 3. el lienzo del modelo (y el recorte, mientras el modelo carga);
 * 4. los textos: los de la escena 1 (`--capa-copia`), los de la 2
 *    (`--capa-hija`) y el cierre bajo la palabra (`--capa-cierre`).
 *
 * El guion escribe esas variables con el scroll. Para que las capas se
 * intercalen con el lienzo, `.portada` y `.escena-hija` dejan de crear contexto
 * de apilamiento: sin `isolation`, sin `z-index` y sin la escala de la cortina.
 *
 * El pie de la escena 1 se reserva por ALTURA: el escenario mide exactamente
 * la ventana útil bajo la cabecera y el bloque de acciones se apoya a
 * `--portada-aire-flotantes` del borde de abajo, que es donde viven los botones
 * flotantes, midan lo que midan de ancho la ventana y el texto.
 */

.escenario__lienzo,
.escenario__fotos,
.escenario__cierre { display: none; }

html.con-modelo {
  --capa-nombre: 1;
  --capa-copia: 1;
  --capa-marea: 0;
  --capa-hija: 0;
  --capa-cierre: 0;
  --linea-corte: 100%;
  --modelo-transicion: 0.9s;
}

html.con-modelo .escenas {
  height: calc(var(--portada-alto) + (var(--pista-pantallas) - 1) * 100svh);
}

html.con-modelo .escenario {
  position: sticky;
  top: var(--portada-cabecera-alto);
  height: var(--portada-alto);
  overflow: clip;
  isolation: isolate;
  background-color: var(--crema);
  background-image: radial-gradient(ellipse 40% 56% at 50% 44%, var(--luz-de-estudio) 0%, transparent 72%);
}

html.con-modelo .portada,
html.con-modelo .escena-hija {
  position: absolute;
  inset: 0;
  z-index: auto;
  isolation: auto;
  min-height: 0;
  height: auto;
  overflow: visible;
  background: none;
}

html.con-modelo .portada::after { display: none; }

html.con-modelo .portada__marco,
html.con-modelo .portada::after {
  animation-name: none;
}

html.con-modelo .portada__marco {
  height: 100%;
  min-height: 0;
  padding-block-end: 0;
}

html.con-modelo .portada__palabra {
  position: relative;
  z-index: 1;
  opacity: var(--capa-nombre);
}

html.con-modelo .escena-hija__aurora {
  z-index: 2;
  clip-path: inset(var(--linea-corte) 0 0 0);
  background-color: var(--aurora-fondo);
  background-image:
    radial-gradient(ellipse 46% 58% at 50% 62%, var(--aurora-luz) 0%, transparent 72%),
    radial-gradient(ellipse 42% 40% at 10% 12%, var(--aurora-luz-tenue) 0%, transparent 72%),
    radial-gradient(ellipse 38% 44% at 92% 88%, var(--aurora-velo-magenta) 0%, transparent 72%);
}

html.con-modelo .escenario__lienzo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--modelo-transicion) ease;
}

html.con-modelo.modelo-listo .escenario__lienzo { opacity: 1; }

html.con-modelo .portada__figura {
  z-index: 3;
  transition: opacity var(--modelo-transicion) ease;
  opacity: var(--capa-copia);
}

html.con-modelo.modelo-listo .portada__figura {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--modelo-transicion) ease, visibility 0s linear var(--modelo-transicion);
}

html.con-modelo .portada__lema,
html.con-modelo .portada__cierre {
  z-index: 4;
  opacity: var(--capa-copia);
}

html.con-modelo .portada__lema,
html.con-modelo .portada__cierre {
  padding-block-end: max(clamp(1.25rem, 3vh, 2.5rem), var(--portada-aire-flotantes));
}

/*
 * En un teléfono corto la escena 1 se quedaba sin figura. Medido en 360x740:
 * de los 668 px del escenario, el titular se llevaba 217 y el cierre 176, y a
 * la figura le quedaban 260 de alto. Con `contain` la foto cabe a lo alto y
 * sale 159 px de ancha en una pantalla de 360: un sello.
 *
 * Aquí se hacen dos cosas. La foto pasa a `cover`, que es lo que ya hacía el
 * modelo 3D —se encuadra en la caja del recorte, no en la foto de dentro—, así
 * que las dos versiones de la figura miden por fin lo mismo y el relevo entre
 * una y otra deja de dar un salto de tamaño. Y el titular, el cierre y el aire
 * reservado para los botones flotantes ceden alto, que es lo único de lo que
 * sale el espacio: la figura crece con lo que sueltan los demás.
 */
@media (max-width: 699px) {
  html.con-modelo .portada__lema { padding-block-end: 0; margin-top: 1rem; }

  html.con-modelo .portada__recorte {
    object-fit: cover;
    object-position: 50% 6%;
  }

  html.con-modelo .portada h1 { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
  html.con-modelo .portada .portada__acciones { margin-top: 1rem; }

  /*
   * El aire de abajo baja de los 82 px que reservan los botones flotantes a
   * 3,25rem: el asistente vive en la esquina derecha y las acciones de la
   * portada en la izquierda, así que no se pisan.
   */
  html.con-modelo .portada__cierre {
    margin-top: 1rem;
    padding-block-end: max(clamp(0.75rem, 2vh, 1.25rem), 3.25rem);
  }
}

html.con-modelo .escena-hija__marco {
  position: relative;
  z-index: 4;
  height: 100%;
  min-height: 0;
  opacity: var(--capa-hija);
  padding-block: clamp(1.25rem, 3.5vh, 2.75rem) max(clamp(1.25rem, 3vh, 2.5rem), var(--portada-aire-flotantes));
}

html.con-modelo .escena-hija__malla { display: none; }

/*
 * El texto suelto va sobre la aurora y sobre los puntos del modelo; la sombra
 * lo despega de los dos. Las opiniones no la necesitan: llevan su propio velo
 * oscuro detrás.
 */
html.con-modelo .escena-hija__nota,
html.con-modelo .escena-hija__enlace,
html.con-modelo .escena-hija__redes {
  text-shadow: 0 1px 14px var(--aurora-fondo);
}

/*
 * Las opiniones aparecen UNA A UNA con el scroll y van llenando la columna hacia
 * abajo: la primera arriba, la siguiente debajo con su hueco, y así. Todas
 * ocupan su sitio desde el principio (invisibles hasta que les toca), de modo
 * que nada salta de sitio al aparecer la siguiente. Cuando la columna se llena,
 * `portada-3d.js` sube el carril lo justo para que la recién llegada quepa y las
 * más antiguas se van por arriba, con el desvanecido.
 *
 * La caja es la ventana: recorta y desvanece por arriba y por abajo. Las
 * tarjetas empiezan en `opacity: 0` para que no haya un destello con todas
 * puestas antes de que el guion escriba nada.
 */
html.con-modelo .escena-hija__opiniones {
  position: relative;
  display: block;
  height: var(--carrusel-alto);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}

html.con-modelo .escena-hija__carril {
  position: absolute;
  inset: 0 0 auto;
  transition: transform 0.35s ease-out;
}

html.con-modelo .escena-hija__opiniones[data-con-scroll] .escena-hija__opinion { opacity: 0; }

/*
 * Con movimiento reducido no hay aparición ni carril móvil: la ventana es una
 * lista que se desplaza a mano, con teclado o rueda, y no se desvanece para no
 * esconder la primera línea.
 */
html.con-modelo .escena-hija__opiniones:not([data-con-scroll]) {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-mask-image: none;
  mask-image: none;
}

html.con-modelo .escena-hija__opiniones:not([data-con-scroll]) .escena-hija__carril {
  position: static;
  transition: none;
}

/* El guion pide la versión compacta cuando la reseña no cabe con la comilla. */
html.con-modelo .escena-hija__opiniones[data-compacta] .escena-hija__opinion::before { display: none; }

/*
 * Por debajo de las tres columnas la figura no tiene columna propia y las
 * citas se le montan encima. Ahí cada una recupera un velo que tape de verdad:
 * con el de la aurora (62 %) las líneas blancas de los puntos se leían a través
 * del texto.
 */
@media (max-width: 1199px) {
  html.con-modelo .escena-hija__opinion {
    padding: 0.9em 1.1em 1em;
    border: 1px solid var(--filete-sobre-aurora);
    border-radius: var(--radio);
    background: var(--velo-de-la-opinion-sobre-figura);
  }
}

/*
 * En tres columnas la ventana ocupa toda la columna derecha, de la cabecera al
 * pie: así las reseñas bajan por el lado entero y no desde la mitad.
 */
@media (min-width: 1200px) {
  html.con-modelo .escena-hija__opiniones {
    grid-area: 1 / 3 / 3 / 4;
    align-self: stretch;
    height: auto;
  }
}

/*
 * Las fotos de la clínica rodean la palabra final como polaroids sueltas. La
 * capa va entre la aurora (2) y el lienzo (3): si una esquina rozara un punto
 * de la palabra, la palabra queda delante. Posición, tamaño y entrada los
 * escribe `portada-3d.js` a partir de la caja real de la palabra; aquí sólo vive
 * el aspecto de la foto.
 *
 * El marco es papel crema con el borde de abajo más ancho, como una instantánea,
 * pero sin pie: nada de texto encima de las fotos. Van apagadas, como en el
 * tablero de Wanderlust (allí al 45 %, aquí al 62 % porque las fotos son de
 * interior y más oscuras), para que mande la palabra; al pasar el puntero se
 * levantan y recuperan la luz.
 */
html.con-modelo .escenario__fotos {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

html.con-modelo .foto {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: auto;
  will-change: transform;
}

html.con-modelo .foto[hidden] { display: none; }

html.con-modelo .foto__marco {
  width: 100%;
  height: 100%;
  padding: 6% 6% 18%;
  border-radius: 2px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--blanco) 55%, var(--crema)) 0%, var(--crema) 55%, color-mix(in oklab, var(--indigo) 8%, var(--crema)) 100%);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--indigo-oscuro) 40%, transparent),
    0 16px 36px color-mix(in oklab, var(--indigo-oscuro) 55%, transparent);
  filter: brightness(0.62) saturate(0.9);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}

html.con-modelo .foto__marco img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspecto, 1);
  object-fit: cover;
  background: color-mix(in oklab, var(--indigo) 18%, var(--crema));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--indigo-oscuro) 12%, transparent);
}

/*
 * Con el puntero encima la foto pasa al primer plano: por encima de todo el
 * montón, más grande y con toda su luz. La clase la pone y la quita
 * `portada-3d.js` al entrar y salir el puntero (en táctil, con un toque).
 */
html.con-modelo .foto.foto--al-frente { z-index: 40 !important; }
html.con-modelo .foto.foto--al-frente .foto__marco {
  transform: translateY(-10px) scale(1.16);
  filter: none;
  box-shadow:
    0 2px 4px color-mix(in oklab, var(--indigo-oscuro) 45%, transparent),
    0 28px 60px color-mix(in oklab, var(--indigo-oscuro) 70%, transparent);
}

html.con-modelo .escenario__cierre {
  display: flex;
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  justify-content: center;
  padding-inline: var(--portada-margen);
  padding-block-end: max(clamp(1.5rem, 8vh, 4.5rem), var(--portada-aire-flotantes));
  text-align: center;
  opacity: var(--capa-cierre);
  color: var(--texto-tenue-sobre-aurora);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.con-modelo .escenario__cierre p { margin: 0; }

html.con-modelo [data-capa-oculta] { pointer-events: none; }

/*
 * En una o dos columnas la figura no tiene fila propia: ocupa desde la palabra
 * hasta el titular y el modelo se dibuja detrás de los dos, que quedan encima.
 * Así la escena entera cabe en la ventana del móvil sin encoger el modelo a un
 * sello.
 */
@media (max-width: 1199px) {
  html.con-modelo .portada__marco {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }

  html.con-modelo .portada__figura {
    grid-area: 1 / 1 / 3 / -1;
    align-self: stretch;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  /*
   * La caja del recorte ocupa `--portada-figura-en-su-franja` de la franja y se
   * apoya abajo, junto al titular: al alejarse, la figura encoge y la cabeza baja,
   * como quien da un paso atrás, sin dejar hueco encima del titular.
   */
  html.con-modelo .portada__recorte {
    width: 100%;
    height: var(--portada-figura-en-su-franja);
    min-height: 0;
    object-fit: contain;
    object-position: 50% 0;
  }

  html.con-modelo .portada__lugar { display: none; }

  html.con-modelo .escena-hija__marco {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
}

@media (min-width: 700px) and (max-width: 1199px) {
  html.con-modelo .portada__marco { grid-template-rows: auto minmax(0, 1fr) auto; }
  /* Media columna de 334 px: la reseña de Vanessa son once líneas con su firma. */
  html.con-modelo .escena-hija__opiniones { --carrusel-alto: clamp(17rem, 42svh, 27rem); }
  html.con-modelo .escena-hija__marco { grid-template-rows: auto minmax(0, 1fr) auto; }
}

@media (max-width: 699px) {
  html.con-modelo .portada__cierre { margin-top: 0.75rem; }
  /*
   * En el teléfono la nota y los seguidores van hombro con hombro, y la letra
   * de las reseñas baja un punto. Los dos ahorros son para lo mismo: la figura
   * se encuadra en la banda que va del titular a la nota, y si esa banda no
   * llega al cuarto del alto del escenario el guion la descarta y deja la
   * figura del tamaño de la escena 1, o sea encima de todo el texto. Con la
   * nota en una columna medía 165 px de los 193 que hacían falta.
   */
  html.con-modelo .escena-hija__aval {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    margin-top: 0;
    column-gap: 1.6rem;
    row-gap: 0.35rem;
  }

  html.con-modelo .escena-hija__base { white-space: nowrap; }
  html.con-modelo .escena-hija__nota { grid-area: 1 / 1; }
  html.con-modelo .escena-hija__redes { grid-area: 1 / 2; }
  html.con-modelo .escena-hija__enlace { grid-area: 2 / 1 / 3 / -1; }

  html.con-modelo .escena-hija__aval { padding-top: 0.35rem; }
  html.con-modelo .escena-hija__opiniones { margin-top: 0.75rem; }
  html.con-modelo .escena-hija__opiniones {
    --carrusel-alto: clamp(14rem, 32svh, 18rem);
    --cita-cuerpo: 0.875rem;
  }
  /*
   * En el teléfono la ventana no pasa de ~270 px y la reseña de Vanessa ocupa
   * nueve líneas: sin la comilla grande y con la letra un punto más pequeña
   * cabe entera con su firma, que es lo que no debe cortar el desvanecido.
   */
  html.con-modelo .escena-hija__opinion {
    row-gap: 0.4em;
    padding: 0.7em 0.9em 0.8em;
  }
  html.con-modelo .escena-hija__opinion::before { display: none; }
  html.con-modelo .escena-hija__opinion p { line-height: 1.45; }
  html.con-modelo .escenario__cierre { font-size: 0.78rem; letter-spacing: 0.1em; }
}

/*
 * Una ventana ancha y baja (un portátil con la barra del navegador y la de
 * tareas) deja el escenario por debajo de 600 px. Ahí la palabra cede alto para
 * que el titular y la acción no bajen hasta los botones flotantes.
 */
@media (min-width: 1200px) and (max-height: 700px) {
  html.con-modelo { --portada-palabra-alto-maximo: 0.38; }
}