/* NEXOBRA — landing Fuente de verdad: editar aquí, no hay paso de build. El layout vive en atributos style="" dentro de index.html (heredado del diseño original); aquí queda lo que un atributo inline no puede expresar: base, :hover, keyframes y media queries. */ /* ---------- paleta ---------- Dos familias que se intercambian en sentidos opuestos. La mayoria de secciones son claras con texto azul; el pie y la seccion narrativa ya son azules con texto blanco, asi que al invertir van al reves. De ahi el par -inv. Los tokens *-rgb guardan el color como triplete para poder aplicar la transparencia en el punto de uso: rgb(var(--nx-ink-rgb) / .16). Hay 25 combinaciones distintas de rgba en el marcado; un token por combinacion seria inmanejable. */ :root { --nx-bg: #FFFFFF; --nx-bg-rgb: 255 255 255; --nx-surface: #F7F8FA; --nx-ink: #163A5F; --nx-ink-rgb: 22 58 95; --nx-body: #4A4A4A; --nx-body-rgb: 74 74 74; --nx-muted: #6B7178; /* El placeholder tiene su propio gris, mas claro que --nx-muted. No se colapsa en el: es el valor que ya tenia el sitio publicado y esta tarea no debe cambiar como se ve el modo claro. */ --nx-placeholder: #9AA3AC; /* El diseno original usa una escala de cinco grises, no uno solo. Se conservan sus valores exactos: son texto visible y esta migracion no debe cambiar como se ve el modo claro. */ --nx-body-soft: #5A6169; --nx-muted-soft: #7C8794; --nx-hint: #8A9199; --nx-surface-inv: #163A5F; /* El pie es mas profundo que las demas bandas azules. Con --nx-surface-inv se aclaraba y dejaba de distinguirse de ellas. */ --nx-surface-deep: #0F2A46; --nx-ink-inv: #FFFFFF; --nx-inv-rgb: 255 255 255; --nx-accent: #F58220; --nx-accent-rgb: 245 130 32; --nx-accent-hover: #DE7016; /* El naranja de marca como TEXTO pequeno. Sobre --nx-bg da 2.59:1 y sobre --nx-surface 2.44:1, muy por debajo del minimo de 4.5:1: las etiquetas de seccion no se leian. --nx-accent no se toca, porque donde es fondo (botones, puntos, barras) el contraste lo pone el blanco de encima; lo que hay que corregir es solo el caso en que el naranja es la tinta. Es el mismo naranja: tono 28 y saturacion 91% identicos a #F58220, lo unico que cambia es la luminosidad (54% -> 36% para fondo claro, 54% -> 56% para fondo oscuro). Van en par como --nx-surface / --nx-surface-inv: -text es para el fondo propio del modo (--nx-bg, --nx-surface) y -text-inv para las bandas que no giran con el (--nx-surface-inv, --nx-surface-deep). Al invertir el tema los dos valores se intercambian. */ --nx-accent-text: #B05508; --nx-accent-text-inv: #F5882B; /* Primer plano sobre superficies fijas. Los velos de las fotos y el naranja de marca no giran entre modos, asi que lo que va encima tampoco puede girar: si girase, quedaria del color de su propio fondo. */ --nx-on-photo: #FFFFFF; --nx-on-photo-rgb: 255 255 255; --nx-on-accent: #FFFFFF; } /* El azul de fondo se profundiza respecto al de marca: sobre #163A5F el naranja da 4.49:1, por debajo del minimo para texto pequeno. Sobre #102B47 sube a 5.55:1. */ :root[data-theme="dark"] { --nx-bg: #102B47; --nx-bg-rgb: 16 43 71; --nx-surface: #163A5F; --nx-ink: #FFFFFF; --nx-ink-rgb: 255 255 255; --nx-body: #C9D4E0; --nx-body-rgb: 201 212 224; --nx-muted: #9DB2C6; /* En oscuro si elegimos nosotros: mas apagado que --nx-body para que siga leyendose como pista y no como contenido, pero legible (5.33:1). */ --nx-placeholder: #8AA0B5; /* En oscuro si elegimos nosotros: se mantiene la progresion de enfasis de la escala clara, con todos los pasos legibles. */ --nx-body-soft: #BCC9D8; --nx-muted-soft: #94A9BE; --nx-hint: #8AA0B5; --nx-surface-inv: #FFFFFF; /* El pie invertido: apenas fuera del blanco puro para que siga leyendose como panel propio frente a las demas secciones invertidas. */ --nx-surface-deep: #F4F7FA; --nx-ink-inv: #163A5F; --nx-inv-rgb: 22 58 95; --nx-accent: #F58220; --nx-accent-rgb: 245 130 32; --nx-accent-hover: #DE7016; /* El par se intercambia: en oscuro el fondo propio ya es azul y las bandas -inv son las claras. El naranja de texto sube a #F5882B en vez de quedarse en #F58220 porque sobre --nx-surface (#163A5F) el de marca da 4.49:1, a un punto del minimo; dos puntos de luminosidad lo suben a 4.68:1. */ --nx-accent-text: #F5882B; --nx-accent-text-inv: #B05508; /* Primer plano sobre superficies fijas. Los velos de las fotos y el naranja de marca no giran entre modos, asi que lo que va encima tampoco puede girar: si girase, quedaria del color de su propio fondo. */ --nx-on-photo: #FFFFFF; --nx-on-photo-rgb: 255 255 255; --nx-on-accent: #FFFFFF; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Open Sans',system-ui,sans-serif;color:var(--nx-body);background:var(--nx-bg);-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease} img{display:block;max-width:100%} a{color:var(--nx-ink);text-decoration:none} a:hover{color:var(--nx-accent)} :focus-visible{outline:2px solid var(--nx-accent);outline-offset:3px;border-radius:2px} summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none} details[open] span[data-plus]{transform:rotate(45deg)} input,select,textarea,button{font-family:inherit} ::placeholder{color:var(--nx-placeholder)} @keyframes nxDraw{to{stroke-dashoffset:0}} @keyframes nxUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes nxFade{from{opacity:0}to{opacity:1}} @keyframes nxDot{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(9px);opacity:.35}} @media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}} /* ---------- hover ---------- Sustituye al atributo style-hover del runtime de diseño. 34 usos en el markup original colapsados en 8 reglas reales. */ .nx-h1:hover{background:var(--nx-accent-hover);transform:translateY(-2px)} .nx-h2:hover{background:var(--nx-accent-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)} .nx-h3:hover{background:rgb(var(--nx-inv-rgb) / .12);border-color:var(--nx-ink-inv)} .nx-h4:hover{color:var(--nx-accent)} .nx-h5:hover{background:var(--nx-ink);color:var(--nx-bg)} .nx-h6:hover{background:var(--nx-accent-hover)} .nx-h7:hover{background:rgb(var(--nx-inv-rgb) / .12)} .nx-h8:hover{background:var(--nx-accent);transform:translateY(-3px)} .nx-h1,.nx-h2,.nx-h3,.nx-h4,.nx-h5,.nx-h6,.nx-h7,.nx-h8{transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease} /* ---------- degradación sin JS ---------- Los bloques con data-reveal arrancan en opacity:0 y los revela el IntersectionObserver. Sin JS quedarían invisibles: esto los fuerza a verse. La clase no-js la pone y la quita main.js al arrancar. */ .no-js [data-reveal]{opacity:1 !important;transform:none !important} .no-js [data-wa-link]{display:none !important} /* ---------- valores corporativos ---------- Son ocho valores, y las líneas de separación las dibuja el fondo del grid asomando por el gap. Eso obliga a que el número de columnas divida a ocho exacto: con cinco por fila, las dos celdas sobrantes de la segunda fila se verían como un bloque más claro. De ahí 4 y 2, nunca 3 ni 5. */ .nx-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:rgb(var(--nx-inv-rgb) / .12)} .nx-value{background:var(--nx-surface-inv);padding:26px 24px} @media (max-width:1000px){.nx-values{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- línea de tiempo de obra ---------- Las etapas van en una lista ordenada porque el orden es el contenido: la secuencia constructiva no se puede barajar. El canal de la izquierda lleva la línea que las une; el punto naranja marca cada hito. La línea se dibuja por etapa y no como una sola barra de fondo para que arranque y termine con el contenido, sin sobresalir por arriba del primer punto ni colgar por debajo del último. */ .nx-obra{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0} .nx-obra-etapa{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(22px,3.5vw,52px);padding-bottom:clamp(38px,5vw,64px)} .nx-obra-etapa::before{content:"";position:absolute;left:7px;top:24px;bottom:0;width:1px;background:rgb(var(--nx-ink-rgb) / .16)} .nx-obra-etapa:last-child{padding-bottom:0} .nx-obra-etapa:last-child::before{display:none} .nx-obra-etapa::after{content:"";position:absolute;left:0;top:9px;width:15px;height:15px;border-radius:50%;background:var(--nx-accent)} .nx-obra-info{padding-left:36px} /* minmax(0,1fr) y no 1fr: sin el mínimo en cero, una foto ancha estira la columna y desborda la rejilla. */ .nx-obra-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-content:start} /* La etapa de entrega lleva cuatro fotos. Con el minimo de arriba caben las cuatro en una fila, a 225px cada una: la etapa que remata el recorrido quedaria con las imagenes mas pequenas de la seccion. El minimo mas alto las obliga a dos por fila, del mismo tamano que el resto. */ .nx-obra-fotos--duo{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} .nx-obra-foto{margin:0;position:relative;overflow:hidden;height:clamp(190px,21vw,280px);background:var(--nx-surface)} .nx-obra-foto img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,.61,.36,1)} /* Por debajo de 860px la columna de texto ya no cabe al lado de las fotos. El canal de la izquierda se conserva para que la línea siga leyéndose como un recorrido y no se pierda el hilo entre etapas. */ @media (max-width:860px){ .nx-obra-etapa{grid-template-columns:minmax(0,1fr);gap:16px} .nx-obra-fotos{padding-left:36px} } /* ---------- interruptor de tema ---------- */ [data-ref="tema"]:hover{background:rgb(var(--nx-ink-rgb) / .07)} /* El logo es azul marino: sobre fondo oscuro se pierde. brightness(0) lo lleva todo a negro e invert(1) lo saca a blanco, respetando la transparencia. Queda monocromo: se pierde el naranja hasta que haya un logo vectorial. */ :root[data-theme="dark"] [data-logo]{filter:brightness(0) invert(1)} /* Sin JS no hay forma de cambiar de tema, asi que el boton sobra y el sitio se queda en claro. La clase no-js la pone y la quita main.js. */ .no-js [data-ref="tema"]{display:none !important} /* =========================================================================== RESPONSIVE El layout base ya es fluido: usa clamp() para tipografía y espaciado, y rejillas auto-fit que colapsan solas. Aquí sólo va lo que no se resuelve por sí mismo. Sobre !important: el maquetado vive en atributos style="" heredados del diseño original, y un estilo inline gana a cualquier hoja externa. Sin !important estas reglas no aplicarían. Se limita a estos bloques. =========================================================================== */ /* --------------------------------------------------------------------------- Táctil (móvil y tablet) Objetivo: 44px de alto mínimo, que es el umbral cómodo para el dedo. Llega hasta 1023px para cubrir la tablet en vertical, que también es táctil. --------------------------------------------------------------------------- */ @media (max-width: 1023px) { #contacto a { min-height: 44px !important; display: flex !important; align-items: center !important; } /* Regla del listado de texto que tenia antes este panel: forzaba 48px de alto util en cada enlace. Sigue sirviendo para las pildoras de obras, pero NO puede alcanzar a las piezas del menu: con display:flex !important la pieza pasaba de rejilla en columna a fila, el isotipo quedaba al lado del nombre y, al ser un elemento flexible, se encogia en las piezas de nombre largo. De ahi que "Nuestra vision" y "Preguntas frecuentes" se vieran mas pequenas que las demas. Las piezas ya miden mas de 48px por si solas. */ [data-ref="menuPanel"] a:not(.nx-nav-card) { min-height: 48px !important; display: flex !important; align-items: center !important; } footer a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* La casilla de autorización se agranda un poco. El