/* ════════════════════════════════════════════════════════════════════════════ [DCS] · ELEMENTOS COMUNES — se usan tal cual en cualquier página. Ninguna hoja vuelve a pintar estos patrones a mano. Importa tokens.css antes. ════════════════════════════════════════════════════════════════════════════ */ /* ── RAYAS ───────────────────────────────────────────────────────────────── Un solo patrón, dos formas de usarlo: .dcs-rayas--barra columna estrecha, las rayas BAJAN .dcs-rayas--cinta banda horizontal, las rayas CORREN hacia la derecha Las dos comparten ángulo, grosor y periodo: no puede haber dos inclinaciones. */ .dcs-rayas{position:relative;overflow:hidden;pointer-events:none} .dcs-rayas::before{content:"";position:absolute;background:var(--rayas);will-change:transform} .dcs-rayas--barra::before{inset:calc(-1 * var(--rayas-ciclo) - 20px) 0;animation:dcsRayasBajan var(--rayas-vel) linear infinite} .dcs-rayas--cinta::before{inset:0 calc(-1 * var(--rayas-ciclo) - 20px);animation:dcsRayasCorren var(--rayas-vel) linear infinite} @keyframes dcsRayasBajan{to{transform:translateY(var(--rayas-ciclo))}} @keyframes dcsRayasCorren{to{transform:translateX(var(--rayas-ciclo))}} .dcs-cinta{height:clamp(26px,4.4vw,38px);background:var(--negro)} /* DIVISOR DE SECCION: la misma cinta, cortando la pagina de lado a lado (Juan, 31-ago: la barra que estaba en el lateral pasa a separar bloques). Va a sangre completa aunque este dentro de una seccion con padding, porque un divisor que no llega a los bordes no separa nada. */ .dcs-divisor{width:100vw;margin-left:50%;transform:translateX(-50%); height:clamp(22px,3vw,34px);margin-top:clamp(34px,10vw,140px);margin-bottom:clamp(34px,10vw,140px)} .dcs-divisor--pegado{margin-top:0} /* ── LA MARCA ─────────────────────────────────────────────────────────────── Se escribia a mano pagina por pagina y en cuatro salio «[D]CS», con el CS fuera de los corchetes. Los corchetes abrazan las TRES letras: [DCS]. Y el ROJO va en los CORCHETES, no en la D (Juan, 31-ago). Una sola pieza para toda la casa. */ .dcs-marca{font-family:var(--f-display);font-weight:900;letter-spacing:-.02em; text-decoration:none;color:inherit;white-space:nowrap} .dcs-marca b{font-weight:inherit;color:var(--rojo-cartel)} /* los corchetes */ /* ── TRAMA de puntos de fondo ─────────────────────────────────────────────── */ .dcs-trama{background-image:var(--trama);background-size:var(--trama-celda) var(--trama-celda);background-attachment:fixed} /* trama Y rejilla juntas: se declaran en UNA regla, si no la segunda clase pisa a la primera */ /* MEDIDO el 1-sep-2026: la rejilla estaba puesta y NO SE VEIA. El ::before va a z-index:-1, o sea DETRAS del fondo del propio body — y el body tiene color de fondo, asi que lo tapaba entero. La pagina salia plana. El fondo negro lo pone ; aqui el body se deja transparente para que la trama asome por debajo del contenido. */ .dcs-trama.hud-rejilla{position:relative;background-image:none;background-color:transparent} .dcs-trama.hud-rejilla::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; /* TRES capas, de menos a mas notoria: 1) la trama de puntos de siempre 2) crucetas blancas cada 130px, muy apagadas: la rejilla de la cabina 3) UNA cruceta ROJA cada 520px (una de cada dieciseis) — el punto marcado del mapa. Es el detalle que hace que la rejilla parezca un instrumento y no un papel milimetrado. */ background-image:var(--trama), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-size:var(--trama-celda) var(--trama-celda),130px 130px,520px 520px; /* el parallax: los puntos quietos, las crucetas despacio y las rojas casi el doble. `--rej` lo mueve rejilla.js; sin JS vale 0 y el fondo se queda como estaba. */ background-position:0 0,0 var(--rej,0px),0 calc(var(--rej,0px) * 1.8); /* degradado de negro a transparente: el fondo respira en el centro y se apaga en los bordes */ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 12%,#000 88%,rgba(0,0,0,.35) 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 12%,#000 88%,rgba(0,0,0,.35) 100%)} /* ── CIELO: truenos ESCONDIDOS dentro de nubes ───────────────────────────── La referencia que dio Juan es el cielo del Mind Flayer: no se ve el rayo, se ve la NUBE encendiendose por dentro. Asi que aqui no hay ningun canal ni forma reconocible — solo manchas grandes y difusas que laten y se apagan. Sigue el mismo truco de siempre: la malla de puntos es la MASCARA, asi que la nube esta HECHA de puntos encendidos, no dibujada encima. Los puntos de esta capa van a 1.6px (los del fondo siguen a 1) porque a 1px el efecto existe y no se ve — medido. Coste: solo `opacity` y un `scale` minimo. Ni un repintado; lo compone la tarjeta grafica. */ .hud-cielo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict; -webkit-mask-image:radial-gradient(#000 1.6px,transparent 1.6px); -webkit-mask-size:var(--trama-celda) var(--trama-celda); mask-image:radial-gradient(#000 1.6px,transparent 1.6px); mask-size:var(--trama-celda) var(--trama-celda)} .hud-cielo b{position:absolute;border-radius:50%;opacity:0;will-change:opacity,transform; /* la nube: nucleo tibio que se deshace hacia fuera sin ningun borde. Nada de anillos */ background:radial-gradient(closest-side, rgb(255 130 120 / .74) 0%,rgb(229 50 62 / .50) 26%,rgb(216 36 28 / .26) 48%, rgb(216 36 28 / .09) 68%,transparent 84%); animation:trueno 8s linear infinite} /* La envolvente de un trueno lejano: destello, casi se apaga, dos rebotes mas flojos y cola larga. Nunca llega a opacidad plena — es luz DETRAS de una nube, no un flash. */ @keyframes trueno{ 0% {opacity:0;transform:scale(1)} 1.5% {opacity:.80} 3.5% {opacity:.18} 5% {opacity:.58} 7.5% {opacity:.12} 9% {opacity:.34} 17% {opacity:0;transform:scale(1.07)} 100% {opacity:0;transform:scale(1)} } /* nubes de tamaños y sitios distintos: si fuesen iguales se leeria el patron */ /* La 1 arranca a los 0,4 s: al entrar en la pagina ya hay un trueno, no se espera. Las otras tres caen escalonadas para que salte una cada ~2 s sin que se note el turno. */ .hud-cielo b:nth-child(1){width:760px;height:560px;top:6%;left:4%;animation-duration:7s;animation-delay:.4s} .hud-cielo b:nth-child(2){width:1040px;height:680px;top:44%;left:58%;animation-duration:8.6s;animation-delay:-6.7s} .hud-cielo b:nth-child(3){width:600px;height:460px;top:70%;left:12%;animation-duration:6.4s;animation-delay:-2.9s} .hud-cielo b:nth-child(4){width:880px;height:600px;top:22%;left:70%;animation-duration:9.5s;animation-delay:-4.6s} /* En movil, dos nubes: menos superficie que componer y en pantalla estrecha se lee igual */ @media (max-width:760px){ .hud-cielo b:nth-child(n+3){display:none} } @media (prefers-reduced-motion:reduce){ .hud-cielo{display:none} } /* ── MARCO: los dos filetes verticales que encuadran una pieza ────────────── */ .dcs-marco{position:fixed;inset:0;pointer-events:none;z-index:0} .dcs-marco::before,.dcs-marco::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--linea)} .dcs-marco::before{left:clamp(10px,3.2vw,42px)} .dcs-marco::after{right:clamp(10px,3.2vw,42px)} @media (max-width:640px){.dcs-marco{display:none}} /* ── INGLETE ─────────────────────────────────────────────────────────────── Recuadro con la esquina inferior derecha cortada, CON su trazo en la diagonal. Técnica: DOS capas recortadas con el mismo polígono. La de fuera es del color del trazo; la de dentro, del color del fondo, 1px más pequeña por el padding. Lo que asoma entre las dos ES el borde — y por eso la diagonal se ve igual de nítida que los cuatro lados. (El intento anterior pintaba la diagonal con un gradiente encima de la línea de corte y el recorte se comía medio trazo.) */ .dcs-caja{--ing-c:var(--linea-control);display:block;background:var(--ing-c);padding:1px; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ing)),calc(100% - var(--ing)) 100%,0 100%); transition:background-color .18s var(--ease-prod)} .dcs-caja>*{display:block;width:100%;border:0;background:var(--campo); clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ing)),calc(100% - var(--ing)) 100%,0 100%)} .dcs-caja:hover{--ing-c:rgba(237,237,232,.55)} .dcs-caja:focus-within{--ing-c:var(--tinta)} /* Para un bloque con contenido propio (opciones, botones, tarjetas). El trazo NO puede ser `border` ni `box-shadow inset`: los dos dibujan un rectángulo, el recorte los corta y la DIAGONAL se queda sin línea. Se hace con dos pseudos: uno a ras del color del trazo, otro 1px hacia dentro del color del fondo. Lo que asoma entre ambos es el borde completo. */ .dcs-ing{--ing-c:var(--linea-control);--ing-bg:var(--negro-2); position:relative;z-index:0;border:0;background:none; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ing)),calc(100% - var(--ing)) 100%,0 100%)} .dcs-ing::before,.dcs-ing::after{content:"";position:absolute;pointer-events:none; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ing)),calc(100% - var(--ing)) 100%,0 100%); transition:background-color .18s var(--ease-prod)} .dcs-ing::before{inset:0;background:var(--ing-c);z-index:-2} .dcs-ing::after{inset:1px;background:var(--ing-bg);z-index:-1} /* ── controles: ninguno nace con el aspecto del sistema (regla dura) ───────── */ button,input,textarea,select{font:inherit;color:inherit;background:transparent;border-radius:0} /* [hidden] lo pisa cualquier `display` declarado despues (flex, grid): un elemento marcado como oculto se seguia viendo. Esto es lo que lo hace valer siempre. */ [hidden]{display:none !important} @media (prefers-reduced-motion:reduce){ .dcs-rayas::before{animation:none} } /* ════════════════════════════════════════════════════════════════════════════ KIT HUD — el vocabulario de interfaz de la casa (referencias de Juan, 31-ago-2026). Sus palabras: «que parezca un HUD con líneas etc… combinado con nuestros vídeos y el realismo, es la combinación perfecta». Encaja con lo que ya teníamos: los corchetes SON el logo, la rejilla con crucetas y las rayas ya existían. Todo aquí es reutilizable: ninguna pantalla vuelve a pintar esto a mano. ════════════════════════════════════════════════════════════════════════════ */ /* ── MARCO: filete rojo con las esquinas mordidas ─────────────────────────── */ .hud-marco{position:relative;border:1px solid var(--rojo-cartel); clip-path:polygon(var(--ing) 0,100% 0,100% calc(100% - var(--ing)),calc(100% - var(--ing)) 100%,0 100%,0 var(--ing))} .hud-marco--fino{border-color:var(--linea-control)} /* ── ESQUINAS: las cuatro marcas en ángulo que enmarcan sin cerrar ─────────── */ .hud-esq{position:relative} .hud-esq::before,.hud-esq::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none; border:1px solid var(--rojo-cartel);opacity:.85} .hud-esq::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .hud-esq::after{bottom:-1px;right:-1px;border-left:0;border-top:0} /* ── CABECERA de módulo: título mono centrado, con su filete a cada lado ───── */ .hud-cab{display:flex;align-items:center;gap:12px;font-family:var(--f-text);font-weight:700; font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)} .hud-cab::before,.hud-cab::after{content:"";height:1px;background:var(--linea-2);flex:1} /* ── DATO técnico: etiqueta con PUNTO + valor. La firma de las fichas HUD ──── */ .hud-dato{font-size:13px;line-height:1.7;letter-spacing:.02em} .hud-dato b{font-weight:700;color:var(--tinta)} .hud-dato b::after{content:".";color:var(--rojo-cartel)} .hud-dato span{color:var(--tinta-2);margin-left:.5em} /* ── RUIDO: los números técnicos que decoran sin significar nada ───────────── */ .hud-ruido{font-size:11px;letter-spacing:.22em;color:rgba(216,36,28,.55); font-variant-numeric:tabular-nums;user-select:none;pointer-events:none} /* ── MARCA: la palabra sobre bloque rojo macizo («SYSTEM LOGIN») ───────────── */ .hud-marca{background:var(--rojo-cartel);color:var(--tinta);padding:0 .22em; box-decoration-break:clone;-webkit-box-decoration-break:clone} /* ── CHEVRONES: las barras diagonales cortas que flanquean un titular ──────── */ .hud-chev{display:inline-block;width:clamp(38px,7vw,74px);height:1em;flex:none; background:repeating-linear-gradient(var(--rayas-angulo),var(--rojo-cartel) 0 5px,transparent 5px 11px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)} .hud-chev--der{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)} /* ── BARRA segmentada de progreso ──────────────────────────────────────────── */ .hud-barra{height:8px;background:repeating-linear-gradient(90deg,var(--negro-3) 0 13px,transparent 13px 16px)} .hud-barra i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--rojo-cartel) 0 13px,transparent 13px 16px)} /* ── REJILLA con crucetas de fondo (la misma de la home, ahora compartida) ─── */ .hud-rejilla{background-image:url("data:image/svg+xml;utf8,"); background-size:130px 130px;background-attachment:fixed} /* ── CORCHETES de encuadre: los [ ] gigantes que abrazan un bloque ────────── Son EL logo de la casa convertido en marco. Van fuera del contenido. */ .hud-cor{position:relative} .hud-cor::before,.hud-cor::after{content:"";position:absolute;top:0;bottom:0;width:clamp(12px,1.6vw,20px); border:2px solid var(--rojo-cartel);pointer-events:none} .hud-cor::before{left:calc(-1 * clamp(18px,2.6vw,34px));border-right:0} .hud-cor::after{right:calc(-1 * clamp(18px,2.6vw,34px));border-left:0} @media (max-width:640px){.hud-cor::before,.hud-cor::after{display:none}} /* ── ETIQUETA centrada con sus dos puntos rojos ────────────────────────────── */ .hud-eti{display:flex;align-items:center;justify-content:center;gap:14px; font-size:11px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--tinta-2)} .hud-eti::before,.hud-eti::after{content:"";width:4px;height:4px;background:var(--rojo-cartel);flex:none} /* ── COORDENADAS: el ruido técnico de las cuatro esquinas ──────────────────── */ .hud-coords{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em; color:rgba(216,36,28,.5);font-variant-numeric:tabular-nums;user-select:none;pointer-events:none} /* ── BANDA: cabecera roja maciza con el texto encima ───────────────────────── */ .hud-banda{display:inline-block;background:var(--rojo-cartel);color:#fff; font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px 6px; clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)} /* ── CIFRA: el módulo de dato grande en rojo con su etiqueta encima ────────── */ .hud-cifra{display:grid;justify-items:center;gap:2px;border:1px solid var(--rojo-cartel);padding:8px 14px 10px; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)} .hud-cifra em{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3)} .hud-cifra b{font-family:var(--f-display);font-weight:900;font-size:clamp(22px,3vw,32px);line-height:1;color:var(--rojo-cartel);font-variant-numeric:tabular-nums} /* ── REGLA: la escala de marcas de los laterales ───────────────────────────── */ .hud-regla{background:repeating-linear-gradient(90deg,var(--linea-2) 0 1px,transparent 1px 9px);height:7px} .hud-regla--v{background:repeating-linear-gradient(180deg,var(--linea-2) 0 1px,transparent 1px 9px);width:7px;height:auto} /* ── DIAGONALES de esquina (las cuatro del monitor) ────────────────────────── */ .hud-diag{position:relative} .hud-diag>i{position:absolute;width:clamp(40px,6vw,86px);height:1px;background:var(--linea-2);pointer-events:none} .hud-diag>i:nth-child(1){top:14px;left:-18px;transform:rotate(45deg);transform-origin:left center} .hud-diag>i:nth-child(2){top:14px;right:-18px;transform:rotate(-45deg);transform-origin:right center} .hud-diag>i:nth-child(3){bottom:14px;left:-18px;transform:rotate(-45deg);transform-origin:left center} .hud-diag>i:nth-child(4){bottom:14px;right:-18px;transform:rotate(45deg);transform-origin:right center} /* ════════════════════════════════════════════════════════════════════════════ CONSENTIMIENTO DE COOKIES — la barra del píxel de Meta (src/cookies.js). Va aquí, en la hoja común, porque sale en TODAS las páginas públicas: una sola fuente de verdad. Ni la portada ni las legales la redefinen. Vocabulario de la casa: cinta de rayas, banda roja maciza, inglete y la TRAMA de puntos del cartel. Nada inventado para esta pieza. «Rechazar» y «Aceptar» tienen el MISMO tamaño y el mismo sitio a propósito: art. 7.3 RGPD — retirar el permiso tiene que costar lo mismo que darlo. ════════════════════════════════════════════════════════════════════════════ */ .cc{--ing:13px;--ing-bg:var(--negro-2);--ing-c:var(--linea-control); position:fixed;z-index:60;left:clamp(12px,3.2vw,42px);bottom:clamp(12px,3.2vw,42px); width:min(330px,calc(100vw - clamp(24px,6.4vw,84px))); font-family:var(--f-text); /* entra desde abajo con la curva de producto; sale con la misma (nada termina de golpe) */ opacity:0;transform:translateY(14px); transition:opacity .38s var(--ease-prod),transform .38s var(--ease-prod)} .cc--vis{opacity:1;transform:none} /* LA TRAMA DE PUNTOS. El fondo del inglete lo pinta su ::after, así que la trama va AHÍ y no en el elemento: puesta fuera, el pseudo la taparía. Sin `attachment:fixed` a propósito — aquí la caja es pequeña y fija, y anclar los puntos a la ventana los descuadra al hacer scroll. */ .cc::after{background-color:var(--ing-bg);background-image:var(--trama); background-size:var(--trama-celda) var(--trama-celda)} /* la cinta de rayas diagonales: la firma de la casa, la misma del divisor y del formulario */ .cc__cinta{height:5px} .cc__cinta::before{inset:0 calc(-1 * var(--rayas-ciclo) - 20px)} .cc__in{padding:12px 14px 14px} .cc__t{margin:0 0 9px} .cc__t .hud-banda{font-size:10px;letter-spacing:.14em;padding:3px 9px 4px; clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)} /* `balance` reparte las dos líneas por igual: sin él, «Nada más.» se quedaba SOLO en la segunda — una línea viuda, que es lo que hace que un bloque de dos líneas se lea mal. */ .cc__d{margin:0 0 7px;font-size:12px;line-height:1.5;color:var(--tinta-2);text-wrap:balance} .cc__l{margin:0 0 12px;font-size:12px} .cc__l a{color:var(--tinta-2);text-decoration:underline;text-decoration-color:var(--linea-control); text-underline-offset:3px;transition:color .18s var(--ease-prod)} .cc__b{display:grid;grid-template-columns:1fr 1fr;gap:8px} .cc__b button{--ing:8px;min-height:40px;padding:0 10px;cursor:pointer; font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.01em; transition:color .18s var(--ease-prod)} .cc__b button:active{transform:scale(.985)} .cc__no{--ing-bg:var(--negro-2);--ing-c:var(--linea-control);color:var(--tinta-2)} /* el «sí» es macizo y del rojo de marca, igual que el botón de enviar del formulario: el inglete lo dan las dos capas de .dcs-ing, así que el color va en sus dos variables */ .cc__si{--ing-bg:var(--rojo);--ing-c:var(--rojo);color:#fff} @media (hover:hover){ .cc__l a:hover{color:var(--tinta);text-decoration-color:var(--rojo-cartel)} .cc__no:hover{--ing-c:var(--tinta);color:var(--tinta)} .cc__si:hover{--ing-bg:#C7141F;--ing-c:#C7141F} } @media (max-width:640px){ /* en táctil el botón vuelve a 44px: es el mínimo con el que un dedo no falla */ .cc{left:12px;right:12px;bottom:12px;width:auto} .cc__b button{min-height:44px} } @media (prefers-reduced-motion:reduce){ .cc{transition:none;opacity:1;transform:none} .cc__cinta::before{animation:none} }