/* ========================================================================== NV Group — componentes.css Botones, hero, tarjetas, proceso, formulario. Se carga TERCERO. ========================================================================== */ /* --- Botones --------------------------------------------------------------- Dos formas, como en el sitio de empresas de Apple: 1. .boton → rectángulo sólido, para la acción principal. 2. .boton-enlace → texto azul con flecha, para la secundaria. -------------------------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.5em; background: var(--tinta); color: var(--fondo); font-size: var(--t-chico); font-weight: 500; letter-spacing: -0.01em; border-radius: var(--radio); border: 1px solid var(--tinta); transition: transform 0.25s var(--curva), background 0.25s var(--curva-neta), box-shadow 0.25s var(--curva); will-change: transform; } .boton:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .boton:active { transform: translateY(0); box-shadow: none; } .boton--azul { background: var(--acento-vivo); border-color: var(--acento-vivo); color: #fff; } .boton--azul:hover { background: #0077ed; } /* Botón rectangular negro con chevron que gira hacia abajo al pasar el mouse: señala que el botón baja a otra sección de la misma página. */ .boton--baja { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); padding-right: 1.15em; } .boton__chevron { width: 14px; height: 14px; flex: none; transition: transform 0.45s var(--curva); } .boton--baja:hover .boton__chevron, .boton--baja:focus-visible .boton__chevron { transform: rotate(90deg); } .boton--linea { background: transparent; color: var(--tinta); border-color: var(--linea); } .boton--linea:hover { background: transparent; border-color: var(--tinta); box-shadow: none; } .seccion--oscura .boton--linea, .pie .boton--linea { color: var(--tinta-inv); border-color: var(--linea-inv); } .seccion--oscura .boton--linea:hover { border-color: var(--tinta-inv); } /* Botón tipo enlace */ .boton-enlace { display: inline-flex; align-items: center; gap: 0.3em; color: var(--acento); font-size: var(--t-chico); font-weight: 400; letter-spacing: -0.01em; } .boton-enlace::after { content: "›"; font-size: 1.25em; line-height: 0.9; transition: transform 0.25s var(--curva); } /* Sin subrayado al pasar el mouse: lo único que se mueve es la flecha. El subrayado en un enlace grande y suelto ensucia más de lo que ayuda. */ .boton-enlace:hover::after { transform: translateX(4px); } .seccion--oscura .boton-enlace { color: #4da3ff; } .botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; } /* --- Hero ------------------------------------------------------------------ El lienzo WebGL vive detrás del texto, a pantalla completa. Si WebGL no está disponible, queda el fondo plano y no se nota. -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 84px; overflow: hidden; } .hero__lienzo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; /* lo sube el JS cuando el shader compiló */ transition: opacity 1.2s ease-out; } .hero__lienzo.visible { opacity: 1; } /* --- Video de fondo ------------------------------------------------------- Aparece recién cuando hay imagen: si se mostrara antes, se vería un rectángulo negro mientras carga. -------------------------------------------------------------------------- */ .hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease-out; pointer-events: none; } .hero__video.visible { opacity: 1; } /* Velo que garantiza contraste del texto sobre el fondo */ .hero__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 12% 45%, rgba(250, 249, 247, 0.94) 0%, rgba(250, 249, 247, 0.72) 38%, rgba(250, 249, 247, 0) 70%); } /* --- Hero sobre video ------------------------------------------------------ El video se ve ENTERO, sin blanquear una zona para el texto. Para que el texto se lea, se invierte: pasa a blanco y el video se tiñe parejo. El velo tiene dos capas y las dos hacen falta: 1. una oscura pareja, que baja el brillo general del video; 2. una más marcada abajo, donde vive el texto, porque una fábrica tiene luces y superficies claras que aparecen en cualquier cuadro. Sin la segunda, el texto blanco desaparece cada vez que pasa una luz. Entre el 38% y el 70% el degradé se queda QUIETO en 0.70 en vez de seguir bajando. Esa meseta es la franja donde caen los renglones del título (medido: arranca en el 41% y termina en el 65%), y va holgada a propósito porque la posición exacta cambia con el alto de la ventana. Si el velo sigue variando ahí, el primer renglón queda sobre un fondo más claro que el último y el título se ve desparejo aunque la tinta sea la misma. El video de este hero va de 86 a 137 de brillo entre el segundo 2 y el 9, y sin la meseta el título cambiaba de aspecto mientras el video corría. -------------------------------------------------------------------------- */ .hero--video .hero__velo { background: linear-gradient(to bottom, rgba(8, 9, 12, 0.31) 0%, rgba(8, 9, 12, 0.25) 18%, rgba(8, 9, 12, 0.42) 38%, rgba(8, 9, 12, 0.42) 70%, rgba(8, 9, 12, 0.47) 100%), linear-gradient(95deg, rgba(8, 9, 12, 0.25) 0%, rgba(8, 9, 12, 0.11) 55%, rgba(8, 9, 12, 0.04) 100%); } /* SI ALGÚN DÍA HAY QUE ACLARAR U OSCURECER ESTO, LEER ESTO PRIMERO ------------------------------------------------------------------ Son DOS capas encimadas, y lo que se ve NO es la suma de las dos. La fórmula es: total = 1 − (1 − capa1) × (1 − capa2). O sea que bajarle 20% a cada número NO aclara un 20%: aclara un 17%. Para aclarar de verdad un 20% hay que multiplicar cada número por 0,78. El velo ya se aclaró dos veces desde el original, y cada vez se recalculó con esa cuenta. El recorrido, por si hace falta volver atrás: original 0.52/0.42/0.70/0.70/0.80 + 0.42/0.18/0.06 −20% 0.40/0.32/0.54/0.54/0.61 + 0.32/0.14/0.05 −20% más los de acá abajo El límite: el título blanco tiene que seguir leyéndose sobre el cuadro MÁS CLARO del video, que ronda 137 de brillo. Ese es el único número que manda; sobre el cuadro oscuro siempre sobra. Medirlo antes de tocar, no mirarlo a ojo — el mínimo aceptable es 4,5:1. ------------------------------------------------------------------ */ /* --- Texto en blanco ------------------------------------------------------- La sombra es amplia y floja, no dura: se trata de despegar la letra del fondo, no de dibujarle un contorno. Una sombra marcada sobre video se ve barata al instante. -------------------------------------------------------------------------- */ .hero--video h1, .hero--video .hero__bajada, .hero--video .hero__responsabilidad { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 40px rgba(0, 0, 0, 0.35); } .hero--video h1 { color: #fff; } .hero--video .hero__bajada { color: rgba(255, 255, 255, 0.86); } .hero--video .hero__responsabilidad { color: #fff; border-left-color: rgba(255, 255, 255, 0.65); } .hero--video .hero__baja { color: rgba(255, 255, 255, 0.6); } .hero--video .hero__baja span { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent); } /* --- Botones de vidrio ----------------------------------------------------- Vidrio esmerilado con un brillo arriba y un borde claro: la luz del fondo se filtra y el botón parece una pieza apoyada sobre la imagen, no un rectángulo pegado encima. -------------------------------------------------------------------------- */ .hero--video .boton { border-radius: 100px; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); transition: transform 0.35s var(--curva), background 0.35s var(--curva), box-shadow 0.35s var(--curva), border-color 0.35s var(--curva); } /* El principal: vidrio claro, casi sólido. Es la acción que queremos. */ .hero--video .boton--azul { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.9); color: #10121a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 34px rgba(0, 0, 0, 0.30); } .hero--video .boton--azul:hover { background: #fff; transform: translateY(-1px) scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 14px 42px rgba(0, 0, 0, 0.38); } /* El secundario: vidrio transparente, se ve el video a través. */ .hero--video .boton--baja { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.34); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 28px rgba(0, 0, 0, 0.22); } .hero--video .boton--baja:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px) scale(1.015); } /* Si el navegador no puede desenfocar, el vidrio transparente sería ilegible. En ese caso se cierra a un fondo oscuro sólido. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero--video .boton--baja { background: rgba(18, 20, 26, 0.72); } } /* En el celular el texto ocupa todo el ancho y el velo tiene que ser más firme: no hay una mitad libre donde el video respire. Esa versión del velo vive junto al título del hero, más abajo en este archivo (buscar "El hero en el teléfono"), porque su forma depende de dónde caen los renglones del título y las dos cosas se tocan siempre juntas. */ .hero__interior { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(4rem, 12vh, 8rem); } .hero__gancho { display: inline-flex; align-items: center; gap: 0.55em; font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.01em; color: var(--tinta-suave); background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linea); border-radius: 100px; padding: 0.45em 0.95em; margin-bottom: 1.75rem; } .hero__gancho::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento-vivo); flex: none; } .hero h1 { max-width: 17ch; margin-bottom: 1.5rem; } /* --- La palabra que se escribe sola ---------------------------------------- El ancho mínimo lo calcula el JavaScript midiendo la palabra más larga, y se aplica a ESTE contenedor. Sin la reserva, el título se reacomoda con cada cambio de palabra y la línea salta. La reserva NO puede ir en el texto: si va ahí, el cursor queda clavado al final del espacio reservado en vez de seguir a la palabra, y se ve como si estuviera escribiendo en otro lado. Acá el sobrante queda a la derecha, invisible, y el cursor va pegado a la última letra como corresponde. -------------------------------------------------------------------------- */ .maquina { display: inline-block; white-space: nowrap; text-align: left; vertical-align: baseline; } .maquina__texto { display: inline; } .maquina__cursor { display: inline-block; width: 0.055em; height: 0.78em; margin-left: 0.06em; background: currentColor; border-radius: 1px; animation: parpadeo 1.05s steps(1) infinite; transform: translateY(0.02em); } @keyframes parpadeo { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .maquina__cursor { display: none; } } /* En el celular la palabra se lleva SIEMPRE un renglón para ella sola. Reservar el ancho no alcanzaba: `text-wrap: balance` reparte los renglones mirando el contenido, así que con una palabra corta armaba un título de dos renglones y con una larga de tres, y el bloque entero saltaba al cambiar de ciudad. Con la palabra en su propio renglón el corte del texto de arriba es siempre el mismo, mida lo que mida la ciudad. En pantalla grande sobra ancho y no hace falta: ahí sigue en la misma línea. */ @media (max-width: 860px) { .maquina { display: block; } /* El texto fijo se corta solo, sin depender de la ciudad. */ .hero__interior h1 { text-wrap: pretty; } } .hero__bajada { font-size: var(--t-guia); line-height: 1.45; color: var(--tinta-suave); max-width: 40ch; margin-bottom: 1.5rem; } .hero__responsabilidad { font-size: var(--t-cuerpo); font-weight: 500; color: var(--tinta); max-width: 38ch; padding-left: 1rem; border-left: 2px solid var(--tinta); } /* Indicador de scroll */ .hero__baja { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: var(--t-micro); color: var(--tinta-tenue); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; } .hero__baja span { width: 1px; height: 32px; background: linear-gradient(to bottom, var(--linea), transparent); animation: baja 2.4s var(--curva-neta) infinite; } @keyframes baja { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 640px) { .hero__baja { display: none; } .hero h1 { max-width: 100%; } } /* --- Bloque "Qué hacemos" -------------------------------------------------- Antes la frase corta ("NV Group, tu interlocutor") iba arriba con el mismo peso visual que un párrafo largo, y las dos peleaban. Ahora hay una jerarquía clara: título grande, una bajada, el detalle en dos columnas y el remate abajo separado por una línea. -------------------------------------------------------------------------- */ .interlocutor__titulo { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; max-width: 16ch; margin-bottom: 1.5rem; } .interlocutor__bajada { font-size: var(--t-sub); font-weight: 500; line-height: 1.3; letter-spacing: -0.022em; color: var(--tinta-suave); max-width: 30ch; margin-bottom: clamp(2.5rem, 6vh, 4rem); } .interlocutor__cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); padding-top: 2rem; border-top: 1px solid var(--linea); } @media (max-width: 800px) { .interlocutor__cuerpo { grid-template-columns: 1fr; gap: 1.25rem; } } .interlocutor__texto { font-size: var(--t-cuerpo); line-height: 1.65; color: var(--tinta-suave); } .interlocutor__texto + .interlocutor__texto { margin-top: 0.75rem; } .interlocutor__cierre { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 2rem; border-top: 1px solid var(--linea); } .interlocutor__cierre p { font-size: var(--t-sub); font-weight: 500; line-height: 1.32; letter-spacing: -0.022em; color: var(--tinta); max-width: 30ch; } /* --- Tarjeta genérica ----------------------------------------------------- */ .tarjeta { background: var(--blanco); border: 1px solid var(--linea-tenue); border-radius: var(--radio); padding: clamp(1.5rem, 2.5vw, 2rem); height: 100%; display: flex; flex-direction: column; transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva); } .tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07); } .tarjeta h3 { font-size: 1.1875rem; letter-spacing: -0.018em; margin-bottom: 0.75rem; } .tarjeta p { font-size: var(--t-chico); line-height: 1.55; color: var(--tinta-suave); } .seccion--hueca .tarjeta { background: var(--blanco); } /* --- Bloque de la red de fábricas (el diferencial) -------------------------- */ .red__columnas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; } @media (max-width: 700px) { .red__columnas { grid-template-columns: 1fr; } } /* --- Las dos columnas, con la línea de arriba como indicador -------------- La línea gris es el riel; encima se dibuja una línea oscura que crece de izquierda a derecha en la columna elegida. Solo una está encendida a la vez. En escritorio manda el mouse: mientras esté sobre el grupo, se ilumina la que se está mirando. Al salir, vuelve a mandar la elegida con el clic. En el celular, donde no hay mouse, la elige el toque. -------------------------------------------------------------------------- */ .red__col { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--linea); transition: color 0.4s var(--curva-neta); } .red__col::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--tinta); opacity: 1; transition: width 0.6s var(--curva), opacity 0.3s var(--curva-neta); } .red__col.encendida::before { width: 100%; } /* El mouse por encima ADELANTA cómo va a quedar, pero en un tono flojo. El clic es el que la deja marcada en negro. Antes el mouse ganaba sobre el clic, y el resultado era que al hacer clic no cambiaba nada a la vista —el cursor ya la tenía iluminada— y parecía que el botón no andaba. Vista previa y elección tienen que verse distinto. */ @media (hover: hover) and (pointer: fine) { .red__col:not(.encendida):hover::before { width: 100%; opacity: 0.25; } .red__col:not(.encendida) { cursor: pointer; } } /* La columna apagada baja un poco el contraste del título: refuerza cuál está elegida sin necesidad de leer la línea. */ .red__col h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; color: var(--tinta-tenue); transition: color 0.4s var(--curva-neta); } .red__col.encendida h3 { color: var(--tinta); } @media (hover: hover) and (pointer: fine) { .red__col:not(.encendida):hover h3 { color: var(--tinta-suave); } } .red__col p { font-size: var(--t-chico); color: var(--tinta-suave); line-height: 1.55; } .red__col p + p { margin-top: 0.75rem; } /* Variante más chica de .guia, para el párrafo de detalle que va debajo de la afirmación principal. */ .guia--menor { font-size: var(--t-cuerpo); line-height: 1.65; } /* Cuando .destacado envuelve varios párrafos */ .destacado p { font-size: inherit; line-height: inherit; font-weight: inherit; } .destacado p + p { margin-top: 0.3rem; } /* --- Proceso --------------------------------------------------------------- En escritorio: carril horizontal que se recorre con el scroll (lo maneja GSAP). En móvil: se convierte en una lista vertical con scroll lateral normal, sin depender de nada. -------------------------------------------------------------------------- */ .proceso { overflow: hidden; } /* Modo carril: la sección se clava en pantalla mientras las etapas desfilan. Tiene que entrar EXACTA en el alto de la ventana — si sobra alto, al fijarse se corta la parte de abajo y el visitante nunca la ve. La clase la pone js/animacion.js, solo cuando el carril se monta de verdad. */ .proceso--carril { height: 100svh; display: flex; flex-direction: column; /* Arranca arriba, no centrado: así la etiqueta queda a la MISMA altura que en el resto de las secciones. Centrado, quedaba unos 30px más arriba y se notaba al pasar de una sección a la otra. */ justify-content: flex-start; padding-block: var(--seccion-y) clamp(1.25rem, 3vh, 2.25rem); /* Ajustado: con el `gap` anterior el medidor quedaba a 7px del borde y el halo verde del punto salía cortado. */ gap: clamp(1rem, 2.4vh, 1.9rem); } /* Con la sección clavada, TODO tiene que entrar en el alto de la ventana. Los textos de las etapas son largos, así que acá se gana espacio por tres lados: cabecera en dos columnas, tarjetas más anchas (menos renglones) y un techo de alto por si algún texto se pasa. */ .proceso--carril .seccion__cabecera { margin-bottom: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); align-items: end; } .proceso--carril .seccion__cabecera .etiqueta { grid-column: 1 / -1; } .proceso--carril .seccion__cabecera h2 { margin-bottom: 0; } .proceso--carril .seccion__cabecera .guia { max-width: 46ch; } @media (max-width: 1100px) { .proceso--carril .seccion__cabecera { grid-template-columns: 1fr; gap: 1.25rem; } } /* El medidor ya está separado por el `gap` del contenedor. Sin este cero se suma su propio margen y la barra queda pegada al borde de abajo, con el halo verde cortado. */ .proceso--carril .proceso__medidor { margin-top: 0; } .proceso--carril .etapa { flex-basis: clamp(320px, 34vw, 470px); min-height: 0; /* Techo: lo que sobre se recorre dentro de la tarjeta. Es la red de seguridad para cuando un texto crece desde el panel. */ max-height: calc(100svh - 340px); } .proceso__pista { display: flex; gap: clamp(1.25rem, 2vw, 2rem); padding-block: 1rem; } /* `will-change` SOLO en el carril de escritorio, que es el único que mueve la pista con transform. En el celular la pista se recorre con el dedo, y dejarla en una capa aparte hace que se atrase respecto del resto de la página: las tarjetas parecen despegarse al deslizar. */ .proceso--carril .proceso__pista { will-change: transform; } .etapa { flex: 0 0 clamp(280px, 30vw, 400px); background: var(--blanco); border: 1px solid var(--linea-tenue); border-radius: var(--radio); padding: clamp(1.75rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; min-height: clamp(340px, 42vh, 440px); } /* Cabeza de la etapa: el icono a la izquierda, el número a la derecha. OJO con el `margin-bottom: auto`: si el bloque de abajo se ancla al fondo de la tarjeta, un título de una línea y otro de dos arrancan a distinta altura y la fila entera se ve desprolija. Todo se alinea desde ARRIBA. */ .etapa__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); } /* El icono va suelto, sin recuadro ni fondo: el marco lo achicaba y lo hacía parecer un botón. Un color por etapa, tomados de la paleta de sistema de Apple. No es decoración: seis tarjetas iguales en fila se leen como una sola masa, y el color le da a cada una una identidad que se reconoce de reojo. -------------------------------------------------------------------------- */ .etapa__icono { display: block; flex: none; color: #34c759; transition: transform 0.45s var(--curva); } .etapa__icono--factibilidad { color: #34c759; } /* verde */ .etapa__icono--fabrica { color: #af52de; } /* violeta */ .etapa__icono--muestras { color: #ff9500; } /* naranja */ .etapa__icono--calidad { color: #007aff; } /* azul */ .etapa__icono--logistica { color: #5856d6; } /* índigo */ .etapa__icono--entrega { color: #ff2d55; } /* rosa */ .etapa__icono .icono { width: 42px; height: 42px; display: block; } .etapa:hover .etapa__icono { transform: translateY(-2px) scale(1.05); } .etapa__numero { font-family: var(--fuente-numero); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.06em; color: var(--acento); } /* El título reserva SIEMPRE el alto de dos renglones, tenga uno o dos. Así todos los títulos empiezan a la misma altura y todos los textos también, sin importar cuánto mida cada uno. */ .etapa h3 { min-height: calc(2 * 1.16em); display: flex; align-items: flex-start; } .etapa h3 { font-size: 1.375rem; letter-spacing: -0.022em; margin-bottom: 0.875rem; } .etapa p { font-size: var(--t-chico); line-height: 1.55; color: var(--tinta-suave); } /* Los textos de las etapas ahora tienen varios párrafos. Si alguno se pasa del alto de la tarjeta, se recorre con la rueda dentro de la tarjeta en vez de desbordar sobre la de al lado. */ .etapa__texto { overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; } .etapa__texto p + p { margin-top: 0.65rem; } /* --- Barra de avance del carril ------------------------------------------- Se llena en verde a medida que se recorren las etapas. El punto de la punta lleva un halo que late: da la sensación de que algo está avanzando, no de que hay una línea pintada. -------------------------------------------------------------------------- */ .proceso__medidor { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.5rem; } .proceso__avance { position: relative; flex: 1; height: 4px; background: rgba(0, 0, 0, 0.07); border-radius: 99px; /* visible, no hidden: el halo del punto tiene que poder salirse. */ overflow: visible; } .proceso__avance i { position: absolute; inset: 0 auto 0 0; width: 0%; display: block; border-radius: 99px; background: linear-gradient(90deg, #30d158 0%, #34c759 100%); box-shadow: 0 0 14px rgba(52, 199, 89, 0.45); } /* El punto de la punta */ .proceso__avance i::after { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; transform: translate(50%, -50%); border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.20), 0 0 16px rgba(52, 199, 89, 0.75); animation: latido 2s ease-in-out infinite; } @keyframes latido { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.20), 0 0 16px rgba(52, 199, 89, 0.75); } 50% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0.10), 0 0 22px rgba(52, 199, 89, 0.95); } } /* Contador de etapa: dice en qué punto del proceso está. */ .proceso__cuenta { flex: none; font-family: var(--fuente-numero); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.06em; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; } .proceso__cuenta b { color: #248a3d; /* el verde, un tono más oscuro para que se lea */ font-weight: 600; } /* Quien pidió menos movimiento no ve el latido. */ @media (prefers-reduced-motion: reduce) { .proceso__avance i::after { animation: none; } } /* Sin JS o en móvil: el carril se recorre con el dedo */ .proceso--simple .proceso__pista { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-inline: var(--gutter); scrollbar-width: none; /* Sin esto el relleno de la izquierda NO SE VE, aunque esté puesto: al enganchar la primera tarjeta, el navegador la alinea con el borde del contenedor y se come los 20px, dejándola pegada al margen. `scroll-padding` le dice dónde tiene que enganchar de verdad. */ scroll-padding-inline: var(--gutter); /* Al llegar al final del carril, el envión seguía de largo y lo agarraba la página: se deslizaba al costado y la página se movía sola para arriba o para abajo. `contain` corta esa cadena; el carril se frena en su borde. */ overscroll-behavior-inline: contain; } .proceso--simple .proceso__pista::-webkit-scrollbar { display: none; } .proceso--simple .etapa { scroll-snap-align: start; } /* El relleno de la DERECHA de un contenedor con scroll horizontal lo ignoran casi todos los navegadores: la última tarjeta queda pegada al borde. Se resuelve con un elemento vacío al final que ocupa ese lugar. */ .proceso--simple .proceso__pista::after { content: ""; flex: 0 0 var(--gutter); } /* Se oculta el medidor ENTERO, no solo la barra. Antes se escondía la barra y quedaba el contador "01 / 06" suelto contra el margen izquierdo, sin nada al lado: parecía un resto de algo. */ .proceso--simple .proceso__medidor { display: none; } /* --- "Deslizá para ver" ---------------------------------------------------- Solo en el celular, y solo hasta que la persona desliza por primera vez. Un carril horizontal dentro de una página que se recorre en vertical no se descubre solo: si no se avisa, se leen dos de las seis etapas. -------------------------------------------------------------------------- */ .proceso__desliza { display: none; width: fit-content; margin: 1.25rem auto 0; align-items: center; gap: 0.45rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-tenue); transition: opacity 0.5s var(--curva); } .proceso--simple .proceso__desliza { display: flex; } /* Cuando ya deslizó, la leyenda cumplió su función y se va. */ .proceso--simple.ya-deslizo .proceso__desliza { opacity: 0; pointer-events: none; } .proceso__desliza svg { width: 16px; height: 16px; flex: none; color: #34c759; animation: desliza 2.2s var(--curva-neta) infinite; } /* El borde derecho del carril se desvanece: se ve que las tarjetas siguen. Es la señal que de verdad hace entender que hay más — la leyenda sola se lee, pero esto se entiende sin leer. POR QUÉ UNA CAPA PINTADA ENCIMA Y NO UN `mask-image` Con máscara, el navegador tiene que sacar el carril entero a una capa aparte para poder recortarlo. Y al primer deslizamiento se le sacaba la máscara: la capa se destruía en pleno movimiento y el bloque de tarjetas pegaba un salto vertical justo cuando el dedo lo estaba corriendo. Era eso lo que se veía "escapar". Acá el degradado se pinta ENCIMA, del color del fondo. No toca las tarjetas, no arma ninguna capa, y para que se vaya alcanza con bajarle la opacidad, que es la propiedad más barata que hay para animar. -------------------------------------------------------------------------- */ .proceso--simple .proceso__carril { position: relative; } .proceso--simple .proceso__carril::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 18%; pointer-events: none; background: linear-gradient(to right, rgba(250, 249, 247, 0) 0%, var(--fondo) 78%); transition: opacity 0.45s var(--curva); } /* Cuando ya llegó al final, el desvanecido sobra: no hay nada más que ver. */ .proceso--simple.ya-deslizo .proceso__carril::after { opacity: 0; } @keyframes desliza { 0%, 100% { transform: translateX(0); opacity: 0.45; } 45% { transform: translateX(7px); opacity: 1; } 70% { transform: translateX(4px); opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .proceso__desliza svg { animation: none; opacity: 0.8; } } /* --- Servicios: tarjetas que giran ---------------------------------------- Adelante va el título sobre el fondo; el botón de abajo a la derecha la da vuelta y muestra la descripción. Dos cosas que suelen salir mal en este componente y acá están resueltas: 1. Las dos caras tienen que medir lo mismo, o al girar cambia el alto de la fila entera. Por eso las dos son `position:absolute` dentro de un contenedor con altura propia. 2. La cara de atrás no puede quedar "clickeable" mientras está escondida: si queda, el tabulador se mete en botones invisibles. -------------------------------------------------------------------------- */ .servicio { position: relative; height: clamp(280px, 34vh, 340px); perspective: 1600px; } .servicio__giro { position: relative; width: 100%; height: 100%; transition: transform 0.7s var(--curva); transform-style: preserve-3d; will-change: transform; } .servicio.dado-vuelta .servicio__giro { transform: rotateY(180deg); } .servicio__cara { position: absolute; inset: 0; border-radius: var(--radio); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.25rem, 2.2vw, 1.75rem); } /* --- Cara de adelante ----------------------------------------------------- */ .servicio__cara--frente { background: var(--fondo-oscuro); color: var(--tinta-inv); } .servicio__foto, .servicio__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* El tinte es lo que garantiza que el título se lea SIEMPRE, con cualquier foto que se suba después. Sin esto, una foto clara se come el texto. Es fuerte abajo (donde va el título) y flojo arriba, para que el fondo se vea. Si se sube parejo, la tarjeta queda como un rectángulo negro y da lo mismo que haya foto o no. */ .servicio__tinte { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.80) 30%, rgba(8, 8, 10, 0.42) 62%, rgba(8, 8, 10, 0.20) 100% ); } /* El fondo se acerca apenas al pasar el mouse. */ .servicio__foto, .servicio__fondo { transition: transform 0.9s var(--curva); } .servicio:not(.dado-vuelta) .servicio__cara--frente:hover .servicio__foto, .servicio:not(.dado-vuelta) .servicio__cara--frente:hover .servicio__fondo { transform: scale(1.05); } .servicio__titulo { position: relative; z-index: 2; font-size: 1.375rem; line-height: 1.18; letter-spacing: -0.022em; color: #fff; max-width: 88%; text-wrap: balance; } /* --- Cara de atrás -------------------------------------------------------- */ /* La cara de atrás va en off-black con letra blanca: la tarjeta no cambia de claro a oscuro al girar, mantiene el mismo peso de los dos lados. */ .servicio__cara--dorso { transform: rotateY(180deg); background: #131316; border: 1px solid rgba(255, 255, 255, 0.10); justify-content: flex-start; } .servicio__rotulo { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.875rem; } .servicio__texto { font-size: var(--t-chico); line-height: 1.55; color: rgba(255, 255, 255, 0.88); overflow-y: auto; padding-right: 0.25rem; } /* --- El botón ------------------------------------------------------------- */ .servicio__boton { position: absolute; right: clamp(1.25rem, 2.2vw, 1.75rem); bottom: clamp(1.25rem, 2.2vw, 1.75rem); z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.3s var(--curva-neta), transform 0.3s var(--curva), border-color 0.3s var(--curva-neta); } .servicio__boton svg { width: 17px; height: 17px; } .servicio__boton:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.55); transform: scale(1.08); } /* Sobre el dorso oscuro el botón sigue siendo claro, como en la cara de adelante: es el mismo control y tiene que verse igual. */ .servicio__boton--volver { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.26); color: #fff; } .servicio__boton--volver:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.45); } /* Mientras una cara está de espaldas, nada de lo que tiene adentro debe recibir el foco del tabulador ni el clic. */ .servicio:not(.dado-vuelta) .servicio__cara--dorso, .servicio.dado-vuelta .servicio__cara--frente { pointer-events: none; } /* --- Por qué además se apagan con opacidad -------------------------------- `backface-visibility: hidden` debería alcanzar para esconder la cara que quedó de espaldas. En iPhone NO alcanza: Safari lo ignora cuando la cara tiene `overflow: hidden`, y se ve el título al revés, espejado, encima de la descripción. EL DETALLE QUE HACE QUE FUNCIONE: el retraso va SOLO en la cara que se va. La que entra aparece de una. El primer intento apagaba una y prendía la otra en el mismo instante, a mitad del giro. Bastaba con que ese instante se corriera un cuadro para que las dos quedaran invisibles: la tarjeta desaparecía y reaparecía dada vuelta. Con este orden las dos se superponen un momento y nunca hay un hueco. Es el mismo patrón que usa springpark.com.ar. -------------------------------------------------------------------------- */ .servicio__cara { transition: opacity 0.4s var(--curva); } .servicio.dado-vuelta .servicio__cara--frente { opacity: 0; transition-delay: 0.35s; } .servicio:not(.dado-vuelta) .servicio__cara--dorso { opacity: 0; transition-delay: 0.35s; } /* Quien pidió menos movimiento no recibe un giro en 3D: la cara de atrás simplemente aparece encima. */ .sin-movimiento .servicio__giro { transition: opacity 0.25s ease; transform: none !important; } /* Sin giro no hay mitad de giro que esperar: el cambio de cara es directo. */ .sin-movimiento .servicio__cara { transition-delay: 0s; } .sin-movimiento .servicio__cara { backface-visibility: visible; } .sin-movimiento .servicio__cara--dorso { transform: none; opacity: 0; } .sin-movimiento .servicio.dado-vuelta .servicio__cara--dorso { opacity: 1; } .sin-movimiento .servicio.dado-vuelta .servicio__cara--frente { opacity: 0; } /* --- Operaciones ---------------------------------------------------------- */ .operaciones { overflow: hidden; /* Aire de más abajo: es la banda donde vive el mapa. Sin este espacio el dibujo le pasa por encima al texto y no se lee ni una cosa ni la otra. */ padding-bottom: clamp(9rem, 24vh, 15rem); } .operaciones__mapa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s ease-out; /* El mapa se desvanece hacia arriba, que es donde está el texto. Abajo se ve entero. Así el dibujo nunca compite con lo que hay que leer. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 34%, #000 62%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 34%, #000 62%, #000 100%); } .operaciones__mapa.visible { opacity: 1; } /* --- Video de fondo de la sección ----------------------------------------- Va muy apagado a propósito. Las protagonistas son las dos tarjetas de país: si el video se ve fuerte, compite con ellas y la sección se vuelve ruido. -------------------------------------------------------------------------- */ .operaciones__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease-out; pointer-events: none; } .operaciones__video.visible { opacity: 0.52; } /* Capa oscura encima del video: sostiene el contraste del texto blanco y hunde el fondo para que las tarjetas se despeguen. Se aclaró respecto de la primera versión: estaba tan oscuro que el video no se distinguía. Sigue firme arriba, donde va el título en blanco, y se afloja en el medio, que es donde el video tiene algo para mostrar. */ .operaciones__tinte { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(17, 17, 18, 0.80) 0%, rgba(17, 17, 18, 0.54) 30%, rgba(17, 17, 18, 0.54) 70%, rgba(17, 17, 18, 0.86) 100%); } .operaciones__contenido { position: relative; z-index: 2; } /* Las tarjetas levantan del fondo con una sombra propia. */ .operaciones .sede { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } /* --- Las dos sedes, como tarjetas grandes --------------------------------- Cada país es una pieza alta con foto de fondo. Mientras no haya foto propia se dibuja una trama generativa; cuando se suba desde /admin, la foto la reemplaza y el diseño no cambia. El velo oscuro está calculado para que el texto se lea con CUALQUIER foto, incluso una de día y muy clara. Sin eso, una rambla al mediodía se come el nombre de la ciudad. -------------------------------------------------------------------------- */ .sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } @media (max-width: 780px) { .sedes { grid-template-columns: 1fr; } } .sede { position: relative; isolation: isolate; min-height: clamp(400px, 58vh, 560px); border-radius: 18px; overflow: hidden; border: 1px solid var(--linea-inv); background: #0b0b0d; display: flex; } /* El fondo es más alto que la tarjeta: ese sobrante es lo que permite el desplazamiento suave con el scroll sin que asome un borde vacío. */ .sede__fondo { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; } .sede__foto, .sede__lienzo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--curva); } .sede:hover .sede__foto, .sede:hover .sede__lienzo { transform: scale(1.045); } .sede__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 6, 8, 0.94) 0%, rgba(6, 6, 8, 0.78) 32%, rgba(6, 6, 8, 0.34) 66%, rgba(6, 6, 8, 0.30) 100%); transition: opacity 0.6s var(--curva); } .sede:hover .sede__velo { opacity: 0.9; } .sede__contenido { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 2.6vw, 2.25rem); } /* --- Arriba: país y coordenadas ------------------------------------------ */ .sede__alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .sede__pais { display: inline-flex; align-items: center; gap: 0.55em; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: #fff; } /* Punto que late: la operación está viva en los dos países. */ .sede__pais::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34c759; flex: none; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); animation: pulso 2.6s ease-out infinite; } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } } .sede__coord { font-family: var(--fuente-numero); font-size: 0.6875rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; text-align: right; } /* --- Abajo: ciudad y datos ----------------------------------------------- */ .sede__ciudad { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; color: #fff; margin-bottom: 1.1rem; } /* Raya que se dibuja sola cuando la tarjeta entra en pantalla. */ .sede__raya { display: block; width: 0; height: 2px; background: #fff; opacity: 0.85; margin-bottom: 1.1rem; transition: width 1.1s var(--curva) 0.15s; } .sede.vista .sede__raya { width: 64px; } /* Alto reservado para que el nombre de las dos ciudades quede a la misma altura. Hoy las dos sedes tienen las mismas líneas, así que alcanza con un colchón chico; absorbe una línea de diferencia si alguna suma texto. (Estaba en 8.5rem cuando Uruguay tenía un párrafo extra: al sacarlo, quedaba un hueco muerto abajo de las tarjetas.) */ .sede__datos { min-height: 3.5rem; } @media (max-width: 780px) { .sede__datos { min-height: 0; } } .sede__razon { font-size: var(--t-cuerpo); font-weight: 600; letter-spacing: -0.015em; color: #fff; margin-bottom: 0.3rem; } .sede__dato { font-size: var(--t-chico); color: rgba(255, 255, 255, 0.62); } .sede__rol { font-size: var(--t-chico); line-height: 1.5; color: rgba(255, 255, 255, 0.62); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); max-width: 42ch; } /* --- La tarjeta que lleva al otro sitio -------------------------------------- En nvgroup.com.ar la tarjeta de Uruguay lleva a nvgroup.com.uy, y al revés. La del país donde ya estás no es un enlace: no tendría a dónde llevar. La diferencia tiene que verse SIN pasar el mouse, porque en el teléfono no hay mouse: por eso la leyenda "Ir al sitio de…" está siempre, y lo que suma el hover es solo confirmación. ---------------------------------------------------------------------------- */ a.sede--enlace { text-decoration: none; color: inherit; cursor: pointer; } /* Las dos tarjetas dibujan esta ranura; en la del país donde ya estás va vacía. El alto lo fija la propia regla, así que las dos miden igual sin tener que adivinar un número: los nombres de las ciudades quedan alineados. */ .sede__ir { display: flex; align-items: center; gap: 0.45rem; margin-top: 1.15rem; min-height: 1.45rem; font-size: var(--t-chico); font-weight: 500; color: #fff; } .sede__ir svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s var(--curva); } .sede--enlace:hover .sede__ir svg, .sede--enlace:focus-visible .sede__ir svg { transform: translateX(4px); } /* El canto se enciende: dice "esto es una puerta", sin mover la tarjeta de lugar (moverla pelearía con el desplazamiento del fondo al hacer scroll). */ .sede--enlace { transition: border-color 0.3s var(--curva); } .sede--enlace:hover { border-color: rgba(255, 255, 255, 0.42); } .sede--enlace:focus-visible { outline: none; border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.35); } @media (prefers-reduced-motion: reduce) { .sede__pais::before { animation: none; } .sede__raya { width: 64px; transition: none; } } /* --- Casos ---------------------------------------------------------------- */ .caso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 860px) { .caso { grid-template-columns: 1fr; } } .caso__nombre { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.032em; margin-bottom: 1rem; } .caso__claim { font-size: var(--t-sub); font-weight: 500; line-height: 1.3; letter-spacing: -0.022em; margin-bottom: 1.5rem; max-width: 24ch; } .caso__texto { margin-bottom: 1.5rem; } .caso__texto p { font-size: var(--t-cuerpo); line-height: 1.6; color: var(--tinta-suave); } .caso__texto p + p { margin-top: 0.75rem; } .caso__remate { padding-left: 1rem; border-left: 2px solid var(--acento-vivo); margin-bottom: 1.5rem; } .caso__remate p { font-size: var(--t-cuerpo); font-weight: 500; line-height: 1.5; } .caso__remate p + p { margin-top: 0.3rem; } .caso__aprendizaje { font-size: var(--t-chico); color: var(--tinta-suave); line-height: 1.55; } /* ========================================================================== MANIFIESTO — "Quiénes somos" Un solo enunciado grande que se enciende palabra por palabra al entrar en pantalla. Es todo el bloque: no hay título corto arriba ni párrafos de apoyo abajo. Cuando una empresa tiene una sola cosa que decir sobre sí misma, partirla en tres piezas la debilita. ========================================================================== */ /* Título grande a la izquierda, texto en una columna angosta a la derecha. Con todo apilado y a lo ancho, el párrafo se leía como una continuación del título; en dos columnas se entiende de una que son dos cosas: el enunciado y su explicación. */ .manifiesto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .manifiesto .etiqueta { grid-column: 1 / -1; } .manifiesto__titulo { font-size: clamp(2rem, 1rem + 3.6vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.034em; margin-top: 1.1rem; text-wrap: balance; } .manifiesto__cuerpo { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.55; letter-spacing: -0.012em; color: var(--tinta-suave); margin-top: 1.35rem; } /* El remate cierra, y por eso va con la línea al costado: es la misma marca que usa el sitio para lo que hay que retener. */ .manifiesto__remate { margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--acento-vivo); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem); font-weight: 500; line-height: 1.45; color: var(--tinta); } @media (max-width: 900px) { .manifiesto { grid-template-columns: 1fr; gap: 0; } .manifiesto__cuerpo { margin-top: 1.5rem; } } /* Cada palabra arranca apagada y se prende. El estado apagado lo pone el JAVASCRIPT al partir el texto, no el CSS: si el CSS lo pusiera y el script no cargara, el bloque entero quedaría en gris claro ilegible para siempre. */ [data-encender] .palabra { display: inline-block; opacity: 0.18; transition: opacity 0.8s var(--curva); } [data-encender] .palabra.encendida { opacity: 1; } /* El remate no se apaga nunca: es la frase que tiene que quedar, y es la primera que el ojo encuentra antes de leer el resto. Va en tinta plena mientras lo de arriba todavía es gris. */ .manifiesto__remate { color: var(--tinta); font-weight: 500; } .manifiesto__remate .palabra { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-encender] .palabra { opacity: 1; transition: none; } } /* --- Título con degradé ----------------------------------------------------- Blanco arriba, gris abajo, recortado contra las letras. Sobre fondo oscuro da la sensación de que el texto tiene luz propia y se apaga hacia el pie. El `color` de respaldo va primero: si un navegador no entiende background-clip, se queda con el color y el título se lee igual. Sin eso, `text-fill-color: transparent` lo dejaría invisible. -------------------------------------------------------------------------- */ /* ⚠️ UN TÍTULO CON DEGRADÉ NO PUEDE LLEVAR data-anim="lineas". Ese efecto rehace el título partiéndolo en un por palabra y les aplica un transform. Cada span transformado abre su propio contexto de apilado, y ahí adentro NO llega el fondo recortado del padre: el texto queda con "text-fill-color: transparent" y sin nada detrás, o sea invisible. En una sección oscura eso se ve como si el título no existiera. Los títulos con degradé usan data-anim="sube", que mueve el elemento entero y no lo desarma. */ .titulo--degrade { color: var(--tinta-inv); background: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%); -webkit-background-clip: text; background-clip: text; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .titulo--degrade { -webkit-text-fill-color: transparent; text-fill-color: transparent; } } .titulo--grande { font-size: clamp(2.25rem, 1rem + 4.4vw, 4rem); line-height: 1.05; letter-spacing: -0.036em; } /* --- El hero, centrado ------------------------------------------------------- Con una sola frase y dos botones, alinear a la izquierda deja media pantalla vacía a la derecha y el conjunto se ve caído hacia un costado. Centrado, la frase se sostiene sola. ---------------------------------------------------------------------------- */ .hero--centrado .hero__interior { text-align: center; } .hero--centrado .botonera { justify-content: center; } .hero--centrado .hero__bajada { margin-inline: auto; } .titulo--hero { font-size: clamp(2.5rem, 1rem + 6.4vw, 5.5rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; margin-inline: auto; text-wrap: balance; /* EL TÍTULO DEL HERO VA BLANCO, SIN DEGRADÉ. Y no es por vaguería. --------------------------------------------------------------------- Este es el único título grande del sitio que NO lleva .titulo--degrade. Se probó con degradé dos veces y las dos veces se leyó gris. El degradé blanco→plata funciona en Operaciones y en Contacto porque ahí atrás hay negro plano: el ojo interpreta la franja plateada como una luz cruzando metal. Acá atrás hay un video de un puerto que se mueve y que va de 86 a 137 de brillo. Sobre eso, el ojo no tiene contra qué comparar y la misma franja se lee como lo que literalmente es: una banda gris cruzando las letras. Se verificó en Chrome comparando texto blanco liso contra el mismo texto con degradé recortado, y la banda gris se ve a simple vista. Así que acá el volumen lo da la sombra, no el degradé. La sombra no está en esta regla: la pone ".hero--video h1" más arriba, que es la que vale para todo el texto blanco sobre el video. Se deja ahí a propósito, para que haya UNA sola definición de la sombra del hero y no dos peleándose. Si algún día el hero deja de tener video y pasa a fondo negro plano, ahí sí conviene devolverle la clase .titulo--degrade en index.php. */ color: #ffffff; } /* --- El hero en el teléfono -------------------------------------------------- Dos cosas que en la computadora no se notan y en el teléfono sí. 1. TAMAÑO. La medida de arriba es fluida, pero abajo de 400 px de ancho toca su piso y el título queda en 41 px: chico para lo único que hay en pantalla, con medio hero vacío arriba. Acá crece más rápido. 2. AIRE ENTRE RENGLONES. 1.02 funciona a 88 px, donde una sola línea ocupa todo el ancho. En el teléfono la frase cae en tres renglones y a esa altura la "g" de Tecnología se choca con la "I" de Innovación. El tope de 3.6rem no es estético: es hasta dónde entra "Tecnología e" sin partirse en un cuarto renglón. Si algún día cambia el título del hero desde el panel y se ve mal partido, este número es el que hay que tocar. ---------------------------------------------------------------------------- */ @media (max-width: 860px) { .titulo--hero { font-size: clamp(2.9rem, 0.35rem + 11.4vw, 3.6rem); line-height: 1.1; letter-spacing: -0.032em; } /* El velo también se aplana en la franja del título, por lo mismo que en la computadora: si sigue bajando ahí, el primer renglón queda sobre un fondo más claro que el tercero. Acá es UNA sola capa, no dos como en la computadora, así que para aclarar un 20% alcanza con multiplicar cada número por 0,80 — sin la cuenta de capas encimadas que explica el comentario de arriba. Por eso los números no coinciden con los de allá aunque el resultado sea el mismo. */ .hero--video .hero__velo { background: linear-gradient(to bottom, rgba(8, 9, 12, 0.32) 0%, rgba(8, 9, 12, 0.27) 20%, rgba(8, 9, 12, 0.45) 40%, rgba(8, 9, 12, 0.45) 68%, rgba(8, 9, 12, 0.54) 100%); } } /* ========================================================================== CIFRAS Se usan en dos lugares: el bloque de abajo del hero y el caso. La base es la misma y cada lugar cambia lo suyo con un modificador, para que los números se vean como una sola familia y no como dos inventos distintos. ========================================================================== */ .cifras { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .cifra__numero { display: flex; align-items: baseline; gap: 0.26em; font-size: clamp(2.25rem, 4.4vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.55rem; /* Sin esto el número TIEMBLA mientras cuenta: cada dígito tiene su propio ancho, así que un 1 ocupa menos que un 8 y el texto se sacude en cada cuadro. Con cifras tabulares todos los dígitos miden igual. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* La palabra que acompaña al número ("10 años") va bastante más chica: con el mismo cuerpo que el número, esa cifra ocupa el triple que las otras y la fila queda desbalanceada. */ .cifra__sufijo { font-size: 0.4em; font-weight: 500; letter-spacing: -0.015em; color: var(--tinta-suave); } .cifra__rotulo { margin: 0; font-size: var(--t-chico); line-height: 1.35; color: var(--tinta-suave); max-width: 18ch; } @media (max-width: 640px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.75rem, 5vh, 2.25rem); } } /* --- En el caso ------------------------------------------------------------ Cruzando las dos columnas y con una línea arriba: son el resumen del caso, no un dato de la columna de texto. La línea es lo que hace que se lean como un bloque aparte y no como el final del párrafo anterior. -------------------------------------------------------------------------- */ .cifras--caso { grid-column: 1 / -1; margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: clamp(1.75rem, 4vh, 2.5rem); border-top: 1px solid var(--linea); } /* ========================================================================== EXPERIENCIA EN NÚMEROS — el bloque de abajo del hero ========================================================================== */ .numeros__cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(3rem, 8vh, 5rem); } .numeros__cabecera .etiqueta { grid-column: 1 / -1; } .numeros__cabecera h2 { margin-bottom: 0; } .numeros__cabecera .guia { max-width: 46ch; } @media (max-width: 900px) { .numeros__cabecera { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vh, 3.5rem); } } /* --- Los números ----------------------------------------------------------- Cada uno arranca con una línea propia que se dibuja de izquierda a derecha al entrar. Es lo que separa esto de "cuatro números puestos en fila": la línea da la sensación de que algo se está midiendo, no decorando. Se anima `transform`, que el navegador resuelve sin volver a calcular la página. Animar el `width` haría lo mismo a la vista y obligaría a recalcular el diseño en cada cuadro. -------------------------------------------------------------------------- */ .cifras--destacadas { gap: clamp(1.75rem, 3.5vw, 3rem); } .cifras--destacadas .cifra { position: relative; padding-top: clamp(1.1rem, 2.4vh, 1.6rem); } .cifras--destacadas .cifra::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--tinta); transform: scaleX(0); transform-origin: left center; transition: transform 0.95s var(--curva); } .cifras--destacadas.vista .cifra::before { transform: scaleX(1); } /* Escalonadas, en el mismo orden y al mismo ritmo con que entran los números (js/animacion.js usa 0.09 s de separación). */ .cifras--destacadas .cifra:nth-child(2)::before { transition-delay: 0.09s; } .cifras--destacadas .cifra:nth-child(3)::before { transition-delay: 0.18s; } .cifras--destacadas .cifra:nth-child(4)::before { transition-delay: 0.27s; } .cifras--destacadas .cifra:nth-child(5)::before { transition-delay: 0.36s; } .cifras--destacadas .cifra:nth-child(6)::before { transition-delay: 0.45s; } .cifras--destacadas .cifra__numero { font-size: clamp(2.5rem, 5.2vw, 4rem); margin-bottom: 0.7rem; } .cifras--destacadas .cifra__rotulo { font-size: var(--t-cuerpo); color: var(--tinta-suave); } /* --- Los dos mercados ------------------------------------------------------ Cierra el bloque. Hundido apenas del fondo para que se lea como un pie y no como una quinta cifra. -------------------------------------------------------------------------- */ .numeros__pie { margin-top: clamp(3rem, 7vh, 4.5rem); padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--fondo-hueco); border-radius: var(--radio); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .numeros__mercados { flex: none; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--tinta); } .numeros__nota { margin: 0; padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--linea); font-size: var(--t-chico); line-height: 1.5; color: var(--tinta-suave); } @media (max-width: 700px) { .numeros__pie { flex-direction: column; align-items: flex-start; gap: 0.85rem; } .numeros__nota { padding-left: 0; border-left: 0; } } /* Marcador de foto: mientras no haya imagen real, se muestra esto. Nunca una foto de banco de imágenes. */ .marcador { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--fondo-hueco); overflow: hidden; display: grid; place-items: center; } .marcador canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .marcador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .marcador__nota { position: relative; z-index: 1; font-size: var(--t-micro); color: var(--tinta-tenue); text-align: center; padding: 1rem; } /* --- Empezar -------------------------------------------------------------- */ .empezar { text-align: center; max-width: 44rem; margin-inline: auto; } .empezar h2 { margin-bottom: 1.5rem; } .empezar .guia { margin-inline: auto; } /* Lo que incluye el estudio. En dos columnas para que no quede una lista larguísima que empuja el botón fuera de la pantalla. */ .empezar__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 2rem; max-width: 34rem; margin: 2rem auto 0; text-align: left; } @media (max-width: 560px) { .empezar__lista { grid-template-columns: 1fr; } } .empezar__lista li { position: relative; padding-left: 1.15rem; font-size: var(--t-chico); color: var(--tinta-suave); line-height: 1.5; } .empezar__lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #34c759; } .empezar__resultado { max-width: 46ch; margin: 2rem auto 0; font-size: var(--t-guia); font-weight: 500; line-height: 1.45; color: var(--tinta); } .empezar__notas { max-width: 48ch; margin: 1.75rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: var(--t-chico); color: var(--tinta-suave); line-height: 1.55; } .empezar__notas p + p { margin-top: 0.5rem; } .empezar__notas strong { color: var(--tinta); font-weight: 600; } .empezar .botonera { justify-content: center; } /* --- Formulario ----------------------------------------------------------- */ .form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 640px) { .form { grid-template-columns: 1fr; } } .campo { display: flex; flex-direction: column; gap: 0.4rem; } .campo--ancho { grid-column: 1 / -1; } .campo label { font-size: var(--t-micro); font-weight: 500; color: var(--tinta-suave); } /* ========================================================================== FORMULARIO SOBRE FONDO OSCURO El bloque de contacto va en negro. Corta con el off-white del resto de la página y le da al formulario el peso de "acá se decide algo". Los campos siguen al checkout de Apple en modo oscuro, que NO es el claro con los colores dados vuelta: · El campo no es negro: se levanta apenas del fondo con un blanco al 5%. Un campo del mismo color que el fondo, con solo un borde, se lee como un dibujo; con el relleno se lee como algo donde se puede escribir. · El azul es OTRO. #0071e3 sobre negro se apaga y parece gris azulado; Apple usa #0a84ff en oscuro, que es el mismo azul corregido para que tenga el mismo brillo aparente. · El rojo del error también: el #d93025 del modo claro sobre negro se ve marrón. Va #ff453a. ========================================================================== */ .seccion--oscura .campo label, .seccion--oscura .campo > span, .seccion--oscura .contacto__evaluar__nota { color: var(--tinta-inv-suave); } /* La nota de privacidad va en naranja. Es el único texto de color de todo el formulario, y por eso se lee: entre siete rótulos grises, el gris número ocho no lo mira nadie. Naranja de Apple, pero el de modo OSCURO (#ff9f0a, no #ff9500). Sobre negro el naranja del modo claro se apaga y tira a marrón. */ .seccion--oscura .form__nota { color: #ff9f0a; } .seccion--oscura .campo input, .seccion--oscura .campo select, .seccion--oscura .campo textarea { /* background-COLOR, no el atajo `background`. El atajo resetea el tamaño, la posición y la repetición del dibujo de fondo — y el desplegable dibuja su flechita justamente ahí. Con el atajo, la flecha salía gigante y repetida a lo ancho del campo. */ background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: var(--tinta-inv); } .seccion--oscura .campo input::placeholder, .seccion--oscura .campo textarea::placeholder { color: #86868b; } .seccion--oscura .campo input:hover, .seccion--oscura .campo select:hover, .seccion--oscura .campo textarea:hover { border-color: rgba(255, 255, 255, 0.3); } .seccion--oscura .campo input:focus, .seccion--oscura .campo select:focus, .seccion--oscura .campo textarea:focus { background-color: rgba(255, 255, 255, 0.08); border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22); } /* La flechita del desplegable viene dibujada en gris oscuro dentro del propio CSS. Sobre negro no se ve: hay que redibujarla clara. */ .seccion--oscura .campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a1a1a6' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); } .seccion--oscura .campo--error input, .seccion--oscura .campo--error select, .seccion--oscura .campo--error textarea, .seccion--oscura .campo--error .desplegable__boton, .seccion--oscura .campo__error { border-color: #ff453a; color: #ff6961; } .seccion--oscura .campo--error input, .seccion--oscura .campo--error select, .seccion--oscura .campo--error textarea, .seccion--oscura .campo--error .desplegable__boton { color: var(--tinta-inv); } /* La pantalla de gracias, la que reemplaza al formulario después de enviar. Tiene sus propios colores fijos —pensados para fondo claro— así que sobre negro quedaba negro sobre negro: contraste 1.12, o sea invisible. Y es justo la pantalla del momento más importante, cuando alguien acaba de dejarnos su consulta y necesita ver que salió bien. */ .seccion--oscura .enviado__titulo { color: var(--tinta-inv); } .seccion--oscura .enviado__texto { color: var(--tinta-inv-suave); } /* Las sedes, el separador y los enlaces del bloque. */ .seccion--oscura .contacto__sede h4 { color: var(--tinta-inv-suave); } .seccion--oscura .contacto__sede a { color: var(--tinta-inv); } .seccion--oscura .contacto__sede a:hover { color: #4da3ff; } .seccion--oscura .contacto__evaluar { border-top-color: var(--linea-inv); } /* ========================================================================== EL DESPLEGABLE CON ÍCONOS ("Dónde nos conociste") El armado está en js/formulario.js: un botón que imita al select y una lista propia, porque un