/* Campo Vivo · propuesta "línea": el primer minuto (texto de cada fase sobre la placa de arena 3D).
   Quien lo monta da el contenedor .pm (escenario) con .pm-escena (la placa) y .pm-texto-caja (el texto). */

.pm {
  position: relative;
  overflow: hidden;
  background: var(--negro);
}
.pm-escena { position: absolute; inset: 0; z-index: 0; }
.pm-escena .arena-lienzo { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.pm-escena .arena-lienzo:active { cursor: grabbing; }
/* Luz (viñeta): la luz cálida se concentra alrededor de la placa y se apaga hacia los bordes. Es un velo muy tenue encima de la placa y
   debajo del texto: no cambia el color de la arena y no recibe toques (la placa se sigue girando con el dedo). Apilada, la placa queda
   arriba; lado a lado, a la derecha del texto. */
.pm { --vx: 50%; --vy: 30%; --vrx: 84%; --vry: 46%; }
.pm-escena::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--oro-vineta); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .pm { --vx: 68%; --vy: 50%; --vrx: 50%; --vry: 74%; }
}

.pm-texto-caja {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.pm-bloque {
  pointer-events: auto;
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 520px;
  animation: subir 0.5s var(--curva) both;
}
.pm-dato {
  font-size: var(--t-4);
  line-height: var(--l-4);
  color: var(--gris);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* La fila de estado, arriba de cada fase (primer-minuto.js): "Sonando" mientras el sonido de este minuto suena de verdad y, en las
   tres respiraciones, cuál va y cuánto falta. El morado es solo el punto: dice que algo suena. El punto es fijo, sin brillo que
   se mueva ni pulso: nada aquí parpadea. */
.pm-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pm-sonando { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-4); line-height: var(--l-4); letter-spacing: 0.04em; color: var(--niebla); }
.pm-sonando__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--morado); box-shadow: 0 0 0 3px rgba(155, 124, 244, 0.22); }
.pm-quedan { color: var(--niebla); }
.pm-titulo {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--l-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
.pm-titulo:focus { outline: none; }
/* El título de la primera pantalla es el más grande de la página (60 px en escritorio, 40 en celular). */
.pm-titulo--portada { font-size: var(--t-h1); line-height: var(--l-h1); }
/* "Saber más": lo técnico (el tono y que la placa es una simulación) en un desplegable nativo, para que el texto de la fase quede
   llano. El resumen mide 44 px de alto como mínimo y lleva el aro de foco de siempre. */
.pm-saber { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.pm-saber summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  color: var(--gris);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.25);
  text-underline-offset: 4px;
}
.pm-saber summary::-webkit-details-marker { display: none; }
.pm-saber summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--mov-corto) var(--curva);
}
.pm-saber[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pm-saber summary:hover { color: var(--blanco); }
.pm-saber__texto { max-width: 46ch; padding-bottom: 8px; text-wrap: pretty; }
.pm-titulo--respira { display: flex; align-items: baseline; gap: 16px; font-size: var(--t-h1); line-height: var(--l-h1); }
.pm-cuenta { color: var(--niebla); font-variant-numeric: tabular-nums; }
.pm-cuenta--vivo { color: var(--morado); }
.pm-texto { font-size: var(--t-1); line-height: var(--l-1); color: var(--niebla); text-wrap: balance; }   /* sin palabras sueltas al final */
.pm-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
/* Las opciones de la pregunta del final (más abajo, "La pregunta del final"). */
.pm-pregunta { display: grid; justify-items: start; gap: 6px; width: 100%; margin-top: 4px; }
.pm-opciones { display: grid; gap: 10px; width: min(100%, 380px); }
/* Los enlaces discretos ("Prefiero leer cómo funciona", "Saltar la respiración", "Ver otra vez") miden 44 px de alto para el dedo; el margen
   negativo les devuelve el aire que tenían: el texto queda donde estaba. */
.pm-discreto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -6px;
  font-size: var(--t-4);
  color: var(--gris);
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.25);
  text-underline-offset: 4px;
}
.pm-discreto:hover { color: var(--blanco); }

@media (max-width: 767px) {
  .pm-titulo { font-size: var(--t-h3); line-height: var(--l-h3); }
  .pm-titulo--portada { font-size: var(--t-h1); line-height: var(--l-h1); }
  .pm-titulo--respira { font-size: var(--t-h2); line-height: var(--l-h2); }
  .pm-texto { font-size: var(--t-2); line-height: var(--l-2); }
}

/* Pantallas bajas (un celular chico): el texto de cada fase se compacta para que la placa, que es el clímax,
   conserve buena parte del alto. Los botones van en fila y un poco más bajos. */
@media (max-height: 700px) {
  .pm-bloque { gap: 10px; }
  .pm-titulo { font-size: 26px; line-height: 32px; }
  .pm-titulo--portada { font-size: 32px; line-height: 38px; }
  .pm-texto { font-size: var(--t-4); line-height: var(--l-4); }
  .pm-acciones { flex-wrap: nowrap; gap: 8px; margin-top: 4px; }
  .pm .pm-acciones .boton--grande { min-height: 48px; padding: 0 16px; font-size: var(--t-3); }
}
@media (max-height: 700px) and (max-width: 359px) {
  .pm-acciones { flex-wrap: wrap; }   /* en 320 px dos botones no caben en fila */
}

.pm-marca { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-2); font-weight: 450; line-height: 1; letter-spacing: -0.01em; color: var(--blanco); }
.pm-nota { display: flex; align-items: center; gap: 8px; font-size: var(--t-4); line-height: var(--l-4); color: var(--gris); }
/* La leyenda de la placa (héroe de la portada): dice qué es lo que se ve. Un rombo chato, como la placa vista de lado, la ata al dibujo. */
.pm-leyenda { display: flex; align-items: center; gap: 10px; font-size: var(--t-4); line-height: var(--l-4); color: var(--niebla); }
.pm-leyenda::before { content: ""; flex: none; width: 11px; height: 11px; box-shadow: inset 0 0 0 1.5px currentColor; transform: scaleY(0.58) rotate(45deg); }

/* ── La primera llegada ───────────────────────────────────────
   primer-minuto.js pone pm-entrada en el texto y pm-escena--entra en la placa la primera vez que pinta la primera fase. Es una sola
   jugada de menos de 1,8 s, del ruido al orden: la placa sale del negro (se aclara y se asienta), el título se enfoca palabra por
   palabra (mov-palabras, de linea.css; empieza a los 200 ms) y después el párrafo, los botones y la nota suben uno tras otro. Todo
   con relleno "backwards": al terminar no queda nada retenido, así los botones siguen respondiendo con su escala al tocarlos, y nada
   bloquea el toque en ningún momento. Se mueve la placa como caja (opacity y transform del lienzo), nunca por dentro de WebGL. */
@media (prefers-reduced-motion: no-preference) {
  .pm-entrada .pm-bloque { animation: none; }
  .pm-entrada .pm-titulo { --retraso: 200ms; }
  .pm-entrada .pm-leyenda,
  .pm-entrada .pm-marca,
  .pm-entrada .pm-dato { animation: mov-sube 600ms var(--curva) 60ms backwards; }
  .pm-entrada .pm-texto { animation: mov-sube 600ms var(--curva) 620ms backwards; }
  .pm-entrada .pm-acciones { animation: mov-sube 600ms var(--curva) 780ms backwards; }
  .pm-entrada .pm-nota { animation: mov-sube 600ms var(--curva) 940ms backwards; }
  .pm-escena--entra > .arena-lienzo { animation: pm-escena-entra 1300ms var(--curva) backwards; }
}
@keyframes pm-escena-entra { from { opacity: 0; transform: scale(1.05); } }
/* Mientras el primer minuto no pinta su texto (el héroe todavía no tiene data-fase), el de respaldo del HTML espera sin verse: así no
   parpadea antes de llegar en orden. Si el script no llega o falla, a los 2,4 s se muestra solo. */
@media (prefers-reduced-motion: no-preference) {
  .heroe-pm:not([data-fase]) .pm-texto-caja { visibility: hidden; animation: pm-respaldo 1ms 2400ms forwards; }
}
@keyframes pm-respaldo { to { visibility: visible; } }

/* ── Héroe de la portada ──────────────────────────────────── */
.heroe-pm {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(640px, 100svh, 960px);
}
.heroe-pm .pm-texto-caja {
  width: min(46%, 640px);
  padding: calc(var(--cabecera) + 24px) 0 96px var(--margen);
}
/* La orilla (portada-heroe.js la dibuja): arena suelta al pie del héroe, cortada por el borde de la pantalla, para que se note que la
   página sigue hacia abajo (una persona nueva leía la primera pantalla como la página entera). Vive en el aire que el texto deja debajo
   (el relleno de abajo de .pm-texto-caja: 96 px, y 72 en columna), así que no pisa ninguna letra, y se funde hacia arriba. Al bajar se
   apaga (la historia trae enseguida su propia arena) y al volver arriba regresa. */
.heroe-pm__orilla {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 96px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 70%);
  mask-image: linear-gradient(180deg, transparent, black 70%);
  transition: opacity 600ms var(--curva);
}
.heroe-pm--lejos .heroe-pm__orilla { opacity: 0; }
/* En pantallas bajas la marca cede su sitio a la placa (el logo ya está en la cabecera, justo encima). Apilado (celular, tableta en vertical)
   cede desde los 780 px de alto: con la letra grande de celular el texto ya no le deja sitio a la placa en un 360 × 740. */
@media (max-height: 700px) {
  .heroe-pm .pm-marca { display: none; }
}
@media (max-width: 899px) and (max-height: 780px), (max-aspect-ratio: 5/4) and (max-height: 780px) {
  .heroe-pm .pm-marca { display: none; }
}

@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .heroe-pm { align-items: end; min-height: max(680px, 100svh); }
  /* Arriba queda siempre un hueco para la placa, que es el clímax del primer minuto: si el texto es más alto (la letra grande de celular, una
     letra de reemplazo más ancha), el héroe crece en lugar de apretarla. Con menos de unos 16 px libres entre la cabecera y el texto el motor
     abandona el espacio libre, agranda la placa y la monta sobre el texto (primer-minuto.js: areaLibre). */
  .heroe-pm .pm-texto-caja { width: 100%; padding: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 60px) var(--margen) 72px; }
  .heroe-pm__orilla { height: 72px; }
}

/* ── Bienvenida de la app (pantalla completa) ─────────────── */
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: center;
}
.bienvenida[hidden] { display: none; }
.bienvenida .pm-texto-caja { width: min(46%, 640px); padding: 0 0 0 var(--margen); }
.bienvenida__saltar { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 2; }
html.con-bienvenida { overflow: hidden; }

@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .bienvenida { align-items: end; }
  .bienvenida .pm-texto-caja { width: 100%; padding: 0 var(--margen) calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ── La pregunta del final: cuatro respuestas ─────────────────────
   "¿Cómo estás ahora, comparado con hace un momento?" ofrece tres opciones (Siento más calma, Siento más conexión conmigo, Igual) en una
   columna de un mismo ancho y, discreta debajo de ellas, "No me sentó bien", un botón de texto de 44 px de alto como los demás
   enlaces discretos. Un toque elige y pasa al final: no hay nada que confirmar. El texto de una opción puede partirse en dos renglones
   (en 320 px "Siento más conexión conmigo" no cabe en uno). */
.pm-opciones .pildora { justify-content: center; padding-block: 10px; line-height: 1.2; text-align: center; white-space: normal; }
.pm-no { margin-top: 0; }
@media (max-height: 700px) {
  .pm-pregunta { gap: 2px; }
  .pm-opciones { gap: 8px; }
  .pm-opciones .pildora { min-height: 44px; font-size: var(--t-2); }
}