/* Estilos de CUVAPI: base de la versión 3 + agregados del sitio. Se genera con _armar.py */

:root{
  --fondo:#ffffff; --fondo2:#f2f5f8; --tarjeta:#ffffff; --texto:#0f1c2b; --suave:#566476;
  --borde:#d9e1e9; --sombra:0 1px 2px rgba(15,28,43,.05),0 8px 24px rgba(15,28,43,.06);
  --navy:#0b2338; --navy2:#11304d; --acento:#1d8a9e; --acento-suave:#e3f3f6;
  --plano:#7fd3e1; --sobre-navy:#ffffff; --sobre-navy-suave:#aebfd0;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0b1520; --fondo2:#0f1c29; --tarjeta:#132232; --texto:#e7eef5; --suave:#9db0c3;
    --borde:#22364a; --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --navy:#071827; --navy2:#0e2841; --acento:#4fc0d3; --acento-suave:#123543;
  }
}
:root[data-theme="dark"]{
  --fondo:#0b1520; --fondo2:#0f1c29; --tarjeta:#132232; --texto:#e7eef5; --suave:#9db0c3;
  --borde:#22364a; --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --navy:#071827; --navy2:#0e2841; --acento:#4fc0d3; --acento-suave:#123543;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
.caja{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.caja{padding:0 28px}}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.015em;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}
.suave{color:var(--suave)}
.mono{font-family:var(--mono)}
.ceja{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--acento);margin-bottom:14px}
.cabeza-seccion{max-width:700px;margin-bottom:44px}
.cabeza-seccion p{font-size:1.07rem;color:var(--suave)}

/* cuadrícula de plano */
.plano{background-color:var(--navy);
  background-image:
    linear-gradient(rgba(127,211,225,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,211,225,.10) 1px,transparent 1px),
    linear-gradient(rgba(127,211,225,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,211,225,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.milimetrado{background-image:
    linear-gradient(var(--borde) 1px,transparent 1px),
    linear-gradient(90deg,var(--borde) 1px,transparent 1px);
  background-size:32px 32px;background-color:var(--fondo2)}

/* ---------- cabecera ---------- */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fondo) 90%,transparent);backdrop-filter:saturate(1.4) blur(12px)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:.1em}
.marca small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.06em;color:var(--suave);margin-top:-1px}
nav{display:flex;align-items:center;gap:26px;font-size:.92rem;font-weight:500}
nav a.enlace{color:var(--suave)}
nav a.enlace:hover{color:var(--texto)}
@media (max-width:920px){nav a.enlace{display:none}}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:6px;font-weight:600;font-size:.96rem;transition:transform .15s,background .15s}
.boton:hover{transform:translateY(-1px)}
.boton.principal{background:var(--acento);color:#fff}
.boton.principal:hover{background:#17788a}
.boton.fantasma{background:rgba(255,255,255,.07);color:var(--sobre-navy);box-shadow:inset 0 0 0 1px rgba(127,211,225,.35)}
.boton.fantasma:hover{background:rgba(255,255,255,.12)}
.boton.chico{padding:9px 16px;font-size:.87rem}
.boton svg{width:18px;height:18px}

/* ---------- portada ---------- */
.portada{color:var(--sobre-navy);padding:80px 0 104px;overflow:hidden}
.portada-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:960px){.portada-rejilla{grid-template-columns:1fr}}
.portada .ceja{color:var(--plano)}
.portada p.grande{font-size:1.13rem;color:var(--sobre-navy-suave);max-width:560px}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sellos{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.sello{font-family:var(--mono);font-size:.76rem;color:var(--plano);padding:5px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(127,211,225,.35)}
.dibujo{width:100%;height:auto;color:var(--plano)}
.dibujo text{font-family:var(--mono)}

/* ---------- franja de datos ---------- */
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transform:translateY(-44px)}
@media (max-width:900px){.datos{grid-template-columns:repeat(2,1fr)}}
.dato{background:var(--tarjeta);border-radius:8px;padding:22px;box-shadow:var(--sombra)}
.dato .cod{font-family:var(--mono);font-size:.7rem;color:var(--acento);letter-spacing:.08em;margin-bottom:6px}
.dato b{display:block;font-family:var(--mono);font-weight:600;font-size:1.6rem;line-height:1.2;margin-bottom:4px}
.dato span{font-size:.88rem;color:var(--suave)}

/* ---------- secciones ---------- */
section{padding:88px 0}
section.gris{background:var(--fondo2)}
.rejilla{display:grid;gap:22px}
.dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.tres{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.tarjeta{background:var(--tarjeta);border-radius:8px;padding:30px;box-shadow:var(--sombra)}
.cod-tarjeta{font-family:var(--mono);font-size:.72rem;color:var(--suave);letter-spacing:.08em;margin-bottom:14px;display:flex;justify-content:space-between}
.figura{background:var(--navy);border-radius:6px;margin:-6px 0 22px;color:var(--plano);
  background-image:linear-gradient(rgba(127,211,225,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(127,211,225,.08) 1px,transparent 1px);background-size:20px 20px}
.figura svg{width:100%;height:auto}
.figura text{font-family:var(--mono)}
.para{font-size:.93rem;color:var(--suave);margin-bottom:18px}
.lista{list-style:none;margin:0 0 22px;padding:0}
.lista li{display:flex;gap:10px;margin:.55em 0}
.lista li svg{flex:none;width:20px;height:20px;color:var(--acento);margin-top:2px}
.mas{font-weight:600;color:var(--acento);display:inline-flex;align-items:center;gap:6px}
.mas svg{width:16px;height:16px}

/* normas */
.norma .codigo{font-family:var(--mono);font-weight:600;font-size:1.2rem;margin-bottom:8px}
.plazo{display:inline-block;font-family:var(--mono);font-size:.75rem;color:var(--acento);background:var(--acento-suave);padding:4px 10px;border-radius:4px;margin-bottom:16px}
.norma p{color:var(--suave);margin:0}

/* flujo del método */
.flujo{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
.flecha{display:flex;align-items:center;justify-content:center;width:44px;color:var(--acento)}
.flecha svg{width:28px;height:28px}
@media (max-width:960px){
  .flujo{grid-template-columns:1fr}
  .flecha{width:auto;height:40px}
  .flecha svg{transform:rotate(90deg)}
}
.paso{background:var(--tarjeta);border-radius:8px;padding:24px;box-shadow:var(--sombra)}
.paso .num{font-family:var(--mono);font-size:.75rem;color:var(--acento);letter-spacing:.08em;margin-bottom:10px}
.paso p{color:var(--suave);margin:0 0 12px;font-size:.94rem}
.paso .sale{font-family:var(--mono);font-size:.75rem;color:var(--suave)}
.paso .sale b{color:var(--texto);font-weight:500}

/* software */
.software{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:960px){.software{grid-template-columns:1fr}}
.vista{background:#fff;color:#0f1c2b;border-radius:8px;box-shadow:0 20px 60px rgba(11,35,56,.22);overflow:hidden;font-size:.82rem}
.vista-top{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#eef2f6;font-family:var(--mono);font-size:.72rem}
.vista-top i{width:9px;height:9px;border-radius:50%;background:#cfd8e2;display:block}
.vista-top span{margin-left:10px;color:#5d6b7b}
.vista-cuerpo{padding:18px}
.resultado{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline;background:#f4f7fa;border-radius:6px;padding:14px;margin-bottom:12px}
.resultado b{font-family:var(--mono);font-size:1.35rem;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kpi{background:#f4f7fa;border-radius:6px;padding:12px}
.kpi b{display:block;font-family:var(--mono);font-size:1.15rem;line-height:1.3}
.kpi small{color:#6a7787}
.filas{display:grid;gap:6px}
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:#f4f7fa;border-radius:6px}
.estado{font-family:var(--mono);font-size:.68rem;font-weight:500;padding:3px 8px;border-radius:4px;white-space:nowrap}
.e-ok{background:#dff3e6;color:#1d6b3a}.e-rev{background:#fff1d6;color:#8a5a00}
.nota-vista{font-family:var(--mono);font-size:.7rem;color:var(--suave);text-align:right;margin-top:10px}
@media (max-width:420px){.resultado b{font-size:1.15rem}.kpi b{font-size:1rem}}

/* equipo */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.area{background:var(--tarjeta);border-radius:8px;padding:22px;box-shadow:var(--sombra)}
.area .icono{width:42px;height:42px;border-radius:6px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.area .icono svg{width:22px;height:22px}
.area h3{font-size:1rem;margin-bottom:6px}
.area p{font-size:.88rem;color:var(--suave);margin:0}
.caso{margin-top:22px;display:grid;grid-template-columns:1fr 1.2fr;gap:0;overflow:hidden;padding:0}
@media (max-width:860px){.caso{grid-template-columns:1fr}}
.caso .figura{margin:0;border-radius:0;display:flex;align-items:center}
.caso .texto{padding:30px}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.9rem;margin-top:14px}
.ficha dt{font-family:var(--mono);font-size:.75rem;color:var(--suave);padding-top:2px}
.ficha dd{margin:0}
.sectores{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sectores span{font-family:var(--mono);font-size:.76rem;background:var(--tarjeta);padding:6px 12px;border-radius:4px;box-shadow:var(--sombra)}

/* preguntas */
.preguntas{max-width:840px}
details{background:var(--tarjeta);border-radius:8px;padding:20px 24px;margin-bottom:12px;box-shadow:var(--sombra)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;line-height:1;color:var(--acento)}
details[open] summary::after{content:"−"}
details p{margin:.9em 0 0;color:var(--suave)}

/* cierre con cajetín */
.cierre{color:var(--sobre-navy);border-radius:10px;padding:56px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.cierre{grid-template-columns:1fr;padding:40px 22px}}
.cierre p{color:var(--sobre-navy-suave);font-size:1.06rem}
.cierre .botones{margin-top:8px}
.cajetin{font-family:var(--mono);font-size:.72rem;color:var(--plano);box-shadow:inset 0 0 0 1px rgba(127,211,225,.45);border-radius:2px;display:grid;grid-template-columns:1fr 1fr}
.cajetin div{padding:10px 12px;box-shadow:inset -1px -1px 0 rgba(127,211,225,.3)}
.cajetin div span{display:block;opacity:.7;font-size:.62rem;letter-spacing:.08em}
.cajetin .ancho{grid-column:1/-1;font-size:.9rem;color:#fff}

footer{padding:48px 0 36px;background:var(--fondo2);font-size:.9rem;color:var(--suave)}
.pie{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:28px}
@media (max-width:760px){.pie{grid-template-columns:1fr}}
.pie h4{color:var(--texto);font-size:.92rem;margin:0 0 10px}
.pie a{display:block;margin:4px 0}
.pie a:hover{color:var(--texto)}
.legal{font-family:var(--mono);font-size:.74rem}

/* ================= agregado para el sitio de varias páginas ================= */
header{box-shadow:0 1px 0 var(--borde)}
nav{gap:22px}
.menu-item{position:relative}
.menu-item>a.enlace{display:inline-flex;align-items:center;gap:4px}
.menu-item>a.enlace::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:4px}
.submenu{position:absolute;top:100%;left:-18px;min-width:330px;background:var(--tarjeta);border-radius:8px;box-shadow:var(--sombra),0 0 0 1px var(--borde);padding:10px;display:none}
.menu-item:hover .submenu,.menu-item:focus-within .submenu{display:block}
.submenu a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:6px;color:var(--texto)}
.submenu a:hover{background:var(--fondo2)}
.submenu a small{display:block;color:var(--suave);font-size:.8rem;font-weight:400}
.submenu .ic{flex:none;width:32px;height:32px;border-radius:6px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center}
.submenu .ic svg{width:18px;height:18px}
nav a.enlace.activo{color:var(--texto);box-shadow:inset 0 -2px 0 var(--acento)}
.boton-menu{display:none;background:none;border:0;color:var(--texto);padding:8px;cursor:pointer}
.boton-menu svg{width:26px;height:26px}
@media (max-width:1080px){
  nav a.enlace,.menu-item{display:none}
  .boton-menu{display:block}
}
.panel-movil{display:none;border-top:1px solid var(--borde);background:var(--fondo);max-height:calc(100vh - 68px);overflow:auto}
.panel-movil.abierto{display:block}
.panel-movil a{display:block;padding:12px 0;border-bottom:1px solid var(--borde);font-weight:500}
.panel-movil a.sub{padding-left:16px;font-weight:400;color:var(--suave);font-size:.95rem}
.panel-movil .boton{margin:16px 0;justify-content:center;width:100%;border-bottom:0}

/* cabecera de cada página interna */
.cabecera-pagina{color:var(--sobre-navy);padding:64px 0 72px}
.cabecera-pagina .ceja{color:var(--plano)}
.cabecera-pagina p{color:var(--sobre-navy-suave);font-size:1.1rem;max-width:680px}
.miga{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--sobre-navy-suave);margin-bottom:22px}
.miga a:hover{color:#fff}
.miga span{opacity:.5;margin:0 8px}

/* bloque pendiente: muestra qué irá ahí */
.pendiente{border:1.5px dashed color-mix(in srgb,var(--acento) 55%,transparent);border-radius:8px;padding:18px 20px;background:color-mix(in srgb,var(--acento-suave) 55%,transparent);color:var(--suave);font-size:.92rem}
.pendiente::before{content:"PENDIENTE";display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--acento);margin-bottom:6px}
.pendiente.alto{min-height:180px;display:flex;flex-direction:column;justify-content:center}
.plano .pendiente{color:var(--sobre-navy-suave);background:rgba(127,211,225,.06);border-color:rgba(127,211,225,.45)}
.plano .pendiente::before{color:var(--plano)}
.linea-gris{height:10px;border-radius:5px;background:var(--borde);margin:9px 0}
.linea-gris.c{width:60%}.linea-gris.m{width:80%}

/* tarjetas de servicio con icono */
.servicio{display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.servicio:hover{transform:translateY(-3px);box-shadow:var(--sombra),0 0 0 1px var(--acento)}
.servicio .icono{width:46px;height:46px;border-radius:8px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.servicio .icono svg{width:24px;height:24px}
.servicio p{color:var(--suave);font-size:.94rem;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 18px}
.chip{font-family:var(--mono);font-size:.7rem;padding:3px 8px;border-radius:4px;background:var(--fondo2);color:var(--suave);box-shadow:inset 0 0 0 1px var(--borde)}

/* cuenta regresiva de transiciones */
.cuenta{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px}
.cuenta b{font-family:var(--mono);font-size:2.3rem;line-height:1;color:var(--texto)}
.cuenta span{font-family:var(--mono);font-size:.78rem;color:var(--suave)}
.barra-tiempo{height:6px;border-radius:3px;background:var(--fondo2);overflow:hidden;margin:10px 0 16px}
.barra-tiempo i{display:block;height:100%;background:var(--acento)}
.urgente .barra-tiempo i{background:#d9822b}
.urgente .plazo{background:#fbead8;color:#9a5512}

/* buscador de normas */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filtro{font:inherit;font-size:.86rem;padding:8px 14px;border-radius:999px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--suave);cursor:pointer}
.filtro.activo{background:var(--navy);color:#fff;border-color:var(--navy)}
.buscar{width:100%;max-width:460px;font:inherit;padding:12px 16px;border-radius:8px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);margin-bottom:18px}
.contador{font-family:var(--mono);font-size:.78rem;color:var(--suave);margin-bottom:18px}
.normas-rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.ficha-norma{background:var(--tarjeta);border-radius:8px;padding:18px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.ficha-norma .codigo{font-family:var(--mono);font-weight:600;font-size:1rem;margin-bottom:4px}
.ficha-norma p{font-size:.88rem;color:var(--suave);margin:0 0 12px;flex:1}
.ficha-norma .tipo{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--acento);text-transform:uppercase;margin-bottom:8px}

/* plantilla de norma */
.dos-col{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
@media (max-width:960px){.dos-col{grid-template-columns:1fr}}
.lateral{position:sticky;top:90px}
.bloque{margin-bottom:48px}
.bloque h2{font-size:1.5rem}

/* formulario */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
.form input,.form select,.form textarea{font:inherit;padding:11px 14px;border-radius:6px;border:1px solid var(--borde);background:var(--fondo);color:var(--texto)}
.form .doble{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.form .doble{grid-template-columns:1fr}}

/* botón flotante de WhatsApp */
.flotante{position:fixed;right:18px;bottom:18px;z-index:20;width:56px;height:56px;border-radius:50%;background:#1f9d55;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.flotante svg{width:28px;height:28px}

/* pie */
footer.pie-sitio{background:var(--navy);color:var(--sobre-navy-suave);padding:64px 0 32px}
footer.pie-sitio .pie{grid-template-columns:1.6fr 1fr 1fr 1fr}
@media (max-width:860px){footer.pie-sitio .pie{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.pie-sitio .pie{grid-template-columns:1fr}}
footer.pie-sitio h4{color:#fff}
footer.pie-sitio a:hover{color:#fff}
footer.pie-sitio .legal{border-top:1px solid rgba(127,211,225,.2);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer.pie-sitio .marca{color:#fff;margin-bottom:14px}
footer.pie-sitio .marca small{color:var(--sobre-navy-suave)}

.cod-tarjeta svg{width:16px;height:16px;color:var(--acento)}
@media (max-width:520px){nav>.boton.principal{display:none}}

/* botón sol / luna (abajo a la izquierda; el de WhatsApp va a la derecha) */
.tema{position:fixed;left:18px;bottom:18px;z-index:20;width:48px;height:48px;border-radius:50%;border:1px solid var(--borde);background:var(--tarjeta);box-shadow:0 6px 18px rgba(0,0,0,.15);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.tema:hover{transform:scale(1.08)}

/* ================= ventana flotante de Servicios (mega menú) ================= */
nav button.enlace{background:none;border:0;font:inherit;font-size:.92rem;font-weight:500;color:var(--suave);cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:4px}
nav button.enlace:hover,nav button.enlace[aria-expanded="true"]{color:var(--texto)}
nav button.enlace.activo{color:var(--texto);box-shadow:inset 0 -2px 0 var(--acento)}
nav button.abre-mega:not(.lupa)::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:6px;transition:transform .2s}
nav button.abre-mega[aria-expanded="true"]:not(.lupa)::after{transform:rotate(225deg) translateY(-2px)}
nav .lupa{width:38px;height:38px;justify-content:center;border-radius:50%}
nav .lupa:hover{background:var(--fondo2)}
nav .lupa svg{width:20px;height:20px}
@media (max-width:1080px){nav button.abre-mega:not(.lupa){display:none}}
.panel-movil button.abre-mega{display:block;width:100%;text-align:left;font:inherit;font-weight:500;color:var(--texto);background:none;border:0;border-bottom:1px solid var(--borde);padding:12px 0;cursor:pointer}

.velo{position:fixed;inset:0;background:rgba(11,35,56,.38);z-index:9;opacity:0;pointer-events:none;transition:opacity .2s}
.velo.visible{opacity:1;pointer-events:auto}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--fondo);border-top:1px solid var(--borde);box-shadow:0 30px 60px rgba(11,35,56,.22);
  max-height:calc(100vh - 68px);overflow-y:auto;scrollbar-width:thin;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.mega.abierta{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.mega-top{display:flex;gap:12px;align-items:center;padding:20px 0 16px}
.mega-buscar{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--borde);border-radius:10px;padding:0 16px;background:var(--fondo2);transition:border-color .15s,box-shadow .15s}
.mega-buscar:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.mega-buscar svg{width:20px;height:20px;color:var(--suave);flex:none}
.mega-buscar input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;padding:13px 0;color:var(--texto);outline:none}
.mega-cerrar{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:none;font-size:18px;color:var(--suave);cursor:pointer}
.mega-cerrar:hover{background:var(--fondo2);color:var(--texto)}
.mega-cuerpo{display:grid;grid-template-columns:300px 1fr;gap:28px;padding-bottom:28px}
.mega-lineas{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--borde);padding-right:18px}
.mega-linea{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;font-size:.93rem;font-weight:500;background:none;border:0;border-radius:8px;padding:10px 12px;color:var(--texto);cursor:pointer;transition:background .12s}
.mega-linea small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--suave);font-weight:400;margin-top:1px}
.mega-linea .ic{flex:none;width:34px;height:34px;border-radius:8px;background:var(--fondo2);color:var(--acento);display:flex;align-items:center;justify-content:center}
.mega-linea .ic svg{width:18px;height:18px}
.mega-linea:hover{background:var(--fondo2)}
.mega-linea.activa{background:var(--acento-suave)}
.mega-linea.activa .ic{background:var(--acento);color:#fff}
.mega-todas{display:flex;align-items:center;gap:6px;margin-top:10px;padding:10px 12px;font-size:.88rem;font-weight:600;color:var(--acento)}
.mega-todas svg{width:16px;height:16px}
.mega-normas{display:none}
.mega-normas.activa{display:block;animation:entra .2s ease}
@keyframes entra{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.mega-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.mega-cab h3{margin:0 0 4px;font-size:1.2rem}
.mega-cab p{margin:0;color:var(--suave);font-size:.9rem}
.mega-cab .mas{flex:none;font-size:.88rem}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.mega-grid a{display:block;padding:10px 13px;border-radius:8px;border:1px solid var(--borde);background:var(--tarjeta);transition:border-color .12s,background .12s,transform .12s}
.mega-grid a:hover{border-color:var(--acento);background:var(--acento-suave);transform:translateY(-1px)}
.mega-grid b{display:block;font-family:var(--mono);font-size:.84rem;font-weight:600}
.mega-grid span{display:block;font-size:.8rem;color:var(--suave);line-height:1.35;margin-top:2px}
.mega-grid mark{background:color-mix(in srgb,var(--acento) 25%,transparent);color:inherit;border-radius:2px}
.mega-resultados{display:none}
.mega.buscando .mega-resultados{display:block}
.mega.buscando .mega-normas.activa{display:none}
.mega.buscando .mega-linea.activa{background:none}
.mega.buscando .mega-linea.activa .ic{background:var(--fondo2);color:var(--acento)}
.mega-vacio{display:none;color:var(--suave);margin-top:6px}
.mega-resultados.sin .mega-vacio{display:block}
@media (max-width:860px){
  .mega-top{padding:14px 0 12px}
  .mega-cuerpo{grid-template-columns:1fr;gap:16px}
  .mega-lineas{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--borde);padding:0 0 12px;scrollbar-width:none}
  .mega-lineas::-webkit-scrollbar{display:none}
  .mega-linea{flex:none;padding:8px 12px;box-shadow:inset 0 0 0 1px var(--borde)}
  .mega-linea .ic{display:none}
  .mega-todas{flex:none;margin:0}
  .mega-cab{flex-direction:column;gap:8px}
  .mega-grid{grid-template-columns:1fr}
}

/* icono de cada norma */
.ni{flex:none;width:32px;height:32px;border-radius:8px;background:var(--acento-suave);color:var(--acento);display:inline-flex;align-items:center;justify-content:center;font-style:normal;transition:background .12s,color .12s}
.ni svg{width:18px;height:18px}
.mega-grid a{display:flex;gap:11px;align-items:flex-start}
.mega-grid a > div{min-width:0}
.mega-grid a:hover .ni,.ficha-norma:hover .ni{background:var(--acento);color:#fff}
.fn-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fn-top .tipo{margin:0}
.ficha-norma{transition:transform .15s,box-shadow .15s}
.ficha-norma:hover{transform:translateY(-2px);box-shadow:var(--sombra),0 0 0 1px var(--acento)}

/* ================= página de norma completa (ISO 9001) ================= */
.norma-hero{padding:56px 0 100px}
.norma-hero h1{font-family:var(--mono);letter-spacing:-.02em}
.norma-hero .sello{background:rgba(127,211,225,.06)}
.cuatro{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.icono-b{width:48px;height:48px;border-radius:10px;background:var(--acento-suave);color:var(--acento);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.icono-b svg{width:24px;height:24px}
.beneficio p,.cambio p{color:var(--suave);font-size:.94rem;margin:0}
.cambio-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.clausula{font-family:var(--mono);font-size:.78rem;font-weight:600;color:#fff;background:var(--navy);padding:4px 10px;border-radius:4px}
.cambio{border-top:3px solid var(--acento)}
.figura-clara{background:var(--tarjeta);border-radius:10px;padding:22px;box-shadow:var(--sombra)}
.pie-figura{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--suave);text-align:right;margin-top:8px}
/* paquetes */
.paquete{position:relative;display:flex;flex-direction:column}
.paquete .lista{flex:1;font-size:.93rem}
.paquete.destacado{box-shadow:var(--sombra),0 0 0 2px var(--acento)}
.etiqueta{position:absolute;top:-12px;left:24px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:var(--acento);color:#fff;padding:4px 10px;border-radius:4px}
.precio{border-top:1px dashed var(--borde);padding-top:14px;margin-bottom:16px;font-size:.9rem;font-weight:500}
.precio span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--suave);font-weight:400}
.boton.secundario{background:var(--fondo2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde)}
.boton.secundario:hover{box-shadow:inset 0 0 0 1px var(--acento)}
.paquete .boton{justify-content:center}
/* línea de tiempo */
.linea-tiempo{position:relative;margin:20px 8px 0;height:70px}
.lt-barra{position:absolute;left:0;right:0;top:34px;height:8px;border-radius:4px;background:var(--fondo2);box-shadow:inset 0 0 0 1px var(--borde)}
.lt-avance{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acento),#d9822b)}
.lt-hito{position:absolute;top:0;transform:translateX(0);font-size:.85rem}
.lt-hito.fin{transform:translateX(-100%);text-align:right}
.lt-hito b{display:block;font-family:var(--mono);font-size:.82rem}
.lt-hito span{display:block;color:var(--suave);font-size:.8rem;position:relative;top:46px}
.lt-hoy{position:absolute;top:22px;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px var(--acento-suave);display:flex;align-items:center;justify-content:center}
.lt-hoy b{font-family:var(--mono);font-size:.56rem;color:#fff;letter-spacing:.04em}
.lt-hito b{position:relative;top:-4px}
.lista.columnas{columns:2;column-gap:28px}
.lista.columnas li{break-inside:avoid}
@media (max-width:600px){.lista.columnas{columns:1}.lt-hito span{font-size:.72rem;max-width:120px}}
/* línea de tiempo v2: fechas debajo, «HOY» como banderita arriba */
.linea-tiempo{height:104px;margin-top:8px}
.lt-barra{top:40px}
.lt-hito{top:62px;max-width:46%}
.lt-hito b,.lt-hito span{position:static;white-space:nowrap}
.lt-hito span{white-space:normal}
.lt-hoy{top:37px;width:14px;height:14px;background:var(--navy);border:3px solid var(--fondo);box-shadow:0 0 0 2px var(--navy)}
.lt-hoy b{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:.66rem;padding:4px 9px;border-radius:4px;white-space:nowrap}
.lt-hoy b::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--navy)}

/* ================= fotos (generadas con IA, carpeta img/) ================= */
.foto{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--fondo2);box-shadow:var(--sombra)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#fff;background:rgba(11,35,56,.72);padding:4px 8px;border-radius:3px}
.foto .hueco{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  border:1.5px dashed color-mix(in srgb,var(--acento) 60%,transparent);border-radius:12px;color:var(--suave);
  background-image:linear-gradient(var(--borde) 1px,transparent 1px),linear-gradient(90deg,var(--borde) 1px,transparent 1px);background-size:24px 24px;background-color:var(--fondo2)}
.foto .hueco svg{color:var(--acento)}
.foto .hueco b{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--acento)}
.foto .hueco span{font-family:var(--mono);font-size:.72rem;color:var(--texto)}
.foto .hueco small{font-size:.8rem;max-width:320px}
.foto.falta img,.foto.falta figcaption{display:none}
.foto.falta .hueco{display:flex}
.foto.falta{box-shadow:none}
.foto-hero .foto{box-shadow:0 30px 70px rgba(0,0,0,.35)}
.foto-hero .foto::after{content:"";position:absolute;inset:10px;border:1px solid rgba(127,211,225,.45);border-radius:6px;pointer-events:none}
.foto-hero .foto.falta::after{display:none}
.plano .foto .hueco{background-color:rgba(127,211,225,.05);background-image:linear-gradient(rgba(127,211,225,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(127,211,225,.12) 1px,transparent 1px);color:var(--sobre-navy-suave);border-color:rgba(127,211,225,.5)}
.plano .foto .hueco span{color:#fff}
.plano .foto .hueco b,.plano .foto .hueco svg{color:var(--plano)}
/* foto al lado de una pila de tarjetas o de preguntas */
.con-foto{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}
.pila{display:grid;gap:16px}
.pila .tarjeta{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:22px}
.pila .icono-b{grid-row:span 2;margin:0}
.pila h3{margin:0;align-self:end}
@media (max-width:860px){.con-foto{grid-template-columns:1fr}.con-foto .foto{aspect-ratio:16/10 !important}}
/* banda de estructura con el PHVA */
.estructura{color:var(--sobre-navy)}
.estructura .ceja{color:var(--plano)}
.estructura p{color:var(--sobre-navy-suave)}
.clausulas{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.clausulas li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(127,211,225,.25);background:rgba(127,211,225,.04)}
.clausulas .clausula{background:var(--plano);color:var(--navy);min-width:30px;text-align:center}
.estructura .dibujo{max-width:440px;margin:0 auto;display:block}
.plano .foto.falta{background:transparent}

/* ================= efectos al pasar el cursor (solo con mouse; nada en celulares) ================= */
.foto img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s}
.foto::before{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s,inset .45s cubic-bezier(.2,.7,.2,1);
  --m:#7fd3e1;background:
  linear-gradient(var(--m),var(--m)) top left/26px 2px no-repeat,linear-gradient(var(--m),var(--m)) top left/2px 26px no-repeat,
  linear-gradient(var(--m),var(--m)) top right/26px 2px no-repeat,linear-gradient(var(--m),var(--m)) top right/2px 26px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom left/26px 2px no-repeat,linear-gradient(var(--m),var(--m)) bottom left/2px 26px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom right/26px 2px no-repeat,linear-gradient(var(--m),var(--m)) bottom right/2px 26px no-repeat}
.foto.falta::before{display:none}
.foto figcaption{z-index:3;transition:background .3s,letter-spacing .3s}
.tarjeta,.paso,.dato,.area,details{transition:transform .22s ease,box-shadow .22s ease}
.icono-b,.area .icono,.paso .num,.ni{transition:background .2s,color .2s}
@media (hover:hover){
  .foto:hover img{transform:scale(1.06);filter:saturate(1.08) contrast(1.03)}
  .foto:hover::before{opacity:1;inset:22px}
  .foto:hover figcaption{background:var(--acento);letter-spacing:.16em}
  .tarjeta:hover,.paso:hover,.dato:hover,.area:hover{transform:translateY(-4px);box-shadow:var(--sombra),0 16px 34px rgba(11,35,56,.13),0 0 0 1px var(--acento)}
  .paquete.destacado:hover{box-shadow:var(--sombra),0 16px 34px rgba(11,35,56,.13),0 0 0 2px var(--acento)}
  .tarjeta:hover .icono-b,.area:hover .icono{background:var(--acento);color:#fff}
  .tarjeta:hover .ni{background:var(--acento);color:#fff}
  .paso:hover .num{color:var(--texto)}
  details:hover{box-shadow:var(--sombra),0 0 0 1px var(--acento)}
  .figura-clara:hover{box-shadow:var(--sombra),0 0 0 1px var(--acento)}
}
@media (prefers-reduced-motion:reduce){
  .foto img,.foto::before,.tarjeta,.paso,.dato,.area,details{transition:none}
  .foto:hover img{transform:none}
  .tarjeta:hover,.paso:hover,.dato:hover,.area:hover{transform:none}
}

/* ================= portada con foto de fondo (inicio) ================= */
.hero-foto{position:relative;overflow:hidden;color:var(--sobre-navy);background:var(--navy);min-height:clamp(560px,82vh,780px);display:flex;align-items:center;padding:96px 0 120px}
.hero-fondo{position:absolute;inset:0;background:url(img/comun/inicio.jpg) 75% center/cover no-repeat;transform:scale(1.04);animation:acercar 18s ease-out forwards}
@keyframes acercar{to{transform:scale(1)}}
.hero-foto::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,24,39,.96) 0%,rgba(7,24,39,.88) 34%,rgba(7,24,39,.45) 62%,rgba(7,24,39,.12) 100%),
             linear-gradient(0deg,rgba(7,24,39,.55) 0%,transparent 35%)}
.hero-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(127,211,225,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(127,211,225,.09) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 60%);mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 60%)}
.hero-foto .caja{position:relative;z-index:2;width:100%}
.hero-texto{max-width:620px}
.hero-texto h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-foto .ceja{color:var(--plano)}
.hero-foto p.grande{color:#d5e1ec}
@media (max-width:760px){
  .hero-foto{min-height:auto;padding:72px 0 96px}
  .hero-fondo{background-position:78% center}
  .hero-foto::before{background:linear-gradient(0deg,rgba(7,24,39,.97) 0%,rgba(7,24,39,.86) 55%,rgba(7,24,39,.6) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero-fondo{animation:none;transform:none}}
/* la foto del inicio no debe tapar los cuadros de datos que suben sobre ella */
.hero-foto{isolation:isolate;z-index:0}
.hero-foto + section{position:relative;z-index:3}
/* foto de fondo de cada página: se elige con style="--foto:url(...)" */
.hero-fondo{background-image:var(--foto,url(img/comun/inicio.jpg))}
.hero-foto.norma-hero{padding:72px 0 120px;min-height:clamp(520px,74vh,720px)}
@media (min-width:761px){
  .norma-hero .hero-texto{max-width:540px}
  .norma-hero.hero-foto::before{background:linear-gradient(90deg,rgba(7,24,39,.96) 0%,rgba(7,24,39,.9) 40%,rgba(7,24,39,.5) 58%,rgba(7,24,39,.12) 100%),linear-gradient(0deg,rgba(7,24,39,.55) 0%,transparent 35%)}
}

/* ================= fondo del menú flotante: Andes + empresas peruanas en líneas de plano ================= */
.mega{
  background-color:var(--fondo);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 210' fill='none' stroke='%231d8a9e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g opacity='.55'><path d='M0 172 L80 132 L140 150 L230 72 L272 96 L322 62 L382 122 L432 102 L522 150 L600 86 L650 40 L702 82 L762 122 L822 96 L902 142 L962 112 L1042 150 L1122 120 L1200 142'/><path d='M214 86 L230 72 L250 86 L240 84 L230 92 L220 84 Z M632 56 L650 40 L670 58 L660 55 L650 63 L640 54 Z M306 74 L322 62 L338 76'/></g><path d='M0 204 H1200' opacity='.6'/><g><path d='M58 204 V164 L88 148 V164 L118 148 V164 L148 148 V204'/><rect x='160' y='122' width='12' height='82'/><path d='M166 116 C158 102 176 96 168 80 C162 70 172 64 170 56' opacity='.6'/><path d='M70 176 h12 M100 176 h12 M130 176 h12'/></g><g><rect x='300' y='152' width='30' height='52'/><rect x='336' y='128' width='26' height='76'/><rect x='368' y='166' width='38' height='38'/><rect x='412' y='118' width='22' height='86'/><path d='M423 118 V102'/><rect x='440' y='146' width='34' height='58'/><rect x='480' y='162' width='40' height='42'/><path d='M342 140 h14 M342 152 h14 M342 164 h14 M416 132 h14 M416 146 h14 M416 160 h14'/></g><g><path d='M588 204 V168 Q614 156 640 168 V204 M650 204 V176 Q670 166 690 176 V204'/><path d='M588 182 H640 M650 188 H690'/></g><g><path d='M772 204 V108 H866 M772 108 L794 88 L854 108 M846 108 V140 M840 140 h12 v10 h-12 z'/><rect x='884' y='184' width='40' height='20'/><rect x='926' y='184' width='40' height='20'/><rect x='905' y='164' width='40' height='20'/></g><g><path d='M1030 204 V128 M1030 128 L1014 106 M1030 128 L1054 122 M1030 128 L1026 152'/><path d='M1100 204 V140 M1100 140 L1088 122 M1100 140 L1118 136 M1100 140 L1097 158'/><circle cx='1030' cy='128' r='2.5'/><circle cx='1100' cy='140' r='2.5'/></g></svg>"),
    linear-gradient(180deg,var(--fondo) 0%,var(--fondo2) 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:center bottom,0 0;
  background-size:min(1300px,100%) auto,100% 100%;
  background-attachment:local,local;
}
.mega .caja{padding-bottom:150px}
/* greca andina arriba */
.mega::before{content:"";display:block;height:10px;opacity:.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' fill='none' stroke='%231d8a9e' stroke-width='1.3'><path d='M0 9 H6 V5 H12 V1 H24 V5 H30 V9 H36 V5 H42 V1 H48'/></svg>") repeat-x 0 0/48px 10px}
.mega-lineas{background:color-mix(in srgb,var(--fondo) 70%,transparent)}
.mega-grid a{background:color-mix(in srgb,var(--tarjeta) 92%,transparent);backdrop-filter:blur(2px)}
@media (max-width:860px){.mega .caja{padding-bottom:90px}}
/* fondo del menú flotante v2: foto panorámica de Lima y los Andes (reemplaza al dibujo de líneas) */
.mega{
  background-image:
    linear-gradient(180deg,var(--fondo) 0%,color-mix(in srgb,var(--fondo) 94%,transparent) 38%,color-mix(in srgb,var(--fondo) 62%,transparent) 72%,color-mix(in srgb,var(--fondo) 18%,transparent) 100%),
    url(img/comun/lima-andes.jpg);
  background-position:0 0,center bottom;
  background-size:100% 100%,cover;
  background-repeat:no-repeat,no-repeat;
  background-attachment:local,local;
}
.mega .caja{padding-bottom:170px}
@media (max-width:860px){.mega .caja{padding-bottom:110px}}