/* ==========================================================
   XELVIA — Estilos del sitio
   Colores y tipografías tomados de xelvia_sistema_diseno.html

   Índice
    1. Variables
    2. Base
    3. Componentes comunes (títulos, botones, etiquetas)
    4. Encabezado y menú
    5. Pie de página
    6. Portada (Inicio)
    7. Encabezado de páginas internas
    8. Tarjetas de servicios
    9. Detalle de servicio
   10. Casos
   11. Nosotros (pilares, proceso, comparativa, fundador)
   12. Contacto y formulario
   13. Textos legales
   14. Franja de llamado a la acción
   15. Botón flotante de WhatsApp
   16. Animaciones
   17. Adaptación a tableta y celular
   ========================================================== */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  /* Colores de marca */
  --navy:        #0A1628;
  --navy-2:      #0F2040;
  --navy-3:      #0D1A35;
  --navy-hover:  #112240;
  --ia-blue:     #60A5FA;
  --ia-blue-alt: #1A56DB;
  --ia-blue-lt:  #93C5FD;
  --white:       #FFFFFF;
  --whatsapp:    #25D366;
  --error:       #F87171;
  --success:     #4ADE80;

  /* Texto sobre fondo oscuro */
  --text-hi:  rgba(255, 255, 255, 0.92);
  --text-mid: rgba(255, 255, 255, 0.68);
  --text-lo:  rgba(255, 255, 255, 0.50);

  /* Líneas y superficies */
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);

  /* Tipografías */
  --font-display: "Rajdhani", sans-serif;
  --font-body:    "DM Sans", sans-serif;

  /* Espaciado */
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 6rem);
  --header-h:  80px;
  --max-width: 1200px;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
}

.ia {
  color: var(--ia-blue);
}

:focus-visible {
  outline: 2px solid var(--ia-blue);
  outline-offset: 3px;
}

/* Textura de ruido sutil sobre toda la página */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 999;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--ia-blue-alt); border-radius: 3px; }

/* Texto solo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Saltar al contenido" (visible solo con teclado) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--ia-blue);
  border-radius: 2px;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ── 3. COMPONENTES COMUNES ───────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section {
  padding: var(--section-y) var(--gutter);
}

.section-alt {
  background: var(--navy-3);
}

.section-alt-2 {
  background: var(--navy-2);
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--white);
  text-decoration: none;
}

/* Etiqueta pequeña sobre los títulos */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ia-blue);
}
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.section-title {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
}

.section-sub {
  max-width: 560px;
  margin-bottom: 3rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.section-head .section-sub { margin-bottom: 0; }
.section-head + * { margin-top: 3rem; }

.tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ia-blue);
  background: rgba(26, 86, 219, 0.12);
  border: 1px solid rgba(26, 86, 219, 0.3);
  border-radius: 2px;
}

/* Enlace de texto con flecha */
.link-arrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ia-blue);
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btn-primary {
  font-weight: 500;
  color: var(--navy);
  background: var(--ia-blue);
}
.btn-primary:hover {
  background: var(--ia-blue-lt);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.btn-secondary {
  font-weight: 400;
  color: var(--text-mid);
  border-color: rgba(255, 255, 255, 0.18);
}
.btn-secondary:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Lista con palomitas */
.check-list {
  display: grid;
  gap: 0.9rem;
}
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-hi);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--ia-blue);
}

/* Métrica: el número va arriba visualmente aunque en el HTML va después */
.metric {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

.metric-val {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}

.metric-lbl {
  max-width: 15ch;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-lo);
}

/* ── 4. ENCABEZADO Y MENÚ ─────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s;
}

.site-header.is-scrolled {
  background: rgba(10, 22, 40, 0.97);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--white);
}

/* Línea bajo la página actual */
.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--ia-blue);
}

.nav-links .nav-cta {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ia-blue);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}
.nav-links .nav-cta:hover,
.nav-links .nav-cta[aria-current="page"] {
  color: var(--ia-blue);
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--ia-blue);
}

/* Botón hamburguesa (solo en celular) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 5. PIE DE PÁGINA ─────────────────────────────────────── */
/* Espacio inferior extra para que la insignia de Netlify no tape la última línea */
.site-footer {
  padding: 4rem var(--gutter) 5.5rem;
  background: var(--navy);
  border-top: 1px solid var(--line-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
}

/* Bloque de marca: replica la composición del logo oficial */
.footer-brand {
  max-width: 340px;
}

/* Logo + línea + "Consultoría IA" con el mismo ancho */
.footer-lockup {
  display: inline-block;
}

.footer-brand .logo {
  display: block;
  font-size: 2.75rem;
}

.footer-sub {
  text-align: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-hi);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-desc {
  margin: 1.25rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.footer-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ia-blue);
}

/* Íconos de redes sociales */
.social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--text-mid);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social a:hover,
.social a:focus-visible {
  color: var(--white);
  border-color: var(--hover, var(--ia-blue));
  background: var(--hover, var(--ia-blue));
}

.social .social-li { --hover: #0A66C2; }
.social .social-wa { --hover: var(--whatsapp); }

.footer-title {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.footer-links {
  display: grid;
  gap: 0.6rem;
}
.footer-links a {
  font-size: 0.875rem;
  color: var(--text-mid);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 3rem;
  /* Espacio a la derecha para que el botón de WhatsApp no tape el texto */
  padding: 1.5rem 5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-lo);
  border-top: 1px solid var(--line-soft);
}
.footer-bottom a { color: var(--text-mid); }
.footer-bottom a:hover { color: var(--white); }

/* ── 6. PORTADA (INICIO) ──────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Los lados crecen en pantallas anchas para alinear con el resto de secciones */
  padding: calc(var(--header-h) + 3.5rem) max(var(--gutter), calc((100% - var(--max-width)) / 2)) 5rem;
  overflow: hidden;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* Fondo de puntos (también en encabezados internos) */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(96, 165, 250, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

/* Brillo azul */
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.hero-title {
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.hero-title .light {
  font-weight: 400;
  color: var(--text-lo);
}

.cursor {
  animation: blink 1.1s steps(1) infinite;
}

.hero-sub {
  max-width: 540px;
  margin-bottom: 3rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-mid);
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* Bloque destacado del caso en Inicio */
.feature-case {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2px;
}

.feature-case-body,
.feature-case-metrics {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--navy-2);
}

.feature-case-body p {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-mid);
}

.feature-case-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-content: center;
  background: var(--navy-3);
}

/* Pilares compactos en Inicio */
.mini-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

/* ── 7. ENCABEZADO DE PÁGINAS INTERNAS ────────────────────── */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem)) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-title {
  max-width: 900px;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
}

.page-lead {
  max-width: 640px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-mid);
}

.page-hero .actions {
  margin-top: 2.25rem;
}

/* Página 404: ocupa casi toda la pantalla */
.page-404 {
  display: flex;
  align-items: center;
  min-height: 75vh;
  border-bottom: none;
}
.page-404 > .container {
  width: 100%;
}

/* Ruta de navegación: Servicios / Automatiza */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: var(--text-lo);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
}
.breadcrumb a {
  color: var(--text-mid);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--white); }

/* ── 8. TARJETAS DE SERVICIOS ─────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 2.25rem;
  background: var(--navy-2);
  text-decoration: none;
  overflow: hidden;
  transition: background 0.3s;
}

/* Línea azul lateral al pasar el mouse */
.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--ia-blue-alt);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s;
}
.svc-card:hover,
.svc-card:focus-visible { background: var(--navy-hover); }
.svc-card:hover::before,
.svc-card:focus-visible::before { transform: scaleY(1); }

.svc-num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
}

.svc-name {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.svc-desc {
  flex: 1;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-mid);
}

.svc-price {
  padding-top: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ia-blue);
  border-top: 1px solid var(--line);
}

.svc-more {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-hi);
}

/* ── 9. DETALLE DE SERVICIO ───────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.panel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--navy-2);
}

.panel-title {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.panel p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-mid);
}

.panel-accent {
  background: var(--navy-3);
  border-left: 2px solid var(--ia-blue-alt);
}

/* Entregables + tarjeta de inversión */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.price-card {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 2rem;
  background: var(--navy-2);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.price-row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.price-row:first-of-type { padding-top: 0; }

.price-lbl {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.price-val {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.price-note {
  margin: 1.25rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.price-card .btn {
  width: 100%;
}

/* Proceso por etapas */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--navy-2);
  border-top: 2px solid rgba(96, 165, 250, 0.25);
}

.step-when {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ia-blue);
}

.step-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.step p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.steps-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-mid);
}
.steps-note strong { font-weight: 500; color: var(--white); }

/* Otros servicios */
.other-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.other-services a {
  display: block;
  padding: 1.5rem;
  background: var(--navy-2);
  text-decoration: none;
  transition: background 0.2s;
}
.other-services a:hover { background: var(--navy-hover); }

.other-services .tag { margin-bottom: 0.6rem; }

.other-services span:last-child {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ── 10. CASOS ────────────────────────────────────────────── */
.cases {
  display: grid;
  gap: 2rem;
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2px;
}

.case-body {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--navy-2);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.case-meta .tag { margin-bottom: 0; }

.case-industry {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.case-title {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
}

.case-block + .case-block { margin-top: 1.25rem; }

.case-block h3 {
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ia-blue);
}

.case-block p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-mid);
}

.case-link {
  margin-top: 1.5rem;
}

/* Separación entre el título de sección y su contenido */
.section-title + .pillars,
.section-title + .compare,
.section-title + .founder {
  margin-top: 2.5rem;
}

.case-results {
  display: grid;
  gap: 1.75rem;
  align-content: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--navy-3);
}

.case-results .metric-lbl { max-width: 24ch; }

.cases-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-lo);
}

/* ── 11. NOSOTROS ─────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.pillar {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  transition: background 0.2s;
}
.pillar:hover { background: rgba(255, 255, 255, 0.04); }

.pillar-num {
  flex-shrink: 0;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ia-blue);
}

.pillar-title {
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 500;
}

.pillar-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mid);
}

/* Comparativa */
.compare {
  max-width: 820px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--navy-3);
  border: 1px solid var(--line-soft);
}

/* En pantallas pequeñas la tabla se desliza dentro de su recuadro */
.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}

.compare-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-lo);
  border-bottom-color: var(--line);
}
.compare-table thead th.col-xelvia { color: var(--ia-blue); }

.compare-table tbody th {
  font-size: 0.9rem;
  font-weight: 300;
  text-align: left;
  color: var(--text-hi);
}

.compare-table td { font-size: 0.8rem; }

.compare-table .col-xelvia { background: rgba(26, 86, 219, 0.07); }
.compare-table .yes   { font-size: 1.05rem; color: var(--ia-blue); }
.compare-table .no    { font-size: 0.95rem; color: var(--error); }
.compare-table .maybe { color: var(--text-lo); }

/* Fundador */
.founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  max-width: 820px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--navy-2);
  border: 1px solid var(--line-soft);
}

.founder-initials {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ia-blue);
  background: rgba(26, 86, 219, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 50%;
}

.founder-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.founder-role {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ia-blue);
}

.founder p:last-child {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ── 12. CONTACTO Y FORMULARIO ────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.form-card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--navy-2);
  border: 1px solid var(--line-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-hi);
}

.field .optional {
  font-weight: 300;
  color: var(--text-lo);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2360A5FA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.field select option {
  color: var(--white);
  background: var(--navy-2);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ia-blue);
  background: rgba(96, 165, 250, 0.06);
}

/* Campos con error (solo después de que la persona interactuó) */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ia-blue);
}
.consent a { color: var(--ia-blue); }

/* Campo trampa para bots: invisible para personas */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-lo);
}

.form-intro {
  margin-bottom: 1.75rem;
}

.form-status {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: 2px;
}
.form-status:empty { display: none; }
.form-status.is-success {
  color: var(--success);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.form-status.is-error {
  color: var(--error);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Canales directos */
.channels {
  display: grid;
  gap: 2px;
}

.channel {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  text-decoration: none;
  background: var(--navy-2);
  border-left: 2px solid var(--accent, var(--ia-blue));
  transition: background 0.2s;
}
.channel:hover { background: var(--navy-hover); }

.channel-wa { --accent: var(--whatsapp); }
.channel-li { --accent: var(--ia-blue); }
.channel-mail { --accent: var(--ia-blue-lt); }

.channel-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  fill: var(--accent);
}

.channel-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.channel-desc {
  display: block;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-mid);
}

.channel-action {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.contact-promise {
  margin-top: 1.5rem;
  padding: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mid);
  border: 1px solid var(--line);
}
.contact-promise strong { font-weight: 500; color: var(--white); }

/* ── 13. TEXTOS LEGALES ───────────────────────────────────── */
/* Ancho cómodo de lectura, alineado a la izquierda como el título */
.prose > * {
  max-width: 760px;
}

.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.prose p,
.prose li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-mid);
}

.prose p + p { margin-top: 0.9rem; }

.prose ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.prose a { color: var(--ia-blue); }
.prose strong { font-weight: 500; color: var(--white); }

/* ── 14. FRANJA DE LLAMADO A LA ACCIÓN ────────────────────── */
.cta-band {
  position: relative;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter);
  background: linear-gradient(135deg, var(--navy-2) 0%, #0B2350 100%);
  border-top: 1px solid rgba(96, 165, 250, 0.15);
  overflow: hidden;
}

.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cta-band .section-title { margin-bottom: 0.5rem; }

.cta-band p {
  max-width: 560px;
  color: var(--text-mid);
}

/* ── 15. BOTÓN FLOTANTE DE WHATSAPP ───────────────────────── */
/* Va por encima de la insignia "Powered by Netlify" (ocupa ~61px abajo a la derecha) */
.float-wa {
  position: fixed;
  right: 1.5rem;
  bottom: 5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--whatsapp);
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.float-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
}
.float-wa svg {
  width: 26px;
  height: 26px;
  fill: var(--white);
}

/* ── 16. ANIMACIONES ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Logo que se escribe solo: "X_" parpadea y el cursor teclea el resto.
   La clase .logo-anim la pone el <head> solo en la primera página de la visita. */
.site-header .logo {
  position: relative;
}

/* Oculto hasta que main.js prepare la animación; si el JS fallara, aparece a los 2s */
.logo-anim .site-header .logo {
  opacity: 0;
  animation: logoFallback 0s 2s forwards;
}
.logo-anim .site-header .logo.is-typing {
  opacity: 1;
  animation: none;
}

@keyframes logoFallback {
  to { opacity: 1; }
}

/* Las letras ocultas conservan su espacio: el menú no se mueve */
.logo-ch.is-hidden {
  visibility: hidden;
}

.logo-cursor {
  position: absolute;
  bottom: 0.08em;
  width: 0.5em;
  height: 0.1em;
  background: var(--ia-blue);
  pointer-events: none;
}
.logo-cursor.is-blinking { animation: blink 1s steps(1) infinite; }
.logo-cursor.is-fading {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Solo se animan si JavaScript está activo (clase .js en <html>) */
.js .hero-anim {
  opacity: 0;
  animation: fadeUp 0.8s forwards;
}
.js .hero-anim:nth-child(1) { animation-delay: 0.2s; }
.js .hero-anim:nth-child(2) { animation-delay: 0.4s; }
.js .hero-anim:nth-child(3) { animation-delay: 0.6s; }
.js .hero-anim:nth-child(4) { animation-delay: 0.8s; }
.js .hero-anim:nth-child(5) { animation-delay: 1s; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respeta a quien pidió "reducir movimiento" en su sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .hero-anim,
  .js .reveal,
  .logo-anim .site-header .logo {
    opacity: 1;
    transform: none;
  }
}

/* ── 17. ADAPTACIÓN A TABLETA Y CELULAR ───────────────────── */
/* Nota: minmax(0, 1fr) evita que un contenido ancho ensanche la página */
@media (max-width: 960px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-grid,
  .contact-layout,
  .case,
  .feature-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card {
    position: static;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  /* El menú se despliega debajo del encabezado */
  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: rgba(10, 22, 40, 0.98);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }

  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-links a[aria-current="page"]:not(.nav-cta)::after {
    top: 50%;
    bottom: auto;
    left: -1rem;
    right: auto;
    width: 3px;
    height: 1.2em;
    transform: translateY(-50%);
  }

  .nav-links .nav-cta {
    margin-top: 1rem;
    padding: 0.9rem;
    text-align: center;
  }

  .two-col,
  .pillars,
  .mini-pillars,
  .other-services,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .founder {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .footer-bottom {
    padding-right: 0;
    padding-bottom: 4rem;
  }

  .float-wa {
    right: 1rem;
    bottom: 4.75rem;
  }
}

@media (max-width: 520px) {
  .steps,
  .feature-case-metrics,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}