/* La portada en el teléfono. Las páginas del sitio están dibujadas para escritorio, con las medidas escritas dentro de cada etiqueta. Aquí no se rediseña nada: sólo se le dice qué hacer cuando la pantalla es angosta. En escritorio no cambia ni un pixel, porque todo vive dentro de `@media (max-width: 860px)`. */ /* ═══ EL TELÉFONO DEJA DE INVENTARSE TAMAÑOS DE LETRA ═════════════════════ En «Para negocios», el renglón 04 —Campañas— se veía más chico que los otros cinco. En el archivo son idénticos: los seis salen del mismo molde, con la misma medida. Lo que cambia es el LARGO del texto: el de Campañas es el más corto de los seis. Ahí está la explicación. Safari en el iPhone —y Chrome en Android— traen un ajuste automático que agranda la letra de los bloques que consideran texto principal, y decide bloque por bloque mirando su ancho y su contenido. A los cinco largos les subió el tamaño; al corto no. Así que el que se ve raro es el que está bien, y los otros cinco son los inflados. `text-size-adjust: 100%` apaga ese invento y deja que cada texto mida lo que el diseño dice. Es `100%` y no `none` a propósito: `none` también estorba cuando alguien AMPLÍA la página a propósito, y eso sí hay que respetarlo. ⚠️ NO LO PUEDO COMPROBAR DESDE AQUÍ. El navegador con el que mido es Chromium de escritorio y no hace ese ajuste, así que para él los seis renglones ya se veían iguales. Esto se confirma en un iPhone de verdad. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* En escritorio el botón de las tres rayas no se ve. */ .ru-web-burger { display: none; } /* ═══ EL FONDO DEL SITIO ═══════════════════════════════════════════════════ Una foto pegada a la ventana, detrás de todo, sobre la que el contenido se desliza — como el fondo de un perfil en la app. Antes aquí había cuatro manchas de color difuminadas. Ed mandó la foto y pidió reemplazarlas: «quita todos los fondos… reemplaza el fondo con esa foto, que sea fija». Los bloques de terracota NO son fondo: son piezas del diseño que flotan encima, y ésos se quedan donde están. CÓMO ESTÁ HECHA, Y POR QUÉ ASÍ · `position: fixed` en un pseudo-elemento, no `background-attachment: fixed`. Lo segundo es una línea y se lee mejor, pero en Safari de iPhone lleva años sin funcionar bien —o no se pega, o da tirones al hacer scroll—, y media audiencia de esto es un teléfono. · ⚠️ LA FOTO VA VELADA, y no es timidez. Detrás hay texto: un titular oscuro sobre un cielo con un sol quemado no se lee. El velo es del mismo crema del sitio, así que la foto se ve y el texto también. Si un día se quiere la foto más presente, se baja el velo Y se mira el texto encima: las dos cosas se mueven juntas. · El lienzo pierde su color de fondo, porque lo tapaba. Las franjas que traen fondo propio lo dejan pasar a medias (ver `.ru-web-franja`), y ése es el efecto: bandas claras deslizándose sobre una foto quieta. · Todo cuelga de `body:has(.ru-web-marco)`: entra sólo en las páginas de presentación —la web-app, el portal y la puerta llevan el suyo— y, si un navegador no entendiera `:has()`, NO se aplica ninguna de las reglas. O entra el fondo nuevo con el lienzo transparente, o se queda todo como estaba; lo que no puede pasar es que quite el color y no ponga el otro. */ body:has(.ru-web-marco) { background: transparent !important; } body:has(.ru-web-marco) .ru-web-marco { background: transparent !important; } body:has(.ru-web-marco)::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #f6f1e9; background-image: linear-gradient(rgba(246, 241, 233, .80), rgba(246, 241, 233, .80)), url("fondo-sitio.jpg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } @media (max-width: 860px) { /* 1 · El lienzo estaba clavado en 1180 px de ancho y por eso no cabía. */ .ru-web-marco { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } /* 1b · Las pantallas que son más app que folleto —entrar, el portal— sólo necesitan que se les quite el ancho mínimo. Sus márgenes ya los resuelve su propio diseño, así que no se tocan. */ .ru-web-lienzo { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } .ru-web-lienzo > .ru-web-nav { padding-left: 16px !important; padding-right: 16px !important; } /* 2 · Cada franja traía 60 px de margen a los lados y hasta 96 arriba y abajo. En el teléfono, 18 y 44. */ .ru-web-marco > div { padding-left: 18px !important; padding-right: 18px !important; padding-top: 44px !important; padding-bottom: 44px !important; } /* 2b · Y el aire de los lados de las tarjetas que no van de borde a borde. Quién entra aquí lo decide `portada.js` midiendo (ver ahí el porqué). */ .ru-web-margen { margin-left: 18px !important; margin-right: 18px !important; } /* El pie es otra pieza (Pie.dc.html) y vive fuera del marco. Se le reconoce por su fondo oscuro. Sus columnas son filas flex, no rejillas, así que se les dice que se doblen. */ [style*="background: rgb(36, 31, 25)"] { padding: 36px 18px 32px !important; } [style*="background: rgb(36, 31, 25)"] div[style*="display: flex"] { flex-wrap: wrap !important; } [style*="background: rgb(36, 31, 25)"] div[style*="gap: 56px"] { gap: 26px !important; } [style*="background: rgb(36, 31, 25)"] div[style*="gap: 40px"] { gap: 24px !important; } /* 3 · Lo que estaba en dos o tres columnas se apila. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 22px !important; } /* 4 · Los títulos bajan de tamaño para que quepan. */ h1 { font-size: 34px !important; line-height: 1.08 !important; } h2 { font-size: 26px !important; line-height: 1.14 !important; } h3 { font-size: 19px !important; line-height: 1.22 !important; } /* 5 · Nada más ancho que la pantalla. */ img, svg, image-slot, video { max-width: 100% !important; } /* 6 · El menú de arriba se convierte en tres rayas. De un lado el logotipo, del otro el botón; los enlaces aparecen abajo, uno por renglón, al tocarlo. */ .ru-web-marco > .ru-web-nav { flex-wrap: wrap !important; padding: 10px 16px !important; gap: 8px !important; } .ru-web-nav img { height: 34px !important; } .ru-web-burger { display: inline-flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; box-sizing: border-box; order: 1; border: 1.5px solid rgba(0, 0, 0, .14); border-radius: 12px; background: #fffdf9; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ru-web-burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: #241f19; transition: transform .22s ease, opacity .16s ease; } /* Abierto, las tres rayas se vuelven una equis. */ html[data-menu="abierto"] .ru-web-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html[data-menu="abierto"] .ru-web-burger span:nth-child(2) { opacity: 0; } html[data-menu="abierto"] .ru-web-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ru-web-menu { display: none !important; order: 3 !important; width: 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin-top: 6px !important; padding: 4px 0 8px !important; border-top: 1px solid rgba(0, 0, 0, .08) !important; font-size: 16px !important; font-weight: 600 !important; } html[data-menu="abierto"] .ru-web-menu { display: flex !important; } .ru-web-menu > a { padding: 14px 2px !important; border-bottom: 1px solid rgba(0, 0, 0, .06) !important; } .ru-web-menu > a[style*="background"], .ru-web-menu > button { margin-top: 12px !important; padding: 14px !important; border-radius: 12px !important; text-align: center !important; justify-content: center !important; font-size: 15.5px !important; border-bottom: none !important; } /* 7 · Los dos botones de la portada dejan de pelearse el renglón. */ [style*="gap: 14px; margin-top: 34px"] { flex-wrap: wrap !important; } /* 8 · Las cajas de foto no se comen media pantalla. ═══════════════════════════════════════════════════════════════ ⚠️ EL TECHO VA EN LA CAJA, NO EN LA FOTO. Esto se escribió cuando las cajas estaban VACÍAS y salían como recuadros grises enormes: bastaba con encoger el hueco. Ya con las fotos puestas, encoger sólo el hueco dejaba la caja alta y la mitad de abajo en crema — una foto cortada por la mitad, que es como se veía en el teléfono. Y la caja se reconoce por lo que ES —la que contiene un hueco de imagen— y no por la altura que traiga escrita. Las otras tenían la suya puesta a mano en el archivo y por eso estaban cazadas; ésta no tenía ninguna (le venía de ocupar dos filas de la rejilla) y por eso se escapó. `max-height` y no `height`: forzar una altura fija pelea con la altura que la rejilla le da a su fila, y las tarjetas se montaban unas sobre otras 8 px. Con techo, la que ya es baja se queda como está y sólo se recorta la que se pasa. `grid-row: auto` porque la primera ocupa dos filas en escritorio; en el teléfono, con una sola columna, eso dejaba una fila vacía debajo. */ .ru-web-marco div:has(> image-slot) { max-height: 230px !important; grid-row: auto !important; } .ru-web-marco image-slot { height: 100% !important; } /* 8b · Lo que era dos columnas y en el teléfono no lo es. Quién se apila lo decide `portada.js` midiendo (ver ahí el porqué); aquí sólo está lo que se hace con los marcados. */ .ru-web-apila { flex-direction: column !important; align-items: stretch !important; column-gap: 0 !important; row-gap: 26px !important; } /* Y el bloque que iba a la derecha deja de negarse a encoger: traía `flex: 0 0 auto` y el relleno por fuera de su ancho, así que se salía 40 px por el borde derecho. */ .ru-web-apila > * { box-sizing: border-box !important; max-width: 100% !important; flex: 0 1 auto !important; } /* 8c · LOS SEIS DÍGITOS DEL CÓDIGO, que se salían de la pantalla. ═══════════════════════════════════════════════════════════════ Ed, 25/09, desde su iPhone: «el campo donde va el código se sale de la pantalla». Son seis cajas de 56 px con 10 de aire entre ellas —386 px de ancho FIJO— dentro de una tarjeta que en un teléfono mide poco más de trescientos. En Safari eso no se recorta: empuja el documento y la página entera se arrastra de lado, que es justo lo que se ve en su captura. Se reparten el ancho que haya (`flex: 1 1 0`) en vez de exigir el suyo, y la caja baja un poco de alto para no quedar como una columna. El `:has` aprieta además el aire entre ellas; donde no se entienda —Safari anterior a 15.4— las cajas ya caben solas. ⚠️ SE RECONOCEN POR SU `id`, que es del propio dibujo (`ru-code-0`…): de ahí cuelga su salto de foco al escribir, así que no es un nombre que se vaya a mover por estilo. */ input[id^="ru-code-"] { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; height: 58px !important; font-size: 21px !important; } div:has(> input[id^="ru-code-"]) { gap: 7px !important; } /* 9 · En Eventos, la barra de filtros no cabía en un renglón. */ .ru-web-marco div[style*="min-width: 240px"] { min-width: 0 !important; width: 100% !important; } .ru-web-marco div[style*="display: flex"][style*="gap: 26px"] { flex-wrap: wrap !important; gap: 14px !important; } .ru-web-marco div[style*="display: flex"][style*="gap: 11px"] { flex-wrap: wrap !important; width: 100% !important; } }