/* ========================================
   TIPOGRAFÍA UNIFICADA — Jerarquía clara
   Referencia: como-trabajamos.html
   Escala apropiada para páginas con contenido
   ======================================== */

:root {
  --fix-text-main:  #ffffff;
  --fix-text-soft:  #94a3b8;
  --fix-text-muted: #64748b;
  --fix-accent:     #3b82f6;
  --fix-border:     rgba(255, 255, 255, 0.10);
}

/* ── HEADER — mismo tamaño que como-trabajamos.html ─ */
/* Solo tamaño, sin cambio de colores                  */

.logo-text-main {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  font-weight: 700 !important;
}

@media (min-width: 1400px) {
  .logo-text-main {
    font-size: 2.2rem !important;
  }
}

nav ul li a:not(.btn-contact) {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

@media (min-width: 1440px) {
  nav ul li a:not(.btn-contact) {
    font-size: 1.1rem !important;
  }
}

/* ── COLOR GENERAL ────────────────────── */

body, main { color: var(--fix-text-soft); }

h1, h2, h3, h4, .text-white { color: var(--fix-text-main) !important; }

p, .text-slate-400 { color: var(--fix-text-soft) !important; }

.text-slate-500 { color: var(--fix-text-muted) !important; }

.text-blue-500 { color: var(--fix-accent) !important; }

/* ── JERARQUÍA DE TÍTULOS ─────────────── */

/* H1 — Titular de página/hero */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

/* H2 — Título de sección */
h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

/* H3 — Subtítulo de subsección */
h3 {
  font-size: 1.375rem !important;   /* 22px — claramente secundario a h2 */
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* H4 — Título de tarjeta pequeña */
h4 {
  font-size: 1.125rem !important;   /* 18px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* ── SELECTORES TAILWIND-ESCAPED ─────── */

h1.text-\[40px\].md\:text-\[52px\].lg\:text-\[56px\] {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

h2.text-\[28px\].md\:text-\[32px\] {
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

/* H3 intermedio — panel, "Arquitectura del sistema" */
h3.text-\[20px\] {
  font-size: 1.375rem !important;
  line-height: 1.3 !important;
}

/* H3/H4 de tarjetas y listas — mismo nivel visual */
h3.text-\[15px\], h3.text-\[16px\],
h4.text-\[15px\], h4.text-\[14px\] {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* Summary FAQ — ligeramente más que la respuesta */
summary.text-\[14px\].md\:text-\[15px\],
summary .text-\[14px\], summary .text-\[15px\] {
  font-size: 1.0625rem !important;  /* 17px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* ── PÁRRAFOS Y LISTAS ────────────────── */

/* Body base */
p, li {
  font-size: 1rem !important;       /* 16px */
  line-height: 1.7 !important;
}

/* Párrafo de intro / lede */
p.text-\[17px\].md\:text-\[19px\],
.text-\[17px\].md\:text-\[19px\] {
  font-size: 1.0625rem !important;  /* 17px */
  line-height: 1.7 !important;
  color: var(--fix-text-soft) !important;
}

/* Texto secundario de sección */
p.text-\[15px\] {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--fix-text-soft) !important;
}

/* Párrafos pequeños de tarjeta */
p.text-\[12px\], p.text-\[13px\], p.text-\[13\.5px\],
p.text-\[14px\], p.text-\[14\.5px\],
.text-\[12px\], .text-\[13px\], .text-\[13\.5px\],
.text-\[14px\], .text-\[14\.5px\] {
  font-size: 0.9375rem !important;  /* 15px */
  line-height: 1.65 !important;
  color: var(--fix-text-soft) !important;
}

/* FAQ respuestas */
details p.text-\[13\.5px\].md\:text-\[14\.5px\] {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--fix-text-soft) !important;
}

/* ── BORDES / FONDOS / BOTONES ────────── */

.border-white\/10 { border-color: var(--fix-border) !important; }

[style*="border-color: rgba(255,255,255,0.08)"],
[style*="border-color: rgba(255,255,255,0.15)"] {
  border-color: var(--fix-border) !important;
}

main[style*="background-color: #020617"] { background-color: #020617 !important; }
section.bg-\[\#020617\] { background-color: #020617 !important; }

.bg-blue-600 { background-color: #2563eb !important; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

/* ── RESPONSIVE ────────────────────────  */

@media (max-width: 767px) {
  h1, h1.text-\[40px\].md\:text-\[52px\].lg\:text-\[56px\] {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  h2, h2.text-\[28px\].md\:text-\[32px\] {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
  }
  h3 { font-size: 1.2rem !important; }
  h4, h3.text-\[15px\], h3.text-\[16px\],
  h4.text-\[15px\], h4.text-\[14px\] { font-size: 1rem !important; }
  p, li { font-size: 0.9375rem !important; line-height: 1.65 !important; }
  p.text-\[17px\].md\:text-\[19px\],
  .text-\[17px\].md\:text-\[19px\] { font-size: 0.9375rem !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h1, h1.text-\[40px\].md\:text-\[52px\].lg\:text-\[56px\] {
    font-size: clamp(1.875rem, 5vw, 2.75rem) !important;
  }
  h2, h2.text-\[28px\].md\:text-\[32px\] {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
  }
  h3 { font-size: 1.25rem !important; }
}

@media (min-width: 1440px) {
  h1, h1.text-\[40px\].md\:text-\[52px\].lg\:text-\[56px\] {
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
  }
  h2, h2.text-\[28px\].md\:text-\[32px\] {
    font-size: clamp(1.875rem, 2.5vw, 2.5rem) !important;
  }
  h3 { font-size: 1.5rem !important; }
  h4, h3.text-\[15px\], h3.text-\[16px\],
  h4.text-\[15px\], h4.text-\[14px\] { font-size: 1.25rem !important; }
  p, li { font-size: 1.0625rem !important; line-height: 1.75 !important; }
  p.text-\[17px\].md\:text-\[19px\],
  .text-\[17px\].md\:text-\[19px\] { font-size: 1.125rem !important; }
}

/* ── .layout-encabezado-estandar ─────── */

.layout-encabezado-estandar {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.0 !important;
  margin-bottom: 2rem !important;
  text-transform: uppercase !important;
}

h2.layout-encabezado-estandar {
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
}

@media (max-width: 767px) {
  .layout-encabezado-estandar {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1.25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .layout-encabezado-estandar {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }
}

@media (min-width: 1440px) {
  .layout-encabezado-estandar {
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
    line-height: 1.0 !important;
  }
}

/* ── VIDEO BACKGROUND — Estrellas visibles en Servicios y Consultoría ─────
   brightness(1.2) levanta ligeramente el brillo de las partículas.
   contrast(2.5) aumenta el contraste sin aplastar los detalles sutiles.
   mix-blend-mode: screen hace los negros transparentes para mezclar
   con el fondo oscuro de la sección de forma natural.
   ───────────────────────────────────────────────────────────────────────── */

.services-section,
.consulting-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* Compensar header fijo al navegar con anchor */
.services-section {
  scroll-margin-top: 80px;
}

.services-section video,
.consulting-section video {
  filter: brightness(1.2) contrast(2.5) saturate(0.8)
          drop-shadow(0 0 4px rgba(255,255,255,0.4)) !important;
  mix-blend-mode: screen !important;
  opacity: 0.90 !important;
}

/* ── FOOTER UNIFICADO ─────────────────── */
/* Mismo estilo que index.html / main-new.css */

.site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 30px 0 16px; /* Antes: 60px 0 30px — reducido a la mitad */
  text-align: center;
  color: #94a3b8;
  position: relative;
  z-index: 10;
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.footer-logo {
  margin-bottom: 16px; /* Antes: 30px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo img {
  width: 280px; /* Antes: 350px — ~20% menos */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
}

.footer-tagline {
  color: #cbd5e1 !important;
  font-size: 0.8rem !important; /* Antes: 0.9375rem */
  margin-bottom: 14px; /* Antes: 30px */
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}

.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 800px;
  margin: 0 auto 14px; /* Antes: 25px */
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* Antes: 15px */
  margin-bottom: 12px; /* Antes: 25px */
}

.footer-links a {
  color: #94a3b8 !important;
  text-decoration: none;
  font-size: 0.72rem !important; /* Antes: 0.8125rem */
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #ffffff !important;
}

.footer-links .sep {
  color: rgba(255, 255, 255, 0.2);
}

.footer-copy {
  color: #64748b !important;
  font-size: 0.7rem !important; /* Antes: 0.8125rem */
  margin: 0;
}

@media (max-width: 480px) {
  .footer-logo img { width: 200px; } /* Antes: 250px */
  .footer-links { flex-direction: column; align-items: center; gap: 6px; }
  .footer-links .sep { display: none; }
}

/* ========================================
   HERO — Espaciado y tipografía corregidos
   El selector específico supera al global h1
   ======================================== */

/* Más aire en la barra de navegación */
header {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* Título principal */
.hero-content h1 {
  font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 2rem !important;
}

/* Primera línea del h1 — mismo tamaño que el h1 */
.hero-content .hero-line-1 {
  font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
  line-height: 1.15 !important;
}

/* Párrafo descriptivo: tamaño legible y algo más de aire superior */
.hero-content p,
.hero-subtitle-p {
  font-size: clamp(0.85rem, 1.1vw, 1rem) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.75rem !important;
  line-height: 1.7 !important;
}

/* Ajustes responsive hero */
@media (max-width: 767px) {
  header { padding-top: 24px !important; padding-bottom: 24px !important; }
  .hero-content h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    margin-bottom: 1.25rem !important;
  }
  .hero-content .hero-line-1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-content h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
    margin-bottom: 1.75rem !important;
  }
}

/* Portátil / Monitor pequeño (1024px – 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-content {
    width: 60vw !important;
    max-width: 900px !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
    box-sizing: border-box !important;
  }
  .hero-content h1 {
    font-size: clamp(2.2rem, 3.2vw, 3.5rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-content .hero-line-1 {
    white-space: normal !important;
    font-size: clamp(2.2rem, 3.2vw, 3.5rem) !important;
    line-height: 1.15 !important;
  }
  .hero-content p,
  .hero-subtitle-p {
    font-size: clamp(0.88rem, 1vw, 1.05rem) !important;
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto 1.5rem !important;
    line-height: 1.65 !important;
  }
}


/* ========================================================
   HEADER CONTAINER — Full width en desktop/laptop/monitor
   Logo pegado a la IZQUIERDA, nav pegado a la DERECHA
   ======================================================== */
@media (min-width: 1024px) {
  header .header-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1440px) {
  header { padding-top: 42px !important; padding-bottom: 42px !important; }

  /* Contenedor: amplio e imponente con márgenes de seguridad */
  .hero-content {
    width: 82vw !important;
    max-width: 1300px !important;
    padding-left: 3.5vw !important;
    padding-right: 3.5vw !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* hero-line-1: white-space:normal evita el overflow del nowrap */
  .hero-content .hero-line-1 {
    white-space: normal !important;
    font-size: clamp(2.8rem, 4.2vw, 5rem) !important;
    line-height: 1.08 !important;
  }

  /* Título principal: gran tamaño pero con techo seguro */
  .hero-content h1 {
    font-size: clamp(3rem, 5vw, 5.5rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 2.5rem !important;
  }

  /* Párrafo: 2 líneas exactas en monitor — SOLO el subtítulo hero */
  .hero-subtitle-p {
    font-size: 1.3rem !important;
    max-width: 880px !important;
    width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.25rem !important;
    text-align: center !important;
    line-height: 1.55 !important;
  }
}


/* br.desktop-br — visible solo en monitores para forzar 2 líneas exactas */
br.desktop-br { display: none; }
@media (min-width: 1280px) {
  br.desktop-br { display: inline; }

  /* Párrafo: 2 líneas fijas en monitor desde 1280px */
  .hero-subtitle-p {
    font-size: 1.3rem !important;
    max-width: 880px !important;
    width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.25rem !important;
    text-align: center !important;
    line-height: 1.55 !important;
  }
}

/* Ultrawide (≥1920px) — máximo impacto con contención */
@media (min-width: 1920px) {
  .hero-content {
    width: 78vw !important;
    max-width: 1500px !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .hero-content .hero-line-1 {
    font-size: clamp(3.5rem, 4.5vw, 6rem) !important;
  }

  .hero-content h1 {
    font-size: clamp(3.8rem, 5.5vw, 6.5rem) !important;
    margin-bottom: 3rem !important;
  }

  .hero-content p,
  .hero-subtitle-p {
    font-size: 1.3rem !important;
    max-width: min(1200px, 100%) !important;
    margin-bottom: 2.75rem !important;
  }
}




/* ========================================
   CONSULTORÍA — Override del h4 global
   El selector específico supera h4 !important
   ======================================== */

/* Icono: altura fija e igual en las 4 tarjetas */
.consulting-section .consulting-card .card-icon {
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

/* Título: min-height para 3 líneas → el primer bullet arranca siempre igual */
/* 1.05rem × 1.3 line-height × 3 líneas ≈ 4.1rem */
.consulting-section .consulting-card h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 1.3 !important;
  min-height: 4.1rem !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Responsive: ajustar min-height a los font-size reducidos */
@media (max-width: 1200px) {
  /* 0.88rem × 1.3 × 3 ≈ 3.43rem */
  .consulting-section .consulting-card h4 {
    min-height: 3.5rem !important;
    font-size: 0.88rem !important;
  }
  .consulting-section .consulting-card .card-icon {
    height: 60px !important;
  }
}

@media (max-width: 1024px) {
  /* grid 2×2: títulos más cortos caben en 2 líneas → 2.3rem */
  .consulting-section .consulting-card h4 {
    min-height: 2.5rem !important;
  }
}

@media (max-width: 768px) {
  /* grid 1 col: cada tarjeta es independiente, no necesita alineación cruzada */
  .consulting-section .consulting-card h4 {
    min-height: 0 !important;
  }
  .consulting-section .consulting-card .card-icon {
    height: auto !important;
  }
}

/* Bullet points neon en la sección de consultoría */
.consulting-section .consulting-card ul li {
  color: #94a3b8 !important;
}


.consulting-section .consulting-card ul li::before {
  color: #00D2FF !important;
}

/* ========================================
   FOOTER — Fondo negro sólido en toda la web
   Aplica a index.html y todas las subpáginas
   (servicios/, consultoria/, blog, etc.)
   ya que ui-fix.css se carga en todas.
   ======================================== */

/* Footer global */
footer,
.site-footer,
footer.site-footer {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Cualquier contenedor interno del footer */
footer .container,
.site-footer .container {
  background: transparent !important;
  background-image: none !important;
}

/* Textos del footer — legibles sobre negro */
.site-footer,
footer {
  color: #94a3b8 !important;
}

.footer-tagline {
  color: #cbd5e1 !important;
}

.footer-links a {
  color: #94a3b8 !important;
}

.footer-links a:hover {
  color: #ffffff !important;
}

.footer-copy {
  color: #64748b !important;
}

/* Separador: línea sutil sobre negro */
.footer-divider {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Borde superior del footer */
footer,
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}


/* ========================================
/* ========================================
   SERVICIOS — Monitor (≥1200px)
   Solo layout y colores — fuentes gestionadas
   por el bloque compacto 768-1800px.
   ======================================== */
@media (min-width: 1200px) {

  /* Contenedor amplio para monitor */
  .services-section .container {
    max-width: 1500px !important;
    width: min(1500px, 94vw) !important;
  }

  /* Grid: 2×2 con gap generoso */
  .services-section .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* Tarjetas: padding y colores idénticos al portátil */
  .services-section .service-card {
    padding: 36px 32px !important;
    background: linear-gradient(180deg, rgba(12, 20, 32, 0.95) 0%, rgba(8, 14, 24, 0.9) 100%) !important;
    border: 1px solid rgba(10, 132, 255, 0.25) !important;
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.1), inset 0 0 8px rgba(10, 132, 255, 0.03) !important;
  }

  .services-section .service-card:hover {
    border-color: rgba(0, 180, 255, 0.65) !important;
    box-shadow:
      0 0  8px rgba(0, 180, 255, 0.20),
      0 0 18px rgba(0, 180, 255, 0.15),
      0 0 35px rgba(0, 180, 255, 0.10),
      0 0 60px rgba(0, 180, 255, 0.06),
      inset 0 0 12px rgba(0, 180, 255, 0.04) !important;
  }
}

/* Pantallas muy grandes (≥1600px): un paso más */
@media (min-width: 1600px) {
  .services-section .container {
    max-width: 1600px !important;
    width: min(1600px, 95vw) !important;
  }
  .services-section .services-grid {
    gap: 2.5rem !important;
  }
  .services-section .service-card {
    padding: 40px 36px !important;
  }
}

/* ========================================
   CONSULTORÍA — Monitor (≥1200px)
   Solo layout y colores — fuentes gestionadas
   por el bloque compacto 768-1800px.
   ======================================== */
@media (min-width: 1200px) {

  /* Contenedor amplio */
  .consulting-section > .container {
    max-width: 1630px !important;
    width: min(1630px, 94vw) !important;
  }

  /* Espaciado inferior */
  .consulting-section {
    padding-bottom: clamp(80px, 10vw, 130px) !important;
  }

  /* Gap entre tarjetas — generoso en monitor */
  .consulting-section .consulting-grid {
    gap: 2rem !important;
  }

  /* Padding de tarjeta — monitor más holgado */
  .consulting-card {
    padding: 36px 28px !important;
  }

  /* Colores unívocos — idénticos al portátil */
  .consulting-card {
    border: 1px solid rgba(10, 132, 255, 0.25) !important;
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.1), inset 0 0 8px rgba(10, 132, 255, 0.03) !important;
    background: linear-gradient(180deg, rgba(12, 20, 32, 0.95) 0%, rgba(8, 14, 24, 0.9) 100%) !important;
  }

  .consulting-card:hover {
    border-color: rgba(0, 180, 255, 0.65) !important;
    box-shadow:
      0 0  8px rgba(0, 180, 255, 0.20),
      0 0 18px rgba(0, 180, 255, 0.15),
      0 0 35px rgba(0, 180, 255, 0.10),
      0 0 60px rgba(0, 180, 255, 0.06),
      inset 0 0 12px rgba(0, 180, 255, 0.04) !important;
    transform: translateY(-4px) !important;
  }
} /* fin @media (min-width: 1200px) */

/* ========================================
   LAPTOP (768px – 1800px) — Consultoría compacta
   Debe ir al FINAL para ganar al bloque @media (min-width:1200px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1800px) {

  /* Contenedor moderadamente ancho */
  .consulting-section > .container {
    max-width: 1280px !important;
    width: min(1280px, 93vw) !important;
  }

  .consulting-section .consulting-grid {
    gap: 14px !important;
  }

  /* Título de sección — portátil */
  .consulting-section .section-header h2,
  .consulting-section h2 {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }

  /* Párrafo de sección — bajado ligeramente */
  .consulting-section .section-header p {
    margin-top: 18px !important;
  }

  /* Colores y padding — idénticos al portátil y monitor */
  .consulting-section .consulting-card {
    padding: 22px 14px !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, rgba(12, 20, 32, 0.95) 0%, rgba(8, 14, 24, 0.9) 100%) !important;
    border: 1px solid rgba(10, 132, 255, 0.25) !important;
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.1), inset 0 0 8px rgba(10, 132, 255, 0.03) !important;
  }

  .consulting-section .consulting-card:hover {
    border-color: rgba(0, 180, 255, 0.65) !important;
    box-shadow:
      0 0  8px rgba(0, 180, 255, 0.20),
      0 0 18px rgba(0, 180, 255, 0.15),
      0 0 35px rgba(0, 180, 255, 0.10),
      0 0 60px rgba(0, 180, 255, 0.06),
      inset 0 0 12px rgba(0, 180, 255, 0.04) !important;
  }

  /* Icono reducido */
  .consulting-section .consulting-card .card-icon {
    height: 52px !important;
    margin-bottom: 10px !important;
  }
  .consulting-section .consulting-card .card-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  /* H4: igual (o mayor) que h3 de service-card */
  .consulting-section .consulting-card h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    min-height: 3.05rem !important;
    margin-bottom: 10px !important;
  }

  /* LI: mayor que p de service-card para compensar viñetas */
  .consulting-section .consulting-card ul li {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 4px !important;
  }
}

/* =========================================================
   SERVICIOS — Laptop/Tablet (768px – 1800px)
   4 columnas en fila, contenedor ancho como consultoría,
   forma rectangular. Cubre 768–1199 y 1200–1800 juntos.
   Está al FINAL para ganar al bloque @media(min-width:1200px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1800px) {

  /* Contenedor servicios */
  .services-section .container {
    max-width: min(1170px, 90vw) !important;
    width: min(1170px, 90vw) !important;
  }

  .services-section {
    padding: 36px 0 !important;
    scroll-margin-top: 90px !important;
  }

  .services-section .section-header {
    margin-bottom: 40px !important;
  }

  .services-section .section-header h2 {
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
  }

  .services-section .section-header p {
    font-size: 1.05rem !important;
    margin-top: 18px !important;
  }

  /* 2x2 — dos arriba, dos abajo */
  .services-section .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Tarjeta: rectangular, un poco más alta para mejor estilo */
  .services-section .service-card {
    padding: 26px 14px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: unset !important;
  }

  /* Icono reducido */
  .services-section .service-card .card-icon {
    margin-bottom: 10px !important;
  }

  .services-section .service-card .card-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  /* Título */
  .services-section .service-card h3 {
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  /* Descripción */
  .services-section .service-card p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  /* Enlace */
  .services-section .service-card .card-link {
    font-size: 0.68rem !important;
  }
}

/* =========================================================
   SERVICIOS — Pantalla grande de portátil (1440px – 1800px)
   Sobreescribe el bloque compacto anterior para pantallas
   como la del cliente (1707px). Tarjetas más generosas.
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1800px) {

  /* Contenedor más ancho */
  .services-section .container {
    max-width: min(1430px, 92vw) !important;
    width: min(1430px, 92vw) !important;
  }

  /* Tarjeta: más alta y con más aire */
  .services-section .service-card {
    padding: 32px 22px !important;
  }

  /* Encabezado de sección más visible */
  .services-section .section-header h2 {
    font-size: 2rem !important;
  }

  .services-section .section-header p {
    font-size: 1.05rem !important;
  }

  /* Título de tarjeta más legible */
  .services-section .service-card h3 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  /* Descripción más cómoda */
  .services-section .service-card p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* Icono */
  .services-section .service-card .card-icon svg {
    width: 38px !important;
    height: 38px !important;
  }

  /* Enlace */
  .services-section .service-card .card-link {
    font-size: 0.78rem !important;
  }
}

/* =========================================================
   CONSULTORÍA — Pantalla grande de portátil (1440px – 1800px)
   Título más grande para pantallas como la del cliente (1707px)
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1800px) {

  .consulting-section .section-header h2,
  .consulting-section h2 {
    font-size: 1.9rem !important;
    margin-bottom: 6px !important;
  }
}

/* ========================================
   LEXI WIDGET — Protección contra globales
   Los !important de h4, p, li no deben
   afectar al chat del asistente virtual.
   ======================================== */

/* Botón circular */
.lexi-widget .lexi-btn,
#lexi-btn.lexi-btn {
  background: linear-gradient(135deg, #00D1FF 0%, #0081FA 100%) !important;
  box-shadow: 0 5px 25px rgba(0, 209, 255, 0.5) !important;
}

/* Header del chat */
.lexi-widget .lexi-header,
#lexi-chat .lexi-header {
  background: linear-gradient(135deg, #00D1FF 0%, #0081FA 100%) !important;
}

/* Nombre "Lexi" — h4 global lo sobreescribe sin esto */
.lexi-widget .lexi-header h4,
.lexi-widget .lexi-info h4,
#lexi-chat .lexi-info h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  min-height: unset !important;
  border: none !important;
}

/* Subtítulo "Asistente Virtual" — p global lo sobreescribe sin esto */
.lexi-widget .lexi-header p,
.lexi-widget .lexi-info p,
#lexi-chat .lexi-info p {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Mensajes de chat — no afectar por globales */
#lexi-chat .lexi-messages .message {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#lexi-chat .lexi-messages .lexi-msg span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0081FA !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ================================================
   HERO SUBTITLE  Monitor: 2 lineas exactas
   ================================================ */
@media (min-width: 1024px) {
  .hero-subtitle-p {
    max-width: min(850px, 75vw) !important;
    width: min(850px, 75vw) !important;
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.75rem !important;
  }
}

/* ================================================
   LEXI WIDGET — Botón más grande + chat crece arriba
   ================================================ */

/* 1. Botón devuelto a tamaño normal (eliminado override de 76px) */

/* 2. Chat: ancho fijo 380px, altura base más alta, solo crece hacia arriba */
.lexi-chat {
  width: 380px !important;
  height: 500px !important;      /* más alto al abrir */
  transition: height 0.3s ease !important;  /* solo altura, no ancho */
}

/* 3. Expandido: mismo ancho, solo más alto */
.lexi-chat.expanded {
  width: 380px !important;
  height: 600px !important;
  max-height: 80vh !important;
}

/* 4. Móvil — menú y chat controlados */
@media (max-width: 768px) {
  /* Menú hamburguesa — fondo oscuro para todas las páginas */
  nav,
  nav.active {
    background: #060E1C !important;
    background-color: #060E1C !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  }

  /* Links del nav en móvil — blancos */
  nav ul li a {
    color: #ffffff !important;
  }
  nav ul li a:hover {
    color: #22d3ee !important;
  }
}

@media (max-width: 600px) {
  /* Chat Lexi — tamaño compacto, no tapa toda la pantalla */
  .lexi-chat {
    width: calc(100vw - 32px) !important;
    height: 50vh !important;
    max-height: 400px !important;
    right: 0 !important;
    bottom: 80px !important;
  }

  /* Expandido en móvil — un poco más alto pero controlado */
  .lexi-chat.expanded {
    width: calc(100vw - 32px) !important;
    height: 60vh !important;
    max-height: 480px !important;
    max-width: 100vw !important;
  }

  /* Ocultar botón expandir en móvil */
  .expand-lexi {
    display: none !important;
  }
}

/* ================================================
   CONTACTO — Glassmorphism sobre fondo galaxia
   ================================================ */

/* Tarjeta principal del formulario */
.contact-form-card {
  background-color: rgba(6, 11, 25, 0.65) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.20) !important;
  padding: 3.5rem 4rem !important;
  max-width: 760px !important;
}

/* Inputs y textarea con fondo translúcido sutil */
.contact-form-card .input-group input,
.contact-form-card .input-group textarea {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 14px 14px 14px 40px !important;
  font-size: 1rem !important;
}

.contact-form-card .input-group input::placeholder,
.contact-form-card .input-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.50) !important;
}

/* Botón principal — azul sólido */
.contact-form-card .btn-submit {
  background-color: #0047b3 !important;
  border-radius: 8px !important;
  transition: opacity 0.2s ease !important;
}
.contact-form-card .btn-submit:hover {
  opacity: 0.9 !important;
  background-color: #0047b3 !important;
}

/* Botón WhatsApp — verde sólido */
.contact-form-card .btn-whatsapp {
  background-color: #008000 !important;
  border-radius: 8px !important;
  transition: opacity 0.2s ease !important;
}
.contact-form-card .btn-whatsapp:hover {
  opacity: 0.9 !important;
  background-color: #008000 !important;
}


/* ================================================
   NAV HOVER  quitar color cyan/verde, usar blanco
   ================================================ */
nav ul li a:not(.btn-contact):hover,
body:not(.home-page) nav ul li a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ================================================
   HERO — Color párrafo subtítulo: blanco suave
   Solo afecta a .hero-subtitle-p, nada más.
   ================================================ */
.hero-subtitle-p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ================================================
   CONTACTO — Monitor estándar (≥1440px): formulario amplio
   Solo monitores externos; portátiles (< 1440px) usan el tamaño base.
   ================================================ */
@media (min-width: 1440px) {
  .contact-form-card {
    max-width: 1000px !important;
    padding: 4rem 5.5rem !important;
  }
  .contact-form-card .input-group textarea {
    min-height: 150px !important;
  }
}

/* CONTACTO — Monitor grande (≥1600px): formulario aún más amplio */
@media (min-width: 1600px) {
  .contact-form-card {
    max-width: 1100px !important;
    padding: 4.5rem 7rem !important;
  }
  .contact-form-card .input-group input,
  .contact-form-card .input-group textarea {
    font-size: 1.05rem !important;
    padding: 16px 16px 16px 44px !important;
  }
  .contact-form-card .input-group textarea {
    min-height: 170px !important;
  }
  .contact-form-card .btn-submit,
  .contact-form-card .btn-whatsapp {
    padding: 16px 24px !important;
    font-size: 1.05rem !important;
  }
  .contact-info-bar {
    font-size: 1.05rem !important;
    margin-bottom: 32px !important;
  }
}


/* ================================================================
   MOBILE POLISH — LexIAlogic
   Correcciones específicas para pantallas móviles (≤ 767px)
   ================================================================ */

/* ── HERO MÓVIL — bola detrás del título, info distribuida ──────── */
@media (max-width: 767px) {

  /* CONTENEDOR: centra el bloque de contenido verticalmente */
  .hero-section {
    background: #000 !important;
    background-image: none !important;
    position: relative !important;
    overflow: hidden !important;        /* evita scroll lateral del video agrandado */
    height: 100vh !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* centra el bloque */
    align-items: center !important;
    padding: 70px 0 30px !important;   /* top=navbar, bottom=respiro */
    box-sizing: border-box !important;
  }

  /* Elimina el padding del container dentro del hero para máximo ancho */
  .hero-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* BOLA: posicionada al 25% superior — queda en la zona media-alta */
  .hero-section video {
    display: block !important;
    position: absolute !important;
    top: 15% !important;               /* sube la bola — el título queda dentro */
    left: 50% !important;
    transform: translateX(-50%) scale(1.4) !important;
    width: 120% !important;
    height: auto !important;
    object-fit: contain !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* OVERLAY */
  .hero-overlay {
    background-image: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    z-index: 1 !important;
  }

  /* CONTENIDO: distribuido verticalmente con space-between */
  .hero-content {
    position: relative !important;
    z-index: 10 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;  /* reparte h1, p, btn */
    align-items: center !important;
    text-align: center !important;
    width: 95% !important;
    max-width: 100% !important;
    min-height: 36vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* ── TIPOGRAFÍA H1: bold, compacto, premium ─────────────────────── */
  .hero-content h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    color: #ffffff !important;
    margin: 0 !important;
    margin-top: -90px !important;      /* sube solo el título */
    text-align: center !important;
  }

  /* Palabras clave en degradado cian→azul (OPTIMIZAR, OPERATIVA) */
  .hero-content h1 .highlight {
    background: linear-gradient(90deg, #00d4ff 0%, #0077ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
  }

  /* span interno de la línea 1 hereda el estilo del h1 */
  .hero-content .hero-line-1 {
    color: #ffffff !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  /* ── PÁRRAFO DESCRIPTIVO ────────────────────────────────────────── */
  /* Oculta el original en mobile */
  .hero-content p.hero-subtitle-p {
    display: none !important;
  }

  /* Muestra y estiliza el párrafo alternativo mobile */
  .hero-content p.hero-subtitle-mobile,
  .hero-subtitle-mobile {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    margin: 0 !important;              /* space-between gestiona el espacio */
    width: 100% !important;
    max-width: 100% !important;
    color: rgba(180, 210, 235, 0.82) !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
  }

  /* ── BOTÓN CTA: degradado + glow + icono › ──────────────────────── */
  .cta-btn {
    background: linear-gradient(90deg, #00d4ff 0%, #0055ff 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 15px 38px !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.55),
                0 0 44px rgba(0, 212, 255, 0.20) !important;
    align-self: center !important;
    margin: 0 !important;              /* space-between gestiona el espacio */
    letter-spacing: 0.01em !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Icono › al final del botón sin tocar el HTML */
  .cta-btn::after {
    content: "›" !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
}




/* Párrafo mobile: oculto en desktop, visible solo en mobile */
.hero-subtitle-mobile {
  display: none;
}


/* Este elemento reemplaza al widget flotante solo en mobile */
.lexi-hero-mobile {
  display: none;   /* oculto por defecto (desktop) */
}

@media (max-width: 767px) {

  /* Muestra el Lexi centrado debajo del botón en el hero */
  .lexi-hero-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 4px auto 0 !important;
  }

  /* Botón Lexi: 60px centrado */
  .lexi-hero-btn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 209, 255, 0.60) !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 209, 255, 0.35) !important;
    margin: 0 auto !important;
  }

  /* Etiqueta debajo del botón Lexi */
  .lexi-hero-label {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.80) !important;
    background: rgba(5, 12, 28, 0.65) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(6px) !important;
  }

  /* Lexi: ocultar el elemento inline del hero */
  .lexi-hero-mobile {
    display: none !important;
  }

  /* 3. LEXI: position fixed, esquina inferior derecha, 60px */
  .lexi-widget {
    display: block !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9990 !important;
  }

  .lexi-btn {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    font-size: 20px !important;
    box-shadow: 0 3px 12px rgba(0, 209, 255, 0.40) !important;
  }

  /* Tooltip Lexi en mobile: estilo limpio */
  .lexi-tooltip {
    font-size: 12px !important;
    padding: 6px 11px !important;
    right: 70px !important;
    bottom: 12px !important;
    border-radius: 8px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }


/* ── SCROLL OFFSET CONTACTO (Mobile) ────────────────────────────── */
/* Evita que el scroll muestre el contenido de la sección anterior  */
@media (max-width: 767px) {
  #contacto {
    scroll-margin-top: 80px !important;  /* baja el scroll para ver solo el título */
  }
}

/* ── HEADER MÓVIL ───────────────────────────────────────────────── */
/* El header se mantiene position:absolute (como en desktop) para que
   quede transparente y fundido con el hero sin crear franja negra.   */
@media (max-width: 767px) {

  header {
    padding: 16px 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: absolute !important;
    border-bottom: none !important;
  }

  .logo-text-main {
    font-size: 1.35rem !important;
  }

  .mobile-menu-btn {
    font-size: 1.3rem !important;
    color: #ffffff !important;
  }

  /* Selector de idioma centrado */
  .language-dropdown-container {
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* Menú móvil — centrado de ítems (aplica desde el breakpoint 991px del main) */
@media (max-width: 991px) {
  nav ul {
    text-align: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
  }

  nav ul li {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  nav ul li a:not(.btn-contact) {
    font-size: 1rem !important;
    letter-spacing: 0.8px !important;
    padding: 8px 0 !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ── SERVICIOS MÓVIL ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  .services-section {
    padding: 50px 0 40px !important;
  }

  .services-section .container {
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 0 !important;
  }

  .services-section .section-header {
    margin-bottom: 28px !important;
  }

  .services-section .section-header h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
  }

  .services-section .section-header p {
    font-size: 0.9rem !important;
  }

  .services-section .services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Tarjeta: más compacta en mobile */
  .services-section .service-card {
    padding: 18px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .services-section .service-card .card-icon {
    margin-bottom: 10px !important;
  }

  .services-section .service-card .card-icon svg {
    width: 34px !important;
    height: 34px !important;
  }

  .services-section .service-card h3 {
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  /* Descripción: texto COMPLETO, solo más compacto (fuente y línea más pequeñas) */
  .services-section .service-card p {
    font-size: 0.83rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    display: block !important;
    overflow: visible !important;
  }

  .services-section .service-card .card-link {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    margin-top: auto !important;
  }

  /* Trust badges: 2 columnas en vez de columna simple */
  .trust-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding: 0 4px !important;
    align-items: stretch !important;
  }

  /* Si hay 3 badges (impar), el último ocupa las 2 columnas */
  .trust-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .trust-item {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    font-size: 0.80rem !important;
    padding: 9px 10px !important;
    text-align: center !important;
  }
}

/* ── CONSULTORÍA MÓVIL ──────────────────────────────────────────── */
@media (max-width: 767px) {

  .consulting-section {
    padding: 50px 0 20px !important;   /* bottom reducido para acortar el espacio antes del contacto */
  }

  .consulting-section > .container {
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 0 !important;
  }

  .consulting-section .section-header {
    margin-bottom: 28px !important;
  }

  .consulting-section .section-header h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
  }

  .consulting-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .consulting-card {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }

  .consulting-section .consulting-card .card-icon {
    height: auto !important;
    margin-bottom: 12px !important;
  }

  .consulting-section .consulting-card .card-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .consulting-section .consulting-card h4 {
    min-height: 0 !important;
    font-size: 1.0rem !important;
    margin-bottom: 12px !important;
  }

  .consulting-section .consulting-card ul li {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    margin-bottom: 6px !important;
  }
}

/* ── CONTACTO MÓVIL ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  .contact-section {
    padding: 24px 0 40px !important;   /* top reducido: evita el gran espacio negro */
    scroll-margin-top: 0 !important;   /* sin margen extra al hacer scroll desde CTA */
  }

  .contact-section .container {
    max-width: 92vw !important;
    width: 92vw !important;
  }

  .contact-section .section-header h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
  }

  .contact-section .section-header p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  .contact-form-card {
    padding: 28px 18px !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  .contact-info-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .contact-info-item {
    font-size: 0.88rem !important;
  }

  .input-group input,
  .input-group textarea {
    font-size: 0.9rem !important;
    padding: 12px 12px 12px 36px !important;
  }

  .form-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .btn-submit,
  .btn-whatsapp {
    padding: 14px !important;
    font-size: 0.92rem !important;
    width: 100% !important;
  }
}

/* ── LEXI WIDGET MÓVIL ──────────────────────────────────────────── */
/* Widget pequeño y discreto en esquina inferior derecha,
   sin tapar el contenido. Tooltip visible sobre la barra Android. */
@media (max-width: 767px) {

  .lexi-widget {
    bottom: 16px !important;
    right: 12px !important;
    z-index: 9990 !important;
  }

  /* Botón reducido: 44px (tamaño mínimo táctil recomendado) */
  .lexi-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
    box-shadow: 0 3px 12px rgba(0, 209, 255, 0.40) !important;
  }

  /* Tooltip: compacto, no tapa el contenido */
  .lexi-tooltip {
    font-size: 11px !important;
    padding: 6px 11px !important;
    right: 54px !important;
    bottom: 4px !important;
    border-radius: 8px !important;
    max-width: 180px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* Chat: ocupa casi toda la pantalla en vertical */
  .lexi-chat {
    width: calc(100vw - 24px) !important;
    height: 55vh !important;
    max-height: 420px !important;
    right: 0 !important;
    bottom: 68px !important;
    border-radius: 14px !important;
  }

  .lexi-chat.expanded {
    width: calc(100vw - 24px) !important;
    height: 65vh !important;
    max-height: 500px !important;
  }

  .expand-lexi {
    display: none !important;
  }
}

/* Pantallas muy pequeñas (≤380px) */
@media (max-width: 380px) {

  .lexi-tooltip {
    display: none !important;
  }

  .hero-content h1,
  .hero-content .hero-line-1 {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
  }

  .hero-content p,
  .hero-subtitle-p {
    font-size: 0.80rem !important;
  }

  .cta-btn {
    font-size: 0.85rem !important;
    padding: 12px 24px !important;
  }
}

/* ── FOOTER MÓVIL ───────────────────────────────────────────────── */
@media (max-width: 767px) {

  .site-footer {
    padding: 28px 0 20px !important;
  }

  .footer-logo img {
    width: clamp(160px, 55vw, 220px) !important;
  }

  .footer-tagline {
    font-size: 0.78rem !important;
    padding: 0 20px !important;
  }

  .footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }

  .footer-links a {
    font-size: 0.72rem !important;
  }

  .footer-copy {
    font-size: 0.68rem !important;
    padding: 0 16px !important;
  }
}