/* sitio.css · DIRECCIÓN B "Azul profundo técnico" (aplicada 2026-10-01 con professional-design-system,
   design-taste-frontend y web-design-guidelines).
   Reglas del sistema:
   - Un solo acento de marca: azul marino. Los colores del semáforo SOLO comunican riesgo (nunca en marca, botones ni foco).
   - Tipografía: Inter (autoalojada, OFL), dos pesos: 400 y 600.
   - Esquinas: 8 px en controles (botones, campos), 12 px en contenedores (formularios, tarjetas, ventana). Nada más.
   - Modo claro y oscuro por preferencia del sistema; el hero es oscuro en ambos (mapa de fondo).
   - Movimiento solo con propósito y nunca con prefers-reduced-motion. */
@font-face{font-family:'Inter';src:url('/fuentes/inter-latin-var.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
  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{
  color-scheme:light dark;
  --marca:#1e3a8a; --marca-osc:#172f70; --marca-suave:#e7edfb; --boton:#1e3a8a; --boton-hover:#172f70;
  --foco:#2563eb;
  --tinta:#0b1630; --texto:#1f2a3d; --tenue:#4a5568; --linea:#dbe2ec;
  --fondo:#fbfcfd; --fondo-2:#f1f4f9; --superficie:#ffffff;
  --enc:#0a1630; --enc-texto:#dbe5f5;
  --sombra:0 1px 2px rgba(10,22,48,.06),0 8px 24px rgba(10,22,48,.08);
  --fuente:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --peso-fuerte:600;
  --r-control:8px; --r-caja:12px; --ancho:1160px;
}
@media (prefers-color-scheme:dark){
  :root{
    --marca:#9db8ff; --marca-osc:#c2d3ff; --marca-suave:#17233d; --boton:#3157c8; --boton-hover:#2747a8; --foco:#8fb0ff;
    --tinta:#eef2f8; --texto:#d4dce8; --tenue:#a6b2c4; --linea:#26344d;
    --fondo:#0b1220; --fondo-2:#101a2c; --superficie:#131e33;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;font-family:var(--fuente);color:var(--texto);background:var(--fondo);line-height:1.6;font-size:17px;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--marca);text-underline-offset:3px}
a:hover{color:var(--marca-osc)}
h1,h2,h3{color:var(--tinta);line-height:1.2;font-weight:var(--peso-fuerte);text-wrap:balance}
h1{font-size:clamp(2rem,3.6vw,2.75rem);letter-spacing:-.02em;margin:0 0 .75rem}
h2{font-size:clamp(1.45rem,2.4vw,1.9rem);letter-spacing:-.01em;margin:0 0 .9rem}
h3{font-size:1.06rem;margin:0 0 .3rem}
p{margin:0 0 1rem}
.ancho{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--superficie);color:var(--tinta);padding:8px 12px;border-radius:var(--r-control);z-index:20}
.saltar:focus{left:12px}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:2px}
.tenue{color:var(--tenue)}
.nota{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--r-caja);padding:12px 16px;color:var(--texto)}
.aviso-error{color:#b42318}
@media (prefers-color-scheme:dark){ .aviso-error{color:#ffb4a8} }
.ico{width:22px;height:22px;flex:none}

/* ---------- botones (nunca colores del semáforo) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1.5px solid transparent;border-radius:var(--r-control);
  padding:.6rem 1.1rem;font:inherit;font-weight:var(--peso-fuerte);text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap;touch-action:manipulation}
.btn-primario{background:var(--boton);color:#fff}
.btn-primario:hover{background:var(--boton-hover);color:#fff}
.btn-secundario{background:transparent;color:var(--marca);border-color:currentColor}
.btn-secundario:hover{background:var(--marca-suave)}
.btn-cta{background:#fff;color:var(--enc);min-height:40px;padding:.45rem .9rem}
.btn-cta:hover{background:#dbe5f5;color:var(--enc)}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s ease,transform .1s ease}
  .btn:active{transform:translateY(1px)}
}

/* ---------- encabezado ---------- */
.sitio-enc{position:sticky;top:0;z-index:10;background:var(--enc);color:var(--enc-texto);display:flex;align-items:center;gap:18px;padding:10px 20px;min-height:60px}
.marca{color:#fff;font-weight:var(--peso-fuerte);font-size:1.06rem;text-decoration:none;white-space:nowrap;margin-right:auto;letter-spacing:.01em}
.nav-escritorio{display:flex;gap:2px}
.nav-escritorio a,.nav-movil nav a{color:var(--enc-texto);text-decoration:none;padding:.5rem .75rem;border-radius:var(--r-control);font-size:.94rem}
.nav-escritorio a:hover,.nav-escritorio a[aria-current="page"]{background:#ffffff1a;color:#fff}
.sitio-enc :focus-visible{outline-color:#8fb0ff}
.idioma{color:var(--enc-texto);font-size:.9rem}
.nav-movil{display:none}
.nav-movil summary{list-style:none;cursor:pointer;color:#fff;border:1px solid #ffffff55;border-radius:var(--r-control);padding:.5rem .8rem;min-height:44px;display:flex;align-items:center}
.nav-movil summary::-webkit-details-marker{display:none}
.nav-movil nav{position:absolute;right:12px;top:62px;background:var(--enc);border-radius:var(--r-caja);padding:8px;display:flex;flex-direction:column;min-width:230px;box-shadow:0 12px 30px #0007}
@media (max-width:900px){
  .nav-escritorio,.idioma,.enc-cta{display:none}
  .nav-movil{display:block}
  .nav-movil nav a{padding:.8rem .9rem}
}

/* ---------- inicio: hero (oscuro en ambos modos: el mapa es el fondo) ---------- */
.hero{position:relative;overflow:hidden;background:#0a1630;color:#fff;padding:56px 0 64px}
.hero-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.hero-velo{position:absolute;inset:0;background:linear-gradient(100deg,#0a1630f5 0%,#0a1630dc 50%,#1e3a8a4d 100%)}
.hero-contenido{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero h1{color:#fff;max-width:20ch}
.hero-sub{font-size:1.12rem;max-width:46ch;color:#d6e0f0;margin-bottom:1.4rem}
.buscador{background:var(--superficie);color:var(--texto);border-radius:var(--r-caja);padding:16px;max-width:640px;box-shadow:0 20px 50px #0009;border:1px solid #c7d2e5}
@media (prefers-color-scheme:dark){ .buscador{border-color:var(--linea)} }
.buscador-label{display:block;font-size:.9rem;font-weight:var(--peso-fuerte);color:var(--tinta);margin:0 2px 6px}
.buscador-fila{display:flex;gap:8px}
.buscador input{flex:1;min-width:0;min-height:48px;font:inherit;font-size:1rem;padding:.7rem .85rem;border:1px solid #94a3b8;border-radius:var(--r-control);color:var(--tinta);background:var(--superficie)}
.buscador input::placeholder{color:#6b7689}
.buscador input:focus-visible{outline:3px solid var(--foco);outline-offset:1px;border-color:var(--foco)}
.buscador-extra{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:.95rem}
.ayuda{font-size:.86rem;color:var(--tenue);margin:8px 2px 0}
#resultados ul.res{list-style:none;padding:0;margin:8px 0 0}
#resultados ul.res a{display:block;padding:.65rem .75rem;border:1px solid var(--linea);border-radius:var(--r-control);margin-top:6px;text-decoration:none;color:var(--tinta)}
#resultados ul.res a:hover{background:var(--fondo-2)}
@media (max-width:600px){ .hero{padding:32px 0 40px} .buscador-fila{flex-direction:column} .buscador .btn{width:100%} }

/* ventana de ejemplo (captura de la herramienta: siempre clara) */
.ventana{position:relative;display:block;color:#1f2a3d;text-decoration:none;border-radius:var(--r-caja);overflow:hidden;background:#fff;box-shadow:0 24px 60px #0009;outline-offset:4px}
.ventana-mapa{position:relative;display:block;aspect-ratio:16/10;background:#f2efe8}
.ventana-mapa img{display:block;width:100%;height:100%;object-fit:cover}
.ventana-tag{position:absolute;left:12px;top:12px;background:#0a1630d9;color:#fff;font-size:.76rem;font-weight:var(--peso-fuerte);border-radius:var(--r-control);padding:.2rem .55rem}
.ventana-pin{position:absolute;left:50%;top:50%;width:36px;height:46px;margin:-46px 0 0 -18px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.ventana-card{display:block;margin:-46px 14px 14px;position:relative;background:#fff;border:1px solid #dbe2ec;border-radius:var(--r-caja);padding:12px 14px;box-shadow:0 6px 18px rgba(10,22,48,.12);font-size:.86rem;line-height:1.35}
.vc-sem{display:inline-flex;align-items:center;gap:7px;font-weight:var(--peso-fuerte);color:#0b1630}
.vc-sem i,.vc-p i,.vc-alerta i{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.vc-tit{display:block;margin:4px 0 8px;color:#0b1630;font-weight:var(--peso-fuerte)}
.vc-puertas{display:grid;gap:3px;border-top:1px solid #dbe2ec;padding-top:7px}
.vc-p{display:flex;align-items:center;gap:7px}
.vc-p b{font-weight:var(--peso-fuerte);color:#0b1630;min-width:6.6em}
.vc-p span{color:#4a5568}
.vc-alerta{display:flex;align-items:center;gap:7px;margin-top:7px;border-top:1px solid #dbe2ec;padding-top:7px;color:#0b1630}
.vc-alerta em{margin-left:auto;font-style:normal;font-size:.78rem;color:#4a5568;border:1px solid #dbe2ec;border-radius:var(--r-control);padding:.05rem .5rem;white-space:nowrap}
.vc-pie{display:block;margin-top:8px;font-size:.78rem;color:#4a5568}
.vc-pie u{color:#1e3a8a;text-decoration-thickness:1px}
@media (prefers-reduced-motion:no-preference){
  .ventana-pin{animation:vPinCae .5s cubic-bezier(.3,1.5,.6,1) .45s both}
  .ventana-card{animation:vCardSube .45s ease-out 1s both}
  .ventana{transition:transform .2s ease} .ventana:hover{transform:translateY(-3px)}
}
@keyframes vPinCae{0%{transform:translateY(-36px);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes vCardSube{0%{transform:translateY(12px);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:28px} .ventana{max-width:560px} }

/* franja de fuentes (debajo del hero, no dentro) */
.franja{background:var(--fondo-2);border-bottom:1px solid var(--linea)}
.franja-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-top:16px;padding-bottom:16px;font-size:.92rem}
.franja-t{color:var(--tenue)}
.franja ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;color:var(--tinta);font-weight:var(--peso-fuerte)}
.franja a{margin-left:auto;font-size:.9rem}
@media (max-width:700px){ .franja a{margin-left:0} }

/* bloques */
.bloque{padding:64px 20px}
.banda{background:var(--fondo-2)}
/* pasos en línea (sin tarjetas) */
.pasos-linea{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.pasos-linea::before{content:"";position:absolute;left:22px;right:22px;top:22px;border-top:1.5px solid var(--linea)}
.pasos-linea li{position:relative}
.paso-ico{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--superficie);border:1.5px solid var(--linea);color:var(--marca);margin-bottom:12px}
.pasos-linea p{color:var(--tenue);margin:0}
@media (max-width:820px){
  .pasos-linea{grid-template-columns:1fr;gap:22px}
  .pasos-linea::before{left:21px;right:auto;top:22px;bottom:22px;border-top:0;border-left:1.5px solid var(--linea)}
  .pasos-linea li{display:grid;grid-template-columns:44px 1fr;column-gap:16px}
  .paso-ico{grid-row:span 2;margin:0}
}
/* lista con íconos en dos columnas */
.lista-ico{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 48px}
.lista-ico li{display:flex;gap:14px;align-items:flex-start}
.lista-ico .ico,.alcance-serv .ico{width:40px;height:40px;padding:9px;border-radius:var(--r-control);background:var(--marca-suave);color:var(--marca)}
.lista-ico p,.alcance-serv p{color:var(--tenue);margin:0}
@media (max-width:760px){ .lista-ico{grid-template-columns:1fr} }
/* alcance: mensaje + servicios */
.alcance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.alcance-txt p{font-size:1.05rem;max-width:52ch}
.alcance-serv{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:22px}
.alcance-serv li{display:flex;gap:14px;align-items:flex-start}
@media (max-width:860px){ .alcance{grid-template-columns:1fr;gap:28px} }
/* preguntas frecuentes plegables (el texto está en el DOM) */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1.04rem}
.faq summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--tenue);border-bottom:2px solid var(--tenue);transform:rotate(45deg);margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details p{color:var(--texto);margin:0 2px 18px;max-width:70ch}
@media (prefers-reduced-motion:no-preference){ .faq summary::after{transition:transform .15s ease} }
/* guías */
.lista-guias{list-style:none;padding:0;margin:0}
.lista-guias li{border-top:1px solid var(--linea);padding:16px 0}
.lista-guias a{font-weight:var(--peso-fuerte);font-size:1.06rem}
.lista-guias p{margin:.3rem 0 0;color:var(--tenue)}
/* llamada final */
.cta-banda{background:var(--fondo-2);border-top:1px solid var(--linea)}
.cta-final{text-align:center;padding-top:56px;padding-bottom:60px}
.cta-final p{color:var(--tenue)}
.cta-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
/* tarjetas genéricas (Cómo funciona, Contacto): contenedores de 12 px */
.rejilla{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rejilla li{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-caja);padding:18px}
.rejilla li p:last-child{margin:0}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
.pasos{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:12px;counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:36px 1fr;column-gap:14px}
.pasos li::before{content:counter(paso);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--marca-suave);color:var(--marca);font-weight:var(--peso-fuerte)}
.pasos li p{margin:0;color:var(--tenue)}
@media (max-width:860px){ .rejilla,.rejilla.tres{grid-template-columns:1fr} .bloque{padding:44px 20px} }

/* páginas de texto */
.texto{max-width:820px;padding-top:28px;padding-bottom:56px}
.texto section{margin-top:2.2rem}
.entradilla{font-size:1.12rem;color:var(--texto)}
.migas{font-size:.9rem;color:var(--tenue);margin-bottom:.8rem}
.indice{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--r-caja);padding:12px 18px;margin:1rem 0}
.indice ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0}
.indice-t{font-size:1rem;margin:0 0 .4rem}
.indice ol{margin:0;padding-left:20px}
.etiq{font-size:.82rem;color:var(--tenue);margin:0 0 .3rem}
.semaforo{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:start}
.semaforo dd{margin:0}
.chip{display:inline-flex;align-items:center;gap:8px;min-width:170px;font-weight:var(--peso-fuerte);color:var(--tinta);border:1px solid var(--linea);border-radius:var(--r-control);padding:6px 10px 6px 6px;background:var(--superficie)}
.chip i{width:22px;height:22px;border-radius:6px;flex:none}
@media (max-width:640px){ .semaforo{grid-template-columns:1fr} }
.tabla{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--tenue);border-bottom:2px solid var(--linea);padding:8px 7px;font-weight:var(--peso-fuerte)}
td{border-bottom:1px solid var(--linea);padding:8px 7px;vertical-align:top}
tr.grp th{background:var(--fondo-2);color:var(--tinta)}
td .rev{display:block;color:var(--tenue);font-size:.85rem}
.conf{font-weight:var(--peso-fuerte)}
.conf-alta{color:#166534}.conf-media{color:#92400e}.conf-baja{color:#991b1b}
@media (prefers-color-scheme:dark){ .conf-alta{color:#86efac}.conf-media{color:#fcd34d}.conf-baja{color:#fca5a5} }
@media (max-width:640px){ th:nth-child(3),td:nth-child(3){display:none} }
.contacto-vias{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}

/* pie */
.sitio-pie{background:var(--enc);color:#c3cee0;padding:30px 0;font-size:.92rem}
.sitio-pie a{color:#e2e8f5}
.pie-enlaces{margin:0;display:flex;flex-wrap:wrap;gap:6px 22px}

/* ---- Embudo (2026-10-02): pregunta opcional "¿Qué vas a hacer?" en el buscador del inicio ---- */
.intencion-f{border:0;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.intencion-f legend{float:left;margin:0 6px 0 2px;padding:0;font-size:.86rem;color:var(--tenue)}
.intencion-f legend small{font-size:.8rem}
.intencion-f label{position:relative;display:inline-flex}
.buscador .intencion-f input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0}
.intencion-f span{display:inline-block;font-size:.86rem;padding:6px 12px;border:1px solid var(--linea);border-radius:999px;color:var(--marca);background:var(--superficie);cursor:pointer;min-height:34px;line-height:1.5}
.intencion-f input:checked+span{background:var(--boton);border-color:var(--boton);color:#fff}
.intencion-f input:focus-visible+span{outline:3px solid var(--foco);outline-offset:2px}
.intencion-f label:hover span{border-color:var(--marca)}

/* ---- /servicios: cuatro etapas ---- */
.etapas{list-style:none;margin:28px 0;padding:0;display:grid;gap:30px;counter-reset:etapa}
.etapas>li{border-top:1px solid var(--linea);padding-top:22px;scroll-margin-top:84px}
.etapa-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.etapa-h .ico{flex:none;width:40px;height:40px;padding:9px;border-radius:var(--r-control);background:var(--marca-suave);color:var(--marca)}
.etapa-h h2{margin:0 0 .2rem}.etapa-h p{margin:0;color:var(--tenue)}
.etapas ul{list-style:none;margin:14px 0 0 54px;padding:0;display:grid;gap:16px}
.etapas ul li{scroll-margin-top:84px}
.etapas ul h3{margin:0 0 .2rem}.etapas ul p{margin:0;color:var(--texto)}
@media (max-width:640px){ .etapas ul{margin-left:0} }
.guia-servicio{margin-top:10px;font-weight:var(--peso-fuerte)}