/* ===========================================================================
   FLUDRA — software para negocios. Piel propia (no la comparte ningún otro sitio).
   Dirección: la herramienta de trabajo. Claro, frío y preciso: blanco con un gris
   azulado de pantalla, Geist para leer y Geist Mono para los datos (como en un
   sistema), esquinas de 10 px de interfaz, y el azul de la línea F como luz de
   estado. El producto se ENSEÑA funcionando: las imágenes son pantallas reales.
   =========================================================================== */
@font-face{font-family:Geist;src:url("/fuentes/Geist-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fuentes/Geist-Mono-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
:root{
  --s0:#FFFFFF; --s1:#F4F7FA; --s2:#E9EEF4; --s3:#DCE3EB;
  --borde:#DCE3EB; --borde-2:#C5D0DC;
  --t:#0B1A2B; --t2:#3E5268; --t3:#566A80;
  --f:#4FA3F7; --f-t:#1D63B8; --f-osc:#0B3A70; --ok:#157a67; --senal:#FFD000;
  --mono:"Geist Mono",ui-monospace,monospace;
  --curva:cubic-bezier(.16,1,.3,1); --ancho-max:1220px;
}
html{background:var(--s0);color-scheme:light}
body{background:var(--s0);color:var(--t);font:400 17px/1.6 Geist,system-ui,sans-serif;font-feature-settings:"ss01"}
h1,h2,h3{font-family:Geist,system-ui,sans-serif;margin:0;letter-spacing:-.035em;font-weight:640}
h1{font-size:clamp(42px,8vw,92px);line-height:.98;letter-spacing:-.05em}
h2{font-size:clamp(32px,4.8vw,56px);line-height:1.02;letter-spacing:-.04em}
h3{font-size:clamp(20px,1.8vw,23px);line-height:1.2;letter-spacing:-.02em;font-weight:620}
h1 em,h2 em{font-style:normal;color:var(--f-t)}
p{margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
.sub{font-size:clamp(18px,1.6vw,20.5px);color:var(--t2);max-width:44ch;margin-top:18px}
.dato{font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);display:inline-flex;align-items:center;gap:8px}
.dato i{width:7px;height:7px;border-radius:50%;background:var(--f);box-shadow:0 0 0 3px color-mix(in srgb,var(--f) 25%,transparent)}

/* cabecera: barra de aplicación */
.cab{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--s0) 88%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--borde)}
.cab .ancho{display:flex;align-items:center;gap:16px;min-height:62px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font:680 21px Geist;letter-spacing:-.04em;white-space:nowrap}
.logo i{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--f),var(--f-t));position:relative}
.logo i::after{content:"";position:absolute;left:5px;right:5px;top:6px;height:2px;background:#fff;box-shadow:0 4px 0 #fff;border-radius:2px;width:7px}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--t2);font-size:15px;white-space:nowrap}
.nav a[aria-current]{color:var(--t);background:var(--s2)}
@media (hover:hover){.nav a:hover{color:var(--t);background:var(--s1)}}
@media (max-width:899px){.cab .ancho{flex-wrap:wrap;gap:0 12px;padding-top:6px}.nav{order:3;width:100%;margin:10px -9px 4px;flex-wrap:wrap;overflow:visible}.nav a{padding:6px 9px;font-size:14.5px}.cab{position:relative}.cab .btn{margin-left:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:10px;font:600 15.5px Geist;text-decoration:none;border:0;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s var(--curva)}
.btn-f{background:var(--t);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -6px rgba(11,26,43,.5)}
.btn-wa{background:#0E7A5F;color:#fff}
.btn-wa::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.2.1.7-.2 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.2.1.7-.2 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-b{background:var(--s0);color:var(--t);box-shadow:inset 0 0 0 1px var(--borde-2)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}.btn-f:hover{background:#18304D}.btn-b:hover{box-shadow:inset 0 0 0 1px var(--f-t)}.btn-wa:hover{background:#0B6650}}
.cab .btn{min-height:40px;padding:0 14px;font-size:14.5px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* portada: texto + el equipo en 3D (perspectiva CSS real, gira con el puntero) */
.portada{padding:44px 0 56px;background:radial-gradient(70% 60% at 80% 30%,color-mix(in srgb,var(--f) 14%,transparent),transparent 70%),linear-gradient(var(--s0),var(--s1))}
.portada-g{display:grid;gap:36px}
@media (min-width:1000px){.portada{padding:80px 0 96px}.portada-g{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}}
.portada .dato{margin-bottom:18px}
.escena3d{perspective:1400px;position:relative;min-height:300px;display:grid;place-items:center}
.equipo{position:relative;width:min(100%,640px);transform-style:preserve-3d;transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-18deg));transition:transform .6s var(--curva)}
.tableta{position:relative;border-radius:22px;padding:12px;background:linear-gradient(145deg,#1b2a3c,#0a1420);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 40px 60px -30px rgba(11,26,43,.55),0 18px 30px -18px rgba(11,26,43,.4);transform:translateZ(0)}
.tableta img{border-radius:12px;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top left;background:#fff}
.tableta::after{content:"";position:absolute;inset:12px;border-radius:12px;background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 35%);pointer-events:none}
.telefono{position:absolute;right:-4%;bottom:-12%;width:30%;border-radius:20px;padding:6px;background:#0a1420;box-shadow:0 30px 50px -20px rgba(11,26,43,.6);transform:translateZ(90px)}
.telefono img{border-radius:15px;width:100%;aspect-ratio:9/17;object-fit:cover;object-position:top center;background:#fff}
.ficha-viva{position:absolute;left:-5%;top:10%;transform:translateZ(60px);background:var(--s0);border:1px solid var(--borde);border-radius:12px;padding:10px 12px;box-shadow:0 16px 30px -16px rgba(11,26,43,.35);font:500 12.5px/1.35 var(--mono);color:var(--t2)}
.ficha-viva b{display:block;font:650 20px Geist;color:var(--t);letter-spacing:-.02em}
.ficha-viva .ok{color:var(--ok)}
@media (max-width:640px){.telefono{right:0;width:28%}.ficha-viva{left:0;top:auto;bottom:-8%}}
.leyenda{margin-top:28px;font-size:13px;color:var(--t3);text-align:center}

/* secciones */
.sec{padding:72px 0}
.sec.gris{background:var(--s1);border-block:1px solid var(--borde)}
.cabeza{display:grid;gap:12px;margin-bottom:32px;max-width:760px}
.cabeza p{color:var(--t2);font-size:18px;max-width:56ch}
@media (min-width:1000px){.sec{padding:104px 0}}

/* giro × módulo */
.giros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.giros button{min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--borde-2);background:var(--s0);font:560 15px Geist;color:var(--t2);cursor:pointer}
.giros button[aria-pressed=true]{background:var(--t);color:#fff;border-color:var(--t)}
.mods{display:grid;gap:14px}
@media (min-width:760px){.mods{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.mods{grid-template-columns:repeat(4,1fr)}}
.mod{display:grid;grid-template-rows:auto 1fr;text-decoration:none;background:var(--s0);border:1px solid var(--borde);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .25s,opacity .25s,transform .3s var(--curva)}
.mod figure{margin:0;aspect-ratio:16/10;background:var(--s2);overflow:hidden;border-bottom:1px solid var(--borde)}
.mod img{width:100%;height:100%;object-fit:cover;object-position:top left}
.mod .tx{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.mod p{color:var(--t2);font-size:15.5px}
.mod .ir{font:600 14.5px Geist;color:var(--f-t);margin-top:4px}
.mod .ir::after{content:" →"}
.mod .uso{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ok)}
.mod.tenue{opacity:.5}
.mod.tenue .uso{color:var(--t3)}
@media (hover:hover){.mod:hover{border-color:var(--f);box-shadow:0 18px 40px -24px rgba(11,58,112,.45);transform:translateY(-2px)}}

/* el recuadro de la demo: grande, altura fija, no empuja la página */
.demo-caja{border:1px solid var(--borde-2);border-radius:16px;background:var(--s0);box-shadow:0 30px 60px -40px rgba(11,26,43,.5);overflow:hidden}
.demo-caja .barra{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--borde);background:var(--s1);font:500 12.5px var(--mono);color:var(--t3)}
.demo-caja .barra i{width:10px;height:10px;border-radius:50%;background:var(--s3)}
.demo-caja .barra span{margin-left:8px}
.demo-caja .barra a{margin-left:auto;color:var(--f-t)}
.demo-caja .marco-vivo{border-radius:0;height:min(80vh,780px);min-height:560px}
.demo-caja .cargar{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;padding:20px;background:linear-gradient(rgba(244,247,250,.86),rgba(244,247,250,.96)),var(--fondo) top left/cover;color:var(--t2)}
.demo-caja .cargar b{font:650 22px Geist;color:var(--t);letter-spacing:-.02em}
.nota{font-size:14.5px;color:var(--t3);margin-top:12px}

/* hechos (seguridad) */
.hechos{display:grid;gap:12px}
@media (min-width:760px){.hechos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.hechos{grid-template-columns:repeat(3,1fr)}}
.hecho{background:var(--s0);border:1px solid var(--borde);border-radius:14px;padding:20px}
.hecho .dato{margin-bottom:10px}
.hecho p{color:var(--t2);font-size:16px;margin-top:6px}

/* precios: selector vacío */
.precio{display:grid;gap:20px}
@media (min-width:1000px){.precio{grid-template-columns:minmax(0,6fr) minmax(320px,5fr);gap:32px;align-items:start}}
fieldset{border:0;margin:0 0 22px;padding:0}
legend{font:620 19px Geist;letter-spacing:-.02em;margin-bottom:10px}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{position:relative}
.op input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.op span{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:10px;border:1px solid var(--borde-2);background:var(--s0);font-size:15.5px;color:var(--t2)}
.op input:checked + span{border-color:var(--f-t);background:color-mix(in srgb,var(--f) 12%,#fff);color:var(--t);box-shadow:inset 0 0 0 1px var(--f-t)}
.op input:focus-visible + span{outline:3px solid var(--f);outline-offset:2px}
.cuenta{position:sticky;top:84px;background:var(--t);color:#E6EEF7;border-radius:16px;padding:22px;display:grid;gap:12px}
.cuenta h2{font-size:24px;color:#fff;letter-spacing:-.02em}
.cuenta ul{margin:0;padding-left:18px;color:#C9D6E4;font-size:15.5px}
.cuenta .monto{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9FB3C8}
.cuenta .monto b{display:block;font:650 34px Geist;letter-spacing:-.03em;color:#fff;text-transform:none}
.cuenta .btn-wa{width:100%}
.cuenta p{font-size:14.5px;color:#B5C4D4}

/* documentos y listas */
.doc{max-width:720px;padding:32px 0 80px}
.doc h1{font-size:clamp(38px,6vw,64px);margin-bottom:16px}
.doc h2{font-size:clamp(26px,3vw,34px);margin:40px 0 10px}
.doc p,.doc li{color:var(--t2);font-size:17.5px;margin-top:12px}
.migas{display:flex;gap:8px;flex-wrap:wrap;padding-top:24px;font-size:14px;color:var(--t3)}
.migas a{color:var(--t2)}
.lista{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.lista li{background:var(--s1);border:1px solid var(--borde);border-radius:12px;padding:14px 16px;margin:0;color:var(--t2);font-size:16px}
.lista li b{display:block;color:var(--t);font-weight:600}
.dos{display:grid;gap:28px}
@media (min-width:1000px){.dos{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}}
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:p}
.pasos li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;background:var(--s0);border:1px solid var(--borde);border-radius:14px;padding:18px}
.pasos li::before{content:counter(p);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--s2);font:600 15px var(--mono);color:var(--f-t)}
.pasos b{font:620 18.5px Geist;letter-spacing:-.01em}
.pasos span{color:var(--t2);font-size:16px}
.valores{display:grid;gap:12px;margin-top:18px}
@media (min-width:760px){.valores{grid-template-columns:repeat(2,1fr)}}
.valores div{background:var(--s1);border:1px solid var(--borde);border-radius:14px;padding:18px}
.valores b{display:block;font:620 18.5px Geist;margin-bottom:6px}
.valores p{margin:0;font-size:16px}
.posts{display:grid;gap:12px}
.posts a{display:grid;gap:8px;padding:20px;border:1px solid var(--borde);border-radius:14px;text-decoration:none;background:var(--s0)}
.posts img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:top left;border-radius:8px;border:1px solid var(--borde)}
.posts span{color:var(--t2)}
.posts time{font:500 12.5px var(--mono);color:var(--t3)}
@media (min-width:760px){.posts a{grid-template-columns:300px 1fr;column-gap:24px;align-items:start}.posts img{grid-row:span 3;aspect-ratio:16/10}}
@media (hover:hover){.posts a:hover{border-color:var(--f)}}
.cierre{padding:88px 0 112px;background:var(--t);color:#fff}
.cierre h2{max-width:18ch}
.cierre p{color:#C9D6E4;margin-top:14px;max-width:48ch}
.cierre .btn-b{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.cruce{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--borde);border-radius:14px;background:var(--s1);text-decoration:none;margin-top:28px}
.cruce b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--c,#14B8A6);color:#000;font-weight:800}
.cruce span{color:var(--t2);font-size:16px}
.cruce strong{display:block;color:var(--t);font-weight:600}

/* pie */
.pie{border-top:1px solid var(--borde);padding:48px 0 120px;font-size:15px;color:var(--t2);background:var(--s1)}
.pie .ancho{display:grid;gap:28px}
@media (min-width:760px){.pie .ancho{grid-template-columns:2fr 1fr 1fr}.pie{padding-bottom:56px}}
.pie b{display:block;color:var(--t);margin-bottom:10px;font-weight:620}
.pie a{display:block;padding:6px 0;color:var(--t2);text-decoration:none}
@media (hover:hover){.pie a:hover{color:var(--t)}}
.fijo{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),#fff 35%);transition:transform .3s var(--curva)}
.fijo .btn{width:100%}
.fijo.fuera{transform:translateY(110%)}
@media (min-width:760px){.fijo{display:none}}

/* aparición: los datos "se escriben" como en una pantalla que carga, no un fundido */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .carga{animation:carga linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
    @keyframes carga{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  }
}