/* ================================================================
   APOSENTO ALTO PAMPLONA — PALETA PRETO · OURO · PRATA
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  /* Pretos */
  --black:       #090909;
  --black-soft:  #111111;
  --black-mid:   #1a1a1a;
  --black-card:  #202020;

  /* Ouro */
  --gold:        #d4a843;
  --gold-light:  #f0c060;
  --gold-pale:   #f5e9c4;
  --gold-dim:    rgba(212,168,67,0.15);

  /* Prata */
  --silver:      #b8c4d4;
  --silver-light:#dce4ee;
  --silver-dim:  rgba(184,196,212,0.12);

  /* Texto */
  --white:       #ffffff;
  --off-white:   #f0ede8;
  --text-body:   rgba(240,237,232,0.82);
  --text-muted:  rgba(240,237,232,0.46);

  /* Bordas */
  --border-gold: rgba(212,168,67,0.18);
  --border-silver:rgba(184,196,212,0.14);
  --border:      rgba(255,255,255,0.08);

  --shadow:     0 4px 32px rgba(0,0,0,0.6);
  --radius:     12px;
  --ease:       0.3s cubic-bezier(0.4,0,0.2,1);
  --max-w:      1140px;
  --header-h:   70px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--black);color:var(--off-white);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ================================================================
   HEADER
   ================================================================ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 2rem;
  background:rgba(9,9,9,0.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border-gold);
  transition:background var(--ease),box-shadow var(--ease);
}
#site-header.scrolled{
  background:rgba(9,9,9,0.97);
  box-shadow:0 2px 20px rgba(0,0,0,0.8);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
}

/* Logo — fundo cinza recortado com CSS background-image */
.site-logo{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.logo-img-wrap{
  width:46px;height:46px;
  border-radius:9px;
  flex-shrink:0;
  background-image:url('../images/IMG-20241126-WA0004.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#595959;
  box-shadow:0 0 0 1px var(--border-gold);
}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-main{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--gold);letter-spacing:.02em}
.logo-sub{font-size:.64rem;font-weight:300;color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase}

/* Nav desktop */
#main-nav ul{display:flex;align-items:center;gap:.2rem}
#main-nav a{
  position:relative;padding:.5rem .95rem;
  font-size:.85rem;font-weight:500;color:var(--text-muted);
  border-radius:8px;letter-spacing:.04em;transition:color var(--ease);
}
#main-nav a::after{
  content:'';position:absolute;bottom:3px;left:50%;
  transform:translateX(-50%) scaleX(0);
  width:55%;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--silver));
  border-radius:2px;transition:transform var(--ease);
}
#main-nav a:hover,
#main-nav a.active{color:var(--gold)}
#main-nav a:hover::after,
#main-nav a.active::after{transform:translateX(-50%) scaleX(1)}

/* Hambúrguer */
#menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;
}
#menu-toggle span{display:block;height:2px;background:var(--silver);border-radius:2px;transition:var(--ease)}
#menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#menu-toggle.open span:nth-child(2){opacity:0}
#menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil */
#mobile-menu{
  display:none;position:fixed;
  top:var(--header-h);left:0;right:0;bottom:0;
  background:rgba(9,9,9,0.98);backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;z-index:999;
}
#mobile-menu.open{display:flex}
#mobile-menu a{
  font-family:'Playfair Display',serif;font-size:1.85rem;font-weight:600;
  color:var(--off-white);letter-spacing:.04em;transition:color var(--ease);
}
#mobile-menu a:hover{color:var(--gold)}

/* ================================================================
   HERO
   ================================================================ */
#inicio{
  position:relative;min-height:100vh;
  display:flex;align-items:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;background-position:center;
  filter:brightness(.22);
  transform:scale(1.04);transition:transform 10s ease;
}
#inicio:hover .hero-bg{transform:scale(1)}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(9,9,9,.6) 0%,
    rgba(9,9,9,.15) 45%,
    rgba(9,9,9,.8) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:var(--max-w);margin:0 auto;
  padding:0 2rem;padding-top:var(--header-h);
}
.hero-eyebrow{
  display:inline-block;font-size:.74rem;font-weight:600;
  color:var(--gold);letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:1rem;animation:fadeUp .8s ease both;
}
.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:700;line-height:1.08;
  color:var(--white);margin-bottom:.75rem;animation:fadeUp .8s .15s ease both;
}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-tagline{
  font-size:clamp(1rem,2vw,1.3rem);font-weight:300;
  color:var(--silver);letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.5rem;animation:fadeUp .8s .25s ease both;
}
.hero-text{
  max-width:540px;font-size:1.05rem;color:var(--text-body);
  margin-bottom:2.5rem;animation:fadeUp .8s .35s ease both;
}
.hero-cta-wrap{
  display:flex;justify-content:center;
  animation:fadeUp .8s .45s ease both;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.88rem 2rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--black);font-weight:700;font-size:.88rem;border-radius:50px;
  letter-spacing:.07em;text-transform:uppercase;
  transition:var(--ease);
  box-shadow:0 4px 20px rgba(212,168,67,.35);
}
.hero-cta:hover{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,168,67,.5);
}
.hero-cta svg{width:18px;height:18px;transition:var(--ease)}
.hero-cta:hover svg{transform:translateY(3px)}

/* ================================================================
   UTILITÁRIOS
   ================================================================ */
.section{padding:5.5rem 2rem}
.section-simple{padding:3.5rem 2rem}
.section-inner{max-width:var(--max-w);margin:0 auto}

.section-eyebrow{
  display:inline-block;font-size:.68rem;font-weight:600;
  color:var(--silver);letter-spacing:.30em;text-transform:uppercase;margin-bottom:.6rem;
}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;
  color:var(--white);line-height:1.2;margin-bottom:1.25rem;
}
.section-title em{font-style:italic;color:var(--gold)}
.gold-divider{
  width:55px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--silver),transparent);
  border-radius:2px;margin:1rem 0;
}
.section-header{margin-bottom:3.5rem}
/* Variante centrada — usada em #sobre-nosotros */
.section-header--center{text-align:center}
.section-header--center .section-title{margin-left:auto;margin-right:auto}
.section-header-center{text-align:center;margin-bottom:2.75rem}
.section-lead{font-size:1.1rem;color:var(--text-body);max-width:700px;line-height:1.9;margin-top:1rem}
/* Variante centrada do section-lead */
.section-lead--center{text-align:center;margin-left:auto;margin-right:auto}
.section-text-center{color:var(--text-muted);font-size:.95rem;max-width:560px;margin:.5rem auto 0;}

.btn-link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.6rem;
  border:1px solid var(--border-gold);color:var(--gold);border-radius:50px;
  font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:var(--ease);
}
.btn-link:hover{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--black);border-color:transparent;transform:translateY(-2px);
}
.btn-link svg{width:16px;height:16px;transition:var(--ease)}
.btn-link:hover svg{transform:translateX(3px)}

/* ================================================================
   SOBRE NOSOTROS
   ================================================================ */
#sobre-nosotros{background:var(--black-soft)}

.qs-block{margin-bottom:2.5rem}
.qs-block:last-child{margin-bottom:0}
.qs-subtitle{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.45rem;color:var(--gold);margin-bottom:1.25rem;font-weight:600;
}
.qs-text-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.qs-text-cols p{color:var(--text-body);font-size:1rem;line-height:1.9}
.qs-intro-cita{color:var(--text-body);font-size:1rem;margin-bottom:1rem}

.biblica-quote{
  background:var(--gold-dim);
  border-left:2px solid var(--gold);
  padding:1.25rem 1.5rem;
  border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:1rem;
  font-style:italic;color:var(--off-white);font-size:.93rem;line-height:1.85;
}
.biblica-quote strong{
  font-style:normal;color:var(--gold);font-size:.8rem;
  display:block;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.1em;
}
.qs-closing{color:var(--text-body);font-size:1rem;line-height:1.9;max-width:800px}
/* Variante centrada */
.qs-closing--center{text-align:center;margin-left:auto;margin-right:auto}

/* Missão / Visão */
.mision-vision{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem;
  border-top:1px solid var(--border-gold);padding-top:2.5rem;
}
.mv-card{
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-gold);
  border-radius:var(--radius);padding:2rem;transition:var(--ease);
}
.mv-card:hover{
  background:var(--gold-dim);border-color:rgba(212,168,67,.35);transform:translateY(-2px);
}
.mv-icon{
  width:38px;height:38px;background:var(--gold-dim);border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.mv-icon svg{width:18px;height:18px;color:var(--gold)}
.mv-card h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--white);margin-bottom:.6rem}
.mv-card p{color:var(--text-body);font-size:.93rem;line-height:1.78;margin-bottom:.6rem}
.verse-ref{font-size:.76rem;color:var(--silver);font-weight:600;letter-spacing:.1em}

/* ================================================================
   CITA BÍBLICA
   ================================================================ */
#cita-biblica{
  padding:4.5rem 2rem;
  background:linear-gradient(135deg,var(--black-mid) 0%,var(--black) 100%);
  text-align:center;
  border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold);
  position:relative;overflow:hidden;
}
#cita-biblica::before{
  content:'"';position:absolute;
  font-family:'Playfair Display',serif;font-size:20rem;font-weight:700;
  color:rgba(212,168,67,.03);top:-4rem;left:50%;transform:translateX(-50%);
  line-height:1;pointer-events:none;
}
.cita-text{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.1rem,2.6vw,1.6rem);
  font-style:italic;color:var(--off-white);
  max-width:740px;margin:0 auto .75rem;line-height:1.68;position:relative;
}
.cita-ref{font-size:.8rem;font-weight:600;color:var(--silver);letter-spacing:.2em;text-transform:uppercase}

/* ================================================================
   ACTIVIDADES
   ================================================================ */
#actividades{background:var(--black)}
.actividades-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;margin-top:2.5rem;
}
.actividad-card{
  background:var(--black-card);
  border:1px solid var(--border-silver);
  border-radius:var(--radius);padding:1.75rem 1.5rem;
  transition:var(--ease);position:relative;overflow:hidden;
}
/* Borda dourada animada ao hover */
.actividad-card::before{
  content:'';position:absolute;top:0;left:0;
  width:3px;height:0;
  background:linear-gradient(to bottom,var(--gold),var(--silver));
  transition:height .4s ease;
}
.actividad-card:hover{
  border-color:var(--border-gold);
  transform:translateY(-4px);
  box-shadow:0 10px 36px rgba(0,0,0,.6);
}
.actividad-card:hover::before{height:100%}
.actividad-icon{
  width:38px;height:38px;background:var(--gold-dim);
  border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.actividad-icon svg{width:18px;height:18px;color:var(--gold)}
.actividad-tiempo{
  font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:.2rem;
}
.actividad-dia{
  font-size:.7rem;font-weight:600;color:var(--silver);
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:.85rem;
}
.actividad-nombre{font-size:1.05rem;font-weight:500;color:var(--white)}
.actividad-asterisk{
  font-size:.7rem;color:var(--gold);vertical-align:super;margin-left:1px;
}

/* Nota al pie de actividades */
.actividades-nota{
  text-align:center;margin-top:1.5rem;
  font-size:.82rem;color:var(--text-muted);
  font-style:italic;
}
/* ================================================================
   CONTACTO — minimalista
   ================================================================ */
#contacto{background:var(--black-soft)}
.contacto-simple{
  display:flex;flex-direction:column;gap:.75rem;
  max-width:560px;margin:0 auto;
}
.contacto-item{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-silver);
  border-radius:var(--radius);transition:var(--ease);
}
.contacto-item:hover{border-color:var(--border-gold);background:var(--gold-dim);transform:translateX(4px)}
.contacto-item svg{width:20px;height:20px;color:var(--gold);flex-shrink:0}
.contacto-item .ci-content{display:flex;flex-direction:column;gap:.1rem}
.contacto-item strong{font-size:.9rem;color:var(--white);font-weight:600}
.contacto-item span{font-size:.82rem;color:var(--text-muted)}
/* WhatsApp — destaque verde subtil */
.contacto-whatsapp{border-color:rgba(37,211,102,.2)}
.contacto-whatsapp:hover{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.06)}
.contacto-whatsapp svg{color:#25D366}

/* ================================================================
   DONACIONES — muito discreta
   ================================================================ */
#donaciones{background:var(--black)}
.donaciones-discreta{
  max-width:560px;margin:0 auto;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-gold);
  border-radius:var(--radius);
  padding:2rem;
}
.donacion-row{
  display:flex;align-items:flex-start;gap:1.5rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--border);
}
.donacion-row:last-child{border-bottom:none;padding-bottom:0}
.donacion-row:first-child{padding-top:0}
.dr-label{
  width:110px;flex-shrink:0;
  font-size:.7rem;font-weight:600;
  color:var(--silver);letter-spacing:.15em;text-transform:uppercase;
  padding-top:.2rem;
}
.dr-value{font-size:.9rem;color:var(--text-body);line-height:1.6;flex:1}
.dr-value strong{color:var(--gold-light);font-weight:600;display:block;font-size:.95rem}
.dr-value small{font-size:.79rem;color:var(--text-muted);display:block;margin-top:.2rem}
.donacion-contacto{
  text-align:center;margin-top:1.5rem;
  font-size:.82rem;color:var(--text-muted);
}
.donacion-contacto a{color:var(--silver);transition:color var(--ease)}
.donacion-contacto a:hover{color:var(--gold)}

/* ================================================================
   EVENTOS
   ================================================================ */
.coming-soon{text-align:center;padding:2rem 0}
.coming-soon-icon{font-size:3.5rem;margin-bottom:1.25rem;animation:pulse 3s infinite}

/* ================================================================
   FOOTER
   ================================================================ */
#site-footer{
  background:var(--black-soft);
  border-top:1px solid var(--border-gold);
  padding:3.5rem 2rem 2rem;
}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:3rem;margin-bottom:2.5rem}

.footer-brand p{color:var(--text-muted);font-size:.87rem;line-height:1.7;margin-top:.75rem}
.footer-logo-wrap{
  width:68px;height:68px;border-radius:10px;
  background-image:url('../images/IMG-20241126-WA0004.jpg');
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
  background-color:#595959;
  box-shadow:0 0 0 1px var(--border-gold);
}

.footer-col h4{
  font-size:.68rem;font-weight:600;color:var(--silver);
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:1.1rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.55rem}
.footer-col a{color:var(--text-muted);font-size:.87rem;transition:color var(--ease)}
.footer-col a:hover{color:var(--gold)}
.footer-contact-item{display:flex;align-items:flex-start;gap:.55rem;color:var(--text-muted);font-size:.87rem;margin-bottom:.65rem}
.footer-contact-item svg{width:14px;height:14px;color:var(--gold);flex-shrink:0;margin-top:4px}
.footer-contact-item a{color:var(--text-muted);transition:color var(--ease)}
.footer-contact-item a:hover{color:var(--gold)}

.footer-bottom{
  border-top:1px solid var(--border);padding-top:1.4rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;
}
.footer-bottom p{color:var(--text-muted);font-size:.78rem}
.footer-bottom a{color:var(--text-muted);font-size:.78rem;transition:color var(--ease)}
.footer-bottom a:hover{color:var(--silver)}

/* Redes sociales */
.footer-social{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:1.5rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:1.5rem;
}
.social-link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.1rem;
  border:1px solid var(--border-silver);
  border-radius:50px;
  color:var(--text-muted);
  font-size:.82rem;font-weight:500;letter-spacing:.04em;
  transition:var(--ease);
}
.social-link svg{width:16px;height:16px;transition:var(--ease)}
.social-link:hover{
  color:var(--gold);
  border-color:var(--border-gold);
  background:var(--gold-dim);
  transform:translateY(-2px);
}

/* ================================================================
   ANIMAÇÕES
   ================================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ================================================================
   RESPONSIVO
   ================================================================ */
@media(max-width:900px){
  .qs-text-cols{grid-template-columns:1fr}
  .mision-vision{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:768px){
  #main-nav{display:none}
  #menu-toggle{display:flex}
  .section{padding:4rem 1.5rem}
  .section-simple{padding:3rem 1.5rem}
  .actividades-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .actividades-grid{grid-template-columns:1fr}
  .hero-cta{width:100%;justify-content:center}
}