/* Nahuel Seguridad — hoja compartida de las paginas interiores.
 *
 * La usan /guardias-de-seguridad, /camaras-de-seguridad y
 * /seguridad-para-condominios. index.html y gracias.html NO la cargan: siguen
 * con su CSS inline y no se tocan.
 *
 * POR QUE UN ARCHIVO Y NO INLINE: son tres paginas con el mismo esqueleto (nav,
 * hero, bloques de contenido, formulario, footer). Inline habria que mantener
 * la misma hoja copiada tres veces.
 *
 * POR QUE EL NOMBRE LLEVA `.v1`: `location /assets/` en nginx.conf sirve todo
 * este directorio con `expires 30d`. Un cambio de estilos no se veria hasta que
 * expire la cache del visitante; se resuelve subiendo la version del nombre
 * (interior.v2.css) y actualizando el <link> de las tres paginas. No hay build
 * que ponga hashes.
 *
 * Los tokens, tipografias y componentes replican los de index.html a proposito:
 * si cambia la paleta de la landing hay que cambiarla aca tambien.
 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#070D22;--bg2:#091231;--bg3:#0E1A40;
  --mint:#16FFBB;--cyan:#29DDDA;--blue:#37A7E7;
  --tx:#8E9AB8;--tx2:#C7D0E4;--white:#F0FCFF;
  --fd:'Space Grotesk',sans-serif;--fm:'JetBrains Mono',monospace;
}

html{scroll-behavior:smooth}
body{font-family:var(--fd);background:var(--bg);color:var(--tx);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--white);line-height:1.04;letter-spacing:-.03em;font-weight:700}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
::selection{background:rgba(22,255,187,.25);color:#fff}
.mono{font-family:var(--fm)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Salto al contenido: estas paginas entran desde Google Ads y el nav fijo es lo
   primero que toca el teclado. Solo visible al enfocarlo. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mint);color:var(--bg);font-weight:700;font-size:.85rem;padding:12px 22px;border-radius:0 0 14px 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------- nav
   Identica a la de index.html, con una diferencia: aca los enlaces del logo
   salen a `/` porque esta pagina es un documento aparte, no un ancla del mismo
   scroll. El CTA si es un ancla: el formulario vive en esta misma pagina. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,50px);transition:.3s}
nav.sc{background:rgba(7,13,34,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(22,255,187,.12)}
.lgk{--lg:clamp(66px,7.6vw,96px);display:flex;align-items:center}
.lgk img{height:var(--lg);width:auto;max-width:100%;object-fit:contain;display:block;margin-block:calc(var(--lg)*-.14) calc(var(--lg)*-.145)}
.status{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:.62rem;letter-spacing:2px;color:var(--tx2);border:1px solid rgba(22,255,187,.25);border-radius:100px;padding:9px 18px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--mint);font-style:normal;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(22,255,187,.6);opacity:1}50%{box-shadow:0 0 0 8px rgba(22,255,187,0);opacity:.6}}
nav .cta{font-weight:700;font-size:.82rem;letter-spacing:.5px;color:var(--bg);background:var(--mint);padding:12px 26px;border-radius:100px;transition:.3s}
nav .cta:hover{background:var(--white);box-shadow:0 0 30px rgba(22,255,187,.4)}
@media(max-width:700px){nav .cta{display:none}}
@media(min-width:701px){nav .cta{display:inline-flex;align-items:center}}
@media(max-width:820px){.status{display:none}}

/* ------------------------------------------------------------- botones */
.bt{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;color:var(--bg);background:var(--mint);padding:16px 34px;border-radius:100px;transition:.3s}
.bt:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(22,255,187,.35)}
.bt.o{background:transparent;color:var(--white);border:1.5px solid rgba(240,252,255,.3)}
.bt.o:hover{border-color:var(--mint);color:var(--mint);box-shadow:none}
.bt svg{width:18px;height:18px;fill:currentColor}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.64rem;letter-spacing:3px;text-transform:uppercase;color:var(--mint);margin-bottom:24px}
.kick::before{content:'';width:30px;height:1px;background:var(--mint)}

/* --------------------------------------------------------- hero interior
   Mas bajo que el de la landing (que ocupa 100svh): quien llega aca desde un
   anuncio ya sabe que busca, y el contenido tiene que empezar a verse sin
   scrollear. La foto entra por `background-image` en el elemento .ih-bg, con su
   <link rel=preload> en el <head> de cada pagina. */
.ih{position:relative;display:flex;align-items:flex-end;min-height:min(88svh,760px);padding:clamp(120px,18vh,190px) clamp(20px,4vw,50px) clamp(46px,7vh,74px);isolation:isolate;overflow:hidden}
.ih-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;animation:hz 15s ease-out forwards}
@keyframes hz{from{transform:scale(1.08)}to{transform:scale(1)}}
.ih::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,34,.72),rgba(7,13,34,.38) 38%,rgba(7,13,34,.97) 92%);z-index:-1}
.ih-in{position:relative;max-width:1200px;width:100%;margin:0 auto}
.ih h1{font-size:clamp(2.15rem,6vw,4.5rem);max-width:17ch}
.ih h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--mint),var(--cyan) 60%,var(--blue));-webkit-background-clip:text;background-clip:text}
.ih p{max-width:600px;margin-top:22px;font-size:1.04rem;color:var(--tx2)}
.ih .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Miga de pan visible. Duplica el BreadcrumbList del JSON-LD a proposito: el
   dato estructurado le sirve a Google, este a la persona que aterriza sin haber
   pasado por la home. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-family:var(--fm);font-size:.62rem;letter-spacing:1.6px;text-transform:uppercase;color:#5D6A8C}
.crumb a{color:var(--tx2);transition:color .25s ease}
.crumb a:hover{color:var(--mint)}
.crumb span[aria-current]{color:var(--mint)}
.crumb i{font-style:normal;color:rgba(22,255,187,.45)}

/* ------------------------------------------------------------ banda radar */
.radar{border-top:1px solid rgba(22,255,187,.14);border-bottom:1px solid rgba(22,255,187,.14);overflow:hidden;padding:18px 0;background:var(--bg2)}
.radar .track{display:flex;gap:60px;width:max-content;animation:marq 26s linear infinite;font-family:var(--fm);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--tx2);white-space:nowrap}
.radar .track span b{color:var(--mint);font-weight:500}
@keyframes marq{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- secciones */
.sec{max-width:1200px;margin:0 auto;padding:clamp(64px,9vw,112px) clamp(20px,4vw,50px)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2{font-size:clamp(1.85rem,4.4vw,3.1rem);max-width:19ch;margin-bottom:14px}
.sec-head p{max-width:62ch;color:var(--tx2)}
.sec-head h2+p{margin-top:0}
.lead{color:var(--tx2);max-width:66ch}
.lead+.lead{margin-top:16px}

/* Bloque de texto largo. Sin esto los parrafos heredan el ancho completo del
   .sec (1200px) y quedan lineas de 140 caracteres, ilegibles en desktop. */
.prose{max-width:70ch}
.prose h3{font-size:clamp(1.25rem,2.6vw,1.7rem);margin:clamp(28px,4vw,40px) 0 10px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--tx2);font-size:.98rem}
.prose p+p{margin-top:14px}
.prose strong{color:var(--white);font-weight:600}

/* ------------------------------------------------------------- tarjetas
   Mismo lenguaje que las .trv-card de la landing: borde mint tenue, fondo
   degradado, numero calado y lista con marcador. */
.grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.6vw,24px)}
@media(min-width:760px){.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:760px) and (max-width:899px){.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;border:1px solid rgba(22,255,187,.22);border-radius:26px;background:linear-gradient(150deg,rgba(22,255,187,.07),rgba(55,167,231,.05)),var(--bg2);padding:clamp(24px,3.4vw,36px);transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.card::before{content:'';position:absolute;right:-70px;top:-90px;width:250px;height:250px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,255,187,.1),transparent);pointer-events:none}
.card:hover{border-color:rgba(22,255,187,.5);transform:translateY(-4px);box-shadow:0 18px 50px rgba(7,13,34,.6),0 0 34px rgba(22,255,187,.12)}
.card .n{font-family:var(--fm);font-size:clamp(2rem,5vw,3rem);font-weight:400;color:transparent;-webkit-text-stroke:1.5px rgba(22,255,187,.5);line-height:.9}
.card .tag{font-family:var(--fm);font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--mint)}
.card h3{font-size:clamp(1.25rem,2.6vw,1.6rem)}
.card p{color:var(--tx2);font-size:.94rem}
.card>svg{width:26px;height:26px;stroke:var(--mint);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Listas con el marcador ▸ de la landing. */
.tick-list{list-style:none;margin-top:auto;padding-top:8px;border-top:1px solid rgba(22,255,187,.3)}
.tick-list li{padding:11px 2px;border-bottom:1px solid rgba(240,252,255,.12);font-size:.9rem;color:var(--white);display:flex;gap:12px;align-items:baseline;transition:.25s}
.tick-list li::before{content:'▸';color:var(--mint);font-size:.8rem;flex-shrink:0}
.tick-list li:last-child{border-bottom:0}
.tick-list li:hover{padding-left:10px}
.tick-list.bare{margin-top:0;padding-top:0;border-top:0}

/* --------------------------------------------------- seccion con imagen
   Texto + foto a dos columnas. En mobile la foto va primero (order) para que la
   pagina no abra con dos pantallas de texto seguidas. */
.split{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,54px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}.split.rt .split-media{order:2}}
.split-media{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(22,255,187,.2)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.split-media::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(22,255,187,.06),rgba(7,13,34,.3));pointer-events:none}
.split-tx h2{font-size:clamp(1.7rem,3.8vw,2.7rem);margin-bottom:14px}
.split-tx p{color:var(--tx2)}
.split-tx p+p{margin-top:14px}
.split-tx .tick-list{margin-top:24px}

/* ------------------------------------------------------------- proceso
   Los cuatro pasos de la landing, en version estatica: aca no se anima la
   linea (esa es una pieza con ~90 lineas de JS que no aporta en una pagina de
   campana). Se mantiene el numero calado y el orden. */
.pasos{list-style:none;counter-reset:paso;display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,22px)}
@media(min-width:760px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pasos li{counter-increment:paso;position:relative;border:1px solid rgba(240,252,255,.1);border-radius:20px;background:rgba(9,18,49,.6);padding:clamp(22px,3vw,28px);transition:border-color .3s ease,transform .3s ease}
.pasos li:hover{border-color:rgba(22,255,187,.42);transform:translateY(-3px)}
.pasos li::before{content:'0' counter(paso);display:block;font-family:var(--fm);font-size:1.7rem;font-weight:400;color:transparent;-webkit-text-stroke:1.4px rgba(22,255,187,.5);line-height:1;margin-bottom:14px}
.pasos b{display:block;color:var(--white);font-size:1.1rem;margin-bottom:6px}
.pasos p{font-size:.92rem;color:var(--tx2)}

/* ------------------------------------------------------------- destacado
   Caja tipo `.ley` de la landing, para el bloque normativo / de cierre. */
.nota{position:relative;border:1px solid rgba(22,255,187,.25);border-radius:28px;padding:clamp(28px,4.4vw,48px);background:linear-gradient(130deg,rgba(22,255,187,.06),rgba(55,167,231,.05));display:flex;flex-wrap:wrap;align-items:center;gap:24px 46px;overflow:hidden}
.nota::before{content:'§';position:absolute;right:26px;top:-30px;font-size:11rem;color:rgba(22,255,187,.07);font-weight:700;pointer-events:none}
.nota .sello{flex-shrink:0;width:110px;height:110px;border-radius:50%;border:1.5px dashed rgba(22,255,187,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fm);color:var(--mint);font-size:.6rem;letter-spacing:1px;text-align:center;line-height:1.6}
.nota .sello b{font-size:1rem;letter-spacing:0}
.nota .tx{flex:1;min-width:min(400px,100%);position:relative}
.nota h2{font-size:clamp(1.4rem,3.2vw,2.2rem);margin-bottom:12px}
.nota p{max-width:64ch;color:var(--tx2)}
.nota p+p{margin-top:12px}

/* ------------------------------------------------------------- clientes
   Marquesina de logos reales, igual que en la landing. */
.clientes{padding:clamp(50px,7vw,84px) 0 clamp(26px,4vw,44px);overflow:hidden}
.clientes .ch{max-width:1200px;margin:0 auto 28px;padding:0 clamp(20px,4vw,50px);display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px}
.clientes h2{font-size:clamp(1.4rem,3.2vw,2.2rem)}
.clientes .ch span{font-family:var(--fm);font-size:.64rem;letter-spacing:2px;color:var(--mint);text-transform:uppercase}
.cl-track{display:flex;gap:18px;width:max-content;animation:marq 36s linear infinite}
.clientes:hover .cl-track{animation-play-state:paused}
.cl-track .c{flex-shrink:0;background:#fff;border-radius:16px;padding:10px 22px;display:flex;align-items:center;justify-content:center}
.cl-track .c img{height:58px;width:auto;display:block}

/* ------------------------------------------------- enlaces a las hermanas
   Las tres interiores se enlazan entre si y a la home. Sin esto quedarian
   colgando del sitemap sin ninguna ruta interna que las una. */
.sis{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.2vw,20px)}
@media(min-width:760px){.sis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sis a{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(240,252,255,.1);border-radius:20px;background:rgba(9,18,49,.6);padding:clamp(20px,2.8vw,26px);transition:border-color .25s ease,background .25s ease,transform .25s ease}
.sis a:hover{border-color:rgba(22,255,187,.45);background:rgba(22,255,187,.05);transform:translateY(-3px)}
.sis .lb{display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.sis b{display:block;color:var(--white);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.sis p{font-size:.9rem;color:var(--tx2);margin-top:5px}
.sis svg{flex-shrink:0;width:17px;height:17px;stroke:var(--mint);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:opacity .25s ease,transform .25s ease}
.sis a:hover svg{opacity:1;transform:translate(2px,-2px)}

/* -------------------------------------------------------------- cierre
   Franja de conversion antes del formulario, con la foto de Vina de fondo. */
.costa{position:relative;padding:clamp(74px,11vw,132px) clamp(20px,4vw,50px);text-align:center;isolation:isolate;overflow:hidden;border-radius:clamp(60px,12vw,190px) clamp(60px,12vw,190px) 0 0}
.costa::before{content:'';position:absolute;inset:0;background:url('vina.jpg') center/cover;z-index:-2}
.costa::after{content:'';position:absolute;inset:0;background:rgba(7,13,34,.8);z-index:-1}
.costa h2{font-size:clamp(2rem,5vw,3.8rem);max-width:18ch;margin:0 auto 18px}
.costa h2 em{font-style:normal;color:var(--mint)}
.costa p{max-width:560px;margin:0 auto 34px;color:var(--tx2)}
.costa .row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.costa .dir{max-width:none;margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-family:var(--fm);font-size:.72rem;letter-spacing:1.2px;color:var(--tx2)}
.costa .dir a{color:var(--white);border-bottom:1px solid rgba(22,255,187,.4);transition:color .25s ease}
.costa .dir a:hover{color:var(--mint)}

/* ------------------------------------------------------------ solicitud
   El formulario es el MISMO de la landing: el de Hapee (form 111, subcuenta
   nahuel_seguridad), embebido con <div data-zentru-form> + form-embed.js. Sus
   campos y su piel se editan en Hapee, no aca; este bloque es solo el hueco.
   El redirect al enviar tambien es el de Hapee: /gracias, ruta relativa. */
.sol{max-width:1200px;margin:0 auto;padding:clamp(58px,8vw,96px) clamp(20px,4vw,50px) clamp(20px,4vw,40px)}
.sol-head{max-width:640px;margin-bottom:clamp(26px,4vw,40px)}
.sol-head h2{font-size:clamp(1.8rem,4.2vw,3rem);margin-bottom:14px}
.sol-head p{color:var(--tx2);max-width:56ch}
/* Reserva el alto para que la pagina no salte mientras carga el iframe;
   despues el postMessage de Hapee fija el alto real. */
.sol-embed{min-height:620px}
.sol-embed iframe{display:block}
.sol-fallback{border:1px solid rgba(22,255,187,.22);border-radius:26px;background:linear-gradient(150deg,rgba(22,255,187,.07),rgba(55,167,231,.05)),var(--bg2);padding:clamp(24px,4vw,44px)}
.sol-fallback p{color:var(--tx2);max-width:52ch;margin-bottom:24px}

/* El nav fijo mide ~80px: sin scroll-margin el titulo de la seccion queda
   tapado al saltar desde el CTA. */
#solicitud,#servicio,#cobertura{scroll-margin-top:90px}

/* --------------------------------------------------------------- footer
   Copia del footer de index.html. La unica diferencia son los enlaces: en la
   landing son anclas (#pilares) y aca son rutas (/#pilares, /camaras-de-...),
   porque estas paginas son documentos aparte. */
.foot{position:relative;background:linear-gradient(180deg,var(--bg2),var(--bg) 62%);border-top:1px solid rgba(22,255,187,.16);overflow:hidden}
.foot::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(22,255,187,.7),rgba(41,221,218,.5),transparent);background-size:60% 100%;background-repeat:no-repeat;animation:fsweep 9s linear infinite}
@keyframes fsweep{from{background-position:-60% 0}to{background-position:160% 0}}
.foot::after{content:'';position:absolute;top:-190px;left:50%;width:min(820px,130%);height:380px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(22,255,187,.09),transparent);pointer-events:none}
.foot a:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:8px}
/* El selector global `nav{position:fixed;display:flex}` de la barra superior
   tambien alcanza a los <nav> semanticos del footer: hay que devolverlos. */
.foot nav{position:static;display:block;padding:0;z-index:auto;transition:none}

.foot-in{position:relative;max-width:1200px;margin:0 auto;padding:clamp(54px,8vw,88px) clamp(20px,4vw,50px) 0;display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,50px)}
.foot-in>*{min-width:0}
@media(min-width:720px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Cuatro columnas: marca + Servicios + Contacto + Accesos. La landing tiene
   cinco porque alli "Navegacion" (las anclas del propio scroll) va aparte; aca
   esa columna no existe, los enlaces a la home viven dentro de Servicios. La
   segunda fraccion es mas ancha que en index.html porque carga el texto largo
   ("Seguridad para condominios"). */
@media(min-width:1180px){.foot-in{grid-template-columns:1.45fr .95fr .95fr 1.1fr;gap:clamp(34px,4vw,52px)}}

.f-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:44ch}
@media(min-width:720px){.f-brand{grid-column:1/-1}}
@media(min-width:1180px){.f-brand{grid-column:auto}}
.f-lg{--lg:clamp(76px,10vw,92px);display:flex;align-items:center;gap:15px}
.f-lg img{height:var(--lg);width:auto;max-width:100%;object-fit:contain;display:block;flex-shrink:0;margin-block:calc(var(--lg)*-.14) calc(var(--lg)*-.145)}
.f-lg b{display:block;color:var(--white);font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.f-lg em{display:block;font-style:normal;font-family:var(--fm);font-size:.56rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--mint);margin-top:3px}
.f-brand p{font-size:.93rem;color:var(--tx2)}
.f-live{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--fm);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--tx2);border:1px solid rgba(22,255,187,.28);background:rgba(22,255,187,.05);border-radius:100px;padding:9px 17px}
.f-live i{width:8px;height:8px;border-radius:50%;background:var(--mint);font-style:normal;animation:blink 1.6s infinite}
.f-live b{color:var(--mint);font-weight:500}

.f-col h3{display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.6rem;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.f-col h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(22,255,187,.32),transparent)}
.f-list{list-style:none}
.f-list a{display:inline-flex;align-items:baseline;gap:10px;padding:7px 0;font-size:.93rem;color:var(--tx2);transition:color .25s ease,transform .25s ease}
.f-list a::before{content:'▸';font-size:.7rem;color:rgba(22,255,187,.55);transition:color .25s ease}
.f-list a:hover{color:var(--white);transform:translateX(4px)}
.f-list a:hover::before{color:var(--mint)}
/* La pagina en la que ya estas no se enlaza a si misma: se marca. */
.f-list [aria-current]{color:var(--mint);cursor:default}
.f-list [aria-current]::before{color:var(--mint)}

.f-contact{list-style:none;display:flex;flex-direction:column;gap:15px}
.f-contact li{display:flex;flex-direction:column;gap:3px}
.f-contact .lb{font-family:var(--fm);font-size:.55rem;letter-spacing:2.2px;text-transform:uppercase;color:#5D6A8C}
.f-contact a,.f-contact address{font-style:normal;font-size:.93rem;color:var(--tx2);overflow-wrap:anywhere;transition:color .25s ease}
.f-contact a:hover{color:var(--mint)}

.f-ext{list-style:none;display:flex;flex-direction:column;gap:8px}
.f-ext a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border:1px solid rgba(240,252,255,.1);border-radius:13px;background:rgba(7,13,34,.45);transition:border-color .25s ease,background .25s ease,transform .25s ease}
.f-ext a:hover{border-color:rgba(22,255,187,.45);background:rgba(22,255,187,.06);transform:translateY(-2px)}
.f-ext b{display:block;font-size:.9rem;font-weight:600;color:var(--white)}
.f-ext .lb{display:block;font-family:var(--fm);font-size:.55rem;letter-spacing:1px;overflow-wrap:anywhere;text-transform:uppercase;color:#5D6A8C;margin-top:2px}
.f-ext svg{flex-shrink:0;width:14px;height:14px;stroke:var(--mint);stroke-width:2.4;fill:none;opacity:.65;transition:opacity .25s ease,transform .25s ease}
.f-ext a:hover svg{opacity:1;transform:translate(2px,-2px)}

.f-cta{position:relative;grid-column:1/-1;margin-top:clamp(8px,2vw,16px);border:1px solid rgba(22,255,187,.22);border-radius:26px;background:linear-gradient(130deg,rgba(22,255,187,.08),rgba(55,167,231,.05));padding:clamp(26px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;overflow:hidden}
.f-cta::before{content:'';position:absolute;right:-50px;top:-80px;width:240px;height:240px;border-radius:50%;border:1.5px dashed rgba(22,255,187,.16);pointer-events:none}
.f-cta .tx{position:relative;min-width:min(280px,100%)}
.f-cta h3{font-size:clamp(1.3rem,2.8vw,1.85rem);max-width:22ch;margin-bottom:8px}
.f-cta p{font-size:.92rem;max-width:48ch;color:var(--tx2)}
.f-cta .bt{position:relative;white-space:nowrap}

.f-bot{position:relative;max-width:1200px;margin:clamp(42px,6vw,64px) auto 0;padding:0 clamp(20px,4vw,50px)}
.f-bot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 30px;padding:22px 0 32px;border-top:1px solid rgba(240,252,255,.08);font-family:var(--fm);font-size:.62rem;letter-spacing:1.3px;text-transform:uppercase;color:#5D6A8C}
.f-bot-in b{color:var(--tx2);font-weight:500}

/* ------------------------------------------------------------ scan line */
.scan{position:fixed;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.35;z-index:90;animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(-4px)}100%{transform:translateY(100vh)}}

/* Revelado al entrar en viewport; lo enciende el IntersectionObserver inline
   de cada pagina agregando .in. */
.rev{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.rev.in{opacity:1;transform:none}

/* Regla del proyecto: toda animacion se apaga con prefers-reduced-motion.
   .rev arranca en opacity:0, asi que aca hay que forzarla visible — sin
   animaciones no puede quedar contenido invisible. .scan es decorativa. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scan{display:none}
  .rev{opacity:1;transform:none}
  .foot::before{background-size:100% 100%}
}