/* ========================================================================== YPF RUTA — Rediseño 2026 Tokens y utilidades base compartidas por todas las secciones nuevas. Convención: TODO lo nuevo usa el prefijo .nd- (new design). Así el rediseño convive con main.css / common.css / home.css sin pisarlos, y las secciones viejas se pueden borrar de a una sin romper nada. ========================================================================== */ /* -------------------------------------------------------------------------- Tipografía del rediseño — Neue Haas Grotesk Display Std De la familia completa (15/25/35/45/55/65/75/95) usamos sólo tres pesos. Los .otf originales quedan de archivo en assets/newdesign/fonts/; acá se sirven en WOFF2, que pesa menos de la mitad. 450 55 Roman -> textos corridos, bajadas 500 65 Medium -> labels de UI 700 75 Bold -> títulos Si más adelante hace falta otro peso, se agrega un @font-face acá y se convierte el .otf correspondiente. Nada más. -------------------------------------------------------------------------- */ @font-face { font-family: "Neue Haas Grotesk Display Std"; src: url("../../fonts/newdesign/NHaasGroteskDSStd-55Rg.woff2") format("woff2"), url("../../assets/newdesign/fonts/NHaasGroteskDSStd-55Rg.otf") format("opentype"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Grotesk Display Std"; src: url("../../fonts/newdesign/NHaasGroteskDSStd-65Md.woff2") format("woff2"), url("../../assets/newdesign/fonts/NHaasGroteskDSStd-65Md.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Neue Haas Grotesk Display Std"; src: url("../../fonts/newdesign/NHaasGroteskDSStd-75Bd.woff2") format("woff2"), url("../../assets/newdesign/fonts/NHaasGroteskDSStd-75Bd.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Colores — tomados de las variables del Figma */ --nd-blue: #0451dd; --nd-white: #fff; --nd-black: #000; /* Tipografías. El Figma usa "Neue Haas Grotesk Display Std". Hasta que esté licenciada y embebida, cae en DIN, que ya viene cargada por main.css. Cuando llegue la fuente definitiva se cambia solo acá. */ --nd-font-display: "Neue Haas Grotesk Display Std", "DIN", Helvetica, Arial, sans-serif; --nd-font-text: "DIN", Helvetica, Arial, sans-serif; /* Los tres pesos disponibles. Usar siempre estas variables, así si mañana se suma o se cambia un peso no hay que salir a cazar números sueltos. */ --nd-w-regular: 450; --nd-w-medium: 500; --nd-w-bold: 700; /* Layout */ --nd-gutter: 24px; /* margen lateral mobile / tablet */ --nd-max-width: 1296px; /* ancho de contenido en desktop (1440 - 72*2) */ --nd-radius: 4px; --nd-nav-h: 94px; /* alto del navbar fijo (.nav = 9.4rem en common.css) */ /* El sitio viejo usa --z-modal: 100. Nos ponemos por encima. */ --nd-z-modal: 200; } @media (min-width: 1100px) { :root { --nd-gutter: 72px; } } /* Panel de cristal esmerilado. Lo comparten "Clientes que nos eligen" y "App YPF RUTA": el degradado apenas tiñe, el desenfoque difumina las formas azules que pasan por detrás y un borde de blanco muy bajo le marca el canto. */ .nd-panel { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background-image: linear-gradient(130deg, rgba(40, 69, 112, 0.238) 7.407%, rgba(4, 81, 221, 0.136) 99.894%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--nd-radius); } /* Lienzo oscuro — va en el de las páginas del rediseño. POR QUÉ EXISTE (las "líneas blancas raras" del QA): `body` es blanco en main.css y `html` no tiene fondo, así que el lienzo de toda la ventana es blanco. Debajo y alrededor de cada sección oscura, lo que hay es blanco. Al mismo tiempo, TODOS los bordes de estas secciones caen en posiciones fraccionarias. Dos motivos que se suman: · En horizontal, el full bleed usa `100vw`, que incluye la barra de scroll, mientras que el `50%` se calcula sobre el ancho útil. La diferencia es la mitad del ancho de la barra: los bordes quedan en .5 (medido: x = -7.50 y right = 1592.50 a 1600px de ventana). Lo mismo le pasa a `.background::before` y `.section::before` de main.css, que se centran con `transform: translate(-50%)` sobre 100vw — de ahí las líneas verticales del formulario y el footer. · En vertical, la altura de una sección arrastra decimales del contenido y todas las de abajo heredan el corrimiento (medido: .47). Un borde a mitad de píxel no se puede pintar entero: el navegador promedia ese píxel entre el negro de la sección y lo que hay detrás. Contra blanco da un gris claro de 1px — la línea. Que se vea o no depende del ancho exacto de la ventana, del escalado del sistema y del motor de render, y por eso la ve una persona y no otra, "sólo en esta resolución". Pintando el lienzo de negro, ese promedio pasa a ser negro contra negro y la línea desaparece. Es una sola declaración y no depende del navegador: sirve igual en cualquier zoom y en un PDF exportado. Va en una clase y no en `body` a secas para no tocar las 245 páginas viejas, que son de fondo claro. */ .nd-dark-canvas { background-color: var(--nd-black); } /* Contenedor centrado, usado por todas las secciones nuevas */ .nd-container { margin: 0 auto; max-width: var(--nd-max-width); width: 100%; } /* Bloquea el scroll del body mientras hay un modal abierto */ .nd-no-scroll { overflow: hidden; } /* Sólo visible para lectores de pantalla */ .nd-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* Respeta la preferencia del sistema de reducir animaciones */ @media (prefers-reduced-motion: reduce) { .nd-video__play, .nd-modal, .nd-plat__card-head, .nd-plat__card-body, .nd-acc__body, .nd-acc__item, .nd-acc__media { transition: none !important; } }