/** * Página de la app. * * LA ARMONÍA VA POR DOS SITIOS, y es deliberado: * - **La paleta es la de la app** (mismos valores que el :root de bibliorol-app/www/css/app.css). Al * entrar tiene que oler a Bibliorol, porque es su antesala. * - **La tipografía es la de la web**: Oxanium para los titulares y Poppins para el texto. Las carga * ya el tema Gamekout, así que no cuestan una petición más, y son la voz del sitio. * * COMPOSICIÓN A LO PANELS: el peso lo llevan las capturas, no el texto. Cada bloque es una imagen * grande y un párrafo corto, alternando el lado. La rejilla de funciones va detrás y en pequeño. */ .nsrapp { /** * PALETA CLARA. Es la de la app dada la vuelta, no otra distinta: la tinta del texto ES el color * de fondo de la app (#1a1a2e), y el neutro va sesgado hacia ese mismo azul-violeta — un gris * puro se lee como plantilla y el crema cálido es el tópico de landing genérica. * * UNA SOLA TINTA, Y ES EL AZUL DE LA APP: #1a1a2e, el mismo que allí es el fondo. Aquí es lo * contrario —tinta sobre claro— y por eso la paleta sigue siendo la misma paleta, dada la vuelta. * * El ámbar de la marca (#f4a836) sobre claro da 1,9:1 de contraste: no se lee. Y oscurecerlo lo * convierte en un marrón sin fuerza. Tampoco se inventa un azul intermedio: el de la app vale. */ --app-bg: #e9e7f1; --app-surface: #ffffff; --app-text: #191930; --app-muted: #545470; --app-accent: #1a1a2e; /** * EL DORADO VUELVE, PERO SOLO COMO GRAFISMO: filos, rayas y subrayados. Nunca como texto —sobre * claro da 1,9:1 de contraste y no se lee—, y por eso todos los sitios donde antes era el color * de una letra llevan ahora tinta y el dorado se ha ido al trazo de al lado. */ --app-brand: #f4a836; --app-border: rgba(25, 25, 48, 0.14); /* En oscuro las secciones eran MÁS oscuras que la base; aquí, más claras. Se conserva la relación —la sección se separa de la página— y con distancia suficiente: dos claros casi iguales convierten la página en una sábana sin ritmo. */ --hondo: #f8f7fb; --display: 'Oxanium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --texto: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Escala de ritmo: una sola manivela para el aire de toda la página. */ --aire: clamp(56px, 7vw, 104px); --lado: clamp(20px, 6vw, 88px); background: var(--app-bg); color: var(--app-text); font-family: var(--texto); /* A sangre dentro del ancho del tema: las capturas y las bandas van de lado a lado. */ margin: 0 calc(50% - 50vw); width: 100vw; /* `clip` recorta a los lados sin crear contenedor de scroll, que es lo que hace `hidden`. Aquí da igual para el aspecto, pero es lo correcto y no cuesta nada. */ overflow-x: clip; } /* ============================================================ MOVIMIENTO * * UNA SOLA COSA, DE MOMENTO: el móvil del héroe entra deslizándose desde la derecha hasta su sitio. * * Al CARGAR y no al hacer scroll, porque el héroe está sobre la línea de flotación. Empieza montado * sobre la tablet y se retira a su posición, que es el gesto de dejarlo apoyado al lado. * * SOLO SE MUEVE: no aparece, no se desvanece. El móvil está ahí desde el primer fotograma, encima * de la tablet, y se retira. Y la espera es mínima —80 ms— porque con el móvil ya visible, esperar * más es dejarlo plantado en mitad de la tablet a la vista de todos. */ @media (prefers-reduced-motion: no-preference) { .nsrapp-hero .nsrapp-caja-movil { animation: nsrapp-movil-entra 0.72s cubic-bezier(0.22, 0.68, 0.24, 1) 0.08s both; } @keyframes nsrapp-movil-entra { from { transform: translateX(88%); } to { transform: none; } } } /* ============================================================ BARRA FIJA * Aparece al pasar el héroe y se retira al llegar al cierre. Va ABAJO y también en móvil: arriba * chocaría con la cabecera del tema, que ya es fija, y panels.app se deja fuera justo al usuario de * móvil, que es el único que puede instalar de verdad desde aquí. */ .nsrapp-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; padding: 12px var(--lado); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 2px solid var(--app-brand); transform: translateY(102%); transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1); } .nsrapp-barra.nsrapp-fuera { transform: translateY(102%); } .nsrapp-barra.nsrapp-dentro { transform: none; } .nsrapp-barra p { margin: 0; font-size: 14.5px; color: var(--app-muted); } /* El logotipo sustituye a la palabra «Bibliorol». Alineado con el texto por la base, no centrado: con `middle` la marca queda flotando sobre la línea. */ .nsrapp-barra p { display: flex; align-items: center; gap: 9px; } .nsrapp-barra-logo { display: block; height: 29px; width: auto; flex: 0 0 auto; } .nsrapp-barra .nsrapp-insignias { margin: 0; } .nsrapp-barra .nsrapp-badge-apple img { height: 36px; } .nsrapp-barra .nsrapp-badge-google img { height: 47px; margin: -5.5px 0; } /* ============================================================== HÉROE */ .nsrapp-hero { position: relative; overflow: clip; /** * ALTURA Y RELLENOS EN PÍXELES, SIN `vh`. `.nsrapp` mide `100vw`, que INCLUYE la barra de * desplazamiento vertical; en cuanto el documento crece y esa barra aparece, cualquier reajuste * del alto visible encogía el `70vh` del alto mínimo y el `10vh` del relleno, y el contenido * subía. Una separación que se reduce al cargar es exactamente eso. * * Con píxeles el héroe mide lo mismo pase lo que pase, y de todas formas lo que manda su altura * son los aparatos (541 px), no el mínimo. */ min-height: 420px; display: flex; align-items: center; /* El relleno de arriba tiene que dejar pasar la cabecera, que va fija y por encima (51 px). */ padding: 104px 0 64px; /** * Fondo CLARO y neutro. Aquí hubo un muro de portadas animado y se quitó: desde que la tablet * enseña la biblioteca, el muro repetía el mismo argumento por detrás y en movimiento. * * Y la página entera pasó de oscura a clara por lo mismo que se ve aquí: las capturas son * oscuras y son el argumento. Sobre oscuro hubo que inventarles un halo detrás y un filo blanco * para que no se disolvieran; sobre claro destacan solas. */ background: radial-gradient(64% 82% at 76% 46%, rgba(26, 26, 46, 0.07), rgba(26, 26, 46, 0) 60%), linear-gradient(180deg, #ffffff 0%, #f4f3f9 58%, #e9e7f1 100%); } /** * Texto a la izquierda, aparatos a la derecha: es la composición del héroe de panels.app y la de * doce de las dieciséis landings estudiadas. * * La columna de los aparatos es `auto`: la anchura la manda la escena, y el texto se queda con lo * que sobre. Así los dos aparatos entran SIEMPRE con holgura, sin recortes ni sangrados. */ .nsrapp-hero-in { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 72px); /** * `end` en las dos columnas: es lo que pone los aparatos y las insignias sobre UNA MISMA LÍNEA. * Las insignias son lo último del bloque de texto y no llevan margen inferior, así que su borde * de abajo ES el del bloque — y contra él se alinea la escena. */ align-items: end; padding: 0 var(--lado); } /** * LA ESCENA DEL HÉROE: tablet con la biblioteca y el móvil montado encima, por la esquina. * * Ancho ATADO Y CON TOPE para que la pareja entre entera y sobrada en el héroe: la tablet vertical * mide 4:3, así que a 400 px de ancho son 533 de alto, y con el móvil asomando por abajo la escena * se queda en unos 560 — dentro del hueco que deja el héroe con sus rellenos. */ .nsrapp-hero-ap { position: relative; width: clamp(288px, 31vw, 414px); flex: 0 0 auto; } /* Va con el padre delante A PROPÓSITO: las figuras llevan `.nsrapp-marco`, que se declara más abajo con la MISMA especificidad. Con un solo selector de clase ganaba el de abajo por orden. */ .nsrapp-hero .nsrapp-hero-ap .nsrapp-tableta { width: 100%; margin: 0; } /** * El móvil, DELANTE de la tablet y APOYADO EN LA MISMA LÍNEA: `bottom: 0`, no descolgado. Los dos * cantos de abajo a la misma altura es lo que hace que se lean como dos aparatos sobre una mesa y * no como dos recortes pegados uno encima del otro. */ /** * El móvil del héroe. La CAJA es la que se posiciona; el marco de dentro solo se estira al 100 %. * * 33,2 % Y NO 41 %: la proporción entre aparatos también es un dato. Un iPad Pro de 13" mide 215,5 mm * de ancho y un iPhone 17, 71,5 → 3,01 a 1. Al 41 % salía 2,44 a 1, un móvil un 23 % más grande de lo * que le toca al lado de esa tablet. */ .nsrapp-hero .nsrapp-hero-ap .nsrapp-caja-movil { position: absolute; z-index: 2; left: -22%; bottom: 0; width: 33.2%; } /* La sombra se DESPLAZA A LA DERECHA (34 px en X), no cae recta hacia abajo: tiene que caer SOBRE la tablet, si no son dos recortes en el mismo plano. */ .nsrapp-hero .nsrapp-hero-ap .nsrapp-movil { box-shadow: 0 0 0 1px rgba(25, 25, 48, 0.18), 34px 24px 54px -16px rgba(20, 20, 38, 0.58); } .nsrapp-hero-txt { position: relative; z-index: 3; max-width: 620px; } /* El logotipo de la app, en el azul del acento: el ámbar original no se lee sobre claro. Es un PNG recoloreado (logo-bibliorol-azul.png), no un filtro CSS — así el color es exacto y no depende del navegador. */ .nsrapp-logo { display: block; width: auto; height: clamp(39px, 4.2vw, 57px); margin-bottom: 22px; } /* El rótulo: la RAYA en dorado y el texto en tinta. Al revés no se leería. */ .nsrapp-eyebrow { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--app-text); margin: 0; } .nsrapp-eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--app-brand); flex: 0 0 auto; } /** * EL TITULAR. Es la tesis de la página, así que ocupa lo que tiene que ocupar. * * Oxanium a 800 con el tracking cerrado: es angular y tiene aire de juego, que es exactamente el * registro. El `clamp` va de 34 a 78 px — en escritorio grande manda de verdad. */ .nsrapp-hero-txt h1 { font-family: var(--display); font-size: clamp(34px, 4.6vw, 64px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 0; color: #1a1a2e; text-wrap: balance; } /* «en la mochila» en el dorado de la marca. */ .nsrapp-hero-txt h1 em { font-style: normal; color: var(--app-brand); } .nsrapp-lead { color: #45455e; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; margin: 20px 0 0; max-width: 46ch; } /* ========================================================== INSIGNIAS */ .nsrapp-insignias { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; } /** * LAS DOS AL MISMO TAMAÑO **VISIBLE**, que no es lo mismo que al mismo `height`. * * Medido: el SVG de Apple es 119,66 × 40 y la insignia llena el lienzo entero. El PNG de Google es * 646 × 250 pero su caja visible son 646 × 192 — trae **29 px de margen transparente arriba y abajo**, * un 12 % por lado. Puestos los dos a `height: 48px`, el de Google se dibujaba un 23 % más pequeño y * cantaba. * * Así que el de Google va a 56 px de elemento para que su parte visible mida los mismos 43. No es * alterar la insignia —el arte no se toca—, es compensar su propio margen. Y de paso cumple de sobra * la regla de Google de que la suya no sea menor que las demás. */ .nsrapp-badge { display: inline-block; /* El radio NO es decoración: es lo que hace que la sombra del hover siga la esquina de la insignia. Está medido contra el dibujo, que a 43 px de alto redondea unos 9. */ border-radius: 9px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .nsrapp-badge img { display: block; width: auto; } .nsrapp-badge-apple img { height: 43px; } .nsrapp-badge-google img { height: 56px; margin: -6.5px 0; } /** * SOMBRA CON `box-shadow` Y RADIO PROPIO, no con `drop-shadow`. En Safari salía CUADRADA. * * `drop-shadow` promete seguir el canal alfa del dibujo, pero Safari solo lo hace cuando el elemento * está en su propia capa de composición. Se vio en la propia página: en la barra flotante SÍ salía * redonda —esa lleva un `transform` que la manda a su capa— y en el héroe y el cierre no. * * La salida NO es forzar capas con `translateZ(0)`: eso es pedirle al navegador memoria de vídeo por * cada insignia para arreglar un dibujo, y encima difumina los SVG al reescalarlos. Aquí no hace * falta ningún alfa: la caja del enlace mide EXACTAMENTE lo que el dibujo —43 px de alto en las dos, * comprobado; lo que sobra en la de Google es su margen transparente, que se recorta con margen * negativo—, así que basta con redondearla igual que la insignia y usar una sombra de caja normal. * Eso se dibuja igual en todos los navegadores desde hace quince años. */ @media (hover: hover) { .nsrapp-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); } } /* ============================================================ FRANJA */ /* Banda pegada al héroe. Es hermana suya, NO va dentro: dentro se convertía en un hermano flex del titular y descuadraba el héroe entero. */ /** * REJILLA DE CUATRO COLUMNAS FIJAS, no un flex que envuelve. * * Con `flex: 1 1 190px` y el relleno lateral a `--lado` cada casilla pedía 366 px: cuatro no caben * en 1440 y partía en TRES Y UNA, con la última suelta debajo. Es la misma fila coja que ya salió * en la rejilla de funciones — el patrón `auto-fit`/`wrap` no vale cuando el número de casillas es * fijo y conocido. * * El relleno de página va en la primera y la última, no en todas, para que los filos verticales * caigan repartidos y la banda llegue a sangre. */ .nsrapp-hechos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); background: #ffffff; } /* Centradas, y con el MISMO relleno en las cuatro: con el relleno de página solo en la primera y la última, sus textos quedaban centrados sobre una caja más estrecha y se veían corridos. */ .nsrapp-hecho { padding: 22px 20px; border-left: 1px solid var(--app-border); text-align: center; } .nsrapp-hecho:first-child { border-left: 0; } .nsrapp-hecho b { display: block; font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.02em; color: #1a1a2e; } .nsrapp-hecho span { display: block; font-size: 12.5px; color: var(--app-muted); margin-top: 3px; } /* ============================================================== RÓTULOS * Un rótulo dorado y pequeño sobre cada titular. Es el mismo recurso que el del héroe pero en * versión mínima: aquí la palabra va EN dorado, no solo la raya. * * AVISO DE CONTRASTE: #f4a836 sobre claro da 1,9:1. En un rótulo diminuto es el peor caso posible, * así que va con peso 700 y bastante tracking para que al menos gane en grosor lo que pierde en * contraste. Si algún día se ve lavado, la solución es bajar el tono, no agrandarlo. */ /** * VA EN , NO EN

, Y ESA ES LA DEFENSA. * * Como párrafo lo alcanzaban TRES reglas distintas que estilan `p` dentro de su contenedor * —`.nsrapp-show .nsrapp-txt p`, `.nsrapp-preg-lado p` y `.nsrapp-cierre p`—, todas con más * especificidad que `.nsrapp-rotulo`. Salía a 10 px en unas secciones y a 16-18 en otras, con el * mismo marcado. Poner `:not()` en cada una es ir tapando agujeros; siendo `span` no hay agujero. */ .nsrapp-rotulo { display: block; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--app-brand); margin: 0 0 9px; } /* ============================================================ SECCIONES */ .nsrapp-sec, .nsrapp-show { padding: var(--aire) var(--lado); background: var(--hondo); border-top: 1px solid var(--app-border); } /* La franja de hechos ya cierra por abajo con su propio filo: dos líneas seguidas cantan. */ .nsrapp-hechos + .nsrapp-show { border-top: 0; } .nsrapp-sec h2, .nsrapp-show h2 { font-family: var(--display); font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 0; color: #1a1a2e; text-wrap: balance; max-width: 20ch; } .nsrapp-sub { color: var(--app-muted); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; margin: 14px 0 0; max-width: 56ch; } /* ====================================================== BLOQUES CON CAPTURA * * EL MODELO PANELS: imagen grande a un lado, cuatro líneas de texto al otro, alternando. La imagen * pesa más que el texto en la rejilla —1,15 contra 0,85— porque el argumento lo lleva ella. */ .nsrapp-show { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 84px); align-items: center; } .nsrapp-show .nsrapp-txt p { color: var(--app-muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; margin: 16px 0 0; max-width: 46ch; } /** * Invertido: el texto se va a la derecha. Hay que dar la vuelta TAMBIÉN a los anchos de columna, no * solo al orden: con `order` a secas el texto se mudaba a la columna ancha y la captura se quedaba * en la estrecha, o sea justo al revés de lo que pide el bloque. */ .nsrapp-inv { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .nsrapp-inv .nsrapp-txt { order: 2; } /* --- variante ancha: la doble plana apaisada manda, y se pone encima el texto en una sola columna */ .nsrapp-ancho { grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 52px); } /* CENTRADO, con el titular en UNA línea y el texto ancho: es el único bloque a una sola columna, y alineado a la izquierda con un titular partido en dos parecía que le faltaba la mitad derecha. El `max-width: 20ch` del h2 general es lo que lo partía. */ .nsrapp-ancho { justify-items: center; text-align: center; } .nsrapp-ancho .nsrapp-rotulo { text-align: center; } /** * LA DOBLE PLANA OCUPA LA COLUMNA ENTERA, dicho a las claras. * * Con `justify-items: center` la figura se encogía a su contenido, y su contenido es una imagen al * 100 % de la figura: mientras la imagen no ha llegado —y va con carga diferida, o sea que no llega * hasta que te acercas— esa cuenta da CERO y el aparato se quedaba en 14 px de ancho. Al cargar * pegaba el salto a los 1.267 de la columna. */ .nsrapp-ancho > .nsrapp-marco { width: 100%; } .nsrapp-ancho .nsrapp-txt { max-width: 78ch; } .nsrapp-ancho h2 { max-width: none; } .nsrapp-ancho .nsrapp-txt p { max-width: 74ch; margin-left: auto; margin-right: auto; } /* --- variante cortada: los móviles se salen por el borde inferior de la sección */ /* Los móviles YA NO SE CORTAN por abajo: se ven enteros y el bloque se comporta como los demás. El texto arranca arriba, igual que en el de pestañas. */ .nsrapp-bolsillo { align-items: start; } /* Dos párrafos: el segundo necesita su aire. */ .nsrapp-show .nsrapp-txt p + p { margin-top: 14px; } .nsrapp-moviles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); align-items: end; } /** * TRES MÓVILES SOLAPADOS, no una rejilla. Cada uno monta sobre el anterior y proyecta su sombra * HACIA LA IZQUIERDA, que es lo que crea la profundidad: sin desplazar la sombra en X serían tres * recortes en el mismo plano. * * El z-index crece de izquierda a derecha para que la sombra caiga sobre el vecino de al lado y no * por debajo de él. */ .nsrapp-moviles { display: flex; justify-content: center; align-items: flex-start; gap: 0; /* El ancho de UN móvil, en una variable: el solape se mide contra él, no contra la columna. */ --movil: clamp(150px, 16vw, 235px); /* Sin esto la columna de la rejilla se estira hasta caber el contenido y el grupo se sale por la derecha en vez de quedarse centrado. */ min-width: 0; } /* El ancho lo lleva la CAJA; el marco se estira dentro y su bisel ya sale del dato real. */ .nsrapp-moviles .nsrapp-caja { width: var(--movil); flex: 0 0 auto; } .nsrapp-moviles .nsrapp-marco { box-shadow: 0 0 0 1px rgba(25, 25, 48, 0.18), -26px 22px 48px -18px rgba(20, 20, 38, 0.5); } /** * Solapados en horizontal pero A LA MISMA ALTURA: la escalera vertical se quitó porque hacía que * los de la derecha parecieran caerse, y con los tres enteros ya no hay nada que compensar. * * EL SOLAPE SE MIDE CONTRA EL MÓVIL, no en porcentaje. Un `margin-left: -5%` parece que dice «un 5 % * de un móvil» y no lo dice: los porcentajes de margen se resuelven contra el CONTENEDOR, así que el * solape cambiaba con el ancho de la columna y el grupo dejaba de estar centrado. Con el 15 % del * propio móvil los tres se montan igual midan lo que midan. */ .nsrapp-moviles .nsrapp-caja:nth-child(1) { z-index: 1; } .nsrapp-moviles .nsrapp-caja:nth-child(2) { z-index: 2; } .nsrapp-moviles .nsrapp-caja:nth-child(3) { z-index: 3; } .nsrapp-moviles .nsrapp-caja + .nsrapp-caja { margin-left: calc(var(--movil) * -0.15); } /* ============================================================== MARCOS * * Marco NEGRO, no azul: es lo que pediste y además es lo que hace que la captura destaque contra el * fondo oscuro de la página en vez de fundirse con él. El filo blanco de un píxel es lo que dibuja * el canto del aparato; sin él el negro sobre negro desaparece. */ /** * EL BISEL, UNIFICADO DE VERDAD: una sola variable `--bisel` por aparato, con el dato real. * * EL BISEL ES UNA MEDIDA FÍSICA FIJA —8,45 mm en el iPad, 1,15 en el iPhone— y el porcentaje se mide * contra el ANCHO, que cambia con la orientación. Por eso no hay un número que valga para todo: * * iPad vertical 8,45 / 215,5 = 3,92 % * iPad apaisado 8,45 / 281,6 = 3,00 % ← con el 3,9 % llevaba un 30 % de más * iPhone 1,15 / 71,5 = 1,61 % * * Y hay una trampa que obligaba a compensar a mano: **el relleno en porcentaje se mide contra el * contenedor, no contra el propio elemento**. Por eso cada aparato va ahora envuelto en una * `.nsrapp-caja` de SU ancho — así el contenedor y el aparato miden lo mismo y el número que se * escribe aquí es el número real, sin correcciones. * * El radio también en porcentaje, con los dos valores del `/` calculados sobre la proporción para * que la esquina salga redonda y no ovalada. Un iPad es MUCHO menos redondo que un iPhone. */ .nsrapp-marco { --bisel: 3.92%; margin: 0; position: relative; background: #05050a; border-radius: 5.6% / 4.2%; padding: var(--bisel); /* Sobre claro el aparato ya destaca solo: basta una sombra proyectada de verdad. Sobre oscuro hacía falta además un filo blanco para que el marco negro no se fundiera con el fondo. */ box-shadow: 0 0 0 1px rgba(25, 25, 48, 0.16), 0 42px 72px -30px rgba(25, 25, 48, 0.5); } /** * EL BRILLO DEL CANTO. Un filo clarísimo por dentro del borde, que es lo que hace el marco metálico * de un iPhone o un iPad cuando le da la luz. Sin él el marco es una mancha negra plana. * * Va en un pseudoelemento y NO en la `box-shadow` del marco a propósito: media docena de reglas * redefinen esa sombra —el móvil del héroe, el trío, el del cierre— y el brillo se perdería en cada * una. Aquí es inmune, y hereda el radio para que siga la esquina. */ .nsrapp-marco::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); pointer-events: none; z-index: 2; } .nsrapp-marco img { display: block; width: 100%; height: auto; border-radius: 3.4% / 2.6%; } /* Apaisada: el mismo bisel físico sobre un ancho mayor da menos porcentaje. Y los dos radios se intercambian, que si no la esquina sale ovalada. */ .nsrapp-apaisada { --bisel: 3%; border-radius: 4.2% / 5.6%; } .nsrapp-apaisada img { border-radius: 2.6% / 3.4%; } /** * EL MÓVIL, con el dato publicado: Apple da el borde del iPhone 16/17 Pro en **1,15 mm** —lo anunció * como el más fino que ha hecho; el 15 Pro era 1,55—. Sobre 71,5 mm de ancho son **1,61 %**. * * Restar pantalla a cuerpo (71,5 − 66,6 = 2,45 mm) da más del doble, porque ese hueco incluye el * canto metálico lateral, que de frente no se ve. En el iPad el canto pesa mucho menos sobre el * total y por eso allí la resta sí se aproxima. */ .nsrapp-movil { --bisel: 1.61%; border-radius: 14.5% / 6.7%; } /** * LA CAJA. Existe solo para que el relleno en porcentaje del marco tenga contra qué medirse: el * contenedor pasa a medir exactamente lo que el aparato. Sin ella hay que escribir números * compensados —0,531 % para decir 1,61 %— que no se parecen a nada y se desincronizan al primer * cambio de ancho. */ .nsrapp-caja { display: block; } .nsrapp-caja > .nsrapp-marco { width: 100%; } .nsrapp-movil img { border-radius: 12.5% / 5.8%; } /* Las capturas del visor las gobiernan las pestañas y NO se les pone estado oculto de scroll: dos reglas peleándose por la misma opacidad es exactamente cómo se pierde contenido por el camino. */ /* ============================================================== REJILLA * Resumen, no argumento. TRES COLUMNAS FIJAS y nueve casillas justas: con `auto-fit` el reflujo * repartía cinco y una, y el fondo del contenedor asomaba por los huecos de las filas incompletas. * Sin fondo de contenedor y sin fondo de casilla no hay nada que pueda asomar. */ .nsrapp-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); margin-top: clamp(32px, 3.8vw, 52px); } /* El titular de la sección, centrado; las casillas siguen alineadas a la izquierda, que es como se leen tres columnas de texto corto. */ .nsrapp-ademas h2 { max-width: none; text-align: center; } .nsrapp-ademas .nsrapp-rotulo { text-align: center; } /** * Casilla en rejilla de dos columnas: el icono al lado del título, y la descripción DEBAJO DEL * TÍTULO —segunda columna—, no debajo del icono. Con el icono en bloque encima, el texto arrancaba * pegado al margen y la casilla no tenía eje. */ .nsrapp-casilla { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; row-gap: 3px; align-items: center; } .nsrapp-casilla .material-icons { grid-column: 1; grid-row: 1; font-size: 22px; color: var(--app-accent); margin: 0; } .nsrapp-casilla b { grid-column: 2; grid-row: 1; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #1a1a2e; } .nsrapp-casilla span:not(.material-icons) { grid-column: 2; grid-row: 2; color: var(--app-muted); font-size: 15px; line-height: 1.5; margin: 0; } /* El enlace de contacto de las preguntas. SUBRAYADO DE ENTRADA, no solo al pasar por encima: con una sola tinta tiene el mismo color que el texto y sin subrayado no se ve que sea pulsable. */ .nsrapp-enlace { color: var(--app-accent); font-size: 15px; font-weight: 600; display: inline-block; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .nsrapp-enlace:hover { text-decoration-thickness: 3px; } /* ====================================================== INSTALAR (HÉROE) * Insignias y QR en la misma fila: son la misma decisión para dos situaciones. El QR solo aparece * en escritorio —lo decide el servidor— porque allí las insignias no sirven para nada. */ /** * EL CÓDIGO A LA IZQUIERDA, A TODA ALTURA; a su derecha el texto encima y las insignias debajo. * * Los dos grupos se alinean por el CENTRO y no por la base: el QR es un cuadrado grande y, apoyado * abajo, dejaba un escalón feo contra un texto de dos líneas. */ .nsrapp-instalar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 26px; } .nsrapp-instalar-der { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .nsrapp-instalar .nsrapp-insignias { margin: 0; } /** * DOS CLASES, no una: el bloque del cierre tiene una regla que da estilo a sus `p` y una clase suelta * pierde contra ella —un elemento más una clase pesa más que una clase sola—. El texto salía a 18 px * abajo y a 15 arriba, y con eso el cuadrado del héroe y el del cierre no medían lo mismo. Es el * mismo tropiezo que tuvimos con los rótulos de sección. */ .nsrapp-instalar .nsrapp-instalar-txt { /* Dos líneas, no tres cortas: a 22ch se partía en «Escanea el código / para instalar / Bibliorol en tu móvil» y parecía un poema. */ max-width: 30ch; margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--app-text); /* Reparte las líneas en vez de dejar una larga y una corta suelta. */ text-wrap: balance; } /* ============================================================== QR */ /** * EL QR VA DESNUDO sobre el fondo claro de la página: sin plato blanco, sin marco y sin sombra. * * La zona de silencio que pide el formato QR la pone el propio hueco de la maqueta —el fondo de la * página ya es claro y uniforme—, así que dibujar un rectángulo blanco encima solo añadía un parche * a la vista. Donde SÍ hace falta es sobre fondo oscuro: la confirmación de compra lleva su propio * plato blanco, y por eso su estilo vive en la plantilla del hook y no aquí. */ .nsrapp-qr { display: block; width: 112px; height: 112px; flex: 0 0 auto; } /* ========================================================== PESTAÑAS * Un aparato, tres pantallas. Las gobierna el usuario pulsando; no rotan solas ni las mueve el * scroll — ver el porqué en page.tpl. */ .nsrapp-pest { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(24px, 3vw, 34px); } .nsrapp-pest button { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; border-left: 3px solid var(--app-border); padding: 13px 0 13px 18px; transition: border-color 0.18s ease, background 0.18s ease; } /* EL COLOR VA EXPLÍCITO: el tema tiene una regla propia sobre `b` que lo pinta de blanco, y aquí heredar no basta —comprobado en producción: el botón salía en #191930 y el `b` de dentro en #fff—. Los demás `b` de la página ya lo llevaban; a este se me olvidó. */ .nsrapp-pest button b { display: block; font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--app-text); } .nsrapp-pest button span { display: block; color: var(--app-muted); font-size: 14.5px; line-height: 1.5; margin-top: 3px; } @media (hover: hover) { .nsrapp-pest button:hover { background: rgba(25, 25, 48, 0.04); } } /** * La activa: filo dorado y fondo apenas teñido de dorado. Con `!important` y el id de la página * delante porque el tema pisa el fondo de los `button` con reglas de mayor especificidad — medido en * producción: el `aria-selected` cambiaba pero el fondo seguía saliendo transparente. */ /** * EL RESALTE RESPIRA POR ARRIBA, ABAJO Y DERECHA — POR LA IZQUIERDA NO, Y ES A PROPÓSITO. * * Sacarlo también por la izquierda obliga a inflar el relleno izquierdo para que el texto no se * mueva, y entonces el color queda mucho más ancho por ese lado: se lee descentrado. Es lo que * pasaba con `margin-left: -8px` y `padding-left: 26px`. * * Así el bloque ARRANCA EN EL BORDE DE LA COLUMNA, alineado con el titular y el párrafo, con la * barra dorada justo ahí — que es donde se espera— y se despega solo por los otros tres lados. Lo * que se saca por margen se devuelve por relleno, así que el texto no se mueve ni un píxel. */ #module-nosolorol_app-page .nsrapp-pest button[aria-selected="true"] { border-left-color: var(--app-brand) !important; background: rgba(244, 168, 54, 0.12) !important; margin: -4px -10px -4px 0; padding: 17px 10px 17px 18px; } /** * FUERA EL CERCO DEL TEMA. `button:focus { outline: 5px auto -webkit-focus-ring-color }` con * `outline-offset: -2px` dibuja un marco completo POR DENTRO del botón, y su color lo pone el acento * del sistema operativo: en un Mac configurado en naranja, sale un recuadro naranja. * * Al pulsar con el ratón se dispara `:focus` pero NO `:focus-visible`, así que hay que apagarlo en * `:focus` y devolver un cerco propio solo a quien navega con teclado. */ .nsrapp-pest button:focus { outline: none; } .nsrapp-pest button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; } /** * El visor. La PRIMERA captura va en flujo y es la que fija el alto; las otras dos se apilan encima * en absoluto. Las tres comparten proporción, así que al cambiar no hay salto de altura. */ /** * COLUMNAS A LA PAR Y TOPE DE ANCHO. Sin esto seguía el problema que vino a arreglar este bloque: * medido, la tablet salía a 898 px de alto contra 432 del texto, más del doble. Como es 3:4, cada * píxel de ancho son 1,3 de alto, así que el ancho hay que atarlo corto. */ /* El texto arranca ARRIBA, a la altura del canto superior de la tablet. Centrado dejaba el titular flotando a media altura y el bloque perdía la línea de lectura. Y la separación baja unos 40 px respecto al resto de bloques: aquí la columna de texto lleva las pestañas, así que las dos mitades se leen juntas y no necesitan tanto aire entre ellas. */ .nsrapp-conpestanas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 2.6vw, 44px); } .nsrapp-visor { position: relative; width: 100%; max-width: 452px; margin: 0 auto; } /* El fundido al cambiar de pestaña se queda: es la respuesta a una pulsación del usuario, no un efecto de scroll. Sin él, cambiar de pantalla es un salto seco. */ .nsrapp-visor .nsrapp-marco { transition: opacity 0.22s ease; } .nsrapp-visor .nsrapp-marco + .nsrapp-marco { position: absolute; inset: 0; } .nsrapp-visor .nsrapp-quieta { opacity: 0; pointer-events: none; } /* ============================================================= MANIFIESTO * Tres frases, grandes, y nada más. Desactiva de una sentada las tres sospechas de cualquiera que * instala la app de una tienda: que le van a cobrar, que le van a meter publicidad y que sin * cobertura no le va a servir. */ .nsrapp-manifiesto { padding: clamp(48px, 6vw, 88px) var(--lado); background: #dedbeb; border-top: 1px solid var(--app-border); text-align: center; } .nsrapp-manifiesto p { font-family: var(--display); font-size: clamp(20px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; margin: 0; color: #1a1a2e; text-wrap: balance; } /* Las dos últimas bajan de peso: la primera es la que tiene que quedarse. */ .nsrapp-manifiesto p + p { color: var(--app-muted); margin-top: 10px; } /* ============================================================== PREGUNTAS * ABIERTAS, sin acordeón. Panels, Apple Books y Libby las tres lo hacen así, y esconder detrás de * un clic lo más útil de la página no tiene defensa. La vía de contacto va al lado de las * preguntas, no debajo — copiado de Panels, que es donde mejor está resuelto. */ .nsrapp-preg-in { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(30px, 4vw, 70px); align-items: start; } .nsrapp-preg-lado h2 { margin: 0; } .nsrapp-preg-lado p { color: var(--app-muted); font-size: 16px; line-height: 1.6; margin: 14px 0 0; } .nsrapp-preg-lado .nsrapp-enlace { margin-top: 0; padding-top: 10px; } /* Dos columnas de preguntas dentro de la columna de preguntas: ocho en una sola tira son un muro. */ .nsrapp-preg-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 38px); } .nsrapp-preg h3 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: #1a1a2e; margin: 0; text-wrap: balance; } .nsrapp-preg p { margin: 8px 0 0; color: var(--app-muted); font-size: 15.5px; line-height: 1.6; } /* ============================================================== CIERRE * Mismo mensaje que el héroe y las insignias otra vez, junto al móvil con la bienvenida de la app: * lo último que se ve aquí es lo primero que se verá allí. El móvil también se corta por abajo. */ /* La escena del cierre repite la del héroe —tablet con el móvil montado— así que la columna se mide igual: la manda la escena y el texto se queda con lo que sobre. */ .nsrapp-cierre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 5vw, 76px); align-items: end; padding: var(--aire) var(--lado) 0; background: linear-gradient(180deg, var(--hondo), #dddaea); border-top: 1px solid var(--app-border); /* Aquí se recorta el móvil por abajo. */ overflow: clip; } /* El texto CENTRADO aunque el móvil vaya anclado abajo: pegados los dos al suelo quedaba un hueco muerto de casi 400 px sobre el titular, porque el alto de la sección lo fija el móvil. */ .nsrapp-cierre .nsrapp-txt { align-self: center; padding-bottom: var(--aire); } .nsrapp-cierre h2 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 0; color: #1a1a2e; text-wrap: balance; } .nsrapp-cierre p { color: var(--app-muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; margin: 14px 0 0; } /* La pareja, más contenida que en el héroe: aquí no manda, acompaña. Y se corta por abajo. */ /* Un 25 % más grandes que antes (340 → 425): como se cortan por abajo, se pueden permitir más tamaño sin comerse la sección — lo que sobra desaparece por el borde. */ .nsrapp-cierre .nsrapp-hero-ap { width: clamp(324px, 34vw, 459px); margin-bottom: clamp(-110px, -6vw, -50px); } .nsrapp-cierre .nsrapp-hero-ap .nsrapp-tableta { width: 100%; margin: 0; } .nsrapp-cierre .nsrapp-hero-ap .nsrapp-caja-movil { position: absolute; z-index: 2; left: -22%; bottom: 0; width: 33.2%; } .nsrapp-cierre .nsrapp-hero-ap .nsrapp-movil { box-shadow: 0 0 0 1px rgba(25, 25, 48, 0.18), 34px 24px 54px -16px rgba(20, 20, 38, 0.58); } /* ====================================================== MOVIMIENTO OFF */ /** * Una pared de 384 portadas moviéndose marea a bastante gente, y quien lo tiene desactivado lo tiene * por algo. Se para compuesta —desplazando filas alternas para que no queden alineadas— y las * capturas aparecen sin desplazamiento. */ @media (prefers-reduced-motion: reduce) { .nsrapp-barra { transition: none; } /* Sin desplazamientos ni dibujado: solo el fundido, que no marea. */ .nsrapp-js .nsrapp-eyebrow::before { animation: none; } .nsrapp-visor .nsrapp-quieta { transform: none; } .nsrapp-moviles .nsrapp-marco { transform: none !important; } } /* ==================================================== CARRUSEL EN MÓVIL * En escritorio las cuatro opciones se ven a la vez y se elige. En móvil eso no funciona: apiladas * ocupan todo el alto y empujan la captura fuera de la pantalla, así que lees las cuatro sin ver * ninguna. Se pasa a UNA a la vez con flechas. * * No es un carrusel automático: sigue mandando el usuario. Lo que cambia es que en vez de elegir * entre cuatro visibles, avanzas por ellas. */ .nsrapp-pest-nav { display: none; } @media (max-width: 900px) { /* Solo la activa. Las otras siguen en el HTML —el buscador y los lectores de pantalla las ven—, pero no compiten por el alto. */ .nsrapp-pest button { display: none; } /** * LA ACTIVA SE PINTA IGUAL QUE EN ESCRITORIO: con su barra dorada y su fondo. Aquí se le quitaban * los dos —«en móvil no hay entre qué elegir»— y el resultado era que la opción perdía la marca * de color que la identifica en el resto de la página. * * Lo único que cambia es que no es pulsable: la elección la hacen las flechas, y no debe parecer * que también se puede tocar el título. */ .nsrapp-pest button[aria-selected="true"] { display: block; pointer-events: none; } .nsrapp-pest { margin-top: 14px; } .nsrapp-pest button b { font-size: 17px; } .nsrapp-pest button span { font-size: 14.5px; } /** * LA CAPTURA, ATADA PARA QUE QUEPA EL CONJUNTO. La cuenta, en una pantalla de 667 px: la barra * fija se come 61 y quedan 606 útiles. La etiqueta ocupa ~70 y las flechas ~58, así que a la * captura le tocan 478 como mucho; a 4:3 con su bisel, eso son 366 px de alto y 280 de ancho. * * Antes la caja llegaba a 330 de ancho —431 de alto— y el conjunto se salía por abajo: veías la * captura o veías las flechas, pero no las dos. */ /** * LA CAPTURA SE MIDE CONTRA EL ANCHO REAL, no contra una pantalla concreta. * * Estaba en píxeles fijos y había que recalcularla a mano cada vez: a 375 cabía, a 360 se salía. * Con `calc` se reserva a cada lado lo que ocupa una flecha (32) más su separación de la imagen * (4) y un margen al borde (8) = 44, y la captura se queda con lo que sobre. * * Así las flechas caen SIEMPRE enteras fuera de la imagen y a 8 px del canto de la pantalla, * mida lo que mida: 287 de captura en un iPhone de 375, 272 en un Android de 360, 342 en un Pro * Max. El tope de 360 es para que en una tablet pequeña no se desmadre. */ .nsrapp-conpestanas { padding-left: 12px; padding-right: 12px; } .nsrapp-visor { max-width: min(calc(100vw - 88px), 360px); } /** * LAS FLECHAS, A LOS LADOS DE LA CAPTURA. Debajo obligaban a bajar la vista y costaban 58 px de * alto, que es justo lo que faltaba para que el conjunto cupiera. A los lados no cuestan nada: * ocupan el aire que ya sobra a izquierda y derecha de una tablet de 280 px. * * Va DENTRO de `.nsrapp-visor` (ver la plantilla): así `inset: 0` se mide contra la captura y no * contra la sección entera, que era donde acababan si colgaba de fuera. Solo son pulsables las * flechas, no el hueco de en medio, para no robarle el toque a la propia captura. */ /* Las flechas se salen 36 px por lado: como la captura reserva 44 a cada lado, la flecha (32 de ancho) queda entre el canto de la imagen y el borde de la pantalla, sin tapar nada. */ .nsrapp-pest-nav { display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 -36px; pointer-events: none; margin: 0; } .nsrapp-pest-flecha { display: flex; align-items: center; justify-content: center; width: 32px; height: 64px; border: 0; background: transparent; color: var(--app-text); cursor: pointer; padding: 0; pointer-events: auto; } /* Generosas: sobre fondo claro y sin caja que las sostenga, una flecha pequeña no se ve. */ .nsrapp-pest-flecha .material-icons { font-size: 40px; } .nsrapp-pest-flecha:active .material-icons { transform: scale(0.88); } .nsrapp-pest-flecha:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } } /* ============================================================== MÓVIL */ @media (max-width: 900px) { /* En pantalla estrecha la alternancia no existe: una columna y el texto siempre delante. */ /* `minmax(0, 1fr)` y no `1fr` a secas: con `1fr` la columna crece hasta caber su contenido y se lleva por delante el margen lateral de la sección. */ .nsrapp-show { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 40px); } .nsrapp-inv .nsrapp-txt { order: 0; } .nsrapp-show .nsrapp-txt p { max-width: none; } /** * «A TODO PLIEGO» SE ALINEA A LA IZQUIERDA EN PANTALLA ESTRECHA. * * Centrado tiene sentido en escritorio: es el único bloque a una columna y allí el titular cabe * en una línea. En un móvil el titular se parte igual, el párrafo ocupa cinco o seis líneas —y un * párrafo largo centrado se lee peor, porque el ojo pierde dónde empieza el renglón siguiente— y * además desentona con TODO lo demás de la página, que va a la izquierda. * * El aparato sigue centrado: eso no se toca. */ .nsrapp-ancho, .nsrapp-ancho .nsrapp-rotulo { text-align: left; } .nsrapp-ancho .nsrapp-txt { justify-self: stretch; } .nsrapp-ancho .nsrapp-txt p { margin-left: 0; margin-right: 0; } .nsrapp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* El héroe pasa a una columna: texto arriba y la pareja de aparatos debajo, centrada. */ .nsrapp-hero { align-items: stretch; padding: 96px 0 clamp(46px, 7vw, 70px); min-height: 0; } .nsrapp-hero-in { display: flex; flex-direction: column; gap: clamp(34px, 6vw, 52px); } .nsrapp-hero-txt { max-width: none; } /* El margen izquierdo compensa lo que el móvil se descuelga (-16 %): sin él la pareja se ve descentrada, porque «centrar» centra la tablet y el móvil sobresale solo por un lado. */ .nsrapp-hero-ap { width: min(340px, 74%); margin: 0 auto 0 calc(50% - 37% + 27px); } .nsrapp-preg-in { grid-template-columns: 1fr; } .nsrapp-preg-lado .nsrapp-enlace { padding-bottom: 6px; } .nsrapp-cierre { grid-template-columns: 1fr; align-items: start; justify-items: center; } .nsrapp-cierre .nsrapp-txt { padding-bottom: 0; text-align: center; } .nsrapp-cierre .nsrapp-insignias, .nsrapp-cierre .nsrapp-instalar { justify-content: center; } /** * CENTRADO DE VERDAD, no solo la tablet. El móvil va en absoluto a `left: -22%`, así que el * conjunto sobresale por la izquierda: centrando la caja, el grupo queda descentrado justo esa * mitad. Se compensa desplazándolo la mitad del vuelo — 11 % — hacia la derecha. */ .nsrapp-cierre .nsrapp-hero-ap { width: min(300px, 78%); margin-left: auto; margin-right: auto; transform: translateX(11%); } } @media (max-width: 760px) { /* Dos por dos. Y el filo de arriba en las dos de abajo, que si no la banda parece rota. */ .nsrapp-hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nsrapp-hecho { padding: 18px 14px; } .nsrapp-hecho:nth-child(odd) { border-left: 0; } .nsrapp-hecho:nth-child(n+3) { border-top: 1px solid var(--app-border); } .nsrapp-preg-lista { grid-template-columns: 1fr; } } @media (max-width: 640px) { /* Menos aire entre secciones: en una pantalla corta, 56 px arriba y abajo son 112 que no están enseñando nada. */ .nsrapp { --aire: 42px; } .nsrapp-hero { min-height: 0; } /* Dos tablets verticales en 360 px de ancho no se leen: una debajo de otra. */ .nsrapp-rejilla { grid-template-columns: 1fr; gap: 22px; } /* En la barra fija el texto sobra: lo que hace falta es la insignia. */ .nsrapp-barra p { display: none; } .nsrapp-barra { padding: 10px var(--lado); } /** * LOS TRES CABEN, ENCOGIÉNDOLOS. Antes se ocultaban el segundo y el tercero, y con uno solo el * bloque dejaba de contar lo que cuenta: que la app hace tres cosas distintas en el móvil. * * La cuenta: tres piezas solapadas un 15 % ocupan 2,7 anchos. En 390 px de pantalla quedan unos * 343 útiles, así que caben de sobra a 31vw ≈ 121 px cada una. */ .nsrapp-moviles { --movil: min(31vw, 130px); } /* Solo la tablet: su radio SÍ va en píxeles y aquí encoge mucho. El del móvil ya es porcentual y se ajusta solo — tocarlo aquí lo volvería a descuadrar. */ .nsrapp-marco { border-radius: 16px; padding: 7px; } .nsrapp-marco img { border-radius: 10px; } .nsrapp-movil { padding: 6px; } } /* ==================================================== CABECERA Y PIE * * TRATAMIENTO DE LANDING, portado de Vampiro y Amor de Otro Mundo. PrestaShop pone * `#module--` como id del body, así que todo cuelga de ahí y no se escapa. * * NO BASTA CON PONER LA CABECERA FIJA Y TRANSPARENTE: la altura la fija el tema en `.header-top` y en * su `.container`, y si no se resetean los dos la barra queda con el alto de siempre y el arreglo se * queda a medias. Eso es lo que me faltaba en la primera versión. * * EL DESENFOQUE VA EN `::before`, NUNCA EN `#header`: `backdrop-filter` crea bloque contenedor y * dejaría el cajón lateral del carrito —que es `fixed`— atado a la altura de la barra en vez del * viewport. Trampa ya documentada en las otras landings. */ #module-nosolorol_app-page #header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: transparent !important; height: auto !important; min-height: 0 !important; border-bottom: 1px solid rgba(244, 168, 54, 0.30); transition: border-color 0.25s ease; } /** * CABECERA CLARA, en consonancia con la página. * * El logotipo de la tienda es BLANCO SOBRE TRANSPARENCIA —el color vive en el canal alfa, el RGB es * todo blanco—, así que sobre barra clara desaparecería. Se pinta de negro con `brightness(0)`, que * lleva cualquier color a negro respetando el alfa. No se cambia el fichero: el `src` lo pone el * tema con `{$shop.logo}` y no es nuestro. */ #module-nosolorol_app-page #header::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.25s ease; } #module-nosolorol_app-page #header.nsr-scrolled::before { background: rgba(255, 255, 255, 0.94); } #module-nosolorol_app-page #header.nsr-scrolled { border-bottom-color: rgba(244, 168, 54, 0.55); } /* Fuera lo que distrae. OJO: el cajón lateral y la hamburguesa van FUERA de #header (son `fixed`), así que hay que ocultarlos por su id, no como descendientes. */ #module-nosolorol_app-page nav.header-nav, #module-nosolorol_app-page nav.breadcrumb, #module-nosolorol_app-page #nsr-drawer, #module-nosolorol_app-page #nsr-drawer-overlay, #module-nosolorol_app-page #_desktop_main_menu, #module-nosolorol_app-page #header .header-top-inner, #module-nosolorol_app-page #header #search_widget, #module-nosolorol_app-page #header .head-wishlist, #module-nosolorol_app-page #header .header-top .overlay, #module-nosolorol_app-page #header button[aria-label*="men" i], #module-nosolorol_app-page #nsr-hamburger-fixed { display: none !important; } /* AQUÍ es donde se gana la altura: el tema la impone en estos dos, no en #header. */ #module-nosolorol_app-page #header .header-top { position: relative !important; z-index: 1; background: transparent !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; } #module-nosolorol_app-page #header .header-top .container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 20px; padding: 9px 40px !important; /* CLAVADA A 51 px (33 del logotipo + 9 de relleno arriba y abajo). Sin este suelo, la barra depende de lo que haya cargado en cada momento y su canto baila mientras se pinta. */ min-height: 51px !important; height: auto !important; max-width: none !important; } @media (max-width: 600px) { #module-nosolorol_app-page #header .header-top .container { padding-left: 16px !important; padding-right: 16px !important; } } #module-nosolorol_app-page #header .header_logo, #module-nosolorol_app-page #header #desktop_cart, #module-nosolorol_app-page #header .user-info { width: auto !important; max-width: none !important; flex: 0 0 auto !important; float: none !important; } #module-nosolorol_app-page #header .blockcart, #module-nosolorol_app-page #header .blockcart-header, #module-nosolorol_app-page #header .user-info { margin: 0 !important; } #module-nosolorol_app-page #header .header_logo { order: 0; position: static !important; margin: 0 auto 0 0 !important; } #module-nosolorol_app-page #header .header_logo h1 { margin: 0; } /** * EL LOGOTIPO, CON SU HUECO RESERVADO DESDE EL PRIMER PINTADO. * * La plantilla del tema lo sirve con `loading="lazy"` Y SIN `width` NI `height`, así que hasta que * llega la imagen ocupa cero: la barra nace más baja y CRECE al cargar el logotipo. Eso es el salto * que se veía. Las otras landings tienen el mismo logotipo, pero al ser oscuras el crecimiento no * canta; sobre fondo claro y con un filo ámbar marcando el canto, se ve todo. * * `aspect-ratio: 5/1` es la proporción real del fichero (200 × 40), así que con la altura fijada el * ancho queda reservado sin haber descargado nada. * * `brightness(0)` y no `invert(1)`: invertir daría la vuelta a cualquier parte de color; esto lo * lleva a negro sea cual sea y conserva la transparencia. */ #module-nosolorol_app-page #header .logo { height: 33px !important; width: auto !important; aspect-ratio: 5 / 1; margin: 0 !important; filter: brightness(0); } #module-nosolorol_app-page #header .user-info { order: 1; } #module-nosolorol_app-page #header #desktop_cart { order: 2; } /* La cuenta y el carrito SE QUEDAN, a diferencia de Vampiro y Amor de Otro Mundo: aquellas van a tráfico frío de anuncios y aquí llega gente con la sesión abierta desde su biblioteca. Dejarla sin salida sería hostil. */ #module-nosolorol_app-page #header .user-info, #module-nosolorol_app-page #header .user-info *, #module-nosolorol_app-page #header .blockcart, #module-nosolorol_app-page #header .blockcart * { color: #1a1a2e !important; } #module-nosolorol_app-page #header .blockcart .mobile_count { background: #f4a836 !important; color: #14141f !important; } #module-nosolorol_app-page #header .blockcart .cart-products-count { background: transparent !important; color: #1a1a2e !important; } /** * LOS ICONOS VAN PINTADOS CON MÁSCARA CSS: lo que se ve es su `background-color`, no su `color`. * Poner solo `color` los deja del color que traiga el tema —claros— y sobre barra clara se pierden. */ #module-nosolorol_app-page #header .shopping-cart .icon, #module-nosolorol_app-page #header .user-info .user-info-title, #module-nosolorol_app-page #header .user-info .icon { background-color: #1a1a2e !important; } /* En el hover no vale el dorado: sobre barra clara da 1,9:1 y el icono se desvanece justo cuando el usuario lo está señalando. Se oscurece en vez de aclararse. */ #module-nosolorol_app-page #header #desktop_cart:hover .shopping-cart .icon, #module-nosolorol_app-page #header .user-info:hover .user-info-title, #module-nosolorol_app-page #header .user-info:hover .icon { background-color: #000 !important; } /** * EL DESPLEGABLE DE LA CUENTA Y EL CAJÓN DEL CARRITO. Los trae el tema en oscuro; sin tocarlos, al * pulsar el carrito en esta página se abre un panel negro en mitad de una página clara. Vampiro y * Amor de Otro Mundo hacen lo mismo pero al revés, porque sus landings sí son oscuras. */ #module-nosolorol_app-page #header .user-info .dropdown-menu { background: #fff !important; border: 1px solid rgba(25, 25, 48, 0.14) !important; border-top: 2px solid #f4a836 !important; border-radius: 10px !important; box-shadow: 0 24px 60px -24px rgba(25, 25, 48, 0.4) !important; } #module-nosolorol_app-page #header .user-info .dropdown-menu a { color: #1a1a2e !important; } #module-nosolorol_app-page #header .user-info .dropdown-menu a:hover { background: rgba(244, 168, 54, 0.16) !important; color: #000 !important; } /** * EL CAJÓN LATERAL DEL CARRITO. Portado del modelo de nosolorol_vampiro y nosolorol_adom, que lo * tienen resuelto — allí en oscuro, aquí en claro. * * Sin esto el cajón sale con los colores del tema en mitad de una página clara. Y no basta con el * modal: `.cart_block` es el panel que se despliega al pulsar el carrito, y va aparte. */ #module-nosolorol_app-page #header .cart_block, #module-nosolorol_app-page #header .cart_block .top-block-cart, #module-nosolorol_app-page #header .cart_block .cart-summary { background: #fff !important; } #module-nosolorol_app-page #header .cart_block { border-left: 1px solid rgba(25, 25, 48, 0.14) !important; box-shadow: -32px 0 90px -30px rgba(25, 25, 48, 0.35) !important; } #module-nosolorol_app-page #header .cart_block .top-block-cart { border-bottom: 1px solid rgba(25, 25, 48, 0.12) !important; color: #1a1a2e !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.12em; } #module-nosolorol_app-page #header .cart_block .cart-item { border-bottom: 1px solid rgba(25, 25, 48, 0.10) !important; } #module-nosolorol_app-page #header .cart_block, #module-nosolorol_app-page #header .cart_block a, #module-nosolorol_app-page #header .cart_block .product-name { color: #1a1a2e !important; } #module-nosolorol_app-page #header .cart_block .product-price, #module-nosolorol_app-page #header .cart_block .value, #module-nosolorol_app-page #header .cart_block .cart-total .value { color: #1a1a2e !important; font-variant-numeric: tabular-nums; } #module-nosolorol_app-page #header .cart_block .remove-from-cart { color: #8a8aa0 !important; } #module-nosolorol_app-page #header .cart_block .remove-from-cart:hover { color: #1a1a2e !important; } /* La X de cerrar el cajón. Va con MÁSCARA CSS —lo que se ve es su `background-color`, no el `color`—, y el tema la pinta de blanco: sobre el cajón claro era blanco sobre blanco. */ #module-nosolorol_app-page #header .blockcart .cart_block .close-icon { background-color: #1a1a2e !important; color: #1a1a2e !important; } #module-nosolorol_app-page #header .blockcart .cart_block .close-icon:hover { background-color: #000 !important; } /* La barra de envío gratis, en el dorado de la marca. */ #module-nosolorol_app-page #header .cart_block .fsb-bar-progress { background: #f4a836 !important; } /* SOLO COLOR, ni cuerpo ni relleno: el tema mete estos botones en cajas de ~182 px y caben justos. En ADOM ya se desbordaron por tocarles la tipografía; no se repite el error. */ #module-nosolorol_app-page #header .cart_block .btn-primary { background: #f4a836 !important; border-color: #f4a836 !important; color: #14141f !important; } #module-nosolorol_app-page #blockcart-modal .modal-content { background: #fff !important; border: 1px solid rgba(25, 25, 48, 0.14) !important; border-top: 2px solid #f4a836 !important; border-radius: 14px !important; box-shadow: 0 40px 100px -30px rgba(25, 25, 48, 0.5) !important; } #module-nosolorol_app-page #blockcart-modal .modal-header { background: transparent !important; border-bottom: 1px solid rgba(25, 25, 48, 0.12) !important; } #module-nosolorol_app-page #blockcart-modal .modal-title { color: #1a1a2e !important; } #module-nosolorol_app-page #blockcart-modal .modal-body { color: #545470 !important; } #module-nosolorol_app-page #blockcart-modal .modal-body strong { color: #1a1a2e !important; } /** * LOS DOS PIES DEL TEMA. Ocultar solo `#footer` deja un hueco al final de la página, y ése era el * agujero que se veía: además del `#footer` de siempre, `page.tpl` monta un `