/* Landing pages (docs/23-constructor-landing-pages.md). Sin librerías: solo CSS propio.
   Los colores del tema (acento, esquinas, fuente) llegan como variables desde LandingRenderer. */

.l-claro { --l-bg: #ffffff; --l-text: #1f2937; --l-muted: #6b7280; --l-suave: #f3f4f6; --l-borde: #e5e7eb; --l-card: #ffffff; --l-oscuro-bg: #0f172a; color-scheme: light; }
.l-oscuro { --l-bg: #0b1220; --l-text: #e5e7eb; --l-muted: #9ca3af; --l-suave: #111a2e; --l-borde: #223049; --l-card: #141f36; --l-oscuro-bg: #050a14; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
.l-body { margin: 0; font-family: var(--l-fuente); color: var(--l-text); background: var(--l-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.l-body img { max-width: 100%; height: auto; display: block; }
.l-body h1, .l-body h2, .l-body h3 { line-height: 1.2; margin: 0 0 .6rem; }
.l-body p { margin: 0 0 1rem; }
.l-body a { color: inherit; }
.l-wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.l-saltar { position: absolute; left: -999px; top: 0; background: var(--l-acento); color: var(--l-acento-texto); padding: .5rem 1rem; z-index: 100; }
.l-saltar:focus { left: .5rem; top: .5rem; }
.l-body :focus-visible { outline: 3px solid var(--l-acento); outline-offset: 2px; }

/* Botones */
.l-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: var(--l-radio); font-weight: 600; text-decoration: none !important; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.l-btn:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.l-btn-acento { background: var(--l-acento); color: var(--l-acento-texto) !important; }
.l-btn-borde { border-color: currentColor; background: transparent; }
.l-btn-invertido { background: var(--l-acento-texto); color: var(--l-acento) !important; }
.l-btn-grande { padding: .8rem 1.6rem; font-size: 1.05rem; }
.l-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.l-fondo-acento .l-btn-acento, .l-fondo-oscuro .l-btn-acento, .l-fondo-imagen .l-btn-acento { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* Navegación */
.l-nav { background: var(--l-bg); border-bottom: 1px solid var(--l-borde); z-index: 50; transition: background-color .25s ease, box-shadow .25s ease; }
.l-nav-fija { position: sticky; top: 0; }
.l-nav-fija.l-nav-scroll { box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12); background: color-mix(in srgb, var(--l-bg) 94%, var(--l-text)); }
.l-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; flex-wrap: wrap; }
.l-marca { font-weight: 800; font-size: 1.2rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.l-logo { max-height: 2.4rem; width: auto; }
.l-menu { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.l-menu ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.l-menu ul a { text-decoration: none; font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; }
.l-menu ul a:hover { border-color: var(--l-acento); }
.l-nav-acc { display: flex; gap: .5rem; flex-wrap: wrap; }
.l-nav-toggle { display: none; background: transparent; border: 1px solid var(--l-borde); color: inherit; font-size: 1.5rem; line-height: 1; padding: .2rem .55rem; border-radius: var(--l-radio); cursor: pointer; }
@media (max-width: 47.99rem) {
    .l-nav-toggle { display: inline-block; }
    .l-js .l-menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-bottom: .75rem; }
    .l-js .l-menu.l-abierto { display: flex; }
    .l-menu ul { flex-direction: column; gap: .5rem; }
}

/* Secciones */
.l-sec { position: relative; padding-block: 4rem; }
.l-esp-compacto { padding-block: 2rem; }
.l-esp-amplio { padding-block: 6.5rem; }
.l-fondo-claro { background: var(--l-bg); }
.l-fondo-suave { background: var(--l-suave); }
.l-fondo-oscuro { background: var(--l-oscuro-bg); color: #f3f4f6; --l-muted: #aab4c5; --l-card: #1a2540; --l-borde: #2a3856; }
.l-fondo-acento { background: var(--l-acento); color: var(--l-acento-texto); --l-muted: color-mix(in srgb, var(--l-acento-texto) 75%, transparent); --l-card: rgba(255, 255, 255, .14); --l-borde: rgba(255, 255, 255, .3); }
.l-fondo-imagen { background-size: cover; background-position: center; color: #fff; --l-muted: #e5e7eb; --l-card: rgba(15, 23, 42, .55); --l-borde: rgba(255, 255, 255, .3); }
.l-fondo-imagen::before { content: ''; position: absolute; inset: 0; background: rgba(8, 12, 24, .62); }
.l-fondo-imagen > .l-wrap { position: relative; }
.l-sec .l-muted, .l-enc p, .l-hero-sub { color: var(--l-muted); }

.l-enc { max-width: 42rem; margin-bottom: 2.5rem; }
.l-enc-centro { margin-inline: auto; text-align: center; }
.l-enc h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

/* Portada */
.l-hero-txt { max-width: 46rem; }
.l-v-centrado .l-hero-txt { margin-inline: auto; text-align: center; }
.l-v-centrado .l-botones { justify-content: center; }
.l-hero-titulo { font-size: clamp(2.1rem, 5.5vw, 3.8rem); font-weight: 800; letter-spacing: -.02em; }
.l-hero-sub { font-size: 1.2rem; max-width: 38rem; }
.l-v-centrado .l-hero-sub { margin-inline: auto; }
.l-etiqueta { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .75rem; border-radius: 999px; margin-bottom: 1rem; background: rgba(var(--l-acento-rgb), .15); color: var(--l-acento); }
.l-fondo-acento .l-etiqueta, .l-fondo-oscuro .l-etiqueta, .l-fondo-imagen .l-etiqueta { background: rgba(255, 255, 255, .18); color: inherit; }
.l-v-dividido > .l-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.l-hero-img img { border-radius: var(--l-radio); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25); }
.l-v-imagen_fondo { min-height: 28rem; display: flex; align-items: center; }
.l-hero-fondo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.l-v-imagen_fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 24, .78), rgba(8, 12, 24, .25)); }
.l-v-imagen_fondo > .l-wrap { position: relative; z-index: 1; color: #fff; }
.l-v-imagen_fondo .l-hero-sub { color: #e5e7eb; }
@media (max-width: 47.99rem) { .l-v-dividido > .l-wrap { grid-template-columns: 1fr; } }

/* Cuadrículas */
.l-grid { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.l-cols-2 { grid-template-columns: repeat(2, 1fr); }
.l-cols-3 { grid-template-columns: repeat(3, 1fr); }
.l-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 63.99rem) { .l-cols-3, .l-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 39.99rem) { .l-cols-2, .l-cols-3, .l-cols-4 { grid-template-columns: 1fr; } }
.l-item { display: flex; gap: 1rem; align-items: flex-start; }
.l-item h3 { font-size: 1.15rem; }
.l-item p { color: var(--l-muted); margin: 0; }
.l-icono { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; font-size: 1.4rem; border-radius: var(--l-radio); background: rgba(var(--l-acento-rgb), .14); color: var(--l-acento); }
.l-fondo-acento .l-icono, .l-fondo-oscuro .l-icono, .l-fondo-imagen .l-icono { background: rgba(255, 255, 255, .18); color: inherit; }
.l-v-tarjetas .l-item { background: var(--l-card); border: 1px solid var(--l-borde); border-radius: var(--l-radio); padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.l-v-tarjetas .l-item:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12); }
.l-v-iconos .l-item { flex-direction: column; text-align: center; align-items: center; }
.l-v-lista .l-grid { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }

/* Texto con imagen */
.l-ti { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.l-ti-img img { border-radius: var(--l-radio); width: 100%; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); }
.l-vinetas { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.l-vinetas li { margin-bottom: .4rem; }
.l-vinetas i { color: var(--l-acento); margin-right: .25rem; }
@media (max-width: 47.99rem) { .l-ti { grid-template-columns: 1fr; } .l-v-imagen_izquierda .l-ti-img { order: -1; } }

/* Cifras */
.l-cifras { display: grid; gap: 2rem; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); text-align: center; }
.l-num { display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.l-cifra-et { display: block; color: var(--l-muted); margin-top: .25rem; }
.l-v-tarjetas .l-cifra { background: var(--l-card); border: 1px solid var(--l-borde); border-radius: var(--l-radio); padding: 1.5rem 1rem; }

/* Testimonios */
.l-testimonio { margin: 0; background: var(--l-card); border: 1px solid var(--l-borde); border-radius: var(--l-radio); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.l-testimonio blockquote { margin: 0; font-size: 1.05rem; }
.l-testimonio blockquote p::before { content: '“'; font-size: 2rem; line-height: 0; color: var(--l-acento); margin-right: .15rem; vertical-align: -.45rem; }
.l-testimonio figcaption { display: flex; align-items: center; gap: .75rem; }
.l-testimonio small { display: block; color: var(--l-muted); }
.l-foto { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; flex: none; }
.l-foto-vacia { display: grid; place-items: center; background: rgba(var(--l-acento-rgb), .18); color: var(--l-acento); font-size: 1.4rem; }
.l-carrusel { position: relative; max-width: 44rem; margin-inline: auto; display: block; }
.l-js .l-carrusel .l-testimonio { display: none; }
.l-js .l-carrusel .l-testimonio.l-activo { display: flex; animation: l-entra .45s ease both; }
.l-carrusel-ctrl { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1rem; }
.l-carrusel-ctrl button { border: 1px solid var(--l-borde); background: var(--l-card); color: inherit; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer; }
.l-carrusel-ctrl .l-punto { width: .7rem; height: .7rem; padding: 0; background: var(--l-borde); border: 0; }
.l-carrusel-ctrl .l-punto.l-activo { background: var(--l-acento); }
.l-carrusel:not([data-carrusel]) .l-carrusel-ctrl { display: none; }
.l-carrusel .l-testimonio + .l-testimonio { margin-top: 1rem; }
.l-js .l-carrusel .l-testimonio + .l-testimonio { margin-top: 0; }
@keyframes l-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Precios */
.l-planes { display: grid; gap: 1.5rem; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 66rem; margin-inline: auto; }
.l-plan { position: relative; background: var(--l-card); border: 1px solid var(--l-borde); border-radius: var(--l-radio); padding: 2rem 1.5rem; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.l-plan:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12); }
.l-plan-destacado { border: 2px solid var(--l-acento); box-shadow: 0 1rem 2.5rem rgba(var(--l-acento-rgb), .25); }
.l-plan-cinta { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--l-acento); color: var(--l-acento-texto); font-size: .75rem; font-weight: 700; padding: .15rem .8rem; border-radius: 999px; }
.l-precio { font-size: 2.4rem; font-weight: 800; margin-bottom: .25rem; }
.l-precio small { font-size: 1rem; font-weight: 400; color: var(--l-muted); margin-left: .2rem; }
.l-plan-desc { color: var(--l-muted); }
.l-plan-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.l-plan-lista li { padding: .3rem 0; }
.l-plan-lista i { color: var(--l-acento); margin-right: .3rem; }
.l-plan .l-btn { justify-content: center; }

/* Preguntas frecuentes */
.l-faq { max-width: 46rem; margin-inline: auto; }
.l-faq-item { border: 1px solid var(--l-borde); border-radius: var(--l-radio); background: var(--l-card); margin-bottom: .75rem; overflow: hidden; }
.l-faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.l-faq-item summary::-webkit-details-marker { display: none; }
.l-faq-item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--l-acento); transition: transform .2s ease; }
.l-faq-item[open] summary::after { transform: rotate(45deg); }
.l-faq-item > p { padding: 0 1.25rem; color: var(--l-muted); }
.l-faq-item > p:last-child { padding-bottom: .5rem; }

/* Galería */
.l-galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.l-gal-item { margin: 0; overflow: hidden; border-radius: var(--l-radio); }
.l-gal-item a { display: block; overflow: hidden; border-radius: var(--l-radio); }
.l-gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.l-gal-item a:hover img { transform: scale(1.06); }
.l-gal-item figcaption { font-size: .9rem; color: var(--l-muted); padding-top: .35rem; }
.l-gal-mosaico { grid-auto-flow: dense; }
.l-gal-mosaico .l-gal-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.l-gal-mosaico .l-gal-item:nth-child(5n+1) img { height: 100%; aspect-ratio: auto; }
.l-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .88); display: grid; place-items: center; z-index: 200; padding: 1rem; animation: l-fade .2s ease both; }
.l-lightbox figure { margin: 0; max-width: min(100%, 70rem); text-align: center; color: #fff; }
.l-lightbox img { max-height: 80vh; margin-inline: auto; border-radius: .4rem; }
.l-lightbox button { position: absolute; top: 1rem; right: 1rem; font-size: 1.6rem; background: rgba(255, 255, 255, .15); color: #fff; border: 0; border-radius: 50%; width: 2.8rem; height: 2.8rem; cursor: pointer; }
@keyframes l-fade { from { opacity: 0; } to { opacity: 1; } }

/* Llamada a la acción */
.l-cta { text-align: center; max-width: 42rem; margin-inline: auto; }
.l-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.l-cta p { color: var(--l-muted); font-size: 1.1rem; }

/* Contacto */
.l-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.l-contacto-datos { list-style: none; padding: 0; margin: 0; }
.l-contacto-datos li { padding: .35rem 0; }
.l-form { background: var(--l-card); border: 1px solid var(--l-borde); border-radius: var(--l-radio); padding: 1.75rem; color: var(--l-text); }
.l-campo { margin-bottom: 1rem; }
.l-campo label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.l-campo input, .l-campo textarea { width: 100%; font: inherit; color: inherit; background: var(--l-bg); border: 1px solid var(--l-borde); border-radius: calc(var(--l-radio) * .6); padding: .6rem .8rem; }
.l-campo input:focus, .l-campo textarea:focus { border-color: var(--l-acento); outline: 2px solid rgba(var(--l-acento-rgb), .35); }
.l-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.l-aviso { padding: .75rem 1rem; border-radius: calc(var(--l-radio) * .6); margin-bottom: 1rem; font-weight: 500; }
.l-aviso-ok { background: #d1fae5; color: #065f46; }
.l-aviso-error { background: #fee2e2; color: #991b1b; }
@media (max-width: 47.99rem) { .l-contacto { grid-template-columns: 1fr; } }

/* Texto */
.l-texto { max-width: 70rem; }
.l-v-columna .l-texto { max-width: 44rem; margin-inline: auto; }
.l-texto h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Pie */
.l-pie { background: var(--l-suave); border-top: 1px solid var(--l-borde); padding-block: 2rem; text-align: center; color: var(--l-muted); }
.l-pie ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.25rem; padding: 0; margin: 0 0 1rem; }
.l-redes a { font-size: 1.4rem; color: var(--l-text); }
.l-pie-texto { margin: 0; font-size: .9rem; }

/* Efectos de entrada: solo si hay JavaScript (sin él todo se ve) y la persona no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
    .l-js [data-efecto]:not([data-efecto="ninguno"]) .l-anim { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
    .l-js [data-efecto="subir"] .l-anim { transform: translateY(28px); }
    .l-js [data-efecto="zoom"] .l-anim { transform: scale(.92); }
    .l-js [data-efecto="izquierda"] .l-anim { transform: translateX(-36px); }
    .l-js [data-efecto="derecha"] .l-anim { transform: translateX(36px); }
    .l-js [data-efecto].l-visible .l-anim { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .l-body * { animation: none !important; transition: none !important; }
}

/* ───────────── Estilo institucional (docs/23, sección 15) ───────────── */

/* Íconos con degradado */
.l-g-acento { --g1: var(--l-acento); --g2: color-mix(in srgb, var(--l-acento) 60%, #0dcaf0); }
.l-g-azul { --g1: #002a5e; --g2: #00509e; }
.l-g-verde { --g1: #198754; --g2: #20c997; }
.l-g-cielo { --g1: #0d6efd; --g2: #0dcaf0; }
.l-g-violeta { --g1: #6f42c1; --g2: #d63384; }
.l-g-naranja { --g1: #fd7e14; --g2: #ffc107; }
.l-g-rosa { --g1: #e83e8c; --g2: #fd7e14; }
.l-g-rojo { --g1: #dc3545; --g2: #e83e8c; }
.l-g-gris { --g1: #475569; --g2: #94a3b8; }
.l-icono[class*="l-g-"] { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; box-shadow: 0 .4rem .9rem color-mix(in srgb, var(--g1) 35%, transparent); }
.l-fondo-acento .l-icono[class*="l-g-"], .l-fondo-oscuro .l-icono[class*="l-g-"], .l-fondo-imagen .l-icono[class*="l-g-"] { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; }
.l-gt-acento { --g1: var(--l-acento); --g2: color-mix(in srgb, var(--l-acento) 60%, #0dcaf0); }
.l-gt-azul { --g1: #002a5e; --g2: #00509e; } .l-gt-verde { --g1: #198754; --g2: #20c997; } .l-gt-cielo { --g1: #0d6efd; --g2: #0dcaf0; }
.l-gt-violeta { --g1: #6f42c1; --g2: #d63384; } .l-gt-naranja { --g1: #fd7e14; --g2: #ffc107; } .l-gt-rosa { --g1: #e83e8c; --g2: #fd7e14; }
.l-gt-rojo { --g1: #dc3545; --g2: #e83e8c; } .l-gt-gris { --g1: #475569; --g2: #94a3b8; }

/* Barra superior transparente que se vuelve de cristal al desplazarse */
.l-nav-transp { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-color: transparent; color: #fff; }
.l-nav-transp .l-marca, .l-nav-transp .l-menu ul a, .l-nav-transp .l-nav-toggle { color: #fff; }
.l-nav-transp .l-nav-toggle { border-color: rgba(255, 255, 255, .5); }
.l-nav-transp .l-btn-borde { color: #fff; }
.l-nav-transp.l-nav-scroll { background: color-mix(in srgb, var(--l-bg) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--l-borde); }
.l-nav-transp.l-nav-scroll .l-marca, .l-nav-transp.l-nav-scroll .l-menu ul a, .l-nav-transp.l-nav-scroll .l-nav-toggle, .l-nav-transp.l-nav-scroll .l-btn-borde { color: var(--l-text); }
@media (max-width: 47.99rem) { .l-nav-transp:not(.l-nav-scroll) .l-menu.l-abierto { background: rgba(8, 12, 24, .92); padding: 1rem; border-radius: var(--l-radio); } }
.l-nav-sobre main > .l-sec:first-child { padding-top: 7rem; }

/* Portada institucional */
.l-sec.l-v-institucional { min-height: 100vh; display: flex; align-items: center; overflow: hidden; color: #fff; --l-muted: rgba(255, 255, 255, .85);
    background: linear-gradient(135deg, color-mix(in srgb, var(--l-acento) 88%, #000) 0%, color-mix(in srgb, var(--l-acento) 48%, #04122b) 45%, color-mix(in srgb, var(--l-acento) 70%, #fff 5%) 100%); }
.l-sec.l-v-institucional::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .12) 0%, transparent 52%); animation: l-brillo 8s ease-in-out infinite; pointer-events: none; }
.l-sec.l-v-institucional::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 82%); mask-image: radial-gradient(circle at center, #000 30%, transparent 82%); }
.l-sec.l-v-institucional > .l-wrap { position: relative; z-index: 2; }
@keyframes l-brillo { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.2); opacity: 1; } }
.l-hero-inst { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.l-hero-panel { max-width: 40rem; padding: 2rem 1.75rem; border-radius: 1.5rem; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .18); }
.l-hero-panel .l-hero-titulo { color: #fff; }
.l-hero-panel .l-hero-sub { color: rgba(255, 255, 255, .9); text-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.l-hero-panel .l-btn-acento { background: #fff; color: var(--l-acento) !important; }
.l-insignia { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: .38rem 1rem; font-size: .82rem; font-weight: 600; margin-bottom: 1.2rem; letter-spacing: .03em; }
.l-punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: l-late 1.8s ease-in-out infinite; }
@keyframes l-late { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.l-hero-visual { position: relative; margin: 0; }
.l-hero-visual > img { width: 100%; border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .34); transform: perspective(1000px) rotateY(-5deg); transition: transform .5s ease; }
.l-hero-visual > img:hover { transform: perspective(1000px) rotateY(0); }
.l-flota { position: absolute; display: flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .96); color: #1e293b; border-radius: .8rem; padding: .6rem .85rem; box-shadow: 0 .9rem 2.1rem rgba(0, 0, 0, .18); animation: l-flotar 3s ease-in-out infinite; z-index: 3; }
.l-flota .l-icono { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
.l-flota strong { display: block; font-size: .8rem; line-height: 1.2; }
.l-flota small { display: block; font-size: .7rem; color: #64748b; }
.l-flota-1 { top: 5%; left: -1.8rem; } .l-flota-2 { top: 5%; right: -1.2rem; } .l-flota-3 { bottom: 10%; left: -2.2rem; } .l-flota-4 { bottom: 10%; right: -1.2rem; }
.l-hero-solo-tarjetas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.l-hero-solo-tarjetas .l-flota { position: static; }
@keyframes l-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 63.99rem) { .l-hero-inst { grid-template-columns: 1fr; } .l-hero-visual:not(.l-hero-solo-tarjetas) .l-flota { display: none; } .l-hero-visual > img { transform: none; } }

/* Separadores de sección */
.l-con-sep { padding-bottom: 7rem; }
.l-sep { position: absolute; left: 0; right: 0; bottom: -1px; height: 5rem; line-height: 0; pointer-events: none; z-index: 5; }
.l-sep svg { width: 100%; height: 100%; display: block; }
.l-sep-claro path { fill: var(--l-bg); } .l-sep-suave path { fill: var(--l-suave); } .l-sep-oscuro path { fill: var(--l-oscuro-bg); }
.l-sep-acento path { fill: var(--l-acento); } .l-sep-imagen path { fill: #0f172a; }

/* Cifras encimadas sobre la sección anterior, con tarjetas */
.l-sec.l-v-solapadas { background: transparent; margin-top: -4.5rem; padding-top: 0; z-index: 10; color: var(--l-text); }
.l-v-solapadas .l-cifras, .l-v-tarjetas .l-cifras { gap: 1.5rem; }
.l-v-solapadas .l-cifra, .l-v-tarjetas .l-cifra { background: var(--l-card); border: 1px solid var(--l-borde); border-radius: 1.25rem; padding: 2rem 1rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .1); transition: transform .2s ease, box-shadow .2s ease; color: var(--l-text); }
.l-v-solapadas .l-cifra:hover, .l-v-tarjetas .l-cifra:hover { transform: translateY(-4px); box-shadow: 0 1.5rem 3.5rem rgba(var(--l-acento-rgb), .22); }
.l-cifra .l-icono { margin: 0 auto 1rem; width: 3.4rem; height: 3.4rem; font-size: 1.5rem; border-radius: 1rem; }

/* Características: tarjeta con barra de color al pasar el cursor */
.l-v-tarjetas .l-item { position: relative; overflow: hidden; }
.l-v-tarjetas .l-item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--l-acento), color-mix(in srgb, var(--l-acento) 50%, #0dcaf0)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.l-v-tarjetas .l-item:hover::before { transform: scaleX(1); }

/* Bloque de código o terminal */
.l-term-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.l-term-txt h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.l-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.l-chip { padding: .3rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(var(--l-acento-rgb), .14); color: var(--l-acento); border: 1px solid rgba(var(--l-acento-rgb), .3); }
.l-term { background: #0f172a; color: #e5e7eb; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25); overflow: hidden; }
.l-term-barra { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; background: rgba(255, 255, 255, .05); }
.l-pt { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; }
.l-pt-r { background: #ff5f56; } .l-pt-a { background: #ffbd2e; } .l-pt-v { background: #27c93f; }
.l-term-titulo { margin-left: .5rem; font-size: .8rem; color: #94a3b8; }
.l-term pre { margin: 0; padding: 1rem 1.25rem 1.25rem; overflow-x: auto; font: .85rem/1.6 ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; }
.l-term code { display: block; }
.l-cod-linea { display: block; white-space: pre; min-height: 1.6em; }
.l-cod-com { color: #4ade80; }
@media (max-width: 63.99rem) { .l-term-grid { grid-template-columns: 1fr; } }

/* Tecnologías */
.l-tecs { display: grid; gap: 1.25rem; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.l-tec { background: var(--l-card); border: 1px solid var(--l-borde); border-radius: 1rem; padding: 1.5rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; transition: transform .2s ease, box-shadow .2s ease; }
.l-tec:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12); }
.l-tec small { color: var(--l-muted); }
.l-tec-icono { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.6rem; border-radius: 1rem; margin-bottom: .5rem; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }

/* Pie en columnas */
.l-pie-cols { background: linear-gradient(135deg, color-mix(in srgb, var(--l-acento) 55%, #000) 0%, color-mix(in srgb, var(--l-acento) 28%, #000) 100%); color: rgba(255, 255, 255, .8); text-align: left; border: 0; padding-block: 3rem 1.5rem; }
.l-pie-cols .l-pie-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.l-pie-cols h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .75rem; }
.l-pie-cols ul { display: block; padding: 0; margin: 0; list-style: none; }
.l-pie-cols li { margin-bottom: .45rem; font-size: .92rem; }
.l-pie-cols a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.l-pie-cols a:hover { color: #fff; text-decoration: underline; }
.l-pie-marca { display: flex; align-items: center; gap: .75rem; color: #fff; font-size: 1.1rem; margin-bottom: .75rem; }
.l-pie-cols .l-redes { display: flex; justify-content: center; margin-top: 1.5rem; }
.l-pie-cols .l-redes a { color: #fff; }
.l-pie-cols hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .15); margin: 1.5rem 0 1rem; }
.l-pie-cols .l-pie-texto { text-align: center; color: rgba(255, 255, 255, .6); }
@media (max-width: 47.99rem) { .l-pie-cols .l-pie-grid { grid-template-columns: 1fr; } }

/* Firma del sistema (autor del .env y crédito del framework) */
.l-firma { margin-top: .75rem; text-align: center; }
.l-firma p { margin: 0 0 .5rem; }
.l-autor { display: inline-block; padding: .25rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: .04em; background: rgba(var(--l-acento-rgb), .12); border: 1px solid rgba(var(--l-acento-rgb), .3); color: var(--l-text); }
.l-pie-cols .l-autor { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .25); color: #fff; }
.l-fw { font-size: .75rem; letter-spacing: .03em; color: var(--l-muted); text-decoration: none; }
.l-fw strong { color: var(--l-text); }
.l-pie-cols .l-fw { color: rgba(255, 255, 255, .55); }
.l-pie-cols .l-fw strong { color: rgba(255, 255, 255, .8); }
.l-fw:hover { text-decoration: underline; }

/* ───────────── Fidelidad con la landing de appLenguas (docs/23, sección 17) ───────────── */

/* Contenedor más ancho: a 1440 px ocupa ~1300 px, como el contenedor extra grande de Bootstrap */
.l-wrap { width: min(100% - 3rem, 82rem); }

/* Fondos «suaves» con un tinte del color de acento, en vez de gris */
.l-claro { --l-suave: color-mix(in srgb, var(--l-acento) 6%, #f8faff); }
.l-oscuro { --l-suave: color-mix(in srgb, var(--l-acento) 9%, #0d111c); }

/* Barra superior: al desplazarse es casi opaca (sin que se transparente el contenido) */
.l-nav-fija.l-nav-scroll { background: color-mix(in srgb, var(--l-bg) 97%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.l-nav-transp.l-nav-scroll { background: color-mix(in srgb, var(--l-bg) 97%, transparent); }
.l-marca { gap: .6rem; }
.l-logo { max-height: 2.2rem; }
.l-nav-transp .l-btn { border-radius: 999px; font-weight: 700; }
.l-nav-transp:not(.l-nav-scroll) .l-btn-borde { background: #fff; color: var(--l-acento); border-color: #fff; }
.l-nav-transp:not(.l-nav-scroll) .l-btn-borde:hover { box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .25); }
.l-nav-transp.l-nav-scroll .l-btn-borde { background: var(--l-acento); color: var(--l-acento-texto); border-color: var(--l-acento); }

/* Portada */
.l-inst .l-hero-titulo { font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing: -.01em; }
.l-hero-destacado { font-style: italic; color: #fef3c7; letter-spacing: .02em; }
.l-hero-panel { max-width: none; }
.l-inst .l-hero-panel .l-btn { border-radius: 999px; }
.l-inst .l-hero-panel .l-btn-acento { background: #fcd34d; color: #1f2937 !important; box-shadow: 0 .5rem 1.5rem rgba(252, 211, 77, .35); }
.l-inst .l-hero-panel .l-btn-borde { border-color: rgba(255, 255, 255, .85); }
.l-inst .l-hero-panel .l-btn-borde:hover { background: rgba(255, 255, 255, .12); }

/* Secciones y títulos */
.l-inst .l-sec { padding-block: 4rem; }
.l-inst .l-sec.l-con-sep { padding-bottom: 7rem; }
.l-inst .l-enc h2 { color: var(--l-acento); font-weight: 800; }
.l-inst .l-enc-centro h2::after { content: ''; display: block; width: 3.5rem; height: 4px; border-radius: 4px; margin: .6rem auto 0; background: linear-gradient(90deg, var(--l-acento), color-mix(in srgb, var(--l-acento) 40%, #0dcaf0)); }
.l-inst .l-term-txt h2, .l-inst .l-ti-txt h2, .l-inst .l-texto h2 { color: var(--l-acento); font-weight: 800; }
.l-inst .l-fondo-oscuro .l-enc h2, .l-inst .l-fondo-acento .l-enc h2, .l-inst .l-fondo-imagen .l-enc h2,
.l-inst .l-fondo-oscuro .l-term-txt h2, .l-inst .l-fondo-acento .l-term-txt h2 { color: inherit; }

/* Cifras: tarjetas bajo la portada, número de color y etiqueta en mayúsculas */
.l-sec.l-v-solapadas { margin-top: 0; padding-top: 3rem; }
.l-inst .l-v-solapadas .l-cifra, .l-inst .l-v-tarjetas .l-cifra { border-top: 3px solid var(--l-acento); border-radius: 1rem; padding: 1.75rem 1rem; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .08); }
.l-inst .l-v-solapadas .l-num, .l-inst .l-v-tarjetas .l-num { color: var(--l-acento); font-size: clamp(2rem, 4vw, 2.6rem); }
.l-inst .l-v-solapadas .l-cifra-et, .l-inst .l-v-tarjetas .l-cifra-et { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; }

/* Características: ícono arriba, texto debajo, tarjeta con sombra suave */
.l-inst .l-v-tarjetas .l-item { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.75rem; border-radius: 1.25rem; box-shadow: 0 .3rem 1.1rem rgba(0, 0, 0, .05); background: var(--l-card); }
.l-inst .l-v-tarjetas .l-item .l-icono { width: 3.4rem; height: 3.4rem; font-size: 1.5rem; border-radius: 1rem; }
.l-inst .l-v-tarjetas .l-item h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.l-inst .l-v-tarjetas .l-item p { font-size: .92rem; }

/* Terminal: etiquetas de colores y fondo más neutro */
.l-inst .l-term { background: #212529; }
.l-inst .l-chip { border-color: transparent; color: #fff; background: #0d6efd; }
.l-inst .l-chip:nth-child(5n+2) { background: #198754; }
.l-inst .l-chip:nth-child(5n+3) { background: #ffc107; color: #1f2937; }
.l-inst .l-chip:nth-child(5n+4) { background: #0dcaf0; color: #1f2937; }
.l-inst .l-chip:nth-child(5n+5) { background: #dc3545; }
.l-inst .l-term-txt .l-btn-borde { border-radius: 999px; color: var(--l-acento); }

/* Tecnologías: ícono de color sobre un fondo tenue */
.l-inst .l-tec { border-radius: 1.25rem; box-shadow: 0 .3rem 1.1rem rgba(0, 0, 0, .05); }
.l-inst .l-tec-icono { background: color-mix(in srgb, var(--g1) 14%, #fff); color: var(--g1); }

/* ───────────── Degradado y botones idénticos a los de appLenguas ───────────── */

/* Azul marino derivado del acento (con el azul de Bootstrap da casi exactamente #002a5e, el «navbar» de Lenguas) */
.l-body { --l-marino: color-mix(in srgb, var(--l-acento) 25%, #00152e); }

/* Portada: primario al 88 % → marino al 42 % → marino aclarado al 100 % */
.l-sec.l-v-institucional { background: linear-gradient(135deg,
    color-mix(in srgb, var(--l-acento) 88%, #000 12%) 0%,
    var(--l-marino) 42%,
    color-mix(in srgb, var(--l-marino) 75%, #fff 25%) 100%); }
.l-sec.l-v-institucional::before { background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .09) 0%, transparent 52%); }

/* Pie con el mismo marino */
.l-pie-cols { background: linear-gradient(135deg, var(--l-marino) 0%, color-mix(in srgb, var(--l-marino) 60%, #000) 100%); }

/* Botones de la portada: «accent-btn» (amarillo con brillo) y «outline-btn» (contorno blanco) */
.l-inst .l-btn { gap: .5rem; transition: all .3s ease; }
.l-inst .l-hero-panel .l-btn-grande { padding: 14px 40px; font-size: 1.05rem; border-radius: 50px; line-height: 1.5; }
.l-inst .l-hero-panel .l-btn-acento { background: #ffd54f; color: #06213f !important; border: 0; font-weight: 700; box-shadow: 0 6px 24px rgba(255, 213, 79, .38); }
.l-inst .l-hero-panel .l-btn-acento:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255, 213, 79, .52); background: #ffe082; }
.l-inst .l-hero-panel .l-btn-borde { border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-weight: 600; background: transparent; }
.l-inst .l-hero-panel .l-btn-borde:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-3px); box-shadow: none; }

/* Botón de la barra superior: píldora blanca con el color de acento («nav-cta»); al desplazarse, de acento */
.l-nav-transp .l-nav-acc .l-btn { padding: .45rem 1.35rem; font-size: .88rem; font-weight: 700; border: 0; border-radius: 50px; gap: .4rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); transition: all .3s ease; }
.l-nav-transp:not(.l-nav-scroll) .l-nav-acc .l-btn-borde { background: rgba(255, 255, 255, .95); color: var(--l-acento); }
.l-nav-transp:not(.l-nav-scroll) .l-nav-acc .l-btn-acento { background: #ffd54f; color: #06213f !important; }
.l-nav-transp.l-nav-scroll .l-nav-acc .l-btn-borde { background: var(--l-acento); color: var(--l-acento-texto); }
.l-nav-transp .l-nav-acc .l-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }

/* Botones fuera de la portada: píldora con contorno del color de acento («btn-outline-primary rounded-pill px-4») */
.l-inst .l-btn-borde:not(.l-btn-grande):not(.l-nav-acc .l-btn) { border: 2px solid var(--l-acento); color: var(--l-acento); border-radius: 50px; padding: .5rem 1.5rem; }
.l-inst .l-btn-borde:not(.l-btn-grande):not(.l-nav-acc .l-btn):hover { background: var(--l-acento); color: var(--l-acento-texto); }
.l-inst .l-btn-acento:not(.l-btn-grande):not(.l-nav-acc .l-btn) { border-radius: 50px; padding: .55rem 1.6rem; }
.l-inst .l-btn-invertido { border-radius: 50px; }