/* ═══════════════════════════════════════════════════════════════════════════
   4-bloques-pymes.css   ·   Página PYMES (elconta.online/pymes/)
   ───────────────────────────────────────────────────────────────────────────
   Bloques:
     1. pymes-hero        → título + stats a la derecha
     2. pymes-modalidades → dos pastillas que cambian el texto
     3. pymes-planes      → 3 tarjetas de precios (la de en medio destacada)
     4. pymes-modulos     → 6 tarjetas de módulos incluidos
     5. pymes-servicios   → 4 tarjetas de servicios adicionales
     6. banner de cierre  → usa .banner-cierre global
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · HERO ═══════════════ */
.pymes-hero{ padding:72px 6% 64px; }
.pymes-hero .contenido{
  display:flex; align-items:center; justify-content:space-between; gap:60px;
  max-width:var(--ANCHO-MAXIMO); margin:0 auto;
  border-bottom:1px solid var(--GRIS-LINEA); padding-bottom:64px;
}
.pymes-hero .izq{ flex:1; }
.pymes-hero .titulo-hero{ margin-bottom:28px; }
.pymes-hero .intro{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; max-width:400px;
}
.pymes-hero .der{
  display:flex; flex-direction:column; align-items:flex-end; gap:24px;
  flex-shrink:0; padding-left:80px;
}
.pymes-hero .stat{ text-align:right; }
.pymes-hero .stat-num{
  font-family:var(--LETRA-TITULOS); font-size:96px; font-weight:300;
  color:var(--NEGRO); line-height:1; letter-spacing:-4px; display:block;
}
.pymes-hero .stat-num.mediano{ font-size:80px; letter-spacing:-3px; }
.pymes-hero .stat-num span{ color:var(--VERDE); font-style:italic; }
.pymes-hero .stat-txt{
  font-size:12px; font-weight:300; color:var(--GRIS-SUAVE); margin-top:4px; display:block;
}
@media(max-width:900px){
  .pymes-hero .contenido{ flex-direction:column; align-items:flex-start; gap:40px; }
  .pymes-hero .der{ flex-direction:row; align-items:flex-end; padding-left:0; gap:48px; }
  .pymes-hero .stat{ text-align:left; }
}
@media(max-width:500px){
  .pymes-hero .titulo-hero{ font-size:44px; }
  .pymes-hero .stat-num{ font-size:64px; }
  .pymes-hero .stat-num.mediano{ font-size:52px; }
}


/* ═══════════════ 2 · MODALIDADES (pastillas interactivas) ═══════════════ */
.pymes-modalidades{ padding:56px 6% 32px; }
.pymes-modalidades .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.pymes-modalidades .titulo{ font-size:var(--TITULO-MEDIO); margin-bottom:28px; }
.pymes-modalidades .pastillas{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.pymes-modalidades .pastilla{
  display:flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:var(--REDONDEO-BOTON);
  border:1px solid var(--GRIS-BORDE); background:var(--BLANCO);
  color:var(--GRIS-FUERTE); font-size:14px; cursor:pointer;
  user-select:none; transition:all var(--SUAVE);
}
.pymes-modalidades .pastilla:hover{ border-color:var(--VERDE-BORDE); background:var(--VERDE-SUAVE); }
.pymes-modalidades .pastilla.activa{
  background:var(--VERDE-SUAVE); border-color:var(--VERDE);
  color:var(--VERDE); font-weight:500;
}
.pymes-modalidades .detalle{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; max-width:600px;
}
.pymes-modalidades .detalle strong{ color:var(--NEGRO); font-weight:500; }
@media(max-width:600px){
  .pymes-modalidades{ padding:36px 5% 24px; }
  .pymes-modalidades .titulo{ font-size:34px; }
}


/* ═══════════════ 3 · PLANES (3 tarjetas de precio) ═══════════════ */
.pymes-planes{ padding:40px 6%; }
.pymes-planes .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  align-items:stretch; max-width:1200px; margin:0 auto;
}
.pymes-planes .plan{
  background:var(--BLANCO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-TARJETA); padding:32px 28px 28px;
  display:flex; flex-direction:column; position:relative;
}
/* la tarjeta destacada (Profesional) va en negro */
.pymes-planes .plan.destacado{
  background:var(--NEGRO-SUAVE); border-color:var(--NEGRO-SUAVE);
}
.pymes-planes .insignia{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--VERDE); color:var(--BLANCO);
  font-size:12px; font-weight:500; letter-spacing:.04em;
  padding:5px 22px; border-radius:var(--REDONDEO-BOTON); white-space:nowrap;
}
.pymes-planes .precio{
  font-family:var(--LETRA-TITULOS); font-size:48px; font-weight:400;
  color:var(--VERDE); letter-spacing:-1px; line-height:1;
  display:flex; align-items:baseline; gap:3px;
}
.pymes-planes .plan.destacado .precio{ color:var(--VERDE-BRILLANTE); }
.pymes-planes .precio-mes{ font-size:15px; font-weight:300; color:var(--GRIS-SUAVE); }
.pymes-planes .plan.destacado .precio-mes{ color:rgba(255,255,255,.35); }
.pymes-planes .nombre{
  font-family:var(--LETRA-TITULOS); font-size:30px; font-weight:300;
  color:var(--NEGRO); letter-spacing:-.3px; margin:6px 0 12px;
}
.pymes-planes .plan.destacado .nombre{ color:var(--BLANCO); }
.pymes-planes .resumen{
  font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); line-height:1.6;
  padding-bottom:20px; border-bottom:1px solid var(--GRIS-BORDE); margin-bottom:20px;
}
.pymes-planes .plan.destacado .resumen{ color:rgba(255,255,255,.38); border-bottom-color:rgba(255,255,255,.08); }
.pymes-planes .sublabel{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--GRIS-SUAVE); margin-bottom:14px; display:block;
}
.pymes-planes .plan.destacado .sublabel{ color:rgba(255,255,255,.28); }
.pymes-planes .incluye{
  list-style:none; display:flex; flex-direction:column; gap:11px;
  margin-bottom:22px; flex:1;
}
.pymes-planes .incluye li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--GRIS-FUERTE); line-height:1.5;
}
.pymes-planes .plan.destacado .incluye li{ color:rgba(255,255,255,.82); }
.pymes-planes .no-label{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--GRIS-CLARO); margin-bottom:10px; display:block;
}
.pymes-planes .plan.destacado .no-label{ color:rgba(255,255,255,.15); }
.pymes-planes .no-incluye{
  list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:28px;
}
.pymes-planes .no-incluye li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--GRIS-CLARO); line-height:1.4;
}
.pymes-planes .plan.destacado .no-incluye li{ color:rgba(255,255,255,.2); }
.pymes-planes .no-incluye .guion{ flex-shrink:0; }
.pymes-planes .plan .boton{ margin-top:auto; }
@media(max-width:900px){
  .pymes-planes .grid{ grid-template-columns:1fr; max-width:440px; }
  .pymes-planes{ padding:24px 16px; }
}


/* ═══════════════ 4 · MÓDULOS (6 tarjetas) ═══════════════ */
.pymes-modulos{ padding:var(--ESPACIO-SECCION); }
.pymes-modulos .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.pymes-modulos .titulo{ margin-bottom:14px; }
.pymes-modulos .sub{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.7; max-width:520px; margin-bottom:48px;
}
.pymes-modulos .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pymes-modulos .modulo{
  background:var(--BLANCO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CAJA); padding:32px;
  transition:border-color var(--SUAVE), box-shadow var(--SUAVE);
}
.pymes-modulos .modulo:hover{
  border-color:var(--VERDE-BORDE);
  box-shadow:0 8px 32px rgba(21,128,61,.06);
}
.pymes-modulos .modulo .icono{ font-size:32px; margin-bottom:18px; display:block; line-height:1; }
.pymes-modulos .modulo h3{
  font-family:var(--LETRA-TEXTO); font-size:16px; font-weight:500;
  color:var(--NEGRO); margin-bottom:14px; letter-spacing:-.1px;
}
.pymes-modulos .lista{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.pymes-modulos .lista li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--GRIS-FUERTE); line-height:1.5;
}
.pymes-modulos .lista li .flecha{ color:var(--VERDE); font-size:11px; flex-shrink:0; margin-top:3px; }
.pymes-modulos .lista li.no{ color:var(--GRIS-SUAVE); }
.pymes-modulos .lista li.no .flecha{ color:var(--GRIS-SUAVE); }
@media(max-width:900px){
  .pymes-modulos .grid{ grid-template-columns:repeat(2,1fr); }
  .pymes-modulos{ padding:40px 5%; }
  .pymes-modulos .titulo{ font-size:36px; }
}
@media(max-width:560px){ .pymes-modulos .grid{ grid-template-columns:1fr; } }


/* ═══════════════ 5 · SERVICIOS ADICIONALES (4 tarjetas) ═══════════════ */
.pymes-servicios{ padding:var(--ESPACIO-SECCION); }
.pymes-servicios .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.pymes-servicios .titulo{ margin-bottom:10px; }
.pymes-servicios .sub{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.7; margin-bottom:40px;
}
.pymes-servicios .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pymes-servicios .servicio .icono{ font-size:32px; display:block; margin-bottom:16px; line-height:1; }
.pymes-servicios .servicio h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:6px;
}
.pymes-servicios .servicio .valor{
  font-family:var(--LETRA-TITULOS); font-size:26px; font-weight:300;
  color:var(--VERDE); letter-spacing:-.5px; margin-bottom:8px; line-height:1; display:block;
}
.pymes-servicios .servicio p{
  font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.6;
}
@media(max-width:900px){
  .pymes-servicios .grid{ grid-template-columns:repeat(2,1fr); }
  .pymes-servicios{ padding:40px 5%; }
  .pymes-servicios .titulo{ font-size:36px; }
}
@media(max-width:500px){ .pymes-servicios .grid{ grid-template-columns:1fr; } }


/* ═══════════════ 6 · CIERRE ═══════════════ */
.pymes-cierre{ padding:40px 6%; }
@media(max-width:860px){
  .pymes-cierre .banner-cierre{ grid-template-columns:1fr; gap:32px; padding:40px 32px; }
  .pymes-cierre .banner-cierre .formulario{ min-width:unset; width:100%; }
}
@media(max-width:480px){
  .pymes-cierre{ padding:24px 16px; }
  .pymes-cierre .banner-cierre{ padding:32px 24px; }
}