/* ==========================================================================
   4 - BLOQUES  ·  hero, servicios, empresas, demos, precios, humano, contacto
   Variables locales (--minusculas) heredan del global.
   ========================================================================== */

/* =====================  HERO  ===================== */
.hero{background:var(--HERO-FONDO);padding:80px 6% 96px;overflow:hidden}
.hero-grid{max-width:var(--ANCHO-MAXIMO);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-grid .subtitulo{margin-bottom:28px}
.hero-botones{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-mini{display:flex;gap:22px;flex-wrap:wrap}
.hero-mini div{font-size:14px;color:var(--TEXTO-SUAVE)}
.hero-mini b{display:block;font-family:var(--LETRA-TITULOS);font-size:26px;color:var(--TEXTO)}

/* --- Mockup animado del hero (ERP falso con datos vivos) --- */
.demo-erp{padding:18px}
.demo-fila{display:flex;gap:14px}
.demo-col{flex:1}
.demo-caja{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--REDONDEO-CAJA);padding:14px;margin-bottom:12px}
.demo-caja .rotulo{font-size:11px;color:#8a99a6;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.demo-num{font-family:var(--LETRA-TITULOS);font-size:30px;font-weight:600;color:#fff}
.demo-num.azul{color:var(--AZUL-BRILLANTE)}
.punto-vivo{width:8px;height:8px;border-radius:50%;background:#28c840;animation:parpadeo 1.6s ease-in-out infinite}
@keyframes parpadeo{0%,100%{opacity:.3}50%{opacity:1}}
/* barras de columnas animadas */
.grafico{display:flex;align-items:flex-end;gap:6px;height:70px}
.grafico i{flex:1;background:linear-gradient(var(--AZUL-BRILLANTE),var(--AZUL));border-radius:4px 4px 0 0;animation:subir 2.6s ease-in-out infinite;transform-origin:bottom}
@keyframes subir{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* fila de tickets deslizando */
.demo-lista .item{display:flex;align-items:center;gap:8px;font-size:12px;color:#c7d2db;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.demo-lista .item:last-child{border:0}
.demo-lista .estado{margin-left:auto;font-size:10px;padding:3px 8px;border-radius:100px;background:rgba(40,200,64,.15);color:#28c840}
.demo-lista .estado.proceso{background:rgba(31,154,214,.15);color:var(--AZUL-BRILLANTE)}
.demo-lista .item .bolita{width:7px;height:7px;border-radius:50%;background:var(--AZUL-BRILLANTE);flex:none}

/* =====================  SERVICIOS  ===================== */
.encabezado-seccion{text-align:center;max-width:640px;margin:0 auto 52px}
.encabezado-seccion .subtitulo{margin:16px auto 0}
.rejilla-servicios{max-width:var(--ANCHO-MAXIMO);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* =====================  EMPRESAS (todo tamaño)  ===================== */
.empresas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--ANCHO-MAXIMO);margin:44px auto 0}
.empresa-card{background:var(--TARJETA);border:1px solid var(--BORDE);border-radius:var(--REDONDEO-TARJETA);padding:28px;position:relative;overflow:hidden;transition:var(--SUAVE)}
.empresa-card:hover{border-color:var(--AZUL);transform:translateY(-4px);box-shadow:var(--SOMBRA)}
.empresa-card .tam{display:flex;align-items:flex-end;gap:4px;height:38px;margin-bottom:16px}
.empresa-card .tam span{width:12px;background:var(--BORDE-FUERTE);border-radius:3px}
.empresa-card.chica .tam span:nth-child(1){background:var(--AZUL);height:40%}
.empresa-card.chica .tam span:nth-child(2){height:60%}
.empresa-card.chica .tam span:nth-child(3){height:100%}
.empresa-card.media .tam span:nth-child(1){height:40%}
.empresa-card.media .tam span:nth-child(2){background:var(--AZUL);height:60%}
.empresa-card.media .tam span:nth-child(3){height:100%}
.empresa-card.grande .tam span{height:40%}
.empresa-card.grande .tam span:nth-child(2){height:70%}
.empresa-card.grande .tam span:nth-child(3){background:var(--AZUL);height:100%}
.empresa-card h3{font-size:20px;margin-bottom:6px}
.empresa-card p{font-size:15px;color:var(--TEXTO-SUAVE)}

/* =====================  DEMOS EN VIVO  ===================== */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:var(--ANCHO-MAXIMO);margin:0 auto}
.demo-tarjeta{background:var(--TARJETA);border:1px solid var(--BORDE);border-radius:var(--REDONDEO-TARJETA);overflow:hidden;transition:var(--SUAVE)}
.demo-tarjeta:hover{box-shadow:var(--SOMBRA);transform:translateY(-4px)}
.demo-tarjeta .cabeza{padding:20px 24px;border-bottom:1px solid var(--BORDE)}
.demo-tarjeta .cabeza h3{font-size:19px}
.demo-tarjeta .cabeza p{font-size:14px;color:var(--TEXTO-SUAVE);margin-top:4px}
.demo-tarjeta .pantalla{background:var(--NEGRO);padding:22px}

/* =====================  PRECIOS  ===================== */
.rejilla-precios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--ANCHO-MAXIMO);margin:0 auto}
.precio-card{background:var(--TARJETA);border:1px solid var(--BORDE);border-radius:var(--REDONDEO-TARJETA);padding:30px;display:flex;flex-direction:column;transition:var(--SUAVE)}
.precio-card:hover{border-color:var(--AZUL);box-shadow:var(--SOMBRA)}
.precio-card.destacado{border:2px solid var(--AZUL);position:relative}
.precio-card.destacado::before{content:"Más solicitado";position:absolute;top:-13px;left:30px;background:var(--AZUL);color:#fff;font-size:12px;font-weight:600;padding:4px 14px;border-radius:100px}
.precio-card .icono{width:46px;height:46px;border-radius:12px;background:var(--AZUL-SUAVE);color:var(--AZUL);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.precio-card h3{font-size:20px;margin-bottom:6px}
.precio-card .desc{font-size:14px;color:var(--TEXTO-SUAVE);margin-bottom:18px;min-height:40px}
.precio-card .valor{font-family:var(--LETRA-TITULOS);font-size:28px;font-weight:600;color:var(--TEXTO)}
.precio-card .valor small{display:block;font-family:var(--LETRA-TEXTO);font-size:13px;font-weight:400;color:var(--TEXTO-TENUE);margin-top:2px}
.precio-card ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px}
.precio-card .boton{margin-top:auto;justify-content:center}
.nota-precios{text-align:center;font-size:14px;color:var(--TEXTO-TENUE);max-width:640px;margin:32px auto 0}

/* =====================  HUMANO  ===================== */
.humano{max-width:var(--ANCHO-MAXIMO);margin:0 auto;background:var(--AZUL-SUAVE);border-radius:26px;padding:52px 6%;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
:root[data-tema="oscuro"] .humano{background:var(--FONDO-2);border:1px solid var(--BORDE)}
.humano .titulo{font-size:var(--TITULO-MEDIO)}
.humano p{color:var(--TEXTO-SUAVE);margin:16px 0 24px}
.chat-demo{background:var(--TARJETA);border:1px solid var(--BORDE);border-radius:var(--REDONDEO-TARJETA);padding:22px;box-shadow:var(--SOMBRA)}
.burbuja{max-width:80%;padding:11px 15px;border-radius:16px;font-size:14px;margin-bottom:12px;line-height:1.5}
.burbuja.cliente{background:var(--FONDO-2);color:var(--TEXTO);border-bottom-left-radius:4px}
.burbuja.equipo{background:var(--AZUL);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.escribiendo{display:flex;gap:4px;align-items:center;font-size:13px;color:var(--TEXTO-TENUE)}
.escribiendo b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--AZUL);animation:puntos 1.2s infinite}
.escribiendo b:nth-child(2){animation-delay:.2s}.escribiendo b:nth-child(3){animation-delay:.4s}
@keyframes puntos{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* =====================  CONTACTO  ===================== */
.contacto-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.form-contacto label{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}
.form-contacto input,.form-contacto textarea,.form-contacto select{
  width:100%;padding:12px 14px;border:1px solid var(--BORDE-FUERTE);border-radius:var(--REDONDEO-CHICO);
  font-family:inherit;font-size:15px;background:var(--TARJETA);color:var(--TEXTO);transition:var(--SUAVE)
}
.form-contacto input:focus,.form-contacto textarea:focus,.form-contacto select:focus{outline:none;border-color:var(--AZUL);box-shadow:0 0 0 3px var(--AZUL-SUAVE)}
.form-contacto .trampa{position:absolute;left:-9999px}
.form-contacto .boton{width:100%;justify-content:center;margin-top:20px}
.form-ok{display:none;background:rgba(40,200,64,.12);color:#1a8a3a;border:1px solid rgba(40,200,64,.3);padding:14px;border-radius:var(--REDONDEO-CHICO);margin-top:16px;font-size:15px}
.contacto-info .dato{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.contacto-info .dato .ic{width:44px;height:44px;border-radius:12px;background:var(--AZUL-SUAVE);color:var(--AZUL);display:grid;place-items:center;font-size:20px;flex:none}
.contacto-info .dato b{display:block;font-size:15px}
.contacto-info .dato span{font-size:14px;color:var(--TEXTO-SUAVE)}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:900px){
  :root{--TITULO-HERO:40px;--TITULO-SECCION:32px;--TITULO-MEDIO:26px}
  .hero-grid,.humano,.contacto-grid{grid-template-columns:1fr;gap:36px}
  .rejilla-servicios,.empresas,.demos,.rejilla-precios{grid-template-columns:1fr}
  .humano .chat-demo{order:-1}
}
@media (max-width:600px){
  :root{--TITULO-HERO:32px;--ESPACIO-SECCION:60px 6%}
  section{padding:var(--ESPACIO-SECCION)}
  .hero-mini b{font-size:22px}
}