/* ============================================================
   Todavía Existe Esperanza — styles.css
   Diseño sobrio y reverente: fondo azul tinta/carbón, acentos
   dorados, serif elegante para titulares. Sin frameworks.
   ============================================================ */

:root{
  --bg:        #0c1120;
  --bg-2:      #101830;
  --bg-3:      #0a0e1a;
  --card:      #141d38;
  --card-2:    #182242;
  --line:      rgba(201,162,39,.28);
  --gold:      #c9a227;
  --gold-2:    #e6c766;
  --gold-soft: rgba(201,162,39,.12);
  --text:      #eef0f6;
  --muted:     #aab1c5;
  --muted-2:   #7e86a0;
  --serif:     "EB Garamond", Georgia, "Times New Roman", serif;
  --display:   "Cinzel", "EB Garamond", Georgia, serif;
  --sans:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius:    14px;
  --maxw:      1140px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--gold-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:min(var(--maxw), 100% - 2.5rem); margin-inline:auto; }

/* ---------- Encabezado ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,26,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-in{
  display:flex; align-items:center; gap:.9rem;
  padding:.6rem 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--text); min-width:0; }
.brand:hover{ text-decoration:none; }
.brand img{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.brand-name{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  letter-spacing:.04em; line-height:1.15; color:var(--text);
}
.brand-name span{ display:block; font-size:.62rem; letter-spacing:.28em; color:var(--gold); font-weight:600; }

.nav-toggle{
  margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--text); border-radius:8px; padding:.45rem .7rem;
  font-size:1.05rem; cursor:pointer; line-height:1;
}
.main-nav{ display:none; }
.main-nav.open{ display:block; padding:.4rem 0 .8rem; }
.main-nav ul{ list-style:none; display:flex; flex-direction:column; gap:.15rem; }
.main-nav a{
  display:block; padding:.5rem .6rem; border-radius:8px;
  color:var(--text); font-size:.98rem;
}
.main-nav a:hover{ background:var(--gold-soft); text-decoration:none; }
.main-nav a[aria-current="page"]{ color:var(--gold-2); }
.main-nav a.nav-cta{
  border:1px solid var(--gold); color:var(--gold-2); text-align:center;
  font-weight:600; margin-top:.3rem;
}

@media (min-width:820px){
  .nav-toggle{ display:none; }
  .main-nav{ display:block; margin-left:auto; }
  .main-nav ul{ flex-direction:row; align-items:center; gap:.4rem; }
  .main-nav a.nav-cta{ margin-top:0; padding:.45rem .95rem; }
}

/* ---------- Héroe ---------- */
.hero{
  text-align:center;
  padding:3.2rem 0 2.6rem;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(201,162,39,.16), transparent 65%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom:1px solid var(--line);
}
.hero .logo-hero{
  width:190px; height:190px; object-fit:cover; border-radius:50%;
  margin:0 auto 1.3rem;
  border:2px solid var(--line);
  box-shadow:0 0 60px rgba(201,162,39,.22);
}
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem, 6.5vw, 3.4rem);
  letter-spacing:.05em; line-height:1.12;
}
.hero .tagline{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem, 3.4vw, 1.5rem);
  color:var(--gold-2); margin-top:.7rem;
}
.hero p.lead{
  color:var(--muted); max-width:640px; margin:1rem auto 0;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem; }

/* ---------- Botones ---------- */
.btn{
  display:inline-block; padding:.72rem 1.5rem; border-radius:999px;
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  color:#1a1405; font-weight:700; font-size:1rem; border:1px solid var(--gold);
}
.btn:hover{ text-decoration:none; filter:brightness(1.07); }
.btn.ghost{
  background:transparent; color:var(--gold-2); border:1px solid var(--gold);
}
.btn.ghost:hover{ background:var(--gold-soft); }
.btn[aria-disabled="true"]{
  background:transparent; color:var(--muted); border:1px dashed var(--muted-2);
  cursor:default; font-weight:600;
}
.btn[aria-disabled="true"]:hover{ filter:none; background:transparent; }

/* ---------- Secciones ---------- */
section{ padding:2.8rem 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 2rem; }
.section-head .kicker{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}
.section-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem, 4.5vw, 2.1rem); margin-top:.4rem; letter-spacing:.03em;
}
.section-head p{ color:var(--muted); margin-top:.5rem; }
.alt{ background:var(--bg-3); border-block:1px solid var(--line); }

.page-head{
  text-align:center; padding:2.6rem 0 2.2rem;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom:1px solid var(--line);
}
.page-head h1{
  font-family:var(--display); font-weight:800; letter-spacing:.04em;
  font-size:clamp(1.7rem, 5.5vw, 2.6rem);
}
.page-head p{ color:var(--muted); max-width:620px; margin:.6rem auto 0; }
.page-head .kicker{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700;
}

/* ---------- Tarjetas ---------- */
.grid{
  display:grid; gap:1.2rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(3,1fr); } .grid.two{ grid-template-columns:repeat(2,1fr); } }

.card{
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.55rem;
}
.card .doc-num{
  font-family:var(--display); color:var(--gold); font-size:.78rem;
  letter-spacing:.25em; font-weight:700;
}
.card h3{
  font-family:var(--serif); font-weight:600; font-size:1.32rem; line-height:1.25;
}
.card p{ color:var(--muted); font-size:.96rem; flex:1; }
.card .card-link{ font-weight:600; font-size:.95rem; }
.card .verse{
  font-family:var(--serif); font-style:italic; color:var(--gold-2); font-size:1.02rem;
}
.card .price{ font-weight:700; color:var(--text); font-size:1.05rem; }
.card img.product{
  border-radius:10px; border:1px solid var(--line);
  aspect-ratio:1/1; object-fit:cover; width:100%;
  background:#000;
}

/* ---------- Misión / texto ---------- */
.prose{ max-width:720px; margin:0 auto; }
.prose p{ color:var(--muted); margin-bottom:1rem; }
.prose p strong, .prose li strong{ color:var(--text); }
.prose .verse-block{
  font-family:var(--serif); font-size:1.3rem; font-style:italic;
  color:var(--gold-2); text-align:center; line-height:1.5;
  border-block:1px solid var(--line); padding:1.3rem .5rem; margin:1.8rem 0;
}
.prose .verse-block cite{
  display:block; font-size:.95rem; font-style:normal; margin-top:.5rem; color:var(--muted);
  font-family:var(--sans); letter-spacing:.06em;
}

/* ---------- Artículo ---------- */
article.post{ max-width:760px; margin:0 auto; padding:2.6rem 0 3rem; }
article.post .kicker{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center;
}
article.post h1{
  font-family:var(--display); font-weight:800; text-align:center;
  font-size:clamp(1.6rem, 5vw, 2.4rem); line-height:1.2; letter-spacing:.02em; margin-top:.6rem;
}
article.post .byline{ text-align:center; color:var(--muted-2); font-size:.9rem; margin-top:.7rem; }
article.post .body{ margin-top:1.8rem; font-family:var(--serif); font-size:1.18rem; line-height:1.75; color:#dfe3ee; }
article.post .body p{ margin-bottom:1.15rem; }
article.post .body h2{
  font-family:var(--display); font-size:1.25rem; letter-spacing:.03em;
  color:var(--gold-2); margin:1.9rem 0 .7rem;
}
article.post .body .note{
  font-family:var(--sans); font-size:.92rem; color:var(--muted);
  background:var(--gold-soft); border:1px solid var(--line); border-radius:10px;
  padding:.9rem 1.1rem;
}
article.post .cta-box{
  margin-top:2.2rem; text-align:center; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.2rem; background:var(--card);
  font-family:var(--sans);
}
article.post .cta-box p{ color:var(--muted); margin-bottom:1rem; }

/* ---------- Suscripción ---------- */
.subscribe{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card-2), var(--card));
  padding:2rem 1.4rem; text-align:center; max-width:760px; margin:0 auto;
}
.subscribe h2{ font-family:var(--display); font-size:1.5rem; letter-spacing:.03em; }
.subscribe p{ color:var(--muted); margin:.6rem auto 1.2rem; max-width:520px; }
.subscribe form{ display:flex; flex-direction:column; gap:.6rem; max-width:460px; margin:0 auto; }
.subscribe input[type="email"]{
  padding:.75rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--text); font-size:1rem; font-family:var(--sans);
}
.subscribe input[type="email"]::placeholder{ color:var(--muted-2); }
.subscribe .fineprint{ font-size:.82rem; color:var(--muted-2); margin-top:.9rem; }
.subscribe .form-msg{ font-size:.92rem; color:var(--gold-2); min-height:1.2em; margin-top:.4rem; }
@media (min-width:560px){
  .subscribe form{ flex-direction:row; }
  .subscribe input[type="email"]{ flex:1; }
}

/* ---------- Redes ---------- */
.social-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.social-row a{
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.05rem;
  color:var(--text); font-size:.95rem; font-weight:600; background:var(--card);
}
.social-row a:hover{ background:var(--gold-soft); text-decoration:none; color:var(--gold-2); }
.social-row a small{ display:block; font-weight:400; color:var(--muted); font-size:.78rem; }

/* ---------- Apoya ---------- */
.donate-grid{ max-width:820px; margin:0 auto; }
.donate-card{ text-align:center; align-items:center; }
.donate-card .amount{ font-family:var(--serif); font-size:1.15rem; color:var(--muted); }
.ways{ max-width:720px; margin:2.2rem auto 0; }
.ways li{ color:var(--muted); margin-bottom:.55rem; margin-left:1.2rem; }
.ways li strong{ color:var(--text); }

/* ---------- Pie ---------- */
.site-footer{
  border-top:1px solid var(--line); background:var(--bg-3);
  padding:2.4rem 0 1.6rem; margin-top:0;
}
.footer-grid{ display:flex; flex-direction:column; gap:1.4rem; align-items:center; text-align:center; }
.footer-grid img{ width:74px; height:74px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.footer-grid .fname{ font-family:var(--display); font-weight:700; letter-spacing:.05em; }
.footer-grid .ftag{ font-family:var(--serif); font-style:italic; color:var(--gold-2); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; justify-content:center; }
.footer-nav a{ color:var(--muted); font-size:.93rem; }
.footer-nav a:hover{ color:var(--gold-2); }
.footer-social{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; justify-content:center; }
.footer-social a{ color:var(--muted); font-size:.93rem; font-weight:600; }
.footer-legal{ text-align:center; color:var(--muted-2); font-size:.82rem; margin-top:1.6rem; }