/* ═══════════════════════════════════════════════════════════════════════════
   4-bloques-emprendedores.css   ·   Página EMPRENDEDORES (/emprendedores/)
   ───────────────────────────────────────────────────────────────────────────
   Bloques:
     1. emp-hero      → título + tarjeta con "camino" de 5 pasos
     2. emp-plan      → plan negro + 4 tarjetas de servicios
     3. emp-modulos   → 6 módulos en rejilla con bordes compartidos
     4. emp-servicios → 4 servicios + banner de cierre
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · HERO (con camino de pasos) ═══════════════ */
.emp-hero{ padding:var(--ESPACIO-SECCION); }
.emp-hero .contenido{
  max-width:var(--ANCHO-MAXIMO); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.emp-hero .titulo-hero{ margin-bottom:28px; }
.emp-hero .intro{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; margin-bottom:36px; max-width:440px;
}
/* tarjeta gris con los 5 pasos */
.emp-hero .camino{
  background:var(--GRIS-FONDO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-TARJETA); padding:36px;
}
.emp-hero .camino > .titulo-camino{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--VERDE); margin-bottom:28px; display:block;
}
.emp-hero .paso{
  display:flex; align-items:flex-start; gap:16px;
  position:relative; padding-bottom:24px;
}
.emp-hero .paso:last-child{ padding-bottom:0; }
/* línea vertical que une los pasos */
.emp-hero .paso:not(:last-child)::after{
  content:""; position:absolute; left:14px; top:28px; bottom:0;
  width:1px; background:var(--GRIS-BORDE);
}
.emp-hero .paso-num{
  width:28px; height:28px; flex-shrink:0;
  background:var(--VERDE-SUAVE); border:1px solid var(--VERDE-BORDE);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--VERDE);
  position:relative; z-index:1;
}
.emp-hero .paso h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:4px;
}
.emp-hero .paso p{
  font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); line-height:1.5;
}
@media(max-width:960px){
  .emp-hero .contenido{ grid-template-columns:1fr; gap:40px; }
  .emp-hero{ padding:48px 5%; }
  .emp-hero .titulo-hero{ font-size:52px; }
}
@media(max-width:500px){ .emp-hero .titulo-hero{ font-size:40px; } }


/* ═══════════════ 2 · PLAN NEGRO + SERVICIOS ═══════════════ */
.emp-plan{ padding:var(--ESPACIO-SECCION); }
.emp-plan .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.emp-plan .titulo{ margin-bottom:12px; }
.emp-plan .sub{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.7; margin-bottom:40px; max-width:440px;
}
.emp-plan .grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }

/* tarjeta negra del plan */
.emp-plan .plan{
  background:var(--NEGRO); border-radius:var(--REDONDEO-TARJETA); padding:36px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.emp-plan .plan::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; background:var(--VERDE);
  border-radius:50%; opacity:.1; pointer-events:none;
}
.emp-plan .precio{
  font-family:var(--LETRA-TITULOS); font-size:42px; font-weight:400;
  color:var(--VERDE-BRILLANTE); letter-spacing:-1px; line-height:1; display:block;
}
.emp-plan .precio-mes{ font-size:14px; font-weight:300; color:rgba(255,255,255,.35); }
.emp-plan .nombre{
  font-family:var(--LETRA-TITULOS); font-size:36px; font-weight:300;
  color:var(--BLANCO); letter-spacing:-.5px; margin:4px 0 10px; display:block;
}
.emp-plan .resumen{
  font-size:13px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.6;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:24px;
}
.emp-plan .incluye{
  list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px;
}
.emp-plan .incluye li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:rgba(255,255,255,.85); line-height:1.5;
}
.emp-plan .plan .boton{ margin-top:auto; }

/* 4 tarjetas de servicios a la derecha */
.emp-plan .servicios{ display:flex; flex-direction:column; gap:16px; }
.emp-plan .servicios .icono{ font-size:28px; display:block; margin-bottom:10px; line-height:1; }
.emp-plan .servicios h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:6px;
}
.emp-plan .servicios p{ font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.6; }
@media(max-width:960px){
  .emp-plan .grid{ grid-template-columns:1fr; }
  .emp-plan{ padding:48px 5%; }
  .emp-plan .titulo{ font-size:38px; }
}


/* ═══════════════ 3 · MÓDULOS (rejilla con bordes compartidos) ═══════════════ */
.emp-modulos{ padding:var(--ESPACIO-SECCION); }
.emp-modulos .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.emp-modulos .titulo{ margin-bottom:10px; }
.emp-modulos .sub{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.7; margin-bottom:48px; max-width:460px;
}
.emp-modulos .grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--GRIS-BORDE); border-radius:var(--REDONDEO-CAJA); overflow:hidden;
}
.emp-modulos .modulo{
  background:var(--BLANCO); padding:32px;
  border-right:1px solid var(--GRIS-BORDE); border-bottom:1px solid var(--GRIS-BORDE);
  transition:background var(--SUAVE);
}
.emp-modulos .modulo:nth-child(3n){ border-right:none; }
.emp-modulos .modulo:nth-child(n+4){ border-bottom:none; }
.emp-modulos .modulo:hover{ background:var(--VERDE-SUAVE); }
.emp-modulos .modulo .num{
  font-size:12px; font-weight:500; letter-spacing:.08em;
  color:var(--GRIS-CLARO); margin-bottom:20px; display:block;
}
.emp-modulos .modulo .icono{ font-size:28px; display:block; margin-bottom:14px; line-height:1; }
.emp-modulos .modulo h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:14px;
}
.emp-modulos .lista{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.emp-modulos .lista li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.5;
}
.emp-modulos .lista li .flecha{ color:var(--VERDE); font-size:11px; flex-shrink:0; margin-top:3px; }
@media(max-width:900px){
  .emp-modulos .grid{ grid-template-columns:repeat(2,1fr); }
  .emp-modulos .modulo:nth-child(3n){ border-right:1px solid var(--GRIS-BORDE); }
  .emp-modulos .modulo:nth-child(2n){ border-right:none; }
  .emp-modulos .modulo:nth-child(n+4){ border-bottom:1px solid var(--GRIS-BORDE); }
  .emp-modulos .modulo:nth-child(n+5){ border-bottom:none; }
  .emp-modulos{ padding:48px 5%; }
  .emp-modulos .titulo{ font-size:38px; }
}
@media(max-width:560px){
  .emp-modulos .grid{ grid-template-columns:1fr; }
  .emp-modulos .modulo{ border-right:none; border-bottom:1px solid var(--GRIS-BORDE); }
  .emp-modulos .modulo:last-child{ border-bottom:none; }
}


/* ═══════════════ 4 · SERVICIOS + CIERRE ═══════════════ */
.emp-servicios{ padding:72px 6% 0; }
.emp-servicios .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.emp-servicios .titulo{ margin-bottom:10px; }
.emp-servicios .sub{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.7; margin-bottom:40px; max-width:400px;
}
.emp-servicios .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:48px; }
.emp-servicios .servicio .icono{ font-size:28px; display:block; margin-bottom:14px; line-height:1; }
.emp-servicios .servicio h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:8px;
}
.emp-servicios .servicio p{ font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.6; }
.emp-servicios .banner-cierre{ margin-top:0; }
@media(max-width:960px){
  .emp-servicios .grid{ grid-template-columns:repeat(2,1fr); }
  .emp-servicios .banner-cierre{ grid-template-columns:1fr; gap:32px; padding:40px 32px; }
  .emp-servicios .banner-cierre .formulario{ min-width:unset; width:100%; }
  .emp-servicios{ padding:48px 5% 0; }
}
@media(max-width:560px){
  .emp-servicios .grid{ grid-template-columns:1fr; }
  .emp-servicios .titulo{ font-size:36px; }
}