/* ============================================================================
   VARIANTE 5 · TODA EN VIDEO — la Mezcla (v4) sin pantallas de papel.
   Se conserva de la Mezcla: la letra (Instrument Serif, titular al máximo de
   su caja, renglones que suben desde su máscara), el halo local, la barra del
   pulgar que crece, la hoja de esquinas redondeadas donde dos tomas no se
   tocan. Cambia: el fondo es siempre una toma, y las demostraciones (la
   reseña, los chats) se pintan en la pantalla del celular de la toma.
   El modo estático (sin JS / ?rm=1) lee de arriba abajo: la foto final de cada
   escena, su línea y su botón.
   ========================================================================== */

:root {
  --hoja-curva: cubic-bezier(0.32, 0.72, 0, 1);
  /* Sin selector del bake-off abajo: la reserva es solo el área segura. */
  --reserva-picker: env(safe-area-inset-bottom, 0px);
  --alto-barra: 124px;   /* la corrige el JS con la barra real */
}

/* --- la letra (de la Mezcla) -------------------------------------------------- */

.titular {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 10vw, 60px); /* respaldo estático; el JS lo maximiza */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--crema);
  max-width: 86%;
  white-space: pre-line;   /* el \n de textos.js es un salto que puso Santiago */
  text-shadow: 0 1px 26px rgba(15, 29, 61, 0.5);
}
.etiqueta {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.25;
  color: var(--crema);
  text-shadow: 0 1px 16px rgba(15, 29, 61, 0.6);
}
/* El subtítulo del cierre: la letra de la etiqueta, sin cursiva, debajo del titular. */
.subtitulo-cierre {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: normal;
  font-size: 19px;
  line-height: 1.25;
  margin: 14px 0 0;
  color: var(--crema);
  text-shadow: 0 1px 16px rgba(15, 29, 61, 0.6);
}
.tl { display: block; overflow: hidden; }
.tli { display: block; }

/* Halo local detrás del bloque de texto. Nunca un velo de pantalla completa. */
.halo { position: relative; isolation: isolate; }
.halo::before {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  inset: -26px -30px;
  background: radial-gradient(ellipse 78% 72% at 30% 42%,
    rgba(15, 29, 61, 0.62), rgba(15, 29, 61, 0) 72%);
}

/* --- capas de la cámara -------------------------------------------------------
   La cámara es su propio contexto de apilado: sus capas (la foto, el lienzo,
   el bucle, la pantalla) se ordenan DENTRO de ella y nunca le pasan por
   encima al texto de la escena. Sin esto el bucle del hero tapaba el titular. */
.camara { isolation: isolate; z-index: 0; }
.plano--poster, .hero-poster { z-index: 1; }
.plano--cuadros { z-index: 2; }
.plano--cuadros[data-tramo="bucle"] { z-index: 3; }
.pantalla { z-index: 4; }
.con-movimiento .plano--cuadros { opacity: 0; }
/* Las escenas de abajo empiezan apagadas, como las deja el gsap.set de variante.js: con
   4G, entre que motor.js ponía el modo con movimiento y variante.js las apagaba, la escena
   de placas (su foto borrosa y su titular) se veía unos segundos encima de la portada
   (28-sep). Cada pintor les da su opacidad en línea. */
.con-movimiento .parada .escenario { opacity: 0; }
/* En el modo con movimiento la foto de respaldo se ve (el base la apaga
   porque en la Mezcla había dos fijas). */
.con-movimiento .plano--poster { opacity: 1; }
.escena-dim {
  position: absolute; inset: 0; z-index: 6;
  background: var(--marino);
  opacity: 0; pointer-events: none;
}

/* --- hero ------------------------------------------------------------------------ */
/* Abajo a la derecha va la señal de scroll: el selector termina arriba de ella para que
   ninguna de sus filas quede debajo. Desde que se pinta, no solo con movimiento: con 4G
   el selector salía 56 px más abajo y brincaba al correr motor.js (28-sep); sin
   movimiento la señal también se queda al pie de la portada. */
.hero-contenido { isolation: isolate; z-index: 2; padding-bottom: calc(66px + var(--reserva-picker)); }
.hero-texto .etiqueta { margin-bottom: 8px; }

.selector { margin-top: auto; max-width: 480px; }
.selector::before { inset: -16px -22px; }
.selector-pregunta {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--crema);
  margin-bottom: 6px;
  text-shadow: 0 1px 16px rgba(15, 29, 61, 0.6);
}
.selector-opciones a {
  display: flex; align-items: center;
  min-height: 44px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px; line-height: 1.1;
  color: var(--crema); text-decoration: none;
  border-top: 1px solid rgba(255, 247, 237, 0.3);
  text-shadow: 0 1px 16px rgba(15, 29, 61, 0.6);
  transform-origin: 0 50%;
  transition: padding-left 180ms var(--entra), color 180ms var(--entra), transform 180ms var(--entra);
}
.selector-opciones a:last-child { border-bottom: 1px solid rgba(255, 247, 237, 0.3); }
/* La flecha dice adónde va cada fila: ↗ sale a su funnel, ↓ (Conócenos) baja a la calle. */
.selector-flecha { margin-left: auto; padding-left: 12px; font-size: 0.85em; display: inline-flex; }
/* Todas las flechas de la página son el mismo dibujo de trazo fino, en el color del texto
   (Santiago, 22-oct: «quita esos emojis… y que sea uniforme con todos»): un carácter ↗
   el iPhone lo pintaba como emoji en un cuadrito azul, y la ↓ salía en otra letra. */
.flecha-trazo {
  display: inline-block; flex: none;
  width: 0.78em; height: 0.78em; vertical-align: -0.06em;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.boton .flecha-trazo, .leeme-boton .flecha-trazo { stroke-width: 1.7; }
.pie-logo .flecha-trazo { width: 0.62em; height: 0.62em; stroke-width: 2.6; }
.selector-opciones a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .selector-opciones a:hover { padding-left: 10px; color: var(--ambar); }
}
@media (max-height: 800px) {
  .selector-opciones a { min-height: 42px; font-size: 20px; }
}
.senal-scroll {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  text-shadow: 0 1px 16px rgba(15, 29, 61, 0.7);
}
/* La señal de scroll (D-268): una pastilla en la esquina de abajo a la derecha,
   arriba de la barra del botón. secciones.js la enciende en cada parada con la
   página quieta y la apaga en cuanto se mueve. Sin movimiento, se queda al pie de
   la portada. */
.senal-scroll {
  position: absolute; right: 16px; top: calc(100svh - 64px); z-index: 900;
  padding: 0 14px; border-radius: 999px;
  background: rgba(15, 29, 61, 0.62);
}
.con-movimiento .senal-scroll {
  position: fixed; top: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--senal-sube, 0px));
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 260ms var(--entra), transform 260ms var(--entra), bottom 240ms var(--entra);
}
/* --senal-sube la pone secciones.js cuando la esquina cae sobre un titular. */
body.con-boton-fijo .senal-scroll { bottom: calc(var(--alto-barra) + 10px + var(--senal-sube, 0px)); }
.con-movimiento .senal-scroll.encendida { opacity: 1; transform: none; pointer-events: auto; }
/* En la portada, «Baja y mira cómo»; en las paradas de después, «haz 1 scroll».
   La flecha parpadea (Santiago, 26-sep). */
.senal-texto--parada, .senal-scroll.tras-hero .senal-texto--hero { display: none; }
.senal-scroll.tras-hero .senal-texto--parada { display: inline; }
.senal-flecha { display: inline-block; }
.senal-scroll.encendida .senal-flecha { animation: senal-parpadea 1.1s ease-in-out infinite; }
@keyframes senal-parpadea { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

/* --- la línea de cada escena ----------------------------------------------------- */
.linea { display: flex; flex-direction: column; }
.linea-bloque { max-width: 100%; }
.linea-bloque .etiqueta { margin-bottom: 10px; }
.con-movimiento .linea--abajo {
  justify-content: flex-end;
  padding-bottom: calc(var(--alto-barra) + 22px);
}
.con-movimiento .linea--arriba { justify-content: flex-start; }
/* El ancho del bloque estrecho lo fija el JS con la cara de la hostess (no se
   tapa); este es el respaldo. */
.con-movimiento .linea--estrecha .linea-bloque { max-width: 54%; }
.con-movimiento .linea--estrecha .titular { max-width: 100%; }
/* Los titulares de escena llevan los renglones de Santiago enteros: se les da
   casi todo el ancho para que la letra no se achique de más. */
.linea .titular { max-width: 94%; }

/* --- la pantalla del celular -----------------------------------------------------
   Una caja del tamaño de la pantalla EN PÍXELES DEL CUADRO (1080×1920), que el
   JS lleva a las cuatro esquinas medidas con una transformación proyectiva.
   Se MULTIPLICA sobre el cuadro: el blanco de la caja deja pasar el blanco
   real de la pantalla (su brillo, su tono cálido, su degradado) y solo la
   interfaz lo oscurece. Así la pantalla es parte de la foto y no una tarjeta
   pegada; y si la caja se pasa un pelo del borde, cae sobre el marco negro
   del celular, donde multiplicar no cambia nada. */
.pantalla {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  background: #fff;
  mix-blend-mode: multiply;
  overflow: hidden;
  display: none;
  pointer-events: none;
  backface-visibility: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f2430;
}
.con-movimiento .pantalla.lista { display: block; }

/* La reseña: la G de la ficha y las cinco estrellas que se llenan. */
.pantalla--resena { text-align: center; }
.resena-g { display: block; width: 32%; height: auto; margin: 26% auto 0; }
.resena-estrellas { display: flex; justify-content: center; gap: 3.5%; margin-top: 17%; }
.resena-estrellas svg { width: 15%; height: auto; aspect-ratio: 1; fill: #dfdcd6; overflow: visible; }
.estrella-llena { fill: #FBBC04; transform-box: fill-box; transform-origin: center; }
.resena-campo {
  width: 78%; height: 19%; margin: 14% auto 0;
  border: 0.13em solid #dcd8d1; border-radius: 0.6em;
}

/* Los chats. */
.pantalla--chat { display: none; flex-direction: column; }
.con-movimiento .pantalla--chat.lista { display: flex; }
.chat-cabeza {
  flex: none;
  display: flex; align-items: center; gap: 0.5em;
  height: 2.5em; padding: 0 0.75em;
  background: var(--marino); color: var(--crema);
}
.chat-avatar {
  flex: none; width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--turquesa);
  box-shadow: inset 0 0 0 0.22em var(--marino), inset 0 0 0 0.3em var(--crema);
}
.chat-titulo { font-size: 0.95em; font-weight: 600; letter-spacing: 0.01em; }
.chat-cuerpo {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 0.45em;
  padding: 0.7em 0.6em;
  background: #f4efe7;
}
.msj {
  max-width: 84%;
  padding: 0.42em 0.62em;
  border-radius: 0.8em;
  font-size: 0.9em; line-height: 1.26;
}
.msj--comensal {
  align-self: flex-end;
  background: var(--turquesa); color: #fff;
  border-bottom-right-radius: 0.25em;
}
.msj--mesero {
  align-self: flex-start;
  background: #fff; color: var(--marino);
  border-bottom-left-radius: 0.25em;
}
/* En el celular de la hostess el que escribe es el restaurante. */
.msj--restaurante {
  align-self: flex-end;
  background: var(--turquesa); color: #fff;
  border-bottom-right-radius: 0.25em;
}
.msj--cliente {
  align-self: flex-start;
  background: #fff; color: var(--marino);
  border-bottom-left-radius: 0.25em;
}

/* --- la clínica: la llamada la pinta la página (D-242) ---------------------------
   Suena: anillos que salen del teléfono (último cuadro de e4). La llamada: la voz
   sobre el teléfono, los globos que salen de él y la confirmación de WhatsApp como
   notificación (último cuadro de v5b). Los anillos y la voz son parte del cuadro
   (dentro de .respira, van con la cámara); los globos y el aviso son texto. */
.timbre, .voz { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: none; }
.con-movimiento .timbre { display: block; width: 0; height: 0; }
.timbre i {
  position: absolute; left: 0; top: 0;
  width: var(--d, 320px); height: var(--d, 320px);
  margin: calc(var(--d, 320px) / -2) 0 0 calc(var(--d, 320px) / -2);
  border-radius: 50%;
  border: 2px solid rgba(255, 247, 237, 0.9);
  box-shadow: 0 0 22px rgba(255, 226, 180, 0.45), inset 0 0 22px rgba(255, 226, 180, 0.3);
  opacity: 0; transform: scale(0.3);
}
/* Como un teléfono de verdad: una ráfaga de timbrazos y una pausa. */
.timbrando .timbre i { animation: timbrazo 2.2s cubic-bezier(0.2, 0.65, 0.3, 1) infinite; }
.timbrando .timbre i:nth-child(2) { animation-delay: 0.28s; }
.timbrando .timbre i:nth-child(3) { animation-delay: 0.56s; }
@keyframes timbrazo {
  0% { opacity: 0; transform: scale(0.3); }
  8% { opacity: 0.95; }
  55%, 100% { opacity: 0; transform: scale(1.2); }
}
.con-movimiento .voz {
  display: flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 13px 0 11px; border-radius: 15px;
  background: rgba(15, 29, 61, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.voz-punto { width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #25D366; }
.voz i { width: 3px; height: 5px; border-radius: 2px; background: var(--crema); }
.hablando .voz i { animation: voz 0.8s ease-in-out infinite alternate; }
.hablando .voz i:nth-child(3) { animation-delay: -0.35s; }
.hablando .voz i:nth-child(4) { animation-delay: -0.6s; }
.hablando .voz i:nth-child(5) { animation-delay: -0.15s; }
.hablando .voz i:nth-child(6) { animation-delay: -0.5s; }
@keyframes voz { from { height: 4px; } to { height: 17px; } }

.llamada { display: flex; flex-direction: column; gap: 10px; padding: 8px 20px 0; }
.globos { display: flex; flex-direction: column; }
.globo-caja { display: flex; }
.globo {
  max-width: 80%; margin: 0 0 8px; padding: 0.55em 0.8em;
  border-radius: 1.05em;
  font: 500 17px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 10px 26px rgba(15, 29, 61, 0.3);
  text-wrap: pretty;
}
/* El teléfono es de la clínica: su recepcionista va a la derecha, como el dueño
   de un chat; el paciente, a la izquierda. */
.globo--recepcionista { margin-left: auto; background: var(--turquesa); color: #fff; border-bottom-right-radius: 0.3em; }
.globo--paciente { margin-right: auto; background: var(--crema); color: var(--marino); border-bottom-left-radius: 0.3em; }
.aviso {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 247, 237, 0.96); color: var(--marino);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.aviso-icono {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: #25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3C7 3 3 6.6 3 11c0 2.2 1 4.2 2.7 5.6L5 21l4.2-2.2c.9.2 1.8.3 2.8.3 5 0 9-3.6 9-8s-4-8-9-8z'/%3E%3Cpath fill='none' stroke='%2325D366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8.5 11.2l2.3 2.3 4.7-4.7'/%3E%3C/svg%3E") center / 62% no-repeat;
}
/* Renglones parejos: a 360 «pm.» se quedaba solo en el segundo. */
.aviso-texto { margin: 0; font: 600 16px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-wrap: balance; }
/* Con movimiento: los globos salen de arriba de la voz (el JS pone su borde de
   abajo) y el aviso cae bajo el menú, como una notificación. */
.con-movimiento .llamada { position: absolute; inset: 0; height: 100svh; padding: 0; pointer-events: none; }
.con-movimiento .globos { position: absolute; left: 16px; right: 16px; top: 0; transform: translateY(-100%); }
.con-movimiento .aviso {
  position: absolute; left: 14px; right: 14px; max-width: 440px; margin-inline: auto;
  top: calc(var(--alto-menu) + 14px + env(safe-area-inset-top, 0px));
}

/* --- la inmobiliaria: el celular del vendedor (D-246), y las agendas (D-266) -------
   Un chat que corre como uno de verdad: cada fila crece desde abajo (el JS le anima
   la altura) y empuja a las viejas hacia arriba, fuera de la pantalla. Los días se
   marcan con una pastilla al centro y cada globo lleva su hora. Al final le cae al
   vendedor la tarjeta del comprador, completa, encima del chat. */
.pantalla--vendedor .chat-cuerpo,
.pantalla--agenda .chat-cuerpo { gap: 0; justify-content: flex-end; overflow: hidden; }
.chat-fila { display: flex; flex-direction: column; flex: none; overflow: hidden; }
.chat-fila .msj { margin-top: 0.45em; }
.chat-dia {
  align-self: center; margin: 0.7em 0 0.1em; padding: 0.18em 0.75em;
  border-radius: 1em; background: rgba(15, 29, 61, 0.09); color: var(--marino);
  font-size: 0.72em; font-weight: 600; letter-spacing: 0.01em;
}
.msj-hora { display: block; margin-top: 0.12em; text-align: right; font-size: 0.72em; opacity: 0.72; }
/* «Escribiendo»: tres puntitos en un globo del lado de quien escribe (el JS los hace
   parpadear con su reloj). Sin movimiento no existen: el chat ya está completo. */
.msj--escribe {
  display: flex; gap: 0.3em; align-items: center; width: fit-content;
  padding: 0.62em 0.78em; align-self: flex-start; border-bottom-left-radius: 0.25em;
}
.msj--escribe i { display: block; width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; }
.chat-escribe.der .msj--escribe, .msj--escribe.der {
  align-self: flex-end; border-bottom-left-radius: 0.8em; border-bottom-right-radius: 0.25em;
}
:root:not(.con-movimiento) .chat-escribe, :root:not(.con-movimiento) .msj--escribe { display: none; }

/* --- el glassmorphism de los chats (Santiago, 26-sep) ------------------------------
   Cada celular trae de fondo una foto de su negocio, oscura, y encima los globos son
   vidrio esmerilado: blanco translúcido el de quien le escribe, turquesa el del dueño
   del celular, con un borde fino de luz y sombra suave. El esmerilado no es un
   backdrop-filter (dentro de la homografía y la mezcla falla en el iPhone): cada
   vidrio lleva una copia desenfocada del fondo (--tapiz-b), del tamaño de la
   pantalla (--pw/--ph) y corrida a su lugar (--gx/--gy, las pone el JS). */
.pantalla[data-pantalla="mesero"] { --tapiz: url('img/tapiz-mesero.webp'); --tapiz-b: url('img/tapiz-mesero-b.webp'); }
.pantalla[data-pantalla="reservas"] { --tapiz: url('img/tapiz-reservas.webp'); --tapiz-b: url('img/tapiz-reservas-b.webp'); }
.pantalla[data-pantalla="agenda-belleza"] { --tapiz: url('img/tapiz-agenda-belleza.webp'); --tapiz-b: url('img/tapiz-agenda-belleza-b.webp'); }
.pantalla[data-pantalla="agenda-unas"] { --tapiz: url('img/tapiz-agenda-unas.webp'); --tapiz-b: url('img/tapiz-agenda-unas-b.webp'); }
.pantalla[data-pantalla="agenda-tatuajes"] { --tapiz: url('img/tapiz-agenda-tatuajes.webp'); --tapiz-b: url('img/tapiz-agenda-tatuajes-b.webp'); }
.pantalla[data-pantalla="vendedor"] { --tapiz: url('img/tapiz-vendedor.webp'); --tapiz-b: url('img/tapiz-vendedor-b.webp'); }
.pantalla--chat { color: #fff; background: #1d2230 var(--tapiz) 0 0 / 100% 100% no-repeat; }
.pantalla--chat .chat-cuerpo { background: none; }
.pantalla--chat :is(.chat-cabeza, .chat-dia, .msj) {
  --tinte: rgba(255, 255, 255, 0.22);
  background: linear-gradient(var(--tinte), var(--tinte)), var(--tapiz-b) var(--gx, 0) var(--gy, 0) / var(--pw) var(--ph) no-repeat;
  color: #fff;
}
.pantalla--chat .chat-cabeza { --tinte: rgba(15, 29, 61, 0.42); border-bottom: 0.05em solid rgba(255, 255, 255, 0.22); }
.pantalla--chat .chat-avatar { background: var(--turquesa); box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.85); }
.pantalla--chat .chat-dia { --tinte: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 0.05em rgba(255, 255, 255, 0.35); }
.pantalla--chat .msj {
  box-shadow: inset 0 0 0 0.05em rgba(255, 255, 255, 0.42), 0 0.35em 1em rgba(0, 0, 0, 0.22);
  text-shadow: 0 0.05em 0.3em rgba(0, 0, 0, 0.25);
}
.pantalla--chat :is(.msj--negocio, .msj--restaurante, .msj--comensal, .msj--escribe.der),
.pantalla--chat .chat-escribe.der .msj--escribe { --tinte: rgba(14, 124, 140, 0.58); }
.pantalla--chat .msj-hora { opacity: 0.78; }
/* Un globo con foto (la agenda de tatuajes): la foto arriba, a lo ancho del globo. */
.msj--con-foto { width: 70%; }
/* Apaisada: los antebrazos van a lo ancho, y así la foto no se come la pantalla. */
.msj-foto { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0.35em; border-radius: 0.55em; object-fit: cover; }
/* En el celular del vendedor y en el de las agendas el que escribe es el
   negocio: a la derecha. */
.msj--negocio {
  align-self: flex-end;
  background: var(--turquesa); color: #fff;
  border-bottom-right-radius: 0.25em;
}
.tarjeta-comprador {
  /* Centrada sin transform: el JS le anima la entrada con GSAP. */
  position: absolute; left: 4%; right: 4%; top: 0; bottom: 0;
  height: fit-content; margin: auto 0;
  padding: 0.95em 1em 1em;
  border-radius: 0.9em;
  background: #fff; color: var(--marino);
  box-shadow: 0 0.5em 1.6em rgba(15, 29, 61, 0.3);
}
.tarjeta-titulo {
  margin: 0 0 0.55em; padding-bottom: 0.5em;
  border-bottom: 0.08em solid rgba(15, 29, 61, 0.14);
  color: var(--turquesa); font-size: 0.82em; font-weight: 700; letter-spacing: 0.02em;
}
.tarjeta-linea { margin: 0.28em 0 0; font-size: 0.9em; line-height: 1.25; }
.tarjeta-linea--nombre { margin-top: 0; font-size: 1.12em; font-weight: 700; }

/* --- la acción (solo en el modo estático; con movimiento manda la barra) --------- */
.accion {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: flex-start;
  padding-top: 18px; padding-bottom: 36px;
  min-height: 0;
}
.con-movimiento .accion { display: none; }
/* El cierre: con movimiento, el botón de WhatsApp va entre la laptop cerrada y el
   footer (el JS pone su altura). Es el que se queda cuando la página lleve a funnels. */
.con-movimiento .accion--cierre {
  display: flex; justify-content: center;
  position: absolute; left: 16px; right: 16px; top: 0; bottom: auto; z-index: 5;
  height: auto; min-height: 0; padding: 0; align-items: flex-start; visibility: hidden;
}
.accion--cierre .boton { width: 100%; max-width: 480px; justify-content: center; white-space: nowrap; }
.accion .boton, .boton-fijo .boton {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  border-radius: 8px;
}
.accion .boton { min-height: 52px; font-size: 20px; }

/* --- la barra del pulgar (de la Mezcla), con el grupo de la escena actual -------- */
.boton-fijo {
  bottom: var(--reserva-picker);
  display: block;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 29, 61, 0.94);
  border-top: 1px solid rgba(255, 247, 237, 0.16);
  transition: transform 240ms var(--entra), padding 300ms var(--entra);
}
/* El logo del menú: el trazo crema de siempre (base.css), con la punta de la flecha y su
   esquina redonda. La sombra va en el logo entero y no en cada trazo: donde la punta toca
   la curva, dos sombras encimadas se veían más oscuras. */
.curva-marca .curva-punta { stroke-linejoin: round; }
.curva-marca path { filter: none; }
.curva-marca { filter: drop-shadow(0 1px 4px rgba(15, 29, 61, 0.8)); }

.boton-fijo .grupo { display: none; max-width: 480px; margin-inline: auto; gap: 8px; }
body[data-grupo="placas"] .grupo[data-grupo="placas"],
body[data-grupo="mesero"] .grupo[data-grupo="mesero"],
body[data-grupo="reservas"] .grupo[data-grupo="reservas"],
body[data-grupo="belleza-probador"] .grupo[data-grupo="belleza-probador"],
body[data-grupo="unas-probador"] .grupo[data-grupo="unas-probador"],
body[data-grupo="tatuajes-probador"] .grupo[data-grupo="tatuajes-probador"],
body[data-grupo="clinicas"] .grupo[data-grupo="clinicas"],
body[data-grupo="seguimiento"] .grupo[data-grupo="seguimiento"],
body[data-grupo="repunte-oferta"] .grupo[data-grupo="repunte-oferta"] {
  display: flex; flex-direction: column;
  animation: grupo-entra 240ms var(--entra) both;
}
@keyframes grupo-entra { from { opacity: 0; transform: translateY(8px); } }
.boton-fijo .boton {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding-inline: 1em;
  white-space: nowrap;
  font-size: var(--fs, 20px);
  transition: transform 180ms var(--entra), min-height 300ms var(--entra), font-size 300ms var(--entra);
}
.boton-fijo .grupo--doble .boton { min-height: 46px; font-size: var(--fs, 19px); }
/* Con la línea de la escena en pantalla la barra CRECE y se queda crecida: es
   el botón grande de la Mezcla, nunca un segundo botón igual. */
body.accion-grande .boton-fijo { padding-top: 18px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
/* El tamaño crecido lo fija el JS por botón (--fs-grande): el más grande que
   cabe en UN renglón. «Quiero mis reservas por WhatsApp» a 24 px se partía. */
body.accion-grande .boton-fijo .boton { min-height: 62px; font-size: var(--fs-grande, 24px); }
body.accion-grande .boton-fijo .grupo--doble .boton { min-height: 50px; font-size: var(--fs-grande, 21px); }
@media (min-width: 560px) {
  body[data-grupo="placas"] .grupo[data-grupo="placas"],
  body[data-grupo="belleza-probador"] .grupo[data-grupo="belleza-probador"] { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  .boton-fijo .grupo { animation: none !important; }
}

/* --- Repunte: la pantalla de la laptop (D-247) ------------------------------------
   Tres ventanas encimadas del tamaño de la pantalla medida en v7b: la nota arriba,
   la ficha de reseñas debajo y la oferta al fondo. Cada ventana lleva una tira de
   vistas, una debajo de otra, que el JS recorre hacia arriba con cada gesto de la
   mano. Como en los celulares, se multiplica sobre el blanco de la pantalla. */
.laptop {
  position: absolute; left: 0; top: 0; z-index: 4;
  transform-origin: 0 0;
  mix-blend-mode: multiply;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f2430;
}
:root:not(.con-movimiento) .laptop { display: none; }
.laptop-ventana { position: absolute; inset: 0; overflow: hidden; background: #fff; transform-origin: 50% 100%; }
/* Los tres botones de cada ventana de la Mac: cerrar, minimizar y ampliar. */
.semaforo { display: flex; gap: 0.2em; }
.semaforo i { display: block; width: 0.42em; height: 0.42em; border-radius: 50%; background: #ff5f57; }
.semaforo i:nth-child(2) { background: #febc2e; }
.semaforo i:nth-child(3) { background: #28c840; }
.ventana-cuerpo { position: absolute; left: 0; right: 0; top: 1.24em; bottom: 0; overflow: hidden; }
.laptop-tira { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Las capas de la pantalla, de abajo arriba. */
.escritorio { z-index: 0; }
.laptop-ventana { z-index: 1; }
.dock { z-index: 3; }
.genio { z-index: 4; }
.laptop-puntero { z-index: 5; }
.apagado { z-index: 6; }

/* La ficha de Google en el navegador: la barra con su pestaña, la dirección, la
   fachada de Repunte, su nombre y sus pestañas, y luego las reseñas, cinco por vista. */
.cr-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 1.24em;
  display: flex; align-items: center; gap: 0.6em; padding-left: 0.5em; background: #dee1e6;
}
.cr-pestana {
  align-self: flex-end; height: 1.9em; padding: 0 1.4em; display: flex; align-items: center;
  border-radius: 0.6em 0.6em 0 0; background: #fff; color: #3c4043; font-size: 0.48em; white-space: nowrap;
}
.cr-direccion {
  position: absolute; left: 0; right: 0; top: 1.24em; height: 1em;
  display: flex; align-items: center; padding: 0 0.5em;
  background: #fff; border-bottom: 0.04em solid #e3e3e3;
}
.cr-direccion span {
  flex: 1; height: 1.56em; display: flex; align-items: center; padding-left: 1.1em;
  border-radius: 1em; background: #f1f3f4; color: #5f6368; font-size: 0.46em;
}
.cr-cuerpo { top: 2.24em; background: #fff; }
.laptop-vista.gm-cabeza { display: block; padding: 0.5em 0.7em 0; overflow: hidden; }
/* Las fotos en cuadrícula, como en Google: la grande, dos chicas y el mapa. */
.gm-fotos {
  display: grid; grid-template-columns: 2fr 1fr 1.25fr; grid-template-rows: 1fr 1fr; gap: 0.12em;
  height: 4.8em; border-radius: 0.45em; overflow: hidden;
}
.gm-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-foto--grande { grid-row: 1 / 3; }
.gm-mapa { position: relative; grid-column: 3; grid-row: 1 / 3; overflow: hidden; }
.gm-mapa svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-pin { position: absolute; left: 50%; top: 42%; width: 0.75em; height: auto; transform: translate(-50%, -100%); }
.gm-mapa-etiqueta {
  position: absolute; left: 0.3em; bottom: 0.3em; padding: 0.2em 0.55em; border-radius: 1em;
  background: rgba(32, 33, 36, 0.72); color: #fff; font-size: 0.42em;
}
/* El nombre a la izquierda y la calificación en grande a la derecha. */
.gm-titulo { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.45em; }
.gm-titulo-izq { min-width: 0; }
.gm-nombre { margin: 0; font-size: 1.2em; font-weight: 600; line-height: 1.15; color: #202124; }
.gm-categoria { margin: 0.25em 0 0; font-size: 0.52em; color: #70757a; }
.gm-nota { flex: none; display: flex; flex-direction: column; align-items: center; }
.gm-nota b { font-size: 2.3em; font-weight: 400; line-height: 1; color: #202124; letter-spacing: -0.02em; }
.gm-nota-estrellas { display: flex; gap: 0.08em; margin-top: 0.12em; font-size: 1.15em; }
.gm-nota-total { margin-top: 0.2em; font-size: 0.46em; color: #70757a; }
.gm-botones { display: flex; gap: 0.28em; margin-top: 0.5em; }
.gm-boton {
  display: flex; align-items: center; gap: 0.35em; height: 2.3em; padding: 0 0.9em;
  border: 0.1em solid #dadce0; border-radius: 2em; color: #1a73e8; font-size: 0.46em; font-weight: 600; white-space: nowrap;
}
.gm-boton svg { width: 1.2em; height: 1.2em; fill: #1a73e8; }
.gm-seccion { margin: 0.55em 0 0; padding-top: 0.45em; border-top: 0.04em solid #e8eaed; font-size: 0.62em; font-weight: 600; color: #202124; }
/* Las reseñas, tres por vista: cada una grande, en su tercio y centrada en él
   (D-268). */
.laptop-vista.gm-grupo { flex-direction: column; justify-content: space-evenly; align-items: stretch; gap: 0; padding: 0.2em 1em; }
.gm-resena { flex: 1 1 0; display: flex; align-items: center; gap: 0.65em; }
.gm-avatar { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; }
.gm-resena-datos { min-width: 0; }
.gm-resena-quien { display: flex; align-items: center; gap: 0.5em; margin: 0; font-size: 0.88em; font-weight: 600; line-height: 1.3; color: #202124; }
.gm-estrellas { display: flex; gap: 0.1em; font-size: 1.3em; }
.estrella {
  position: relative; display: block; width: 0.5em; height: 0.5em; background: #dadce0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.estrella i {
  position: absolute; inset: 0; background: #fbbc04; opacity: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.gm-resena-texto { margin: 0.2em 0 0; font-size: 1em; line-height: 1.32; color: #3c4043; }

/* El escritorio: el fondo con los colores de Repunte, la carpeta del sistema y su
   LEEME, que se abre desde su ícono con la oferta adentro. */
.escritorio {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 72% 18%, #1c7188 0, #0f1d3d 58%, #0a1430 100%);
}
.finder, .leeme {
  position: absolute; overflow: hidden; background: #fff; border-radius: 0.45em;
  box-shadow: 0 0.35em 1.1em rgba(0, 0, 0, 0.45);
}
.finder { left: 2.4em; top: 1.1em; width: 19.2em; height: 10.6em; }
.finder-barra, .leeme-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 1.24em;
  display: flex; align-items: center; padding-left: 0.5em;
  background: #ececec; border-bottom: 0.04em solid #d6d6d6;
}
.finder-titulo, .leeme-titulo {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 0.55em; font-weight: 700; color: #3a3a3a;
}
.finder-lado {
  position: absolute; left: 0; top: 1.24em; bottom: 0; width: 4.2em; padding-top: 0.3em;
  background: #f3f3f4; border-right: 0.04em solid #e2e2e2;
}
.finder-lado p { margin: 0.5em 0.7em 0; font-size: 0.46em; color: #3a3a3a; }
.finder-lado p:first-child { font-weight: 700; color: #8e8e93; }
.finder-cuadricula {
  position: absolute; left: 4.2em; right: 0; top: 1.24em; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; row-gap: 0.55em;
  padding: 0.7em 0.4em;
}
.finder-item { display: flex; flex-direction: column; align-items: center; }
.finder-item b { margin-top: 0.25em; font-size: 0.5em; font-weight: 500; color: #1d1d1f; }
.carpeta {
  position: relative; display: block; width: 2.1em; height: 1.55em; margin-top: 0.25em;
  border-radius: 0.2em; background: linear-gradient(#83d0fb, #4fb2ef);
}
.carpeta::before {
  content: ""; position: absolute; left: 0; top: -0.24em; width: 0.9em; height: 0.4em;
  border-radius: 0.14em 0.14em 0 0; background: #62bdf4;
}
.documento {
  display: block; width: 1.45em; height: 1.8em; border-radius: 0.1em;
  background: repeating-linear-gradient(#fff 0 0.22em, #d9d9de 0.22em 0.28em) 0.25em 0.45em / 0.95em 1.1em no-repeat, #fff;
  box-shadow: 0 0 0 0.04em #c9c9ce;
}
/* Casi toda la pantalla, hasta el dock: la oferta es larga y se tiene que leer. */
.leeme { left: 0.9em; top: 0.35em; width: 22.2em; height: 12.4em; visibility: hidden; }
.leeme-cuerpo { position: absolute; left: 0; right: 0; top: 1.24em; bottom: 0; overflow: hidden; }

/* La oferta, como un documento de la Mac: seis vistas que la mano recorre. Un renglón
   del texto es un renglón en pantalla (no se parte: el JS achica la letra hasta que
   cada vista cabe entera) y cada línea en blanco, un espacio entre bloques. Las
   órdenes se escriben como en el buscador de la Mac: un campo gris claro, sin colores
   de chat. */
.laptop-vista.leeme-vista {
  flex-direction: column; justify-content: center; align-items: stretch;
  padding: 0.3em 1.1em;
}
.leeme-hoja { font-size: var(--letra-leeme, 0.9em); color: #1d1d1f; }
.leeme-renglon { margin: 0; white-space: nowrap; font-size: 1em; line-height: 1.26; }
.leeme-bloque + .leeme-bloque, .leeme-titular + .leeme-bloque { margin-top: 0.75em; }
.leeme-etiqueta { margin: 0; font-size: 0.78em; font-weight: 600; letter-spacing: 0.02em; color: #0e7c8c; }
.leeme-titular { margin-top: 0.2em; }
.leeme-titular .leeme-renglon { font-size: 1.75em; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.leeme-orden {
  width: fit-content; max-width: 100%;
  padding: 0.1em 0.5em; border-radius: 0.5em;
  background: #f0f0f3; box-shadow: inset 0 0 0 0.06em #d8d8dd;
}
.leeme-orden + .leeme-orden { margin-top: 0.25em; }
.leeme-orden-suelta { padding: 0.04em 0.28em; border-radius: 0.35em; background: #f0f0f3; box-shadow: inset 0 0 0 0.06em #d8d8dd; }

/* El dock: sube al minimizar; la ficha se va a su orilla derecha. */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0.25em; width: fit-content; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 0.3em; padding: 0.22em 0.35em;
  border-radius: 0.5em; background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 0.04em rgba(255, 255, 255, 0.4);
  visibility: hidden;
}
.dock-app { display: block; flex: none; width: 1.25em; height: 1.25em; border-radius: 0.3em; }
.dock-app--finder { background: linear-gradient(90deg, #2c9ff6 50%, #dcefff 50%); }
.dock-app--chrome {
  border-radius: 50%;
  background: radial-gradient(circle, #4285f4 0 20%, #fff 21% 29%, transparent 30%),
              conic-gradient(#ea4335 0 120deg, #fbbc04 0 240deg, #34a853 0);
}
.dock-app--musica circle { fill: #1ed760; }
.dock-app--musica path { fill: none; stroke: #000; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dock-app--whatsapp { background: #25d366; }
.dock-app--calendario {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.1em;
  background: linear-gradient(#ff3b30 0 30%, #fff 30%);
}
.dock-app--calendario b { font-size: 0.55em; line-height: 1; color: #1d1d1f; }
.dock-separador { align-self: center; width: 0.04em; height: 1.05em; background: rgba(255, 255, 255, 0.55); }
.dock-app--minimizada { background: linear-gradient(#dee1e6 0 22%, #fff 22%); opacity: 0; }

/* El genio de la Mac: la ficha se parte en tiras que se estrechan y bajan al dock. */
.genio { position: absolute; inset: 0; pointer-events: none; }

/* La pantalla apagada: negra, con el logo y el nombre. */
.apagado {
  position: absolute; inset: 0; background: #000; opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.apagado img { width: 2.6em; height: 2.6em; }
.apagado p { margin: 0.5em 0 0; font-size: 0.95em; font-weight: 600; letter-spacing: 0.01em; color: #f5f5f7; }

/* La nota: el reproductor de Spotify, fiel a sus colores (Santiago, 26-sep): su barra
   negra con el logo de Repunte vestido de verde en el lugar del suyo, el panel de la
   letra en el verde de Spotify, y abajo lo que suena. La letra se recorre con el
   scroll y se pinta como Spotify sobre un fondo claro: lo cantado y el renglón que
   suena en blanco, lo que falta en negro. */
.laptop-ventana--nota {
  background: #000; color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sp-icono { display: block; flex: none; width: 0.52em; height: 0.52em; fill: #b3b3b3; }
.sp-verde { fill: #1ed760; }
.sp-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 1.55em;
  display: flex; align-items: center; gap: 0.32em; padding: 0 0.5em;
}
.sp-semaforo { display: flex; gap: 0.16em; margin-right: 0.3em; }
.sp-semaforo i { display: block; width: 0.36em; height: 0.36em; border-radius: 50%; background: #ff5f57; }
.sp-semaforo i:nth-child(2) { background: #febc2e; }
.sp-semaforo i:nth-child(3) { background: #28c840; }
.sp-logo { flex: none; width: 0.95em; height: 0.95em; }
.sp-logo circle { fill: #1ed760; }
.sp-logo path { fill: none; stroke: #000; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sp-casa, .sp-buscar { display: flex; align-items: center; justify-content: center; height: 1.08em; background: #1f1f1f; border-radius: 999px; }
.sp-casa { width: 1.08em; }
.sp-casa .sp-icono { fill: #fff; }
.sp-buscar { width: 7.6em; justify-content: flex-start; padding-left: 0.34em; }
.sp-derecha { display: flex; align-items: center; gap: 0.45em; margin-left: auto; }
.sp-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: #c3a8dc; color: #000; box-shadow: 0 0 0 0.24em #1f1f1f;
  font-size: 0.5em; font-weight: 700;
}
.sp-panel {
  position: absolute; left: 0.3em; right: 0.3em; top: 1.55em; bottom: 2.95em;
  border-radius: 0.36em; overflow: hidden;
  background: #1db954;   /* el verde de Spotify, para que recuerde a la plataforma (Santiago, 26-sep) */
}
.sp-contexto { position: absolute; left: 0.8em; top: 0.55em; margin: 0; font-size: 0.56em; font-weight: 700; }
.letra {
  position: absolute; left: 0; right: 0; top: 1.4em; bottom: 0; overflow: hidden;
  /* Los renglones entran y salen desvaneciéndose, como en el reproductor, no cortados. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.4em, #000 calc(100% - 1.8em), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.4em, #000 calc(100% - 1.8em), transparent 100%);
}
.letra-tira { position: relative; padding: 0 1.2em 0 2.5em; }
.letra-renglon {
  margin: 0 0 0.3em;
  font-size: 1.25em; font-weight: 800; line-height: 1.16; letter-spacing: -0.025em;
  color: #000;
}
.sonando {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.95em;
  /* La columna de la canción, más ancha: su título se lee entero (D-268). */
  display: grid; grid-template-columns: 1.4fr 1.3fr 0.7fr; align-items: center; gap: 0.5em;
  padding: 0 0.55em; background: #000;
}
.sonando-izq { display: flex; align-items: center; gap: 0.4em; min-width: 0; }
.sonando-portada { flex: none; width: 1.8em; height: 1.8em; border-radius: 0.14em; }
.sonando-portada path { fill: none; stroke: #1ed760; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sonando-datos { min-width: 0; }
.sonando-titulo { margin: 0; font-size: 0.56em; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sonando-artista { margin: 0.1em 0 0; font-size: 0.48em; line-height: 1.3; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sonando-centro { display: flex; flex-direction: column; align-items: center; gap: 0.28em; }
.sonando-controles { display: flex; align-items: center; gap: 0.62em; }
.sonando-play {
  display: flex; align-items: center; justify-content: center; gap: 0.1em;
  width: 1.02em; height: 1.02em; border-radius: 50%; background: #fff;
}
.sonando-play i { display: block; width: 0.1em; height: 0.36em; background: #000; border-radius: 0.02em; }
.sonando-tiempo { display: flex; align-items: center; gap: 0.7em; width: 100%; font-size: 0.42em; color: #b3b3b3; font-variant-numeric: tabular-nums; }
.sonando-avance { flex: 1; height: 0.42em; border-radius: 1em; background: #4d4d4d; overflow: hidden; }
.sonando-avance i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.sonando-der { display: flex; align-items: center; justify-content: flex-end; gap: 0.42em; }
.sonando-volumen { width: 2.2em; height: 0.18em; border-radius: 1em; background: #fff; }

/* El puntero: va con la mano de m2 (a la X, a la rayita) y hace clic. */
.laptop-puntero {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 0.72em; height: auto; overflow: visible;
  transform-origin: 8% 6%;
  fill: #fff; stroke: #1f2430; stroke-width: 1.4; stroke-linejoin: round;
}
.laptop-vista { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.laptop-falta {
  max-width: 86%; margin: 0; padding: 0.5em 0.8em;
  border: 0.08em dashed rgba(15, 29, 61, 0.45); border-radius: 0.5em;
  color: var(--marino); font-size: 1.05em; line-height: 1.3; text-align: center;
}

/* --- el footer: sube desde abajo sobre la laptop cerrada (D-247) ------------------- */
.pie {
  position: relative; z-index: 1;
  /* Con poco aire: arriba de él, sobre la madera, va el botón del cierre. */
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--marino); color: var(--crema);
  text-align: center;
}
.pie-firma { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.25; }
/* Los datos legales, en letra chica debajo de la firma, y los enlaces en su orden. */
.pie-legal { max-width: 420px; margin: 12px auto 0; font-size: 12.5px; line-height: 1.45; opacity: 0.8; }
.pie-legal p { margin: 0; }
/* Si el renglón no cabe, se parte en los puntos, no a media frase. */
.pie-legal span:not(.pie-punto) { white-space: nowrap; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; font-size: 14px; }
.pie-punto { padding: 0 0.5em; opacity: 0.6; }
.pie-enlaces a { color: var(--crema); text-underline-offset: 3px; }

/* --- modo estático --------------------------------------------------------------- */
.figura { display: none; margin: 0; position: relative; }
.figura-img { display: block; width: 100%; height: auto; }
img[data-src]:not([src]) { display: none; }
:root:not(.con-movimiento) .parada .camara { display: none; }
:root:not(.con-movimiento) .figura { display: block; }
:root:not(.con-movimiento) .parada .linea { padding-top: 22px; padding-bottom: 0; }
:root:not(.con-movimiento) .escena-dim { display: none; }
:root:not(.con-movimiento) .boton-fijo { display: none; }
/* En ?rm=1 (con JS) la interfaz se monta sobre la foto final de su figura. */
.figura .pantalla { display: block; }
.figura .pantalla--chat { display: flex; }

/* --- escritorio: la toma en columna, la borrosa detrás y el texto a un lado ------- */
@media (min-width: 900px) {
  .hero .escenario::before {
    content: ''; position: absolute; inset: 0;
    background: var(--borrosa, none) center / cover no-repeat;
  }
  .hero .escenario::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(15, 29, 61, 0.62);
  }
  .hero .camara {
    left: 0; right: 0;
    max-width: calc(100lvh * 0.5625); margin-inline: auto;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.45);
    z-index: 1;
  }
  .hero-contenido, .linea { padding-inline: 5vw; z-index: 2; }
  .hero-contenido { max-width: calc(50vw - 100lvh * 0.28125 - 2vw); }
  .con-movimiento .linea .linea-bloque,
  .con-movimiento .linea--estrecha .linea-bloque { max-width: calc(50vw - 100lvh * 0.28125 - 8vw); }
  .figura { max-width: 520px; margin-inline: auto; }
  .con-movimiento .llamada { left: 50%; right: auto; width: calc(100lvh * 0.5625); transform: translateX(-50%); z-index: 2; }
}