/* Sitio público de LUCASOFT: portada (sitio/inicio) y páginas de texto (sitio/privacidad).
   Lo cargan todas las páginas desde sitio/layout.php. */

/* Colores tomados del logo: azul marino (LUCA) -> cian (SOFT) */
:root{
  --navy:#0b2d6e; --navy-2:#0a1f4d; --blue:#1565c0; --cyan:#00b4d8; --cyan-2:#22d3ee;
  --bg:#f5f8fc; --surface:#ffffff; --surface-2:#e8f1fa;
  --text:#0d1b33; --muted:#526581; --line:#d9e3ef; --wa:#25d366;
  --grad:linear-gradient(135deg,var(--navy) 0%,var(--blue) 50%,var(--cyan) 100%);
  --radius:16px; --shadow:0 12px 32px -14px rgba(11,45,110,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#071229; --surface:#0c1a38; --surface-2:#112449;
    --text:#e6eefb; --muted:#9bb0d0; --line:#1c3160; --shadow:0 12px 32px -14px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* Marca en texto, igual que el logo (LUCA marino + SOFT cian) */
.wordmark{font-weight:800;letter-spacing:.04em;font-size:20px}
.wordmark b{color:var(--navy)} .wordmark i{font-style:normal;color:var(--cyan)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wordmark b{color:#5b8fe0}}

/* Encabezado */
header{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
header.solido{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:38px;height:38px;object-fit:contain}
header:not(.solido) .wordmark b{color:#fff}
header:not(.solido) .nav ul a{color:#cfe0f7}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-size:15px;font-weight:500}
.nav ul a:hover{color:var(--cyan)}
@media (max-width:680px){.nav ul{display:none}}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  font-weight:600;text-decoration:none;font-size:15px;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(0,180,216,.6)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06)}
.btn-outline{border-color:var(--line);background:var(--surface)}
.btn-wa{background:var(--wa);color:#06331a}

/* ===== PORTADA con fondo de código ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(1200px 600px at 80% 20%,#123a86 0%,transparent 60%),var(--navy-2);color:#fff;overflow:hidden}
.fondo{position:absolute;inset:0;z-index:0}
/* object-fit:cover llena la portada sin deformar el video; object-position lo mantiene
   centrado, así al recortarse en pantallas anchas o angostas se pierden los bordes por igual */
.fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity 1s}
.fondo video.listo{opacity:.35}
#codigo{position:absolute;inset:0;margin:0;padding:96px 4vw 40px;overflow:hidden;
  font:14px/1.75 ui-monospace,"Cascadia Code",Consolas,"Courier New",monospace;color:#8fb6e8;opacity:.55;white-space:pre}
#codigo .k{color:#22d3ee} #codigo .s{color:#7ee0a1} #codigo .c{color:#5f7aa8} #codigo .f{color:#9ec5ff}
#codigo .cursor{display:inline-block;width:.6em;height:1.1em;background:#22d3ee;vertical-align:-2px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
/* Velo para que el texto se lea sobre el código */
.fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,31,77,.96) 0%,rgba(10,31,77,.82) 45%,rgba(10,31,77,.55) 100%),
             linear-gradient(0deg,var(--navy-2) 0%,transparent 25%)}
@media (max-width:860px){.fondo::after{background:rgba(10,31,77,.86)}}

.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .85fr;gap:48px;align-items:center;padding-top:96px;padding-bottom:64px}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cyan-2);
  border:1px solid rgba(34,211,238,.35);padding:6px 14px;border-radius:999px;margin-bottom:20px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan-2);box-shadow:0 0 10px var(--cyan-2)}
h1{font-size:clamp(36px,5.6vw,60px);line-height:1.06;margin:0 0 18px;letter-spacing:-.02em}
h1 em{font-style:normal;background:linear-gradient(90deg,#5ea3ff,var(--cyan-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;color:#c4d5ee;margin:0 0 30px;max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

.card-perfil{background:rgba(255,255,255,.96);color:var(--text);border-radius:24px;padding:28px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);text-align:center}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card-perfil{background:rgba(12,26,56,.92);border:1px solid var(--line)}}
.card-perfil .logo-grande{width:150px;height:150px;object-fit:contain;margin:0 auto 6px}
.card-perfil h2{margin:0;font-size:22px}
.card-perfil .rol{color:var(--muted);margin:2px 0 18px;font-size:15px}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;text-align:left}
.datos li{display:flex;gap:10px;align-items:center}
.datos svg{width:18px;height:18px;color:var(--cyan);flex:none}

/* ===== Secciones ===== */
section{padding:76px 0;position:relative}
section + section{border-top:1px solid var(--line)}
.titulo{max-width:660px;margin-bottom:38px}
.titulo .linea{display:flex;align-items:center;gap:0;margin-bottom:12px}
.titulo .linea::before{content:"";width:12px;height:12px;border-radius:50%;border:2.5px solid var(--cyan)}
.titulo .linea::after{content:"";width:64px;height:2.5px;background:linear-gradient(90deg,var(--cyan),var(--navy))}
.titulo h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 10px;letter-spacing:-.01em}
.titulo p{color:var(--muted);margin:0;font-size:17px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.item .ico{width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.item .ico svg{width:22px;height:22px}
.item h3{margin:0 0 6px;font-size:17px}
.item p{margin:0;color:var(--muted);font-size:15px}

/* Pasos del bot, unidos como un circuito */
.pasos{counter-reset:paso;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:40px;position:relative}
.paso{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.paso::before{counter-increment:paso;content:counter(paso);display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:14px;margin-bottom:10px;
  box-shadow:0 0 0 4px var(--surface),0 0 0 6px color-mix(in srgb,var(--cyan) 40%,transparent)}
.paso h3{margin:0 0 4px;font-size:16px}
.paso p{margin:0;color:var(--muted);font-size:14px}

/* Cliente destacado */
.cliente{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
@media (max-width:800px){.cliente{grid-template-columns:1fr}}
.cliente .lado-a{padding:34px;background:linear-gradient(150deg,#7c2d12,#c2410c 55%,#f59e0b);color:#fff}
.cliente .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 10px;border-radius:999px;margin-bottom:14px}
.cliente .lado-a h3{font-size:34px;margin:0 0 6px}
.cliente .lado-a p{margin:0 0 18px;opacity:.92}
.cliente .lado-a ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.cliente .lado-b{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.cliente .lado-b h4{margin:0;font-size:18px}
.cliente .lado-b p{margin:0;color:var(--muted);font-size:15px}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.separador{border:none;border-top:1px solid var(--line);margin:12px 0}
.nota{font-size:13px;color:var(--muted)}

/* Contacto */
.contacto{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:24px;padding:44px 28px;text-align:center}
.contacto h2{margin:0 0 8px;font-size:30px}
.contacto p{margin:0 auto 24px;color:#dbeafe;max-width:540px}
.contacto svg.circuito{position:absolute;right:-30px;bottom:-30px;width:260px;opacity:.18;pointer-events:none}

footer{padding:30px 0 42px;color:var(--muted);font-size:14px;text-align:center}
footer .wordmark{font-size:16px;display:block;margin-bottom:4px}
footer .legal{display:block;margin-top:6px}
footer .legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer .legal a:hover{color:var(--cyan)}

/* ===== Páginas de texto (política de privacidad) ===== */
/* Franja superior con los colores de la portada, más baja */
.pagina-cabecera{position:relative;overflow:hidden;color:#fff;padding:132px 0 56px;
  background:radial-gradient(900px 400px at 85% 0%,#123a86 0%,transparent 60%),var(--navy-2)}
.pagina-cabecera svg.circuito{position:absolute;right:-20px;bottom:-40px;width:240px;opacity:.14;pointer-events:none}
.pagina-cabecera .eyebrow{margin-bottom:16px}
.pagina-cabecera h1{font-size:clamp(32px,4.6vw,48px);margin:0 0 10px}
.pagina-cabecera p{margin:0;color:#c4d5ee;max-width:620px;font-size:17px}

.documento{max-width:820px;margin:-28px auto 0;position:relative;z-index:1;background:var(--surface);
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:40px clamp(20px,5vw,48px)}
.documento .fecha{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--surface-2);padding:5px 12px;border-radius:999px;margin:0 0 20px}
.documento h2{font-size:20px;margin:36px 0 10px;display:flex;align-items:center;gap:10px;scroll-margin-top:90px}
.documento h2::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--cyan)}
.documento p,.documento li{color:var(--muted)}
.documento strong{color:var(--text)}
.documento ul{padding-left:1.2rem;margin:0}
.documento li{margin:6px 0}
.documento li::marker{color:var(--cyan)}
.documento a{color:var(--blue);font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .documento a{color:var(--cyan-2)}}
.documento .destacado{border-left:3px solid var(--cyan);background:var(--surface-2);padding:14px 18px;border-radius:0 12px 12px 0;margin:16px 0}
.documento .destacado p{margin:0}
.volver{display:flex;justify-content:center;padding:36px 0 8px}

/* ===== Página de producto (LUCASOFT Talento) ===== */
/* Cabecera en dos columnas: texto a la izquierda, vista previa del panel a la derecha */
.pagina-cabecera.producto{padding:120px 0 72px}
.producto-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media (max-width:860px){.producto-grid{grid-template-columns:1fr}}
.pagina-cabecera.producto p{margin-bottom:26px}

/* Vista previa ilustrativa (datos ficticios, hecha con HTML/CSS: no es una captura) */
.vista-panel{background:rgba(255,255,255,.97);color:var(--text);border-radius:20px;padding:16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);font-size:13px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vista-panel{background:rgba(12,26,56,.94);border:1px solid var(--line)}}
.vp-barra{display:flex;align-items:center;gap:6px;margin-bottom:12px;color:var(--muted);font-weight:600}
.vp-barra i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.vp-barra span{margin-left:6px}
.vp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.vp-kpis div{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.vp-kpis b{display:block;font-size:22px;line-height:1.1;color:var(--navy)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vp-kpis b{color:#8db8ff}}
.vp-kpis span{color:var(--muted);font-size:12px}
.vp-kpis .alerta{background:linear-gradient(135deg,rgba(0,180,216,.16),rgba(21,101,192,.16))}
.vp-kpis .alerta b{color:var(--blue)}
.vp-lista{display:grid;gap:6px;margin-bottom:12px}
.vp-lista div{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.vp-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;flex:none}
.vp-pill.ok{background:#dcfce7;color:#166534}
.vp-pill.pend{background:#fef3c7;color:#92400e}
.vp-saldo span{font-weight:600}
.vp-bar{height:8px;border-radius:999px;background:var(--surface-2);margin:6px 0 4px;overflow:hidden}
.vp-bar i{display:block;height:100%;background:var(--grad);border-radius:999px}
.vp-saldo small{color:var(--muted)}

/* Bloque del producto en la portada */
.producto-teaser{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
@media (max-width:800px){.producto-teaser{grid-template-columns:1fr;padding:26px}}
.producto-teaser .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface-2);color:var(--blue);padding:5px 10px;border-radius:999px;margin-bottom:12px}
.producto-teaser h3{font-size:28px;margin:0 0 8px}
.producto-teaser p{margin:0 0 18px;color:var(--muted)}
.producto-teaser ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.producto-teaser li{display:flex;gap:10px;align-items:center;font-size:15px}
.producto-teaser li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--cyan)}

/* Aparición suave al hacer scroll */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.revelar.visto{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .revelar{opacity:1;transform:none;transition:none}
  #codigo .cursor{animation:none}
}

/* Preguntas frecuentes (página del bot): <details> abre y cierra sin JavaScript */
.faq{max-width:820px;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 22px}
.faq details[open]{border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:18px 28px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;color:var(--cyan)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--muted)}
.faq-nota{color:var(--muted);font-size:15px;margin:6px 0 0}