/* ========================================================================== PARIDAD DE FORMATOS Hoja final: iguala lo que las capas anteriores dejaban distinto entre el formato de pantalla completa y el resto (tablet, vertical, móvil). Se carga la última en todas las páginas. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Navegación 720–1079 px A partir de 1080 la navegación es una píldora con borde, fondo translúcido y enlaces de 0.67rem. Entre 720 y 1079 sólo la portada la mostraba, y lo hacía desnuda: sin píldora, sin fondo y con el cuerpo bajado a 0.58rem, así que el mismo menú se leía como otro componente. Aquí se reconstruye la misma píldora, a escala, y se extiende al resto de páginas. -------------------------------------------------------------------------- */ @media (min-width: 720px) and (max-width: 1079px) { .main-nav, body.page-home .main-nav { position: fixed !important; top: 22px !important; right: auto !important; bottom: auto !important; left: 50% !important; z-index: 10023 !important; display: block !important; width: max-content !important; height: auto !important; max-height: none !important; padding: 4px !important; overflow: visible !important; border: 1px solid var(--neo-line, rgba(198, 198, 198, 0.2)) !important; border-radius: 15px 4px 15px 4px !important; background: linear-gradient(135deg, rgba(23, 23, 23, 0.82), rgba(4, 4, 4, 0.76)) !important; box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 16px 40px rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(18px) saturate(145%); opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) !important; } .main-nav ul, body.page-home .main-nav ul { display: flex !important; flex-direction: row !important; align-items: center !important; width: max-content !important; height: auto !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } .main-nav li { margin: 0 !important; border: 0 !important; } .main-nav a, body.page-home .main-nav a { display: block !important; height: auto !important; min-height: 0 !important; padding: 9px 10px !important; border-radius: 10px 3px 10px 3px !important; color: rgba(245, 248, 255, 0.7) !important; /* Por debajo de 900 la hoja base cambiaba los enlaces a la display condensada: el mismo menú parecía otra marca. */ font-family: "Archivo", Arial, sans-serif !important; font-size: 0.62rem !important; font-weight: 780 !important; letter-spacing: 0.09em !important; line-height: 1.2 !important; text-transform: uppercase !important; white-space: nowrap !important; } /* Sin esto el subrayado deslizante de la versión compacta pintaba una línea suelta bajo la píldora. */ .main-nav a::before, .main-nav a::after, body.page-home .main-nav a::before, body.page-home .main-nav a::after { display: none !important; } .site-header .main-nav a:hover, .site-header .main-nav a:focus-visible { color: var(--neo-ice, #f5f7ff) !important; background: rgba(255, 255, 255, 0.07) !important; } .site-header .main-nav a[aria-current="page"] { color: #2be72e !important; background: rgba(43, 231, 46, 0.16) !important; box-shadow: inset 0 -2px #2be72e !important; } } /* Con la navegación visible entre 720 y 1079, el logo y las acciones vuelven a las esquinas como en pantalla completa (el bloque compacto los centraba y los dejaba pisando la píldora). */ @media (min-width: 720px) and (max-width: 899px) { .site-header .logo, body.rh-intro-running .site-header .logo, body.rh-intro-complete .site-header .logo { left: 24px !important; transform: none !important; } .header-actions { right: 24px !important; left: auto !important; width: auto !important; justify-content: flex-end !important; } } /* -------------------------------------------------------------------------- 2. Filigrana "T-MAXX" de la sección destacada En pantalla completa la filigrana vive detrás del titular, en la columna izquierda, recortada por el borde. Al apilarse la sección el titular sube y la filigrana se queda a la altura de la foto del producto —que es opaca—, así que de los 272px sólo asomaban 14 por la izquierda: se leía como un rectángulo gris suelto, no como una marca de agua. Aquí se ancla al titular, centrada como el resto del bloque apilado. -------------------------------------------------------------------------- */ /* Sólo en vertical: en apaisado la sección recupera las dos columnas de la referencia (bloque 9), y con ellas la filigrana anclada al borde izquierdo que tiene allí. */ @media (max-width: 899px) and (orientation: portrait) { .page-home .feature-hero .ghost { top: 21% !important; left: 50% !important; font-size: 30vw !important; } } /* -------------------------------------------------------------------------- 3. Abanico de la comunidad en teléfonos La apertura ya estaba topada para que la ficha exterior entrara completa, pero el ancho de ficha (36vw) no bajaba con ella: a 390px las siete fichas se repartían 172px de apertura con 101px de ancho cada una, o sea un 70% de solape. El abanico dejaba de leerse como un abanico. Bajando la ficha a 22vw la apertura sube a ~128px y el solape cae al 20–40%, que es el aire con el que se leen las siete en pantalla completa. Por encima de 600px no cambia nada: ahí el abanico ya respiraba. -------------------------------------------------------------------------- */ @media (max-width: 599px) { /* Las dos declaraciones tienen que moverse juntas: `--fan-card-w` sólo alimenta el cálculo de la apertura, el ancho real lo fija esta otra. */ .page-home .community-section .social-fan { --fan-card-w: clamp(84px, 22.5vw, 112px); } /* El alto es una declaración aparte: al bajar sólo el ancho, las fichas pasaban de 1.5:1 a 2.4:1 y se leían como tiras, no como reels. */ .page-home .community-section .social-fan .deck-card { width: clamp(84px, 22.5vw, 112px) !important; height: clamp(126px, 33.75vw, 168px) !important; } /* (Aquí hubo un `margin-top` negativo para los botones sociales. Retirado: el bloque "los botones dejan de pisar el abanico", al final de esta hoja, fija 104px y va después, así que éste nunca llegaba a aplicarse. Eran nueve declaraciones compitiendo por la misma propiedad.) */ } /* En móvil apaisado la ficha T‑Maxx conservaba una pantalla exacta, pero sus acciones caían 4px fuera del borde inferior. Conservamos la imagen grande y elevamos solo el grupo de acciones dentro del hueco que queda tras el precio. */ @media (max-height: 500px) and (orientation: landscape) { .page-home .feature-hero .hero-ctas { transform: translateY(-28px) !important; } .page-error .error-page { height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; padding: 70px 0 8px !important; } .page-error .error-page .container { gap: 3px !important; padding: 12px 18px !important; } .page-error .error-code { font-size: 5rem !important; } .page-error .kicker { display: none !important; } .page-error .error-title { margin-top: 0 !important; font-size: 1.5rem !important; } .page-error .error-sub { margin: 6px 0 12px !important; font-size: 0.82rem !important; } .page-error .hero-ctas .btn { min-height: 42px !important; padding-inline: 16px !important; } .page-error .wa-float { display: none !important; } } /* Las fichas del abanico están ancladas al pie de `.social-fan`, así que el alto de esa caja es el que decide cuánto aire queda entre el titular y el abanico. En pantalla completa ese hueco es del 4% del alto de pantalla; con el alto heredado se iba al 10% en tablet y al 26% en teléfono, y la sección se partía en dos. Los valores de abajo devuelven el mismo margen de holgura sobre la ficha (~11%) que tiene la referencia ancha. */ @media (min-width: 600px) and (max-width: 899px) { .page-home .community-section .social-fan { height: clamp(230px, 36vw, 300px) !important; } } @media (max-width: 599px) { .page-home .community-section .social-fan { height: clamp(150px, 40vw, 200px) !important; } } /* -------------------------------------------------------------------------- 4. Manifiesto en vertical La capa móvil conservaba la pendiente de escritorio (7.15vw) para que las cuatro frases cayeran en una línea cada una, igual que en pantalla completa. El corte de línea salía idéntico, pero el cuerpo bajaba a 29px: el bloque pasaba de ocupar el 53% de la pantalla a ocupar el 13%, y el manifiesto —que en ancho es la escena más rotunda del sitio— se leía como un pie de página perdido en medio de la sección. Se prioriza el peso sobre el corte: las frases pueden partirse en dos líneas y el cuerpo sube hasta que el bloque vuelve a ocupar ~53% del alto. `min(vw, svh)` es lo que impide que en una tablet vertical (768 × 1024) el mismo 14.5vw se coma la pantalla entera. -------------------------------------------------------------------------- */ @media (max-width: 899px) and (orientation: portrait) { .ln-manifesto-copy { font-size: clamp(34px, min(14.5vw, 8svh), 7.8rem) !important; line-height: 0.96 !important; } /* Sin esto la cuarta frase (que va en `nowrap`) se salía de pantalla en cuanto el cuerpo subía. */ .ln-manifesto-copy .ln-serif { white-space: normal !important; } } /* -------------------------------------------------------------------------- 5. Filas de datos de "Estamos en Quito" El sangrado negativo de las filas (-8px en ancho, -12px en compacto) está pensado para morder el canal del contenedor sin salirse: con 60px de canal la fila sigue entrando 52px; con 14px se iba a 2px y las líneas separadoras quedaban pegadas al borde de la pantalla, en vez de alineadas con el titular como en pantalla completa. -------------------------------------------------------------------------- */ @media (max-width: 899px) { .info-item { margin-inline: 0 !important; } } /* =========================================================================== TELÉFONO: PANELES DE ACCIÓN A PANTALLA COMPLETA En un teléfono, el carrito y la ficha no son elementos secundarios: son el siguiente paso de la navegación. Abrirlos como tarjetas estrechas dejaba controles de la cabecera visibles por detrás y desperdiciaba espacio útil. Se convierten en vistas completas sólo por debajo de 600px; tablet y escritorio conservan el comportamiento de panel lateral / diálogo. ========================================================================== */ @media (max-width: 599px) { .modal-backdrop { z-index: 10040 !important; align-items: stretch !important; padding: 0 !important; } .modal { width: 100% !important; min-height: 100svh !important; max-height: 100dvh !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .modal-body { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)) !important; } .modal-close { top: max(12px, env(safe-area-inset-top)) !important; right: 16px !important; } .cart-drawer { top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: 100vw !important; min-height: 100svh !important; height: 100dvh !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; z-index: 10050 !important; } .cart-head { padding: max(16px, env(safe-area-inset-top)) 20px 16px !important; } .cart-items { padding-inline: 20px !important; } .cart-empty { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding-block: 24px !important; } .cart-foot { padding: 16px 20px max(20px, env(safe-area-inset-bottom)) !important; } } /* -------------------------------------------------------------------------- 6. Fotos de las tarjetas de proceso (Nosotros / Servicio técnico) El -18px de sangrado está pensado para una tarjeta con 18px de relleno lateral. Fuera del carril, por debajo de 900 la tarjeta va sin relleno: la foto acababa 36px más ancha que su propia tarjeta y se salía por la izquierda (se leía "sión" en vez de "Pasión"). Dentro del carril sí hay relleno —lo pone `.rh-card`— y ahí la foto vuelve a sangrar hasta el borde, que es como se ve en pantalla completa: la foto ocupa el ancho entero de la tarjeta y son las esquinas redondeadas las que la recortan. -------------------------------------------------------------------------- */ @media (max-width: 899px) { .rh-hcard.static-step-card .step-media { margin-inline: 0 !important; } html.lando-anim [data-lando-htrack] > .rh-hcard.static-step-card .rh-card .step-media { margin-inline: calc(-1 * clamp(18px, 5vw, 24px)) !important; } } /* -------------------------------------------------------------------------- 7. Halo verde del pie El halo se define con un radio absoluto (27rem = 432px). Sobre 1440px eso es el 30% del ancho y se lee como un reflejo en la esquina; sobre 390px cubre el 110% y teñía de verde el pie entero. Se topa al mismo 30% del ancho para que el reflejo ocupe siempre la misma proporción. -------------------------------------------------------------------------- */ @media (max-width: 1439px) { .site-footer { background: linear-gradient(rgba(47, 255, 50, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 255, 50, 0.055) 1px, transparent 1px), radial-gradient(circle at 84% 18%, rgba(61, 254, 64, 0.11), transparent min(27rem, 30vw)), #000000 !important; /* La retícula también es absoluta: 72px sobre 1440 son 20 columnas que se leen como textura; sobre 390 quedaban 5 columnas y se veía como una cuadrícula dibujada. Atada al ancho mantiene las 20 columnas. */ background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto !important; } } /* -------------------------------------------------------------------------- 8. Retícula y halos de las páginas internas Mismo problema que en el pie, y en todas las secciones de las páginas internas: la retícula se declara en 72px y los halos en rem. Sobre 1440px la retícula da 20 columnas (textura) y el halo mide un tercio del ancho; sobre 390px quedan 5 columnas dibujadas y el halo cubre la pantalla entera, así que el mismo fondo cambia de carácter según el dispositivo. Aquí las dos cosas pasan a ser proporcionales al ancho: los valores en 1440px son exactamente los actuales (5vw = 72px, 34vw = 31rem…), así que el formato de pantalla completa no se mueve ni un píxel. -------------------------------------------------------------------------- */ @media (max-width: 1439px) { .page-hero { background: linear-gradient(rgba(67, 198, 69, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 198, 69, 0.09) 1px, transparent 1px), radial-gradient(circle at 72% 25%, rgba(47, 255, 50, 0.18), transparent min(29rem, 32vw)), radial-gradient(circle at 15% 78%, rgba(61, 254, 64, 0.13), transparent min(27rem, 30vw)), var(--neo-night) !important; background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important; } body:not(.page-home) .page-hero { background-color: var(--rh-internal-night) !important; background-image: linear-gradient(rgba(67, 198, 69, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 198, 69, 0.09) 1px, transparent 1px), radial-gradient(circle at 74% 28%, rgba(47, 255, 50, 0.2), transparent min(31rem, 34vw)), radial-gradient(circle at 13% 81%, rgba(61, 254, 64, 0.15), transparent min(29rem, 32vw)), linear-gradient(155deg, #0a0a0a, #000000) !important; background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important; } body:not(.page-home) main > section { background-image: linear-gradient(rgba(67, 198, 69, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 198, 69, 0.07) 1px, transparent 1px), radial-gradient(circle at 84% 22%, rgba(47, 255, 50, 0.16), transparent min(31rem, 34vw)), radial-gradient(circle at 12% 82%, rgba(61, 254, 64, 0.1), transparent min(29rem, 32vw)) !important; background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto !important; } body:not(.page-home) main > section:nth-of-type(even) { background-image: linear-gradient(rgba(67, 198, 69, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 198, 69, 0.055) 1px, transparent 1px), radial-gradient(circle at 16% 18%, rgba(47, 255, 50, 0.15), transparent min(30rem, 33vw)), radial-gradient(circle at 88% 78%, rgba(61, 254, 64, 0.11), transparent min(30rem, 33vw)), linear-gradient(145deg, #0a0a0a, #000000) !important; background-size: clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), clamp(19px, 5vw, 72px) clamp(19px, 5vw, 72px), auto, auto, auto !important; } } /* La misma retícula, dentro de las tarjetas grandes (404 y banda de catálogo): 44px sobre una tarjeta de 760px son 17 columnas; sobre una de 359px eran 8. 5.5vw da 44px justos a 1440 y ~21px en teléfono, o sea las mismas columnas. */ @media (max-width: 1439px) { .page-error .error-page .container, .page-catalog .pit-band .container { background-size: min(44px, 5.5vw) min(44px, 5.5vw), min(44px, 5.5vw) min(44px, 5.5vw), auto !important; } } /* ========================================================================== 9. Secciones de la portada en apaisado de teléfono Las escenas de la portada están fijadas a `100svh`, y sus cabeceras están dimensionadas en `vw` con suelos en px pensados para pantallas altas. En un teléfono en horizontal (844 × 390) esos suelos se comían el 65% del alto — en la referencia ancha son el 47%— y lo que quedaba era inservible: · las fichas del carril quedaban en 300 × 137 (relación 2.2:1 en vez de 0.78:1), o sea una banda con la foto recortada; · la vitrina se pasaba 42px del alto fijado y se cortaba; · en la ficha destacada la foto del producto se quedaba en 2px de alto — el producto protagonista, literalmente invisible. Todo lo de abajo devuelve las proporciones de la referencia ancha atando cabeceras y rellenos al alto de pantalla. El corte a 500px de alto deja fuera las ventanas de 600 y 700 px, que ya funcionaban. ========================================================================== */ @media (orientation: landscape) and (max-height: 500px) { /* --- Carriles horizontales (categorías y vitrina) ------------------- */ html.lando-anim [data-lando-horizontal] { padding-block: 10svh 4svh !important; } /* 8svh reproduce el 16% del alto que ocupa el titular de dos líneas en la referencia ancha (81px sobre 900). El suelo de 3.6rem lo dejaba en 58px sobre 390, o sea el 26%. */ html.lando-anim [data-lando-horizontal] .sec-title, html.lando-anim .page-home .editorial-garage .sec-title, html.lando-anim .page-home .home-showcase .sec-title { font-size: min(10.6vw, 8svh) !important; line-height: 0.94 !important; } /* El tope de 8ch partía "EXPLORA POR CATEGORÍA" en TRES líneas (en ancho son dos), y esa tercera línea es justo el alto que les falta a las fichas. 6.42em son los 13ch de la referencia ancha medidos sobre Anton, pero en una unidad que no cambia con la fuente resuelta. */ html.lando-anim [data-lando-horizontal] .sec-title, html.lando-anim .page-home .editorial-garage .sec-title, html.lando-anim .page-home .home-showcase .sec-title { max-width: 6.42em !important; } html.lando-anim [data-lando-horizontal] .sec-head, html.lando-anim [data-lando-horizontal] .vitrina-head { margin-bottom: 3svh !important; } /* La ficha recupera la relación de la referencia ancha (374 × 480) sobre el alto que le queda a la banda. El `min-width` no es cosmético: el carril sólo se fija y se desplaza si el recorrido supera los 300px (si no, `main.js` le quita el atributo y la sección deja de ser una escena). Con fichas de 177px el carril medía 953 sobre 844 de pantalla, se desactivaba, y las dos últimas fichas quedaban recortadas sin forma de llegar a ellas. El ancho va en `svh`, no en `aspect-ratio` sobre `height: 100%`: con la relación de aspecto el ancho depende del alto que el carril tenga en el instante en que `main.js` lo mide, y esa medida ocurre antes de que la escena se fije. Salía un carril corto, se desactivaba, y con él se caía el `height: 100svh` de la sección. */ html.lando-anim .page-home [data-lando-htrack] > .rh-hcard { width: max(220px, calc(56svh * 0.78)) !important; max-width: none !important; height: 100% !important; max-height: none !important; } /* --- Ficha destacada: vuelve a dos columnas ------------------------- */ /* Apilada no cabe: sólo el titular pedía 90px de los 390 disponibles. En apaisado la pantalla es ancha, así que se recupera exactamente la retícula de la referencia (copia a la izquierda, producto a la derecha) que ya está declarada fuera de las media queries. */ .page-home .feature-hero { padding-block: 9svh 4svh !important; } /* La retícula de la referencia reserva `minmax(420px, 1.1fr)` para la foto: sobre un contenedor de 619px (667 de pantalla) eso dejaba la columna de texto en 138px, el nombre del producto se partía en cinco líneas y las acciones caían 56px por debajo del borde de la escena. Aquí las dos columnas se reparten el ancho y ninguna tiene suelo en píxeles. */ .page-home .feature-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important; flex-direction: row !important; min-height: 0 !important; height: 100% !important; align-content: center !important; text-align: left !important; row-gap: 1.5svh !important; } .page-home .feature-tag, .page-home .feature-name, .page-home .feature-price, .page-home .feature-inner > .hero-ctas { order: 0 !important; align-self: center !important; justify-self: start !important; text-align: left !important; } .page-home .feature-name { max-width: 100% !important; /* 12.8svh es el peso que tiene el titular del producto en la referencia ancha (115px sobre 900). */ font-size: min(8vw, 12.8svh) !important; line-height: 0.86 !important; } /* Alto definido, no `100%`: como la sección es de alto automático, un `height: 100%` se resolvía en `auto` y la foto pasaba a medir lo que le pedía su proporción (392px sobre un viewport de 430). Eso estiraba la sección a 470 y cortaba el botón "Ver ficha". 81svh es justo la banda que dejan los rellenos (15svh arriba, 3svh abajo) con un par de píxeles de margen. */ .page-home .feature-visual { order: 0 !important; flex: none !important; width: 100% !important; height: 81svh !important; min-height: 0 !important; max-height: none !important; } .page-home .feature-hero .hero-ctas { margin-top: 1.5svh !important; } } /* Las fichas de producto de la vitrina no son como las de categorías: su cuerpo (categoría, nombre, precio y botón) mide 160px fijos. Sobre la banda de 227px que deja un teléfono en horizontal, a la foto le quedaban 63px y el producto —lo único que importa de esa tarjeta— desaparecía. En apaisado la ficha se tumba: foto a la izquierda, datos a la derecha. Es el mismo contenido y la misma jerarquía que en pantalla completa, sobre la forma que pide una pantalla apaisada. */ @media (orientation: landscape) and (max-height: 500px) { html.lando-anim .page-home .home-showcase [data-lando-htrack] > .rh-hcard { width: max(330px, calc(56svh * 1.2)) !important; } .page-home .vitrina-grid .tile .rh-card { flex-direction: row !important; align-items: stretch !important; } /* La especificidad tiene que superar a `html.lando-anim [data-lando-htrack] > .rh-hcard .tile-media`, que fija `flex: auto !important` para la retícula en columna. */ html.lando-anim .page-home .vitrina-grid .tile .rh-card .tile-media, html.lando-anim .page-home .vitrina-grid .tile .rh-card .prod-media { flex: 0 0 46% !important; height: auto !important; min-height: 0 !important; padding: 12px !important; } html.lando-anim .page-home .vitrina-grid .tile .rh-card .tile-body, html.lando-anim .page-home .vitrina-grid .tile .rh-card .prod-body { flex: 1 1 auto !important; justify-content: center !important; padding: 12px 14px !important; } } /* El menú inmersivo escala su tipografía con el ancho: en un teléfono en horizontal (844 × 390) los enlaces salían a 89.6px y la lista medía 527px sobre 390 de pantalla — de los cinco enlaces sólo se llegaba a tres, y sin forma de bajar. Se topa por alto: 7.2svh deja la lista en el ~42% de la pantalla, entre el 48% de la referencia ancha y el 37% del móvil vertical. */ @media (orientation: landscape) and (max-height: 500px) { .rh-nav-link { font-size: min(10.6vw, 7.2svh) !important; line-height: 0.98 !important; } .rh-nav-panel { align-content: center !important; } .rh-nav-content { align-self: center !important; } .rh-nav-meta { margin-top: 2svh !important; } } /* ========================================================================== 10. Páginas internas en apaisado de teléfono Los rellenos y los titulares de las páginas internas están en `vw`: sobre una pantalla ancha y baja (844 × 390) el relleno vertical de una sección sumaba el 47% del alto —en la referencia ancha es el 35%— y el titular de portadilla salía a 109px por línea, o sea 300px de las 390 disponibles. Nada se cortaba, porque estas secciones no van fijadas, pero cada bloque pedía dos pantallas de scroll donde en ancho ocupa una. Los topes de abajo reproducen la proporción de la referencia ancha (17.6% de relleno, 12.8% de alto por línea de titular). ========================================================================== */ @media (orientation: landscape) and (max-height: 500px) { /* Las escenas fijadas quedan fuera: su relleno lo fija el bloque 9, más apretado, porque ahí el alto se reparte con el carril. */ body:not(.page-home) main > section:not(.page-hero):not([data-lando-horizontal]), body:not(.page-home) .pin-spacer > section:not(.page-hero):not([data-lando-horizontal]) { padding-block: clamp(44px, 17.6svh, 168px) !important; } .page-hero { padding-block: clamp(60px, 16.4svh, 148px) clamp(28px, 10svh, 90px) !important; min-height: 0 !important; } /* La lista de clases de página no es decorativa: cada página redeclara el titular de portadilla con `.page-about .page-hero h1` y equivalentes, y un `.page-hero h1` a secas pierde contra ellas por especificidad. */ .page-about .page-hero h1, .page-catalog .page-hero h1, .page-contact .page-hero h1, .page-error .page-hero h1, .page-garantia .page-hero h1, .page-privacy .page-hero h1, .page-service .page-hero h1 { font-size: min(17vw, 12.8svh) !important; } /* `body:not(.page-home) .sec-title` es exactamente el selector que declara el tamaño compacto: repetirlo aquí gana por orden, no por especificidad. */ body:not(.page-home) .sec-title, .page-home .community-section .sec-title, .page-home .home-location .sec-title { font-size: min(10vw, 9.5svh) !important; } } /* La ficha de producto en apaisado de teléfono En pantalla completa la ficha mide 780 × 428 sobre 900 de alto: se ve entera y queda por debajo de la cabecera. Sobre 390 de alto pedía 422px de contenido dentro de un tope de 343, así que el precio y "Agregar al carrito" —el único punto de acción de la ficha— quedaban fuera de vista, y además la píldora de navegación (z-index 10023, contra los 140 del velo) se pintaba por encima del borde superior de la tarjeta. Se comprimen los rellenos hasta que el contenido entra completo y el velo pasa por delante de la cabecera. Sólo aquí: en ancho la ficha ya cabe y la cabecera nunca la toca. */ @media (orientation: landscape) and (max-height: 500px) { .modal-backdrop { z-index: 10040 !important; } .modal { max-height: 94svh !important; } .modal-media, .modal-body { padding: 14px 16px !important; } .modal-body { gap: 8px !important; } .modal-specs { padding-block: 4px !important; } .modal-foot { padding-top: 0 !important; } } /* -------------------------------------------------------------------------- 11. Número duplicado en las tarjetas de proceso `.step::before` es un contador CSS que en pantalla completa está anulado (`content: none`), porque dentro de un carril el número lo pinta `main.js` como `.rh-card-num`, superpuesto sobre la foto. Por debajo de 900px el contador vuelve a activarse: la tarjeta mostraba DOS números y, como el `::before` va en flujo (48px de cuerpo + 16 de margen), empujaba el resto de la tarjeta 64px hacia abajo. En un teléfono en horizontal eso bastaba para que el pie de la tarjeta se saliera de la escena fijada. -------------------------------------------------------------------------- */ @media (max-width: 899px) { html.lando-anim [data-lando-htrack] > .rh-hcard.static-step-card::before { content: none !important; } } /* En las páginas internas el número del carril es un acento verde sobre la foto (`--neo-orange-hot`), pero esa regla está detrás de un `min-width: 900px`: por debajo caía a la marca de agua gris del carril de la portada —invisible sobre las fotos— y las tarjetas de proceso perdían su numeración ordinal, que es lo que las convierte en pasos. */ @media (max-width: 899px) { html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard .rh-card-num { color: var(--neo-orange-hot) !important; opacity: 0.92 !important; } } /* El ordinal del carril se dibuja sobre la foto. En pantalla completa entra un 12% del ancho de la tarjeta; en compacto se pegaba a 14px de la esquina (un 5%) y se leía como una etiqueta de sistema, no como parte de la composición. */ @media (max-width: 899px) { html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard .rh-card-num { top: 8% !important; left: 11% !important; } } /* ========================================================================== PANTALLAS BAJAS — apaisado de teléfono y ventanas cortas En vertical las tres escenas de pantalla completa ya miden 100svh, pero con 390px de alto (un teléfono girado) los suelos de las fórmulas anteriores —92px de relleno, un abanico de 300px, una tarjeta de mapa de 279px— sumaban 663px en comunidad y 476px en ubicación. Aquí todo pasa a estar acotado por ALTO además de por ancho. Se activa por `max-height`, así que ningún escritorio ni tablet en vertical entra: a 900px o 1024px de alto no aplica. ========================================================================== */ @media (max-height: 620px) and (min-width: 600px) { .page-home .community-section { padding-block: clamp(20px, 6svh, 92px) clamp(10px, 3svh, 46px) !important; } .page-home .community-section .sec-title { font-size: min(clamp(3.35rem, 14vw, 5.1rem), 10svh) !important; } .page-home .community-section .social-fan { height: min(clamp(342px, 99vw, 456px), 41svh) !important; margin-block: clamp(10px, 3svh, 42px) clamp(8px, 2svh, 24px) !important; } .page-home .community-section .social-fan .deck-card { width: min(clamp(128px, 36vw, 188px), 30svh) !important; height: min(clamp(195px, 54vw, 285px), 44svh) !important; } .page-home .community-section .social-links { margin-block: 0 clamp(8px, 2svh, 24px) !important; } .page-home .home-location { padding: clamp(20px, 6svh, 118px) 0 clamp(10px, 2.5svh, 42px) !important; } .page-home .home-location .sec-title { font-size: min(clamp(2.1rem, 10.6vw, 3.6rem), 9.6svh) !important; } .page-home .home-location .sec-head { margin-bottom: clamp(6px, 1.6svh, 26px) !important; } /* Dos columnas: la fila mide lo que el más alto de los dos bloques, así que ambos tienen que caber en el hueco que deja el rótulo. */ .page-home .home-location .info-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(12px, 2vw, 30px) !important; } .page-home .home-location .info-item { gap: 10px !important; padding: clamp(1px, 0.5svh, 8px) 6px !important; } .page-home .home-location .info-item h3 { margin-bottom: 1px !important; font-size: 0.58rem !important; } .page-home .home-location .info-item p, .page-home .home-location .info-item a { font-size: 0.7rem !important; line-height: 1.2 !important; } .page-home .home-location .map-card { height: auto !important; min-height: 0 !important; } .page-home .home-location .map-consent { position: static !important; gap: 4px !important; padding: clamp(8px, 2svh, 28px) 14px clamp(64px, 18svh, 92px) !important; } .page-home .home-location .map-consent h3 { font-size: min(clamp(1.3rem, 5.3vw, 2.4rem), 7.5svh) !important; } .page-home .home-location .map-pin { width: clamp(26px, 7svh, 48px) !important; height: clamp(26px, 7svh, 48px) !important; } .page-home .home-location .map-pin svg { width: 45% !important; height: 45% !important; } /* El producto protagonista y las galerías ya se ciñen a 100svh, pero su relleno superior dejaba el rótulo pegado a la cabecera fija. */ .page-home .feature-hero { padding: clamp(52px, 15svh, 128px) 0 clamp(12px, 3svh, 56px) !important; } html.lando-anim [data-lando-horizontal] { padding: clamp(52px, 15svh, 112px) 0 clamp(10px, 3svh, 52px) !important; } } /* El botón flotante del mapa mide 50px + 16 de separación: la reserva inferior del aviso tiene que superarlos o asoma por debajo del borde. */ @media (max-height: 620px) and (min-width: 600px) { .page-home .home-location .map-card .map-cta { left: 14px !important; bottom: 12px !important; min-height: 42px !important; padding-inline: 16px !important; font-size: 0.62rem !important; } } /* El hero en pantallas bajas. La retícula de dos columnas se conserva, pero sus medidas verticales tenían suelos en píxeles (180px de arranque, 76px de hueco antes de las acciones) pensados para un teléfono en vertical: sobre 390px de alto empujaban las acciones al 93-97%, contra el 76-89% de la referencia ancha. Aquí cada tramo pasa a estar acotado por `svh`. */ @media (max-height: 620px) and (min-width: 600px) { .page-home .hero-meta { /* Por debajo del logotipo de la cabecera (22px + 54 de alto). */ top: clamp(80px, 15svh, 168px) !important; } .page-home .hero, .page-home .hero > .container { /* El suelo de 152px no es decorativo: el bloque de meta arranca a 80px y mide 61 (ciudad + píldora de horario), así que acaba en 141. Sin el suelo, `31svh` devolvía 121px a 844x390 y 116 a 667x375 y el titular se pintaba ENCIMA de la píldora de horario. Por encima de 500px de alto el `min()` sigue mandando y el valor no se mueve (182 a 1024x600, 190 a 1440x700). */ --home-title-top: max(152px, min(clamp(180px, 30.4svh, 340px), 31svh)); --home-copy-size: min(clamp(1.5rem, 7.9vw, 5.6rem), 10svh); /* El hueco entre el titular y la bajada: +8px, y las acciones bajan lo mismo para no quedarse pegadas a la bajada. En el bloque de abajo se devuelve ese alto recortando el cuerpo del titular. */ --home-sub-gap: clamp(16px, calc(2.4svh + 8px), 48px); --home-cta-gap: clamp(38px, calc(9svh + 8px), 208px); } .page-home .hero .hero-ctas .btn { min-height: 42px !important; } /* Los últimos 14px de ubicación a 667x375. */ .page-home .home-location .info-list { gap: 0 !important; } } /* Teléfonos pequeños girados (667x375): la lista de seis datos es la columna más alta y dejaba la sección 11px por encima de la pantalla. */ /* Apaisado de teléfono: el titular ya está atado al alto y la composición llegaba al canto inferior. Dos cosas se resuelven aquí con una sola fórmula: 1. El aire que gana la bajada (+8px) no salía de ninguna parte, porque a 740x360 el bloque acababa a 7px del borde. 2. Por debajo de ~350px de alto las acciones se salían de la pantalla: 18px a 320 y 5px a 340, en CUALQUIER ancho. El titular de cuatro líneas más el bloque de meta no caben, y el botón principal quedaba recortado. El techo del cuerpo pasa de un valor fijo (9.4svh) a una recta que vale lo mismo a 430px de alto —identidad, ahí no cambia nada— y va cediendo cuerpo según baja la pantalla: 40px a 430, 29 a 360, 23 a 320. El titular encoge donde la pantalla no da, en vez de desbordarse. Sin el guardia de ancho: el desborde no dependía del ancho, y por debajo de 600 la rama de `home-responsive` se quedaba sin esta compensación. */ @media (orientation: landscape) and (max-height: 430px) { .page-home .hero, .page-home .hero > .container { --home-copy-size: min(clamp(1.5rem, 7.9vw, 5.6rem), calc(15.82svh - 27.6px)); --home-sub-gap: clamp(16px, calc(2.4svh + 8px), 48px); --home-cta-gap: clamp(38px, calc(9svh + 8px), 208px); } /* Por debajo de 600 los botones seguían a 46px y eran los que se salían. */ .page-home .hero .hero-ctas .btn { min-height: 42px !important; } } @media (max-height: 400px) and (min-width: 600px) { .page-home .home-location { padding-top: 16px !important; } .page-home .home-location .info-item h3 { font-size: 0.54rem !important; } .page-home .home-location .info-item p, .page-home .home-location .info-item a { font-size: 0.66rem !important; line-height: 1.16 !important; } } /* -------------------------------------------------------------------------- 12. Carrito con productos en apaisado de teléfono El pie del carrito (total, botón de pedido, vaciar y nota legal) mide 237px fijos. En pantalla completa eso es el 30% de un cajón de 792px y a la lista le quedan 466. Sobre 390 de alto el cajón mide 343, el pie sigue midiendo 237 y a la lista le quedaban **21px**: el carrito se abría con el total y el botón, pero sin ningún producto a la vista. El cajón pasa a ocupar la pantalla completa (en apaisado no hay sitio para dejarlo por debajo de la cabecera, y además la píldora de navegación se le pintaba encima), y cabecera y pie se comprimen hasta devolver a la lista el ~60% del alto que tiene en la referencia ancha. -------------------------------------------------------------------------- */ @media (orientation: landscape) and (max-height: 500px) { .cart-drawer { top: 0 !important; height: 100svh !important; max-height: 100svh !important; z-index: 10040 !important; } .cart-head { padding: 10px 18px !important; } .cart-items { padding-block: 6px !important; } .cart-foot { padding: 10px 18px 12px !important; gap: 8px !important; } .cart-note { font-size: 0.62rem !important; line-height: 1.25 !important; } } /* El rótulo "Categorías · desliza para explorar →" se mostraba en todos los formatos, pero el carril de categorías sólo se desliza por debajo de 560px: por encima las categorías se reparten en dos filas y la instrucción era falsa. Se muestra sólo donde el gesto existe. */ @media (min-width: 561px) { .catalog-rail-hint { display: none !important; } } /* -------------------------------------------------------------------------- 13. Remates de la capa de pantallas bajas Dos cosas que la retícula de dos columnas y el abanico todavía no resolvían con 375–430px de alto. -------------------------------------------------------------------------- */ /* a) Las acciones del producto destacado. A 932x430 la columna izquierda mide 354px y los dos botones piden 381: se partían en dos filas, la sección crecía a 470px sobre un viewport de 430 y "Ver ficha" quedaba cortada. Con el relleno atado al ancho caben en una fila, como en pantalla completa. */ @media (orientation: landscape) and (max-height: 500px) { .page-home .feature-hero .hero-ctas { flex-wrap: nowrap !important; gap: 10px !important; } .page-home .feature-hero .hero-ctas .btn { flex: 0 1 auto !important; min-width: 0 !important; padding-inline: clamp(10px, 1.6vw, 22px) !important; white-space: nowrap !important; } } /* b) El abanico de la comunidad. Las fichas son más altas que la caja del abanico y su escalonado vertical (`--fan-y`) va en píxeles fijos pensados para una caja de 400px: sobre una de 154 las empujaba por encima del titular y por debajo del borde de la escena. Ficha y escalonado pasan a `svh` conservando las proporciones de la referencia ancha (19% / 11% / 4.5% del alto del abanico). */ @media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) { .page-home .community-section .social-fan .deck-card { width: min(clamp(128px, 36vw, 188px), 21svh) !important; height: min(clamp(195px, 54vw, 285px), 32svh) !important; } .page-home .community-section .social-fan .deck-card:nth-child(1), .page-home .community-section .social-fan .deck-card:nth-child(7) { --fan-y: 7.8svh; } .page-home .community-section .social-fan .deck-card:nth-child(2), .page-home .community-section .social-fan .deck-card:nth-child(6) { --fan-y: 4.6svh; } .page-home .community-section .social-fan .deck-card:nth-child(3), .page-home .community-section .social-fan .deck-card:nth-child(5) { --fan-y: 1.85svh; } .page-home .community-section .social-fan .deck-card:nth-child(4) { --fan-y: 0; } } /* En teléfonos muy estrechos y bajos (por ejemplo 320 × 568), el control flotante coincidía con la segunda acción del hero. Se conserva un objetivo táctil de 44 px y se apoya en el borde inferior para liberar el CTA. */ @media (orientation: portrait) and (max-width: 340px) and (max-height: 650px) { .wa-float { right: 4px !important; bottom: 0 !important; width: 44px !important; min-width: 44px !important; height: 44px !important; } .wa-float::before { width: 23px !important; height: 23px !important; } } /* ========================================================================== AIRE VERTICAL DE LOS TITULARES DISPLAY Bloque único y final —esta hoja carga la última— para no seguir sumando `!important` repartidos. Sobre `.sec-title` había ya nueve declaraciones de `line-height` compitiendo (0.82 a 0.98) y la que ganaba en móvil, 0.88, dejaba las dos líneas pegadas. Las medidas salen de analizar los píxeles de la captura, no del ojo: con la tipografía display la tinta de las mayúsculas ocupa 0.87em y las colas de Q, J y coma bajan otros 0.09em, así que por debajo de 0.96 el solape es aritmético. A eso se suman las tildes, que se pintan por encima de la caja de línea. Los valores de aquí dejan entre 4 y 8 px de aire real. No es sólo cosa de móvil: a 1440 px "EXPLORA POR CATEGORÍA" y el nombre del modelo destacado también salían fundidos, porque las reglas que mandaban no llevaban media query. Por eso el bloque no está dentro de una. ========================================================================== */ /* `:not(.rh-has-diacritic)` deja fuera los rótulos con tilde: llevan su propia regla justo debajo, con más aire. */ html.lando-anim .sec-title:not(.rh-has-diacritic), html.lando-anim [data-lando-horizontal] .sec-title:not(.rh-has-diacritic), html.lando-anim .page-home [data-lando-horizontal] .sec-title:not(.rh-has-diacritic), html.lando-anim .page-home .editorial-garage .sec-title:not(.rh-has-diacritic), html.lando-anim .page-home .home-showcase .sec-title:not(.rh-has-diacritic), .sec-title:not(.rh-has-diacritic), .community-section .sec-title:not(.rh-has-diacritic) { line-height: 1.06 !important; } html.lando-anim .page-home .feature-name, .page-home .feature-name, .feature-name { line-height: 1.02 !important; } /* El titular de portada no maqueta sus líneas en el propio h1: cada línea es un `span.w` en bloque, y era ese span —no el h1— quien llevaba el 0.9. */ html.lando-anim .page-home .statement, .page-home .statement, .statement, html.lando-anim .page-home .statement .w, .page-home .statement .w, .statement .w, .page-home .statement .w-ink, .page-home .statement .w-volt { line-height: 1.02 !important; } html.lando-anim .page-hero h1, .page-hero h1, h1[data-reveal-lines] { line-height: 1.04 !important; } /* El manifiesto lleva las tildes reales (no pasa por el troceado que las separa), así que la Í de "EQUÍPALO" sube 1.11em sobre la línea base y se metía dentro de "MODELO IDEAL.". */ .ln-manifesto-copy, .ln-manifesto-copy > span { line-height: 1.12 !important; } /* ========================================================================== MÓVIL: NADA SE VE DE UNO EN UNO El catálogo servía sus 51 productos en una sola columna de 362 × 528 px: unos 27.000 px de scroll para recorrerlo entero. Los carriles horizontales ("Explora por categoría", "Modelos destacados", los pasos de Nosotros y de Servicio técnico) tenían la ficha al 66vw, así que sólo asomaba la siguiente, y las tarjetas de Servicio técnico iban una por fila. Queda fuera `.info-list`: son las filas de dirección, teléfonos y horarios. Ahí una por línea es lo correcto, no un defecto. ========================================================================== */ @media (max-width: 899px) { /* --- Catálogo: tres por fila ---------------------------------------- */ .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } /* La tarjeta tiene que caber en ~114px, así que todo encoge de forma proporcional: el aire de 17-20px era la mitad del ancho disponible. */ .prod-grid .prod-card { border-radius: 4px 12px 4px 12px !important; } /* La foto llevaba `width` fijo del ancho útil MÁS 7px de margen a cada lado, así que se salía 14px y `overflow:hidden` se la comía por la derecha. Con `width:auto` la estira el propio flex de la tarjeta, ya descontando los márgenes. (El mismo recorte pasa en escritorio, fuera de este bloque.) */ .prod-grid .prod-media { width: auto !important; margin: 5px 5px 0 !important; padding: 5px !important; } .prod-grid .prod-body { padding: 8px 7px 9px !important; gap: 3px !important; } .prod-grid .prod-cat { font-size: 8px !important; letter-spacing: 0.06em !important; } .prod-grid .prod-name { font-size: 10px !important; line-height: 1.22 !important; } /* Tres líneas y puntos suspensivos. Con dos se cortaban casi todos los nombres ("Land Rover Camel…"); con el tope, un nombre largo estiraría su tarjeta y descuadraría la altura de toda la fila. */ .prod-grid .prod-name button { display: -webkit-box !important; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; text-align: left !important; /* "Convergence", "RidgeRunner" o "Combustible" no caben enteras en 101px y se salían de la tarjeta en lugar de partirse. */ overflow-wrap: anywhere !important; } /* Precio y "Agregar" ya no caben lado a lado: pasan a apilarse. */ .prod-grid .prod-foot { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; padding-top: 7px !important; } .prod-grid .prod-price { font-size: 15px !important; line-height: 1.1 !important; } .prod-grid .prod-price small { font-size: 8px !important; } /* 40px de alto: la tarjeta es estrecha, pero el objetivo táctil no se toca. */ .prod-grid .add-btn { justify-content: center !important; min-height: 40px !important; padding: 8px 4px !important; gap: 4px !important; font-size: 9.5px !important; letter-spacing: 0.02em !important; border-radius: 8px !important; } .prod-grid .add-btn svg { width: 12px !important; height: 12px !important; } .prod-grid .prod-tag { padding: 3px 6px !important; font-size: 7.5px !important; } /* --- Carriles horizontales: dos fichas a la vista -------------------- */ /* 44vw deja ver dos enteras y el arranque de la tercera, que es lo que cuenta que la fila sigue. Con 66vw sólo cabía una. */ html.lando-anim [data-lando-horizontal] { --rh-card-w: min(clamp(300px, 26vw, 380px), 44vw) !important; } /* Con la ficha a 44vw, el pie de "Modelos destacados" ya no puede llevar precio y botón en fila: sumaban 155px dentro de 132px y "AGREGAR" se salía por la derecha en las cinco fichas. Mismo apilado que el catálogo. */ html.lando-anim [data-lando-htrack] .tile-foot { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } html.lando-anim [data-lando-htrack] .add-btn { justify-content: center !important; min-height: 40px !important; padding: 8px 6px !important; font-size: 10px !important; } html.lando-anim [data-lando-htrack] .tile-name { font-size: 13px !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; } html.lando-anim [data-lando-htrack] .tile-cat { font-size: 9px !important; } html.lando-anim [data-lando-htrack] .tile-price { font-size: 17px !important; } html.lando-anim [data-lando-htrack] .tile-tag { padding: 4px 8px !important; font-size: 8px !important; } /* --- Servicio técnico: dos tarjetas por fila ------------------------- */ .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================================== MÓVIL: DATOS DE TIENDA EN REJILLA Y OBJETIVOS TÁCTILES Segunda pasada sobre la versión de celular. `.info-list` era lo último que quedaba en una sola columna: seis tarjetas a lo ancho completo, 605px de alto en Contacto y 307px en la portada. Pasan a dos por fila con el icono encima del texto, que es lo que cabe con dignidad en 160px; a tres, la dirección se parte en ocho líneas y deja de leerse. De paso, los enlaces que se tocan con el pulgar: los del pie medían 19px de alto y los de teléfono y email 14px. Ahora rondan los 40px. ========================================================================== */ @media (max-width: 899px) { .info-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } /* El icono pasa de ir al lado (comía 34px de los 160 disponibles) a ir encima, así el texto dispone del ancho entero de la tarjeta. */ /* `stretch` y no `flex-start`: con `flex-start` el bloque de texto se dimensiona a su contenido (fit-content) y en Contacto, que tiene la ficha más estrecha, se salía hasta 75px por la derecha. El icono recupera su alineación con `align-self`. */ .info-item { flex-direction: column !important; align-items: stretch !important; gap: 3px !important; padding: 9px 10px 10px !important; } .info-item > div { min-width: 0 !important; } .info-item > svg { align-self: flex-start !important; width: 17px !important; height: 17px !important; } .info-item h3 { font-size: 9px !important; letter-spacing: 0.07em !important; } .info-item p { font-size: 11.5px !important; line-height: 1.3 !important; /* "racinghobbiesquito@gmail.com" no cabe entero en 157px y se salía. */ overflow-wrap: anywhere !important; } /* En Contacto, los cuatro primeros valores son enlaces y conservan el tamaño móvil de `.info-item a` (0.95rem). Los dos últimos son texto plano y heredaban los 11.5px del párrafo, por eso se veían más pequeños. Se igualan al valor visible del resto sin tocar la composición de portada. */ .page-contact .info-list > .info-item:nth-last-child(-n + 2) p { font-size: 0.95rem !important; } /* El enlace ocupa toda la caja: tocar un teléfono o un email deja de ser una diana de 14px de alto. El `min-height` sólo engorda los valores de una línea; en la dirección y los horarios el propio texto ya da de sobra. */ .info-item p a { display: inline-block !important; min-height: 30px !important; padding: 6px 0 !important; /* Sin esto el enlace hereda el 1.55 del cuerpo y la dirección se estira a cinco líneas muy separadas dentro de una ficha estrecha. */ line-height: 1.3 !important; } /* `inline-block` y no `block`: en TELÉFONOS hay dos enlaces con una barra suelta entre medias, y en bloque la barra se iba a su propia línea. Sólo se estira a toda la caja cuando el enlace es el único contenido. */ .info-item p > a:only-child { display: block !important; } /* La píldora de estado no cabía en una tarjeta de media anchura. */ /* La píldora de estado es `inline-flex` y se quedaba en sus 184px de ancho natural dentro de una ficha de 133px. `max-width` + `min-width:0` la obligan a plegarse al ancho real disponible. */ .info-item .store-status { max-width: 100% !important; min-width: 0 !important; margin-top: 4px !important; padding: 5px 8px !important; font-size: 8.5px !important; line-height: 1.25 !important; white-space: normal !important; text-align: left !important; } /* --- Pie: enlaces tocables ------------------------------------------- */ .footer-col ul { gap: 2px !important; } .footer-col li a { display: block !important; min-height: 38px !important; padding: 10px 0 !important; } } /* ========================================================================== MÓVIL: BARRA DE FILTROS Y REMATES La barra del catálogo apilaba tres controles a lo ancho completo (buscador, marca y orden): ~200px de alto antes de ver un solo producto. Los dos desplegables caben de sobra en media anchura cada uno. ========================================================================== */ @media (max-width: 899px) { .toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: stretch !important; } /* El buscador sí ocupa la fila entera: es el control principal y con media anchura el placeholder se cortaba. */ .toolbar .search-wrap { grid-column: 1 / -1 !important; } .toolbar .sort-select { min-width: 0 !important; padding-inline: 12px !important; font-size: 12px !important; } /* Los iconos sociales del pie medían 26px de ancho: poco para el pulgar. */ .social-links a, .footer-social a { min-width: 40px !important; justify-content: center !important; } /* 7.5px era ilegible incluso para una etiqueta. */ .prod-grid .prod-tag { font-size: 8.5px !important; } } /* ========================================================================== MÓVIL: LA FICHA DE PRODUCTO CABE EN PANTALLA Con la foto a 350x350 —el 42% del alto del modal— el precio y el botón de "Agregar" quedaban por debajo del borde: había que desplazar para comprar. Con la foto a 200px el contenido entra entero en una pantalla de 844px, y cuando la descripción es larga el desplazamiento ya funciona (el atributo `data-lenis-prevent` del modal, en main.js). ========================================================================== */ @media (max-width: 899px) { .modal-media { min-height: 0 !important; height: 200px !important; padding: 10px 16px !important; } /* La imagen iba a `width:100%`, así que con proporción cuadrada arrastraba el alto del contenedor. Ahora manda el alto y el ancho se adapta. */ .modal-media img { width: auto !important; max-width: 100% !important; height: 100% !important; object-fit: contain !important; } /* Al llegar al final del modal, el gesto dejaba de encadenarse al fondo. */ .modal, .cart-drawer { overscroll-behavior: contain !important; } } /* ========================================================================== MÓVIL: ALTURAS PROPORCIONALES AL CONTENIDO Medidas las secciones de las ocho páginas a 390x844, dos vicios opuestos: escenas que pedían más de una pantalla de scroll para pasar, y secciones a pantalla completa con la mitad vacía. Se corrigen las tres causas. ========================================================================== */ @media (max-width: 899px) { /* --- Ritmo uniforme: una pantalla por sección ------------------------ Estas cinco secciones se quedaban entre el 64% y el 76% de la pantalla, así que al pasarlas quedaba media sección visible y la siguiente asomando: ni una cosa ni la otra. Pasan a ocupar una pantalla exacta. Lo que hace que una pantalla llena NO se sienta vacía es dónde cae el contenido. Ya son `flex` centradas, así que sólo hay que compensar la cabecera flotante: con relleno simétrico el bloque se centraba respecto a la caja entera y quedaba alto, medio metido bajo el logo. Con 150 arriba y 46 abajo el centro óptico cae en 474px, casi exactamente el medio del área visible por debajo de la cabecera (481px). Los selectores van tan cargados por necesidad, no por gusto: el relleno de 92px lo fija `body:not(.page-home) main > section:not(.page-hero)`, que suma dos clases y tres elementos. Un `main > .service-cta-section` pierde y el contenido se quedaba 50px alto dentro de la pantalla. */ body:not(.page-home) .page-hero, html body main > section.race-sector.community-section, html body main > section.race-sector.service-cta-section, html body main > section.race-sector.about-vision-section, html body main > section.race-sector.pit-band { /* SUELO, no objetivo. Forzar 100svh dejaba estas secciones al 39-60% de llenado: pantalla entera con el contenido encogido en medio, que es justo lo que se ve mal. Su contenido mide 330-516px, así que ninguna cantidad de relleno la llena; lo que sí funciona es que la sección mida lo que su contenido pide. Con este suelo ninguna queda achaparrada y todas suben al 68-75% de llenado. */ min-height: 62svh !important; /* 118px libran el logo (que acaba en 62px) con aire de sobra. */ padding-top: 118px !important; padding-bottom: 52px !important; } /* Dar la pantalla entera no basta: el bloque de contenido mide 435-455px, así que sólo con relleno quedaban ~200px muertos arriba y otros tantos abajo. Aquí el contenedor toma una altura mínima y REPARTE sus bloques dentro, de modo que la sección se llena con contenido y no con aire. */ html body main > section.race-sector.service-cta-section > .container, html body main > section.race-sector.about-vision-section > .container, html body main > section.race-sector.pit-band > .container { display: flex !important; flex-direction: column !important; justify-content: space-evenly !important; /* Sin `min-height`: forzarlo estiraba la sección a 795px para un contenido de 400-450, que es el mismo vicio que se está corrigiendo arriba. El reparto se conserva para cuando la sección sí es alta. */ } /* El manifiesto sí es escena fijada: su alto ES el recorrido del scroll. Pero 220svh obligaba a 2,2 pantallas para cuatro frases, que es justo la sensación de "esta sección no se acaba nunca". */ .ln-manifesto { min-height: 150svh !important; } } /* ========================================================================== SIN VELO BAJO LA CABECERA Aquí hubo un degradado negro sobre `.site-header::after` para que el texto no se mezclara con el logo al pasar por debajo. Se retira: medido pixel a pixel, con el velo puesto la franja superior salía rgb(35,105,36) —verde— y sin él rgb(21,21,21) —negro neutro—. Un elemento `fixed` con `z-index:-1` dentro de la cabecera cambia el compositing de las escenas fijadas que hay debajo y destapaba ese verde. El logo y los botones ya tienen fondo propio y sólido, así que se leen sin necesidad de velo. ========================================================================== */ /* ========================================================================== LA BARRA DE PROGRESO SÓLO EXISTE MIENTRAS SU CARRIL ESTÁ ACTIVO `.rh-hbar` se posiciona contra el `.container` del carril, que mide casi dos pantallas. Al soltarse el pin la barra seguía ahí, barriendo el viewport sola: una raya verde de 2px bajo el logo, sin fichas ni título alrededor. El JS marca la sección con `rh-rail-live` mientras el carril está activo. ========================================================================== */ html.lando-anim .rh-hbar { opacity: 0; transition: opacity 0.28s ease; } html.lando-anim .rh-rail-live .rh-hbar { opacity: 1; } /* Sin animación no hay pin ni barra que seguir: se queda visible como antes. */ @media (prefers-reduced-motion: reduce) { html.lando-anim .rh-hbar { opacity: 1; } } /* ========================================================================== FUERA EL VELO VERDE Tres capas distintas teñían de verde todo lo que hay debajo. Medido sobre los píxeles (desviación del canal verde respecto a la media de rojo y azul): fotos de comunidad +47 `hue-rotate(62deg)` sobre la imagen foto del taller +19 la foto va en `multiply` y absorbe el fondo pasos del taller +18 capa verde en `multiply` sobre la miniatura producto -1 limpio, y así se queda La capa de fondo `.race-atmosphere` es la que alimenta las dos primeras: rayas diagonales verdes y un halo radial al 68% de opacidad, animados en bucle sobre TODAS las secciones. Se retira entera: las secciones ya tienen su propia fotografía y su propio negro, que es lo que sostiene el diseño. ========================================================================== */ .race-atmosphere, .race-atmosphere::before, .race-atmosphere::after { display: none !important; } /* `multiply` es correcto para un producto recortado sobre blanco —funde su fondo con el de la ficha— pero sobre una fotografía editorial la convierte en el color de lo que tenga detrás. Se restringe a los productos. */ .collage-item img, html.lando-anim [data-lando-htrack] .collage-item img, .step-media img, .static-step-card .step-media img, .about-story-section img, .feature-visual img { mix-blend-mode: normal !important; } /* El `hue-rotate(62deg)` dejaba las fotos de comunidad en verde fosforito. Se conserva la desaturación, que sí es del lenguaje del sitio. */ body .community-section .social-fan .deck-card img { filter: grayscale(0.34) contrast(1.05) brightness(0.94) !important; } /* De la miniatura de los pasos se va la capa verde; queda el oscurecido neutro, que es lo que da contraste al texto de encima. */ body .static-step-card .step-media::after { background: linear-gradient( 135deg, rgba(4, 10, 8, 0.34), transparent 48%, rgba(3, 8, 5, 0.24) ) !important; } /* ========================================================================== COMUNIDAD: LOS BOTONES DEJAN DE PISAR EL ABANICO DE TARJETAS Las tarjetas del abanico van rotadas, así que ocupan 246px de alto reales dentro de una caja que sólo declara 156: el navegador no reserva el espacio que la transformación necesita. Encima, `.social-links` subía con un margen negativo de -27px. Resultado: Instagram y Facebook quedaban encima de dos tarjetas cada uno. ========================================================================== */ @media (max-width: 899px) { /* Las tarjetas son `position: absolute` dentro del abanico, así que crecer su caja las arrastra a ellas también: no sirve de nada. Lo que sí separa es dar a los botones el hueco que las tarjetas invaden (85px medidos) más aire. Y la sección queda fuera del reparto `space-evenly` de arriba, porque ese reparto se comía cualquier margen. */ .community-section .social-links { position: relative; z-index: 3; margin-top: 104px !important; } } /* ========================================================================== CABECERA QUE SE RETIRA AL BAJAR El logo y los botones son `fixed` y el contenido les pasaba por detrás: 86 posiciones de scroll con texto tapado en las siete páginas. Se retiran al bajar y vuelven al subir, que resuelve el choque sin poner nada encima del contenido y devuelve la franja superior mientras se lee. ========================================================================== */ @media (max-width: 899px) { .site-header .logo, .header-actions { transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease !important; will-change: transform; } /* Gana a `.site-header .logo { transform: none !important }` de community-fix.css sumando la clase de la raíz. */ html.rh-cabecera-oculta .site-header .logo, html.rh-cabecera-oculta .header-actions { transform: translateY(-160%) !important; opacity: 0 !important; pointer-events: none !important; } } /* Sin movimiento la cabecera no se esconde: quien lo pide no quiere sorpresas. */ @media (prefers-reduced-motion: reduce) { html.rh-cabecera-oculta .site-header .logo, html.rh-cabecera-oculta .header-actions { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } } /* ========================================================================== OBJETIVOS TÁCTILES QUE FALTABAN Recorridas las siete páginas midiendo cada enlace y botón: quedaban los legales del pie a 54x20, el "Agregar" de las fichas del carril a 117x34 y los teléfonos a 79x30. Los nombres de producto dentro de una tarjeta se dejan como están: la tarjeta entera ya es el objetivo. ========================================================================== */ @media (max-width: 899px) { .footer-legal a { display: inline-block !important; min-height: 38px !important; padding-block: 9px !important; } html.lando-anim [data-lando-htrack] .add-btn, .vitrina-grid .tile .add-btn { min-height: 42px !important; } .info-item p a { min-height: 38px !important; padding: 10px 0 !important; } } /* ========================================================================== MÓVIL: RITMO DE PANTALLA ÚNICO Tres medidas, tres problemas distintos, todos del mismo origen: en móvil la composición se dimensiona por ANCHO (vw) mientras la escena se dimensiona por ALTO (svh), así que nunca encajan. · Ficha del carril: 172 x 275 dentro de un carril de 570px de alto. 296px muertos, el 52% del carril. En escritorio sobran 15. · La barra de progreso del carril queda como una raya verde suelta. · Las secciones miden 734 / 844 / 854 px según su contenido, así que al hacer scroll siempre ves la cola de una y la cabeza de la siguiente. ========================================================================== */ /* --- 1. La ficha llena el carril, como en la referencia ancha ----------- SÓLO EN VERTICAL. En apaisado manda el bloque de pantallas bajas, que ya dimensiona la ficha por alto. Sin acotar, el `36svh` de aquí dejaba las fichas de categorías en 140px sobre un teléfono girado: el carril bajaba a 812px de ancho, el recorrido a 52px, y `main.js` desactiva cualquier riel por debajo de 300px — la sección perdía el anclaje y crecía a 515px sobre una pantalla de 390. */ @media (max-width: 899px) and (orientation: portrait) { /* La vitrina gana con el estirado: su ficha es foto + datos + botón, y el reparto interno absorbe el alto. */ html.lando-anim .home-showcase [data-lando-htrack] > .rh-hcard { width: min(62vw, 30svh) !important; height: 100% !important; max-height: none !important; } /* Categorías no: su foto es CUADRADA con `object-fit: contain`, así que estirar la ficha sólo añadía 139px de negro arriba y otros tantos abajo. Lo que agranda la foto aquí es el ANCHO: la ficha crece a lo ancho y conserva su alto natural (foto + rótulo), centrada en el carril para que el aire sobrante quede repartido y no como un hueco al pie. Probado y descartado: repartirlas en dos filas llena mejor el alto, pero deja el carril en 604px de ancho y cae por el mismo umbral de 300px. */ html.lando-anim .editorial-garage [data-lando-htrack] > .rh-hcard { width: min(76vw, 36svh) !important; height: auto !important; max-height: 100% !important; } html.lando-anim .editorial-garage [data-lando-htrack] { align-items: center !important; } } @media (max-width: 899px) { /* --- 2. Fuera la barra de progreso ----------------------------------- En una pantalla estrecha el propio desplazamiento de las fichas ya dice dónde estás; la barra sólo aportaba una raya verde de 2px a todo lo ancho, que es lo que se veía suelto bajo la cabecera. */ html.lando-anim .rh-hbar { display: none !important; } } /* --- 3. La filigrana del producto vuelve a ser filigrana --------------- En pantalla completa la palabra fantasma mide 345px contra los 90 del titular: 3.8 veces más grande, recortada por el borde, y se lee como textura de fondo. En móvil medía 117 contra 61 —menos del doble— y con el mismo recorte central: no parecía una marca de agua sino el titular duplicado y desplazado. Se le devuelve la proporción y el anclaje al borde izquierdo de la referencia ancha. */ @media (max-width: 899px) and (orientation: portrait) { .page-home .feature-hero .ghost { top: 20% !important; left: -0.03em !important; font-size: 58vw !important; } } /* --- 4. "Estamos en Quito" cabe en una pantalla ------------------------ Medía 854px sobre un viewport de 844: los últimos 10px de la tarjeta del mapa quedaban siempre fuera, y con ellos el borde inferior redondeado. */ /* Sólo en vertical: en apaisado manda el bloque de pantallas bajas, que la comprime bastante más. Sin acotar, esta regla lo pisaba por ir después en el archivo y la sección crecía a 430px sobre un viewport de 390. */ @media (max-width: 899px) and (orientation: portrait) { .page-home .home-location { /* 7.8svh daban 66px y la sección medía 856 sobre 844: los enlaces de la lista pasaron a 38px de alto mínimo por objetivo táctil y sumaron 12px que antes no estaban. El respiro superior los devuelve. */ padding-top: clamp(46px, 6.3svh, 80px) !important; padding-bottom: clamp(12px, 1.8svh, 34px) !important; } } /* --- 5. La "barra verde" era la fila de botones "Agregar" -------------- Medido: en pantalla completa el pie de la ficha de vitrina es una FILA (precio a la izquierda, botón a la derecha) y el botón ocupa el 34% de la ficha — el 9% de la pantalla. En móvil pasaba a COLUMNA con `stretch`, así que el botón se estiraba al 85% de la ficha y al 53% de la pantalla: dos fichas contiguas y su verde se junta en una banda de 40px a todo lo ancho que barre la pantalla al hacer scroll. Eso es la barra verde. La ficha de vitrina mide 242px, de sobra para la fila de la referencia ancha. (La del catálogo sí se apila: allí la ficha mide 114px y no cabe.) */ @media (max-width: 899px) { /* Especificidad por encima de `html.lando-anim [data-lando-htrack] .tile-foot`, que fija la columna para el carril. */ html.lando-anim [data-lando-htrack] .vitrina-grid .tile .tile-foot, html.lando-anim .home-showcase [data-lando-htrack] .tile-foot { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html.lando-anim .home-showcase [data-lando-htrack] .tile-foot .add-btn { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; padding-inline: clamp(10px, 3.4vw, 18px) !important; } html.lando-anim .home-showcase [data-lando-htrack] .tile-foot .prod-price, html.lando-anim .home-showcase [data-lando-htrack] .tile-foot .tile-price { flex: 0 0 auto !important; width: auto !important; } } /* --- 6. El mismo hueco en los carriles de las páginas internas --------- Medido en Nosotros y Servicio técnico: ficha de 172 x 275 dentro de un carril de 579px de alto — 304px muertos, el 52%. En pantalla completa la ficha mide 389 x 540. La ficha de proceso es foto + título + texto, así que reparte bien el alto extra, igual que la de vitrina. El tope de alto no es decorativo. La fila se estira a la banda que le deja la escena fijada, y con `max-height: none` la ficha se iba a 622px sobre un contenido de 392: 230px de agujero bajo el último renglón, el 37% de la ficha. En pantalla completa el hueco es de 168 sobre 540, el 31%, y ahí el ancho da para cuatro renglones en vez de seis. Con el 60% de la pantalla la proporción vuelve a la de la referencia y la foto se queda con lo que sobre. ---------------------------------------------------------------------- */ @media (max-width: 899px) { html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card { width: clamp(200px, 62vw, 300px) !important; height: 100% !important; max-height: 60svh !important; } /* La foto es la parte elástica de la ficha: crece con el alto que sobre en vez de dejarlo en blanco al pie, y cede el suyo cuando el texto no cabe. Los tres números dicen eso mismo: la base es el alto que le gustaría tener, `1 1` la autoriza a crecer y a encoger, y `min-height: 0` es lo que de verdad la deja bajar de esa base —sin eso, en un teléfono de 568px el párrafo se salía 115px por debajo del borde y `overflow: hidden` se lo comía. El tope del 50% es por la foto: es un recorte cuadrado y estirarlo a formato vertical le corta el coche por las ruedas. */ html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card .step-media { flex: 1 1 clamp(150px, 46vw, 220px) !important; height: auto !important; min-height: 0 !important; max-height: 50% !important; } } /* --- 6 bis. La misma ficha, tumbada, cuando el alto es el que falta ------- En apaisado la escena mide 390px de alto y a la ficha le quedan 210: con la foto encima del texto no caben las dos cosas —la foto se quedaba en una banda de 44px y el último renglón se salía igual—. Lo que sobra ahí es ancho, así que la ficha se tumba: foto a la izquierda, título y texto a la derecha. Es la misma ficha con las mismas piezas, girada 90°. El reparto se hace con `grid`, no con `flex`, porque el título y el párrafo son hermanos de la foto y no van envueltos en nada: con áreas se les manda a la misma columna sin tocar el HTML. `.rh-card-num` va en absoluto, así que no ocupa celda. */ @media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) { html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card { width: min(62vw, 470px) !important; max-height: none !important; } html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card .rh-card { display: grid !important; grid-template-columns: 42% minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "media title" "media text" !important; align-content: center !important; column-gap: clamp(14px, 2.6vw, 20px) !important; padding: 0 clamp(16px, 3vw, 22px) 0 0 !important; } html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card .step-media { grid-area: media !important; max-height: none !important; height: 100% !important; margin: 0 !important; border-bottom: 0 !important; } html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card h3 { grid-area: title !important; align-self: end !important; padding-top: clamp(14px, 4svh, 22px) !important; font-size: clamp(14px, 4.4svh, 16px) !important; } /* El cuerpo se mide contra el alto, no contra el ancho: en apaisado lo que escasea es el alto y una línea de más es lo que sobra. A 360px de alto baja a 13px y los cinco renglones de "Honestidad" caben en los 105 que deja el título; por encima de 422px de alto no cambia nada. */ html.lando-anim body:not(.page-home) [data-lando-htrack] > .rh-hcard.static-step-card p { grid-area: text !important; padding-bottom: clamp(14px, 4svh, 22px) !important; font-size: clamp(12.5px, 3.6svh, 15.2px) !important; line-height: 1.42 !important; } } /* --- 7. La lista de datos en apaisado, a tres columnas ----------------- A 667x375 la sección de ubicación pedía 416px sobre un viewport de 375. El bulto es `.info-list`: seis datos en dos columnas son tres filas de ~90px. A lo ancho hay sitio de sobra —tres columnas salen a 210px cada una, no a los 120 que las romperían en un teléfono vertical— y pasa a dos filas. Se ahorran 90px y la escena vuelve a caber en una pantalla. */ @media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) { .page-home .home-location .info-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* =========================================================================== TELÉFONO: CADA ENTRADA OCUPA UNA PANTALLA, Y LA OCUPA BIEN Las escenas cortas heredaban mínimos de 62–75svh y mostraban la siguiente sección antes de terminar el mensaje. Se les puso 100svh, pero eso solo resolvió la mitad: el contenedor heredaba mal el mínimo (ver más abajo) y las secciones acababan midiendo 1014px sobre 844 con el contenido apelotonado arriba. Aquí se cierran las dos cosas: la sección mide exactamente una pantalla y su contenido se reparte dentro, en vez de flotar en un hueco. Medido a 390x844 (relleno = % de la pantalla con contenido): franja de marcas 12% y un hueco de 620px -> banda de 271px al 38% comunidad, pit-band, CTA y visión: 1014px -> 844px exactos cabeceras internas 22–30% -> 33–40% ========================================================================== */ @media (max-width: 899px) and (orientation: portrait) { body:not(.page-home) .page-hero, .page-home .community-section, body:not(.page-home) .pit-band, body:not(.page-home) .service-cta-section, body:not(.page-home) .about-vision-section, .page-error .error-page { box-sizing: border-box; min-height: 100svh !important; } /* Igualamos la especificidad de las reglas antiguas de ritmo compacto; de otro modo su `min-height: 62svh !important` prevalecía en estas cuatro escenas aunque la regla nueva estuviera más abajo. */ html body main > section.race-sector.community-section, html body main > section.race-sector.pit-band, html body main > section.race-sector.service-cta-section, html body main > section.race-sector.about-vision-section { min-height: 100svh !important; } /* --- El contenedor mide contra el hueco, no contra la pantalla -------- `min-height: inherit` copiaba el valor COMPUTADO del padre —844px, ya resuelto— y el navegador se lo volvía a sumar al padding de la sección. Las cinco bandas acababan midiendo 1014px sobre una pantalla de 844: no cabía ninguna entera, y como el contenedor era más alto que su contenido éste se apelotonaba arriba dejando un agujero de hasta 620px debajo. Con `flex: 1` el contenedor ocupa exactamente el hueco que deja el padding y reparte dentro de él, así que la sección vuelve a medir una pantalla. */ .page-home .community-section, body:not(.page-home) .pit-band, body:not(.page-home) .service-cta-section, body:not(.page-home) .about-vision-section, .page-error .error-page { display: flex; flex-direction: column; align-items: stretch; } .page-home .community-section > .container, body:not(.page-home) .pit-band > .container, body:not(.page-home) .service-cta-section > .container, body:not(.page-home) .about-vision-section > .container, .page-error .error-page > .container { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; } /* Los márgenes propios de cada pieza se dejan como están. Anularlos para que repartiera sólo el contenedor se probó y se descartó: en pit-band, CTA y visión no cambiaba nada, y en comunidad empeoraba —el abanico de tarjetas se apoya en ellos porque sus fichas están posicionadas y desbordan la caja del `.deck`, así que un reparto uniforme hundía el titular 200px—. */ /* --- La franja de marcas es una banda, no una escena ------------------ Rótulo y marquesina suman 104px de contenido. Estirados a una pantalla entera daban un 12% de relleno y un hueco de 620px: el peor reparto del sitio. Vuelve a medir por su contenido y sirve de respiro entre dos escenas completas, que es lo que una franja de marcas tiene que hacer. */ .page-home .brands-strip, html body main > section.race-sector.brands-strip { min-height: 0 !important; padding-top: clamp(54px, 8.5svh, 86px) !important; padding-bottom: clamp(54px, 8.5svh, 86px) !important; } /* --- Las cabeceras de las páginas internas --------------------------- Centrar un bloque de 288px sobre un lienzo de 668 lo dejaba como una isla: en nosotros la tinta iba de 298 a 628 —330px de los 844 de pantalla— con ~290px de negro muerto encima y ~200px debajo (22% de relleno; 30% en contacto y garantía). El bloque sigue centrado, pero ahora es mucho más alto —el titular crece y reparte en más líneas— y el respiro superior baja de 118px a 100px, así que ocupa la escena en vez de flotar en ella. Repartirlo con `margin-bottom: auto` se probó y se descartó: separaba el titular del texto de entrada con un vacío de 480px, peor que la isla. */ body:not(.page-home) .page-hero { display: flex !important; flex-direction: column; align-items: stretch; padding-top: calc(var(--header-h) + 26px) !important; padding-bottom: 44px !important; } body:not(.page-home) .page-hero > .container { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; } /* El antetítulo se queda pegado a su titular; todo lo que va detrás del titular baja en bloque al pie. */ body:not(.page-home) .page-hero > .container > .kicker { margin: 0 0 14px !important; } /* El titular crece hasta donde da el ancho del teléfono, y su medida se estrecha a la vez. Las dos cosas juntas: la del sitio está en `em`, así que al agrandar la letra la medida crecía igual y el titular salía con las mismas líneas —más grandes, pero el bloque no ganaba alto; contacto incluso perdía una línea—. Con 4.8em el titular reparte en más líneas y ocupa la escena, como el `statement` de la portada. La medida va en `em` y no en `ch` a propósito: `ch` cambia con la fuente que acabe resolviéndose y movería los cortes. El suelo de la medida lo marca la palabra más larga de los titulares: «EXPERIENCIAS» ocupa 4.644em. Con 4.6em se quedaba 2.6px corta y, como aquí rige `overflow-wrap: anywhere`, el navegador no la dejaba desbordar: la partía y mandaba la «S» sola a la línea siguiente. De 4.7em para abajo vuelve a romperse, así que 4.8em deja un dedo de holgura. */ body:not(.page-home) .page-hero > .container > h1 { font-size: clamp(48px, 16vw, 66px) !important; line-height: 1.03 !important; margin: 0 !important; max-width: 4.8em !important; } body:not(.page-home) .page-hero > .container > h1 ~ * { margin-top: clamp(18px, 3svh, 28px) !important; } } /* =========================================================================== TELÉFONO EN HORIZONTAL: LA CABECERA Y EL 404 CABEN EN LA PANTALLA Aquí se rompe por ALTO, no por ancho. Con la escala de vertical, la cabecera de una página interna medía 526px sobre un viewport de 375 y el 404 llegaba a 607: se entraba a la página sin poder leer el titular entero. La letra baja a escala de apaisado y los respiros se ajustan al alto disponible. ========================================================================== */ @media (orientation: landscape) and (max-height: 500px) { body:not(.page-home) .page-hero { padding-top: calc(var(--header-h) + 10px) !important; padding-bottom: 18px !important; } body:not(.page-home) .page-hero > .container > h1 { font-size: clamp(26px, 4.8vw, 34px) !important; line-height: 1.06 !important; margin: 6px 0 10px !important; } body:not(.page-home) .page-hero > .container > p:not(.kicker) { font-size: 14px !important; line-height: 1.45 !important; margin-top: 0 !important; } /* El "404" ocupaba 156px de alto con 173px de cuerpo: en apaisado es la pieza que desborda la pantalla ella sola. */ .page-error .error-page { padding-top: calc(var(--header-h) + 8px) !important; padding-bottom: 18px !important; } .page-error .error-code { font-size: clamp(60px, 11vw, 92px) !important; line-height: 1 !important; margin: 2px 0 6px !important; } .page-error .error-title { font-size: clamp(18px, 3.2vw, 24px) !important; margin: 0 0 6px !important; } .page-error .error-sub { font-size: 14px !important; line-height: 1.45 !important; margin: 0 0 12px !important; } } /* =========================================================================== PANTALLAS BAJAS EN VERTICAL: COMUNIDAD RECOGE SUS MÁRGENES Los botones de redes traen `margin-top: 104px` y `margin-bottom: 70px` para dar aire al abanico, cuyas fichas están posicionadas y desbordan la caja del `.deck`. En una pantalla de 844 ese aire es correcto y por eso no se toca allí; en una de 667 son 174px de margen puro que sacan la sección a 725px. Se recortan sólo donde estorban, sin llegar a cero: a cero el abanico se comía los botones (probado al anular los márgenes en todas las bandas). ========================================================================== */ @media (max-width: 899px) and (orientation: portrait) and (max-height: 760px) { .page-home .community-section .social-links { margin-top: 44px !important; margin-bottom: 24px !important; } .page-home .community-section .deck { margin-bottom: 14px !important; } } /* =========================================================================== PORTADA EN TELÉFONO: PRODUCTO PROTAGONISTA SIN SOLAPES La ficha T-Maxx consumía 44svh para la foto y dejaba las acciones en el último tramo de pantalla, justo detrás del acceso flotante de WhatsApp. La imagen sigue siendo protagonista, pero el conjunto reserva ese borde y mantiene los dos botones íntegros y visibles en el primer encuadre. ========================================================================== */ @media (max-width: 599px) and (orientation: portrait) { .page-home .feature-hero { padding-top: clamp(72px, 10svh, 88px) !important; padding-bottom: clamp(82px, 11svh, 96px) !important; } .page-home .feature-inner { gap: 8px !important; justify-content: center !important; } .page-home .feature-visual { flex: 0 0 auto !important; height: min(38svh, 320px) !important; } .page-home .feature-price { margin: 4px 0 8px !important; } .page-home .feature-hero .hero-ctas { margin-top: 10px !important; } } /* ========================================================================== REPASO SECCIÓN A SECCIÓN EN MÓVIL ========================================================================== */ /* --- Manifiesto: que la entrada cinética no toque los bordes ----------- Cada frase entra desplazada un ±6% de su propio ancho. En pantalla ancha la caja del texto tiene 100px de margen a cada lado y ese 6% (74px) cabe de sobra. En móvil la caja va al 88vw, o sea 23px de margen, y el 6% son 21: las frases llegaban a 6px y 387px de una pantalla de 390 — pegadas a los dos bordes durante toda la escena. Al 80vw el margen sube a 39 y el desplazamiento se queda a 20px del borde. */ @media (max-width: 899px) and (orientation: portrait) { .ln-manifesto-copy { width: min(1240px, 80vw) !important; } } /* --- Producto destacado: aire bajo las acciones ------------------------ Las acciones acababan en 840px de una escena de 844: 4px de margen contra los 72 que tienen en pantalla completa. Quedaban pegadas al canto. */ @media (max-width: 899px) and (orientation: portrait) { .page-home .feature-hero { padding-bottom: clamp(82px, 11svh, 96px) !important; } } /* --- Catálogo: fichas legibles, no miniaturas -------------------------- Tres columnas convertían cada producto en una tarjeta de ~114px: nombre, precio y compra quedaban demasiado comprimidos para navegación táctil. */ @media (max-width: 599px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .prod-grid .prod-media { margin: 6px 6px 0 !important; padding: 7px !important; } .prod-grid .prod-body { padding: 10px 9px 11px !important; gap: 4px !important; } .prod-grid .prod-cat, .prod-grid .prod-price small { font-size: 9px !important; } .prod-grid .prod-name { font-size: 14px !important; line-height: 1.18 !important; } .prod-grid .add-btn { min-height: 44px !important; padding: 9px 6px !important; font-size: 10px !important; } /* El acceso flotante de volver arriba caía directamente sobre los botones de compra de la columna derecha. En teléfono se evita ese obstáculo: el gesto nativo de desplazamiento mantiene la vuelta al inicio inmediata. */ .back-top { display: none !important; } /* En el formulario, WhatsApp ya es la acción final. El acceso fijo tapaba el borde del campo de mensaje mientras se escribe. */ body.page-contact .wa-float, body.page-garantia .wa-float, body.page-privacy .wa-float { display: none !important; } } /* --- Catálogo, banda "Lo conseguimos por ti": el texto se salía --------- El contenedor mide 362px en móvil, pero el titular llevaba `width: 492px` y el párrafo `max-width: 476px` —medidas heredadas de la referencia ancha—. Al ir centrados, se salían 51px por CADA lado: en pantalla se leía "O / ONSEGUIMO / OR TI" con las palabras cortadas a izquierda y derecha. */ @media (max-width: 899px) { .page-catalog .pit-band .container > *, .page-catalog .pit-band h2, .page-catalog .pit-band .sec-title, .page-catalog .pit-band p { width: auto !important; max-width: 100% !important; } /* El titular no se partía: llevaba `text-wrap: balance`, que intenta repartir las líneas y aquí dejaba "LO CONSEGUIMOS" entera en una línea de 361px dentro de una caja de 324. Con el corte normal parte donde debe, y el cuerpo se topa para que la palabra más larga ("CONSEGUIMOS", ~6em en la display) quepa en los 326px útiles. */ .page-catalog .pit-band h2, .page-catalog .pit-band .sec-title { font-size: min(9.5vw, 3.4rem) !important; text-wrap: wrap !important; overflow-wrap: break-word !important; } } /* ========================================================================== AJUSTE FINO DE LAS ESCENAS INDICADAS EN TELÉFONO ========================================================================== */ @media (max-width: 599px) and (orientation: portrait) { /* El número de sector vive en el margen superior de cada escena. En el teléfono no hay margen: a 54 px de alto empezaba justo donde empieza la tarjeta de contenido (entre 72 y 106 px según la página) y las cifras salían partidas por el borde de la tarjeta. Se sube al hueco que queda sobre ella y se ajusta al tamaño de ese hueco, así que se lee entero. La cabecera se retira al bajar, de modo que la franja queda libre. */ html body:not(.page-home) main > section:not(.page-hero)::after { top: 26px; right: 16px; font-size: clamp(1.5rem, 6.4vw, 2rem); letter-spacing: -0.04em; } /* Redes: el abanico llegaba a ocupar apenas un tercio de la escena. Se agranda su área y sus tarjetas, mientras el margen que las separa de los enlaces se reduce en la misma medida para mantenerlos independientes. */ .page-home .community-section .social-fan { --fan-card-w: clamp(120px, 35vw, 140px) !important; height: clamp(210px, 55vw, 246px) !important; } .page-home .community-section .social-fan .deck-card { width: clamp(120px, 35vw, 140px) !important; height: clamp(180px, 54vw, 216px) !important; } .page-home .community-section .social-links { margin-top: 40px !important; margin-bottom: 42px !important; } /* Ubicación: las dos acciones comparten una fila al pie de la tarjeta. El enlace permanece fuera del aviso de consentimiento, así que no desaparece al cargar el mapa. */ .page-home .home-location .map-consent { padding-bottom: 82px !important; } .page-home .home-location .map-consent .btn, .page-home .home-location .map-card .map-cta { position: absolute !important; bottom: 16px !important; width: calc(50% - 25px) !important; min-width: 0 !important; min-height: 44px !important; padding-inline: 10px !important; justify-content: center; font-size: 0.62rem !important; letter-spacing: 0.1em !important; white-space: nowrap; } .page-home .home-location .map-consent .btn { left: 16px !important; } .page-home .home-location .map-card .map-cta { right: 16px !important; left: auto !important; } /* Servicios: cuatro tarjetas caben en una escena sin perder legibilidad. La escena mide un viewport, pero puede crecer si el teléfono es corto: antes recortaba las últimas líneas de las tarjetas más largas. */ .page-service .service-catalog-section { box-sizing: border-box; height: auto !important; min-height: 100svh !important; overflow: visible; display: flex; padding: 76px 0 28px !important; } .page-service .service-catalog-section > .container { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; } .page-service .service-catalog-section .sec-head { flex: 0 0 auto; margin-bottom: 14px !important; } .page-service .service-catalog-section .sec-title { font-size: clamp(2.35rem, 11vw, 3rem) !important; line-height: 0.9 !important; } .page-service .service-catalog-section .feature-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(min-content, 1fr)) !important; gap: 12px !important; flex: 1 1 auto; min-height: 0; } .page-service .service-catalog-section .feature { min-height: 0 !important; height: auto !important; overflow: hidden; padding: 18px 16px !important; } /* Los cuatro iconos comparten caja y no se dejan aplastar por el reparto de altura de la tarjeta: así los cuatro miden lo mismo y los títulos arrancan a la misma altura en las dos columnas. */ .page-service .service-catalog-section .feature svg { flex: none !important; width: 25px !important; height: 25px !important; margin-bottom: 10px !important; } .page-service .service-catalog-section .feature h3 { font-size: 1rem !important; line-height: 1.12 !important; margin-bottom: 8px !important; } .page-service .service-catalog-section .feature p { font-size: 0.82rem !important; line-height: 1.36 !important; } /* Historia: la escena ocupa una pantalla, como el resto de la página, pero repartida — la tarjeta de texto arriba y la foto quedándose con todo el alto sobrante en lugar de una franja de 150 px, que recortaba la mesa de trabajo por la mitad. La altura es mínima, no fija: si el texto crece (tipografía grande del sistema, línea de más al traducir) la escena se estira en vez de recortar el contenido. El ritmo se mide en `svh`, no en un `@media (max-height:)`: en Safari de iPhone las consultas de alto usan el viewport grande (sin barras), así que en un teléfono corto nunca se activaba el ajuste y la tarjeta se comía la pantalla dejando la foto cortada. Con `svh` la tipografía y el aire se miden contra el alto realmente visible. */ html body.page-about main > section.about-story-section { box-sizing: border-box; display: flex; height: auto !important; min-height: 100svh !important; overflow: visible; padding: clamp(62px, 10.6svh, 84px) 0 clamp(22px, 4.6svh, 34px) !important; } .page-about .about-story-section > .container { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; height: auto; } .page-about .about-story-section .two-col { display: flex !important; flex: 1 1 auto; flex-direction: column !important; min-height: 0; height: auto; gap: clamp(10px, 2svh, 14px) !important; } .page-about .about-story-section .two-col > .reveal:first-child { flex: 0 0 auto; min-height: 0; overflow: visible; padding: clamp(14px, 2.4svh, 22px) 16px !important; } /* El rótulo lleva tilde y con 0.9 no le cabía: el acento de "CÓMO" se recortaba contra el kicker. Se usan las mismas alturas de línea que el resto de los rótulos de sección; los que llevan tilde reclaman su interlineado en el bloque canónico de `.rh-has-diacritic`. */ .page-about .about-story-section .sec-title { font-size: clamp(1.7rem, min(8.2vw, 4.3svh), 2.45rem) !important; line-height: 1.06 !important; margin-top: 6px !important; } .page-about .about-story-section .sec-sub { font-size: clamp(0.78rem, min(3.5vw, 1.95svh), 0.9rem) !important; line-height: 1.44 !important; margin-top: clamp(8px, 1.7svh, 12px) !important; } /* La foto se queda con el alto que sobra de la escena, con un suelo para que nunca vuelva a ser una franja. */ .page-about .about-story-section .static-story-visual { flex: 1 1 0 !important; height: auto !important; min-height: clamp(120px, 19svh, 190px) !important; max-width: none !important; margin: 0 !important; /* Sin desplazamiento de parallax: la escena va justa de alto y ese medio centímetro de deriva sacaba la foto del margen inferior. */ transform: none !important; } .page-about .about-story-section .static-story-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 45% !important; } /* Contacto: el formulario se hace más compacto y la ficha de la tienda se convierte en una escena completa con tarjetas que usan su espacio. */ .page-contact .contact-form-section .info-grid > .reveal:first-child { padding: 24px 18px !important; } .page-contact .contact-form-section .info-grid > .reveal:first-child .sec-title { font-size: clamp(2.45rem, 10.5vw, 3rem) !important; line-height: 0.92 !important; } .page-contact .contact-form-section .info-grid > .reveal:first-child .sec-sub { font-size: 0.9rem !important; line-height: 1.4 !important; } .page-contact .contact-form-section .info-grid > .reveal:first-child br { display: none; } .page-contact .contact-form-section .form-grid { gap: 12px !important; margin-top: 16px !important; } .page-contact .contact-form-section .form-row { gap: 10px !important; } .page-contact .contact-form-section .field label { margin-bottom: 4px !important; } .page-contact .contact-form-section .field input, .page-contact .contact-form-section .field select { min-height: 48px !important; } .page-contact .contact-form-section .field textarea { min-height: 110px !important; } .page-contact .contact-form-section .form-grid .btn { min-height: 48px !important; } .page-contact .contact-form-section .info-grid > .reveal:nth-child(2) { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .page-contact .contact-form-section .info-grid > .reveal:nth-child(2) .info-grid { flex: 1 1 auto; grid-template-rows: repeat(3, minmax(0, 1fr)); } /* En el cierre de páginas internas, el acceso fijo no puede cubrir ni los botones ni el texto final; WhatsApp continúa disponible en menú y CTAs. */ body.page-service .wa-float, body.page-about .wa-float, body.page-catalog .wa-float { display: none !important; } } /* Pie de página: en un teléfono las cuatro columnas ya no tienen espacio horizontal real. Se ordenan como bloques independientes para que las redes, los enlaces y los datos de contacto nunca compartan la misma fila. */ @media (max-width: 599px) { html .site-footer { min-height: 0 !important; padding: 64px 0 30px !important; } html .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 38px !important; margin-bottom: 38px !important; padding-top: 36px !important; } html .site-footer .footer-brand, html .site-footer .footer-col { min-width: 0 !important; } html .site-footer .footer-brand { display: grid; gap: 16px; } html .site-footer .footer-brand p, html .site-footer .footer-social { margin: 0 !important; } html .site-footer .footer-brand p { max-width: 34ch; } html .site-footer .footer-col { padding-top: 28px; border-top: 1px solid var(--ln-border); } html .site-footer .footer-col h3 { margin-bottom: 12px !important; } html .site-footer .footer-col ul { gap: 2px !important; } html .site-footer .footer-col li a { min-height: 44px !important; padding: 11px 0 !important; } html .site-footer .footer-bottom { display: grid !important; gap: 14px !important; padding-right: 0 !important; } } /* El refinamiento de la historia necesita prevalecer sobre la variante de revelado tipográfico; sólo ajusta medidas, no sus transiciones. */ @media (max-width: 599px) and (orientation: portrait) { html.lando-anim .page-about .about-story-section .two-col > .reveal:first-child { padding: clamp(14px, 2.4svh, 22px) 16px !important; } html.lando-anim .page-about .about-story-section .sec-title { font-size: clamp(1.7rem, min(8.2vw, 4.3svh), 2.45rem) !important; line-height: 1.06 !important; } html.lando-anim .page-about .about-story-section .sec-sub { font-size: clamp(0.78rem, min(3.5vw, 1.95svh), 0.9rem) !important; line-height: 1.44 !important; margin-top: clamp(8px, 1.7svh, 12px) !important; } /* Contacto: ritmo más compacto, con controles de al menos 44px para que sigan siendo cómodos y fiables al tocar. */ html.lando-anim .page-contact .contact-form-section .info-grid > .reveal:first-child { padding: 18px 16px !important; } html.lando-anim .page-contact .contact-form-section .sec-title { font-size: clamp(2.2rem, 9.2vw, 2.5rem) !important; line-height: 0.9 !important; margin-top: 10px !important; } html.lando-anim .page-contact .contact-form-section .sec-sub { font-size: 0.875rem !important; line-height: 1.38 !important; margin: 14px 0 10px !important; } html.lando-anim .page-contact .contact-form-section .form-grid, html.lando-anim .page-contact .contact-form-section .form-row { gap: 8px !important; } html.lando-anim .page-contact .contact-form-section .form-grid { margin-top: 10px !important; } html.lando-anim .page-contact .contact-form-section .field label { margin-bottom: 3px !important; } html.lando-anim .page-contact .contact-form-section .field input, html.lando-anim .page-contact .contact-form-section .field select { min-height: 44px !important; padding: 8px 12px !important; } html.lando-anim .page-contact .contact-form-section .field textarea { min-height: 88px !important; padding: 8px 12px !important; } html.lando-anim .page-contact .contact-form-section .form-grid .btn { min-height: 46px !important; } } /* Escenas de portada: en móvil el manifiesto y las dos colecciones deben terminar en una sola pantalla. Las colecciones conservan todos sus enlaces como carriles táctiles, en lugar de apilar tarjetas durante varias pantallas. */ @media (max-width: 599px) and (orientation: portrait) { body.page-home .ln-manifesto { box-sizing: border-box; height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; overflow: hidden !important; } body.page-home .ln-manifesto-stage { height: 100% !important; min-height: 0 !important; } body.page-home .editorial-garage, body.page-home .home-showcase { box-sizing: border-box; height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; padding: 78px 0 30px !important; overflow: hidden !important; } body.page-home .editorial-garage > .container, body.page-home .home-showcase > .container { display: flex !important; flex: 1 1 auto; flex-direction: column; min-height: 0; } body.page-home .editorial-garage .sec-head, body.page-home .home-showcase .vitrina-head { flex: 0 0 auto; margin-bottom: 14px !important; } body.page-home .editorial-garage .sec-title, body.page-home .home-showcase .sec-title { font-size: clamp(2.2rem, 10vw, 2.6rem) !important; line-height: 0.9 !important; } body.page-home .editorial-garage .collage, body.page-home .home-showcase .vitrina-grid { display: flex !important; flex: 1 1 auto; align-items: center !important; width: 100% !important; min-height: 0; margin: 0 !important; padding: 0 14px 8px 0 !important; gap: 14px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.page-home .editorial-garage .collage::-webkit-scrollbar, body.page-home .home-showcase .vitrina-grid::-webkit-scrollbar { display: none; } body.page-home .editorial-garage .collage-item, body.page-home .home-showcase .vitrina-grid .tile { flex: 0 0 74vw !important; width: 74vw !important; height: min(56svh, 470px) !important; min-height: 0 !important; margin: 0 !important; scroll-snap-align: start; } body.page-home .home-showcase .vitrina-grid .tile { padding: 12px !important; } body.page-home .home-showcase .vitrina-grid .tile img { min-height: 0 !important; max-height: 42svh; } /* La historia ocupa la escena completa repartiendo el alto entre la tarjeta de texto y la foto: la altura es mínima, no fija, para que un texto más alto estire la escena en lugar de recortarse dentro de ella. */ body.page-about .about-story-section { box-sizing: border-box; height: auto !important; min-height: 100svh !important; } body.page-about .about-story-section > .container { height: auto !important; min-height: 0; } body.page-about .about-story-section .two-col { height: auto !important; } } /* ========================================================================== Servicios en teléfonos cortos ========================================================================== Con los iconos ya fijos, las cuatro tarjetas piden más alto del que tiene un teléfono corto. Se comprime el ritmo de la escena —aire, titular y cuerpo— para que la sección vuelva a caber en una pantalla sin recortar ni una línea de texto. */ @media (max-width: 599px) and (orientation: portrait) and (max-height: 720px) { .page-service .service-catalog-section { padding: 58px 0 18px !important; } .page-service .service-catalog-section .sec-head { margin-bottom: 10px !important; } .page-service .service-catalog-section .sec-title { font-size: clamp(1.8rem, 8.4vw, 2.3rem) !important; } .page-service .service-catalog-section .feature-row { gap: 10px !important; } .page-service .service-catalog-section .feature { padding: 12px 12px !important; } .page-service .service-catalog-section .feature svg { width: 20px !important; height: 20px !important; margin-bottom: 6px !important; } .page-service .service-catalog-section .feature h3 { font-size: 0.84rem !important; margin-bottom: 5px !important; } .page-service .service-catalog-section .feature p { font-size: 0.72rem !important; line-height: 1.3 !important; } } /* ========================================================================== CONTACTO EN TELÉFONO: DOS ESCENAS COMPLETAS, DOS PAUSAS El formulario se quedaba en media pantalla —646px de contenido dentro de una escena de 664— y, como la pausa se mide sobre la sección entera (formulario y ficha de la tienda, dos pantallas apiladas en vertical), el scroll sólo se detenía al final de las dos. Cada tarjeta pasa a ocupar una pantalla y `js/main.js` la trata como escena propia, con su pausa. Las cuentas, para que el paso de una tarjeta a la siguiente sea de una pantalla exacta: alto = 100svh - 32px y hueco entre tarjetas = 32px, así que alto + hueco = 100svh. La pausa deja el borde inferior 32/2 = 16px por encima del pliegue (`CONTACT_CARD_FRAME` en `js/main.js`), la misma medida que el relleno de la sección: al detenerse, la tarjeta queda con esos 16px de aire arriba y abajo. ========================================================================== */ @media (max-width: 599px) and (orientation: portrait) { body.page-contact main > section.contact-form-section { padding-block: 16px !important; } body.page-contact .contact-form-section > .container { width: 100%; } body.page-contact .contact-form-section .info-grid { gap: 32px !important; } body.page-contact .contact-form-section .info-grid > .reveal, body.page-contact .contact-form-section .info-grid > .reveal:nth-child(2) { box-sizing: border-box; min-height: calc(100svh - 32px); display: flex; flex-direction: column; justify-content: center; top: 0; } /* El contenido tiene que caber en esa altura sin recortes. Lo que falta sale del aire entre bloques y del alto libre del área de texto, atados al alto real de la pantalla para que un teléfono más bajo los apriete en la misma proporción; los controles conservan sus 44px de objetivo táctil. La cadena de clases llega hasta `.reveal` a propósito: las medidas compactas anteriores se declaran bajo `html.lando-anim`, y sin ese peso extra estas no ganarían. */ body.page-contact .contact-form-section .info-grid > .reveal .sec-sub { margin: clamp(8px, 1.6svh, 14px) 0 clamp(6px, 1.2svh, 10px) !important; } body.page-contact .contact-form-section .info-grid > .reveal .form-grid { margin-top: clamp(6px, 1.4svh, 10px) !important; } body.page-contact .contact-form-section .info-grid > .reveal .field textarea { min-height: clamp(64px, 11svh, 88px) !important; } /* La ficha de la tienda son seis datos: su aire se reparte con el alto disponible en lugar de fijarse en 10px por fila. */ body.page-contact .contact-form-section .info-grid > .reveal .info-list { margin-top: clamp(8px, 2svh, 22px) !important; } body.page-contact .contact-form-section .info-grid > .reveal .info-item { padding-block: clamp(2px, 0.7svh, 9px) !important; } } /* ========================================================================== TELÉFONO — CAPAS DE COMPOSICIÓN: SÓLO LAS QUE SE MUEVEN AHORA `will-change` no es "esto irá más rápido": es una reserva permanente de capa en la GPU. Contadas sobre la portada a 390px había 79 elementos con la reserva puesta —los `.reveal`, las imágenes con desvanecido, veinte trazos de SVG— para animaciones que ocurren UNA vez, al entrar en pantalla. Ese árbol de capas se mantiene vivo durante toda la visita y hay que recomponerlo en cada cuadro de scroll; en un teléfono es memoria de vídeo y trabajo de rasterizado a cambio de nada. La reserva se conserva sólo donde algo se mueve de forma continua mientras se scrollea: la cinta de marcas y las tarjetas de los carriles, que van atadas al scroll con `scrub` y no se benefician de la promoción automática del navegador. `stroke-dashoffset` ni siquiera es una propiedad que la GPU pueda componer, así que ahí la reserva era pura pérdida. ========================================================================== */ @media (pointer: coarse) { html.lando-anim .reveal, html.lando-anim .collage, html.lando-anim .collage-item, html.lando-anim .deck-card, html.lando-anim .vitrina-grid, html.lando-anim .img-fade, html.lando-anim .feature-visual, html.lando-anim .feature-img, html.lando-anim .hero-brand-visual, html.lando-anim .logo, html.lando-anim .header-actions, html.lando-anim .map-card, .reveal, .collage, .collage-item, .deck-card, .vitrina-grid, .img-fade, .feature-visual, .feature-img, .hero-brand-visual, .logo, .header-actions, .map-card { will-change: auto !important; } /* Los trazos que se dibujan solos: la propiedad no la compone la GPU. */ svg path, svg circle, svg rect, svg line, svg polyline { will-change: auto !important; } /* `backdrop-filter` obliga al navegador a leer y desenfocar lo que hay DETRÁS del elemento en cada cuadro en que ese fondo se mueve; scrolleando, eso es todos. Aquí el fondo es el negro de la marca y estos botones no llevan color propio, así que desenfocar un negro casi liso devuelve el mismo negro: se paga el trabajo y no se ve la diferencia. En escritorio se conserva, que es donde el efecto sí se aprecia sobre las fotos. */ .btn-line, .menu-btn, .back-top, .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* VALOR CANÓNICO DE LOS TITULARES CON TILDE — no lo dupliques en otro bloque. La tilde de una mayúscula sobresale por encima de la altura de mayúscula, y con los interlineados cerrados de esta tipografía (hasta 0.84 en algunos recortes de móvil) acaba apoyada sobre el renglón de encima. 1.14 es el mínimo medido con el que la tilde despega de la línea superior sin que el titular pierda su aire compacto. La clase repetida seis veces y el sitio del bloque —el final del último archivo de la cadena— no son adornos. Entre dos declaraciones `!important` manda la especificidad, no el orden de carga, y los recortes compactos de móvil encadenan hasta seis clases para bajar el interlineado a 0.92 o 0.84; sin este peso ganaban ellos. Con seis clases se empata con los más largos, y al ir el último se resuelve el empate a favor de la tilde. Así no hay que ir enumerando cada recorte uno por uno ni repetir el valor en otro bloque: si aparece un ajuste nuevo con más peso, se añade una clase aquí. */ html.lando-anim [data-reveal-lines].rh-has-diacritic, [data-reveal-lines].rh-has-diacritic, html.lando-anim .sec-title.rh-has-diacritic, .sec-title.rh-has-diacritic, .rh-has-diacritic.rh-has-diacritic.rh-has-diacritic.rh-has-diacritic.rh-has-diacritic.rh-has-diacritic { line-height: 1.14 !important; } /* =========================================================================== MÓVIL — SCROLL NATIVO PARA EL MANIFIESTO, CARRIL PARA LAS GALERÍAS El manifiesto pierde su largo artificial: sigue siendo una escena completa, pero se recorre una vez en lugar de mantener un sticky y varios `pin` sobre el mismo gesto. Las galerías laterales sí conservan su carril en el teléfono. La rejilla que había aquí no era una alternativa equivalente: las fichas se salían por la derecha —el documento no desplaza en horizontal, así que no había forma de alcanzarlas— y las dos columnas dejaban la foto y el texto de cada paso en 140px. La rejilla se queda como red de seguridad, para las secciones a las que el JS no llegó a montarles escena: sin `.rh-rail-built` no hay carril, y entonces repartir en columnas sigue siendo lo correcto. ========================================================================== */ @media (max-width: 899px), (pointer: coarse) { html.rh-mobile-motion .ln-manifesto { height: auto !important; min-height: 100svh !important; overflow: hidden !important; } html.rh-mobile-motion .ln-manifesto-stage { position: relative !important; height: 100svh !important; min-height: 0 !important; } html.rh-mobile-motion [data-lando-horizontal] { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: clamp(72px, 14vw, 112px) 0 !important; } html.rh-mobile-motion [data-lando-horizontal] > .container { display: block !important; min-height: 0 !important; max-width: var(--container) !important; } html.rh-mobile-motion [data-lando-htrack] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 12px !important; } html.rh-mobile-motion .editorial-garage [data-lando-htrack] > .collage-item, html.rh-mobile-motion .home-showcase [data-lando-htrack] > .tile { grid-column: auto !important; width: auto !important; min-height: 0 !important; margin: 0 !important; } } /* =========================================================================== ...Y LA SECCIÓN QUE SÍ TIENE CARRIL RECUPERA SU GEOMETRÍA El bloque de arriba reparte en columnas con `!important`, y para pasos y valores eso es justo lo contrario de lo que hace falta. La tentación era añadirle un `:not(.rh-rail-built)` a cada selector, pero eso les sube la especificidad por encima de las reglas del carril nativo de la portada —empatadas a (0,3,1)— y devolvía las galerías de inicio a la rejilla. Los selectores de arriba se quedan como estaban y la excepción se escribe aquí: sólo la ve una sección con escena montada, así que la portada no cambia. Los valores son los mismos que declara `styles.css` para el carril de móvil; se repiten porque el bloque de reparto los pisa con `!important`. ========================================================================== */ @media (max-width: 899px), (pointer: coarse) { html.rh-mobile-motion [data-lando-horizontal].rh-rail-built { display: flex !important; height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; overflow: hidden !important; padding: clamp(74px, 10svh, 112px) 0 clamp(24px, 4svh, 52px) !important; } html.rh-mobile-motion [data-lando-horizontal].rh-rail-built > .container { display: flex !important; min-height: 0 !important; max-width: none !important; } html.rh-mobile-motion [data-lando-horizontal].rh-rail-built [data-lando-htrack] { display: flex !important; grid-template-columns: none !important; width: max-content !important; margin: 0 !important; padding: 0 var(--rh-rail-gap, 22px) 0 0 !important; gap: var(--rh-rail-gap, 22px) !important; } } /* =========================================================================== TELÉFONO EN HORIZONTAL: LA BANDA ANCHA USA EL ANCHO QUE LE SOBRA En apaisado sobra ancho y falta alto, y estas bandas apilaban en columna dos bloques que caben al lado. Puestos en fila, el alto pasa a ser el del bloque más alto en vez de la suma: la sección de visión baja de 675 a 525 sobre un viewport de 390. Sólo a partir de 760px de ancho. A 667 se probó y salió PEOR (658 -> 666): el contenedor mide ahí 545px, dos columnas caen a 259px cada una y la cita se parte en tantas líneas que crece más de lo que se ahorra. La especificidad no es decorativa: `html body main > section.race-sector.X` es el selector con el que el archivo declara estos contenedores más arriba. Con `body:not(.page-home) .X > .container` la regla se escribía pero perdía, y el reparto se quedaba en columna sin dar ningún aviso. ========================================================================== */ @media (orientation: landscape) and (max-height: 500px) and (min-width: 760px) { .page-about .about-vision-section .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; gap: 26px !important; } html body main > section.race-sector.service-cta-section > .container, html body main > section.race-sector.pit-band > .container { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 26px !important; } html body main > section.race-sector.pit-band > .container > .btn { flex: 0 0 auto !important; } } /* =========================================================================== VERTICAL EN PANTALLAS CORTAS: LOS TRES QUE SE PASABAN POR POCO A 375x667 y 360x780 quedaban tres secciones entre 1,02 y 1,24 pantallas: se veía asomar la cola sin motivo. Todo lo que se recorta aquí es respiro, no contenido, y por encima de 800px de alto no se toca nada. ========================================================================== */ @media (max-width: 899px) and (orientation: portrait) and (max-height: 800px) { /* Comunidad: 683 sobre 667. Los 118px de respiro superior los pone una regla con `html body main > section.race-sector`, así que hay que igualarla. */ html body main > section.race-sector.community-section { padding-top: calc(var(--header-h) + 26px) !important; padding-bottom: 30px !important; } /* Servicios del taller: 827 sobre 780. Los 92px de arriba y abajo salen de `body:not(.page-home) main > section:not(.page-hero)`; se repite el mismo selector añadiendo la clase para ganarle. */ body:not(.page-home) main > section.service-catalog-section:not(.page-hero):not([data-lando-horizontal]) { padding-block: clamp(36px, 5.6svh, 64px) !important; } /* Ubicación: 729 sobre 667. El bulto es la tarjeta del mapa y el relleno de los seis datos; todo lo que se toca es respiro interno. */ .page-home .home-location .map-card .map-consent { padding: 14px !important; gap: 4px !important; } .page-home .home-location .info-item { padding-block: 6px !important; } .page-home .home-location .info-list { gap: 6px !important; } .page-home .home-location .sec-head { margin-bottom: 2px !important; } } /* =========================================================================== TELÉFONO ESTRECHO: LAS FICHAS DE PASO, EN UNA COLUMNA La rejilla de dos columnas de `rh-mobile-motion` deja fichas de 140px en un teléfono de 320, y con el relleno lateral quedan 102px de línea: menos que "Recomendamos" (112px) o "presupuesto" (107px), que se cortaban contra el borde. Medido de 320 a 412: sólo por debajo de 344px no da el ancho. Ahí pasan a una sola columna —256px de línea— y de 344 para arriba no cambia nada. Sólo afecta a las fichas de proceso y valores; los carriles de la portada conservan sus dos columnas. ========================================================================== */ @media (max-width: 343px) { html.rh-mobile-motion body:not(.page-home) [data-lando-horizontal]:not(.rh-rail-built) .steps[data-lando-htrack] { grid-template-columns: minmax(0, 1fr) !important; } } /* --- Ubicación en las pantallas más cortas ------------------------------ Tras el recorte anterior quedaba en 691 sobre 667: 24px. Se reparten entre el respiro superior y los tres huecos internos de la rejilla, sin tocar ni la tarjeta del mapa ni el tamaño de los datos. Sólo por debajo de 700px de alto, que es donde el problema existe. */ @media (max-width: 899px) and (orientation: portrait) and (max-height: 700px) { .page-home .home-location { padding-top: clamp(34px, 4.6svh, 60px) !important; } .page-home .home-location .info-grid { gap: 6px !important; } .page-home .home-location .info-list { gap: 4px !important; } .page-home .home-location .map-card .map-consent { padding: 12px !important; } }