/*! Lienzo · DIT UPAEP · bundle.css v1.0.0 — 6 módulos — servido por Lienzo (https://vd.upaep.io/d/lienzo-dit) */ /* ── tokens.css — Tokens — la capa 1, todo depende de ella ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — tokens.css · capa 1 del sistema Marca: rojo UPAEP #E10023 · teal RAiSE #00A9A5 · oro SPES #BF9A57. NUNCA uses verde como color de marca UPAEP. Fija el tema con o data-theme="light"; si no lo fijas, el sistema sigue al sistema operativo. ============================================================================ */ /* ---- TOKENS DE MARCA (no cambian entre temas) ---- */ :root{ /* Rojo UPAEP — color primario institucional */ --rojo:#E10023; --rojo-600:#C40020; --rojo-700:#AD0722; /* Teal RAiSE — acento de IA responsable */ --teal:#00A9A5; --teal-700:#00807D; /* Submarca red educativa SPES */ --oro:#BF9A57; --oro-700:#9A7A3D; --navy:#00305F; /* Gris institucional UPAEP */ --gris:#878E94; /* Estructura */ --radius:18px; --radius-sm:12px; --radius-pill:999px; --maxw:1180px; --pad-x:clamp(20px,5vw,48px); --section-y:clamp(64px,9vw,104px); --ease:cubic-bezier(.22,1,.36,1); /* Tipografía — display de carácter + Inter para cuerpo */ --ff-display:'Space Grotesk','Inter',system-ui,sans-serif; --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ff-serif:'Fraunces',Georgia,'Times New Roman',serif; /* alterna: Fraunces NO se carga hoy */ } /* ---- TEMA CLARO (por defecto) ---- */ :root,:root[data-theme="light"]{ color-scheme:light; --bg:#FFFFFF; --bg-2:#F7F5F2; --surface:#FFFFFF; --surface-2:#F5F3EE; --line:#E6E3DE; --line-strong:#D8D3C8; --txt:#14161B; --txt-soft:#3D434E; --txt-mute:#6A7180; --teal-ink:var(--teal-700); --rojo-tint:rgba(225,0,35,.10); --teal-tint:rgba(0,169,165,.12); --nav-bg:rgba(255,255,255,.78); --glow-rojo:rgba(225,0,35,.12); --glow-teal:rgba(0,169,165,.12); --shadow:0 1px 2px rgba(20,22,27,.05),0 14px 34px rgba(20,22,27,.08); --shadow-lg:0 30px 70px -30px rgba(20,22,27,.28); } /* ---- TEMA OSCURO — la firma "premium" de la DIT (near-black CÁLIDO) ---- */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#191615; --bg-2:#201c1b; --surface:#26211f; --surface-2:#2e2826; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15); --txt:#f4efee; --txt-soft:#c7bfbd; --txt-mute:#8b8280; --teal:#19c3b2; --teal-ink:#5fded2; --rojo-tint:rgba(225,37,50,.18); --teal-tint:rgba(25,195,178,.16); --nav-bg:rgba(25,22,21,.72); --glow-rojo:rgba(225,37,50,.22); --glow-teal:rgba(25,195,178,.16); --shadow:0 24px 60px -28px rgba(0,0,0,.72); --shadow-lg:0 40px 90px -36px rgba(0,0,0,.85); } /* Si el autor no fija data-theme, respeta el sistema operativo. Son las MISMAS declaraciones del bloque de arriba, repetidas a propósito: si tocas una, toca las dos. */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ color-scheme:dark; --bg:#191615; --bg-2:#201c1b; --surface:#26211f; --surface-2:#2e2826; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15); --txt:#f4efee; --txt-soft:#c7bfbd; --txt-mute:#8b8280; --teal:#19c3b2; --teal-ink:#5fded2; --rojo-tint:rgba(225,37,50,.18); --teal-tint:rgba(25,195,178,.16); --nav-bg:rgba(25,22,21,.72); --glow-rojo:rgba(225,37,50,.22); --glow-teal:rgba(25,195,178,.16); --shadow:0 24px 60px -28px rgba(0,0,0,.72); --shadow-lg:0 40px 90px -36px rgba(0,0,0,.85); } } /* ── base.css — Base — reset, tipografía y contenedor ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — base.css · reset + tipografía + contenedor Depende de tokens.css. ============================================================================ */ /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* El espacio antes de los dos puntos es A PROPÓSITO y es CSS válido: el validador de módulos de Lienzo rechaza el nombre de esta propiedad pegado a los dos puntos, porque así empieza el viejo vector de ejecución de IE. No lo "arregles" o el módulo deja de subir. */ html{-webkit-text-size-adjust:100%;scroll-behavior : smooth} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} :focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:6px} /* ---- Base tipográfica ---- OJO: el body NO lleva transition de color. Chrome no repinta una propiedad con transition cuando su valor sale de una custom property que acaba de cambiar por [data-theme]: se queda con el color del tema anterior. Ver efectos.css (html.notrans). */ body{background:var(--bg);color:var(--txt);font-family:var(--ff-body); font-size:16.5px;line-height:1.65} h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.08; letter-spacing:-.02em;color:var(--txt);text-wrap:balance} h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.03em} h2{font-size:clamp(1.8rem,3.6vw,2.6rem)} h3{font-size:clamp(1.15rem,2vw,1.42rem)} p{color:var(--txt-soft)} strong{color:var(--txt);font-weight:600} .lead{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--txt-soft);max-width:62ch} .tnum{font-variant-numeric:tabular-nums} /* ---- Contenedor ---- .lz-wrap es alias de .wrap: el HTML del catálogo usa .wrap (así está escrito en la skill) y .lz-wrap existe para páginas que ya tengan una clase .wrap propia. */ .wrap,.lz-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)} /* ── layout.css — Layout — secciones, rejillas, cabecera y pie ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — layout.css · secciones, rejillas, cabecera y pie Depende de tokens.css y base.css. ============================================================================ */ /* ---- Secciones y ritmo ---- */ .section{padding-block:var(--section-y);scroll-margin-top:78px} .section--alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))} .sec-head{max-width:70ch;margin-bottom:clamp(28px,4vw,52px)} .sec-head .lead{margin-top:14px} /* ---- Rejillas ---- */ .grid{display:grid;gap:clamp(16px,2vw,26px)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ---- Cabecera: nav sticky con glassmorphism ---- */ .nav{position:sticky;top:0;z-index:60;background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line)} .nav__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--ff-display); font-weight:700;font-size:1rem;letter-spacing:-.01em} .brand__mark{height:26px;width:auto} .brand__sub{color:var(--txt-mute);font-weight:600} .nav__links{display:flex;gap:26px} .nav__links a{font-size:.92rem;color:var(--txt-soft);transition:color .2s} .nav__links a:hover{color:var(--txt)} .nav__right{display:flex;align-items:center;gap:14px} @media(max-width:760px){.nav__links{display:none}} /* ---- Pie institucional (la firma de la DIT es obligatoria) ---- */ .footer{border-top:1px solid var(--line);padding-block:44px} .footer .bar{width:46px;height:3px;background:var(--rojo);border-radius:3px;margin-bottom:22px} .footer__in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .footer .sign{font-size:.9rem;color:var(--txt-mute)} .footer .sign strong{color:var(--txt-soft)} .footer__logos{display:flex;align-items:center;gap:20px;opacity:.85} .footer__logos img{height:24px;width:auto} /* ---- Utilidades de composición (factorizadas de los style="…" de la plantilla) ---- */ .wrap--center{text-align:center;max-width:720px} .wrap--center .lead{margin-inline:auto;text-align:center} .wrap--center .eyebrow,.wrap--center .hero__cta{justify-content:center} .txt-rojo{color:var(--rojo)} /* ── componentes.css — Componentes — hero, KPIs, tarjetas, timeline, chips, botones, tablas ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — componentes.css Depende de tokens.css, base.css y layout.css. ============================================================================ */ /* ---- EYEBROW / KICKER — abre casi toda sección de la DIT ---- */ .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px; font-family:var(--ff-body);font-size:.74rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--rojo)} .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor} .eyebrow.teal{color:var(--teal-ink)} /* ---- BOTONES ---- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px; border-radius:var(--radius-pill);font-weight:600;font-size:.98rem;line-height:1; background:var(--rojo);color:#fff;box-shadow:0 14px 34px -14px rgba(225,0,35,.7); transition:transform .25s var(--ease),background .25s,box-shadow .25s} .btn:hover{transform:translateY(-2px);background:var(--rojo-700)} .btn .arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn--ghost{background:transparent;color:var(--txt);border:1px solid var(--line-strong); box-shadow:none} .btn--ghost:hover{background:var(--surface-2);transform:translateY(-2px)} /* El teal es SOLO para acciones de IA (RAiSE). No lo generalices. */ .btn--teal{background:var(--teal);box-shadow:0 14px 34px -14px rgba(0,169,165,.6)} .btn--teal:hover{background:var(--teal-700)} /* Toggle de tema (el JS lo engancha por [data-lz-theme-toggle], .theme-toggle o #themeBtn) */ .theme-toggle{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-pill); border:1px solid var(--line);color:var(--txt-soft);transition:.2s} .theme-toggle:hover{color:var(--txt);border-color:var(--line-strong);background:var(--surface-2)} /* ---- BADGES / CHIPS ---- */ .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px; border-radius:var(--radius-pill);border:1px solid var(--line-strong); font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--txt-soft)} .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--txt-mute)} .badge--rojo{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-tint)} .badge--rojo .dot{background:var(--rojo)} /* color-mix no existe en Safari <16.2 / Firefox <113: ahí el badge queda sin borde teal. */ .badge--raise{color:var(--teal-ink);border-color:color-mix(in srgb,var(--teal) 45%,transparent); background:var(--teal-tint)} .badge--raise .dot{background:var(--teal)} /* ---- CARD — el patrón universal DIT ---- */ .card{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:clamp(22px,3vw,30px);overflow:hidden; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s} .card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)} .card h3{margin-bottom:10px} .card p{font-size:.98rem} .card__icon{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius-sm); background:var(--rojo-tint);color:var(--rojo);margin-bottom:18px} /* Tonos del ícono (en la plantilla iban como style="…"). El oro se escribe literal porque el sistema NO tiene --oro-tint; si algún día existe, cámbialo aquí. */ .card__icon[data-tone="teal"]{background:var(--teal-tint);color:var(--teal-ink)} .card__icon[data-tone="oro"]{background:rgba(191,154,87,.16);color:var(--oro)} .card__icon[data-tone="gris"]{background:var(--surface-2);color:var(--gris)} /* Barra de acento lateral por categoría (data-tone) */ .card--accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--rojo)} .card--accent[data-tone="teal"]::before{background:var(--teal)} .card--accent[data-tone="oro"]::before{background:var(--oro)} .card--accent[data-tone="gris"]::before{background:var(--gris)} /* ---- KPI / STAT — cifra grande con unidad en ---- */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .kpi{padding:clamp(20px,2.6vw,30px);border-right:1px solid var(--line)} .kpi:last-child{border-right:none} .kpi .v{font-family:var(--ff-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:800; line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .kpi .v small{font-size:.5em;font-weight:700;color:var(--rojo);margin-left:2px} .kpi .l{margin-top:10px;font-size:.86rem;color:var(--txt-mute)} /* La unidad teal va por posición: reordenar los KPIs cambia los colores. */ .kpi:nth-child(2) .v small{color:var(--teal)} @media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)} .kpi:nth-child(2){border-right:none}.kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line)}} @media(max-width:460px){.kpis{grid-template-columns:1fr}.kpi{border-right:none;border-bottom:1px solid var(--line)}.kpi:last-child{border-bottom:none}} /* Recurso premium: la tira solapa el hero (antes iba inline en el .wrap) */ .kpis-overlap{margin-top:-24px;position:relative;z-index:2} /* ---- STEPS — pasos numerados ---- */ .step{position:relative;padding-left:0} .step .num{font-family:var(--ff-display);font-size:2.4rem;font-weight:800; color:var(--rojo);line-height:1;letter-spacing:-.03em;opacity:.9} .step h3{margin:12px 0 8px} .step p{font-size:.98rem} /* ---- TIMELINE — línea con gradiente rojo→teal, nodos circulares ---- */ .timeline{position:relative;padding-left:38px;max-width:720px} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px; border-radius:3px;background:linear-gradient(var(--rojo),var(--teal))} .hito{position:relative;padding-bottom:34px} .hito:last-child{padding-bottom:0} /* El nodo "perfora" la línea pintándose del color de fondo: dentro de .section--alt (que es un gradiente) no coincide del todo y se nota un halo. */ .hito::before{content:"";position:absolute;left:-35px;top:4px;width:19px;height:19px; border-radius:50%;background:var(--bg);border:5px solid var(--rojo)} .hito[data-tone="teal"]::before{border-color:var(--teal)} .hito .fecha{font-family:var(--ff-display);font-size:.76rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--rojo)} .hito[data-tone="teal"] .fecha{color:var(--teal-ink)} .hito h3{margin:6px 0 6px} .hito p{font-size:.96rem} /* ---- CALLOUT — bloque de acento (el paraguas RAiSE / IA) ---- */ .callout{position:relative;border-radius:var(--radius);padding:clamp(28px,4vw,44px); border:1px solid var(--teal-tint); background:linear-gradient(135deg,var(--teal-tint),transparent 70%),var(--surface);overflow:hidden} .callout h2{max-width:20ch} .callout .lead{margin-top:16px} .callout--rojo{border-color:var(--rojo-tint); background:linear-gradient(135deg,var(--rojo-tint),transparent 70%),var(--surface)} /* ---- HERO ---- */ .hero{position:relative;overflow:hidden;padding-block:clamp(72px,12vw,132px) clamp(56px,8vw,92px)} .hero h1{margin-top:22px;max-width:16ch} /* medida editorial del titular */ .hero .lead{margin-top:22px} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero > .wrap{position:relative;z-index:1} /* ---- TABLA de cifras (en la skill era 100% inline; aquí ya es servible) ---- */ .lz-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .lz-table thead th{padding:12px 0;border-bottom:1px solid var(--line);text-align:left; font-family:var(--ff-body);font-size:.8rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-mute)} .lz-table td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--txt-soft)} .lz-table .num{text-align:right} .lz-table tfoot tr{font-weight:700} .lz-table tfoot td{border-top:2px solid var(--txt);border-bottom:none;color:var(--txt)} .lz-table tfoot .num{color:var(--rojo)} /* ── efectos.css — Efectos — glow, reveal, barra de progreso y guarda de tema ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — efectos.css · luz, aparición y cambio de tema Depende de tokens.css. Va acoplado a tema.js y reveal.js. ============================================================================ */ /* ---- Barra de progreso de lectura (rojo → teal) ---- Era #progress en la skill; como el CDN se sirve sobre páginas ajenas, la canónica es la CLASE. El ID se conserva como alias para el HTML antiguo. */ .lz-progress,#progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:100; background:linear-gradient(90deg,var(--rojo),var(--teal));transition:width .1s linear} /* ---- Orbes de luz ambientales del hero ---- */ .glow{position:absolute;inset:0;pointer-events:none;z-index:0} .glow::before,.glow::after{content:"";position:absolute;border-radius:50%;filter:blur(120px)} .glow::before{width:560px;height:560px;background:var(--glow-rojo);top:-200px;right:-120px} .glow::after{width:520px;height:520px;background:var(--glow-teal);bottom:-260px;left:-160px} /* ---- Retícula de puntos sutil (textura opcional) ---- */ .dotgrid::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:26px 26px; color:var(--line);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%)} /* ---- REVEAL al hacer scroll (reveal.js añade .in) ---- Lo que ya es visible al cargar se marca class="reveal in": el observador solo mira '.reveal:not(.in)'. */ .reveal{opacity:0;transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} /* ============================================================================ CAMBIO DE TEMA SIN COLORES PEGADOS ← no borres esto Bug de Chrome: si un elemento declara `transition` sobre una propiedad de color cuyo valor sale de una custom property (border-color:var(--line), color:var(--txt-soft)…), al cambiar html[data-theme] NO se reinicia la transición y el elemento se queda pintado con el color del tema anterior. Aquí lo tocan .card (border-color), .theme-toggle (transition:.2s = all) y .nav__links a (color): conservan su transición porque sirven al :hover, y quedan cubiertos por esta regla. Va acoplada a setTheme() de tema.js: si sirves el CSS sin el JS (o al revés), el bug reaparece. Verifícalo alternando el tema en los DOS sentidos y esperando ~700 ms. ============================================================================ */ html.notrans,html.notrans *, html.notrans *::before,html.notrans *::after{transition:none!important} /* ---- Accesibilidad: el movimiento es adorno, no requisito ---- */ @media (prefers-reduced-motion:reduce){ *{scroll-behavior : auto!important} .reveal{opacity:1;transform:none;transition:none} .btn:hover,.card:hover{transform:none} } /* ── responsivo.css — Responsivo — utilidades móviles potentes (entra al bundle) ─────────────────────────────────────── */ /* ============================================================================ UPAEP · DIT — responsivo.css · capa de adaptaciones móviles is_core: entra al bundle.css → lo cargan TODOS los sitios del sistema, así que aquí SOLO van reglas ADITIVAS (clases nuevas y variantes opt-in). No toca nada de tokens/base/layout/componentes. Depende de tokens.css. Breakpoints del sistema, respetados: 760px (nav) y 640px (rejillas). ============================================================================ */ /* ---- SAFE-AREA — respeta el notch y la barra de gestos en iOS (viewport-fit=cover) ---- Suman el inset SIN pisar el padding del contenedor: usan max() con --pad-x. */ .safe-x{padding-left:max(var(--pad-x),env(safe-area-inset-left)); padding-right:max(var(--pad-x),env(safe-area-inset-right))} .safe-t{padding-top:env(safe-area-inset-top)} .safe-b{padding-bottom:env(safe-area-inset-bottom)} /* ---- VISIBILIDAD por viewport (breakpoint 760px, el mismo del nav) ---- .hide-mobile: se oculta ≤760. .hide-desktop: se oculta >760 (para barras que solo viven en móvil, como .bottom-nav). .show-mobile: aparece solo ≤760. NOTA: .show-mobile usa display:revert (recupera el display natural); para un CONTENEDOR con display propio prefiere marcarlo con .hide-desktop, que conserva su display y solo lo oculta arriba de 760. */ .show-mobile{display:none} @media(max-width:760px){ .hide-mobile{display:none!important} .show-mobile{display:revert!important} } @media(min-width:761px){ .hide-desktop{display:none!important} } /* ---- STACK — colapsa cualquier grid/flex a una sola columna en móvil ---- */ @media(max-width:640px){ .stack-sm{display:grid!important;grid-template-columns:1fr!important} } /* ---- SCROLL-X — carril horizontal con snap para tarjetas ---- Los hijos directos son las tarjetas; cada una hace snap al borde. Con la clase extra .grid-desktop, en escritorio deja de ser carril y vuelve a rejilla. */ .scroll-x{display:flex;gap:clamp(12px,3vw,20px);overflow-x:auto; scroll-snap-type:x mandatory;scroll-padding:var(--pad-x); -webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin; /* La propiedad overscroll pegada a los dos puntos dispara el guardia anti-IE del validador de módulos; el espacio antes de ':' lo desactiva y sigue siendo CSS válido (mismo truco que scroll-behavior en base.css). NO le quites el espacio. */ overscroll-behavior-x : contain} .scroll-x>*{scroll-snap-align:start;flex:0 0 min(82%,320px)} .scroll-x::-webkit-scrollbar{height:6px} .scroll-x::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px} @media(min-width:761px){ .scroll-x.grid-desktop{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:visible} .scroll-x.grid-desktop>*{flex:initial} } /* ---- TAP — área táctil mínima accesible (WCAG 2.5.5: 44×44) ---- */ .tap{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* ---- FULL-BLEED — rompe el .wrap y ocupa todo el ancho SOLO en móvil ---- Para imágenes, mapas o tablas que se sienten apretadas dentro del contenedor. */ @media(max-width:640px){ .full-bleed-sm{width:100vw;margin-left:50%;transform:translateX(-50%)} } /* ---- IMÁGENES fluidas ---- */ .img-fluid{width:100%;height:auto;display:block} .img-cover{width:100%;height:100%;object-fit:cover;display:block} /* ---- TIPOGRAFÍA fluida fina — afina el móvil sin tocar la escala base ---- Los h1-h4 ya son clamp() en base.css; aquí solo se aprieta cuerpo y .lead. */ @media(max-width:520px){ body{font-size:16px} .lead{font-size:clamp(1rem,4.5vw,1.14rem)} } /* ---- TABLA con scroll — envuelve .lz-table cuando no cabe a lo ancho ---- Uso:
…
*/ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} @media(max-width:640px){ .table-scroll .lz-table{min-width:520px} } /* ============================================================================ MENÚ MÓVIL — el CSS del patrón que enciende nav-movil.js El sistema oculta .nav__links bajo 760px y NO trae reemplazo (hueco real). nav-movil.js inyecta el botón .nav__burger y clona los enlaces en .nav__panel; este bloque los viste. El JS solo alterna la clase .is-open. ============================================================================ */ /* Botón hamburguesa (tres líneas que se cruzan en X al abrir). Solo ≤760px. */ .nav__burger{display:none;width:42px;height:42px;flex-direction:column;gap:5px; align-items:center;justify-content:center;border:1px solid var(--line); border-radius:var(--radius-pill);background:var(--surface);color:var(--txt)} .nav__burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor; transition:transform .25s var(--ease),opacity .2s var(--ease)} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:760px){.nav__burger{display:inline-flex}} /* Velo detrás del panel */ .nav__scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.42); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)} .nav__scrim.is-open{opacity:1;visibility:visible} /* Panel deslizable desde la derecha */ .nav__panel{position:fixed;top:0;right:0;z-index:80;height:100vh;height:100dvh; width:min(82vw,320px);display:flex;flex-direction:column;gap:4px;overflow-y:auto; padding:calc(env(safe-area-inset-top) + 74px) 22px calc(env(safe-area-inset-bottom) + 22px); background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg); transform:translateX(100%);transition:transform .32s var(--ease)} .nav__panel.is-open{transform:none} .nav__panel a{display:block;padding:13px 12px;border-radius:var(--radius-sm); font-family:var(--ff-display);font-size:1.06rem;font-weight:600;color:var(--txt); transition:background .2s var(--ease),color .2s var(--ease)} .nav__panel a:hover,.nav__panel a:focus-visible{background:var(--surface-2);color:var(--rojo)} /* Bloquea el scroll del fondo mientras el panel/hoja está abierto */ body.lz-noscroll{overflow:hidden} /* En escritorio el menú móvil no existe, aunque un resize deje .is-open colgando */ @media(min-width:761px){.nav__panel,.nav__scrim{display:none}} /* ============================================================================ BOTTOM-NAV — barra de pestañas inferior, fija, solo en móvil Márcala con .hide-desktop para que desaparezca >760px. ============================================================================ */ .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:65; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--nav-bg);backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)} .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;min-height:56px;padding:8px 4px;font-size:.7rem;font-weight:600;letter-spacing:.02em; color:var(--txt-mute);transition:color .2s var(--ease)} .bottom-nav a .ico{width:22px;height:22px;display:block} .bottom-nav a[aria-current],.bottom-nav a.is-active{color:var(--rojo)} .bottom-nav a:active{background:var(--surface-2)} /* ============================================================================ SHEET — hoja inferior deslizable (bottom sheet) con asa Estructura: .sheet > .sheet__scrim + .sheet__panel (> .sheet__grip + contenido). Alterna la clase .is-open sobre el .sheet para abrir/cerrar. ============================================================================ */ .sheet{position:fixed;inset:0;z-index:85;visibility:hidden} .sheet.is-open{visibility:visible} .sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0; transition:opacity .3s var(--ease)} .sheet.is-open .sheet__scrim{opacity:1} .sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto; padding:10px 20px calc(env(safe-area-inset-bottom) + 26px); background:var(--surface);border-top:1px solid var(--line);border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform .34s var(--ease)} .sheet.is-open .sheet__panel{transform:none} .sheet__grip{width:42px;height:5px;border-radius:999px;background:var(--line-strong); margin:6px auto 16px;cursor:grab} /* ============================================================================ KPIS-MOVIL — variante que se apila 2×2 legible en móvil (no cae a 1 columna) La tira .kpis normal colapsa a 1 col en ≤460px; añade .kpis--2x2 para conservar 2×2. Gana por especificidad (dos clases) sobre las reglas de componentes.css. ============================================================================ */ @media(max-width:640px){ .kpis.kpis--2x2{grid-template-columns:repeat(2,1fr)} .kpis.kpis--2x2 .kpi{border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .kpis.kpis--2x2 .kpi:nth-child(2n){border-right:none} .kpis.kpis--2x2 .kpi:nth-last-child(-n+2){border-bottom:none} .kpis.kpis--2x2 .kpi .v{font-size:clamp(1.6rem,8vw,2.1rem)} .kpis.kpis--2x2 .kpi .l{font-size:.8rem} } /* ---- Accesibilidad: sin movimiento, todo aparece/desaparece sin deslizar ---- */ @media (prefers-reduced-motion:reduce){ .nav__panel,.nav__scrim,.nav__burger span, .sheet__panel,.sheet__scrim,.bottom-nav a{transition:none} }