/* 
  SaaS Clean Design System
  Rediseño Premium para Fundación Colombia Productiva
*/

:root {
  /* Logo-Derived Color Palette (Refined for UI) */
  --co-yellow: #FFCD00; 
  --co-blue: #003087;   
  --co-red: #C8102E;    
  
  /* Modern UI Palette */
  --primary-blue: #2563EB;
  --primary-hover: #1D4ED8;
  --navy-dark: #0B1120;
  --navy-light: #1E293B;
  
  /* Accents */
  --accent-gold: #F59E0B;
  --accent-teal: #0D9488;
  
  /* Backgrounds */
  --bg-color: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-alt: #F1F5F9;
  
  /* Text Colors */
  --text-dark: #0F172A;
  --text-main: #334155;
  --text-muted: #64748B;
  
  --border-light: #E2E8F0;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Outfit', sans-serif;
  
  /* Shadows & Effects */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);
  
  --trans: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-md: 12px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  line-height: 1.2;
}

h2 { font-size: 2.8rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.02em; }
p { font-size: 1.125rem; }

.highlight-blue { color: var(--primary-blue); }
.highlight-text { 
  color: var(--navy-dark);
  font-weight: 800;
  display: inline-block;
  position: relative;
}
.highlight-text::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(245, 158, 11, 0.3);
  z-index: -1;
  border-radius: 4px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--trans);
  text-decoration: none;
  white-space: nowrap;
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: white;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--bg-color);
  color: var(--navy-dark);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background-color: var(--bg-soft);
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background-color: transparent;
}
.btn-outline:hover {
  background-color: var(--primary-blue);
  color: white;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.btn-outline-light:hover {
  border-color: white;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-block { width: 100%; display: block; }

/* --- Navbar --- */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  transition: var(--trans);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; gap: clamp(0.75rem, 2.4vw, 2rem);}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.logo-stack { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text { 
  font-family: var(--font-heading); 
  font-size: 1.25rem; 
  font-weight: 800; 
  color: var(--navy-dark);
  letter-spacing: -0.5px;
}
.logo-subtext {
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary-blue);
  font-weight: 700;
}

.nav-links { display: flex; gap: clamp(1.1rem, 2.2vw, 2.5rem); }
.nav-links a { text-decoration: none; color: var(--text-main); font-weight: 500; font-size: 0.95rem; transition: var(--trans); white-space: nowrap; }
.nav-links a:hover { color: var(--primary-blue); }

.nav-actions { display: flex; gap: clamp(8px, 1.2vw, 14px); align-items: center; }

/* Pill más liviano que .btn para links secundarios de la barra de
   navegación (Donar, Productivos.co) — el mismo patrón que ya usa
   Productivos.co (.nav__login) para que la barra respire en vez de cargar
   varios botones grandes uno junto al otro. */
.nav-link-pill {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--trans);
}
.nav-link-pill:hover {
  color: var(--primary-blue);
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.08);
}
.nav-link-pill--accent {
  color: var(--primary-blue);
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.07);
}
.nav-link-pill--accent:hover {
  border-color: rgba(37, 99, 235, 0.6);
  background: rgba(37, 99, 235, 0.13);
}

/* El botón primario de la barra de navegación no necesita ser tan grande
   como los CTA del hero — a la escala de .btn normal, junto a los pills
   nuevos, se veía desproporcionado y forzaba el wrap del texto en pantallas
   medianas. */
.nav-actions .btn {
  padding: 0.6rem 1.35rem;
  font-size: 0.85rem;
}

.menu-btn {
  display: none;
  background: none; border: none; font-size: 2rem; color: var(--text-dark); cursor: pointer;
}

/* --- Mobile Nav --- */
.mobile-nav {
  position: fixed; top: 0; right: -100%; width: 100%; max-width: 350px;
  height: 100vh; background: white; z-index: 1000;
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  padding: 4rem 2rem; display: flex; flex-direction: column; gap: 1.5rem;
  transition: var(--trans);
}
.mobile-nav.active { right: 0; }
.close-mobile-nav {
  position: absolute; top: 20px; right: 20px;
  background: var(--bg-soft); border: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer;
}
.mobile-nav a.mobile-link { text-decoration: none; font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-dark); font-weight: 700; border-bottom: 1px solid var(--border-light); padding-bottom: 1rem; }

/* --- Hero Section --- */
.hero {
  padding: 8rem 0 6rem;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: #0f1a2e; /* flat navy — animated Colombia map lives on top via #hero-canvas */
}

/* Animated Colombia map — see hero-map-canvas.js */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.scroll-hint {
  display: none;
  position: absolute;
  left: 0; right: 0;
  justify-content: center;
  color: #CBD5E1;
  font: 500 0.8rem 'Inter', sans-serif;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(8px); opacity: 1; }
}

.hero-container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.hero-content { grid-column: 1 / 3; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: #93C5FD;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
}
.hero h1 { 
  font-size: 4rem; 
  margin-bottom: 1.5rem; 
  color: white; 
  font-weight: 800; 
  letter-spacing: -0.03em; 
  line-height: 1.1;
}

.text-colombia-flag {
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero p { color: #CBD5E1; margin-bottom: 2.5rem; font-size: 1.25rem; max-width: 550px; line-height: 1.6; }
.hero-buttons { display: flex; gap: 1rem; }

/* Legacy graphic-card styles (kept for compatibility) */
.hero-graphics { flex: 1; position: relative; }
.graphic-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  aspect-ratio: 4/3;
  animation: float 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.graphic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* --- About Section --- */
.about-section { padding: 8rem 0; background: var(--bg-color); }
.about-container { display: flex; align-items: center; gap: 6rem; }
.about-text { flex: 1; }
.about-text h2 { font-size: 3rem; margin-bottom: 1.5rem; }
.about-text p { color: var(--text-muted); margin-bottom: 2rem; font-size: 1.15rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--primary-blue); font-weight: 600; text-decoration: none; font-size: 1.05rem;
}
.link-arrow i { transition: transform 0.2s ease; font-size: 1.3rem; }
.link-arrow:hover i { transform: translateX(5px); }

.about-features { flex: 1.2; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.feature-item {
  background: var(--bg-soft); padding: 2rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: var(--trans);
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  background: white;
}
.f-icon { 
  font-size: 2rem; 
  margin-bottom: 1.5rem; 
  width: 56px; height: 56px;
  background: #EFF6FF;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.text-blue { color: var(--primary-blue); }
.text-yellow { color: var(--accent-gold); background: #FEF3C7; }
.feature-item h4 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--navy-dark); }
.feature-item p { color: var(--text-muted); font-size: 0.95rem; margin: 0; line-height: 1.5; }

/* --- Founders --- */
.founders-section { padding: 6rem 0; background: var(--bg-soft); }
.founders-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto;
}
.founder-card {
  background: white; border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  padding: 2rem 1.5rem; text-align: center; transition: var(--trans);
}
.founder-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.founder-photo {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top center;
  margin: 0 auto 1.25rem; display: block; border: 3px solid var(--bg-soft);
}
.founder-card h4 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--navy-dark); }
.founder-tag {
  display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--primary-blue);
  background: #EFF6FF; padding: 0.25rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: 1rem;
}
.founder-linkedin { display: block; font-size: 1.8rem; color: var(--text-muted); transition: var(--trans); }
.founder-linkedin:hover { color: #0A66C2; }

@media (max-width: 768px) {
  .founders-grid { grid-template-columns: 1fr; max-width: 320px; }
}

/* --- SaaS Solutions Tabbed --- */
.solutions-section { padding: 8rem 0; background: var(--bg-soft); }
.section-title { text-align: center; max-width: 650px; margin: 0 auto 4rem; }
.section-title p { color: var(--text-muted); margin-top: 1rem; }

.category-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem;
  background: white; padding: 8px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); width: fit-content; margin-left: auto; margin-right: auto;
  border: 1px solid var(--border-light);
}
.tab-btn {
  background: transparent; border: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 500; color: var(--text-muted); cursor: pointer; transition: var(--trans); font-size: 0.95rem;
}
.tab-btn:hover { color: var(--navy-dark); }
.tab-btn.active { background: var(--primary-blue); color: white; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); font-weight: 600; }

.tab-pane { display: none; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.tab-pane.active { display: block; }

.solutions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;
}

.solution-card {
  background: white; padding: 2rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: var(--trans);
  box-shadow: var(--shadow-sm);
}
.solution-card:hover {
  border-color: #BFDBFE;
  box-shadow: var(--shadow-xl);
  transform: translateY(-5px);
}
.icon-box {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem;
}

/* Premium Monochromatic / Soft Accents for Icons */
.pastel-blue { background: #EFF6FF; color: var(--primary-blue); }
.pastel-yellow { background: #FFF7ED; color: var(--accent-gold); }
.pastel-red { background: #F0FDF4; color: #16A34A; } /* Swapped red to a fresh green for positivity */

.solution-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--navy-dark); }
.solution-card p { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

/* --- CTA Banner --- */
.cta-banner { padding: 4rem 0 8rem; background: var(--bg-soft); }
.cta-bg {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #1E3A8A 100%);
  border-radius: var(--radius-xl); padding: 5rem 3rem; text-align: center; color: white;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.cta-bg::before {
  content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%; transform: translate(30%, -30%);
}
.cta-content { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.cta-content h2 { color: white; margin-bottom: 1rem; font-size: 2.5rem; }
.cta-content p { color: #DBEAFE; margin-bottom: 2.5rem; font-size: 1.15rem; }
.cta-actions { display: flex; justify-content: center; gap: 1rem; }
.cta-actions .btn-primary { background: white; color: var(--primary-blue); }
.cta-actions .btn-primary:hover { background: var(--bg-soft); transform: translateY(-2px); }

/* --- Footer --- */
footer { background: white; padding: 4rem 0 2rem; border-top: 1px solid var(--border-light); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
.footer-brand p { margin-top: 1.5rem; color: var(--text-muted); max-width: 300px; font-size: 0.95rem;}
.footer-links h4 { margin-bottom: 1.5rem; font-size: 1.05rem; color: var(--navy-dark); }
.footer-links a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 0.75rem; font-size: 0.95rem; transition: var(--trans); }
.footer-links a:hover { color: var(--primary-blue); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 2rem;
  color: var(--text-muted); font-size: 0.9rem;
}
.footer-bottom-links { display: flex; gap: 1.1rem; }
.footer-bottom-links a { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; transition: var(--trans); }
.footer-bottom-links a:hover { color: var(--primary-blue); }
.social-icons i { font-size: 1.3rem; margin-left: 1rem; cursor: pointer; transition: color 0.2s; color: var(--text-muted); }
.social-icons i:hover { color: var(--primary-blue); }
.social-icons svg { width: 1.3rem; height: 1.3rem; margin-left: 1rem; cursor: pointer; transition: color 0.2s; color: var(--text-muted); vertical-align: middle; }
.social-icons a:hover svg { color: var(--primary-blue); }

/* --- Floating Lead Btn --- */
.floating-lead-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25D366;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: var(--trans);
}

.floating-lead-btn:hover {
  background-color: #128C7E;
  transform: scale(1.05);
}

.floating-lead-btn::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0; animation: ripple 2s infinite;
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Floating Donate Btn — mismo patrón que .floating-lead-btn, apilado justo debajo */
.floating-donate-btn {
  position: fixed;
  bottom: 100px;
  right: 30px;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  z-index: 1000;
  transition: var(--trans);
}

.floating-donate-btn:hover {
  background-color: var(--primary-hover);
  transform: scale(1.05);
}

/* Sección de donaciones — compacta y mobile-first, horizontal desde ~860px
   (texto a la izquierda, tarjeta a la derecha) en vez de una columna larga
   centrada; padding-top chico a propósito (la sección anterior, .cta-banner,
   ya trae 8rem de padding-bottom propio, así que sumarle otro padding-top
   grande acá dejaba un salto enorme entre las dos — encontrado probando en
   vivo). */
.donations-section { padding: 0.5rem 0 2.75rem; }

.donations-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.donations-intro { text-align: center; }
.donations-intro h2 { margin: 0 0 6px; }
.donations-intro p { margin: 0 auto; max-width: 520px; }

.donations-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 1.1rem 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.donations-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 0.85rem;
}

.donation-freq {
  display: inline-flex;
  background: var(--bg-soft);
  padding: 5px;
  border-radius: var(--radius-pill);
}

.donation-freq-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--trans);
  font-size: 0.88rem;
}

.donation-freq-btn.active { background: var(--primary-blue); color: white; }
.donation-freq-btn[disabled] { cursor: not-allowed; opacity: 0.55; }

.donations-min-note { color: var(--text-muted); margin: 0; font-size: 0.85rem; }

.donation-amounts { display: flex; flex-wrap: nowrap; gap: 0.5rem; margin-bottom: 0.75rem; }

.amount-chip {
  flex: 1 1 0;
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--trans);
  font-size: 0.82rem;
  white-space: nowrap;
}

.amount-chip.active { background: #EFF6FF; border-color: var(--primary-blue); color: var(--primary-blue); }

.donation-bottom-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.donation-amount-custom { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 160px; margin: 0; }
.donation-amount-custom span { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }

.donation-amount-custom input {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.donation-amount-custom input:focus { outline: none; border-color: var(--primary-blue); }

#donation-submit-btn { flex: 0 0 auto; }

/* En móvil el botón flotante de donar/WhatsApp vive en la esquina inferior
   derecha con position:fixed — si el botón "Donar" del formulario queda
   pegado a ese mismo borde, los botones flotantes lo tapan visualmente
   (encontrado probando en un celular real). Se apila la fila para que el
   botón nunca quede hugging el borde derecho en pantallas chicas. */
@media (max-width: 480px) {
  .donation-bottom-row { flex-direction: column; }
  .donation-amount-custom { flex: 1 1 auto; }
  #donation-submit-btn { width: 100%; }
}

@media (min-width: 860px) {
  .donations-layout { flex-direction: row; align-items: center; }
  .donations-intro { flex: 1; text-align: left; }
  .donations-intro p { margin: 0; }
  .donations-card { flex: 1.4; }
}

/* Responsive */
@media (max-width: 1024px) {
  /* The map fills the first screenful (centered) and never disappears —
     only a bouncing "scroll" arrow hints there's more. Text lives in
     normal flow right after that, so scrolling reveals it the ordinary
     way. --above-hero-h (set by the inline script) is the sticky navbar's
     real height, so "one screenful" is accurate instead of assuming
     .hero starts flush at the viewport's top. */
  .hero { min-height: calc(100vh - var(--above-hero-h, 80px)); padding: 0; }
  #hero-canvas { height: calc(100vh - var(--above-hero-h, 80px)); }
  .scroll-hint { display: flex; top: calc(100vh - var(--above-hero-h, 80px) - 4.5rem); }
  .hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; padding-top: calc(100vh - var(--above-hero-h, 80px)); }
  .hero-content { grid-column: 1; max-width: 100%; }
  .hero-buttons { justify-content: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .about-container { flex-direction: column; text-align: center; }
  .about-features { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem;}
}
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .menu-btn { display: block; }
  .hero h1 { font-size: 2.5rem; }
  .hero p { font-size: 1.05rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .cta-bg { padding: 3rem 1.5rem; }
  .cta-actions { flex-direction: column; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
  .about-features { grid-template-columns: 1fr; }
}

.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 17, 32, 0);
  transition: background 0.3s ease;
}

.consent-overlay--visible {
  background: rgba(11, 17, 32, 0.55);
}

.consent-banner {
  width: 100%;
  max-width: 420px;
  background: var(--bg-color);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 28px;
  font-family: var(--font-body);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.consent-overlay--visible .consent-banner {
  opacity: 1;
  transform: scale(1);
}

.consent-banner__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
}

.consent-banner__status {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.consent-banner__text {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.consent-banner__text a {
  color: var(--primary-blue);
  text-decoration: underline;
}

.consent-banner__actions {
  display: flex;
  gap: 10px;
}

.consent-banner__btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}

.consent-banner__btn--reject {
  background: var(--bg-alt);
  color: var(--text-main);
}

.consent-banner__btn--accept {
  background: var(--primary-blue);
  color: #fff;
}

@media (max-width: 480px) {
  .consent-banner {
    padding: 22px;
  }
}