/* ==============================
   Variables y base
=================================*/
:root{
  --pink:#ff2b9e;
  --cyan:#48c3ff;
  --lime:#7ad93a;
  --ink:#0e0e0e;
  --muted:#f3f4f6;
  --bg:#ffffff;
  --maxw:1200px;      /* ancho de contenido */
  --nav-h:72px;       /* alto del header fijo */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);width:100%;}
body{
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ==============================
   Layout
=================================*/
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%;}
section{padding:72px 0;width:100%;scroll-margin-top:calc(var(--nav-h) + 20px);}
.title{
  font-family:Montserrat, sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem, 2vw + 1rem, 2.6rem);
  text-align:center;
  margin:0 0 2.2rem;
}

/* ==============================
   Header / Nav
=================================*/
.nav{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid #eef0f3;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand__logo img{height:48px}
.menu{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.menu a{color:#111827;text-decoration:none;font-weight:600}
.btn{padding:.7rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none;display:inline-block}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn--primary:hover{transform:translateY(-1px)}
.lang-switch{display:flex;align-items:center;gap:.5rem}
.lang-switch select{
  padding:.45rem .6rem;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:600
}


.hero{
  position:relative;
  width:100%;
  height:100vh; /* ocupa toda la altura de la ventana */
  display:flex;
  align-items:center;
  justify-content:center;
  background:url("./poster-desktop.jpg") no-repeat center center;
  background-size:cover; /* la imagen cubre todo el espacio */
  background-attachment:scroll; /* cámbialo a fixed si quieres efecto parallax */
}

@media(max-width:768px){
  .hero{
    background:url("./poster-mobile.jpg") no-repeat center center;
    background-size:cover;
  }
}

}
@media(max-width:768px){
  .hero{background:url("./poster-mobile.jpg") center/cover no-repeat;}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.18))}
.hero__wrap{width:100%;padding:0 28px;max-width:var(--maxw);margin:0 auto;position:relative}
.hero__overlay{max-width:880px;text-align:left}
.kicker{letter-spacing:.45em;font-weight:600;margin:0 0 6px;opacity:.95}
.hero__title{
  margin:0;font-family:Montserrat, sans-serif;text-transform:uppercase;
  font-size:clamp(2rem, 5vw + 1rem, 4.8rem);line-height:1.05;text-shadow:0 6px 24px rgba(0,0,0,.35)
}
.hero__title .accent{color:var(--lime)}
.hero__subtitle{margin:.6rem 0 0;font-size:clamp(1rem, 1.2vw + .6rem, 1.35rem);opacity:.95}

/* ==============================
   Tarjetas / Grids
=================================*/
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:#fff;border:1px solid #eef0f3;border-radius:18px;padding:26px;text-align:center;
  box-shadow:0 12px 30px rgba(16,24,40,.10)
}
.card h3{margin:.6rem 0 .25rem;font-size:1.1rem;font-weight:800}
.card p{margin:.35rem 0 0;color:#4b5563}

/* ==============================
   CTA
=================================*/
.cta{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(90deg, var(--pink), var(--cyan));color:#fff}
.cta__inner{display:grid;grid-template-columns:2fr auto;gap:18px;align-items:center;padding:40px 32px}
.cta h2{margin:0;font-size:clamp(1.7rem, 1.6vw + 1rem, 2.2rem);font-weight:800}
.cta .btn{background:#fff;color:#111827;font-weight:800}

/* ==============================
   Formulario de Contacto
=================================*/
#contacto .card{max-width:760px;margin:0 auto;text-align:left}
input, textarea{
  font:inherit;border:1px solid #e5e7eb;border-radius:12px;padding:.85rem;width:100%;background:#fff;color:#111;
}
input:focus, textarea:focus{outline:none;border-color:#a5b4fc;box-shadow:0 0 0 4px rgba(99,102,241,.15)}

/* ==============================
   Footer
=================================*/
footer{padding:36px 0 48px;border-top:1px solid #eef0f3;color:#4b5563}
footer a{color:#111827;text-decoration:none}

/* ==============================
   Responsivo
=================================*/
@media (max-width: 1080px){
  .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .menu{gap:.6rem}
  .grid3{grid-template-columns:1fr}
  .hero{min-height:70vh;padding:40px 0}
  .hero__overlay{text-align:center}
}

/* ===== Fondo bonito solo para quienes.html ===== */
.body-about{
  /* Degradé + “luces” radiales suaves */
  background:
    radial-gradient(800px 500px at -10% -10%, rgba(72,195,255,.20) 0%, rgba(72,195,255,0) 60%),
    radial-gradient(800px 600px at 110% 0%,  rgba(255,43,158,.18) 0%, rgba(255,43,158,0) 62%),
    linear-gradient(180deg, #f7fafc 0%, #f0f5ff 100%);
}

/* Encabezado de la página Quienes */
.about-header .lead{
  max-width: 900px;
  margin: 12px auto 0;
  color:#475569;
  text-align:center;
  font-size: clamp(1rem, .35vw + 1rem, 1.1rem);
}

/* Grid de tarjetas */
.about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}

/* Tarjeta */
.about-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:18px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px rgba(16,24,40,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.about-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(16,24,40,.14);
}
.about-card h2{
  margin:0 0 .4rem;
  font-size:1.25rem;
  font-weight:800;
}
.about-card p{
  margin:0;
  color:#4b5563;
  line-height:1.6;
}

/* Responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ===== HERO A PANTALLA COMPLETA (sin recortes visibles del header) ===== */
:root{ --nav-h:72px; }            /* ajusta si tu header mide diferente */
html, body { height:100%; }

.hero{
  position: relative;
  width: 100%;
  height: calc(100svh - var(--nav-h)) !important;   /* usa svh para móviles */
  min-height: calc(100svh - var(--nav-h)) !important;
  background-image: url("./poster-desktop.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;                           /* llena, puede recortar */
}

/* imagen específica para móviles */
@media (max-width: 768px){
  .hero{
    background-image: url("./poster-mobile.jpg");
  }
}

/* si tienes un overlay (::after), no afecta el alto */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.08));
  pointer-events:none;
}
/* ===== NAV limpio (tipografía más fuerte) ===== */
.menu { display:flex; gap:28px; align-items:center; }
.menu > a, .menu .has-sub { 
  font-weight:700; color:#111; text-decoration:none; padding:10px 0; 
}

/* ===== Dropdowns ===== */
.dropdown { position:relative; }
.submenu{
  position:absolute; top:100%; left:0;
  min-width:220px;
  background:#fff; border:1px solid #eef0f3; border-radius:12px;
  box-shadow:0 16px 36px rgba(16,24,40,.12);
  padding:8px; margin-top:10px;
  display:block; opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:.18s ease;
  z-index:1001;
}
.submenu li{ list-style:none; }
.submenu a{
  display:block; padding:10px 12px; border-radius:8px; color:#111; text-decoration:none;
  font-weight:600;
}
.submenu a:hover{ background:#f5f7fb; }

.dropdown:hover .submenu,
.dropdown:focus-within .submenu{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* flechita opcional en items con submenú */
.has-sub::after{
  content:"▾"; margin-left:6px; font-size:.85em; opacity:.7;
}

/* ===== Botón Donar claro (sin negro) ===== */
.btn--primary{ background:transparent; color:#111; border:1px solid #e5e7eb; }
.btn--primary:hover{ background:#111; color:#fff; }
.btn--light{ border-radius:999px; padding:.55rem 1rem; }

/* ===== Quitar “pastilla negra” heredada si existía ===== */
.menu .btn--primary{ box-shadow:none; }

/* ===== Header pegajoso con borde fino ===== */
.nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid #eef0f3;
}