/* ============================================
   IGLESIA BAUTISTA COMUNIDAD DE GRACIA
   Paleta: Índigo #0c064b + Dorado #d4af37
   Layout: Sidebar vertical + contenido sobre índigo
   ============================================ */

:root{
  --bg:        #0c064b;
  --bg-2:      #120a4a;
  --panel:     rgba(255,255,255,0.05);
  --panel-2:   rgba(255,255,255,0.08);
  --text:      #f5f6ff;
  --muted:     #b9b8cc;
  --muted-2:   rgba(255,255,255,0.50);
  --line:      rgba(255,255,255,0.12);
  --line-2:    rgba(255,255,255,0.18);

  --accent:    #d4af37;
  --accent-2:  #f1d57a;
  --accent-bg: rgba(212,175,55,0.10);
  --accent-br: rgba(212,175,55,0.32);

  --sidebar-w: 240px;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 18px 50px rgba(0,0,0,.40);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 15% 5%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(700px 450px at 95% 25%, rgba(212,175,55,0.07), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.app{ display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar{
  width: var(--sidebar-w);
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
  position: fixed;
  top:0; left:0;
  height:100vh;
  overflow-y:auto;
  z-index:10;
  display:flex;
  flex-direction:column;
}

.brand{
  text-align:center;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.brand img{
  width:68px; height:68px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--accent-br);
  background: var(--accent-bg);
  padding:3px;
  margin-bottom:11px;
}
.brand .title strong{
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.2px;
}
.brand .title span{
  display:block;
  font-size:11px;
  color: var(--muted-2);
  margin-top:4px;
}

.nav{ display:flex; flex-direction:column; gap:3px; }
.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius: var(--radius-sm);
  font-size:14px;
  color: rgba(255,255,255,0.68);
  border-left:2px solid transparent;
  transition:.16s ease;
}
.nav a:hover{ background: rgba(255,255,255,0.05); color:#fff; }
.nav a.active{
  background: var(--accent-bg);
  color: var(--accent-2);
  border-left:2px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-weight:500;
}
.nav .ico{ font-size:16px; width:18px; text-align:center; }

.sidebar .footer{
  margin-top:auto;
  padding-top:18px;
  font-size:11px;
  color: rgba(255,255,255,0.35);
  text-align:center;
}

/* ===== CONTENT ===== */
.content{
  flex:1;
  padding: 28px 30px 50px;
  margin-left: var(--sidebar-w);
  max-width:1100px;
}

.topbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  margin-bottom:16px;
}

/* ===== PAGE HEADER ===== */
.page-head{
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.page-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:10px;
}
.page-head h1{
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:10px;
}
.page-head p{
  font-size:14px;
  color: var(--muted-2);
  line-height:1.7;
  max-width:560px;
}

/* ===== VERSÍCULO — barra dorada lateral ===== */
.verse{
  border-left:3px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin-bottom:22px;
}
.verse p{
  font-size:16px;
  color: rgba(255,255,255,0.86);
  font-style:italic;
  line-height:1.65;
  margin-bottom:8px;
}
.verse cite{
  font-size:12px;
  font-style:normal;
  font-weight:600;
  color: var(--accent);
  letter-spacing:.3px;
}

/* ===== PANELES ===== */
.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.panel-head{
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.panel h2{
  font-size:19px;
  font-weight:600;
  margin-bottom:12px;
}
.panel h3{
  font-size:14px;
  font-weight:600;
  color: var(--accent-2);
  margin:16px 0 6px;
}
.panel p{
  font-size:14px;
  color: var(--muted);
  line-height:1.75;
  margin-bottom:10px;
}
.panel p:last-child{ margin-bottom:0; }
.panel ul{ margin:10px 0 0 20px; }
.panel li{ font-size:14px; color: var(--muted); line-height:1.7; margin-bottom:5px; }
.panel strong{ color: var(--text); }

/* ===== GRIDS ===== */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mt-14{ margin-top:14px; }
.mt-22{ margin-top:22px; }

/* ===== LISTA CON BULLET DORADO (misión / visión) ===== */
.numlist{ display:flex; flex-direction:column; }
.numrow{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.numrow:last-child{ border-bottom:none; }
.numrow .n{
  min-width:18px;
  display:flex;
  justify-content:center;
  align-self:center;
}
.numrow .n::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--accent);
  display:block;
}
.numrow .k{ font-size:14px; font-weight:600; color:#fff; }
.numrow .s{ font-size:14px; color: var(--muted-2); }

/* ===== BLOQUES DE CREENCIAS (franja unida) ===== */
.beliefs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.belief{
  background: var(--bg);
  padding:20px 18px;
}
.belief .b-ico{ font-size:22px; margin-bottom:10px; }
.belief .b-title{
  font-size:14px;
  font-weight:600;
  color:#fff;
  margin-bottom:6px;
}
.belief .b-sub{
  font-size:13px;
  color: var(--muted-2);
  line-height:1.6;
}

/* ===== FILAS DE HORARIO ===== */
.timerow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  font-size:14px;
}
.timerow:last-child{ border-bottom:none; }
.timerow strong{ color:#fff; font-weight:600; }
.timerow span{ color: var(--muted-2); }

/* ===== BOTONES ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border-radius: var(--radius-sm);
  border:1px solid var(--line-2);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size:13px;
  cursor:pointer;
  transition:.16s ease;
}
.btn:hover{ background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.btn.accent{
  background: var(--accent-bg);
  border-color: var(--accent-br);
  color: var(--accent-2);
  font-weight:600;
}
.btn.accent:hover{ background: rgba(212,175,55,0.18); }

.btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ===== GALERÍA ===== */
.gallery{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
}
.gitem{
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  margin:0;
}
.gitem img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transition: transform .25s ease, filter .25s ease;
}
.gitem:hover{
  transform: translateY(-3px);
  border-color: var(--accent-br);
  box-shadow: 0 22px 48px rgba(0,0,0,.42);
}
.gitem:hover img{ transform: scale(1.04); filter: saturate(1.06); }

/* Foto única centrada, completa */
.gallery.single-photo{
  display:flex;
  justify-content:center;
}
.gallery.single-photo .gitem{
  width:440px;
  max-width:100%;
}
.gallery.single-photo .gitem img{
  height:280px;
  object-fit:contain;
  background: rgba(255,255,255,0.03);
}

/* Ajuste del punto de recorte — para fotos verticales */
.gitem.crop-top img{ object-position: center 35%; }

/* ===== VERSÍCULO DENTRO DE MINISTERIO ===== */
.min-verse{
  border-left:2px solid var(--accent-br);
  padding:2px 0 2px 16px;
  margin:14px 0 4px;
}
.min-verse .ref{
  font-size:12px;
  font-weight:600;
  color: var(--accent);
  margin-bottom:6px;
  letter-spacing:.3px;
}
.min-verse p{
  font-size:13px;
  color: var(--muted-2);
  font-style:italic;
  line-height:1.7;
  margin:0;
}

/* ===== COLABORADORES ===== */
.collab{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px 24px;
}
.collab-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.collab-name{
  font-size:19px;
  font-weight:600;
  color:#fff;
  margin-bottom:4px;
}
.collab-loc{
  font-size:12px;
  color: var(--accent);
  letter-spacing:.4px;
  text-transform:uppercase;
  font-weight:600;
}
.collab p{
  font-size:14px;
  color: var(--muted);
  line-height:1.75;
  margin-bottom:10px;
}
.collab p:last-of-type{ margin-bottom:0; }
.collab strong{ color: var(--text); }

/* ===== IFRAME (calendario) ===== */
.iframe-wrap{
  margin-top:14px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.iframe-wrap iframe{
  display:block;
  width:100%;
  border:0;
}

/* ===== DONACIONES ===== */
.qr-box{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.qr-box img{
  width:200px;
  max-width:200px;
  height:auto;
  border-radius: var(--radius);
  display:block;
}
.qr-handle{
  margin-top:12px;
  text-align:center;
  font-size:13px;
  color: var(--muted-2);
  word-break:break-word;
}

/* ===== UTIL ===== */
.muted{ color: var(--muted-2); }
.url-link{ color: var(--accent-2); word-break:break-all; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .sidebar{
    transform: translateX(-102%);
    transition:.2s ease;
    z-index:50;
  }
  .sidebar.open{ transform: translateX(0); }
  .content{ padding:18px; margin-left:0; }
  .topbar{ display:flex; }
  .g2, .g3{ grid-template-columns:1fr; }
  .beliefs{ grid-template-columns:1fr; }
  .page-head h1{ font-size:24px; }
  .overlay{
    position:fixed; inset:0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    display:none; z-index:40;
  }
  .overlay.show{ display:block; }
}