/* /css/styles.css */
:root{
  --color-bg: #FAFAF7;       /* fondo general */
  --color-card: #F1E4D3;     /* fondo cajas */
  --color-text: #302451;     /* azul profundo legible */
  --color-accent: #FFA800;   /* naranja */
  --color-primary: #8F4287;  /* morado */
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.07);

  /* alturas del iframe Brevo */
  --brevo-h-mobile: 1520px;
  --brevo-h-tablet: 1320px;
  --brevo-h-desktop: 1200px;
}

html[data-theme="dark"]{
  --color-bg: #17151a;
  --color-card: #26212a;
  --color-text: #eae6f2;
  --color-accent: #FFA800;
  --color-primary: #c874bf;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: 'Montserrat Alternates', 'Montserrat', system-ui, sans-serif;
  line-height: 1.2;
  margin: 0.15em 0 0.35em;
}
h1{ font-size: clamp(1.6rem, 2.6vw, 2.4rem) }
h2{ font-size: clamp(1.3rem, 2vw, 1.8rem) }
h3{ font-size: clamp(1.05rem, 1.6vw, 1.2rem) }

p{ margin: 0.65em 0 }
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.8;
}
.lead{ font-size: 1.05rem }

.wrap{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.section{ padding: 36px 0 }
.section.alt{ background: var(--color-card); border-radius: var(--radius); margin: 24px 8px }

.card{
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.btn{
  appearance: none; border: 0; border-radius: 999px;
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; box-shadow: var(--shadow); background: #fff; color: var(--color-text);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn-primary{ background: var(--color-primary); color:#fff }
.btn-secondary{ background: var(--color-accent); color: #1a130f }
.btn i{ font-size:1.05em; line-height:0 }

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--color-bg), transparent 10%);
  border-bottom: 1px solid color-mix(in oklab, var(--color-text), transparent 90%);
}
.site-header .wrap{ display:flex; align-items:center; justify-content: space-between }
.brand{ display:flex; align-items:center; gap:12px }
.brand-name{ font-weight: 700; color: var(--color-text); text-decoration: none }
.brand-logo{ display:block; height: 30px; width:auto; object-fit:contain }
@media (min-width: 768px){ .brand-logo{ height: 34px } }

.theme-toggle{
  background: var(--color-card);
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklab, var(--color-text), transparent 80%);
}
.theme-toggle .sun{ display:inline }
.theme-toggle .moon{ display:none }
html[data-theme="dark"] .theme-toggle .sun{ display:none }
html[data-theme="dark"] .theme-toggle .moon{ display:inline }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 8px; top: 8px; width:auto; height:auto; padding:8px 12px;
  background: var(--color-accent); color:#000; border-radius: 6px;
}

/* Hero */
.hero .wrap{ display:grid; gap:20px; align-items:center }
.hero .hero-copy .update{ opacity:.8; font-size:.9rem }
.hero .hero-media{ min-height: 180px }
.hero .hero-placeholder{
  height: 220px; border-radius: var(--radius);
  background: radial-gradient(90% 60% at 20% 20%, #FFD188 0%, #F1E4D3 60%, transparent 61%),
              linear-gradient(135deg, color-mix(in oklab, var(--color-primary), #000 10%), color-mix(in oklab, var(--color-accent), #fff 10%));
  box-shadow: var(--shadow);
}
.hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 }

.progress-mini .bar{
  height: 8px; background: color-mix(in oklab, var(--color-text), transparent 90%);
  border-radius: 999px; overflow:hidden; margin: 10px 0 6px;
}
.progress-mini .bar span{ display:block; height:100%; background: var(--color-primary) }

/* Budget */
.budget-grid{ display:grid; gap:12px }
.budget-grid .card{ display:grid; gap:8px }
.amount{ font-weight: 700; color: var(--color-primary) }

/* Tiers */
.tiers{ display:grid; gap:12px }
.tier{
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; border: 1px solid color-mix(in oklab, var(--color-text), transparent 85%);
}
html[data-theme="dark"] .tier{ background: color-mix(in oklab, var(--color-card), #000 10%) }
.tier.highlight{ border: 2px solid var(--color-primary) }

/* Progreso */
.progress{ display:grid; gap: 12px }
.progress-bar{
  height: 16px; border-radius: 999px; overflow:hidden;
  background: color-mix(in oklab, var(--color-text), transparent 90%);
}
.progress-fill{
  height:100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  width:0%;
}
.progress-stats{ display:flex; flex-wrap:wrap; gap:12px }

.donors{ margin-top: 16px }
.ticker{
  overflow:hidden; border-radius: 999px; background: var(--color-card);
  border:1px solid color-mix(in oklab, var(--color-text), transparent 85%);
}
.ticker-track{
  display:inline-block; white-space: nowrap; padding: 8px 0 10px;
  animation: ticker 28s linear infinite;
}
@keyframes ticker{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
.donor-grid{
  display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  margin-top:12px; list-style:none; padding:0;
}
.donor-grid li{
  background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow);
}
html[data-theme="dark"] .donor-grid li{ background: color-mix(in oklab, var(--color-card), #000 10%) }

/* Impacto */
.impact-list{ display:grid; gap:8px; padding-left: 18px }

/* Timeline */
.timeline{ display:grid; gap:8px; padding-left: 18px }

/* Pagos */
.pay-grid{ display:grid; gap:12px }
.donate-form{ display:grid; gap:8px }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap }
.hint,.tip{ opacity:.8; font-size:.9rem }

/* Inputs de PayPal */
#aporta .donate-form input[type="number"]{
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--color-text), transparent 85%);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
#aporta .donate-form button{ width:100% }

/* Compartir */
.share-row{ display:flex; gap:8px; flex-wrap: wrap }

/* Newsletter (versión única, sin duplicados) */
#aporta .newsletter{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.2vw, 20px);
  margin-top: clamp(14px, 3vw, 28px);
  border: 1px solid color-mix(in oklab, var(--color-text), transparent 85%);
}
html[data-theme="dark"] #aporta .newsletter{
  background: color-mix(in oklab, var(--color-card), #000 6%);
  border-color: color-mix(in oklab, var(--color-text), transparent 65%);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
#aporta .newsletter .newsletter-frame{
  display: block;
  width: 100%;
  height: var(--brevo-h-mobile);
  max-width: 100%;
  border: 1px solid color-mix(in oklab, var(--color-text), transparent 80%);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  background: #fff;
}
@media (min-width:600px){
  #aporta .newsletter .newsletter-frame{ height: var(--brevo-h-tablet); }
}
@media (min-width:1024px){
  #aporta .newsletter .newsletter-frame{ height: var(--brevo-h-desktop); }
}
html[data-theme="dark"] #aporta .newsletter .newsletter-frame{
  border-color: color-mix(in oklab, var(--color-text), transparent 55%);
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}

/* Mapa */
.map-wrap iframe{
  width: 100%; height: 240px; border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Footer */
.site-footer{
  border-top: 1px solid color-mix(in oklab, var(--color-text), transparent 90%);
  padding: 24px 0; margin-top: 16px;
}
.site-footer .legal{ opacity:.8; font-size:.9rem }

/* === CONTENEDOR CENTRAL === */
#contenido{
  max-width: 1100px;
  margin: 24px auto;
  padding: 8px 8px 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] #contenido{
  background: color-mix(in oklab, var(--color-card), #000 6%);
}
/* Las secciones .alt sólo colorean dentro del contenedor */
.section.alt{ background: transparent; margin: 0 }
.section.alt .wrap{
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.map-wrap iframe{ box-shadow: none }
.section .card{ background: #fff }
html[data-theme="dark"] .section .card{
  background: color-mix(in oklab, var(--color-card), #000 10%);
}

/* Recompensas: CTA centrado y ancho cómodo */
#recompensas .tier-cta{
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 4vw, 28px);
}
#recompensas .tier-cta .btn{
  width: min(100%, 460px);
  padding: 14px 22px;
  font-size: 1.05rem;
}
#recompensas .tiers .tier:last-of-type{ margin-bottom: 8px }

/* Desktop tweaks */
@media (min-width: 768px){
  .hero .wrap{ grid-template-columns: 1.1fr .9fr }
  .budget-grid{ grid-template-columns: repeat(3,1fr) }
  .tiers{ grid-template-columns: repeat(2,1fr) }
  .pay-grid{ grid-template-columns: repeat(2,1fr) }
  .quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px }
}
@media (min-width: 1024px){
  .wrap{ padding: 20px }
}

/* === Modal legal === */
.legal-link { text-decoration: underline; text-underline-offset: 2px }

.modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  padding: 16px;
  z-index: 1000;
}
.modal.open{ display: block }

.modal-dialog{
  max-width: 760px;
  margin: 6vh auto;
  background: #fff;
  color: var(--color-text);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
html[data-theme="dark"] .modal-dialog{
  background: color-mix(in oklab, var(--color-card), #000 6%);
}
.modal-header, .modal-footer{
  padding: 14px 16px;
  background: var(--color-card);
}
.modal-header{ display:flex; align-items:center; justify-content: space-between }
.modal-close{
  background: transparent; border: 0; font-size: 1.2rem; cursor: pointer;
  padding: 6px 10px; border-radius: 999px;
}
.modal-close:hover{ background: color-mix(in oklab, var(--color-text), transparent 90%) }
.modal-body{ padding: 16px; max-height: 72vh; overflow: auto }
.modal-body .muted{ opacity:.8 }
.modal-body .small{ font-size:.9rem }

/* === Enlaces globales (excepto botones) === */
:where(a:not(.btn)){
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
:where(a:not(.btn)):visited{ color: var(--color-primary) }
:where(a:not(.btn)):hover,
:where(a:not(.btn)):focus-visible{
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent), transparent 70%);
  border-radius: 4px;
}
a.btn, a.btn:visited{ color: inherit; text-decoration: none }
.site-header .brand-name{ text-decoration: none }

/* ——— APORTA: PayPal importes rápidos (barras anchas apiladas) ——— */
#aporta .quick-amounts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
#aporta .quick-amounts .btn{
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid color-mix(in oklab, #000, transparent 90%);
  box-shadow: var(--shadow);
  transition: filter .15s ease, transform .05s ease;
}
#aporta .quick-amounts .btn:hover,
#aporta .quick-amounts .btn:focus-visible{
  filter: brightness(1.08);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent), transparent 70%);
}
#aporta .quick-amounts .btn:active{ transform: translateY(0) scale(.99) }
#aporta .quick-amounts .btn.is-active{
  background: var(--color-accent);
  color: #1a130f;
  border-color: color-mix(in oklab, #000, transparent 92%);
}
html[data-theme="dark"] #aporta .quick-amounts .btn{
  background: color-mix(in oklab, var(--color-primary), #000 10%);
  border-color: color-mix(in oklab, #fff, transparent 75%);
}
html[data-theme="dark"] #aporta .quick-amounts .btn.is-active{
  background: var(--color-accent);
  color: #1a130f;
}

/* Badge opcional en h3 de cards */
#aporta .card h3::after{
  content: attr(data-badge);
  margin-left: 8px;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text);
}

/* ——— APORTA: Transferencia + Wise en MISMA tarjeta ——— */
#aporta #bankCard .pay-method{ display: grid; gap: 8px }
#aporta #bankCard .pay-divider{
  height: 1px; margin: 10px 0;
  background: color-mix(in oklab, var(--color-text), transparent 80%);
  border-radius: 999px;
}
html[data-theme="dark"] #aporta #bankCard .pay-divider{
  background: color-mix(in oklab, var(--color-text), transparent 60%);
}
#aporta #bankCard h4{ margin: 4px 0 2px; font-size: 1rem }

/* 2 columnas en desktop para métodos de pago */
@media (min-width: 768px){
  #aporta .pay-grid{ grid-template-columns: repeat(2, 1fr); align-items: stretch }
}

/* ——— APORTA: Compartir al final con aire ——— */
#aporta .share{ margin-top: clamp(18px, 4vw, 36px) }
#aporta .share-row .btn{ font-weight: 600 }
html[data-theme="dark"] #aporta .share-row .btn{
  background: #302451;
  color: #fff;
  border: 1px solid color-mix(in oklab, #ffffff, transparent 75%);
}
html[data-theme="dark"] #aporta .share-row .btn:hover,
html[data-theme="dark"] #aporta .share-row .btn:focus-visible{
  filter: brightness(1.12);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent), transparent 70%);
}