/* Estilos principales para MIGP — Tamacá */
:root{
  --bg:#0f1724;
  --accent: #0059ff;
  --accent-2:#5eead4;
  --muted:#89b9fc;
  --max-width:1100px;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#071126 0%, #071322 100%); color:#e6eef8; line-height:1.5}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.site-logo{height:56px;width:auto;border-radius:8px;object-fit:contain}
.logo-text{font-size:1.05rem;font-weight:700}
.logo{font-size:1.2rem;font-weight:700}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:inherit;text-decoration:none;padding:.25rem .6rem;border-radius:8px;transition:background .18s}
.site-nav a:hover{background:rgba(255,255,255,0.04)}
.nav-toggle{display:none;background:transparent;border:0;color:inherit;font-size:1.4rem;}
.hero{position:relative;min-height:58vh;display:flex;align-items:center;color:#fff;background:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,7,18,0.6), rgba(0,0,0,0.65));z-index:1}
.hero-content{position:relative;padding:4rem 2rem;z-index:2}

/* Banner slideshow */
.banner{position:absolute;inset:0;overflow:hidden;border-bottom-left-radius:12px;border-bottom-right-radius:12px;z-index:0}
.banner-slide{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .8s ease, transform .8s ease}
.banner-slide.active{opacity:1;transform:scale(1)}
.banner-slide[alt]{filter:brightness(0.75);}
.banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.15));pointer-events:none}
.hero h2{margin:0;font-size:2rem}
.hero p{margin:.6rem 0 1rem;color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:#071126;padding:.6rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit}
.section{padding: 20px;
max-width:var(--max-width);
margin:2rem auto;
    }
.section h3{margin:0 0 0.5rem}
.muted{color:var(--muted);margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.gallery-grid{grid-template-columns:repeat(3,1fr)}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:10px;cursor:pointer;transition:transform .22s}
.gallery-grid img:hover{transform:scale(1.02)}
.video-grid{grid-template-columns:repeat(2,1fr)}
.video-card{position:relative;cursor:pointer;border-radius:10px;overflow:hidden}
.video-card img{width:100%;height:220px;object-fit:cover;display:block}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2.5rem;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,0.6)}
.staff-grid{grid-template-columns:repeat(3,1fr)}
.staff-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.2rem;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6);display:flex;gap:1.2rem;align-items:center}
.staff-card img{height:160px;width:160px;object-fit:cover;border-radius:8px;flex-shrink:0}
.staff-card .staff-body{flex:1;min-width:0}
.staff-card .staff-body p{margin-bottom:.5rem}

/* Ensure image-left layout on desktop and stacked on mobile */
.staff-card{flex-direction:row}
@media (max-width:640px){
  .staff-card{flex-direction:column;align-items:center;text-align:center}
  .staff-card .staff-body{padding:0}
}
.staff-card h4{margin:0}
.staff-card p{margin:.4rem 0}
.role{color:var(--muted);font-size:.95rem}
.map-wrap{height:320px;border-radius:10px;overflow:hidden}
.map-wrap iframe{width:100%;height:100%;border:0}
.contact-cards{display:flex;gap:1rem;flex-wrap:wrap}
.card{display:inline-block;background:rgba(255,255,255,0.03);padding:.7rem 1rem;border-radius:10px;color:inherit;text-decoration:none}
.card .icon{margin-right:.5rem;display:inline-block}
.site-footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.03);text-align:center;color:var(--muted)}
/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.85);z-index:1200}
.modal[aria-hidden="false"]{display:flex}
.modal-content{max-width:90%;max-height:85%;border-radius:10px;overflow:hidden}
.modal-content img{display:block;max-width:100%;height:auto}
.modal-close{position:absolute;right:1.6rem;top:1.2rem;background:transparent;border:0;color:#fff;font-size:1.6rem}
/* Responsive */
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header-inner{padding:0}
  .nav-toggle{display:block}
  .site-nav{position:fixed;right:0;top:0;height:100vh;width:260px;background:linear-gradient(180deg,#061025,#091424);flex-direction:column;padding:3rem 1rem;transform:translateX(110%);transition:transform .28s}
  .site-nav.open{transform:translateX(0)}

  .gallery-grid{grid-template-columns:repeat(1,1fr)}
  .video-grid{grid-template-columns:repeat(1,1fr)}
  .staff-grid{grid-template-columns:repeat(1,1fr)}
}
.servidor-botones img {
    width:50%;
    height:220px;
    object-fit:cover;
    display:block;
    margin: auto;
}

/* Calendar / Events styles */
.events-wrap{max-width:860px;margin:1.2rem auto;text-align:left}
.calendar-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.6rem}
#monthYear{font-weight:700}
.calendar-controls button{background:rgba(255,255,255,0.03);border:0;color:inherit;padding:.4rem .7rem;border-radius:8px;cursor:pointer}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:transparent}
.calendar-grid .weekday{font-size:.8rem;text-align:center;color:var(--muted);padding:.4rem 0}
.calendar-grid .day{min-height:80px;background:rgba(255,255,255,0.02);border-radius:8px;padding:.4rem;position:relative}
.calendar-grid .day.inactive{opacity:0.25}
.calendar-grid .day .date{font-weight:700;margin-bottom:.3rem}
.calendar-grid .day .event-dot{position:absolute;left:8px;bottom:8px;width:8px;height:8px;border-radius:999px;background:var(--accent)}
.events-list{margin-top:1rem;background:rgba(255,255,255,0.02);padding:1rem;border-radius:8px}
.events-list h4{margin:.2rem 0 .6rem}
.events-item{padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.events-item:last-child{border-bottom:0}

/* Admin form */
.admin-controls{margin-top:.8rem;text-align:right}
.event-admin{margin-top:1rem;background:rgba(255,255,255,0.02);padding:1rem;border-radius:8px}
.event-admin .form-row{margin-bottom:.6rem}
.event-admin input[type="text"], .event-admin input[type="date"], .event-admin input[type="time"], .event-admin textarea{width:100%;padding:.5rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.event-admin label{font-size:0.9rem}
#adminEvents{margin-top:0.8rem}
.admin-event-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-top:1px solid rgba(255,255,255,0.02)}
.admin-event-row button{background:transparent;border:0;color:var(--muted);cursor:pointer}

/* Improved layout and visual refinements to look more like a modern template */
:root{ --accent-strong: #003bb5; }

.container{max-width:var(--max-width);margin:0 auto;padding:2rem}

.site-header{position:sticky;top:0;z-index:1100;background:linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.65));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.site-header .header-inner{padding:0.6rem 1rem}
.brand .logo-text{font-size:0.95rem;opacity:0.95}
.site-nav a{font-weight:600;text-transform:uppercase;letter-spacing:0.6px;padding:.6rem .9rem}
.site-nav a.instagram{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071126;padding:.5rem .8rem;border-radius:999px}

.hero{min-height:68vh;padding:0}
.hero-content{max-width:880px;margin:0 auto;padding:6rem 1.25rem;text-align:center}
.hero h2{font-size:2.6rem;line-height:1.05;text-transform:uppercase;letter-spacing:1px}
.hero p{font-size:1.05rem;margin-top:.6rem}
.hero-cta{margin-top:1.2rem;display:flex;gap:0.8rem;justify-content:center}
.btn{box-shadow:0 6px 20px rgba(2,6,23,0.6);border:0}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);box-shadow:none}

.section{padding:4rem 1rem;background:transparent}
.section.container{display:block}

.gallery-grid img{height:260px;border-radius:14px}
.video-card img{height:260px}

.staff-card{padding:1.2rem;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}

.card{transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}

.calendar-grid .day{min-height:92px;padding:.6rem}
.calendar-grid .day .date{font-size:0.95rem}

.events-list{min-height:80px}

.site-footer{background:linear-gradient(180deg,#030813,#071322);padding:2.2rem 1rem}
.site-footer p{margin:0;color:var(--muted)}

@media (max-width:900px){
  .hero h2{font-size:2rem}
  .hero-content{padding:4rem 1rem}
}

@media (max-width:640px){
  .site-nav{width:260px}
  .hero h2{font-size:1.6rem}
  .hero-content{padding:3rem .8rem}
}

/* Gallery (grid) styles */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:14px;cursor:pointer;transition:transform .22s}
.gallery-grid img:hover{transform:scale(1.02)}

/* Pastors / Staff */
.staff-grid{grid-template-columns:repeat(3,1fr);align-items:start}
.staff-card img{width:260px;height:260px;object-fit:cover;border-radius:8px;flex-shrink:0}
.staff-card h4{margin-top:.8rem}

/* Animations (fade-up) */
.animate{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.animate.in-view{opacity:1;transform:translateY(0)}

.ig-link{display:inline-block;margin-top:.4rem;color:var(--accent);text-decoration:none;font-weight:600}
.ig-link:hover{text-decoration:underline}
.social-icon{vertical-align:middle;margin-right:.45rem;fill:none;stroke:currentColor;transition:color .18s ease, transform .12s ease}

/* Brand colors for social icons */
.instagram-icon{color:#E1306C}
.whatsapp-icon{color:#25D366}
.email-icon{color:var(--muted)}

/* Hover / focus effects for social icons and cards */
.card:hover .social-icon, .card:focus .social-icon{transform:translateY(-2px)}
.instagram-icon:hover, .instagram-icon:focus{color:#C13584}
.whatsapp-icon:hover, .whatsapp-icon:focus{color:#128C7E}
.email-icon:hover, .email-icon:focus{color:var(--accent)}
.footer-phone:hover .whatsapp-icon{color:#128C7E}

/* Footer improvements */
.footer-grid{display:grid;grid-template-columns:1fr 160px 1fr 140px;gap:1.2rem;align-items:start}
.footer-logo{height:64px;border-radius:8px}
.footer-links nav{display:flex;flex-direction:column;gap:.4rem}
.footer-links a{color:inherit;text-decoration:none}
.footer-contact p{margin:0}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}
@media (max-width:900px){
  .carousel-slide img{height:260px}
}
@media (max-width:640px){
  .carousel-slide img{height:220px}
  .staff-grid{grid-template-columns:repeat(1,1fr)}
  .staff-card{flex-direction:column;align-items:center;text-align:center}
  .staff-card img{width:100%;height:220px;border-radius:10px}
  .staff-card .staff-body{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:1rem}
}