/* portada.css — usa las variables de :root definidas en registro.css
   (--ink, --indigo, --indigo-deep, --mint, --coral, --paper, --line, --muted).
   No redefine ni modifica esos tokens: solo agrega estilos propios de la portada. */

body.landing{overflow:visible; height:auto;}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
 
/* El contenido interno se limita y centra */
.container {
  max-width: 1200px; /* Ancho máximo deseado */
  margin: 0 auto;   /* Centra horizontalmente */
  padding: 0 24px;  /* Margen interno para evitar que toque los bordes en móviles */
}

:root{
  --navy:#102A43; --blue:#1769E0; --cyan:#18B7C9; --yellow:#FFC857;
  --cloud:#F4F7FA; --white:#fff; --text:#17202A; --muted:#667085;
  --border:#D9E2EC; --shadow:0 18px 50px rgba(16,42,67,.10);
  --radius:22px; --max:1180px;
}

.eyebrow{
  font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.04em; color:var(--indigo); margin:0 0 10px;
}
.stats{margin-top:-1px;padding:18px 0;background:#102A43;color:#fff; font-size:27px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px; font-size:19px}
.stat{text-align:center}.stat strong{font-size:27px;display:block}.stat span{font-size:12px;color:#b8c7d9}


/* ---------- NAV ---------- */
.nav-bar .brand-mark{color:var(--indigo-deep); margin:0;}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; flex-wrap:wrap; gap:14px;
}
.nav-links{display:flex; gap:26px;}
.nav-links a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;}
.nav-links a:hover{color:var(--indigo);}
.nav-actions{display:flex; gap:12px; align-items:center;}
.btn-ghost{
  color:var(--indigo-deep); text-decoration:none; font-weight:600; font-size:14px;
  padding:9px 14px;
}
.btn-cta{width:auto; margin:0; padding:10px 20px; text-decoration:none; display:inline-block;}

.nav-bar .brand-mark{
  display:flex; 
  align-items:center; 
  margin:0;
}
.nav-bar .brand-mark a{
  display:inline-flex; 
  align-items:center; 
  text-decoration:none;
}
/* Logo responsivo */
.logo-img{
  /* Usa un tamaño fluido que escala entre 32px (móvil) y 42px (escritorio) */
  height: clamp(42px, 4vw, 52px);
  width: auto;           /* Mantiene la proporción original sin distorsionar */
  max-width: 100%;       /* Evita que se desborde */
  object-fit: contain;   /* Asegura que la imagen no se recorte */
  display: block;
}


/* ---------- HERO ---------- */
.hero-container {
  display: flex;
  min-height: 80vh;
  width: 100%;
  overflow: hidden;
  background-color: #111e38; 
  font-family: sans-serif;
}
.hero {
  display: flex; 
  align-items: stretch; /* Estira ambas columnas al mismo alto */
  gap: 40px; 
  flex-wrap: wrap;
  background: #ffffff; 
  color: var(--text); 
  padding: 0; /* Quitamos padding general para que la imagen toque los bordes */
  background: linear-gradient(150deg, var(--indigo-deep) 0%, var(--indigo) 100%);
  color: #e7e9fb; 
  position: relative; 
  overflow: hidden;
  width: 100%;
}

/* Añadimos padding interno exclusivamente al texto */
.hero-text {
  flex: 1 1 500px;
  max-width: 640px; 
  position: relative; 
  z-index: 1;
  padding: 64px 48px;
}
.hero .eyebrow { color: #a9e6cf; }
.hero h1 {
  font-family: 'Sora', sans-serif; 
  font-weight: 700; 
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15; 
  margin: 0 0 18px; 
  color: #fff;
}
.hero-sub { font-size: 16px; color: #c4c9ef; max-width: 56ch; margin: 0 0 28px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ctas .btn-submit { width: auto; margin: 0; padding: 13px 24px; text-decoration: none; display: inline-block; }
.btn-ghost-border {
  border: 1.5px solid rgba(255, 255, 255, .5); 
  border-radius: 7px; 
  color: #fff; 
  padding: 11.5px 22px;
  text-decoration: none; 
  font-weight: 600; 
  font-size: 15px;
}
.hero-image-container {
  flex: 1 1 450px;
  position: relative;
  min-height: 100%;
  /* El fondo degradado o color sólido que va detrás de la foto (puedes usar tu var(--indigo) o amarillo) */
  background: linear-gradient(150deg, var(--indigo-deep) 0%, var(--indigo) 100%);
  
  /* CÓDIGO CLAVE: Aplica la curva orgánica usando coordenadas SVG fluidas */
  clip-path: path("M 0,0 C 30,120 10,240 60,360 C 90,420 20,540 50,700 L 100,700 L 100,0 Z");
  /* Asegura que el recorte escale correctamente al ancho del contenedor */
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); 
}
/* LA FOTO: Ocupa el 100% de su espacio asignado sin distorsionarse */
.foto-joven {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.btn-ghost-border{
  border:1.5px solid rgba(255,255,255,.5); border-radius:7px; color:#fff; padding:11.5px 22px;
  text-decoration:none; font-weight:600; font-size:15px;
}
.hero .doc-stack{position:absolute; right:20px; bottom:-60px; opacity:.7;}


/* ---------- SECCIONES ---------- */
.section{padding:64px 48px; padding-left:max(48px, calc((100% - 1080px) / 2)); padding-right:max(48px, calc((100% - 1080px) / 2));}
.section-alt{background:var(--paper);}
.section h2{
  font-family:'Sora',sans-serif; font-size:38px; color:var(--ink);
  max-width:24ch; margin:0 0 16px; line-height:1.25;
}
.section h2{font-size:31px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:6px}}
.section-lead{max-width:100%;color:var(--muted);margin:0; font-size:19px}

/* ---------- TARJETAS DE CARACTERÍSTICAS ---------- */
.cards-grid{display:flex; flex-wrap:wrap; gap:18px; margin-top:8px;}
.feature-card{
  flex:1 1 230px; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:22px 20px;
}
.feature-icon{font-size:26px; display:block; margin-bottom:10px;}
.feature-card h3{font-family:'Sora',sans-serif; font-size:19px; margin:0 0 8px; color:var(--ink);}
.feature-card p{font-size:15px; color:var(--muted); margin:0; line-height:1.5;}

/* ---------- CÓMO FUNCIONA ---------- */
.paths-grid{display:flex; flex-wrap:wrap; gap:20px; margin-top:12px;}
.path-card{
  flex:1 1 320px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 24px;
}
.path-card h3{font-family:'Sora',sans-serif; font-size:23px; margin:0 0 14px; color:var(--indigo-deep);}
.steps-list{margin:0; padding-left:20px;}
.steps-list li{font-size:15px; color:var(--ink); margin-bottom:10px; line-height:1.5;}

/* ---------- LISTA CON CHECKS (empresas) ---------- */
.check-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:70ch;}
.check-list li{
  position:relative; padding-left:28px; font-size:15px; color:var(--ink);
}
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:0; width:19px; height:19px;
  border-radius:5px; background:var(--mint); color:#fff; font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- CTA FINAL ---------- */
.final-cta{
  text-align:center; padding:64px 24px; background:var(--indigo-soft);
}
.final-cta h2{font-family:'Sora',sans-serif; font-size:26px; margin:0 0 8px; color:var(--ink);}
.final-cta p{color:var(--muted); margin:0 0 22px;}
.btn-cta-lg{width:auto; margin:0; padding:14px 30px; text-decoration:none; display:inline-block;}

/* ---------- FOOTER ---------- */
.landing-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:26px 48px; font-size:13px; color:var(--muted); border-top:1px solid var(--line);
}
.landing-footer div{display:flex; gap:18px;}
.landing-footer a{color:var(--muted); text-decoration:none;}
.landing-footer a:hover{color:var(--indigo);}

@media (max-width:760px){
  .nav-bar, .hero, .section, .landing-footer{padding-left:22px; padding-right:22px;}
  .nav-links{display:none;}
}
.container{width:min(var(--max),calc(100% - 36px));margin:auto}
.cta{background:linear-gradient(120deg,var(--navy),#124c82);border-radius:30px;padding:44px;color:white;position:relative;overflow:hidden}.cta:after{content:"";position:absolute;right:-60px;top:-80px;width:300px;height:300px;border:45px solid rgba(24,183,201,.20);border-radius:50%}.cta h2{color:#fff;margin:0 0 10px}.cta p{color:#c7d6e5;max-width:630px}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.choice{padding:30px;border-radius:26px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 35px rgba(16,42,67,.06);position:relative;overflow:hidden}
.choice:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-48px;top:-55px;background:rgba(24,183,201,.10)}
.input{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:11px;outline:none;background:#fff;color:var(--text)}.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,224,.10)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 17px;font-weight:800;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:white;box-shadow:0 9px 22px rgba(23,105,224,.22)}
.btn-outline{border:1px solid var(--border);background:white;color:var(--navy)}
.btn-yellow{background:var(--yellow);color:var(--navy)}
a{text-decoration:none;color:inherit}
.tag{display:inline-block;background:#18b7c9;color:#102a43;padding:5px 9px;border-radius:999px;font-size:15px;font-weight:900;margin-bottom:12px}

.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.job{border:1px solid var(--border);border-radius:20px;padding:21px;background:#fff;box-shadow:0 8px 25px rgba(16,42,67,.05)}
.job .tag{display:inline-block;background:#e9fbfd;color:#087d8a;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;margin-bottom:12px}
.job h3{margin:0 0 4px;color:var(--navy);font-size:18px}.job p{margin:0;color:var(--muted);font-size:13px}.job-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:17px}.job-bottom span{font-size:11px;color:#74869a}
.searchbar{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;padding:12px;background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow);margin-bottom:28px}
.text-link{color:var(--blue);font-weight:800}
.choice h3{font-size:23px;margin:0 0 7px;color:var(--navy)}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.story{background:#fff;border:1px solid var(--border);border-radius:23px;padding:25px}.stars{color:#f1ae00;letter-spacing:2px}.story blockquote{font-size:17px;color:var(--navy);font-weight:650;margin:16px 0}.story small{color:var(--muted)}
.modal{display:none;position:fixed;inset:0;background:rgba(7,22,37,.65);z-index:100;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-box{background:#fff;width:min(480px,100%);border-radius:25px;padding:30px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.25)}.close{position:absolute;right:16px;top:13px;border:0;background:#f0f4f8;width:34px;height:34px;border-radius:50%;cursor:pointer}.modal-box h3{margin:0;color:var(--navy);font-size:25px}.modal-box p{color:var(--muted);font-size:13px}.form-group{margin:12px 0}.form-group label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin-bottom:5px}.form-actions{display:grid;gap:9px;margin-top:17px}.alert{position:fixed;right:18px;bottom:18px;z-index:150;padding:13px 17px;border-radius:13px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--border);font-size:13px}.alert.success{border-left:5px solid #19a974}.alert.error{border-left:5px solid #e05252}

/* Contenedor de la imagen para asegurar centrado y espaciado */
.feature-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 16px; /* Espacio entre la imagen y el título h3 */
  border-radius: 8px;
  overflow: hidden;
}
/* Control estricto del tamaño de la imagen pequeña */
.feature-img-small {
  width: 100%;
  max-width: 160px;     /* Tamaño máximo de ancho para que se vea pequeña */
  height: auto;         /* Mantiene la proporción original */
  max-height: 110px;    /* Evita que distorsione verticalmente la tarjeta */
  object-fit: contain;  /* Asegura que toda la ilustración sea visible sin recortes */
  display: block;
  transition: transform 0.3s ease; /* Efecto suave opcional */
}
/* Efecto hover opcional: la ilustración se eleva ligeramente */
.feature-card:hover .feature-img-small {
  transform: translateY(-4px);
}



@media(max-width:900px){.navlinks{display:none}.menu{display:block}.nav-actions .btn-outline{display:none}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:410px}.person-card{right:0}.stats-grid{grid-template-columns:repeat(2,1fr)}.feature-grid,.jobs,.stories{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.searchbar{grid-template-columns:1fr}.section{padding:65px 0}}
@media(max-width:560px){.container{width:min(100% - 24px,var(--max))}.nav{height:68px}.logo{font-size:18px}.logo-mark{width:38px;height:38px}.hero{padding-top:45px}h1{font-size:44px}.hero-copy{font-size:17px}.hero-art{min-height:330px}.person-card{height:315px}.opportunity{width:175px;top:25px}.stats-grid{gap:10px}.stat strong{font-size:22px}.choice-grid{grid-template-columns:1fr}.section h2{font-size:31px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:6px}}
/* Adaptación para pantallas móviles */
/* Adaptación para pantallas móviles (Pantallas menores a 900px) */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    padding: 40px 22px; /* Devolvemos un padding cómodo para el texto en móvil */
  }

  .hero-text {
    padding: 0; /* Limpiamos el padding extra para que use el del contenedor principal */
    max-width: 100%; /* El texto toma todo el ancho de la pantalla */
  }

  /* CÓDIGO CLAVE: Oculta por completo el recuadro de la imagen y su fondo */
  .hero-image-container {
    display: none;
  }
}
.section {
  width: 100%;
  box-sizing: border-box;
  padding: 64px max(22px, calc((100% - 1200px) / 2));
}