/* ============================================
   ASISTA — Hoja de estilos principal
   ============================================ */

:root{
  --purple: #4B2E83;
  --purple-dark: #331f5c;
  --blue: #1E5F8C;
  --teal: #147F93;
  --green: #2FA66C;
  --gradient: linear-gradient(100deg, var(--purple) 0%, var(--blue) 45%, var(--teal) 70%, var(--green) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(75,46,131,.10) 0%, rgba(20,127,147,.10) 55%, rgba(47,166,108,.10) 100%);

  --ink: #1C1E26;
  --ink-soft: #4B4F5A;
  --gray-50: #F7F8FA;
  --gray-100: #F0F1F5;
  --gray-200: #E4E6EC;
  --white: #FFFFFF;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-sm: 0 2px 10px rgba(28,30,38,.06);
  --shadow-md: 0 12px 30px rgba(28,30,38,.10);
  --shadow-lg: 0 24px 60px rgba(28,30,38,.16);

  --radius: 18px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
section{ position:relative; }

/* ---- Utilities ---- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--teal);
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:26px; height:2px;
  background: var(--gradient);
  border-radius:2px;
}
.eyebrow-center{ justify-content:center; }
.eyebrow-light{ color:#fff; }
h1,h2,h3,h4{
  font-weight:800;
  line-height:1.15;
  margin:0 0 16px;
  letter-spacing:-.01em;
}
h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3{ font-size: 1.3rem; }
p{ color: var(--ink-soft); line-height:1.75; margin:0 0 16px; font-size:1.02rem; }
.section-head{
  max-width: 680px;
  margin: 0 auto 52px;
  text-align:center;
}
.section-head.left{ margin: 0 0 48px; text-align:left; }

.text-gradient{
  background: var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background: var(--gradient);
  background-size:160% 160%;
  color:#fff;
  box-shadow: 0 10px 24px rgba(75,46,131,.28);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(20,127,147,.32); background-position: 100% 0; }
.btn-outline{
  background:transparent;
  border-color: var(--gray-200);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--teal); color: var(--teal); transform: translateY(-3px); }
.btn-white{
  background: #fff;
  color: var(--purple-dark);
}
.btn-white:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.btn-ghost-light{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color:#fff;
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,.18); transform: translateY(-3px); }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ============ HEADER ============ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding: 18px 0;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header.scrolled{
  /* Sin backdrop-filter a propósito: un filtro aquí crea un nuevo
     "containing block" para todo lo position:fixed que esté DENTRO del
     header (el menú móvil #navLinks vive ahí) — el menú quedaba atrapado
     dentro de la cajita del header en vez de ocupar toda la pantalla al
     abrirlo después de hacer scroll. Con un fondo casi opaco (.92) no se
     nota la diferencia visual, y el menú funciona bien en cualquier punto
     de scroll. */
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.logo-light{ display:block; }
.logo-dark{ display:none; }
.site-header.scrolled .logo-light{ display:none; }
.site-header.scrolled .logo-dark{ display:block; }

.nav-links{
  display:flex;
  align-items:center;
  gap:38px;
}
.nav-links a{
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  position:relative;
  padding: 4px 0;
  transition: color .3s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background: var(--gradient);
  transition: width .3s ease;
}
.nav-links a:hover::after{ width:100%; }

/* Solo para el menú horizontal de escritorio (fondo claro al hacer
   scroll). Envuelto en min-width para que NUNCA choque con el menú móvil
   en panel lateral (fondo oscuro, texto blanco) — si no, el texto del
   menú móvil se volvía invisible (oscuro sobre oscuro) al abrirlo
   después de hacer scroll. */
@media (min-width: 1181px){
  .site-header.scrolled .nav-links a{ color: var(--ink); }
  .site-header.scrolled .nav-links a:hover{ color: var(--teal); }
}

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn{ padding: 12px 24px; font-size:.88rem; }
.header-cta .btn-outline{ color:#fff; border-color: rgba(255,255,255,.55); }
.site-header.scrolled .header-cta .btn-outline{ color: var(--ink); border-color: var(--gray-200); }

.nav-mobile-cta{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
  z-index:1100;
}
.nav-toggle span{
  width:26px; height:2px;
  background:#fff;
  border-radius:2px;
  transition: all .3s ease;
}
.site-header.scrolled .nav-toggle span{ background: var(--ink); }

/* ============ HERO / CAROUSEL ============ */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: var(--ink);
}
.hero-slides{
  position:absolute; inset:0;
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.4s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide.active{ opacity:1; }
.hero-slide::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,10,45,.86) 0%, rgba(20,10,45,.62) 40%, rgba(15,25,35,.45) 75%),
    linear-gradient(0deg, rgba(10,8,20,.55), transparent 45%);
}
.hero-content{
  position:relative;
  z-index:5;
  color:#fff;
  max-width:640px;
  padding-top: 40px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  padding: 8px 18px 8px 8px;
  border-radius:100px;
  font-size:.82rem;
  font-weight:600;
  margin-bottom:26px;
}
.hero-badge img{ height:22px; }
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color:#fff;
  margin-bottom:20px;
}
.hero p.lead{
  color: rgba(255,255,255,.86);
  font-size:1.12rem;
  max-width:520px;
  margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}
.hero-stats div{ border-left: 2px solid rgba(255,255,255,.3); padding-left:16px; }
.hero-stats strong{ display:block; font-size:1.7rem; font-weight:800; }
.hero-stats span{ font-size:.82rem; color: rgba(255,255,255,.75); }

.hero-controls{
  position:absolute;
  right:40px;
  bottom:40px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:18px;
}
.hero-dots{ display:flex; gap:10px; }
.hero-dot{
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.35);
  border:none;
  padding:0;
  cursor:pointer;
  transition: all .3s ease;
}
.hero-dot.active{ background:#fff; width:28px; border-radius:6px; }
.hero-arrows{ display:flex; gap:10px; }
.hero-arrow{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, transform .3s ease;
}
.hero-arrow:hover{ background: rgba(255,255,255,.22); transform: translateY(-2px); }

.scroll-cue{
  position:absolute;
  left:24px;
  bottom:40px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.75);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue::after{
  content:'';
  width:1px; height:50px;
  background: rgba(255,255,255,.4);
}

/* ============ MARQUEE / ALLIES STRIP ============ */
.strip{
  background: var(--gray-50);
  padding: 26px 0;
  border-bottom:1px solid var(--gray-200);
}
.strip .container{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
  justify-content:center;
}
.strip-label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink-soft);
}
.strip-badge{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  font-size:1.05rem;
  color: var(--ink);
  padding: 8px 18px;
  background:#fff;
  border-radius:100px;
  box-shadow: var(--shadow-sm);
}
.strip-badge span.dot{ width:8px; height:8px; border-radius:50%; background: var(--gradient); }

/* ============ ABOUT ============ */
.about{ padding: 110px 0 100px; }
.about-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:70px;
  align-items:center;
}
.about-media{ position:relative; }
.about-media .img-main{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.about-media .img-main img{ width:100%; height:100%; object-fit:cover; }
.about-float-card{
  position:absolute;
  bottom:-30px; left:-30px;
  background:#fff;
  border-radius:16px;
  box-shadow: var(--shadow-lg);
  padding:22px 26px;
  display:flex;
  align-items:center;
  gap:16px;
  max-width:260px;
}
.about-float-card .icon{
  width:48px; height:48px;
  border-radius:12px;
  background: var(--gradient);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.about-float-card .icon svg{ width:24px; height:24px; stroke:#fff; }
.about-float-card strong{ display:block; font-size:1.4rem; font-weight:800; }
.about-float-card span{ font-size:.82rem; color: var(--ink-soft); }

.about-copy p{ font-size:1.05rem; }
.about-list{ margin-top:26px; display:grid; gap:16px; }
.about-list li{
  display:flex; gap:14px; align-items:flex-start;
  font-weight:600;
  color: var(--ink);
}
.about-list li svg{
  flex-shrink:0; width:22px; height:22px;
  stroke: var(--green);
  margin-top:2px;
}

/* ============ MISSION / VISION / PURPOSE ============ */
.mvp{ padding: 100px 0; background: var(--gray-50); }
.mvp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mvp-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
  border-top: 4px solid transparent;
  border-image: var(--gradient) 1;
}
.mvp-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.mvp-card .icon{
  width:56px; height:56px;
  border-radius:14px;
  background: var(--gradient-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.mvp-card .icon svg{ width:28px; height:28px; stroke: var(--purple); }
.mvp-card:nth-child(2) .icon svg{ stroke: var(--teal); }
.mvp-card:nth-child(3) .icon svg{ stroke: var(--green); }
.mvp-card h3{ margin-bottom:12px; }
.mvp-card p{ margin:0; font-size:.98rem; }

/* ============ VALUES ============ */
.values{ padding: 110px 0; }
.values-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:22px;
}
.value-card{
  text-align:center;
  padding: 34px 20px;
  border-radius:16px;
  border: 1px solid var(--gray-200);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.value-card .num{
  font-size:.78rem;
  font-weight:800;
  color:#fff;
  background: var(--gradient);
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
}
.value-card h3{ font-size:1.05rem; margin-bottom:10px; }
.value-card p{ font-size:.9rem; margin:0; }

/* ============ WHY / BENEFITS ============ */
.why{ padding: 100px 0; background: var(--ink); color:#fff; position:relative; overflow:hidden; }
.why::before{
  content:'';
  position:absolute; inset:0;
  background: var(--gradient);
  opacity:.14;
}
.why .container{ position:relative; }
.why .section-head h2{ color:#fff; }
.why .section-head p{ color: rgba(255,255,255,.7); }
.why-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.why-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:32px 26px;
  backdrop-filter: blur(4px);
  transition: background .3s ease, transform .3s ease;
}
.why-card:hover{ background: rgba(255,255,255,.12); transform: translateY(-6px); }
.why-card .icon{
  width:50px; height:50px;
  border-radius:12px;
  background: var(--gradient);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.why-card .icon svg{ width:24px; height:24px; stroke:#fff; }
.why-card h3{ color:#fff; font-size:1.05rem; margin-bottom:10px; }
.why-card p{ color: rgba(255,255,255,.68); font-size:.92rem; margin:0; }

/* ============ ALLIES / METLIFE ============ */
.allies{ padding: 100px 0; }
.allies-panel{
  background: var(--gradient-soft);
  border-radius: 28px;
  padding: 60px;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:50px;
  align-items:center;
}
.allies-copy .eyebrow{ color: var(--purple); }
.allies-copy p{ font-size:1.05rem; }
.allies-badges{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.allies-badge{
  background:#fff;
  padding:14px 22px;
  border-radius:14px;
  box-shadow: var(--shadow-sm);
  font-weight:700;
  font-size:.9rem;
  display:flex; align-items:center; gap:10px;
}
.allies-media{
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/4;
  max-width:340px;
  margin: 0 auto;
}
.allies-media img{ width:100%; height:100%; object-fit:cover; }

/* ============ GALLERY CAROUSEL ============ */
.gallery{ padding: 100px 0 110px; background: var(--gray-50); }
.gallery-track-wrap{ overflow:hidden; border-radius: var(--radius); }
.gallery-track{
  display:flex;
  gap:20px;
  transition: transform .6s ease;
}
.gallery-item{
  flex: 0 0 calc((100% - 40px)/3);
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color:#fff;
  font-weight:700;
  font-size:.92rem;
}
.gallery-nav{ display:flex; justify-content:center; gap:14px; margin-top:34px; }
.gallery-nav button{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--gray-200);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.gallery-nav button:hover{ background: var(--gradient); border-color:transparent; }
.gallery-nav button:hover svg{ stroke:#fff; }
.gallery-nav svg{ width:20px; height:20px; stroke: var(--ink); }

/* ============ CTA BANNER ============ */
.cta-banner{
  margin: 0 auto 100px;
  max-width: var(--container);
  padding: 0 24px;
}
.cta-inner{
  background: var(--gradient);
  border-radius: 28px;
  padding: 64px 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-inner::after{
  content:'';
  position:absolute; right:-60px; top:-60px;
  width:260px; height:260px;
  border-radius:50%;
  background: rgba(255,255,255,.08);
}
.cta-inner h2{ color:#fff; max-width:480px; margin-bottom:10px; }
.cta-inner p{ color: rgba(255,255,255,.85); margin:0; max-width:440px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ CONTACT ============ */
.contact{ padding: 0 0 110px; }
.contact-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.contact-info{
  background: var(--ink);
  color:#fff;
  padding:56px 46px;
  position:relative;
  overflow:hidden;
}
.contact-info::before{
  content:'';
  position:absolute; inset:0;
  background: var(--gradient);
  opacity:.18;
}
.contact-info > *{ position:relative; }
.contact-info h3{ color:#fff; font-size:1.5rem; }
.contact-info p{ color: rgba(255,255,255,.72); }
.contact-item{ display:flex; gap:16px; margin-top:26px; align-items:flex-start; }
.contact-item .icon{
  width:42px; height:42px; border-radius:10px;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-item .icon svg{ width:20px; height:20px; stroke:#fff; }
.contact-item strong{ display:block; font-size:.95rem; margin-bottom:2px; }
.contact-item span{ font-size:.9rem; color: rgba(255,255,255,.72); }
.contact-item .value-link{ color: rgba(255,255,255,.85); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset:3px; transition: color .3s ease; }
.contact-item .value-link:hover{ color:#fff; text-decoration-color:#fff; }
.contact-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.contact-action{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border-radius:100px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  font-size:.82rem;
  font-weight:700;
  color:#fff;
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.contact-action svg{ width:15px; height:15px; stroke:#fff; transition: stroke .3s ease; }
.contact-action:hover{ background:#fff; color: var(--purple-dark); transform: translateY(-2px); }
.contact-action:hover svg{ stroke: var(--purple-dark); }
.contact-social{ display:flex; gap:12px; margin-top:36px; }
.contact-social a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.contact-social a:hover{ background:#fff; }
.contact-social a:hover svg{ stroke: var(--purple-dark); }
.contact-social svg{ width:17px; height:17px; stroke:#fff; }

.contact-form{ background:#fff; padding: 56px 46px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1.5px solid var(--gray-200);
  font-family:inherit;
  font-size:.95rem;
  color: var(--ink);
  transition: border-color .3s ease;
  background: var(--gray-50);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color: var(--teal);
  background:#fff;
}
.field textarea{ resize:vertical; min-height:110px; }
.contact-form .btn-primary{ width:100%; margin-top:6px; }

/* Campo honeypot: oculto para personas (fuera de pantalla, no display:none
   para que siga siendo "visible" a bots simples que evitan ese truco) */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-note{
  font-size:.88rem;
  font-weight:600;
  color: var(--green);
  min-height:1.2em;
  margin:-4px 0 14px;
}
.form-note.error{ color:#D64545; }

/* ============ FOOTER ============ */
.site-footer{
  background: var(--purple-dark);
  color: rgba(255,255,255,.75);
  padding: 70px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr .8fr .8fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand img{ height:32px; margin-bottom:18px; }
.footer-brand p{ color: rgba(255,255,255,.6); font-size:.92rem; max-width:280px; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:20px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ font-size:.9rem; color: rgba(255,255,255,.65); transition: color .3s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding: 24px 0 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:.82rem;
  color: rgba(255,255,255,.5);
}

/* ============ BACK TO TOP ============ */
.to-top{
  position:fixed;
  right:26px; bottom:26px;
  width:48px; height:48px;
  border-radius:50%;
  background: var(--gradient);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index:900;
  border:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top svg{ width:20px; height:20px; stroke:#fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .about-grid{ grid-template-columns:1fr; gap:60px; }
  .about-media{ max-width:460px; margin:0 auto; }
  .mvp-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns: 1fr 1fr; }
  .allies-panel{ grid-template-columns:1fr; padding:44px; }
  .allies-media{ order:-1; }
  .contact-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-item{ flex-basis: calc((100% - 20px)/2); }
}
@media (max-width: 1180px){
  /* El menú de escritorio (6 enlaces + 2 botones) necesita más de 1180px de
     ancho libre; entre ~860px y ~1150px (tablets en horizontal, laptops
     pequeñas) se quedaba sin espacio y los enlaces se amontonaban/superponían
     unos sobre otros. Por eso el menú hamburguesa entra antes. */
  .nav-links{
    /* right:0 + width explícito (en vez de calcular el ancho a partir de
       left:30%) para que, sea cual sea el ancho de la ventana, el panel
       cerrado (translateX(100% de SU propio ancho)) despeje siempre por
       completo el borde derecho de la pantalla. */
    position:fixed; top:0; right:0; bottom:0;
    width:70%;
    max-width:420px;
    background: var(--ink);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding: 40px;
    gap:26px;
    transform: translateX(100%);
    transition: transform .4s ease;
    z-index:1050;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ color:#fff; font-size:1.15rem; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:10px;
    width:100%;
  }
  .nav-mobile-cta .btn{ width:100%; }
  .nav-mobile-cta .btn-outline{ color:#fff; border-color: rgba(255,255,255,.4); }
  .nav-mobile-cta .btn-outline:hover{ border-color:#fff; color:#fff; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .cta-inner{ flex-direction:column; text-align:center; padding:48px 30px; }
  .cta-inner p{ margin: 0 auto; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  /* En móvil el contenido del hero suele ser más alto que la pantalla.
     Con align-items:center (versión desktop) el texto se desborda hacia
     arriba y queda debajo del header fijo, "montando" el badge sobre el
     logo. Aquí se ancla arriba y se deja crecer con el contenido. */
  .hero{
    height:auto;
    min-height:100vh;
    min-height:100svh;
    align-items:flex-start;
    padding-bottom:90px;
  }
  .hero-content{ padding-top:104px; }

  /* En móvil el hero es mucho más alto que ancho (casi la pantalla
     completa), pero las fotos son horizontales — con "cover" eso recorta
     casi todo el ancho de la imagen y solo se ve una franja del centro
     (a veces ni siquiera se reconoce a las personas de la foto). Aquí se
     usa "contain" para mostrar la foto COMPLETA, sin recortar, rellenando
     el resto con el mismo tono oscuro del fondo. */
  .hero-slide{
    background-size: contain;
    background-position: top center;
    background-color: var(--ink);
  }

  .hero-stats{ gap:24px; }
  .hero-controls{ right:20px; bottom:26px; }
  .scroll-cue{ display:none; }
  .mvp, .values, .why, .allies, .gallery, .about, .contact{ padding-top:70px; padding-bottom:70px; }
  .values-grid{ grid-template-columns: 1fr 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .allies-panel{ padding:30px; }
  .allies-badges{ flex-direction:column; }
  .contact-info, .contact-form{ padding: 40px 26px; }
  .gallery-item{ flex-basis: 100%; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  /* En móvil la tarjeta ya no es un pequeño acento flotando en la esquina
     (como en desktop): al ocupar casi todo el ancho, un margen negativo la
     hacía taparse sobre la foto. Aquí se coloca en flujo normal, debajo. */
  .about-float-card{ position:static; margin: 18px 16px 0; max-width:none; }
}