/* Portada pública de CECATECIS — diseño "Noche dorada" (2026-09-27).
   GENERADO a partir de la maqueta aprobada por el usuario (maquetas-landing/,
   local, fuera de git) y luego ajustado a mano en la sección INTEGRACIÓN del final.
   - Todo vive dentro de #landing-view: no afecta al resto del sistema.
   - Escala fluida: --u = 16px (1rem) hasta 1440 px de ancho y crece con la pantalla
     (27" ≈ 28px, tope 40px en TV). Los tamaños son calc(N * var(--u)).
   - Solo se animan opacity y transform. Desde 2026-09-28 (decisión del usuario)
     landing.js ya NO pone html.lp-ligero ni html.lp-sin-mov: la portada se anima
     siempre, aunque Windows pida "reducir animaciones". Las reglas quedan sin uso.
   - Colores = los del sistema; letras del logo: Jost (nombre) + Nunito (lema). */
#landing-view {
    --u-ancho: clamp(16px, 1.1111vw, 40px);
    --u: var(--u-ancho);
    --navy: #002D62; --navy-2: #003b82; --navy-3: #001a38; --fondo: #00224b;
    --oro: #FFC300; --oro-2: #e6b000; --oro-suave: #f3d27a;
    --texto: #f5f7fb; --suave: #b3c3da; --linea: rgba(255, 255, 255, .12);
    --titulo: 'Jost', 'Segoe UI', system-ui, sans-serif; --acento: 'Nunito', 'Segoe UI', system-ui, sans-serif; --sans: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    --ease: cubic-bezier(.2, .75, .2, 1);
}
#landing-view *, #landing-view *::before, #landing-view *::after { box-sizing: border-box; }
#landing-view { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: calc(1.0625 * var(--u)); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
#landing-view img { display: block; max-width: 100%; }
#landing-view a { color: inherit; }
#landing-view .c { width: 100%; max-width: calc(82.5 * var(--u)); margin: 0 auto; padding: 0 clamp(calc(1.25 * var(--u)), 4vw, calc(3 * var(--u))); }
#landing-view :focus-visible { outline: 2px solid var(--oro); outline-offset: calc(0.1875 * var(--u)); border-radius: calc(0.375 * var(--u)); }
#landing-view h1, #landing-view h2, #landing-view h3 { font-family: var(--titulo); font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.04; }
#landing-view h2 { font-size: clamp(calc(2.2 * var(--u)), 5vw, calc(4.1 * var(--u))); }
#landing-view h1 em, #landing-view h2 em, #landing-view h3 em { font-family: var(--acento); font-style: italic; font-weight: 900; letter-spacing: -.01em; color: var(--oro); }
#landing-view .ceja { display: inline-flex; align-items: center; gap: calc(0.875 * var(--u)); font-size: calc(.74 * var(--u)); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); margin-bottom: calc(1.25 * var(--u)); }
#landing-view .ceja::before { content: ""; width: calc(2.375 * var(--u)); height: 1px; background: currentColor; }
#landing-view .lead { font-size: clamp(calc(1.02 * var(--u)), 1.4vw, calc(1.16 * var(--u))); color: var(--suave); max-width: calc(36.25 * var(--u)); }
#landing-view .btn { display: inline-flex; align-items: center; gap: calc(0.625 * var(--u)); border-radius: calc(62.4375 * var(--u)); padding: calc(1 * var(--u)) calc(1.75 * var(--u)); font-weight: 800; font-size: calc(.96 * var(--u)); text-decoration: none; cursor: pointer; border: 0; font-family: inherit; transition: transform .25s var(--ease), background-color .25s, color .25s; }
#landing-view .btn svg { width: calc(1.1875 * var(--u)); height: calc(1.1875 * var(--u)); flex-shrink: 0; }
#landing-view .btn-oro { background: var(--oro); color: var(--navy); box-shadow: 0 calc(0.625 * var(--u)) calc(1.625 * var(--u)) rgba(255, 195, 0, .22); }
#landing-view .btn-oro { position: relative; overflow: hidden; }
#landing-view .btn-oro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
#landing-view .btn-oro:hover { transform: translateY(-2px); background: #ffcd26; }
#landing-view .btn-oro:hover::after { transform: translateX(120%); }
#landing-view .btn-linea { color: var(--texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
#landing-view .btn-linea:hover { box-shadow: inset 0 0 0 1px var(--oro); color: var(--oro); }
#landing-view .enlace { display: inline-flex; align-items: center; gap: calc(0.5 * var(--u)); color: var(--oro); font-weight: 800; text-decoration: none; font-size: calc(.92 * var(--u)); }
#landing-view .enlace svg { width: calc(1.0625 * var(--u)); transition: transform .25s var(--ease); }
#landing-view .enlace:hover svg { transform: translateX(calc(0.25 * var(--u))); }
#landing-view .rv { opacity: 0; transform: translateY(calc(1.875 * var(--u))); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
#landing-view .inicio.rv { transform: translateX(calc(3 * var(--u))); }
#landing-view .rv.visto { opacity: 1; transform: none; }
#landing-view .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
#landing-view .pal > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease) calc(var(--i) * 70ms + 150ms); }
html.lp-listo #landing-view h1 .pal > span, #landing-view h2.visto .pal > span { transform: none; }
html.lp-ligero #landing-view .hero-fondo img, html.lp-ligero #landing-view .hero::after, html.lp-ligero #landing-view .proximo { animation: none !important; }
html.lp-ligero #landing-view .inicio:hover > img, html.lp-ligero #landing-view .esc:hover > img { transform: none !important; }
#landing-view .en-pausa .marq-pista, #landing-view .en-pausa::after, #landing-view .en-pausa .hero-fondo img, #landing-view .en-pausa .proximo { animation-play-state: paused !important; }
html.lp-sin-mov #landing-view *, html.lp-sin-mov #landing-view *::before, html.lp-sin-mov #landing-view *::after { animation: none !important; transition: none !important; }
html.lp-sin-mov #landing-view .rv { opacity: 1; transform: none; }
#landing-view .sec { content-visibility: auto; contain-intrinsic-size: auto calc(56.25 * var(--u)); }
#landing-view .foto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.375 * var(--u)); text-align: center; padding: calc(1.125 * var(--u)); color: var(--oro-suave); overflow: hidden; margin: 0;
    background: repeating-linear-gradient(135deg, rgba(255, 195, 0, .05) 0 calc(0.875 * var(--u)), transparent calc(0.875 * var(--u)) calc(1.75 * var(--u))), linear-gradient(160deg, var(--navy-2), var(--navy)); border: 1px dashed rgba(255, 195, 0, .5); border-radius: calc(1.125 * var(--u)); }
#landing-view .foto svg { width: calc(1.875 * var(--u)); height: calc(1.875 * var(--u)); }
#landing-view .foto b { font-size: calc(.8 * var(--u)); letter-spacing: .18em; font-weight: 800; }
#landing-view .foto span { font-size: calc(.84 * var(--u)); color: #d3dcea; max-width: calc(16.25 * var(--u)); line-height: 1.4; }
#landing-view .cab { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; min-height: var(--barra-alto); padding: var(--barra-pad-v) 0; border-bottom: 3px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
#landing-view .cab.solida { background: #fff; border-bottom-color: var(--oro); box-shadow: 0 2px 6px rgba(0, 30, 70, .18); }
#landing-view .cab .c { display: flex; align-items: center; gap: var(--barra-gap); max-width: none; padding: 0 var(--barra-margen); }
#landing-view .hamb { width: calc(var(--barra-boton) * 1.1); height: var(--barra-boton); flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--barra-boton) * .13); padding: 0; background: var(--navy); border: 2px solid rgba(255, 195, 0, .55); border-radius: calc(var(--barra-boton) * .21); cursor: pointer; transition: transform .2s, border-color .2s; }
#landing-view .cab.solida .hamb { border-color: #001f44; }
#landing-view .hamb span { display: block; width: calc(var(--barra-boton) * .55); height: max(3px, calc(var(--barra-boton) * .075)); background: #fff; border-radius: 2px; }
#landing-view .hamb:hover { transform: scale(1.05); border-color: var(--oro); }
#landing-view .logo { position: relative; height: var(--barra-logo); width: calc(var(--barra-logo) * 5.1); flex-shrink: 0; }
#landing-view .logo img { position: absolute; left: 0; top: 0; height: var(--barra-logo); width: auto; transition: opacity .3s; }
#landing-view .logo .claro { opacity: 0; }
#landing-view .cab.solida .logo .claro { opacity: 1; }
#landing-view .cab.solida .logo .oscuro { opacity: 0; }
#landing-view .cab-der { margin-left: auto; display: flex; align-items: center; gap: var(--barra-gap); }
#landing-view .ingresar { display: inline-flex; align-items: center; gap: calc(var(--barra-letra) * .5); border-radius: calc(var(--barra-boton) * .21); height: var(--barra-boton); padding: 0 calc(var(--barra-letra) * 1.1); font: 800 var(--barra-letra) var(--sans); cursor: pointer; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .4); transition: background-color .25s, color .25s, border-color .25s; }
#landing-view .ingresar svg { width: calc(var(--barra-letra) * 1.1); height: auto; }
#landing-view .ingresar:hover { border-color: var(--oro); color: var(--oro); }
#landing-view .cab.solida .ingresar { background: var(--navy); border-color: var(--navy); color: #fff; }
#landing-view .cab.solida .ingresar:hover { background: var(--navy-2); }
#landing-view .marca-cab { position: absolute; top: calc(5.625 * var(--u)); left: 0; width: 1px; height: 1px; }
#landing-view .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--barra-alto) + 2.25 * var(--u)) 0 calc(3.75 * var(--u)); overflow: hidden; background: var(--navy-3); }
#landing-view .hero-fondo { position: absolute; inset: 0; z-index: 0; }
#landing-view .hero-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
#landing-view .hero-fondo img.activa { opacity: 1; animation: lp-acercar 9s ease-out both; }
@keyframes lp-acercar { from { transform: scale(1.12); } to { transform: scale(1); } }
#landing-view .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 26, 56, .97) 0%, rgba(0, 45, 98, .86) 45%, rgba(0, 59, 130, .38) 100%), linear-gradient(0deg, var(--fondo) 1%, transparent 38%); }
#landing-view .hero::after { content: ""; position: absolute; z-index: 1; width: calc(56.25 * var(--u)); height: calc(56.25 * var(--u)); left: calc(-20 * var(--u)); top: calc(-23.75 * var(--u)); background: radial-gradient(circle, rgba(255, 195, 0, .13), transparent 60%); pointer-events: none; animation: lp-brillo 14s ease-in-out infinite alternate; }
@keyframes lp-brillo { to { transform: translate(calc(12.5 * var(--u)), calc(8.75 * var(--u))); } }
#landing-view .etiqueta-foto { position: absolute; z-index: 3; top: calc(5.75 * var(--u)); right: clamp(calc(1.25 * var(--u)), 4vw, calc(3 * var(--u))); background: rgba(0, 26, 56, .85); border: 1px dashed rgba(255, 195, 0, .6); color: var(--oro-suave); font-size: calc(.72 * var(--u)); font-weight: 800; letter-spacing: .12em; padding: calc(0.4375 * var(--u)) calc(0.75 * var(--u)); border-radius: calc(62.4375 * var(--u)); }
#landing-view .hero .c { position: relative; z-index: 2; display: grid; gap: calc(2.75 * var(--u)); }
#landing-view .hero h1 { font-size: clamp(calc(3 * var(--u)), 7.6vw, calc(6.4 * var(--u))); max-width: 11ch; line-height: 1; }
#landing-view .hero .lead { margin: calc(1.5 * var(--u)) 0 calc(1.875 * var(--u)); }
#landing-view .hero-acciones { display: flex; flex-wrap: wrap; gap: calc(0.875 * var(--u)); align-items: center; }
#landing-view .buscador { position: relative; max-width: calc(38.75 * var(--u)); margin-top: calc(1.875 * var(--u)); }
#landing-view .buscador label { display: block; font-size: calc(.74 * var(--u)); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); margin-bottom: calc(0.625 * var(--u)); }
#landing-view .buscador-campo { display: flex; align-items: center; gap: calc(0.75 * var(--u)); background: rgba(0, 26, 56, .7); border: 1px solid rgba(255, 255, 255, .22); border-radius: calc(62.4375 * var(--u)); padding: calc(0.375 * var(--u)) calc(0.375 * var(--u)) calc(0.375 * var(--u)) calc(1.375 * var(--u)); transition: border-color .25s; }
#landing-view .buscador-campo:focus-within { border-color: var(--oro); }
#landing-view .buscador-campo > svg { width: calc(1.25 * var(--u)); color: var(--oro); flex-shrink: 0; }
#landing-view .buscador input { flex: 1; min-width: 0; background: none; border: 0; color: var(--texto); font: 500 calc(1.02 * var(--u)) var(--sans); padding: calc(0.75 * var(--u)) 0; outline: none; }
#landing-view .buscador input::placeholder { color: #93a4bf; }
#landing-view .buscador-campo .btn { padding: calc(0.75 * var(--u)) calc(1.25 * var(--u)); }
#landing-view .sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + calc(0.625 * var(--u))); z-index: 20; background: #fff; border-radius: calc(1.125 * var(--u)); padding: calc(0.5 * var(--u)); box-shadow: 0 calc(1.5 * var(--u)) calc(3.125 * var(--u)) rgba(0, 10, 30, .45); border-top: calc(0.1875 * var(--u)) solid var(--oro); }
#landing-view .sugerencias a { display: block; padding: calc(0.6875 * var(--u)) calc(0.875 * var(--u)); border-radius: calc(0.75 * var(--u)); text-decoration: none; color: var(--navy); }
#landing-view .sugerencias a b { display: block; }
#landing-view .sugerencias a small { color: #5a6b80; font-size: calc(.82 * var(--u)); }
#landing-view .sugerencias a:hover, #landing-view .sugerencias a.activo { background: #eef4fb; }
#landing-view .sugerencias .sug-todo, #landing-view .sugerencias .sug-wsp small { color: var(--navy-2); font-weight: 800; font-size: calc(.88 * var(--u)); }
#landing-view .hero-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); padding-top: calc(1.5 * var(--u)); max-width: calc(47.5 * var(--u)); }
#landing-view .hero-cifras div { padding-right: calc(1 * var(--u)); }
#landing-view .hero-cifras div + div { padding-left: calc(1.25 * var(--u)); border-left: 1px solid var(--linea); }
#landing-view .hero-cifras b { display: block; font-family: var(--titulo); font-size: clamp(calc(1.9 * var(--u)), 4vw, calc(3.1 * var(--u))); color: var(--oro); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
#landing-view .hero-cifras span { font-size: calc(.84 * var(--u)); color: var(--suave); font-weight: 700; }
#landing-view .proximo { display: none; }
@media (min-width: 1100px) {
#landing-view .hero .c { grid-template-columns: minmax(0, 1fr) calc(23.75 * var(--u)); align-items: end; }
#landing-view .hero-cifras { grid-column: 1 / -1; }
#landing-view .proximo.visto { animation: lp-flota 7s ease-in-out 1.2s infinite; }
#landing-view .proximo { display: block; background: rgba(0, 26, 56, .88); border: 1px solid rgba(255, 195, 0, .4); border-top: calc(0.1875 * var(--u)) solid var(--oro); border-radius: calc(1.25 * var(--u)); padding: calc(1.375 * var(--u)); box-shadow: 0 calc(1.5 * var(--u)) calc(3.125 * var(--u)) rgba(0, 0, 0, .3); }
#landing-view .proximo small { font-size: calc(.72 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
#landing-view .proximo h3 { font-size: calc(1.55 * var(--u)); margin: calc(0.625 * var(--u)) 0 calc(0.375 * var(--u)); }
#landing-view .proximo p { margin: 0 0 calc(1 * var(--u)); color: var(--suave); font-size: calc(.92 * var(--u)); }
}
#landing-view .latido { display: inline-flex; align-items: center; gap: calc(0.5 * var(--u)); background: rgba(255, 195, 0, .16); color: var(--oro); border-radius: calc(62.4375 * var(--u)); padding: calc(0.375 * var(--u)) calc(0.75 * var(--u)); font-size: calc(.8 * var(--u)); font-weight: 800; margin-bottom: calc(1 * var(--u)); }
#landing-view .latido::before { content: ""; width: calc(0.4375 * var(--u)); height: calc(0.4375 * var(--u)); border-radius: 50%; background: var(--oro); animation: lp-late 1.8s ease-in-out infinite; }
@keyframes lp-late { 50% { opacity: .25; } }
@keyframes lp-flota { 50% { transform: translateY(calc(-0.5 * var(--u))); } }
#landing-view .marq { border-block: 1px solid var(--linea); overflow: hidden; padding: calc(1.25 * var(--u)) 0; background: var(--navy); }
#landing-view .marq-pista { display: flex; align-items: center; gap: calc(2.125 * var(--u)); width: max-content; animation: lp-marq 80s linear infinite; }
#landing-view .marq span { font-family: var(--acento); font-style: italic; font-weight: 800; font-size: calc(1.4 * var(--u)); color: #e3eaf5; white-space: nowrap; }
#landing-view .marq i { color: var(--oro); font-style: normal; font-size: calc(.9 * var(--u)); }
@keyframes lp-marq { to { transform: translateX(-50%); } }
#landing-view .sec { padding: clamp(calc(5.25 * var(--u)), 11vw, calc(8.75 * var(--u))) 0; position: relative; }
#landing-view .tono-2 { background: linear-gradient(180deg, var(--navy) 0%, var(--fondo) 100%); }
#landing-view .tono-3 { background: var(--navy-3); }
#landing-view .sec-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(1.5 * var(--u)) calc(2.5 * var(--u)); margin-bottom: clamp(calc(2.375 * var(--u)), 5vw, calc(4 * var(--u))); }
#landing-view .sec-cab .lead { margin: calc(1.25 * var(--u)) 0 0; }
#landing-view .agenda-cab { display: grid; gap: calc(1.75 * var(--u)) calc(2.5 * var(--u)); align-items: end; margin-bottom: calc(2.125 * var(--u)); }
@media (min-width: 1000px) {
#landing-view .agenda-cab { grid-template-columns: 1fr auto; }
}
#landing-view .agenda-cab .lead { margin: calc(1.125 * var(--u)) 0 0; }
#landing-view .en-vivo { display: inline-flex; align-items: center; gap: calc(0.625 * var(--u)); font-size: calc(.74 * var(--u)); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-bottom: calc(1.125 * var(--u)); }
#landing-view .en-vivo i { position: relative; width: calc(0.625 * var(--u)); height: calc(0.625 * var(--u)); border-radius: 50%; background: #27d17f; }
#landing-view .en-vivo i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #27d17f; animation: lp-vivo 2s ease-out infinite; }
@keyframes lp-vivo { to { transform: scale(2.6); opacity: 0; } }
#landing-view .agenda-total { display: flex; align-items: center; gap: calc(1.125 * var(--u)); padding: calc(1.125 * var(--u)) calc(1.5 * var(--u)); border: 1px solid rgba(255, 195, 0, .35); border-radius: calc(1.25 * var(--u)); background: rgba(0, 26, 56, .55); }
#landing-view .agenda-total b { font-family: var(--titulo); font-size: calc(3.4 * var(--u)); line-height: .9; color: var(--oro); }
#landing-view .agenda-total span { font-weight: 700; color: var(--suave); line-height: 1.35; max-width: calc(11.875 * var(--u)); }
#landing-view .agenda-total span strong { color: var(--texto); }
#landing-view .cinta { display: flex; gap: calc(0.5 * var(--u)); overflow-x: auto; scrollbar-width: none; padding: calc(0.375 * var(--u)) 2px calc(0.875 * var(--u)); margin-bottom: calc(0.875 * var(--u)); }
#landing-view .cinta.desborda { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
#landing-view .cinta::-webkit-scrollbar { display: none; }
#landing-view .dia { flex: 1 0 calc(3.625 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: calc(0.625 * var(--u)) 0 calc(0.5 * var(--u)); border-radius: calc(0.875 * var(--u)); border: 1px solid var(--linea); background: rgba(255, 255, 255, .03); color: var(--suave); font-family: inherit; opacity: 0; transform: translateY(calc(0.875 * var(--u))); }
#landing-view .cinta.visto .dia { animation: lp-diaEntra .5s var(--ease) calc(var(--i) * 28ms) both; }
@keyframes lp-diaEntra { from { opacity: 0; transform: translateY(calc(0.875 * var(--u))); } to { opacity: 1; transform: none; } }
#landing-view .dia small { font-size: calc(.66 * var(--u)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#landing-view .dia b { font-family: var(--titulo); font-size: calc(1.35 * var(--u)); color: var(--texto); line-height: 1.1; }
#landing-view .dia .pts { display: flex; gap: calc(0.1875 * var(--u)); height: calc(0.4375 * var(--u)); margin-top: calc(0.1875 * var(--u)); }
#landing-view .dia .pts i { width: calc(0.4375 * var(--u)); height: calc(0.4375 * var(--u)); border-radius: 50%; background: var(--oro); transform: scale(0); }
#landing-view .cinta.visto .dia .pts i { animation: lp-punto .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 28ms + 350ms) both; }
@keyframes lp-punto { to { transform: scale(1); } }
#landing-view .dia.con { cursor: pointer; border-color: rgba(255, 195, 0, .45); background: rgba(255, 195, 0, .08); color: var(--oro-suave); transition: background-color .2s, border-color .2s, transform .2s; }
#landing-view .dia.con:hover { background: rgba(255, 195, 0, .2); }
#landing-view .dia.hoy { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
#landing-view .dia.hoy small { color: var(--oro); }
#landing-view .dia.apagado { opacity: .35 !important; }
#landing-view .dia.mes { flex-grow: 0; flex-basis: calc(2.125 * var(--u)); border: 0; background: none; justify-content: center; }
#landing-view .dia.mes span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(.7 * var(--u)); font-weight: 900; letter-spacing: .2em; color: var(--oro); }
#landing-view .filtros { display: flex; flex-wrap: wrap; align-items: center; gap: calc(0.5 * var(--u)); margin-bottom: calc(1.625 * var(--u)); }
#landing-view .filtro { display: inline-flex; align-items: center; gap: calc(0.5 * var(--u)); border-radius: calc(62.4375 * var(--u)); padding: calc(0.5625 * var(--u)) calc(1 * var(--u)); border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--texto); font: 800 calc(.88 * var(--u)) var(--sans); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
#landing-view .filtro em { font-style: normal; font-size: calc(.74 * var(--u)); background: rgba(255, 255, 255, .12); border-radius: calc(62.4375 * var(--u)); padding: 1px calc(0.5 * var(--u)); }
#landing-view .filtro:hover { border-color: var(--oro); }
#landing-view .filtro.activo { background: var(--oro); border-color: var(--oro); color: var(--navy); }
#landing-view .filtro.activo em { background: rgba(0, 45, 98, .15); }
#landing-view .flechas { display: flex; gap: calc(0.625 * var(--u)); margin-left: auto; }
#landing-view .flecha { width: calc(3.125 * var(--u)); height: calc(3.125 * var(--u)); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: none; color: var(--texto); cursor: pointer; display: grid; place-items: center; transition: background-color .25s, color .25s, border-color .25s; }
#landing-view .flecha:hover { border-color: var(--oro); color: var(--navy); background: var(--oro); }
#landing-view .flecha svg { width: calc(1.25 * var(--u)); }
#landing-view .pista { --slots: 1; --g: calc(1.5 * var(--u)); --ancho: calc((100% - (var(--slots) - 1) * var(--g)) / var(--slots));
    display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: calc(1.125 * var(--u)) calc(.375 * var(--u)) calc(1 * var(--u)); margin: 0 calc(-.375 * var(--u)); scroll-padding-inline: calc(.375 * var(--u)); cursor: grab; overscroll-behavior-x: contain; }
@media (min-width: 700px) {
#landing-view .pista { --slots: 2; }
}
@media (min-width: 1000px) {
#landing-view .pista { --slots: 3; }
}
@media (min-width: 1300px) {
#landing-view .pista { --slots: 4; }
}
#landing-view .pista::-webkit-scrollbar { display: none; }
#landing-view .pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
#landing-view .inicio { flex: 0 0 var(--ancho); min-width: 0; scroll-snap-align: start; position: relative; border-radius: calc(1.375 * var(--u)); overflow: hidden; min-height: calc(32.5 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; user-select: none; background: var(--navy); border: 1px solid rgba(255, 195, 0, .35); box-shadow: 0 calc(1.125 * var(--u)) calc(2.5 * var(--u)) rgba(0, 10, 30, .35); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), border-color .3s; }
#landing-view .inicio.inclinando { transition: transform .12s linear, border-color .3s; }
#landing-view .inicio:hover { border-color: var(--oro); }
#landing-view .inicio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); pointer-events: none; }
#landing-view .inicio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 26, 56, .08) 0%, rgba(0, 26, 56, .5) 38%, rgba(0, 26, 56, .97) 70%); }
#landing-view .inicio::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 235, 170, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease); }
#landing-view .inicio:hover::after { transform: translateX(120%); }
#landing-view .inicio:hover > img { transform: scale(1.07); }
#landing-view .inicio.fuera { opacity: 0 !important; transform: scale(.92) !important; }
#landing-view .inicio.oculto { display: none; }
#landing-view .inicio.resaltada { animation: lp-resalta 1.4s var(--ease); }
@keyframes lp-resalta { 0%, 100% { box-shadow: 0 calc(1.125 * var(--u)) calc(2.5 * var(--u)) rgba(0, 10, 30, .35); } 30% { box-shadow: 0 0 0 calc(0.25 * var(--u)) var(--oro), 0 calc(1.125 * var(--u)) calc(3.125 * var(--u)) rgba(255, 195, 0, .35); } }
#landing-view .inicio-fecha { position: absolute; top: calc(1 * var(--u)); left: calc(1 * var(--u)); text-align: center; background: var(--oro); color: var(--navy); border-radius: calc(0.875 * var(--u)); padding: calc(0.5 * var(--u)) calc(0.8125 * var(--u)) calc(0.375 * var(--u)); line-height: 1; box-shadow: 0 calc(0.5 * var(--u)) calc(1.125 * var(--u)) rgba(0, 0, 0, .3); transform-origin: top; }
#landing-view .inicio.visto .inicio-fecha { animation: lp-gira .8s var(--ease) calc(var(--d, 0ms) + 250ms) both; }
@keyframes lp-gira { from { transform: perspective(calc(18.75 * var(--u))) rotateX(-95deg); opacity: 0; } to { transform: none; opacity: 1; } }
#landing-view .inicio-fecha b { display: block; font-family: var(--titulo); font-size: calc(1.9 * var(--u)); }
#landing-view .inicio-fecha span { font-size: calc(.7 * var(--u)); font-weight: 800; letter-spacing: .16em; }
#landing-view .inicio-cuenta { position: absolute; top: calc(1.375 * var(--u)); right: calc(1 * var(--u)); display: inline-flex; align-items: center; gap: calc(0.4375 * var(--u)); background: rgba(0, 26, 56, .88); border: 1px solid rgba(255, 255, 255, .22); border-radius: calc(62.4375 * var(--u)); padding: calc(0.375 * var(--u)) calc(0.75 * var(--u)); font-size: calc(.76 * var(--u)); font-weight: 800; }
#landing-view .inicio-cuenta.hoy { background: #27d17f; border-color: #27d17f; color: #04221a; }
#landing-view .inicio-cuenta.hoy::before { content: ""; width: calc(0.4375 * var(--u)); height: calc(0.4375 * var(--u)); border-radius: 50%; background: #04221a; animation: lp-late 1.2s ease-in-out infinite; }
#landing-view .inicio-cuerpo { padding: calc(1.5 * var(--u)); }
#landing-view .inicio-tipo { font-size: calc(.72 * var(--u)); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
#landing-view .inicio h3 { font-size: calc(1.55 * var(--u)); margin: calc(0.625 * var(--u)) 0 calc(0.875 * var(--u)); }
#landing-view .inicio ul { list-style: none; padding: 0; margin: 0 0 calc(1.25 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(0.5 * var(--u)) calc(1 * var(--u)); color: #d6dfec; font-size: calc(.88 * var(--u)); }
#landing-view .inicio li { display: inline-flex; align-items: center; gap: calc(0.375 * var(--u)); }
#landing-view .inicio li svg { width: calc(0.9375 * var(--u)); color: var(--oro); }
#landing-view .inicio-acciones { display: flex; align-items: center; justify-content: space-between; gap: calc(0.75 * var(--u)); }
#landing-view .inicio-acciones .btn { padding: calc(0.8125 * var(--u)) calc(1.25 * var(--u)); font-size: calc(.88 * var(--u)); }
@media (min-width: 1000px) {
#landing-view .inicio.destacada { flex-basis: calc(2 * var(--ancho) + var(--g)); }
}
#landing-view .inicio.destacada h3 { font-size: clamp(calc(1.8 * var(--u)), 2.6vw, calc(2.5 * var(--u))); max-width: 16ch; }
#landing-view .cuenta-grande { position: absolute; top: calc(5.625 * var(--u)); right: calc(1.5 * var(--u)); text-align: right; line-height: 1; text-shadow: 0 calc(0.375 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, .45); }
#landing-view .cuenta-grande b { display: block; font-family: var(--titulo); font-size: calc(5.2 * var(--u)); color: var(--oro); }
#landing-view .cuenta-grande span { font-size: calc(.8 * var(--u)); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
#landing-view .sello-destacada { display: inline-flex; align-items: center; gap: calc(0.375 * var(--u)); background: var(--oro); color: var(--navy); font-size: calc(.7 * var(--u)); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; padding: calc(0.3125 * var(--u)) calc(0.625 * var(--u)); border-radius: calc(0.5 * var(--u)); margin-bottom: calc(0.625 * var(--u)); }
#landing-view .progreso { height: calc(0.1875 * var(--u)); background: var(--linea); margin-top: calc(1.625 * var(--u)); border-radius: calc(0.1875 * var(--u)); overflow: hidden; }
#landing-view .progreso span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(.15); transition: transform .2s; }
#landing-view .agenda-vacia { text-align: center; padding: calc(2.5 * var(--u)); border: 1px dashed rgba(255, 195, 0, .4); border-radius: calc(1.25 * var(--u)); color: var(--suave); }
html.lp-ligero #landing-view .inicio::after, html.lp-ligero #landing-view .cinta.visto .dia, html.lp-ligero #landing-view .cinta.visto .dia .pts i { animation: none; transition: none; }
html.lp-ligero #landing-view .dia { opacity: 1; transform: none; }
html.lp-ligero #landing-view .dia .pts i { transform: none; }
#landing-view .esc-grid { display: grid; gap: calc(1 * var(--u)); grid-template-columns: 1fr; }
@media (min-width: 700px) {
#landing-view .esc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
#landing-view .esc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#landing-view .esc { position: relative; border-radius: calc(1.375 * var(--u)); overflow: hidden; text-decoration: none; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(1.625 * var(--u)); min-height: calc(30 * var(--u)); border: 1px solid rgba(255, 195, 0, .3); }
#landing-view .esc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
#landing-view .esc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 26, 56, 0) 25%, rgba(0, 26, 56, .95) 80%); }
#landing-view .esc:hover > img { transform: scale(1.06); }
#landing-view .esc-num { font-family: var(--acento); font-style: italic; font-weight: 900; color: var(--oro); }
#landing-view .esc h3 { font-size: clamp(calc(1.45 * var(--u)), 1.75vw, calc(1.95 * var(--u))); margin: calc(0.25 * var(--u)) 0 calc(0.375 * var(--u)); hyphens: auto; }
#landing-view .esc-cuenta { font-size: calc(.84 * var(--u)); font-weight: 700; color: #d6dfec; }
#landing-view .esc-mas { margin-top: calc(0.75 * var(--u)); opacity: .0; transform: translateY(calc(0.625 * var(--u))); transition: opacity .45s var(--ease), transform .45s var(--ease); }
#landing-view .esc-mas p { color: #d6dfec; font-size: calc(.92 * var(--u)); margin: 0 0 calc(0.75 * var(--u)); }
#landing-view .esc:hover .esc-mas, #landing-view .esc:focus-visible .esc-mas { opacity: 1; transform: none; }
@media (hover: none), (max-width: 1099px) {
#landing-view .esc-mas { opacity: 1; transform: none; }
#landing-view .esc { min-height: 380px; }
}
#landing-view .dif { display: grid; gap: calc(3.125 * var(--u)); }
#landing-view .dif-izq .lead { margin: calc(1.375 * var(--u)) 0 calc(1.75 * var(--u)); }
#landing-view .dif-izq .foto { aspect-ratio: 4 / 3; margin-top: calc(2.25 * var(--u)); }
#landing-view .dif-lista { list-style: none; padding: 0; margin: 0; }
#landing-view .dif-lista li { display: grid; grid-template-columns: calc(5.25 * var(--u)) 1fr; gap: calc(0.5 * var(--u)) calc(1.375 * var(--u)); padding: calc(1.875 * var(--u)) 0; border-top: 1px solid var(--linea); }
#landing-view .dif-lista li:last-child { border-bottom: 1px solid var(--linea); }
#landing-view .dif-num { font-family: var(--titulo); font-size: calc(3 * var(--u)); line-height: 1; color: var(--oro); opacity: .9; }
#landing-view .dif-lista h3 { font-size: calc(1.5 * var(--u)); margin-bottom: calc(0.375 * var(--u)); }
#landing-view .dif-lista p { margin: 0; color: var(--suave); }
@media (min-width: 980px) {
#landing-view .dif { grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
#landing-view .dif-izq { position: sticky; top: 110px; }
}
#landing-view .mosaico { display: grid; gap: calc(0.875 * var(--u)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc(11.875 * var(--u)); grid-auto-flow: dense; }
#landing-view .mosaico .foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 900px) {
#landing-view .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: calc(15 * var(--u)); }
#landing-view .mosaico .foto:nth-child(4) { grid-row: span 2; }
#landing-view .mosaico .foto:nth-child(6) { grid-column: span 2; }
}
#landing-view .docentes { display: grid; gap: calc(1.375 * var(--u)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
#landing-view .docentes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#landing-view .docente .foto { aspect-ratio: 3 / 4; border-radius: calc(12.5 * var(--u)) calc(12.5 * var(--u)) calc(1.25 * var(--u)) calc(1.25 * var(--u)); }
#landing-view .docente h3 { font-size: calc(1.22 * var(--u)); margin: calc(0.875 * var(--u)) 0 2px; }
#landing-view .docente p { margin: 0; color: var(--oro); font-size: calc(.86 * var(--u)); font-weight: 800; }
#landing-view .testi { text-align: center; max-width: calc(61.25 * var(--u)); margin: 0 auto; }
#landing-view .testi-comilla { font-family: var(--titulo); font-size: calc(6.5 * var(--u)); line-height: .6; color: var(--oro); }
#landing-view .testi-slides { display: grid; }
#landing-view .testi-slide { grid-area: 1 / 1; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
#landing-view .testi-slide.activo { opacity: 1; pointer-events: auto; }
#landing-view .testi blockquote { font-family: var(--titulo); font-weight: 600; font-size: clamp(calc(1.4 * var(--u)), 2.8vw, calc(2.15 * var(--u))); line-height: 1.3; margin: calc(1.375 * var(--u)) 0 calc(1.75 * var(--u)); }
#landing-view .testi-autor { display: inline-flex; align-items: center; gap: calc(0.875 * var(--u)); text-align: left; }
#landing-view .testi-autor .foto { width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 50%; padding: 0; }
#landing-view .testi-autor .foto svg { width: calc(1.25 * var(--u)); }
#landing-view .testi-autor .foto b, #landing-view .testi-autor .foto span { display: none; }
#landing-view .testi-autor small { display: block; color: var(--suave); }
#landing-view .puntos { display: flex; justify-content: center; gap: calc(0.625 * var(--u)); margin-top: calc(2 * var(--u)); }
#landing-view .puntos button { width: calc(2.125 * var(--u)); height: calc(0.1875 * var(--u)); border: 0; background: var(--linea); border-radius: calc(0.1875 * var(--u)); cursor: pointer; padding: 0; }
#landing-view .puntos button.activo { background: var(--oro); }
#landing-view .aviso-ejemplo { display: inline-block; margin-top: calc(1.125 * var(--u)); font-size: calc(.74 * var(--u)); font-weight: 800; letter-spacing: .14em; color: var(--oro-suave); border: 1px dashed rgba(255, 195, 0, .5); border-radius: calc(62.4375 * var(--u)); padding: calc(0.3125 * var(--u)) calc(0.75 * var(--u)); }
#landing-view .pasos { position: relative; display: grid; gap: calc(2.5 * var(--u)); }
#landing-view .pasos-linea { display: none; }
#landing-view .paso-n { width: calc(4.625 * var(--u)); height: calc(4.625 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-family: var(--titulo); font-size: calc(1.8 * var(--u)); color: var(--navy); background: var(--oro); position: relative; z-index: 1; margin-bottom: calc(1.25 * var(--u)); box-shadow: 0 0 0 calc(0.5 * var(--u)) var(--fondo); }
#landing-view .paso h3 { font-size: calc(1.55 * var(--u)); margin-bottom: calc(0.5 * var(--u)); }
#landing-view .paso p { color: var(--suave); margin: 0; max-width: calc(21.25 * var(--u)); }
@media (min-width: 900px) {
#landing-view .pasos { grid-template-columns: repeat(3, 1fr); gap: calc(3.125 * var(--u)); }
#landing-view .pasos-linea { display: block; position: absolute; top: calc(2.25 * var(--u)); left: calc(2.3125 * var(--u)); width: calc((200% + calc(6.25 * var(--u))) / 3); height: 2px; background: rgba(255, 255, 255, .12); }
#landing-view .pasos-linea::after { content: ""; position: absolute; inset: 0; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .3s; }
#landing-view .pasos.visto .pasos-linea::after, html.lp-ligero #landing-view .pasos-linea::after { transform: none; }
}
#landing-view .faq { display: grid; gap: calc(2.875 * var(--u)); }
@media (min-width: 980px) {
#landing-view .faq { grid-template-columns: 4fr 7fr; gap: 80px; }
#landing-view .faq-izq { position: sticky; top: 110px; align-self: start; }
}
#landing-view .faq-izq .lead { margin: calc(1.25 * var(--u)) 0 calc(1.75 * var(--u)); }
#landing-view .faq details { border-top: 1px solid var(--linea); }
#landing-view .faq details:last-child { border-bottom: 1px solid var(--linea); }
#landing-view .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: calc(1.25 * var(--u)); padding: calc(1.5 * var(--u)) 0; font-family: var(--titulo); font-weight: 600; font-size: clamp(calc(1.15 * var(--u)), 2vw, calc(1.4 * var(--u))); }
#landing-view .faq summary::-webkit-details-marker { display: none; }
#landing-view .faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: calc(1.7 * var(--u)); color: var(--oro); transition: transform .3s var(--ease); }
#landing-view .faq details[open] summary::after { transform: rotate(45deg); }
#landing-view .faq details p { margin: 0; padding: 0 0 calc(1.5 * var(--u)); color: var(--suave); max-width: calc(40 * var(--u)); }
#landing-view .ubi { display: grid; gap: calc(2.875 * var(--u)); }
@media (min-width: 1000px) {
#landing-view .ubi { grid-template-columns: 5fr 6fr; gap: 64px; align-items: stretch; }
}
#landing-view .ubi-dir { font-family: var(--titulo); font-weight: 700; font-size: calc(1.5 * var(--u)); margin: calc(1.5 * var(--u)) 0 calc(0.375 * var(--u)); }
#landing-view .ubi-ref { list-style: none; padding: 0; margin: calc(1.5 * var(--u)) 0; display: grid; gap: calc(0.625 * var(--u)); color: #d6dfec; }
#landing-view .ubi-ref li { display: flex; gap: calc(0.75 * var(--u)); align-items: baseline; }
#landing-view .ubi-ref li::before { content: "✦"; color: var(--oro); font-size: calc(.8 * var(--u)); }
#landing-view .entrada { display: grid; grid-template-columns: calc(2.5 * var(--u)) 1fr; gap: calc(0.875 * var(--u)); padding: calc(1 * var(--u)) 0; border-top: 1px solid var(--linea); }
#landing-view .entrada:last-of-type { border-bottom: 1px solid var(--linea); }
#landing-view .entrada b { font-family: var(--titulo); color: var(--oro); font-size: calc(1.4 * var(--u)); }
#landing-view .entrada strong { display: block; }
#landing-view .entrada span { color: var(--suave); font-size: calc(.92 * var(--u)); }
#landing-view .ubi-final { color: var(--oro-suave); font-weight: 800; margin: calc(1.25 * var(--u)) 0 calc(1.625 * var(--u)); }
#landing-view .ubi-acciones { display: flex; flex-wrap: wrap; gap: calc(0.75 * var(--u)); }
#landing-view .mapa { position: relative; min-height: calc(28.75 * var(--u)); border-radius: calc(1.5 * var(--u)); overflow: hidden; border: 1px solid rgba(255, 195, 0, .4); background: var(--navy-3); }
#landing-view .mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#landing-view .indic { position: absolute; right: calc(1 * var(--u)); bottom: calc(1 * var(--u)); z-index: 3; width: calc(8.75 * var(--u)); border-radius: calc(0.875 * var(--u)); overflow: hidden; border: 2px solid var(--oro); cursor: zoom-in; background: #fff; }
#landing-view .indic small { display: block; background: var(--navy); font-size: calc(.7 * var(--u)); font-weight: 800; text-align: center; padding: calc(0.3125 * var(--u)); color: var(--oro); }
#landing-view .cierre { text-align: center; padding: clamp(calc(6.25 * var(--u)), 14vw, calc(10.625 * var(--u))) 0; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(255, 195, 0, .14), transparent 55%), var(--navy); }
#landing-view .cierre h2 { font-size: clamp(calc(2.8 * var(--u)), 8vw, calc(6 * var(--u))); margin: 0 auto calc(2.125 * var(--u)); }
#landing-view .cierre .btn { font-size: calc(1.05 * var(--u)); padding: calc(1.25 * var(--u)) calc(2.125 * var(--u)); }
#landing-view .cierre p { color: var(--suave); margin-top: calc(1.125 * var(--u)); }
#landing-view .pie { background: var(--navy-3); border-top: calc(0.1875 * var(--u)) solid var(--oro); padding: calc(4 * var(--u)) 0 calc(1.875 * var(--u)); color: var(--suave); font-size: calc(.92 * var(--u)); }
#landing-view .pie-grid { display: grid; gap: calc(2.375 * var(--u)); }
@media (min-width: 900px) {
#landing-view .pie-grid { grid-template-columns: 2fr 1fr 1.3fr 1fr; }
}
#landing-view .pie-logo { height: calc(2.625 * var(--u)); width: auto; margin-bottom: calc(1 * var(--u)); }
#landing-view .pie h4 { color: var(--texto); font-size: calc(.76 * var(--u)); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 calc(1 * var(--u)); }
#landing-view .pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(0.625 * var(--u)); }
#landing-view .pie a { text-decoration: none; }
#landing-view .pie a:hover { color: var(--oro); }
#landing-view .redes { display: flex; gap: calc(0.625 * var(--u)); }
#landing-view .redes a { width: calc(2.75 * var(--u)); height: calc(2.75 * var(--u)); border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: background-color .25s, color .25s; }
#landing-view .redes a:hover { background: var(--oro); color: var(--navy); }
#landing-view .redes svg { width: calc(1.125 * var(--u)); height: calc(1.125 * var(--u)); }
#landing-view .pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(0.75 * var(--u)); border-top: 1px solid var(--linea); margin-top: calc(2.875 * var(--u)); padding-top: calc(1.5 * var(--u)); font-size: calc(.84 * var(--u)); }
#landing-view .pie-base button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
#landing-view .wsp { position: fixed; right: calc(1.375 * var(--u)); bottom: calc(1.375 * var(--u)); z-index: 40; width: calc(3.75 * var(--u)); height: calc(3.75 * var(--u)); border-radius: 50%; background: #1fa855; color: #fff; display: grid; place-items: center; box-shadow: 0 calc(0.75 * var(--u)) calc(1.625 * var(--u)) rgba(0, 0, 0, .35); border: 2px solid var(--oro); }
#landing-view .wsp svg { width: calc(1.8125 * var(--u)); height: calc(1.8125 * var(--u)); }
#landing-view .wsp::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #1fa855; animation: lp-onda 3s ease-out infinite; }
@keyframes lp-onda { 0% { transform: scale(1); opacity: .9; } 60%, 100% { transform: scale(1.55); opacity: 0; } }
#landing-view .ampliada { position: fixed; inset: 0; z-index: 95; background: rgba(0, 10, 25, .92); display: grid; place-items: center; padding: calc(1.875 * var(--u)); cursor: zoom-out; }
#landing-view .ampliada[hidden] { display: none; }
#landing-view .ampliada img { max-height: 90vh; width: auto; border-radius: calc(1 * var(--u)); }
#landing-view .ampliada button { position: absolute; top: calc(1.25 * var(--u)); right: calc(1.5 * var(--u)); background: none; border: 0; color: #fff; font-size: calc(1.6 * var(--u)); cursor: pointer; }
#landing-view .guia { background: #f6f2e8; color: #0f2744; padding: calc(4.375 * var(--u)) 0; content-visibility: auto; contain-intrinsic-size: auto calc(75 * var(--u)); }
#landing-view .guia h2 { font-size: calc(2.3 * var(--u)); color: var(--navy); }
#landing-view .guia p { max-width: calc(47.5 * var(--u)); color: #4a5b76; }
#landing-view .guia-tabla { overflow-x: auto; }
#landing-view .guia table { width: 100%; min-width: calc(38.75 * var(--u)); border-collapse: collapse; margin-top: calc(1.5 * var(--u)); font-size: calc(.92 * var(--u)); background: #fff; }
#landing-view .guia th, #landing-view .guia td { text-align: left; padding: calc(0.75 * var(--u)) calc(0.875 * var(--u)); border-bottom: 1px solid #e3e8f0; vertical-align: top; }
#landing-view .guia th { background: var(--navy); color: #fff; font-size: calc(.78 * var(--u)); letter-spacing: .1em; text-transform: uppercase; }
#landing-view .guia-num { display: inline-block; background: var(--oro); color: var(--navy); font-weight: 800; border-radius: calc(0.5 * var(--u)); padding: calc(0.1875 * var(--u)) calc(0.5625 * var(--u)); white-space: nowrap; }
@media (max-width: 640px) {
#landing-view { font-size: calc(1 * var(--u)); }
#landing-view .hero { padding-top: calc(var(--barra-alto) + 1.5 * var(--u)); }
#landing-view .hero-cifras div + div { padding-left: calc(0.75 * var(--u)); }
#landing-view .buscador-campo .btn span { display: none; }
#landing-view .etiqueta-foto { top: calc(5 * var(--u)); font-size: calc(.62 * var(--u)); }
#landing-view .inicio { min-height: calc(30.625 * var(--u)); }
}

/* ====================================================================
   INTEGRACIÓN con el sistema (escrito a mano)
   ==================================================================== */
#landing-container { flex-shrink: 0; }

/* Visitante: la portada usa el desplazamiento de la página y su propia cabecera
   (menú + logo + Ingresar); la barra del sistema se oculta. */
html.lp-publica .navbar { display: none !important; }
html.lp-publica body { height: auto !important; min-height: 100vh; padding: 0 !important; overflow-y: visible !important; background: #00224b; }

/* Con sesión: la barra del sistema queda arriba y la portada se desplaza dentro
   de su contenedor, como las demás áreas. */
#landing-container.lp-activa { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -10px -10px; }
html.lp-publica #landing-container.lp-activa { overflow: visible; margin: 0; }
@media (max-width: 768px) { #landing-container.lp-activa { margin: 0; } }

/* Barra de desplazamiento de la portada (pedido del usuario, 2026-09-28): fina,
   azul noche con el pulgar dorado tenue; se enciende mientras se desplaza
   (clase lp-moviendo, la pone landing.js) o al pasar el mouse. Se dibuja con
   ::-webkit-scrollbar (Chrome/Edge/Safari) porque solo así el riel puede
   empezar DEBAJO de la cabecera (margin-top del track); por eso scrollbar-width
   y scrollbar-color quedan en auto (en Chrome anulan los ::-webkit-scrollbar) y
   solo se usan en Firefox (@supports). */
#landing-container.lp-activa { scrollbar-width: auto !important; scrollbar-color: auto !important; }
#landing-container.lp-activa::-webkit-scrollbar { width: 10px; background: transparent; }
#landing-container.lp-activa::-webkit-scrollbar-track { background: #001a38; }
#landing-container.lp-activa::-webkit-scrollbar-thumb { background: rgba(255, 195, 0, 0.35); border-radius: 6px; border: 2px solid #001a38; }
#landing-container.lp-activa.lp-moviendo::-webkit-scrollbar-thumb,
#landing-container.lp-activa::-webkit-scrollbar-thumb:hover { background: rgba(255, 195, 0, 0.8); }
@supports not selector(::-webkit-scrollbar) {
    #landing-container.lp-activa { scrollbar-width: thin !important; scrollbar-color: rgba(255, 195, 0, 0.4) #001a38 !important; }
}

/* Desplazamiento según el equipo (2026-09-28). Con mouse (PC/laptop) el
   visitante desplaza la portada dentro de #landing-container (pantalla
   completa: la portada sigue pasando por DETRÁS de la cabecera transparente,
   que se vuelve blanca al bajar) y el riel de la barra empieza debajo de la
   cabecera, como con sesión. En táctil (celular/tablet) se desplaza la página
   y no se muestra barra. */
@media (hover: hover) and (pointer: fine) {
    html.lp-publica body { height: 100vh !important; overflow: hidden !important; }
    html.lp-publica #landing-container.lp-activa { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; }
    html.lp-publica #landing-container.lp-activa::-webkit-scrollbar-track { margin-top: var(--barra-alto); }
}
@media (hover: none), (pointer: coarse) {
    html.lp-publica,
    #landing-container.lp-activa { scrollbar-width: none !important; }
    html.lp-publica::-webkit-scrollbar,
    #landing-container.lp-activa::-webkit-scrollbar { display: none; }
}

html:not(.lp-publica) #landing-view .cab,
html:not(.lp-publica) #landing-view .wsp { display: none; }
html:not(.lp-publica) #landing-view .hero { min-height: calc(100svh - var(--barra-alto)); padding-top: calc(2.5 * var(--u)); }

/* Portada que se ajusta al ALTO de la pantalla (2026-09-27): --u sale del ancho,
   pero dentro de la portada se achica si la pantalla es baja, para que título,
   botones, buscador y la tarjeta "Próximo inicio" entren siempre completos en la
   primera pantalla (laptop 1366x768, Windows al 125 %, etc.). 41.5 = alto de ese
   contenido medido en unidades --u. En pantallas altas (27", TV) no cambia nada. */
@media (min-width: 900px) {
    #landing-view .hero { --u: clamp(12px, min(var(--u-ancho), calc((100svh - var(--barra-alto)) / 41.5)), 40px); }
    /* El ancho y los márgenes siguen al resto de la página (no se achican con la letra). */
    #landing-view .hero .c { max-width: calc(82.5 * var(--u-ancho)); padding-left: clamp(calc(1.25 * var(--u-ancho)), 4vw, calc(3 * var(--u-ancho))); padding-right: clamp(calc(1.25 * var(--u-ancho)), 4vw, calc(3 * var(--u-ancho))); }
}
@media (max-width: 768px) {
    #landing-view .hamb { width: var(--barra-boton); }
    #landing-view .ingresar { padding: 0 12px; }
}
/* El botón flotante de WhatsApp no tapa la tarjeta "Próximo inicio" en laptops. */
@media (min-width: 1100px) and (max-width: 1599px) {
    #landing-view .hero .c { padding-right: calc(6.75 * var(--u-ancho)); }
}

/* Contenido pendiente (sin fotos o textos reales): oculto al público;
   las cuentas admin lo ven, marcado, para saber qué foto va en cada lugar. */
#landing-view:not(.lp-ver-pendientes) .pendiente { display: none !important; }
#landing-view.lp-ver-pendientes section.pendiente { outline: 2px dashed rgba(255, 195, 0, .45); outline-offset: -10px; }
#landing-view .aviso-pendiente {
    display: inline-flex; align-items: center; gap: .5em; margin: 0 0 calc(2 * var(--u));
    background: rgba(255, 195, 0, .14); border: 1px dashed rgba(255, 195, 0, .6); color: var(--oro-suave);
    font-size: calc(.78 * var(--u)); font-weight: 800; letter-spacing: .06em; padding: calc(.4 * var(--u)) calc(.9 * var(--u)); border-radius: 999px;
}
#landing-view .aviso-pendiente::before { content: "👁"; }

/* Piezas propias del sistema */
#landing-view .saltar { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; }
#landing-view .saltar:focus { left: 8px; }
#landing-view .lp-ico { width: 1.15em; height: auto; flex-shrink: 0; }
#landing-view .pie-lema { max-width: calc(21.25 * var(--u)); margin: 0; }
#landing-view button.indic { padding: 0; font: inherit; color: inherit; display: block; }
#landing-view .indic img { width: 100%; height: auto; }
#landing-view .ampliada img { max-width: 92vw; }

/* Celular: las tres cifras de la portada sin pegarse entre sí */
@media (max-width: 640px) {
    #landing-view .hero-cifras b { font-size: calc(1.5 * var(--u)); }
    #landing-view .hero-cifras div { padding-right: calc(.5 * var(--u)); }
    #landing-view .hero-cifras div + div { padding-left: calc(.6 * var(--u)); }
    #landing-view .hero-cifras span { font-size: calc(.74 * var(--u)); }
}

/* ---------------------------------------------------------------- videos y fotos subidas (editor de la portada, 2026-10-09) */
#landing-view .hero-video, #landing-view .hero-yt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; overflow: hidden; }
#landing-view .hero-video.lista, #landing-view .hero-yt.lista { opacity: 1; }
#landing-view .hero-yt iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; }
#landing-view .hero-fondo.con-video img { animation: none !important; }
#landing-view .video-marco { position: relative; aspect-ratio: 16 / 9; max-width: calc(62.5 * var(--u)); margin: calc(1.75 * var(--u)) auto 0; border-radius: calc(1.25 * var(--u)); overflow: hidden;
    border: 1px solid rgba(255, 195, 0, .45); background: var(--navy-3); box-shadow: 0 calc(1.5 * var(--u)) calc(3.5 * var(--u)) rgba(0, 0, 0, .35); }
#landing-view .video-marco video, #landing-view .video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
#landing-view .video-marco .foto { position: absolute; inset: 0; border-radius: 0; border: 0; }
#landing-view .video-play { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
#landing-view .video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .4s; }
#landing-view .video-play:hover img { transform: scale(1.03); filter: brightness(.85); }
#landing-view .video-boton { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%;
    display: grid; place-items: center; background: var(--oro); color: var(--navy); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(255, 195, 0, .25), 0 calc(0.75 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .4); }
#landing-view .video-boton svg { width: calc(1.75 * var(--u)); height: calc(1.75 * var(--u)); margin-left: calc(0.25 * var(--u)); }
#landing-view .video-play:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }
#landing-view .foto.con-imagen { padding: 0; border-style: solid; border-color: rgba(255, 195, 0, .35); background: var(--navy-3); }
#landing-view .foto.con-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }