/* =========================
   VARIABLES DE MARCA
========================= */
:root{
  --primary:#3759B0;
  --secondary:#CE4778;
  --accent:#EDC831;

  --bg:#F7F8FC;
  --text:#1F2430;
  --muted:#5A6475;

  --border: rgba(0,0,0,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* =========================
   RESET / BASE
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Poppins", sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  line-height: 1.6;
}

section{
  padding:80px 20px;
  text-align:center;
}

h2{
  color:var(--primary);
  margin-bottom:16px;
}

p{
  color: var(--muted);
}

/* =========================
   NAVBAR PILL (como tu imagen)
========================= */
.topbar{
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.nav-pill{
  width: min(1100px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 20px;
  padding: 5px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand-logo{
  height: 100px;
  width: auto;
  display: block;
}


.brand-name{
  font-weight:800;
  font-size:1.25rem;
  color: var(--primary);
}

.brand-sub{
  font-size:.78rem;
  color: var(--muted);
  font-weight:500;
  margin-top:2px;
}



/* =========================
   MENU – COLOR UNIFICADO
========================= */
.menu{
  display: flex;
  align-items: center;
  gap: 18px;
}

.menu a{
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);           /* 🔹 TODOS IGUALES */
  padding: 8px 14px;
  border-radius: 12px;
  transition: 
    color .2s ease,
    background-color .2s ease;
}

/* HOVER: todos cambian igual */
.menu a:hover{
  color: var(--secondary);        /* 🔹 color al pasar cursor */
  background-color: rgba(55,89,176,.12);
}


/* =========================
   HERO DIAGONAL + 2 COLUMNAS
========================= */
.hero{
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* Fondo azul */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--primary);
  z-index:0;
}

/* Fondo rosado diagonal */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--secondary);
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 35% 100%);
  z-index:0;
}

/* Contenido encima */
.hero-container{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-text{
  text-align: left;
}

.hero-text h1{
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  margin-bottom: 16px;
  line-height: 1.12;
}

.hero-text p{
  font-size: 1.05rem;
  color: rgba(255,255,255,.92);
  max-width: 560px;
  margin-bottom: 24px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin: 10px 0 12px;
}

/* la columna de imagen solo sirve como "ancla" */
.hero-image{
  position: relative;
  min-height: 380px; /* asegura espacio */
}

/* IMAGEN SIN LÍMITES (sale del grid) */
.hero-image img{
  position: absolute;
  right: -140px;   /* la empuja hacia afuera */
  bottom: -150px;   /* baja un poquito */
  width: 720px;    /* tamaño real */
  max-width: none; /* quita cualquier límite */
  height: auto;
  display: block;
}


/* Badges */
.hero-badges span{
  margin: 6px 6px 0 0;
  display:inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.95);
  font-weight: 500;
  font-size: .92rem;
}

/* =========================
   BOTONES
========================= */
.btn-primary{
  background: var(--accent);
  color: #111;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
}

/* =========================
   QUIÉNES SOMOS (mejorado)
========================= */
.value{
  position: relative;
}

.value-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.value-lead{
  max-width: 900px;
  margin: 0 auto;
  color: var(--muted);
}

/* Grid */
.mini-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Card creativa centrada */
.mini-card{
  position: relative;
  padding: 34px 26px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(31,36,48,.10);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

.mini-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(31,36,48,.16);
}

/* ✅ Imagen circular (reemplaza icono) */
.mini-image{
  width: 100px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;

  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  overflow: hidden; /* para que la imagen quede recortada en círculo */
}

.mini-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;  /* si es foto, se adapta sin deformarse */
  display: block;
}

/* Título */
.mini-card h3{
  margin-bottom: 10px;
  font-size: 1.25rem;
  color: var(--text);
}

/* Texto */
.mini-card p{
  max-width: 460px;
  color: var(--muted);
  line-height: 1.75;
}

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

/* =========================
   VALORES (compactos)
========================= */

.values-section{
  margin-top: 50px;
  padding: 0 20px;            /* 🔹 aire a los lados */
}


.values-title{
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 26px;
  color: var(--primary);
  font-weight: 700;
}

.values-grid{
  max-width: 1100px;          /* 🔹 no ocupa toda la pantalla */
  margin: 0 auto;             /* 🔹 centrado */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.value-card{
  background: #fff;
  border-radius: 14px;
  padding: 15px 14px; /* 🔹 más compacto */
  text-align: center;
  box-shadow: 0 10px 22px rgba(31,36,48,.08);
  border: 1px solid rgba(0,0,0,.06);
}

.value-icon{
  font-size: 1.5rem; /* 🔹 icono más pequeño */
  display: block;
  margin-bottom: 6px;
}

.value-card h4{
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.value-card p{
  font-size: .85rem; /* 🔹 texto más pequeño */
  color: var(--muted);
  line-height: 1.5;
}

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

/* =========================
   PILARES – centrado simple
========================= */

.benefit-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1100px;
  margin: 40px auto 0;
}

/* Card */
.pillar-card{
  position: relative;
  padding: 70px 22px 28px;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(163, 137, 137, 0.18);
  border: 1px solid rgba(0,0,0,.06);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* 🔹 centra contenido */
  min-height: 280px;         /* 🔹 misma altura */

  transition: transform .2s ease;
}

.pillar-card:hover{
  transform: translateY(-6px);
}

/* Icono */
.pillar-icon{
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 14px 30px lab(80.24% 0 -0.01 / 0.18);
}

.pillar-icon img{
  width: 60%;
}

/* Texto */
.pillar-card h3{
  font-size: 1.05rem;
  margin-bottom: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pillar-card p{
  max-width: 320px;
  color: var(--bg);
  line-height: 1.6;
  font-size: .95rem;
}

/* Colores */
.pillar-card--blue{
  background: linear-gradient(180deg, #3759B0, #2C4691);
  color: #fff;
}
.pillar-card--pink{
  background: linear-gradient(180deg, #CE4778, #B83B68);
  color: #fff;
}
.pillar-card--yellow{
  background: linear-gradient(180deg, #EDC831, #D7B21E);
  color: #ffffff;
}

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



/* =========================
   GRIDS / TARJETAS
========================= */
.section-lead{
  max-width: 900px;
  margin: 0 auto 10px;
  color: var(--muted);
}

.mini-grid,
.benefit-grid,
.module-grid,
.partner-grid{
  display: grid;
  gap: 20px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.mini-grid{ grid-template-columns: repeat(2, 1fr); }
.benefit-grid,
.module-grid,
.partner-grid{ grid-template-columns: repeat(3, 1fr); }

.mini-card,
.benefit-card,
.module-card,
.partner-card{
  background: #fff;
  padding: 22px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: left;
  border: 1px solid var(--border);
}

.module-card ul{
  padding-left: 18px;
  color: var(--muted);
}

.module-card li{
  margin: 8px 0;
}
/* =========================
   EQUIPO / SOCIOS
========================= */
.team{
  padding: 80px 20px;
  text-align: center;
}

.team-grid{
  margin: 36px auto 0;
  max-width: 950px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 26px;
}

/* Card clickeable */
.team-card{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

.team-photo{
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(31,36,48,.10);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  transition: transform .2s ease;
}

.team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-info{
  margin-top: 12px;
}

.team-info h3{
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}

.team-info p{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

.team-card:hover .team-photo{
  transform: translateY(-4px);
}
/* =========================
   ICONOS REDES SOCIALES
========================= */

.modal-social{
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.modal-social a{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .2s ease, box-shadow .2s ease;
}

.modal-social a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
}

.modal-social img{
  width: 20px;
  height: 20px;
  display: block;
}


/* =========================
   MODAL
========================= */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 5000;
}

.modal.is-open{
  display: block;
}

.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

.modal-card{
  position: relative;
  width: min(980px, calc(100% - 32px));
  margin: 80px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
}

.modal-layout{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
}

.modal-text{
  padding: 34px 34px 28px;
  text-align: left;
}

.modal-kicker{
  color: var(--secondary);
  font-weight: 800;
  font-size: .85rem;
}

.modal-text h3{
  font-size: 2rem;
  margin: 8px 0;
  color: var(--text);
}

.modal-role{
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}

.modal-bio{
  color: var(--muted);
  line-height: 1.7;
}

/* lado derecho */
.modal-side{
  background: rgba(55,89,176,.06);
  padding: 26px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.modal-photo{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(31,36,48,.10);
}

.modal-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.modal-side-info h4{
  margin: 0;
  font-weight: 900;
  color: var(--text);
}

.modal-side-info p{
  margin: 4px 0 0;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

.modal-social{
  display: flex;
  gap: 10px;
}

.modal-social a{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 900;
}

@media (max-width: 900px){
  .team-grid{
    grid-template-columns: 1fr;
  }
  .modal-layout{
    grid-template-columns: 1fr;
  }
  .modal-card{
    margin: 60px auto;
  }
}

/* =========================
   CONTACTO – FRANJA COMPLETA
========================= */

.contact-alt{
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(55,89,176,.10),
    rgba(211, 8, 82, 0.10)
  );

}

/* Contenedor centrado */
.contact-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* IZQUIERDA */
.contact-info{
  max-width: 520px;
}

/* Kicker */
.contact-kicker{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Texto */
.contact-text{
  margin: 16px 0 26px;
  color: var(--muted);
}

/* Redes */
.contact-social{
  display: flex;
  gap: 14px;
}

.contact-social a{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-social a:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}

.contact-social img{
  width: 20px;
  height: 20px;
}

/* DERECHA – WhatsApp */
.contact-whatsapp{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.whatsapp-text{
  font-size: .85rem;
  color: var(--muted);
}

/* Botón */
.btn-whatsapp{
  padding: 16px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(37,211,102,.35);
  transition: transform .2s ease;
}

.btn-whatsapp:hover{
  transform: translateY(-2px);
}



/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px){
  .contact-inner{
    flex-direction: column;
    text-align: center;
  }

  .contact-whatsapp{
    align-items: center;
  }

  .contact-social{
    justify-content: center;
  }
}

/* =========================
   FOOTER
========================= */
footer{
  background:#111827;
  color:#fff;
  padding:20px;
  text-align:center;
}

footer p{
  color: rgba(255,255,255,.85);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .hero-container{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text{
    text-align: center;
  }

  .hero-text p{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions{
    justify-content: center;
  }

  .hero-image{
    margin-top: 18px;
  }

  .mini-grid,
  .benefit-grid,
  .module-grid,
  .partner-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  .nav-pill{
    padding: 12px 14px;
    border-radius: 18px;
  }

  .brand-sub{
    display: none;
  }

  .menu{
    gap: 10px;
  }

  .menu a{
    padding: 7px 8px;
    font-size: .85rem;
  }
}


/* =========================
   MOBILE FIX (pegar al FINAL)
========================= */

/* 1) Espaciado general en celular */
@media (max-width: 600px){
  section{
    padding: 56px 16px; /* menos padding en móvil */
  }

  /* 2) NAVBAR: más compacto y sin romperse */
  .topbar{
    top: 10px;
    padding: 0 12px;
  }

  .nav-pill{
    padding: 10px 12px;
    border-radius: 18px;
    gap: 10px;
    align-items: center;
  }

  .brand-logo{
    height: 54px; /* antes 100px */
  }

  .menu{
    gap: 8px;
    flex-wrap: wrap;         /* que baje a otra línea si no entra */
    justify-content: flex-end;
  }

  .menu a{
    padding: 6px 10px;
    font-size: .85rem;
  }

  /* 3) HERO: pasa a 1 columna y centra texto */
  .hero{
    min-height: auto;
    padding-top: 130px; /* espacio para el navbar fijo */
  }

  .hero-container{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .hero-text{
    text-align: center;
  }

  .hero-text h1{
    font-size: 2rem;
    line-height: 1.15;
  }

  .hero-text p{
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions{
    justify-content: center;
  }

  /* 4) IMAGEN HERO: quita el ABSOLUTE en móvil (esto arregla el “corte”) */
  .hero-image{
    min-height: auto;
    position: static;
  }

  .hero-image img{
    position: static;   /* <- clave */
    right: auto;
    bottom: auto;
    width: min(420px, 100%);
    max-width: 100%;
    height: auto;
    margin: 14px auto 0;
    display: block;
  }

  /* Opcional: diagonal menos agresiva en móvil */
  .hero::after{
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
  }

  /* 5) CONTACTO: que no se “estire” raro */
  .contact-inner{
    flex-direction: column;
    text-align: center;
    gap: 22px;
    padding: 42px 16px;
  }

  .contact-whatsapp{
    align-items: center;
  }

  .contact-social{
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 6) MODAL: que no se salga en móvil */
  .modal-card{
    margin: 24px auto;
  }

  .modal-text{
    padding: 22px;
  }

  .modal-side{
    padding: 18px;
  }
}

/* 7) Tablets / pantallas medianas: bajar un poco el tamaño del logo */
@media (max-width: 860px){
  .brand-logo{
    height: 72px;
  }
}

/* =========================
   FIX SCROLL MODAL EN MÓVIL
========================= */

.modal-card{
  max-height: 90vh;
  overflow: hidden;
}

.modal-layout{
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
}