/* Táctico Legal — variante oscura. Negro tinta y azul, sin dorado.
   El bloque del modal (liquid glass) se concatena al final en styles.css. */

/* Fuentes auto-alojadas (antes venian de Google Fonts, una peticion externa
   que retrasaba el primer pintado). Solo el subconjunto latino, que cubre el
   espanol. Los archivos estan en assets/fonts/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("assets/fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0b0c10;
  --ink-2: #12141b;
  --ink-3: #171a23;
  --white: #f6f7fa;
  --muted: #9ca2b3;
  --muted-2: #6e7486;
  --blue: #005187;
  --blue-dark: #003c66;
  --blue-soft: #7fb2d6;
  --line: rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.2);
  --display: "Playfair Display", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;

  --glass-surface: linear-gradient(157deg, rgba(8,58,94,.52), rgba(4,14,26,.68));
  --glass-tint: rgba(255,255,255,.06);
  --glass-tint-2: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.14);
  --glass-line-2: rgba(255,255,255,.26);
  --glass-text: #eef0f8;
  --glass-muted: #9fb4c6;
  --paper: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
p { margin: 0; }
.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.skip-link { position: fixed; left: 12px; top: 10px; z-index: 999; padding: 10px 14px; background: var(--blue); color: white; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 80; height: 78px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 clamp(20px,4vw,60px); background: rgba(11,12,16,.86); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); }
.brand-logo { display: block; width: auto; height: 40px; filter: invert(1) brightness(1.5); }
.nav-links { display: flex; gap: 30px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.nav-links a { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--blue-soft); transition: right .25s; }
.nav-links a:hover::after { right: 0; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid rgba(125,180,215,.45); border-radius: 999px; background: linear-gradient(150deg, rgba(0,105,172,.98), rgba(0,58,98,.98)); color: white; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(0,40,70,.4); transition: transform .2s, box-shadow .2s; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 34px rgba(0,40,70,.5); }
.nav-cta .icon { width: 17px; height: 17px; }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 16px; height: 1px; margin: 4px auto; background: var(--white); }
.mobile-menu { position: fixed; top: 66px; left: 0; right: 0; z-index: 75; padding: 16px 20px 22px; background: var(--ink-2); border-bottom: 1px solid var(--line); box-shadow: 0 22px 50px rgba(0,0,0,.5); }
.mobile-menu a, .mobile-menu button { display: block; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--white); text-align: left; font-size: 15px; }
.mobile-menu button { color: var(--blue-soft); font-weight: 700; cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(36px,5vw,80px); align-items: center; padding: clamp(48px,7vw,96px) clamp(20px,4vw,60px) clamp(56px,7vw,88px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: var(--blue-soft); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 1px; background: currentColor; }
.hero h1 { font-size: clamp(42px,5.4vw,78px); }
.hero h1 em { color: var(--blue-soft); font-style: italic; }
.hero-lead { max-width: 480px; margin-top: 24px; color: var(--muted); font-size: clamp(16px,1.3vw,18px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 0 26px; border: 1px solid rgba(125,180,215,.45); border-radius: 999px; background: linear-gradient(150deg, rgba(0,105,172,.98), rgba(0,58,98,.98)); color: white; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px rgba(0,40,70,.45); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 20px 44px rgba(0,40,70,.55); }
.btn .icon { width: 18px; height: 18px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--white); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .2s, border-color .2s; }
.btn-ghost:hover { color: var(--blue-soft); border-color: var(--blue-soft); }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--muted-2); font-size: 13px; }
.hero-note b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font: 700 12px var(--display); color: var(--blue-soft); }
.video-actions { display: flex; justify-content: center; margin-top: 20px; }
.video-actions .btn { min-width: 200px; }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 16px; background: #000; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-cue { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,12,16,.75); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; pointer-events: none; }
.video-cue .icon { width: 15px; height: 15px; color: var(--blue-soft); }
/* Boton para activar el sonido. Ocupa el sitio del distintivo, que se oculta
   en cuanto el video arranca, asi que nunca coinciden. */
.video-sound { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(11,12,16,.82); backdrop-filter: blur(12px); color: var(--white); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.video-sound:hover, .video-sound:focus-visible { background: var(--blue); border-color: var(--blue); }
.video-sound .icon { width: 16px; height: 16px; color: var(--blue-soft); }
.video-sound:hover .icon, .video-sound:focus-visible .icon { color: var(--white); }

/* Franja de confianza */
.strip { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); background: var(--ink-2); }
.strip div { display: flex; align-items: center; gap: 16px; padding: 26px clamp(20px,4vw,60px); border-right: 1px solid var(--line); }
.strip div:last-child { border-right: 0; }
.strip strong { font: 700 30px var(--display); color: var(--blue-soft); }
.strip span { max-width: 160px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }

/* Secciones */
.section { padding: clamp(70px,8vw,120px) clamp(20px,4vw,60px); }
.section-head { max-width: 760px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section h2 { font-size: clamp(32px,4vw,56px); }
.section h2 em { color: var(--blue-soft); font-style: italic; }
.section-head > p { margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.case-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: clamp(36px,5vw,56px); }
.case-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); text-align: left; color: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.case-card:hover { transform: translateY(-2px); border-color: rgba(127,178,214,.5); background: var(--ink-3); }
.case-card .num { color: var(--blue-soft); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.case-card b { display: block; font: 700 19px/1.25 var(--display); }
.case-card p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.case-card .go { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue-soft); transition: background .2s, color .2s; }
.case-card:hover .go { background: var(--blue); color: white; }

.areas { background: var(--ink-2); border-block: 1px solid var(--line); }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1px; margin-top: clamp(36px,5vw,56px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.area { display: flex; flex-direction: column; gap: 14px; padding: 30px 26px 34px; background: var(--ink); transition: background .2s; }
.area:hover { background: var(--ink-3); }
.area .area-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; color: var(--blue-soft); }
.area .area-icon svg { width: 22px; height: 22px; }
.area h3 { font-size: 22px; }
.area p { color: var(--muted); font-size: 14px; }
.area button { margin-top: auto; padding-top: 14px; border: 0; background: none; color: var(--blue-soft); font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }

/* Una tarjeta por fila: las biografías necesitan el ancho completo. */
.team-grid { display: grid; gap: clamp(20px,3vw,28px); margin-top: clamp(36px,5vw,56px); }
.team-card { display: grid; grid-template-columns: minmax(0,.36fr) minmax(0,1fr); gap: clamp(22px,3vw,38px); align-items: center; padding: clamp(18px,2vw,26px); border: 1px solid var(--line); border-radius: 20px; background: var(--ink-2); }
.team-card.reverse { grid-template-columns: minmax(0,1fr) minmax(0,.36fr); }
.team-card picture { display: block; min-width: 0; }
.team-card.reverse picture { order: 2; }
.team-card img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; border-radius: 14px; filter: saturate(.85) contrast(1.02); }
.team-role { color: var(--blue-soft); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.team-card h3 { margin: 9px 0 12px; font-size: clamp(24px,2.2vw,30px); }
.team-card p { color: var(--muted); font-size: 14px; }
.team-card .team-lead { max-width: 56ch; color: var(--white); font-size: clamp(15px,1.25vw,17px); line-height: 1.55; }
.team-facts { display: grid; gap: 11px; margin: clamp(16px,2vw,22px) 0 0; padding-top: clamp(16px,2vw,22px); border-top: 1px solid var(--line); }
.team-facts > div { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr); gap: 3px 20px; align-items: baseline; }
.team-facts dt { color: var(--blue-soft); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.team-facts dd { margin: 0; max-width: 62ch; color: var(--muted); font-size: 14px; }
.team-card button { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--white); font-size: 12px; font-weight: 700; cursor: pointer; }
.team-card button:hover { color: var(--blue-soft); border-color: var(--blue-soft); }

.steps { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(36px,5vw,56px); border-top: 1px solid var(--line); }
.steps article { display: flex; flex-direction: column; min-height: 200px; padding: 26px clamp(18px,2.5vw,34px) 30px; border-right: 1px solid var(--line); }
.steps article:first-child { padding-left: 0; }
.steps article:last-child { border-right: 0; }
.steps span { color: var(--blue-soft); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.steps h3 { margin-top: auto; padding-top: 28px; font-size: 26px; }
.steps p { margin-top: 10px; color: var(--muted); font-size: 14px; }

/* Cierre */
.cta { position: relative; overflow: hidden; padding: clamp(70px,9vw,130px) clamp(20px,4vw,60px); border-top: 1px solid var(--line); text-align: center; background: radial-gradient(90% 120% at 50% 0%, rgba(0,81,135,.28), transparent 62%), var(--ink); }
.cta .eyebrow { justify-content: center; }
.cta h2 { font-size: clamp(40px,6vw,84px); }
.cta > p { max-width: 480px; margin: 20px auto 30px; color: var(--muted); font-size: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta-note { max-width: 480px; margin: 26px auto 0 !important; color: var(--muted-2); font-size: 12px; }

/* Footer */
.footer { padding: 50px clamp(20px,4vw,60px) 40px; border-top: 1px solid var(--line); background: var(--ink-2); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer-top p { font: 700 clamp(22px,2.6vw,32px)/1.15 var(--display); }
.footer-top p em { color: var(--blue-soft); font-style: italic; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.footer-contact a { color: var(--white); border-bottom: 1px solid var(--line-2); }
.footer-legal { margin-top: 22px; color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.footer-credit { margin-top: 14px; color: var(--muted-2); font-size: 11px; }
.footer-credit a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.footer-credit a:hover { color: var(--white); }

/* Flotantes */
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: linear-gradient(150deg, rgba(0,95,158,.92), rgba(0,52,88,.94)); backdrop-filter: blur(14px) saturate(150%); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 40px rgba(0,30,55,.42); cursor: pointer; transition: transform .2s; }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab .icon { width: 22px; height: 22px; }
.wa-fab b { font-size: 12px; }
.mobile-lead-bar { display: none; }

.motion-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready [data-reveal].visible, .motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; }
.rolling-number { display: inline-flex; position: relative; font-variant-numeric: tabular-nums; }
.rolling-number i { font: inherit; font-style: normal; letter-spacing: 0; }
.roll-window { display: inline-block; height: 1.2em; line-height: 1.2 !important; overflow: hidden; vertical-align: bottom; }
.roll-track, .roll-cell { display: block; line-height: 1.2 !important; }
.roll-cell { height: 1.2em; }
.roll-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1000px) {
  .nav { grid-template-columns: 1fr auto auto; }
  .nav-links { display: none; }
  .menu-button { display: block; }
  .hero { grid-template-columns: 1fr; }
  .case-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps article, .steps article:first-child { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps h3 { padding-top: 12px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 66px; }
  body { padding-bottom: 84px; }
  .nav { height: 66px; grid-template-columns: 1fr auto; padding-inline: 16px; }
  .nav-cta { display: none; }
  .hero { padding: 34px 16px 44px; }
  .hero h1 { font-size: clamp(34px,9.5vw,46px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .btn-ghost { align-self: flex-start; }
  .strip { grid-template-columns: 1fr; }
  .strip div { padding: 18px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .strip div:last-child { border-bottom: 0; }
  .section { padding-inline: 16px; }
  .team-card, .team-card.reverse { grid-template-columns: 1fr; }
  .team-card.reverse picture { order: 0; }
  .team-card img { aspect-ratio: 4/3; }
  .team-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .cta { padding-inline: 16px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .footer { padding-inline: 16px; padding-bottom: 110px; }
  .wa-fab { display: none; }
  .mobile-lead-bar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(6,26,44,.86); backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.5); }
  .mobile-lead-bar div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mobile-lead-bar b { font-size: 13px; }
  .mobile-lead-bar span { color: var(--muted); font-size: 11px; }
  .mobile-lead-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 17px; border: 1px solid rgba(125,180,215,.4); border-radius: 999px; background: linear-gradient(150deg, rgba(0,105,172,.98), rgba(0,58,98,.98)); color: white; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .mobile-lead-bar button .icon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Modal de captura — liquid glass en azul y tinta
   ------------------------------------------------------------------ */
.dialog-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(3,10,18,.72); backdrop-filter: blur(14px) saturate(120%); opacity: 0; transition: opacity .3s ease; }
.dialog-backdrop.open { opacity: 1; }

.lead-modal {
  position: fixed; top: 16px; right: 16px; bottom: 16px; z-index: 120;
  width: min(600px, calc(100% - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--glass-line); border-radius: 26px;
  background: var(--glass-surface);
  backdrop-filter: blur(44px) saturate(180%);
  -webkit-backdrop-filter: blur(44px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.06), 0 45px 100px rgba(2,10,20,.62);
  color: var(--glass-text);
  transform: translateX(calc(100% + 24px));
  transition: transform .42s cubic-bezier(.32,.72,0,1);
}
.lead-modal.open { transform: translateX(0); }
/* Reflejo especular superior y halo azul del cristal */
.lead-modal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 78% -8%, rgba(0,105,172,.4), transparent 62%), radial-gradient(90% 60% at 0% 100%, rgba(0,81,135,.16), transparent 70%); pointer-events: none; }
/* Bokeh: puntos de luz desenfocados que derivan despacio por detras del
   contenido. Dan la sensacion de profundidad sin restar legibilidad, porque
   van a baja opacidad y por debajo del texto (z-index 0 frente al 1). */
.lead-modal::after {
  /* inset 0, no negativo: lo que sobresale de la caja cuenta como
     contenido desplazable y hacia que el modal se pudiera desplazar
     solo, escondiendo su propia cabecera al enfocar un campo. */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 96px at 14% 15%, rgba(150,200,235,.36), transparent 66%),
    radial-gradient(circle 58px at 83% 8%,  rgba(0,155,235,.34),  transparent 66%),
    radial-gradient(circle 150px at 92% 68%, rgba(0,112,182,.36), transparent 66%),
    radial-gradient(circle 44px at 26% 85%, rgba(190,222,245,.28), transparent 66%),
    radial-gradient(circle 32px at 58% 38%, rgba(150,200,235,.22), transparent 66%),
    radial-gradient(circle 76px at 2% 55%,  rgba(0,88,146,.38),   transparent 66%),
    radial-gradient(circle 26px at 45% 11%, rgba(205,232,248,.26), transparent 66%),
    radial-gradient(circle 20px at 70% 92%, rgba(190,222,245,.22), transparent 66%);
  filter: blur(9px);
  animation: tl-bokeh 26s ease-in-out infinite alternate;
}
@keyframes tl-bokeh {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2.5%,-2%,0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .lead-modal::after { animation: none; } }

.lead-modal > * { position: relative; z-index: 1; }
/* Ninguna palabra larga debe salirse de su tarjeta. Con lang="es" el
   navegador parte por silabas ("Res-pon-sa-bi-li-dad") en vez de cortar
   a lo bruto, y overflow-wrap queda de ultimo recurso. */
.lead-modal, .lead-modal button, .lead-modal input, .lead-modal textarea,
.lead-modal label, .lead-modal legend, .lead-modal p, .lead-modal h2,
.lead-modal h3, .lead-modal b, .lead-modal small, .lead-modal span {
  min-width: 0; overflow-wrap: break-word; hyphens: auto;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lead-modal { background: linear-gradient(157deg, #0a3a5e, #04101d); }
  .dialog-backdrop { background: rgba(3,10,18,.88); }
}

.lead-header { display: flex; justify-content: space-between; gap: 24px; padding: 26px clamp(22px,4.5vw,40px) 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.lead-header p { margin: 0 0 8px; color: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lead-header h2 { margin: 0; font: 500 clamp(30px,3.6vw,40px)/1 var(--display); letter-spacing: -.03em; color: white; }
.close-button { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--glass-line); border-radius: 50%; background: var(--glass-tint); color: var(--glass-text); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.close-button:hover { background: var(--glass-tint-2); border-color: var(--glass-line-2); }

.progress { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 16px clamp(22px,4.5vw,40px) 0; }
.progress span { height: 3px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .35s, box-shadow .35s; }
.progress span.active, .progress span.done { background: linear-gradient(90deg, var(--blue-soft), var(--blue)); box-shadow: 0 0 14px rgba(0,105,172,.55); }

#legal-form, #lead-form { min-height: 0; display: flex; flex: 1; flex-direction: column; }
/* Un poco de aire abajo y un degradado en el borde inferior para que se
   note que el paso continua, en vez de parecer que el texto se corta. */
.lead-step { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px clamp(22px,4.5vw,40px) 30px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.lead-step.active { mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.lead-step.active:not(.has-overflow) { mask-image: none; -webkit-mask-image: none; }
.lead-step::-webkit-scrollbar { width: 8px; }
.lead-step::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(255,255,255,.2); background-clip: content-box; }
.step-kicker { margin: 0 0 10px; color: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lead-step h3 { margin: 0 0 20px; font: 500 clamp(28px,4vw,38px)/1 var(--display); letter-spacing: -.03em; color: white; }
.step-intro { margin: -12px 0 20px; color: var(--glass-muted); font-size: 14px; line-height: 1.5; }

.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.choice-grid button {
  display: grid; grid-template-rows: auto auto; gap: 5px; padding: 15px 16px;
  border: 1px solid var(--glass-line); border-radius: 15px;
  background: var(--glass-tint); backdrop-filter: blur(8px);
  color: var(--glass-text); text-align: left; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.choice-grid button > span { display: none; }
.choice-grid button b { font: 600 19px/1.15 var(--display); letter-spacing: -.01em; }
.choice-grid button small { color: var(--glass-muted); font-size: 12px; line-height: 1.4; }
.choice-grid button:hover { transform: translateY(-2px); background: var(--glass-tint-2); border-color: rgba(127,178,214,.5); }
.choice-grid button[aria-checked="true"] { background: linear-gradient(158deg, rgba(0,95,158,.42), rgba(0,81,135,.18)); border-color: rgba(125,180,215,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(0,40,70,.45); }
.choice-grid button[aria-checked="true"] small { color: #d3e4f0; }
.field-error { min-height: 18px; margin: 12px 0 0; color: #ff9d97; font-size: 12px; font-weight: 700; }

.segment-field { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.segment-field.compact { margin-top: 18px; }
.segment-field legend { margin-bottom: 9px; padding: 0; color: var(--glass-text); font-size: 12px; font-weight: 800; }
.segments { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255,255,255,.05); }
.segments button { flex: 1; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--glass-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.segments button:hover { color: white; }
.segments button[aria-checked="true"] { background: linear-gradient(150deg, rgba(0,105,172,.95), rgba(0,58,98,.95)); color: white; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(0,40,70,.4); }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; color: var(--glass-text); font-size: 12px; font-weight: 800; }
.form-grid label.full { grid-column: 1/-1; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row small { color: var(--glass-muted); font-size: 11px; font-weight: 600; }
.form-grid input, .form-grid textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--glass-line); border-radius: 13px;
  background: rgba(255,255,255,.05); backdrop-filter: blur(6px);
  color: white; font: 500 15px/1.45 var(--sans); outline: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: rgba(180,198,212,.55); font-weight: 400; }
.form-grid input:focus, .form-grid textarea:focus { border-color: rgba(125,180,215,.85); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(0,95,158,.25); }
.form-grid textarea { min-height: 84px; resize: vertical; }
.form-grid .invalid { border-color: rgba(255,140,132,.8); box-shadow: 0 0 0 3px rgba(255,120,110,.18); }
.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; color: var(--glass-muted); font-size: 12px; line-height: 1.55; cursor: pointer; }
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue-soft); }
.consent a { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 2px; }

.message-preview { margin-top: 18px; padding: 14px 16px 16px; border: 1px solid rgba(127,178,214,.28); border-radius: 15px; background: linear-gradient(158deg, rgba(0,95,158,.18), rgba(255,255,255,.04)); }
.preview-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.message-preview pre, .done-preview { margin: 0; white-space: pre-wrap; word-break: break-word; font: 500 13px/1.6 var(--sans); color: #e2ecf3; }
.done-preview { margin-top: 22px; padding: 16px; border: 1px solid var(--glass-line); border-radius: 15px; background: rgba(255,255,255,.05); }

.lead-done { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
.done-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border: 1px solid rgba(125,180,215,.5); border-radius: 50%; background: linear-gradient(150deg, rgba(0,105,172,.4), rgba(255,255,255,.06)); color: white; box-shadow: 0 12px 30px rgba(0,40,70,.4); }
.done-icon .icon { width: 26px; height: 26px; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }


/* ------------------------------------------------------------------
   Paso de envio: anillo de cuenta atras
   Es el patron de siempre para una espera con final conocido: un aro que
   se vacia en los 3 segundos, el numero en el centro y un halo que respira.
   Todo con stroke-dashoffset, que va bien en cualquier navegador.
   ------------------------------------------------------------------ */
.lead-sending { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; text-align: center; }
.lead-sending h3 { margin: 0 0 10px; }
.lead-sending .step-intro { margin: 0; max-width: 34ch; }
.sending-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.sending-stage { position: relative; display: grid; place-items: center; width: clamp(132px,36vw,158px); aspect-ratio: 1; margin-bottom: 28px; }
.sending-stage > * { grid-area: 1 / 1; }

.sending-halo { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(0,105,172,.5), transparent 68%); animation: tl-halo 2s ease-in-out infinite; }

.sending-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 5; }
.ring-progress {
  fill: none; stroke: var(--blue-soft); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 326.73;            /* 2 x PI x 52 */
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(127,178,214,.55));
}
.lead-step[data-step="3"].active .ring-progress { animation: tl-cuenta 3s linear forwards; }

/* Numero e icono apilados en un solo bloque: con margenes sueltos dentro de
   la misma celda de la rejilla se solapaban. */
/* Ocupa la celda entera: si se ajusta al contenido se queda del ancho del
   icono y el digito, que usa cifras tabulares y es mas ancho, sobresale. */
.sending-core { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sending-count { color: white; font: 700 clamp(36px,9.5vw,44px)/1 var(--sans); font-variant-numeric: tabular-nums; }
.sending-mark { width: 25px; height: 25px; color: var(--blue-soft); opacity: .75; }
.sending-count.tick { animation: tl-tick .45s cubic-bezier(.22,1,.36,1); }

@keyframes tl-cuenta { to { stroke-dashoffset: 326.73; } }
@keyframes tl-halo { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: .85; transform: scale(1.04); } }
@keyframes tl-tick { 0% { transform: scale(1.35); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }

/* Sin movimiento: el aro se queda completo y la cuenta sigue en numeros. */
@media (prefers-reduced-motion: reduce) {
  .lead-step[data-step="3"].active .ring-progress { animation: none; }
  .sending-halo, .sending-count.tick { animation: none; }
}

.lead-actions { display: flex; align-items: center; gap: 12px; padding: 16px clamp(22px,4.5vw,40px); border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.lead-actions > span { margin-left: auto; color: var(--glass-muted); font-size: 12px; }
.back-button, .next-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 800; transition: background .2s, box-shadow .2s, transform .2s; }
.back-button { border: 1px solid var(--glass-line); background: var(--glass-tint); color: var(--glass-text); }
.back-button:hover { background: var(--glass-tint-2); }
.next-button { border: 1px solid rgba(125,180,215,.45); background: linear-gradient(150deg, rgba(0,105,172,.98), rgba(0,58,98,.98)); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 14px 32px rgba(0,40,70,.45); }
.next-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 38px rgba(0,40,70,.55); }
.wa-submit .icon, .wa-link .icon { width: 18px; height: 18px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: calc(100% - 40px); padding: 12px 20px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(6,26,44,.84); backdrop-filter: blur(18px) saturate(150%); color: white; box-shadow: 0 14px 40px rgba(2,10,20,.45); font-size: 12px; font-weight: 700; opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: opacity .2s,transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }



/* ------------------------------------------------------------------
   Modal en pantallas estrechas. No habia ninguna regla y las rejillas
   se quedaban a dos columnas: en un movil de 375px la palabra
   "Responsabilidad" no cabia y se salia de su tarjeta.
   ------------------------------------------------------------------ */
@media (max-width: 620px) {
  .lead-modal { top: 10px; right: 10px; bottom: 10px; width: calc(100% - 20px); border-radius: 22px; }
  .lead-header { padding: 20px 20px 16px; gap: 14px; }
  .lead-header h2 { font-size: clamp(24px,6.4vw,30px); }
  .close-button { width: 38px; height: 38px; font-size: 20px; }
  .progress { padding: 13px 20px 0; }
  .lead-step { padding: 20px 20px 26px; }
  .lead-step h3 { font-size: clamp(24px,6.6vw,30px); margin-bottom: 16px; }

  /* Una tarjeta por fila: caben los titulos largos y se leen mejor. */
  .choice-grid { grid-template-columns: 1fr; gap: 8px; }
  .choice-grid button { grid-template-columns: 1fr; padding: 13px 15px; }
  .choice-grid button b { font-size: 17px; }

  .form-grid { grid-template-columns: 1fr; gap: 13px; }

  /* Tres opciones en fila no caben: se apilan. */
  .segments { flex-direction: column; border-radius: 16px; }
  .segments button { border-radius: 12px; min-height: 44px; }

  .lead-actions { gap: 10px; padding: 13px 20px; }
  /* El paso ya lo dice el titulillo de arriba: en la barra sobra. */
  .lead-actions > span { display: none; }
  /* "Volver" ocupa lo justo y el boton de envio se queda con el resto.
     El texto largo se recorta a "Enviar" para que no parta en dos lineas;
     el nombre completo sigue en el aria-label. */
  .back-button { flex: 0 0 auto; min-height: 46px; padding: 0 18px; }
  .next-button { flex: 1; min-height: 46px; padding: 0 14px; }
  .only-wide { display: none; }
  .done-actions { flex-direction: column; align-items: stretch; }
  .sending-stage { margin-bottom: 20px; }
}

/* ------------------------------------------------------------------
   Página legal (política de tratamiento de datos)
   ------------------------------------------------------------------ */
.legal-header { display: flex; align-items: center; height: 78px; padding: 0 clamp(20px,4vw,60px); border-bottom: 1px solid var(--line); }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(36px,5vw,64px) clamp(20px,4vw,32px) clamp(70px,9vw,120px); }
.legal-back { margin: 0 0 26px; font-size: 13px; font-weight: 700; }
.legal-back a { border-bottom: 1px solid currentColor; }
.legal-kicker { margin: 0 0 10px; color: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legal h1 { margin: 0; font: 700 clamp(32px,4.4vw,48px)/1.1 var(--display); letter-spacing: -.035em; }
.legal-meta { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.legal section { margin-top: 38px; }
.legal h2 { margin: 0 0 12px; font: 700 clamp(20px,2.1vw,25px)/1.3 var(--display); letter-spacing: -.02em; }
.legal p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--white); border-bottom: 1px solid var(--line-2); }
.legal a:hover { color: var(--blue-soft); border-color: var(--blue-soft); }
.legal strong { color: var(--white); font-weight: 700; }
.legal h3 { margin: 22px 0 10px; font: 700 17px/1.35 var(--display); letter-spacing: -.01em; }
.legal ol { margin: 0 0 14px; padding-left: 26px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal ol li { margin-bottom: 7px; }
.legal-alpha { list-style: lower-alpha; }
.legal-roman { list-style: lower-roman; }
.legal-roman-upper { list-style: upper-roman; }
.legal-contact { list-style: none; padding-left: 0; }
.legal-toc { margin: 30px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.legal-toc p { margin: 0 0 10px; color: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.legal-toc li { margin: 0; }
.legal-toc a { border-bottom: 0; color: var(--muted); }
.legal-toc a:hover { color: var(--white); }
.legal section { scroll-margin-top: 24px; }
@media (max-width: 560px) { .legal-toc ol { grid-template-columns: 1fr; } }
.legal-note { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Textos breves de apoyo: mayor contraste y peso. */
.hero-note, .hero-note b, .cta .cta-note,
.strip > div > span, .case-card p, .steps p,
.footer-contact, .footer-legal, .footer-credit, .footer-credit a,
.mobile-lead-bar span, .landing-header-note, .landing-microcopy,
.landing-chips li { color: #fff; font-weight: 700; }