/* era7 · la web publica como demostracion visual de la Factoria (ORDEN-065). * * REGLAS DE LA CASA QUE ESTE FICHERO CUMPLE * - Ningun recurso externo: las tipografias son ficheros locales (`./fonts/`), * no hay data: URI, no hay ninguna URL absoluta. La CSP del host puede ser * `default-src 'self'` sin excepciones. * - Ningun `style=` en el HTML: todo lo visual esta aqui. * - Fondo tinta, UN acento frio. Nada de degradados de colores, nada de halos * de colorines, nada de emoji ni iconos genericos. * - Por defecto se ve la version ESTATICA (composicion premium en SVG+CSS). * La version 3D se enciende anadiendo `con-guion` al desde el JS: * asi, sin JS, sin WebGL, en movil o con reduced-motion, no hay ni negro ni * hueco -- hay una pagina entera legible en columna. */ /* ---------------------------------------------------------------- tipografia */ @font-face { font-family: "Plex"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plex"; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Plex"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "PlexMono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------- paleta */ :root { --tinta: #05070a; /* fondo */ --tinta-2: #0a0e14; /* superficies */ --tinta-3: #121821; /* filetes */ --texto: #dfe7ee; --texto-tenue: #8c99a6; --texto-debil: #7c8995; /* ~5,6:1 sobre la tinta: AA incluso a 10 px */ --acento: #7fd3ff; /* UNO. No hay segundo color de marca. */ --acento-hondo: #1d3f55; --alerta: #d98b5f; /* solo para "bloqueada": estado, no marca */ --sans: "Plex", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "PlexMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ancho: 1120px; } /* -------------------------------------------------------------------- base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--tinta); color: var(--texto); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0; } h2 { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.08; } p { margin: 0; } a { color: inherit; } img, svg { max-width: 100%; } .saltar-al-contenido { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--acento); color: #04121c; padding: 10px 16px; font-size: 14px; text-decoration: none; } .saltar-al-contenido:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* -------------------------------------------------------------------- barra */ .barra { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(16px, 4vw, 48px); background: linear-gradient(180deg, rgba(5, 7, 10, 0.92), rgba(5, 7, 10, 0)); } .marca-barra { text-decoration: none; display: flex; align-items: baseline; gap: 12px; } .marca-barra b { font-size: 19px; letter-spacing: 0.24em; text-transform: uppercase; } .marca-barra span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-debil); } .nav { display: flex; gap: 22px; } .nav a { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-tenue); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } .nav a:hover, .nav a:focus-visible { color: var(--texto); border-bottom-color: var(--acento); } /* ================================================================ 1 · PELICULA * Por defecto (sin `con-guion`): columna legible, composicion estatica arriba. * ============================================================================ */ .pelicula { position: relative; } .pelicula-fijo { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px clamp(16px, 5vw, 64px) 72px; overflow: hidden; } .lienzo { display: none; } .estatico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .estatico-svg { width: min(92vmin, 760px); height: auto; opacity: 0.9; } .estatico-red { opacity: 0.16; } .estatico-nodos { opacity: 0.5; } .velo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0.78) 78%, var(--tinta) 100%); } .grano { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(0, 0, 0, 0) 1px 3px); } .rotulos { position: relative; z-index: 2; max-width: 40ch; text-align: center; } .rotulo { margin: 0 0 34px; } .rotulo:last-child { margin-bottom: 0; } .tramo { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--acento); opacity: 0.75; margin-bottom: 10px; } .linea { display: block; font-size: clamp(22px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -0.02em; } .susurro { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--texto-debil); } .indicador { display: none; } .pista { position: relative; z-index: 2; margin-top: 44px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--texto-debil); } /* --- version cinematografica: solo cuando el JS ha decidido que cabe --- */ .con-guion .pelicula { height: 640vh; } .con-guion .pelicula-fijo { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 0; } .con-guion .lienzo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } /* Mientras el motor 3D viaja, la composicion estatica se queda APENAS encendida: la escena 1 de la orden es «pantalla practicamente negra», y ensenar la celosia entera para luego apagarla contaria la pelicula al reves. Cuando la escena 3D pinta su primer fotograma (`escena-lista`) se apaga del todo; si el motor no llega a cargar (`sin-3d`), vuelve a plena luz, que es el fallback premium. */ .con-guion .estatico { opacity: 0.12; transition: opacity 900ms ease; } .con-guion.escena-lista .estatico { opacity: 0; } .con-guion.sin-3d .estatico { opacity: 0.9; } .con-guion .rotulos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(42ch, 86vw); } .con-guion .rotulo { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(calc(-50% + 18px)); opacity: 0; visibility: hidden; transition: opacity 620ms ease, transform 620ms ease; } .con-guion .rotulo.visible { opacity: 1; visibility: visible; transform: translateY(-50%); } .con-guion .indicador { display: flex; align-items: center; gap: 12px; position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); z-index: 3; } .indicador-barra { display: block; width: 168px; height: 1px; background: var(--tinta-3); position: relative; } .indicador-barra i { display: block; height: 1px; width: 0; background: var(--acento); } .indicador-texto { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--texto-debil); font-variant-numeric: tabular-nums; } #guion-reproducir { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: none; border: 1px solid var(--tinta-3); color: var(--texto-debil); padding: 4px 10px; cursor: pointer; transition: background 220ms ease, color 220ms ease; } #guion-reproducir:hover, #guion-reproducir:focus-visible { background: var(--acento); color: #04121c; border-color: var(--acento); } .con-guion .pista { position: absolute; bottom: 64px; opacity: 0.6; } /* ================================================================== 2 · MARCA */ .marca { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px clamp(16px, 5vw, 64px); border-top: 1px solid var(--tinta-3); } .marca:focus { outline: none; } .frase-en { font-family: var(--mono); font-size: clamp(11px, 1.3vw, 14px); letter-spacing: 0.44em; text-transform: uppercase; color: var(--texto-tenue); } .wordmark { font-size: clamp(76px, 20vw, 260px); line-height: 0.92; letter-spacing: 0.02em; margin: 28px 0 24px; color: var(--texto); } .frase-en-2 { color: var(--acento); letter-spacing: 0.3em; } .subtitulo { margin-top: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--texto-debil); } .cta-hero { margin-top: 48px; } /* ============================================================== secciones base */ .seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(84px, 12vh, 150px) clamp(16px, 5vw, 48px); border-top: 1px solid var(--tinta-3); } .rotulo-seccion { font-family: var(--mono); font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--acento); margin-bottom: 22px; } .entradilla { color: var(--texto-tenue); max-width: 62ch; margin-top: 26px; font-size: 16px; } .nota { color: var(--texto-debil); max-width: 70ch; margin-top: 36px; font-size: 13px; line-height: 1.6; } /* aparicion al entrar en vista (IntersectionObserver anade .dentro) */ .con-guion [data-animar] { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms ease; } .con-guion [data-animar].dentro { opacity: 1; transform: none; } /* ==================================================== 3 · POSICIONAMIENTO * Manifiesto de siete pilares: tipografia grande, un pilar por fila, sin * rejilla de tarjetas -- es la lectura "una frase por pantalla" aplicada a una * seccion estatica (la pagina no repite el carril de scroll de la pelicula * para esto). Cada
  • lleva [data-animar]: reduced-motion ya lo neutraliza * (regla general mas abajo). * ============================================================================ */ .pilares { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 0; } .pilares li { padding: 26px 0; border-top: 1px solid var(--tinta-3); display: grid; grid-template-columns: minmax(160px, 320px) 1fr; gap: 24px; align-items: baseline; } .pilares li:last-child { padding-bottom: 0; } .pilares b { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.01em; color: var(--acento); } .pilares span { color: var(--texto-tenue); font-size: 16px; max-width: 56ch; } /* ============================================================ 4 · LA FORMULA */ .ingredientes { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 1px; background: var(--tinta-3); grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); border: 1px solid var(--tinta-3); } .ingredientes li { background: var(--tinta-2); padding: 24px 20px; } .ingredientes b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--acento); margin-bottom: 10px; } .ingredientes span { color: var(--texto-tenue); font-size: 14px; } .igual { text-align: center; font-size: 28px; color: var(--texto-debil); margin: 26px 0; } .resultado { text-align: center; font-family: var(--mono); font-size: clamp(16px, 2.6vw, 30px); letter-spacing: 0.3em; } /* ========================================================= 5 · SIETE PASOS */ .pasos { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 1px; background: var(--tinta-3); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); border: 1px solid var(--tinta-3); } .paso { background: var(--tinta-2); padding: 30px 26px 34px; } .paso-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--acento); } .paso-titulo { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; margin: 14px 0 14px; color: var(--texto); } .paso-frase { font-size: 17px; line-height: 1.4; } .paso-evidencia { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tinta-3); color: var(--texto-tenue); font-size: 13.5px; } /* ============================================================ 6 · EMPLEADOS * Galeria cinematografica: la rejilla de botones es la tira de indice (mas * apretada que una tarjeta de chatbot: clave, nombre, especialidad, conteo de * manos) y #ficha es EL panel -- uno a la vez, con nombre grande, especialidad * y las dos lineas que pidio el humano (que hace / que no hace). * ============================================================================ */ .rejilla-empleados { margin-top: 44px; display: grid; gap: 1px; background: var(--tinta-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border: 1px solid var(--tinta-3); } .cargando { grid-column: 1 / -1; background: var(--tinta-2); padding: 28px; color: var(--texto-debil); } .empleado { background: var(--tinta-2); border: 0; text-align: left; width: 100%; padding: 22px 20px 24px; color: inherit; font: inherit; cursor: pointer; display: block; transition: background 220ms ease; } .empleado:hover, .empleado:focus-visible { background: #101722; } .empleado[aria-pressed="true"] { background: #101722; box-shadow: inset 2px 0 0 var(--acento); } .empleado-clave { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-debil); } .empleado-nombre { display: block; font-size: 22px; font-weight: 600; margin: 8px 0 6px; } .empleado-rol { display: block; font-size: 13px; color: var(--acento); } .empleado-especialidad { display: block; margin-top: 10px; font-size: 13px; color: var(--texto-tenue); line-height: 1.4; } .empleado-manos { display: block; margin-top: 14px; font-size: 12px; color: var(--texto-debil); font-family: var(--mono); } .ficha { margin-top: 1px; background: var(--tinta-2); border: 1px solid var(--tinta-3); padding: 30px clamp(20px, 3vw, 34px); } .ficha h3 { font-size: 30px; margin-bottom: 4px; } .ficha-rol { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--acento); text-transform: uppercase; } .ficha-especialidad { margin-top: 14px; font-size: 18px; color: var(--texto); } .ficha-especialidad b, .ficha-que-hace b, .ficha-que-no-hace b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-debil); font-weight: 400; margin-bottom: 6px; } .ficha-que-hace, .ficha-que-no-hace { margin-top: 18px; font-size: 15px; color: var(--texto-tenue); max-width: 62ch; } .ficha-lista { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ficha-lista li { font-family: var(--mono); font-size: 12px; padding: 6px 11px; border: 1px solid var(--tinta-3); color: var(--texto-tenue); } .ficha-lista li.con-firma { border-color: var(--acento-hondo); color: var(--acento); } .ficha-dato { margin-top: 20px; font-size: 13.5px; color: var(--texto-tenue); } .ficha-dato b { color: var(--texto); font-weight: 500; } .ficha-pendiente { margin-top: 16px; font-size: 13px; color: var(--texto-debil); } .ficha-nav { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tinta-3); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ficha-anterior, .ficha-siguiente { background: none; border: 1px solid var(--tinta-3); color: var(--texto-tenue); font: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; } .ficha-anterior:hover, .ficha-siguiente:hover, .ficha-anterior:focus-visible, .ficha-siguiente:focus-visible { color: var(--texto); border-color: var(--acento-hondo); } .ficha-posicion { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--texto-debil); font-variant-numeric: tabular-nums; } .ficha-cerrar { margin-top: 24px; background: none; border: 1px solid var(--tinta-3); color: var(--texto-tenue); font: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; } .ficha-cerrar:hover { color: var(--texto); border-color: var(--acento-hondo); } /* ========================================================= 7 · COORDINACION */ .escalera { margin-top: 48px; display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap; } .peldano { flex: 1 1 240px; background: var(--tinta-2); border: 1px solid var(--tinta-3); padding: 26px 22px; } .peldano b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; color: var(--acento); margin-bottom: 12px; } .peldano span { color: var(--texto-tenue); font-size: 14.5px; } .flecha { align-self: center; color: var(--texto-debil); font-size: 20px; } /* ================================================================== 8 · REAL * `.plano-apex`: marco con relleno en degradado (fondo real, no un placeholder * gris) para que si `assets/apex-sala-de-mando.webp` todavia no existe -- hoy * no existe -- el hueco siga pareciendo un plano y no un icono de imagen rota. * `id="captura-apex-pendiente"` es la unica parte que JS apaga cuando la * imagen SI carga (`error`/`load` en `js/arranque.js`); sin JS se queda * escrita, que es la lectura honesta por defecto. * ============================================================================ */ .plano-apex { position: relative; margin: 48px 0 0; border: 1px solid var(--tinta-3); background: linear-gradient(135deg, var(--tinta-2) 0%, var(--acento-hondo) 140%); aspect-ratio: 16 / 10; overflow: hidden; } .plano-apex-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; } .plano-apex.sin-captura .plano-apex-img { display: none; } .plano-apex-relleno { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; } .plano-apex-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); opacity: 0.35; } .plano-apex figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px clamp(16px, 3vw, 28px); background: linear-gradient(0deg, rgba(5, 7, 10, 0.86), rgba(5, 7, 10, 0)); color: var(--texto-tenue); font-size: 13px; max-width: 70ch; } .plano-apex figcaption small { display: block; margin-top: 6px; color: var(--texto-debil); } .plano-apex figcaption small b { color: var(--texto-tenue); font-weight: 500; } /* =============================================================== 9 · CONTROL */ .puertas { margin-top: 46px; display: grid; gap: 1px; background: var(--tinta-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--tinta-3); } .puerta-tarjeta { background: var(--tinta-2); padding: 26px 22px; } .puerta-tarjeta b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; margin-bottom: 12px; } .puerta-tarjeta.libre b { color: var(--texto-tenue); } .puerta-tarjeta.firma b { color: var(--acento); } .puerta-tarjeta.bloqueo b { color: var(--alerta); } .puerta-tarjeta span { color: var(--texto-tenue); font-size: 14.5px; } .hechos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .hechos b { display: block; font-size: 15px; margin-bottom: 6px; } .hechos span { color: var(--texto-tenue); font-size: 14px; } /* ============================================================= 10 · SECTORES */ .sectores { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; } .sector { border: 1px solid var(--tinta-3); padding: 12px 16px; font-family: var(--mono); font-size: 12.5px; color: var(--texto-tenue); } .sector b { color: var(--texto); font-weight: 400; } .sector i { font-style: normal; color: var(--texto-debil); } /* ================================================================= 11 · ENTRAR * `.formulario-demo`: el UNICO formulario de la pagina (el CTA del hero * enlaza aqui con #entrar). Sin `action`: el `submit` siempre hace * `preventDefault` (js/formulario.js) y renderiza un enlace `mailto:` -- * nunca navega, nunca llama a una ruta que no existe. * ============================================================================ */ .entrar { text-align: center; } .cta-titulo { font-size: clamp(32px, 5vw, 66px); } .entrar .entradilla { margin: 26px auto 0; } .boton { display: inline-block; text-decoration: none; background: none; border: 1px solid var(--acento-hondo); color: var(--acento); padding: 17px 38px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; cursor: pointer; transition: background 220ms ease, color 220ms ease; } .boton:hover, .boton:focus-visible { background: var(--acento); color: #04121c; } .formulario-demo { margin: 48px auto 0; max-width: 560px; text-align: left; display: grid; gap: 20px; } .formulario-campo { display: grid; gap: 8px; } .formulario-campo label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-debil); } .formulario-campo input { background: var(--tinta-2); border: 1px solid var(--tinta-3); color: var(--texto); font: inherit; font-size: 15px; padding: 12px 14px; } .formulario-campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } .formulario-consentimiento { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--texto-tenue); line-height: 1.5; } .formulario-consentimiento input { margin-top: 3px; flex: 0 0 auto; } .formulario-enviar { justify-self: start; } .formulario-plazo { color: var(--texto-debil); font-size: 13px; } .formulario-enlace { display: inline-block; color: var(--acento); font-size: 14px; border-bottom: 1px solid var(--acento-hondo); padding-bottom: 2px; text-decoration: none; } .formulario-enlace:hover, .formulario-enlace:focus-visible { border-color: var(--acento); } /* ===================================================================== pie */ .pie { border-top: 1px solid var(--tinta-3); padding: 56px clamp(16px, 5vw, 48px) 72px; max-width: var(--ancho); margin: 0 auto; display: grid; gap: 14px; } .pie p { font-size: 13px; color: var(--texto-debil); max-width: 78ch; } .aviso { color: var(--texto-tenue); } .pie a { color: var(--texto-tenue); } .sin-js { padding: 24px clamp(16px, 5vw, 48px) 48px; color: var(--texto-tenue); max-width: var(--ancho); margin: 0 auto; font-size: 14px; } /* ======================================================= 12 · PAGINA LEGAL * `.pagina-legal`: privacidad.html (y cualquier pagina de solo texto que * venga despues). Se apoya en `.seccion` -- ya da ancho, relleno y filete * superior a las once secciones de la portada -- y solo anade lo que hace * falta para un bloque largo de parrafos: una columna mas estrecha para * texto legible (la "pagina entera legible en columna" del comentario de la * linea 13, aplicada aqui a proposito) y los elementos que la portada no * usa: encabezados numerados, cita y lista. * ============================================================================ */ .pagina-legal { max-width: 72ch; } .pagina-legal h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 8px; } .pagina-legal-fecha { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-debil); margin-bottom: 36px; } .pagina-legal h2 { font-size: clamp(19px, 2.2vw, 24px); margin: 0; padding-top: 28px; border-top: 1px solid var(--tinta-3); } .pagina-legal p { color: var(--texto-tenue); font-size: 15.5px; line-height: 1.65; margin-top: 14px; } .pagina-legal li { color: var(--texto-tenue); font-size: 15.5px; line-height: 1.65; } .pagina-legal a { color: var(--acento); border-bottom: 1px solid var(--acento-hondo); text-decoration: none; } .pagina-legal a:hover, .pagina-legal a:focus-visible { border-color: var(--acento); } .pagina-legal code { font-family: var(--mono); font-size: 0.9em; color: var(--texto); background: var(--tinta-2); border: 1px solid var(--tinta-3); padding: 1px 5px; } .pagina-legal ul { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; } .pagina-legal strong { color: var(--texto); font-weight: 600; } .pagina-legal .pagina-legal-volver { display: block; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--tinta-3); } /* ================================================================ responsive */ @media (max-width: 860px) { body { font-size: 16px; } .nav { display: none; } .pelicula-fijo { padding-top: 104px; } .estatico-svg { width: 96vmin; } .pilares li { grid-template-columns: 1fr; gap: 8px; } .escalera .flecha { display: none; } } @media (max-width: 420px) { .wordmark { letter-spacing: 0; } .frase-en { letter-spacing: 0.3em; } .seccion { padding-left: 16px; padding-right: 16px; } } /* ================================================= reduced-motion (orden §18) * Version mucho mas estatica: sin transiciones, sin scroll suave, y el JS * ademas NO enciende `con-guion` (ni WebGL ni guion de scroll). Esta regla es * el cinturon por si algo si llegara a encenderse. * ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .grano { display: none; } [data-animar] { opacity: 1 !important; transform: none !important; } }