/* HERO (incluye la barra de navegación superior) SIN SÍMBOLO GRANDE: se retiró la instancia grande del símbolo. La marca ya aparece dos veces sobre el pliegue — en el nav y dentro del toggle — y una tercera a gran tamaño era redundancia, no énfasis. Se probó sangrado por el borde y por detrás de la curva y tampoco resolvía: el problema no era el tratamiento, era la repetición. El naranja de marca sigue presente arriba del pliegue en el símbolo del nav, en el filete de la curva y en el punto del eyebrow. CABECERA CORTA: al no haber símbolo no hay hueco que rellenar a la derecha, así que el bloque se comprime — aire sobre el titular de 32px, tope del titular en 52px y subtítulo a 18px. De ~630px de alto a ~400px. TAMAÑOS FLUIDOS: el titular escala con clamp() en vez de saltar por breakpoint. Antes caía de 78px a 54px de golpe al cruzar 1080px. NO TOCAR el padding-bottom de 132px: la curva de 3 capas mide 131px y por debajo de ese valor el subtítulo se le monta encima. ------------------------------------------------------------ Estructura validada en Claude Design: nav + titular + curva de 3 capas, todo dentro del bloque de color del hero. APILAMIENTO DEL HERO (de abajo a arriba): 0 — .hero::before trama de puntos 1 — .hero__contenido 2 — .hero__borde 3 — .hero__nav */ .hero { position: relative; overflow: hidden; background-color: var(--color-fondo-hero); transition: background-color 0.3s ease; padding-bottom: 132px; } /* TRAMA DE PUNTOS — anclada al lado derecho, desvaneciendo hacia el centro. Ocupa el hueco que dejó el símbolo grande retirado. El motivo no es decorativo: la paleta viene de la GameBoy (emulador Delta) y una retícula de puntos es la textura de una pantalla de píxeles. DOS MALLAS DEL MISMO PASO, DESFASADAS MEDIO PASO y con radios distintos. Eso da el "tamaño variable" sin dibujar nada: es una malla de subpíxeles, no un dibujo. NO intentar dibujar el mochi con puntos — descartado: a bajo contraste no se lee, y si se lee devuelve el símbolo grande al hero por la puerta de atrás. Además a base de puntos el canal asimétrico desaparece y cae en dos exclusiones del manual (ojo/iris, diana). LA MÁSCARA HACE TRES TRABAJOS DE UNA VEZ. Elipse anclada en 100% 52%, radios 62% x 44%, transparencia total al 78% del radio: · ancla la trama a la derecha y la mata hacia el centro · el alcance vertical real queda entre el 18% y el 86% de la altura del hero, así que NO LLEGA AL BORDE SUPERIOR. El color del notch en iPhone sigue saliendo del background-color sólido de html/body, que aquí no se toca. Si se sube el radio vertical por encima de 44% la trama alcanza el borde y se rompe esto. · tampoco llega abajo, así que no se mete con los 131px de la curva y no hace falta tocar el padding-bottom. NUNCA en html/body: ya se probó linear-gradient ahí y salió franja NEGRA en notch y home indicator. WebKit espera background-color sólido. No repetir. El color es rgba() de un token existente (morado en día, menta en noche). Ni un tinte nuevo. Los valores de opacidad se calibran en vivo en el inspector con seleccionado y se pasan a tokens.css una sola vez. Nota: al cambiar de tema el color de los puntos salta en vez de hacer transición (background-image no interpola con var()). A la opacidad correcta es imperceptible — si se nota el salto, es que la trama está demasiado fuerte. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient( circle, rgba(var(--trama-rgb), var(--trama-opacidad)) var(--trama-punto-mayor), transparent calc(var(--trama-punto-mayor) + 0.5px) ), radial-gradient( circle, rgba(var(--trama-rgb), var(--trama-opacidad)) var(--trama-punto-menor), transparent calc(var(--trama-punto-menor) + 0.5px) ); background-size: var(--trama-paso) var(--trama-paso); background-position: 0 0, calc(var(--trama-paso) / 2) calc(var(--trama-paso) / 2); -webkit-mask-image: radial-gradient( ellipse 62% 44% at 100% 52%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78% ); mask-image: radial-gradient( ellipse 62% 44% at 100% 52%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78% ); } .hero__nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 64px 0; } .hero__marca { display: flex; align-items: center; align-self: center; gap: 14px; } .hero__simbolo-nav { display: block; width: 42px; height: calc(42px * 59 / 80); color: var(--color-simbolo); } .hero__simbolo-nav svg { width: 100%; height: 100%; } .hero__wordmark { font-size: 25px; font-weight: 600; letter-spacing: -0.025em; color: var(--color-wordmark); } .hero__contenido { position: relative; z-index: 1; padding: 32px 64px 0; } .hero__titular { margin: 0; font-family: var(--font-marca); font-weight: 600; font-size: clamp(36px, 3.9vw, 52px); line-height: 1.02; letter-spacing: -0.038em; color: var(--color-wordmark); text-wrap: balance; max-width: 15ch; } /* Migrado a --texto-sub (1.333rem ≈ 21px) — mismo valor que tenía, pero ahora entra en la escala unificada en vez de ser un 21px suelto. Coincide exacto con .solucion__cierre y .tarjeta__descripcion, que antes eran 19px cada uno por su lado sin relación entre sí. */ .hero__subtitulo { margin: 18px 0 0; font-family: var(--font-marca); font-weight: 300; font-size: var(--texto-sub); line-height: 1.45; letter-spacing: -0.008em; color: var(--color-texto-principal); opacity: 0.72; max-width: 34ch; } /* BORDE — sistema de 3 capas con paths exactos (49 puntos de coordenadas cada uno, curva senoidal calculada). Verificado visualmente como idéntico a la referencia WEB_MODO_DIA.png / WEB_MODO_NOCHE.png. */ .hero__borde { position: absolute; left: 0; bottom: -1px; z-index: 2; width: 100%; height: 131px; display: block; } .hero__borde--movil { display: none; } .borde__fill-below { fill: var(--color-fondo-productos); transition: fill 0.3s ease; } .borde__fill-band { fill: var(--color-wordmark); transition: fill 0.3s ease; } .borde__fill-echo { fill: var(--color-naranja); } @media (max-width: 1080px) and (min-width: 641px) { .hero__nav { padding: 24px 40px 0; } .hero__contenido { padding: 28px 40px 0; } /* Antes 20px suelto (escalón propio de tablet). Se retira: en este rango el subtítulo ya se lee bien al mismo tamaño que desktop (--texto-sub, ≈21px) — no hacía falta un tercer valor solo para tablet cuando la diferencia con desktop era de 1px. */ } @media (max-width: 640px) { /* TRAMA OCULTA EN MÓVIL. La trama existe para ocupar el hueco de la derecha que dejó el símbolo grande — hueco que en una sola columna no existe: el titular ocupa el ancho entero y la trama le pasaría por debajo. Es una decisión, no una limitación técnica: si se quiere recuperar, basta con borrar este bloque y recalibrar la máscara para una columna estrecha. */ .hero::before { display: none; } .hero__borde { display: none; } .hero__borde--movil { display: block; } .hero { padding-bottom: 148px; } .hero__nav { padding: 52px 20px 0; align-items: center; } .hero__contenido { padding: 44px 20px 0; } .hero__titular { max-width: none; } /* Antes 19px suelto. Pasa a --texto-cuerpo (18px) — el escalón de lectura de la escala, ya usado en .solucion__texto. En móvil el subtítulo hace de texto de apoyo más que de subtítulo grande, así que baja un paso respecto a desktop en vez de tener su propio valor aislado. */ .hero__subtitulo { font-size: var(--texto-cuerpo); margin-top: 18px; } .hero__wordmark { font-size: 21px; } }