:root{
  --bg:#0b1016;
  --panel:#0f1722;
  --panel2:#0c1320;
  --text:#e9eef6;
  --muted:#b6c2d6;
  --faint:#7f90ad;
  --line:rgba(233,238,246,.12);
  --glow:rgba(45,116,156,.20);
  --accent:#2D749C;   /* Azul */
  --accent2:#C6016B;  /* Magenta */
  --ok:#23c483;
  --shadow: 0 14px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --max: 1140px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Light theme tokens */
  --light-bg:#ffffff;
  --light-text:#0b1220;
  --light-muted:#4b5563;
  --light-faint:#6b7280;
  --light-line:rgba(15,23,42,.12);
  --light-panel:#ffffff;
  --light-panel2:#f7f8fb;
  --light-shadow: 0 18px 55px rgba(2,6,23,.10);

  /* Soft pattern colors (muy sutil) */
  --light-pat-1: rgba(45,116,156,.06);
  --light-pat-2: rgba(198,1,107,.05);
  --light-pat-line: rgba(2,6,23,.05);

  /* Gradient reusable */
  --brand-grad: linear-gradient(135deg, rgba(45,116,156,1), rgba(198,1,107,1));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  /* Fondo dark global */
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(45,116,156,.20), transparent 55%),
    radial-gradient(760px 520px at 80% 18%, rgba(198,1,107,.16), transparent 55%),
    radial-gradient(680px 420px at 60% 90%, rgba(90,140,255,.10), transparent 60%),
    linear-gradient(180deg, #070b11 0%, var(--bg) 40%, #070b11 100%);
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}

/* ====== Utilidad: texto degradado (para h2 y titulares) ====== */
.grad-text{
  background: var(--brand-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ====== Utilidad: subrayado degradado sutil ====== */
.grad-underline{
  position:relative;
}
.grad-underline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width: clamp(120px, 22vw, 220px);
  height:4px;
  border-radius:999px;
  background: var(--brand-grad);
  opacity:.55;
  filter: blur(.1px);
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
  font-size:13px; color:var(--muted);
}
.dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2))}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700; letter-spacing:.2px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(233,238,246,.18)}
.btn.primary{
  border-color:rgba(45,116,156,.45);
  background:linear-gradient(135deg, rgba(45,116,156,.95), rgba(198,1,107,.80));
  box-shadow: 0 18px 55px var(--glow);
}
.btn.primary:hover{transform:translateY(-1px) scale(1.01)}
.btn.ghost{background:transparent}
.btn.small{padding:10px 12px; border-radius:12px; font-size:14px}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,11,17,.55);
  border-bottom:1px solid rgba(233,238,246,.08);
  backdrop-filter: blur(14px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900; letter-spacing:.4px;
}
.brand-logo{
  height: 56px;
}

.brand-badge:after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 45%);
  transform: rotate(25deg);
}
.brand small{display:block; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.2px}

nav ul{
  list-style:none; display:flex; gap:14px; padding:0; margin:0;
  align-items:center;
}
nav a{
  display:inline-flex; padding:10px 10px;
  border-radius:12px;
  color:var(--muted);
  font-weight:700; font-size:14px;
  border:1px solid transparent;
}
nav a:hover{color:var(--text); border-color:rgba(233,238,246,.10); background:rgba(255,255,255,.03)}
.nav-cta{display:flex; gap:10px; align-items:center}

.menu-btn{display:none}
@media (max-width: 980px){
  nav ul{display:none}
  .menu-btn{display:inline-flex}
}
.mobile{display:none; padding: 0 22px 18px;}
.mobile.open{display:block}
.mobile a{
  display:flex; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(233,238,246,.08);
  margin-top:10px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.mobile a:hover{color:var(--text); border-color:rgba(233,238,246,.16)}

section{padding:84px 0}
@media (max-width: 980px){ section{padding:70px 0} }

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:34px;
  align-items:center;
}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.hero{padding:70px 0 34px}
.hero h1{
  font-size: clamp(34px, 4.4vw, 56px);
  line-height:1.05;
  margin:16px 0 14px;
  letter-spacing:-.6px;
}
.hero p{
  font-size:18px;
  color:var(--muted);
  line-height:1.55;
  margin:0 0 18px;
  max-width: 68ch;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-meta{
  margin-top:18px;
  display:flex; gap:12px; flex-wrap:wrap;
  color:var(--faint);
  font-size:13px;
}
.meta-item{
  border:1px solid rgba(233,238,246,.10);
  background:rgba(255,255,255,.02);
  border-radius:999px;
  padding:10px 12px;
}

.card{
  border:1px solid rgba(233,238,246,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: var(--radius2);
  padding:22px;
  box-shadow: var(--shadow);
}
.card h3{
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.2;
}
.kpi{
  border:1px solid rgba(233,238,246,.10);
  background:rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}
.kpi b{display:block; font-size:16px}
.kpi span{
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

.section-title{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}
.section-title h2{
  margin: 18px;;
  font-size: clamp(32px, 4.5vw, 48px);
  letter-spacing:-.3px;
}
.section-title p{
  max-width: 820px;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

.cols-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:18px;
}
@media (max-width: 980px){ .cols-3{grid-template-columns:1fr} }

.cap{position:relative; overflow:hidden}
.cap:before{
  content:""; position:absolute; inset:-60%;
  background: radial-gradient(circle at 20% 20%, rgba(45,116,156,.14), transparent 40%);
  transform: rotate(18deg);
  pointer-events:none;
}
.cap .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
  border:1px solid rgba(233,238,246,.10);
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.03);
}
.sublogo{
  margin-bottom: 16px;
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
}

.sublogo img{
  height: 22px;
  width: auto;
  display:block;
}

.card:hover .sublogo{
  opacity: 1;
  transform: translateY(-2px);
}
.cap .icon{
  width:44px; height:44px; border-radius:16px;
  background:rgba(45,116,156,.16);
  border:1px solid rgba(45,116,156,.30);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.cap .icon.lumina{background:rgba(198,1,107,.14); border-color:rgba(198,1,107,.32)}
.cap ul{padding-left:18px; margin:12px 0 0; color:var(--muted); line-height:1.55}
.cap li{margin:6px 0}
.cap .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

.band{
  margin-top:18px;
  display:flex; gap:12px; flex-wrap:wrap;
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(233,238,246,.10);
  background: linear-gradient(135deg, rgba(45,116,156,.14), rgba(198,1,107,.10));
}

.problem{
  /* Ahora esta sección irá en LIGHT (ver .theme-light) */
  border-top:1px solid var(--light-line);
  border-bottom:1px solid var(--light-line);
}

/* Integración ahora alterna a LIGHT (ver .theme-light). Mantengo solo bordes sutiles. */
.integration{
  border-top:1px solid var(--light-line);
  border-bottom:1px solid var(--light-line);
}
.integr-grid{
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap:22px; align-items:center;
}
@media (max-width: 980px){ .integr-grid{grid-template-columns:1fr} }

.bullets{display:grid; gap:10px; margin-top:12px}
.bullet{
  display:flex; gap:10px;
  padding:12px 12px;
  border:1px solid rgba(233,238,246,.10);
  background:rgba(0,0,0,.16);
  border-radius:16px;
  color:var(--muted);
}
.check{
  width:18px; height:18px; border-radius:6px;
  background:rgba(35,196,131,.16);
  border:1px solid rgba(35,196,131,.35);
  margin-top:2px;
  flex:0 0 auto;
}

/* ==========================================================
   THEMES: alternancia DARK / LIGHT por sección
   - DARK: usa tokens base (texto blanco)
   - LIGHT: fondo blanco, texto negro, títulos en gradiente de marca
   ========================================================== */

.theme-dark{
  color: var(--text);
}

/* LIGHT: patrón sutil + velo para look premium */
.theme-light{
  background: var(--light-bg);
  color: var(--light-text);
  position:relative;
  overflow:hidden;
}

/* Patrón + halos */
.theme-light::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 0%, var(--light-pat-1), transparent 60%),
    radial-gradient(900px 420px at 82% 0%, var(--light-pat-2), transparent 60%),
    linear-gradient(to right, var(--light-pat-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--light-pat-line) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    44px 44px,
    44px 44px;
  opacity:.55;
}

/* Velo para que el patrón no compita con el contenido */
.theme-light::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.94));
}

/* Aseguro contenido sobre pseudo-elementos */
.theme-light > .wrap{
  position:relative;
  z-index:1;
}

/* Títulos (h2) en gradiente SOLO en light */
.theme-light .section-title h2,
.theme-light h2{
  background: var(--brand-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Subrayado premium opcional bajo h2 */
.theme-light .section-title h2{
  position:relative;
}
.theme-light .section-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width: clamp(120px, 22vw, 220px);
  height:4px;
  border-radius:999px;
  background: var(--brand-grad);
  opacity:.40;
}

/* Textos en light */
.theme-light .section-title p,
.theme-light p,
.theme-light .fine{
  color: var(--light-muted);
}

/* Pills en light */
.theme-light .pill{
  border-color: var(--light-line);
  background: rgba(2,6,23,.03);
  color: var(--light-muted);
}

/* Botones en light */
.theme-light .btn{
  border-color: var(--light-line);
  background: rgba(2,6,23,.03);
  color: var(--light-text);
}
.theme-light .btn:hover{
  background: rgba(2,6,23,.05);
  border-color: rgba(15,23,42,.18);
}
.theme-light .btn.primary{
  border-color: rgba(45,116,156,.45);
  background: linear-gradient(135deg, rgba(45,116,156,.95), rgba(198,1,107,.80));
  color:#fff;
  box-shadow: 0 18px 55px rgba(45,116,156,.20);
}

/* Cards en light */
.theme-light .card{
  border: 1px solid var(--light-line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  box-shadow: var(--light-shadow);
}
.theme-light .card p,
.theme-light .cap ul{
  color: var(--light-muted);
}

/* KPIs en light */
.theme-light .kpi{
  border-color: var(--light-line);
  background: rgba(2,6,23,.02);
}
.theme-light .kpi span{ color: var(--light-faint); }

/* Tags en light */
.theme-light .cap .tag{
  color: var(--light-muted);
  border-color: var(--light-line);
  background: rgba(2,6,23,.02);
}

/* Bullets / checks en light */
.theme-light .bullet{
  border-color: var(--light-line);
  background: rgba(2,6,23,.02);
  color: var(--light-muted);
}
.theme-light .check{
  background: rgba(35,196,131,.10);
  border-color: rgba(35,196,131,.25);
}

/* SVG (integración) en light: fuerza textos y líneas a negro/neutral */
.theme-light svg text{ fill: var(--light-text) !important; }
.theme-light svg [stroke="rgba(233,238,246,.18)"],
.theme-light svg [stroke="rgba(233,238,246,.16)"],
.theme-light svg [stroke="rgba(233,238,246,.12)"]{
  stroke: rgba(15,23,42,.18) !important;
}
.theme-light svg [fill="#e9eef6"]{ fill: var(--light-text) !important; }
.theme-light svg [fill="#b6c2d6"]{ fill: var(--light-muted) !important; }

/* Inputs dentro de secciones light (por si se reusan) */
.theme-light input,
.theme-light textarea{
  border:1px solid var(--light-line);
  background:#fff;
  color: var(--light-text);
}
.theme-light input::placeholder,
.theme-light textarea::placeholder{
  color: rgba(15,23,42,.45);
}
/* Footer links */
.footlinks{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:14px; margin-top:10px;
}
.footlinks a{color: var(--light-muted)}
.footlinks a:hover{color: var(--light-text)}

/* Fine text general */
.fine{color:var(--faint); font-size:12px; line-height:1.4}

/* Footer base */
footer{
  padding:50px 0 34px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:22px;
}
@media (max-width: 980px){ .footer-grid{grid-template-columns:1fr} }

.field{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
input, textarea{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(233,238,246,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
textarea{min-height:110px; resize:vertical}
/* =========================
   FOOTER OSCURO ELEGANTE
========================= */

.site-footer{
  background: #0f151a;
  color: rgba(255,255,255,.78);
  padding: 64px 0 28px;
  position: relative;
  overflow: hidden;
}


.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(45,116,156,.22), transparent 60%),
    radial-gradient(900px 420px at 88% 10%, rgba(198,1,107,.18), transparent 60%);
  pointer-events:none;
}

.site-footer .container{
  position: relative;
  z-index: 1;
}

.site-footer .container{
  position: relative;
  z-index: 1;

  /* NUEVO: margen interno lateral */
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 60px; /* ajusta: 40px / 60px / 80px */
}


.footer-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
  padding: 28px 28px;
  border-radius: 20px;

  /* NUEVO FONDO LIGHT */
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  margin-bottom: 40px;
}

.footer-cta__text h3{
  margin: 0 0 8px 0;
  color: #0f151a;   /* texto oscuro */
  font-size: clamp(18px, 2.0vw, 24px);
  line-height: 1.15;
}

.footer-cta__text p{
  margin: 0;
  color: rgba(0,0,0,.65);
  max-width: 58ch;
}

/* acciones */
.footer-cta__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Si ya tienes estilos .btn, esto se acopla.
   Si no, aquí hay base para que se vean bien. */
.site-footer .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 600;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}

.site-footer .btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.site-footer .btn-primary{
  color:#fff;
  background: linear-gradient(90deg, #2D749C, #C6016B);
  border: 1px solid rgba(255,255,255,.10);
}

.site-footer .btn-ghost{
  color: #0f151a;
  background: #f3f5f7;
  border: 1px solid rgba(0,0,0,.10);
}

/* Grid */
.footer-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 22px;
  padding: 18px 0 18px;
}

.footer-col h4{
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 8px;
}

.footer-col a{
  color: rgba(255,255,255,.74);
  text-decoration:none;
  transition: color .2s ease;
}

.footer-col a:hover{
  color:#fff;
}

/* Marca */
.footer-logo{
  font-weight: 800;
  font-size: 18px;
  color:#fff;
  margin-bottom: 10px;
}

.footer-tagline{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,.68);
  max-width: 50ch;
}

.footer-social{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-muted{
  color: rgba(255,255,255,.58);
}

/* Bottom */
.footer-bottom{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}

.footer-bottom__links{
  display:flex;
  gap: 14px;
}

.footer-bottom a{
  color: rgba(255,255,255,.62);
  text-decoration:none;
}

.footer-bottom a:hover{
  color:#fff;
}

/* Responsive */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
  .footer-cta{
    flex-direction: column;
    align-items:flex-start;
  }
}

@media (max-width: 560px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== Scroll reveal (safe) ===== */
/* Por defecto, SIEMPRE visible (si JS falla, NO se rompe la página) */
.reveal{
  opacity: 1;
  transform: none;
}

/* Solo ocultamos si JS está activo */
.js .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
.js .reveal[data-delay="1"]{ transition-delay: .08s; }
.js .reveal[data-delay="2"]{ transition-delay: .16s; }
.js .reveal[data-delay="3"]{ transition-delay: .24s; }
.js .reveal[data-delay="4"]{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ===== Hero card micro-hover (premium) ===== */
.hero .card{
  position: relative;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Halo suave encima (no invade) */
.hero .card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  background:
    radial-gradient(520px 240px at 30% 20%, rgba(45,116,156,.22), transparent 60%),
    radial-gradient(520px 240px at 80% 50%, rgba(198,1,107,.18), transparent 60%);
  filter: blur(2px);
}

/* Hover elegante */
.hero .card:hover{
  transform: translateY(-3px) rotateX(1deg) rotateY(-1deg);
  border-color: rgba(233,238,246,.18);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}

.hero .card:hover::after{
  opacity: 1;
}

/* Focus accesible (si navegan con teclado) */
.hero .card:focus-within{
  transform: translateY(-3px);
  border-color: rgba(45,116,156,.45);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero .card,
  .hero .card::after{
    transition:none !important;
  }
  .hero .card:hover{
    transform:none !important;
  }
}
/* Logos dentro de las cards del home */
.sublogo{
  margin-bottom: 20px;
}

.sublogo .card-logo{
  width: 100%;
  max-width: 420px;   /* 👈 aquí controlas tamaño */
  height: auto;
  display: block;
}

.sublogo{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* o center si lo quieres centrado */
}

/* En pantallas grandes los hacemos un poco más grandes */
@media (min-width: 1200px){
  .card-logo{
    height: 100px;
  }
}
/* Sección problema - título grande */
.problem .section-title h2{
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.6px;
}

/* Párrafo debajo del título */
.problem .section-title p{
  max-width: 820px;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}
/* HERO CON VIDEO (sin romper layout) */
.hero-video{
  position: relative;
  overflow: hidden;
}

/* Video */
.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay oscuro */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7,11,17,.70),
    rgba(7,11,17,.88)
  );
  z-index: 1;
}

/* Todo el contenido encima */
.hero-video > .wrap{
  position: relative;
  z-index: 2;
}

.hero-video{
  position: relative;
  overflow: hidden;
  background: #070b11; /* fallback si el video tarda */
}

/* evita micro espacios / baseline */
.hero-bg-video{
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translateZ(0);
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.display-title{
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ===============================
   FORMULARIO LEAD ESTRATÉGICO (v2)
   - Más compacto
   - Mejor jerarquía y respiración
   - Focus/hover premium
================================= */

.contact-lead{
  padding: 56px 0 64px;  /* antes 90px */
}

/* Title block (hero) un poco más compacto */
.hero-title{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 10px;
}

.hero-title h2{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.2vw, 52px); /* más balanceado */
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-title p{
  max-width: 70ch;
  margin: 0 auto 18px;
  line-height: 1.65;
}

/* Logo en hero */
.hero-logo{
  display:flex;
  justify-content:center;
  margin-bottom: 16px; /* antes 28px */
}

.hero-logo img{
  height: 52px;       /* antes 64px */
  width: auto;
  opacity: .95;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

.hero-logo img:hover{
  transform: translateY(-2px);
  opacity: 1;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.25));
}

/* Card del formulario */
.contact-card{
  margin-top: 18px;     /* antes 30px */
  padding: 30px;        /* antes 40px */
  border-radius: 22px;
}

/* Grid */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;             /* antes 22px */
}

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

/* Labels */
.field label{
  font-size:13px;       /* un pelín más fino */
  font-weight:650;
  color:var(--muted);
  letter-spacing: .01em;
}

/* Inputs */
.field input,
.field select,
.field textarea{
  margin-top:6px;
  padding:13px 14px;    /* un poco más compacto */
  border-radius:14px;
  border:1px solid rgba(233,238,246,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:15px;
  line-height: 1.4;
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
}

/* Hover sutil (premium) */
.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color: rgba(233,238,246,.18);
  background: rgba(255,255,255,.045);
}

/* Focus */
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(45,116,156,.65);
  box-shadow: 0 0 0 4px rgba(45,116,156,.16);
  outline: none;
}

/* Textarea más controlada */
.field textarea{
  min-height: 120px;
  resize: vertical;
}

/* Notes */
.input-note{
  font-size:12px;
  color:var(--faint);
  margin-top:6px;
  display:block;
  line-height: 1.45;
}

/* Radios */
.radio-group{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
  margin-top:10px;
}

.radio-group label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--muted);
  line-height: 1.35;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(233,238,246,.10);
  background: rgba(255,255,255,.02);
  transition: transform .12s ease, border-color .18s ease, background .18s ease;
}

.radio-group label:hover{
  transform: translateY(-1px);
  border-color: rgba(233,238,246,.16);
  background: rgba(255,255,255,.03);
}

.radio-group input{
  margin-top: 2px;
  accent-color: var(--accent);
}

/* Consent */
.consent{
  margin-top:20px; /* antes 28px */
  font-size:13px;
  color:var(--faint);
  line-height: 1.5;
}

/* CTA */
.form-actions{
  margin-top:18px; /* antes 26px */
}

.form-actions .btn{
  width:100%;
  padding:15px 16px; /* un pelín más compacto */
  font-size:16px;
  border-radius: 16px;
}

/* Responsive */
@media (max-width: 980px){
  .contact-lead{ padding: 48px 0 56px; }
  .contact-card{ padding: 24px; }
  .form-grid{ grid-template-columns:1fr; gap:16px; }
  .radio-group{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .hero-logo img{ height: 46px; }
  .hero-title h2{ font-size: clamp(30px, 7vw, 40px); }
}

/* =========================
   CONTACT FORM MÁS HORIZONTAL
========================= */

/* Card más ancha */
.contact-card{
  max-width: 1100px;     /* sube ancho */
  margin-left: auto;
  margin-right: auto;
}

/* En pantallas grandes: 3 columnas */
@media (min-width: 1100px){
  .form-grid{
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas */
    gap: 16px 18px;
  }

  /* Helpers para spans */
  .span-2{ grid-column: span 2; }
  .span-3{ grid-column: 1 / -1; }

  /* Por defecto, deja de forzar full en escritorio */
  .form-grid .full{
    grid-column: span 1;
  }
}