/*
  main.css — Layout y estructura de MYAN
  Mobile-first: base 375px → tablet 768px → desktop 1024px

  Concepto: versión calmada del scroll de TikTok/Instagram.
  Mismo patrón de consumo vertical, sin la agresividad del algoritmo.
*/

/* ─────────────────────────────────────────
   Reset
───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  /* Evitar zoom accidental en iOS al focusar inputs */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  min-height: 100dvh;
  overflow: hidden; /* el scroll lo maneja cada pantalla */
  background-color: #C8D8E0; /* fallback color del cielo */

  /* Mejora del renderizado de fuentes en móvil */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  background: none;
  border:     none;
  cursor:     pointer;
  font-family: inherit;
  text-align: left;
}

/* ─────────────────────────────────────────
   Fondo global — playa fija, nunca se mueve
───────────────────────────────────────── */
.fondo-global {
  position: fixed;
  inset:    0;
  z-index:  0;
  overflow: hidden;
}

.fondo-imagen {
  position: absolute;
  inset:    -10px;

  /* Foto real del Monte Fuji — Unsplash (licencia libre) */
  background-image:    url('../assets/bg-placeholder.jpg');
  background-size:     cover;
  background-position: center 40%;

  filter: blur(4px) brightness(0.98) saturate(0.85);
}

/* Velo muy leve — solo para profundidad, no oscurecer */
.fondo-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    180deg,
    rgba(200, 216, 228, 0.15) 0%,
    rgba(255, 248, 235, 0.08) 50%,
    rgba(200, 168, 120, 0.12) 100%
  );
}

/* ─────────────────────────────────────────
   Sistema de pantallas — SPA fade
───────────────────────────────────────── */
.pantalla {
  position:       fixed;
  inset:          0;
  z-index:        10;
  display:        flex;
  flex-direction: column;

  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.32s ease;
}

.pantalla.activa {
  opacity:        1;
  pointer-events: all;
}

/* ─────────────────────────────────────────
   PANTALLA 1 — Bienvenida
───────────────────────────────────────── */
#pantalla-bienvenida {
  align-items:     center;
  justify-content: center;
  padding:         env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
}

.bienvenida-contenido {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            32px;
  max-width:      360px;
  width:          100%;
  text-align:     center;
}

/* Logo */
.logo-bloque {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

/* 庵 — ideograma como símbolo visual */
.logo-icono {
  font-size:   56px;
  line-height: 1;
  color:       rgba(52, 38, 28, 0.55);

  /* La única animación de la app: respiración muy lenta */
  animation: respirar 7s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: 0.45; transform: scale(1);    }
  50%       { opacity: 0.68; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-icono { animation: none; opacity: 0.55; }
}

.logo-nombre {
  font-size:      44px;
  font-weight:    300;
  letter-spacing: 0.20em;
  color:          var(--texto-primario);
  text-transform: uppercase;
  line-height:    1;
}

.tagline {
  font-size:      15px;
  font-weight:    300;
  color:          var(--texto-secundario);
  letter-spacing: 0.03em;
  line-height:    1.6;
}

/* ─────────────────────────────────────────
   PANTALLA 2 — Estados de ánimo
───────────────────────────────────────── */
#pantalla-estados {
  overflow-y:        auto;
  overscroll-behavior: contain;
}

.estados-contenido {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            28px;
  padding:        max(env(safe-area-inset-top), 48px) 20px max(env(safe-area-inset-bottom), 32px);
  min-height:     100%;
  max-width:      480px;
  margin:         0 auto;
  width:          100%;
}

.estados-encabezado {
  text-align:  center;
  padding-top: 8px;
}

.pregunta-central {
  font-size:   26px;
  font-weight: 500;
  color:       var(--texto-primario);
  line-height: 1.3;
  margin-bottom: 8px;
}

.pregunta-sub {
  font-size:   14px;
  font-weight: 300;
  color:       var(--texto-muted);
  letter-spacing: 0.02em;
}

/* Grid — 2 columnas × 3 filas en mobile, 3 columnas × 2 filas en tablet+ */
.estados-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
  width:                 100%;
}

@media (min-width: 600px) {
  .estados-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card de estado — táctil, bien proporcionada */
.estado-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         18px 12px;
  min-height:      88px;
  width:           100%;
  cursor:          pointer;

  /* Hereda glass-card, override solo lo necesario */
  border-radius:   var(--glass-radius) !important;
}

/* Zona táctil mínima recomendada: 48px — cumplimos con creces */

.estado-icono {
  color:       var(--texto-secundario);
  flex-shrink: 0;
  /* Los SVG heredan currentColor — un solo color */
}

.estado-texto {
  font-size:   13px;
  font-weight: 400;
  color:       var(--texto-primario);
  letter-spacing: 0.01em;
  text-align:  center;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   PANTALLA 3 — Feed de contenido
   Versión calmada del scroll de TikTok/Instagram:
   - snap scroll vertical
   - una card por "pantalla"
   - sin autoplay, sin algoritmo
───────────────────────────────────────── */
#pantalla-contenido {
  flex-direction: column;
  overflow:       hidden; /* el feed interno maneja el scroll */
}

/* Header sticky */
.contenido-header {
  position:    relative;
  z-index:     20;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     max(env(safe-area-inset-top), 12px) 16px 12px;
  flex-shrink: 0;
}

/* Botones de navegación — igual de visibles (anti dark-pattern) */
.btn-nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255, 252, 248, 0.35);
  border:          1px solid rgba(255, 255, 255, 0.50);
  color:           var(--texto-primario);
  font-size:       18px;
  line-height:     1;
  cursor:          pointer;
  transition:      background var(--trans), transform var(--trans);
  flex-shrink:     0;
}

.btn-nav:hover {
  background: rgba(255, 252, 248, 0.55);
  transform:  scale(1.05);
}

.btn-nav:active {
  transform: scale(0.96);
}

.btn-nav:focus-visible {
  outline:        2px solid rgba(120, 152, 172, 0.70);
  outline-offset: 3px;
}

.seccion-nombre {
  font-size:      14px;
  font-weight:    500;
  color:          var(--texto-primario);
  letter-spacing: 0.05em;
  flex:           1;
  text-align:     center;
  padding:        0 8px;
  opacity:        0.80;
}

/* ─────────────────────────────────────────
   Feed snap-scroll — el corazón de la app
   Como TikTok, pero sin el caos.
───────────────────────────────────────── */
.feed-container {
  flex:          1;
  overflow-y:    scroll;
  overflow-x:    hidden;

  /* Scroll tipo TikTok — una card a la vez */
  scroll-snap-type:    y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Ocultar scrollbar — el gesto es la interfaz */
  scrollbar-width:     none;
  -ms-overflow-style:  none;
}

.feed-container::-webkit-scrollbar {
  display: none;
}

/* Item del feed — cada uno ocupa una "pantalla" */
.feed-item {
  scroll-snap-align: start;
  scroll-snap-stop:  always;

  height:          calc(100dvh - 64px);
  min-height:      400px;

  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;

  padding:         16px 16px;
  position:        relative;
}

/* Card grande — ocupa ~75% de la pantalla en alto y casi todo el ancho */
.feed-card {
  width:        92%;
  max-width:    520px;
  height:       75dvh;
  min-height:   340px;
  padding:      36px 32px;
  border-radius: var(--glass-radius-grande) !important;

  /* Contenido dentro de la card alineado arriba con espacio */
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

/* Etiqueta de tipo de contenido */
.contenido-etiqueta {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.14em;
  color:          var(--texto-muted);
  text-transform: uppercase;
  margin-bottom:  20px;
}

/* Cita / texto principal */
.contenido-cita {
  font-size:      22px;
  font-weight:    300;
  line-height:    1.80;
  color:          var(--texto-primario);
  font-style:     normal;
  letter-spacing: 0.01em;
  margin-bottom:  28px;
}

@media (min-width: 600px) {
  .contenido-cita {
    font-size: 26px;
  }
}

/* Atribución */
.contenido-fuente {
  font-size:      12px;
  font-weight:    300;
  color:          var(--texto-muted);
  letter-spacing: 0.04em;
}

/* Divider mínimo dentro de una card */
.contenido-divider {
  width:      32px;
  height:     1px;
  background: rgba(52, 38, 28, 0.15);
  margin:     20px 0;
}

.contenido-texto {
  font-size:   17px;
  font-weight: 300;
  line-height: 1.85;
  color:       var(--texto-sobre-claro);
  letter-spacing: 0.01em;
}

/* Indicador de navegación — muestra que hay más sin agresividad */
.feed-hint {
  position:    absolute;
  bottom:      20px;
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         6px;
  opacity:     0.35;
  pointer-events: none;
}

.feed-hint-icono {
  color:     var(--texto-secundario);
  animation: flotar 2.5s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .feed-hint-icono { animation: none; }
}

.feed-hint-texto {
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.08em;
  color:          var(--texto-muted);
  text-transform: uppercase;
}

/* Último ítem del feed — sin hint */
.feed-item:last-child .feed-hint {
  display: none;
}

/* Footer fijo en pantalla 3 — siempre visible, encima de la barra de audio */
.contenido-footer-fijo {
  flex-shrink:    0;
  text-align:     center;
  padding:        10px 20px calc(env(safe-area-inset-bottom) + 88px);
  font-size:      12px;
  font-weight:    300;
  color:          var(--texto-muted);
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────
   Indicador de progreso del feed (puntos)
   Como Instagram Stories pero vertical y suave
───────────────────────────────────────── */
.feed-progress {
  position:        fixed;
  right:           14px;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         30;
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity 0.3s ease;
}

/* Solo mostrar el indicador cuando el feed está activo */
#pantalla-contenido.activa .feed-progress {
  opacity: 1;
}

.feed-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    rgba(52, 38, 28, 0.22);
  transition:    all 0.3s ease;
}

.feed-dot.activo {
  background: rgba(52, 38, 28, 0.55);
  height:     12px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────
   Responsive — tablet (768px+)
───────────────────────────────────────── */
@media (min-width: 768px) {
  .logo-nombre {
    font-size: 52px;
  }

  .pregunta-central {
    font-size: 30px;
  }

  .feed-item {
    padding: 32px 40px;
  }

  .feed-card {
    padding: 40px 40px;
  }
}

/* ─────────────────────────────────────────
   BARRA DE AUDIO AMBIENT
   Píldora flotante fija en la parte inferior,
   presente en todas las pantallas.
───────────────────────────────────────── */
.audio-bar {
  position:        fixed;
  bottom:          max(env(safe-area-inset-bottom), 16px);
  left:            50%;
  transform:       translateX(-50%);
  z-index:         100;

  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;

  /* No bloquear clics detrás de ella */
  pointer-events:  none;
}

/* Hint de primera vez */
.audio-hint {
  font-size:      11px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  text-shadow:    0 1px 4px rgba(0,0,0,0.3);
  pointer-events: none;

  opacity:    1;
  transition: opacity 0.6s ease;
}

.audio-hint.oculto {
  opacity:        0;
  pointer-events: none;
}

/* Cápsula de controles */
.audio-controles {
  display:         flex;
  align-items:     center;
  gap:             2px;
  padding:         0 16px;
  height:          56px;

  background:      rgba(20, 22, 28, 0.42);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border:          1px solid rgba(255, 255, 255, 0.16);
  border-radius:   28px;
  box-shadow:      0 4px 24px rgba(0, 0, 0, 0.20);

  pointer-events:  all;
}

/* Botón de audio individual */
.audio-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  cursor:          pointer;

  color:       rgba(255, 255, 255, 0.40);
  transition:
    color      0.2s ease,
    transform  0.2s ease;
}

.audio-btn:hover {
  color: rgba(255, 255, 255, 0.72);
}

.audio-btn.activo {
  color:     rgba(255, 255, 255, 0.96);
  transform: scale(1.15);
}

.audio-btn:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Separador entre sonidos y mute */
.audio-separador {
  width:        1px;
  height:       20px;
  background:   rgba(255, 255, 255, 0.14);
  margin:       0 4px;
  flex-shrink:  0;
}

/* Espaciado inferior en pantallas con scroll para no tapar contenido */
#pantalla-estados .estados-contenido {
  padding-bottom: max(env(safe-area-inset-bottom), 80px);
}

/* ═════════════════════════════════════════
   SHEET MODAL — "Quiero leer algo"
   Sube desde abajo, estilo iOS native.
═════════════════════════════════════════ */

/* Overlay oscuro */
.sheet-overlay {
  position:       fixed;
  inset:          0;
  z-index:        200;
  background:     rgba(0, 0, 0, 0.50);

  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.25s ease;
}

.sheet-overlay.activo {
  opacity:        1;
  pointer-events: all;
}

/* Bloquear scroll del body cuando el sheet está abierto */
body.sheet-abierto {
  overflow: hidden;
}

/* Sheet — glass card centrada, aparece desde el centro */
.sheet {
  position:       fixed;
  top:            50%;
  left:           50%;
  z-index:        201;

  /* Glass igual al sistema de cards */
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-fuerte)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur-fuerte)) saturate(1.5);
  border:          var(--glass-border);
  border-radius:   var(--glass-radius-grande);
  box-shadow:      var(--glass-shadow-alta);

  width:          min(88vw, 400px);
  max-height:     80vh;
  display:        flex;
  flex-direction: column;
  padding-bottom: 8px;

  /* Estado inicial: centrado pero invisible y ligeramente pequeño */
  transform:      translate(-50%, -50%) scale(0.88);
  opacity:        0;
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.22s ease;
}

.sheet.activo {
  transform:      translate(-50%, -50%) scale(1);
  opacity:        1;
  pointer-events: all;
}

/* Handle oculto — ya no se usa drag, queda como separador visual opcional */
.sheet-handle-zona {
  display: none;
}

.sheet-handle {
  display: none;
}

/* Encabezado del sheet */
.sheet-encabezado {
  padding:        24px 24px 16px;
  flex-shrink:    0;
}

.sheet-titulo {
  font-size:      18px;
  font-weight:    400;
  color:          var(--texto-primario);
  margin-bottom:  6px;
  letter-spacing: -0.01em;
}

.sheet-subtitulo {
  font-size:      13px;
  font-weight:    300;
  color:          var(--texto-secundario);
  letter-spacing: 0.01em;
}

/* Lista de opciones — scrolleable si hay muchas */
.sheet-opciones {
  flex:           1;
  overflow-y:     auto;
  overscroll-behavior: contain;
  padding:        0 16px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* Card de opción dentro del sheet — usa el mismo tono cálido del sistema */
.sheet-opcion {
  display:        flex;
  align-items:    center;
  gap:            14px;
  padding:        15px 18px;

  background:     var(--glass-bg);
  border:         var(--glass-border-sutil);
  border-radius:  var(--glass-radius-chico);

  color:          var(--texto-primario);
  font-size:      15px;
  font-weight:    300;
  letter-spacing: 0.01em;
  text-align:     left;
  cursor:         pointer;
  width:          100%;

  transition:
    background  0.18s ease,
    transform   0.10s ease;
}

.sheet-opcion:hover {
  background: var(--glass-bg-hover);
}

.sheet-opcion:active {
  transform:  scale(0.98);
  background: var(--glass-bg-pressed);
}

.sheet-opcion:focus-visible {
  outline:        2px solid rgba(120, 152, 172, 0.70);
  outline-offset: 2px;
}

.sheet-opcion-icono {
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  color:          var(--texto-secundario);
}

.sheet-opcion-texto {
  flex: 1;
}

/* Botón cancelar */
.sheet-cancelar {
  margin:         12px 16px 4px;
  padding:        12px;
  text-align:     center;
  font-size:      13px;
  font-weight:    300;
  color:          var(--texto-muted);
  letter-spacing: 0.02em;
  cursor:         pointer;
  flex-shrink:    0;

  transition: color 0.2s ease;
}

.sheet-cancelar:hover {
  color: rgba(255, 255, 255, 0.60);
}

/* ═════════════════════════════════════════
   PANTALLA DE LECTURA
═════════════════════════════════════════ */

#pantalla-lectura {
  flex-direction: column;
  overflow:       hidden;
}

/* Contenedor central */
.lectura-contenedor {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  /* Allow scrolling */
  overflow-y:     auto;
  overflow-x:     hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lectura-contenedor::-webkit-scrollbar {
  display: none;
}

.lectura-item {
  width:           100%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  position:        relative;
  flex-shrink:     0;
  /* Espaciado para margen interno y separacion tipo feed */
  padding:         40px 16px 20px;
}


/* Card de lectura — altura fija, paginas horizontales internas */
.lectura-card {
  width:          92%;
  max-width:      520px;
  padding:        2rem 2rem 1.5rem;
  border-radius:  var(--glass-radius-grande) !important;

  display:        flex;
  flex-direction: column;
  gap:            0;

  height:         calc(70dvh - 56px);   /* altura fija para paginación consistente */
  overflow:       hidden;

  /* Transición para cambio de pieza — fade + slide */
  transition:     opacity 0.28s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Carrusel de páginas — scroll horizontal ─── */
.lectura-paginas {
  flex:               1;
  display:            flex;
  overflow-x:         auto;
  overflow-y:         hidden;
  scroll-snap-type:   x mandatory;
  scroll-behavior:    smooth;
  overscroll-behavior-x: contain;
  scrollbar-width:    none;
  gap:                0;
  min-height:         0;              /* permite que flex-shrink funcione */
}

.lectura-paginas::-webkit-scrollbar {
  display: none;
}

/* Página individual — flex column para que el autor quede al fondo */
/* Uso flex: 0 0 100% (patrón estándar de carrusel) en lugar de min-width: 100%
   para evitar que el scrollbar oculto de Windows añada px extra al ancho */
.lectura-pagina {
  flex:            0 0 100%;
  scroll-snap-align: start;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}

/* Texto de la página — ocupa el espacio disponible */
.lectura-pagina-texto {
  flex:            1;
  font-size:       15px;
  font-weight:     300;
  line-height:     1.90;
  color:           var(--texto-primario);
  letter-spacing:  0.01em;
  white-space:     pre-line;

  /* Evita que palabras largas se corten en el borde derecho */
  word-wrap:       break-word;
  overflow-wrap:   break-word;
  word-break:      normal;
  hyphens:         auto;
  /* Margen derecho de seguridad: buffer contra recorte de un par de px */
  padding-right:   2px;

  overflow-y:      auto;
  scrollbar-width: none;
}

.lectura-pagina-texto::-webkit-scrollbar {
  display: none;
}

/* Bloque del autor — solo en la última página, pegado al fondo */
.lectura-autor-bloque {
  flex-shrink:     0;
  padding-top:     0.6rem;
}

/* Separador decorativo antes del autor */
.lectura-divider-autor {
  width:      24px;
  height:     1px;
  background: rgba(52, 38, 28, 0.30);
  margin:     0 auto 0.8rem;
}

/* ─── Dots de paginación ─── */
.lectura-dots {
  display:         flex;
  gap:             7px;
  align-items:     center;
  justify-content: center;
  min-height:      20px;
  padding:         4px 0;
}

.lectura-dot {
  width:           6px;
  height:          6px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.45);
  box-shadow:      0 1px 3px rgba(0, 0, 0, 0.15);
  transition:      background 0.25s ease, transform 0.25s ease;
  flex-shrink:     0;
}

.lectura-dot.activo {
  background:      rgba(255, 255, 255, 1);
  transform:       scale(1.3);
}

/* Contador numérico — para artículos con 6+ páginas */
.pagina-contador {
  font-size:       12px;
  font-weight:     300;
  color:           rgba(255, 255, 255, 0.35);
  letter-spacing:  0.12em;
}

/* Fila meta: categoría + tiempo */
.lectura-meta {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  1.4rem;
  flex-shrink:    0;
}

/* Override del estilo general de .contenido-etiqueta cuando está en la meta */
.lectura-meta .contenido-etiqueta {
  font-size:      11px;
  letter-spacing: 0.08em;
  opacity:        0.6;
  margin-bottom:  0;
}

.lectura-tiempo {
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.08em;
  color:          var(--texto-muted);
  text-transform: uppercase;
  opacity:        0.6;
}

/* Título de la pieza */
.lectura-titulo {
  font-size:      20px;
  font-weight:    300;
  color:          var(--texto-primario);
  line-height:    1.35;
  letter-spacing: -0.01em;
  margin-bottom:  1.2rem;
  flex-shrink:    0;
}

/* Autor — solo se renderiza en la última página */
.lectura-autor {
  font-size:      13px;
  font-weight:    300;
  font-style:     italic;
  color:          var(--texto-muted);
  letter-spacing: 0.03em;
  opacity:        0.5;
}

/* Hint de swipe — visible en la última página, indica "empujá hacia arriba" */
.lectura-swipe-hint {
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  padding:        10px 0 6px;
  pointer-events: none;
  opacity:        1;
  transition:     opacity 0.4s ease;
}

/* La animación solo corre cuando el hint es visible */
.lectura-swipe-hint:not(.oculto) {
  animation: lectura-pulso 2.8s ease-in-out infinite;
}

.lectura-swipe-hint.oculto {
  opacity:        0;
  animation:      none;
}

.lectura-swipe-hint svg {
  color: var(--texto-muted);
  opacity: 0.45;
}

@keyframes lectura-pulso {
  0%, 100% { opacity: 1;    transform: translateY(0); }
  50%       { opacity: 0.4; transform: translateY(-5px); }
}

/* ─── Botón Profundizar — aparece debajo del hint, solo en Aprender ─── */
.btn-profundizar {
  display:         block;
  width:           fit-content;
  align-self:      center;
  margin-top:      1.2rem;
  padding:         6px 20px;
  font-family:     inherit;
  font-size:       12px;
  font-weight:     400;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.60);
  background:      rgba(255, 255, 255, 0.07);
  border:          1px solid rgba(255, 255, 255, 0.14);
  border-radius:   20px;
  cursor:          pointer;
  transition:      background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-profundizar:hover,
.btn-profundizar:focus-visible {
  background:  rgba(255, 255, 255, 0.14);
  color:       rgba(255, 255, 255, 0.90);
  outline:     none;
}

.btn-profundizar:disabled {
  opacity: 0.40;
  cursor:  default;
}

/* Estado "← Artículo" — acento sutil para indicar que estás en Wikipedia */
.btn-profundizar--volver {
  color:        rgba(200, 230, 255, 0.75);
  border-color: rgba(200, 230, 255, 0.20);
}

/* Texto introductorio de la página 1 con imagen */
/* -webkit-line-clamp es el seguro visual: nunca más de 6 líneas */
.wiki-texto-intro {
  flex:                    none;        /* no crece — la imagen ya ocupa el espacio */
  display:                 -webkit-box;
  -webkit-line-clamp:      6;
  -webkit-box-orient:      vertical;
  overflow:                hidden;
}

/* Imagen de portada (página 1) — ocupa todo el espacio disponible */
.wiki-imagen-portada {
  flex:          1;        /* llena el espacio restante del flex-column */
  width:         100%;
  min-height:    0;        /* necesario para flex:1 en Safari */
  object-fit:    cover;
  border-radius: 10px;
  display:       block;
  opacity:       0.92;
  margin-top:    0.6rem;
}

/* Imagen inline (legacy — se mantiene por compatibilidad) */
.wiki-imagen {
  display:       block;
  width:         100%;
  max-height:    180px;
  object-fit:    cover;
  border-radius: 10px;
  margin:        0.6rem 0 0.8rem;
  opacity:       0.92;
  flex-shrink:   0;   /* no se encoge si hay poco espacio vertical */
}

/* ─────────────────────────────────────────
   PANTALLA — Calma
   Dos fases: respiración (fase1) + paisajes (fase2)
───────────────────────────────────────── */
#pantalla-calma {
  overflow: hidden;
}

/* Header calma: siempre por encima de ambas fases */
.calma-header {
  position:        absolute;
  top:             0;
  left:            0;
  right:           0;
  padding:         max(env(safe-area-inset-top), 16px) 20px 16px;
  z-index:         10;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  pointer-events:  none;   /* el header en sí no bloquea clicks al fondo */
}

.calma-header > * {
  pointer-events: auto;    /* los botones sí reciben clicks */
}

/* btn-nav sobre fondo oscuro/blureado */
.calma-btn-nav {
  color:      rgba(255, 255, 255, 0.80) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border:     1px solid rgba(255, 255, 255, 0.18) !important;
}

.calma-btn-nav:hover {
  color:      rgba(255, 255, 255, 1)   !important;
  background: rgba(0, 0, 0, 0.32)      !important;
}

/* Contenedor de fase: transiciones de opacidad */
.calma-fase {
  transition: opacity 0.6s ease;
}

/* ── FASE 1 ── */

#calma-fase1 {
  flex:            1;            /* ocupa todo el espacio de la pantalla */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             28px;
  padding:         max(env(safe-area-inset-top), 64px) 24px max(env(safe-area-inset-bottom), 88px);
  text-align:      center;
}

/* Envoltorio del círculo: define el área de los anillos */
.resp-wrapper {
  position:        relative;
  width:           280px;
  height:          280px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Círculo central de respiración */
.resp-circulo {
  position:      absolute;
  top:  50%; left: 50%;
  width:  160px;
  height: 160px;
  border-radius: 50%;

  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: rgba(255, 255, 255, 0.12);
  border:     1px solid rgba(255, 255, 255, 0.25);

  animation: respirar-circulo 30s infinite;
  animation-timing-function: ease-in; /* se sobreescribe por keyframe */

  z-index: 1;
}

/* Anillos concéntricos — decorativos, se expanden con el círculo */
.resp-anillo {
  position:      absolute;
  top:  50%; left: 50%;
  border-radius: 50%;
  border:        1px solid transparent;
}

.resp-anillo--1 {
  width: 200px; height: 200px;
  border-color: rgba(255, 255, 255, 0.14);
  animation: respirar-anillo-1 30s infinite;
  animation-timing-function: ease-in;
}

.resp-anillo--2 {
  width: 240px; height: 240px;
  border-color: rgba(255, 255, 255, 0.08);
  animation: respirar-anillo-2 30s infinite;
  animation-timing-function: ease-in;
}

.resp-anillo--3 {
  width: 280px; height: 280px;
  border-color: rgba(255, 255, 255, 0.04);
  animation: respirar-anillo-3 30s infinite;
  animation-timing-function: ease-in;
}

/* Animación principal del círculo: inhalar(8s) → sostener(10s) → exhalar(12s) = 30s */
@keyframes respirar-circulo {
  0% {
    transform: translate(-50%, -50%) scale(0.60);
    opacity:   0.40;
    animation-timing-function: ease-in;       /* inhalar: comienza despacio */
  }
  26.67% {                                    /* 8s/30s — fin del inhalar */
    transform: translate(-50%, -50%) scale(1.50);
    opacity:   0.90;
    animation-timing-function: linear;        /* sostener: sin cambio */
  }
  60% {                                       /* 18s/30s — fin del sostener */
    transform: translate(-50%, -50%) scale(1.50);
    opacity:   0.90;
    animation-timing-function: ease-out;      /* exhalar: natural, se va asentando */
  }
  100% {                                      /* 30s — fin del exhalar */
    transform: translate(-50%, -50%) scale(0.60);
    opacity:   0.40;
  }
}

@keyframes respirar-anillo-1 {
  0%     { transform: translate(-50%, -50%) scale(0.65); opacity: 0.10; animation-timing-function: ease-in; }
  26.67% { transform: translate(-50%, -50%) scale(1.50); opacity: 0.14; animation-timing-function: linear; }
  60%    { transform: translate(-50%, -50%) scale(1.50); opacity: 0.14; animation-timing-function: ease-out; }
  100%   { transform: translate(-50%, -50%) scale(0.65); opacity: 0.10; }
}

@keyframes respirar-anillo-2 {
  0%     { transform: translate(-50%, -50%) scale(0.60); opacity: 0.06; animation-timing-function: ease-in; }
  26.67% { transform: translate(-50%, -50%) scale(1.50); opacity: 0.09; animation-timing-function: linear; }
  60%    { transform: translate(-50%, -50%) scale(1.50); opacity: 0.09; animation-timing-function: ease-out; }
  100%   { transform: translate(-50%, -50%) scale(0.60); opacity: 0.06; }
}

@keyframes respirar-anillo-3 {
  0%     { transform: translate(-50%, -50%) scale(0.55); opacity: 0;    animation-timing-function: ease-in; }
  26.67% { transform: translate(-50%, -50%) scale(1.50); opacity: 0.05; animation-timing-function: linear; }
  60%    { transform: translate(-50%, -50%) scale(1.50); opacity: 0.05; animation-timing-function: ease-out; }
  100%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
}

/* Movimiento reducido: sin animación de respiración */
@media (prefers-reduced-motion: reduce) {
  .resp-circulo, .resp-anillo {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1.00) !important;
    opacity: 0.85 !important;
  }
}

/* Texto psicoeducativo */
.resp-texto {
  max-width: 320px;
  width: 100%;
}

.resp-accion {
  font-size:      22px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.92);
  margin-bottom:  14px;
  opacity:        0;
  transition:     opacity 0.4s ease;
}

.resp-explicacion {
  font-size:      15px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.65);
  line-height:    1.9;
  white-space:    pre-line;   /* respetar los \n del JSON */
  opacity:        0;
  transition:     opacity 0.4s ease;
}

.resp-accion.resp-texto-visible,
.resp-explicacion.resp-texto-visible {
  opacity: 1;
}

/* Dots de ciclos */
.resp-dots {
  display:    flex;
  gap:        10px;
  transition: opacity 0.6s ease;
}

.resp-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  border:        1px solid rgba(255, 255, 255, 0.38);
  background:    transparent;
  transition:    background 0.4s ease, border-color 0.4s ease;
}

.resp-dot--lleno {
  background:   rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.65);
}

/* Botón "cuando estés listo, seguí →" */
.btn-continuar {
  font-size:      13px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.38);
  letter-spacing: 0.08em;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px 4px;

  opacity:    1;
  transition: opacity 0.5s ease, color 0.3s ease;
}

.btn-continuar.oculto {
  opacity:        0;
  pointer-events: none;
}

.btn-continuar:hover {
  color: rgba(255, 255, 255, 0.72);
}

.btn-continuar:focus-visible {
  outline:        1px solid rgba(255, 255, 255, 0.40);
  outline-offset: 4px;
}

/* Hint de audio */
.calma-audio-hint {
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.42);
  letter-spacing: 0.04em;
  opacity:        1;
  transition:     opacity 0.5s ease;
  pointer-events: none;
}

.calma-audio-hint.oculto {
  opacity: 0;
}

/* Botón "siguiente paisaje" — vive en calma-header, oculto en fase 1 */
.calma-sig-video-btn {
  /* Sin posicionamiento propio: hereda el flow del header flex */
}

/* ── FASE 2 ── */

.calma-fase2 {
  position: absolute;
  inset:    0;
  display:  none;     /* mostrado/ocultado por JS */
  z-index:  5;        /* sobre fase 1, bajo calma-header (z:10) */
}

/* Video de fondo */
.calma-bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    1;
}

/* Fallback: gradiente oscuro cuando no hay video */
.calma-fallback {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(22, 32, 44, 1) 0%, rgba(10, 18, 28, 1) 100%);
  z-index:    0;
}

/* Overlay muy sutil — solo para legibilidad, no oscurecer el video */
.calma-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.20);
  z-index:    2;
}

/* Contenedor de la frase — solo sirve como región aria-live */
.calma-frase-wrap {
  pointer-events: none;
}

/* Frase contemplativa — posición fija, anclada en la parte baja de pantalla */
.frase-calma {
  position:       fixed;
  bottom:         140px;
  left:           0;
  right:          0;
  text-align:     center;
  font-size:      22px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.88);
  text-shadow:    0 2px 20px rgba(0, 0, 0, 0.50);
  letter-spacing: 0.02em;
  line-height:    1.6;
  padding:        0 2.5rem;
  pointer-events: none;
  z-index:        10;

  opacity:    0;
  transition: opacity 2s ease;
}

.frase-calma.frase-visible {
  opacity: 1;
}

/* ─────────────────────────────────────────
   PANTALLA — Videos ("Quiero ver algo")
   Scroll vertical con snap, un video por slide.
───────────────────────────────────────── */
#pantalla-ver {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

/* Contenedor principal: snap scroll vertical */
.videos-feed {
  flex:                        1;
  overflow-y:                  scroll;
  scroll-snap-type:            y mandatory;
  scroll-behavior:             smooth;
  -webkit-overflow-scrolling:  touch;
  overscroll-behavior:         contain;
}

/* Un slide = una "pantalla" completa del feed */
.video-slide {
  height:            100%;
  scroll-snap-align: start;
  display:           flex;
  flex-direction:    column;
  justify-content:   center;
  padding:           16px 0 calc(env(safe-area-inset-bottom) + 72px);
  gap:               16px;
}

/* Wrapper del video — full width, sin card glass */
.video-wrapper {
  width:         100%;
  aspect-ratio:  16 / 9;
  border-radius: 12px;
  overflow:      hidden;
  background:    rgba(0, 0, 0, 0.30);
}

.video-wrapper iframe,
.video-wrapper video {
  width:        100%;
  height:       100%;
  border:       none;
  display:      block;
  border-radius: inherit;
}

/* Controles nativos del <video> (NASA MP4): fondo semi-opaco para legibilidad */
.video-wrapper video::-webkit-media-controls-panel {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55));
}

/* Descripción del video — línea adicional bajo el meta */
.video-descripcion {
  font-size:   13px;
  color:       rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin-top:  6px;
  line-height: 1.4;
}

/* Placeholder cuando youtube_id es TBD */
.video-placeholder {
  width:                   100%;
  height:                  100%;
  display:                 flex;
  flex-direction:          column;
  align-items:             center;
  justify-content:         center;
  gap:                     10px;
  background:              rgba(10, 18, 28, 0.40);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-placeholder-label {
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.10em;
  color:          rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  margin:         0;
}

.video-placeholder-titulo {
  font-size:   16px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.65);
  text-align:  center;
  padding:     0 24px;
  margin:      0;
  line-height: 1.4;
}

.video-placeholder-meta {
  font-size: 12px;
  color:     rgba(255, 255, 255, 0.35);
  margin:    0;
}

/* Información: título y canal */
.video-info {
  padding: 0 20px;
}

.video-titulo {
  font-size:   18px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.90);
  margin:      0 0 6px;
  line-height: 1.4;
}

.video-meta-text {
  font-size:      13px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.45);
  letter-spacing: 0.03em;
  margin:         0;
}

/* Hint de scroll — aparece a los 3s, pulsa, desaparece al primer scroll */
.scroll-hint {
  text-align:     center;
  font-size:      12px;
  color:          rgba(255, 255, 255, 0.25);
  letter-spacing: 0.10em;
  padding-bottom: 8px;
  opacity:        0;
  transition:     opacity 0.6s ease;
  pointer-events: none;
}

.scroll-hint--visible {
  animation: pulseHint 2s ease-in-out infinite;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.25; transform: translateY(0);   }
  50%       { opacity: 0.50; transform: translateY(4px); }
}

/* ─────────────────────────────────────────
   PANTALLA — Música
   Video de paisaje + controles flotantes
───────────────────────────────────────── */
#pantalla-musica {
  overflow: hidden;
}

/* Video de fondo: ocupa toda la pantalla */
.musica-bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    1;
}

/* Fallback: siempre visible como capa base, cubierto por el video cuando carga */
.musica-fallback {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    180deg,
    rgba(25, 38, 52, 1) 0%,
    rgba(12, 22, 34, 1) 100%
  );
  z-index: 0;
}

/* Overlay sutil: solo para que el texto flotante sea legible */
.musica-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.25);
  z-index:    2;
}

/* Header mínimo: solo botón volver */
.musica-header {
  position: absolute;
  top:      0;
  left:     0;
  right:    0;
  padding:  max(env(safe-area-inset-top), 16px) 20px 16px;
  display:  flex;
  align-items: center;
  z-index:  3;
}

/* Override del btn-nav para fondo oscuro del video */
.musica-btn-nav {
  color:      rgba(255, 255, 255, 0.85) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border:     1px solid rgba(255, 255, 255, 0.16) !important;
}

.musica-btn-nav:hover {
  color:      rgba(255, 255, 255, 1)    !important;
  background: rgba(0, 0, 0, 0.42)       !important;
}

/* Info de la pista: texto flotante sobre el video */
.track-info {
  position:   absolute;
  bottom:     180px;
  left:       0;
  right:      0;
  text-align: center;
  z-index:    3;
  padding:    0 2rem;
}

.track-title {
  font-size:   22px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
  line-height: 1.3;
  margin-bottom: 6px;
}

.track-meta {
  font-size:      13px;
  color:          rgba(255, 255, 255, 0.50);
  letter-spacing: 0.04em;
}

/* Hint "tocá ▶ para empezar" */
.music-hint {
  position:   absolute;
  bottom:     157px;
  left:       0;
  right:      0;
  text-align: center;
  z-index:    3;
  font-size:  12px;
  color:      rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  pointer-events: none;

  opacity:    1;
  transition: opacity 0.5s ease;
}

.music-hint.oculto {
  opacity: 0;
}

/* Barra de progreso */
.progress-wrap {
  position: absolute;
  bottom:   130px;
  left:     5%;
  right:    5%;
  z-index:  3;
}

.progress-bar {
  position:      relative;
  height:        3px;
  background:    rgba(255, 255, 255, 0.20);
  border-radius: 2px;
  cursor:        pointer;
}

/* Zona táctil ampliada sin afectar el visual */
.progress-bar::before {
  content:  '';
  position: absolute;
  top:     -12px;
  bottom:  -12px;
  left:    0;
  right:   0;
}

.progress-fill {
  height:        100%;
  width:         0%;
  background:    rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  pointer-events: none;
}

.progress-thumb {
  position:      absolute;
  top:           50%;
  left:          0%;
  width:         14px;
  height:        14px;
  background:    white;
  border-radius: 50%;
  transform:     translate(-50%, -50%);
  box-shadow:    0 2px 8px rgba(0, 0, 0, 0.30);
  pointer-events: none;
  transition:    transform 0.1s ease;
}

.progress-bar:active .progress-thumb {
  transform: translate(-50%, -50%) scale(1.3);
}

.progress-times {
  display:         flex;
  justify-content: space-between;
  margin-top:      10px;
  font-size:       11px;
  color:           rgba(255, 255, 255, 0.40);
  letter-spacing:  0.02em;
  pointer-events:  none;
}

/* Botón Play/Pause */
.play-btn {
  position:  absolute;
  bottom:    80px;
  left:      50%;
  transform: translateX(-50%);
  width:     72px;
  height:    72px;
  border-radius: 50%;

  background:      rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border:     1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);

  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         3;

  transition:
    transform   0.15s ease,
    background  0.20s ease;
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.play-btn:active {
  transform: translateX(-50%) scale(0.93);
  transition-duration: 0.10s;
}

.play-btn:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.60);
  outline-offset: 4px;
}

/* Anillo de progreso — tap largo */
.anillo-progreso {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.1s;
}

.anillo-progreso.activo {
  opacity: 1;
}

/* Hint "mantené presionado" */
.music-hint-largo {
  position:   absolute;
  bottom:     calc(80px - 28px);   /* justo debajo del play-btn */
  left:       50%;
  transform:  translateX(-50%);
  font-size:  12px;
  color:      rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  pointer-events: none;
  z-index:    3;
  transition: opacity 0.4s ease;
}

.music-hint-largo.oculto {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .play-btn { transition: none; }
}

/* ─────────────────────────────────────────
   PANTALLA — Perfil etario
   Fondo del Fuji visible a través del glass
   más transparente; texto e íconos en blanco.
───────────────────────────────────────── */
#pantalla-perfil {
  align-items:         center;
  justify-content:     center;
  overflow-y:          auto;
  overscroll-behavior: contain;
}

.perfil-contenido {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            32px;
  padding:        max(env(safe-area-inset-top), 48px) 20px max(env(safe-area-inset-bottom), 32px);
  width:          100%;
  max-width:      480px;
}

/* Entrada: fade + deslizamiento desde abajo */
#pantalla-perfil.activa .perfil-contenido {
  animation: perfil-entrar 350ms ease both;
}

@keyframes perfil-entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
  #pantalla-perfil.activa .perfil-contenido {
    animation: none;
  }
}

.perfil-encabezado {
  text-align:  center;
  padding-top: 8px;
}

.perfil-pregunta {
  font-size:      26px;
  font-weight:    500;
  color:          rgba(255, 255, 255, 0.92);
  line-height:    1.3;
  margin-bottom:  8px;
}

.perfil-sub {
  font-size:      13px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.50);
  letter-spacing: 0.02em;
}

/* Grid 2×2 fijo — 4 plantas siempre en cuadrícula */
.perfil-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
  width:                 100%;
}

/* Card — glass más transparente para dejar ver el fondo */
.perfil-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1.5rem;
  cursor:          pointer;
  width:           100%;

  background:      rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border:          1px solid rgba(255, 255, 255, 0.20);
  border-radius:   20px;
  box-shadow:      0 4px 24px rgba(0, 0, 0, 0.10);

  /* currentColor hereda a los SVG hijos */
  color: rgba(255, 255, 255, 0.85);

  transition:
    transform   0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background  0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow  0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.perfil-card:hover {
  transform:  translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.perfil-card:active {
  transform:           scale(0.97);
  transition-duration: 0.10s;
}

.perfil-card:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.60);
  outline-offset: 3px;
}

/* Contenedor del ícono — tamaño fijo para alinear todas las plantas */
.perfil-icono {
  display:         flex;
  align-items:     flex-end;  /* anclar la planta a la base */
  justify-content: center;
  width:           44px;
  height:          58px;
  flex-shrink:     0;
}

.perfil-icono svg {
  width:  100%;
  height: 100%;
  overflow: visible;  /* raíces del árbol pueden sobresalir */
}

/* Rango de edad — sin nombre de perfil */
.perfil-edad {
  font-size:      13px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.60);
  letter-spacing: 0.05em;
  margin-top:     1rem;
  text-align:     center;
}

@media (prefers-reduced-motion: reduce) {
  .perfil-card {
    transition: none;
  }
  .perfil-card:hover {
    transform: none;
  }
}

/* ─────────────────────────────────────────
   PAUSA VISUAL — overlay contemplativo
   Aparece tras 20 min de sesión activa,
   en el próximo momento de transición natural.
───────────────────────────────────────── */

.pausa-overlay {
  position:   fixed;
  inset:      0;
  z-index:    100;  /* encima de todo */
  opacity:    0;
  transition: opacity 1.5s ease;
}

.pausa-overlay.visible {
  opacity: 1;
}

/* Video de fondo */
.pausa-bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}

/* Fallback oscuro cuando no hay video */
.pausa-fondo-oscuro {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, #161c2c 0%, #0a121c 100%);
  z-index:    0;
}

/* Overlay muy sutil sobre el video */
.pausa-tenue {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.20);
  z-index:    1;
}

/* Frase contemplativa */
.pausa-frase {
  position:       fixed;
  bottom:         140px;
  left:           0;
  right:          0;
  text-align:     center;
  font-size:      22px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.88);
  text-shadow:    0 2px 20px rgba(0, 0, 0, 0.50);
  letter-spacing: 0.02em;
  line-height:    1.6;
  padding:        0 2.5rem;
  pointer-events: none;
  z-index:        2;
  opacity:        0;  /* gestionado por Web Animations API */
}

/* Botón continuar — aparece recién a los 30s */
.pausa-continuar {
  position:       fixed;
  bottom:         80px;
  left:           50%;
  transform:      translateX(-50%);
  font-size:      13px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.30);
  background:     none;
  border:         none;
  cursor:         pointer;
  letter-spacing: 0.08em;
  z-index:        3;
  opacity:        0;
  transition:     opacity 0.8s ease, color 0.3s ease;
}

.pausa-continuar.visible {
  opacity: 1;
}

.pausa-continuar:hover {
  color: rgba(255, 255, 255, 0.70);
}

/* ─────────────────────────────────────────
   Fallback: navegadores sin backdrop-filter
───────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .glass-btn,
  .glass-header {
    background: rgba(240, 232, 218, 0.80);
  }

  .btn-nav {
    background: rgba(240, 232, 218, 0.80);
  }
}