:root{
  /* Base medio-oscura con énfasis morado/azul */
  --bg:#111528; --card:#151b2f; --muted:#9aa7bd; --text:#eaf0ff; --danger:#ef4444; --radius:18px;
  --md-surface:#121a2b;
  --md-outline: rgba(148,163,184,.24);
  --md-primary:#0a84ff; /* Azul */
  --md-primary-variant:#1b6cff; /* Azul profundo */
  --md-secondary:#7c3aed; /* Violeta */
  --md-secondary-variant:#22d3ee; /* Cian */
  --md-whatsapp:#25D366;
  --ring: rgba(124,58,237,.45);
}
/* Variables animables para brillo (desktop) */
@property --violet-a { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --cyan-a { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: linear-gradient(180deg, #151b2f 0%, #151b2f 100%);
  color:var(--text); position:relative;
}
/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; min-height:56px; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(17,21,40,.65), rgba(17,21,40,.35));
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.site-header .brand-mini{ display:flex; align-items:center; gap:10px; color:#eaf0ff; font-weight:800; letter-spacing:.3px; text-decoration:none }
.site-header .brand-mini img{ width:34px; height:34px; border-radius:50%; border:2px solid var(--md-primary); background:#fff; object-fit:cover }
.nav{ display:flex; align-items:center; gap:14px }
.nav-drawer{ display:none }
.nav a{ color:#eaf0ff; text-decoration:none; font-weight:700; font-size:14px; padding:8px 10px; border-radius:10px; border:1px solid transparent }
.nav a:hover{ background: rgba(255,255,255,.06); border-color: rgba(148,163,184,.25) }

/* Hamburger (mobile) */
.nav-toggle{ display:none }
.hamburger{ display:none; width:42px; height:42px; border-radius:12px; place-items:center; border:1px solid rgba(148,163,184,.25); color:#eaf0ff; cursor:pointer; }
.hamburger span{ font-size:20px; line-height:1 }

@media (max-width: 820px){
  .nav{ display:none }
  .hamburger{ display:inline-grid }
  .nav-drawer{ position: fixed; inset: 58px 12px auto 12px; z-index: 60; display:none }
  .nav-drawer .drawer{
    background: #0b1120; /* fondo sólido para legibilidad */
    border:1px solid rgba(148,163,184,.35); border-radius:14px; padding:12px;
    box-shadow: 0 22px 48px rgba(0,0,0,.55);
  }
  .nav-drawer a{ display:block; padding:10px 12px; border-radius:10px; color:#eaf0ff; text-decoration:none; font-weight:700; border:1px solid transparent }
  .nav-drawer a:hover{ background: rgba(255,255,255,.08); border-color: rgba(148,163,184,.28) }
  .nav-toggle:checked ~ .nav-drawer{ display:block }
}
/* Capa animada sin líneas (desktop) */
body::before{
  content:""; position:fixed; inset:-20vh -20vw; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 20% 10%, rgba(168 85 247 / var(--violet-a)), rgba(168,85,247,0) 60%),
    radial-gradient(closest-side at 80% 85%, rgba(14 165 233 / var(--cyan-a)), rgba(14,165,233,0) 60%),
    radial-gradient(closest-side at 50% 50%, rgba(10 132 255 / 30%), rgba(10,132,255,0) 60%);
  filter: blur(24px); opacity:.9; mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: blobDrift 8s linear infinite alternate, bgPulse 2s ease-in-out infinite;
}
.container{ max-width:1100px; margin:0 auto; padding:28px 20px; position:relative; z-index:1 }
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px }
@media (max-width: 980px){ .grid{ grid-template-columns:1fr } }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(148,163,184,.35);
  border-radius: var(--radius); padding:26px; box-shadow: 0 20px 50px rgba(0,0,0,.35); backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.brand-logo{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--md-primary); background:white; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.25); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#e2e8f0; font-size:12px; font-weight:700; }
.title{ font-size: clamp(28px, 3.2vw, 40px); line-height:1.1; margin:0 0 10px; font-weight:800 }
.lead{ margin:0 0 18px; color: var(--muted); font-size: clamp(14px, 1.6vw, 16px) }
.kpi{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 6px }
.kpi div{ border:1px solid rgba(148,163,184,.26); border-radius:12px; padding:8px 12px; font-size:13px; color:#cbd5e1; background: rgba(2,6,23,.35); }

button{
  appearance:none; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--md-secondary), var(--md-primary));
  color:white; font-weight:800; letter-spacing:.3px; padding:14px 18px; border-radius:14px; font-size:16px;
  transition:.2s transform, .2s box-shadow, .2s opacity; box-shadow: 0 12px 30px rgba(10,132,255,.30);
}
button:hover{ transform: translateY(-1px) }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap }
.btn-outline{
  background: transparent; color:#e5e7eb; border:1px solid var(--md-outline);
  border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; box-shadow:none;
}
.slogan{ color:#e5e7eb; font-weight:800; margin:6px 0 0; }
.verse{ color:#cbd5e1; font-style:italic; margin:12px 0 0; }
.map{ width:100%; height:340px; border:0; border-radius:12px }
.map-actions{ margin-top:12px; display:flex; gap:12px; flex-wrap:wrap }

/* (sin carrusel) */

/* WhatsApp Floating Action Button */
.fab-whatsapp{
  position: fixed; right: 18px; bottom: 18px; z-index: 800;
  width: 56px; height: 56px; border-radius: 28px;
  display: inline-grid; place-items:center; text-decoration:none;
  background: linear-gradient(135deg, var(--md-whatsapp), #1ebe5d);
  color: white; box-shadow: 0 14px 32px rgba(37,211,102,.35);
  transition:.2s transform, .2s box-shadow; border: 0;
}
.fab-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(37,211,102,.45); }
.fab-whatsapp svg{ width:26px; height:26px; display:block; }

/* Forms / Inputs (Biblia search) */
form.search{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px }
.search input[type="text"], .search select{
  flex:0 1 auto;
  background:#121a2b; color:var(--text);
  border:1px solid rgba(148,163,184,.3); padding:12px 14px; border-radius:12px; outline:none;
  transition:.2s border-color, .2s box-shadow;
}
.search input[type="text"]:focus, .search select:focus{ border-color: var(--md-primary); box-shadow: 0 0 0 4px rgba(10,132,255,.2) }
/* Anchos compactos para selector */
#bookSelect{ width: 220px; }
#chapterSelect, #verseSelect{ width: 120px; }
#query{ width: 240px; }

/* Mejorar apariencia de selects (flecha separada del borde) */
.search select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23eaf0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.reader{
  margin-top:14px; border-radius:12px; border:1px solid rgba(148,163,184,.28);
  background: #0f172a;
  max-height: 340px; /* ~5 versículos visibles aprox. */
  overflow: auto; /* scroll interno */
}
.search#chapterNav{ display:none; justify-content:center; gap:10px; margin-top: 12px; }
.search#chapterNav.show{ display:flex; }
.search#chapterNav button{ display:inline-flex; align-items:center; justify-content:center; min-width: 140px; }
.search#chapterNav .arr{ position: relative; top: -1px; }

@media (max-width: 680px){
  .search#chapterNav{ gap:8px; }
  .search#chapterNav button{ min-width:auto; padding:8px 10px; font-size:14px; border-radius:12px; line-height:1; }
  .search#chapterNav .lbl{ display:none; }
  .search#chapterNav .arr{ top: -1px; }
}
.hint-small{ color:#9aa7bd; font-size:12px; margin-top:8px }

/* Mobile optimizaciones (modo ultra-ligero) */
@media (max-width: 680px){
  body{ background:#151b2f; }
  body::before{
    inset:-20vh -20vw;
    background: radial-gradient(closest-side at 50% 45%, rgba(168,85,247,.26), rgba(168,85,247,0) 55%);
    mix-blend-mode: normal; filter: blur(12px); opacity:.7; animation:none;
  }
  .card{ box-shadow: 0 10px 24px rgba(0,0,0,.28); backdrop-filter: none; border-color: rgba(148,163,184,.3); }
  .modal{ box-shadow: 0 18px 40px rgba(0,0,0,.42); backdrop-filter: none; border-color: rgba(148,163,184,.32); }
  button{ box-shadow: 0 8px 20px rgba(10,132,255,.22); }
}

/* Animaciones */
@keyframes bgPulse{
  0%{ --violet-a: 8%; --cyan-a: 5%; }
  50%{ --violet-a: 95%; --cyan-a: 75%; }
  100%{ --violet-a: 8%; --cyan-a: 5%; }
}
@keyframes blobDrift{
  0%{ transform: translate3d(-6%, -4%, 0) scale(1.05) rotate(0deg); }
  33%{ transform: translate3d(5%, -2%, 0) scale(1.08) rotate(4deg); }
  66%{ transform: translate3d(-3%, 6%, 0) scale(1.12) rotate(-3deg); }
  100%{ transform: translate3d(6%, 4%, 0) scale(1.05) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none !important; }
}