/* ============================================================ HERO · "Bloque diagonal" (concepto D) — Sports Travel Colombia Molde único reutilizable. Sin animación. ⚠️ El acento se hereda del de cada página; **ya no se declara inline en el .dhero**. Hasta el 2026-08-23 cada `

` repetía `--sp` y `--sp-ink` a mano, y en tres de las seis páginas el valor inline contradecía al del body: fútbol decía tinta oscura abajo y blanca aquí, y ganaba el inline. Resultado, botón blanco sobre azul a 3,27:1. Se quitaron los seis; lo único que sigue inline es `--hero-pos`, que sí es de cada foto. Los cuatro tokens del acento y para qué sirve cada uno están documentados en la cabecera de sport.css. En corto: --sp → superficie (filete, barrita, brillos, relleno) --sp-t → el mismo acento como TINTA sobre el crema --sp-f → relleno alternativo cuando --sp no aguanta la tinta (sólo F1) --sp-ink → texto sobre el relleno la foto (.dhero-photo img), el texto y los enlaces cambian por página. Hereda tipografías y tokens de stc.css (--bg, --bg-2, --line-2, --text-2, --nav-h, --pad, --font-display, --font-body). ============================================================ */ /* 🔴 Los respaldos van en :root, NO en .dhero, y la diferencia no es de estilo. Una custom property se resuelve buscando el ANTEPASADO MÁS CERCANO que la declare. Con estas tres líneas dentro de `.dhero {}` el propio

era ese antepasado y **le ganaba al siempre**: al quitar los seis valores inline el 2026-08-23 los seis heros se pusieron rojos de golpe (medido en navegador: `.dhero-crumb::before` en #e8202e con `body{--sp:#1e8fff}` justo encima). El inline los tapaba y por eso nadie lo había visto. En :root pasa lo contrario: está más cerca del .dhero que , así que el acento de la página gana y esto sólo actúa si alguien usa el molde suelto, que era la intención. ⚠️ No los muevas de vuelta al `.dhero`. */ :root { --sp: var(--red, #e8202e); /* acento por defecto (F1) */ --sp-t: var(--red-cta, #c41421); /* el mismo, en versión tinta */ --sp-ink: #ffffff; /* texto sobre el acento */ } .dhero { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--cream); font-family: var(--font-body); padding: calc(var(--nav-h) + 5vh) var(--pad) 7vh; } /* ---- Foto (lado derecho) ---- La foto NO ocupa todo el hero: es una "caja" anclada a la derecha (left: 36%) cuyo borde izquierdo queda siempre tapado por el bloque diagonal. Así el sujeto se centra dentro del cuadro visible de la foto, no del hero completo (si fuese a sangre, en pantallas anchas object-fit recorta arriba/abajo y el eje X deja de tener efecto, dejando al sujeto pegado a la diagonal). */ .dhero-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 36%; z-index: 0; } /* --hero-pos ajusta el encuadre dentro de la caja. X≈50% centra el sujeto en el cuadro visible; Y afina el recorte vertical. Cada página lo afina en .dhero. */ .dhero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 52% center); display: block; } /* ---- Canto de la foto: corte duro, NO degradado ---- La foto termina en una diagonal limpia que se esconde detrás del bloque. No hay difuminado: la imagen llega a su borde con todo su contraste. Por qué 103deg y no otro ángulo: en un `linear-gradient` las líneas de color constante son PERPENDICULARES a la línea del degradado, así que un degradado a 103deg produce líneas con pendiente dx/dy = -tan(13°) — exactamente las mismas que el `skewX(-13deg)` del bloque. Corte y bloque quedan paralelos a cualquier tamaño de ventana; con 100deg (el valor viejo) iban 3° desalineados y por eso hacía falta un degradado ancho que disimulara el desfase. Por qué la parada va en el 20%: el bloque sólo tapa por sí solo el canto recto de la foto cuando la ventana es ancha (W/H > 1.49); en cuanto se estrecha o se alarga, su borde derecho se va hacia la izquierda (retrocede 0,23px por cada px de alto) mientras el canto de la foto sigue clavado en el 36% del ancho, y asomaría una línea vertical. Resolviendo el corte = borde del bloque, la parada ideal es (0,17W - 0,023H) / (0,64W + 0,231H), que vale 17,8% a 1024x900 y 19,6% en el límite W/H = 1,49. El 20% cubre ese rango entero: en pantallas normales (1440x900, 1920x1080) el corte cae 2-9px POR DEBAJO del bloque —invisible, y la línea roja sigue flotando sobre la foto— y en ventanas raras se pasa unos px de más, que se leen como un bloque ligeramente más ancho. Nunca al revés. */ .dhero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(103deg, var(--bg) 20%, transparent calc(20% + 1px)); } /* ---- Bloque de color (lado izquierdo) con costura de acento ---- */ .dhero-block { position: absolute; top: -10%; bottom: -10%; left: -19%; width: 72%; z-index: 1; background: linear-gradient(150deg, var(--bg-2), var(--bg) 72%); transform: skewX(-13deg); transform-origin: top center; /* Sin sombra a propósito. Llevaba `30px 0 80px` y con el degradado viejo no se notaba, pero contra la foto a pleno contraste era una mancha difusa de 80px sobre la imagen —justo lo que el corte duro venía a quitar—. El canto se define con la línea de acento, no con una sombra. */ } /* Línea de acento DESPEGADA del borde: flota sobre la foto, paralela al canto del bloque (hereda el skew) y separada por un espacio. El glow la vuelve un detalle intencional, no un borde duro. */ .dhero-block::after { content: ""; position: absolute; top: 0; bottom: 0; right: -18px; width: 4px; background: var(--sp); box-shadow: 0 0 22px color-mix(in srgb, var(--sp) 55%, transparent); } /* ---- Contenido ---- */ .dhero-content { position: relative; z-index: 2; max-width: min(46vw, 600px); } .dhero-crumb { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2); } .dhero-crumb::before { content: ""; width: 30px; height: 3px; background: var(--sp); flex-shrink: 0; } .dhero-crumb a { color: inherit; transition: color 0.2s ease; } .dhero-crumb a:hover { color: var(--cream); } /* La barrita de arriba se queda en --sp: es un filete de 30x3px, no texto, y ahí el acento tiene que brillar. La `b` de la miga (el nombre del deporte) sí es texto, a 12px, y con --sp era el peor caso del sitio: 2,34:1 en moto GP. */ .dhero-crumb b { color: var(--sp-t, var(--sp)); font-weight: 800; } .dhero-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; color: var(--cream); font-size: clamp(52px, 7vw, 108px); white-space: nowrap; margin: 22px 0 26px; } .dhero-title .ac { color: var(--sp-t, var(--sp)); } .dhero-sub { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 34ch; text-wrap: pretty; margin-bottom: 36px; } .dhero-ctas { display: flex; flex-wrap: wrap; gap: 13px; } .dhero-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 30px; border-radius: 999px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .dhero-btn:active { transform: scale(0.97); } .dhero-btn .arr { transition: transform 0.25s ease; } .dhero-btn:hover .arr { transform: translateX(5px); } .dhero-btn.fill { background: var(--sp-f, var(--sp)); color: var(--sp-ink); border: 1.5px solid var(--sp-f, var(--sp)); } .dhero-btn.fill:hover { box-shadow: 0 8px 40px color-mix(in srgb, var(--sp) 42%, transparent); } .dhero-btn.ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--line-2); } .dhero-btn.ghost:hover { border-color: var(--cream); } /* ============================================================ Responsive: por debajo de 880px se abandona la diagonal. Antes el móvil imitaba al escritorio: foto a sangre y el texto ENCIMA, sobre un panel oscuro de alto fijo (56% del hero) con la costura de acento arriba. Eso arrastraba dos fallos que en realidad eran el mismo: · el panel medía 56% del hero pero el texto medía más, así que la línea de acento —clavada al canto del panel— cruzaba el

en cuatro páginas. · la mitad inferior de cada foto quedaba tapada por el texto, y como en móvil la caja era 375x812 (muy vertical) el eje Y de object-position no hacía nada: no había forma de subir el sujeto. Una foto con el motivo abajo era inservible en móvil por mucho que se retocara. La causa de los dos era la misma: un panel de alto arbitrario superpuesto. Ahora se apilan: la foto arriba, el texto abajo, cada uno con su alto. El panel mide lo que mide su contenido (nada que cruzar) y la foto se ve entera (nada que tapar). De paso la caja de la foto pasa a ser casi cuadrada (375x~360), o sea casi la misma proporción que la de escritorio (912x900): el mismo --hero-pos vale para las dos y --hero-pos-m deja de hacer falta. Se conserva como escape: en pantallas bajas (iPhone SE) la banda de foto se estrecha, la caja se vuelve apaisada y el eje que manda vuelve a ser la X. El hero arranca DEBAJO del nav (padding-top) en vez de pasar por debajo: en estas seis páginas la barra es crema opaca desde arriba (ver sport.css), así que sangrar bajo ella sólo escondía 72px de foto. ============================================================ / @media (max-width: 880px) { .dhero { flex-direction: column; align-items: stretch; justify-content: flex-end; padding: var(--nav-h) 0 0; } / La foto deja de ser absoluta: es la primera fila de la columna y se queda con todo el alto que el texto no use, con un suelo para que en pantallas bajas no se reduzca a una tira. Si no cabe, el hero pasa de 100svh y el panel asoma medio cortado, que es la señal correcta de "sigue abajo". / .dhero-photo { position: relative; inset: auto; flex: 1 1 38svh; min-height: 34svh; } .dhero-photo img { object-position: var(--hero-pos-m, var(--hero-pos, center 50%)); } / Sin diagonal no hay corte que esconder, así que el pseudo-elemento se apaga. Llegó a llevar una guirnalda de banderines aquí, colgada del canto de la foto; Juan la quitó el 2026-08-22 ("quita los banderines, no dejemos nada"). El historial de los tres intentos está en stc.css, en el hueco que dejaron. La foto termina a filo contra el panel crema y así se queda. / .dhero-photo::after { display: none; } / El bloque diagonal y su línea de acento son geometría de escritorio. En móvil el acento del deporte lo llevan la barrita de la miga y el botón relleno, que están a 26px de la franja: foto → costura de marca → acento del deporte → titular. / .dhero-block { display: none; } .dhero-content { flex: 0 0 auto; max-width: none; background: var(--bg); / 64px abajo, no 30: el botón flotante de WhatsApp está fijo en right:22px/bottom:22px y mide 58, o sea ocupa los 80px inferiores de la esquina derecha. Con 30 se sentaba encima del botón "Ver circuitos" —y justo al cargar, que es el peor momento—. Con 64 quedan 15px de aire. env(safe-area-inset-bottom) es aparte, por la barra de gestos del iPhone. ⚠️ Si el FAB cambia de tamaño o de sitio, este número hay que rehacerlo. / padding: 26px var(--pad) calc(64px + env(safe-area-inset-bottom, 0px)); } .dhero-title { white-space: normal; margin: 16px 0; } .dhero-sub { max-width: 42ch; margin-bottom: 26px; } } / Los botones sólo se aprietan cuando de verdad no caben. Entre 880 y 600px sobra ancho y encogerlos los dejaría flotando pequeños en una fila enorme. Por debajo de 600 pasan a rejilla de dos columnas en vez de flex-wrap: con wrap se pasaban de los 335px de un teléfono por unos pocos píxeles y caían a dos filas, 62px que el panel le robaba a la foto. En rejilla entran siempre, midan lo que midan los textos, y el tope de 420px evita que en una tableta estrecha salgan dos pastillas desmesuradas. */ @media (max-width: 600px) { .dhero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; } .dhero-btn { justify-content: center; padding: 15px 10px; font-size: 12.5px; letter-spacing: 0.06em; } } @media (prefers-reduced-motion: reduce) { .dhero-btn, .dhero-btn .arr { transition: none; } }