/* ============ MUNDO BÍBLICO — El Mundo de Manu ============ */
:root{
  --noche:#0B1026;
  --noche2:#121A3A;
  --navy:#0D1F3C;          /* El color insignia de mi marca */
  --lumen:#F0A500;         /* Mi color oro distintivo */
  --lumen-suave:#F5C451;
  --turquesa:#00C2A8;      /* Mi turquesa complementario */
  --alba:#FDF6EC;
  --texto:#E8E6F0;
  --texto-suave:#A9A6C0;
  --vidrio:rgba(255,255,255,.06);
  --borde:rgba(245,196,81,.18);
  --radio:18px;
  --transicion:.45s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--noche);
  color:var(--texto);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif}

/* ---- Fondo mágico de estrellas y luces sutiles ---- */
.cielo{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(240,165,0,.14), transparent 60%),
  radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,194,168,.08), transparent 60%),
  var(--noche);}
.estrella{position:fixed;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.35;z-index:-1;animation:titilar 4s ease-in-out infinite}
@keyframes titilar{0%,100%{opacity:.15}50%{opacity:.6}}

/* ---- Mi menú de navegación responsivo ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;background:rgba(11,16,38,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;color:var(--alba);text-decoration:none}
.logo span{color:var(--lumen)}
.logo small{display:block;font-family:'Inter';font-weight:500;font-size:.6rem;letter-spacing:.12em;color:var(--texto-suave);text-transform:uppercase}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{color:var(--texto-suave);text-decoration:none;font-size:.9rem;font-weight:500;transition:color var(--transicion)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--lumen-suave)}
.menu-btn{display:none;background:none;border:none;color:var(--alba);font-size:1.6rem;cursor:pointer}

/* ---- Mi botón flotante SOS ---- */
.sos-flotante{position:fixed;bottom:22px;right:22px;z-index:60;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--lumen),#d98e00);color:var(--navy);font-weight:700;font-size:.9rem;
  border:none;border-radius:999px;padding:14px 20px;cursor:pointer;box-shadow:0 8px 30px rgba(240,165,0,.45);
  transition:transform var(--transicion),box-shadow var(--transicion)}
.sos-flotante:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 40px rgba(240,165,0,.6)}

/* ---- Sección de bienvenida (Hero) ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 6vw 60px;position:relative}
.hero .eyebrow{letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;color:var(--turquesa);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:600;color:var(--alba);max-width:850px;line-height:1.15}
.hero h1 em{font-style:italic;color:var(--lumen-suave)}
.hero p{max-width:560px;margin:22px auto 36px;color:var(--texto-suave);font-size:1.08rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;border:none;transition:transform var(--transicion),box-shadow var(--transicion)}
.btn-oro{background:linear-gradient(135deg,var(--lumen-suave),var(--lumen));color:var(--navy)}
.btn-oro:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(240,165,0,.4)}
.btn-fantasma{background:var(--vidrio);color:var(--alba);border:1px solid var(--borde);backdrop-filter:blur(10px)}
.btn-fantasma:hover{border-color:var(--lumen-suave);transform:translateY(-2px)}
.gratis-badge{margin-top:34px;font-size:.8rem;color:var(--turquesa);display:flex;align-items:center;gap:8px}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--texto-suave);font-size:1.4rem;animation:flotar 2.2s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ---- Estilos generales para las secciones ---- */
section{padding:90px 6vw;max-width:1180px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:50px}
.sec-head .eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--turquesa);font-weight:600}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--alba);margin-top:10px;font-weight:600}
.sec-head p{color:var(--texto-suave);max-width:520px;margin:14px auto 0}

/* ---- Tarjeta del versículo del día ---- */
.verso-card{position:relative;background:linear-gradient(160deg,var(--noche2),var(--navy));border:1px solid var(--borde);
  border-radius:26px;padding:clamp(36px,6vw,70px);text-align:center;overflow:hidden}
.verso-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(240,165,0,.12),transparent 65%);pointer-events:none}
.verso-texto{font-family:'Fraunces',serif;font-size:clamp(1.4rem,3.3vw,2.1rem);font-style:italic;color:var(--alba);line-height:1.5;max-width:760px;margin:0 auto}
.verso-ref{margin-top:20px;color:var(--lumen-suave);font-weight:600;letter-spacing:.06em}
.verso-reflexion{margin-top:22px;color:var(--texto-suave);max-width:600px;margin-left:auto;margin-right:auto;font-size:.98rem}
.verso-acciones{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-mini{padding:11px 22px;font-size:.85rem;border-radius:999px;cursor:pointer;border:1px solid var(--borde);background:var(--vidrio);color:var(--alba);font-weight:600;transition:all var(--transicion)}
.btn-mini:hover{border-color:var(--turquesa);color:var(--turquesa)}

/* ---- Estructura de cuadrícula (Grid) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:var(--vidrio);border:1px solid rgba(255,255,255,.07);border-radius:var(--radio);padding:28px;
  backdrop-filter:blur(12px);cursor:pointer;transition:transform var(--transicion),border-color var(--transicion),background var(--transicion)}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:var(--borde);background:rgba(255,255,255,.09)}
.card .icono{font-size:1.9rem;margin-bottom:14px;display:block}
.card h3{color:var(--alba);font-size:1.12rem;font-weight:600;margin-bottom:8px}
.card p{color:var(--texto-suave);font-size:.88rem}
.card .tag{display:inline-block;margin-top:14px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--turquesa);font-weight:600}

/* ==========================================================================
   MIS TARJETAS MULTIMEDIA ACTUALIZADAS (AUDIO / VIDEO PREMIUM)
   ========================================================================== */

/* Configuro mi cuadrícula multimedia independiente para que las tarjetas sean 
   más anchas (mínimo 360px). Así evito que los textos largos se vayan tan abajo. */
#multimedia .grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 30px;
  align-items: stretch; /* Mantiene todas mis tarjetas con el mismo alto estético */
}

.media-card {
  background: linear-gradient(145deg, var(--noche2), rgba(13,31,60,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column; /* Organizo mi contenido en vertical */
  transition: all var(--transicion);
  backdrop-filter: blur(10px);
}

.media-card:hover {
  transform: translateY(-4px);
  border-color: var(--borde);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.media-icono {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.media-card h3 {
  color: var(--alba);
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.media-sub {
  color: var(--turquesa);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mi reproductor de audio adaptado */
.reproductor-audio {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
  outline: none;
}

/* Mi contenedor de video en formato 16:9 */
.video-container {
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 16 / 9;
}

.video-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* SOLUCIÓN AL ESPACIO BLANCO: Esta es mi cajita de la frase optimizada. 
   Uso flex-grow para que ocupe el espacio disponible y align-items: center 
   para que los textos cortos queden perfectamente en la mitad sin dejar vacíos. */
.media-frase {
  background: rgba(253,246,236,0.03);
  border-left: 3px solid var(--lumen);
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin-top: 12px;
  
  flex-grow: 1;         /* Hago que la caja llene dinámicamente el alto sobrante */
  display: flex;         /* Activo flexbox interno dentro de la cajita */
  align-items: center;   /* ¡Esto centra mis frases cortas verticalmente en la mitad! */
}

.media-frase p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texto);
  line-height: 1.55;
  width: 100%;           /* Aseguro que el párrafo use todo el ancho interno */
} 

/* ---- Modales Genéricos ---- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:5vw;
  background:rgba(5,8,22,.85);backdrop-filter:blur(8px)}
.modal.abierto{display:flex;animation:aparecer .4s ease}
@keyframes desaparecer{from{opacity:1}to{opacity:0}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal-caja{background:linear-gradient(165deg,var(--noche2),var(--navy));border:1px solid var(--borde);border-radius:24px;
  max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:clamp(28px,5vw,46px);position:relative;text-align:center}
.cerrar{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--texto-suave);font-size:1.5rem;cursor:pointer}
.cerrar:hover{color:var(--alba)}
.modal-caja h3{color:var(--lumen-suave);font-size:1.5rem;margin-bottom:16px}
.modal-caja .oracion-texto{font-family:'Fraunces',serif;font-style:italic;font-size:1.08rem;color:var(--alba);line-height:1.8;white-space:pre-line;text-align:left}
.modal-caja .verso-apoyo{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:var(--turquesa);font-size:.9rem}

/* ---- SOS: Mecanismo de respiración rítmica ---- */
.respira{width:170px;height:170px;margin:26px auto;border-radius:50%;
  background:radial-gradient(circle,rgba(240,165,0,.35),rgba(240,165,0,.06) 70%);
  border:2px solid var(--lumen-suave);display:flex;align-items:center;justify-content:center;
  font-weight:600;color:var(--alba);animation:respirar 8s ease-in-out infinite}
@keyframes respirar{0%,100%{transform:scale(.82)}50%{transform:scale(1.12)}}
.sos-paso{color:var(--texto-suave);font-size:.92rem;margin-top:8px}

/* ---- Área de redacción de cartas ---- */
.carta-area{width:100%;min-height:190px;background:rgba(253,246,236,.04);border:1px solid var(--borde);border-radius:14px;
  color:var(--alba);font-family:'Fraunces',serif;font-size:1.02rem;padding:18px;resize:vertical;line-height:1.7}
.carta-area:focus{outline:2px solid var(--lumen-suave);outline-offset:2px}
.carta-area::placeholder{color:var(--texto-suave);font-style:italic}

/* ---- Opciones interactivas de la Trivia ---- */
.trivia-op{display:block;width:100%;text-align:left;margin:9px 0;padding:14px 18px;border-radius:12px;
  background:var(--vidrio);border:1px solid rgba(255,255,255,.1);color:var(--alba);font-size:.95rem;cursor:pointer;transition:all .25s}
.trivia-op:hover{border-color:var(--turquesa)}
.trivia-op.bien{background:rgba(0,194,168,.22);border-color:var(--turquesa)}
.trivia-op.mal{background:rgba(220,80,80,.2);border-color:#d05050}

/* ---- Sistema visual de las velas encendidas ---- */
.altar{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:26px;min-height:60px}
.vela{display:flex;flex-direction:column;align-items:center;gap:4px;animation:aparecer .6s ease}
.flama{width:14px;height:22px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 30%,#fff7d6,var(--lumen) 60%,#d96a00);
  animation:flamear 1.4s ease-in-out infinite alternate;box-shadow:0 0 18px rgba(240,165,0,.8)}
@keyframes flamear{from{transform:scaleY(1) rotate(-2deg)}to{transform:scaleY(1.12) rotate(2deg)}}
.cuerpo-vela{width:12px;height:34px;background:linear-gradient(#FDF6EC,#d9cfc0);border-radius:3px}
.vela small{font-size:.62rem;color:var(--texto-suave);max-width:84px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Footer ---- */
footer{border-top:1px solid rgba(255,255,255,.06);padding:50px 6vw 35px;text-align:center;color:var(--texto-suave);font-size:.85rem}
footer .logo{justify-content:center;margin-bottom:14px}
footer .nota-fe{max-width:520px;margin:0 auto 18px;font-size:.8rem}
footer .manu{color:var(--lumen-suave)}

/* ---- Alertas flotantes (Toasts) ---- */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--turquesa);color:var(--navy);font-weight:600;font-size:.88rem;padding:12px 24px;border-radius:999px;
  opacity:0;pointer-events:none;transition:all .4s ease}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Reglas Responsive / Adaptabilidad móvil ---- */
@media(max-width:780px){
  .nav-links{position:fixed;top:62px;right:0;flex-direction:column;background:rgba(11,16,38,.97);
    width:230px;padding:24px;gap:18px;border-radius:0 0 0 18px;transform:translateX(110%);transition:transform var(--transicion)}
  .nav-links.abierto{transform:translateX(0)}
  .menu-btn{display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--lumen-suave);outline-offset:3px;border-radius:6px}