/* ═══════════════════════════════════════════════════════════════════════════
   4-bloques-inicio.css   ·   Página de INICIO (elconta.online)
   ───────────────────────────────────────────────────────────────────────────
   Estilos propios de los bloques de la portada:
     · inicio-hero       → título grande + tarjeta negra con barras
     · inicio-servicios  → las 3 filas (Pymes / Emprendedores / Personas)
   El banner de cierre usa .banner-cierre de 3-piezas-repetidas.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ BLOQUE 1 · HERO DE INICIO ═══════════════ */
.inicio-hero{
  /* --- Controles locales (solo de este bloque) --- */
  --num-grande:  64px;    /* el "98%" de la tarjeta negra */
  --num-mini:    40px;    /* los números "72h" y "100%" de las cajitas */

  padding:var(--ESPACIO-SECCION);
}
.inicio-hero .contenido{
  max-width:var(--ANCHO-MAXIMO);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}

/* --- Columna izquierda --- */
.inicio-hero .encabezado{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.inicio-hero .marca-pais{
  padding:4px 14px;
  border-radius:var(--REDONDEO-BOTON);
  background:var(--VERDE-SUAVE);
  border:1px solid var(--VERDE-BORDE);
  font-size:12px;
  font-weight:500;
  color:var(--VERDE);
  white-space:nowrap;
}
.inicio-hero .encabezado .raya{ flex:1; height:1px; background:var(--GRIS-BORDE); }
.inicio-hero .encabezado .nota{
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--GRIS-SUAVE);
}
.inicio-hero .titulo-hero{ margin-bottom:24px; }
.inicio-hero .intro{
  font-size:16px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; max-width:420px; margin-bottom:36px;
}
.inicio-hero .botones{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:56px; }
.inicio-hero .enlace-suave{ font-size:15px; color:var(--NEGRO); cursor:pointer; }
.inicio-hero .enlace-suave:hover{ color:var(--VERDE); }

/* fila de estadísticas */
.inicio-hero .stats{ display:flex; gap:48px; flex-wrap:wrap; }
.inicio-hero .stat-num{
  font-family:var(--LETRA-TITULOS); font-size:40px; font-weight:300;
  color:var(--NEGRO); letter-spacing:-1px; line-height:1; display:block;
}
.inicio-hero .stat-txt{
  font-size:12px; font-weight:300; color:var(--GRIS-SUAVE); margin-top:4px; display:block;
}

/* --- Columna derecha --- */
.inicio-hero .panel{ display:flex; flex-direction:column; gap:16px; }

/* tarjeta negra con barras */
.inicio-hero .tarjeta-negra{
  background:var(--NEGRO);
  border-radius:var(--REDONDEO-TARJETA);
  padding:32px 36px;
  position:relative;
  overflow:hidden;
}
.inicio-hero .tarjeta-negra::after{
  content:""; position:absolute; bottom:-40px; right:-40px;
  width:160px; height:160px; background:var(--VERDE);
  border-radius:50%; opacity:.12; pointer-events:none;
}
.inicio-hero .tarjeta-negra .cabecera{
  font-size:10px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:16px; display:block;
}
.inicio-hero .tarjeta-negra .grande{
  font-family:var(--LETRA-TITULOS); font-size:var(--num-grande); font-weight:300;
  color:var(--BLANCO); letter-spacing:-2px; line-height:1; display:block;
}
.inicio-hero .tarjeta-negra .grande span{ color:var(--VERDE-BRILLANTE); }
.inicio-hero .tarjeta-negra .sub{
  font-size:13px; font-weight:300; color:rgba(255,255,255,.5);
  margin-top:6px; margin-bottom:32px; display:block;
}
.inicio-hero .tarjeta-negra .separador{
  height:1px; background:rgba(255,255,255,.07); margin-bottom:20px;
}

/* cajitas mini */
.inicio-hero .mini-fila{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.inicio-hero .mini{
  background:var(--GRIS-FONDO);
  border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-TARJETA);
  padding:24px;
}
.inicio-hero .mini .icono{ font-size:22px; margin-bottom:10px; display:block; }
.inicio-hero .mini .num{
  font-family:var(--LETRA-TITULOS); font-size:var(--num-mini); font-weight:300;
  color:var(--NEGRO); letter-spacing:-1px; line-height:1; display:block;
}
.inicio-hero .mini .num span{ color:var(--VERDE); }
.inicio-hero .mini .txt{
  font-size:13px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.5; margin-top:6px; display:block;
}

/* móvil */
@media(max-width:960px){
  .inicio-hero .contenido{ grid-template-columns:1fr; gap:40px; }
  .inicio-hero{ padding:48px 5%; }
  .inicio-hero .titulo-hero{ font-size:52px; }
}
@media(max-width:500px){
  .inicio-hero .titulo-hero{ font-size:40px; }
  .inicio-hero .stats{ gap:28px; }
  .inicio-hero .mini-fila{ grid-template-columns:1fr; }
}


/* ═══════════════ BLOQUE 2 · SERVICIOS (3 filas) ═══════════════ */
.inicio-servicios{
  padding:var(--ESPACIO-SECCION);
}
.inicio-servicios .contenido{
  max-width:var(--ANCHO-MAXIMO);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  align-items:start;
}
.inicio-servicios .intro-col .titulo{ margin-bottom:28px; }
.inicio-servicios .intro-col .texto{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; margin-bottom:32px;
}

/* las filas enlazadas a cada página */
.inicio-servicios .filas{ display:flex; flex-direction:column; gap:12px; }
.inicio-servicios .fila{
  display:flex; align-items:center; gap:20px;
  padding:0 24px; min-height:88px;
  border:1px solid var(--GRIS-LINEA);
  border-radius:var(--REDONDEO-CAJA);
  transition:all var(--SUAVE);
}
.inicio-servicios .fila:hover{
  border-color:var(--VERDE-BORDE);
  background:var(--VERDE-SUAVE);
  transform:translateX(4px);
}
.inicio-servicios .fila-num{
  font-family:var(--LETRA-TITULOS); font-size:32px; font-weight:300;
  color:var(--GRIS-LINEA); min-width:52px; flex-shrink:0; line-height:1;
}
.inicio-servicios .fila-info{ flex:0 0 180px; }
.inicio-servicios .fila-nombre{
  font-size:17px; font-weight:500; color:var(--NEGRO); margin-bottom:3px; display:block;
}
.inicio-servicios .fila-sub{
  font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); display:block;
}
.inicio-servicios .fila-tags{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.inicio-servicios .fila-tags span{
  font-size:11px; padding:5px 12px;
  background:var(--GRIS-FONDO); border:1px solid var(--GRIS-LINEA);
  color:var(--GRIS-TEXTO); border-radius:var(--REDONDEO-BOTON); white-space:nowrap;
}
.inicio-servicios .flecha{
  width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--GRIS-LINEA); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--GRIS-SUAVE); font-size:14px; transition:all var(--SUAVE);
}
.inicio-servicios .fila:hover .flecha{
  background:var(--VERDE); border-color:var(--VERDE); color:var(--BLANCO);
}

/* móvil */
@media(max-width:960px){
  .inicio-servicios .contenido{ grid-template-columns:1fr; gap:40px; }
  .inicio-servicios{ padding:48px 5%; }
  .inicio-servicios .titulo{ font-size:38px; }
  .inicio-servicios .fila-info{ flex:0 0 140px; }
}
@media(max-width:560px){
  .inicio-servicios .fila{ flex-wrap:wrap; padding:16px; min-height:unset; }
  .inicio-servicios .fila-tags{ width:100%; }
  .inicio-servicios .flecha{ margin-left:auto; }
}


/* ═══════════════ BLOQUE 3 · BANNER DE CIERRE ═══════════════ */
/* Usa .banner-cierre (global). Solo ajustamos el espacio alrededor. */
.inicio-cierre{ padding:40px 6%; }
@media(max-width:860px){
  .inicio-cierre .banner-cierre{ grid-template-columns:1fr; gap:32px; padding:40px 32px; }
  .inicio-cierre .banner-cierre .formulario{ min-width:unset; width:100%; }
}
@media(max-width:480px){
  .inicio-cierre{ padding:24px 16px; }
  .inicio-cierre .banner-cierre{ padding:32px 24px; }
  .inicio-cierre .banner-cierre h2{ font-size:28px; }
}