/* ============================================================ BIMM STUDIO — vocabulario de los bloques de sección ============================================================ Aquí vive TODO el estilo de los bloques. Los de `bloques/` son sólo marcado, y no es manía de orden: Rank Math analiza el contenido de la página, y con el CSS incrustado lo que analiza es código. En la portada de Petroleum el 90 % del contenido eran estilos y quedaban 74 palabras reales. Un bloque nuevo se escribe con las clases que ya existen aquí. Si necesita una nueva, se añade a este archivo —y se sube `BIMM_VER`—, nunca al bloque. `comprobar-bloques.py` avisa de toda clase `bm-*` del marcado que no tenga regla aquí: es el fallo que en Petroleum costó una ronda entera. El sistema de color y las tipografías están en `bimm.css`. ============================================================ */ /* ── El filete ─────────────────────────────────────────────── La banda de 7px con el degradado de cuatro paradas que abre cada hoja de los documentos. Aquí abre el sitio, y es lo primero que se ve en los dos temas. Va fija: al hacer scroll sigue ahí, como el canto de un cuaderno. */ .bm-filete { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-marca); z-index: 100; } /* ── Estructura ────────────────────────────────────────────── */ .bm-sec { position: relative; padding: var(--sec-pad-y) var(--sec-pad-x); background: var(--papel); overflow: hidden; /* recorta las manchas, que se salen a propósito */ } .bm-sec--hondo { background: var(--papel-hondo); } .bm-cont { position: relative; z-index: 1; max-width: var(--cont-max); margin-inline: auto; width: 100%; } /* ── Las manchas ───────────────────────────────────────────── Calcadas de `formatos/comun/construir.py`: gradientes radiales que llegan a opacidad 0 en el 70 % del radio, colocados en las esquinas y alternando reparto hoja con hoja. Allá son ` (`bimm.css`), y como cada sección pinta el suyo encima, ese fundido casi no se veía: la página daba un salto seco. Esa `transition` del se queda —sirve para el cambio de tema del SISTEMA, que llega sin que nadie pulse nada y por tanto sin onda que dibujar—. CÓMO FUNCIONA: el JS llama a `document.startViewTransition()`. El navegador fotografía la página antes y después, y aquí sólo se dice cómo pasar de una foto a la otra. Lo único que se anima es un `clip-path` sobre una imagen ya compuesta: NO se repinta la página por fotograma, que en una página llena de `backdrop-filter` es la diferencia entre fluido y congelado. El centro y el radio los escribe el JS en `--bm-onda-*` sobre el , y los pseudoelementos de la transición los heredan de ahí. */ /* PRIMERO SE APAGA EL FUNDIDO POR OMISIÓN. Sin esto se verían los dos a la vez —el fundido cruzado del navegador y nuestro círculo— y el resultado es un barrido gris a mitad de camino. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* La foto VIEJA se queda quieta debajo y la NUEVA se descubre encima. Al revés —encogiendo la vieja— se ve el fondo del navegador por el hueco. */ .is-cambiando-tema::view-transition-old(root) { z-index: 0; } .is-cambiando-tema::view-transition-new(root) { z-index: 1; /* La curva es la de `--tr-pildora`, la de cajón: arranca decidida y frena largo. Va escrita porque esa variable es una `transition` entera, no una curva suelta, y aquí hace falta sólo la curva. 760ms y no los 520 con los que nació: lo pidió Isaac el 2/sep/2026 tras verla rodar. La onda cruza la pantalla ENTERA, y a medio segundo se lee como un parpadeo en vez de como un barrido. El tope de seguridad del JS —el `setTimeout(quita, 1500)`— sigue por encima, así que no hay que tocarlo. */ animation: bm-onda-tema 760ms cubic-bezier(0.32, 0.72, 0, 1) forwards; } @keyframes bm-onda-tema { from { clip-path: circle(0 at var(--bm-onda-x) var(--bm-onda-y)); } to { clip-path: circle(var(--bm-onda-r) at var(--bm-onda-x) var(--bm-onda-y)); } } /* Quien pide menos movimiento no recibe una onda cruzando la pantalla. El JS ya se salta la transición entera; esto es el cinturón por si alguna vez se dispara una por otro camino. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ── El botón de menú de móvil ─────────────────────────────── A quién le sirve y cuándo: a quien entra desde un teléfono y quiere ir a Servicios, Casos, Bimm App o Nosotros. Hasta ahora esos cuatro enlaces simplemente no existían en móvil —estaban en `display: none` y no había nada que los abriera—, así que desde un teléfono no se podía llegar a ninguna otra página del sitio. EL ICONO CAMBIA CON EL ESTADO DE LA BARRA, y no por adorno: arriba la barra va a todo lo ancho y las tres rayas son el gesto que todo el mundo conoce; ya flotando, la píldora es estrecha y una flecha «›» ocupa menos y apunta a que hay algo detrás. Es el mismo botón: cambia el dibujo, no la función. Abierto, las rayas se cruzan en aspa y la flecha gira un cuarto de vuelta. El estado sale de `aria-expanded`, que ya tiene que estar ahí para el lector de pantalla: una clase de más diría lo mismo dos veces y podrían desincronizarse. */ .bm-cab__menu { display: none; /* la media query de móvil lo enciende */ position: relative; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; } .bm-cab__rayas { display: grid; gap: 5px; } .bm-cab__rayas i { display: block; width: 22px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--tr-media), opacity var(--tr-media); } /* 🚨 ESTA MEDIA QUERY VA AQUÍ Y NO ARRIBA, CON LAS OTRAS DOS DE MÓVIL. La primera vez se puso junto a `.bm-cab__nav` y `.bm-cab__fin`, que están unas 200 líneas más arriba, y el botón NO APARECIÓ en el teléfono: una media query no añade especificidad, así que entre `display: flex` arriba y el `display: none` de la regla base aquí abajo gana la de abajo, que es la última. No dio ningún error; simplemente no había botón, y la píldora se medía como si sólo llevara el logotipo. Si se mueve, se rompe otra vez. */ @media (max-width: 860px) { /* EL BOTÓN SE QUEDA EN LA ESQUINA DERECHA DE LA PANTALLA, con las tres rayas. Lo pidió así Isaac el 2/sep/2026, y es la cuarta y última forma que se probó ese día: burbuja propia separada, círculo fusionado, media luna recortada, en la fila pegado al logotipo —y esta—. LA IDEA: al flotar, la píldora SE ENCOGE SOBRE EL LOGOTIPO y el botón NO SE MUEVE. Se queda donde ya estaba en reposo, en la esquina, mientras la burbuja se aleja de él. No hay dos piezas persiguiéndose. Por eso hace falta levantar el recorte: `overflow: hidden` en `.bm-cab` existe porque EL RECORTE ES LA ANIMACIÓN del colapso de escritorio, pero en móvil la píldora NO SE COLAPSA NUNCA —el JS lo decide con `colapsable = flotando && !movil`—, así que aquí no hace ningún trabajo. El botón va ABSOLUTO contra la cabecera —que es `fixed`, o sea bloque contenedor— y no como pieza de la fila. Así se centra solo con `top: 50%` en los dos estados, sin depender del alto de la barra, que cambia al flotar. Y por eso NO cuenta en `piezasVisibles()` del JS: no ocupa sitio dentro de la píldora. */ .bm-cab { overflow: visible; } .bm-cab__menu { display: flex; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: right var(--tr-pildora); } /* 🚨 LA CUENTA, que es lo único delicado de esto. `right` se mide desde la orilla de la PÍLDORA, no de la pantalla. Al flotar, la píldora se mete `--bm-inset` por cada lado, así que para que el botón acabe a `--sec-pad-x` de la ORILLA DE LA PANTALLA hay que restarle ese inset: sale negativo y lo empuja fuera de la píldora. Y `--sec-pad-x` no es un número elegido: es el MISMO relleno lateral que tiene la barra en reposo, o sea justo donde el botón ya estaba. Con esto **el botón no se mueve ni un píxel** entre los dos estados; lo único que viaja es la burbuja. Antes iba a `-3.25rem` fijos con un `max()` de tope, que lo dejaba pegado a la píldora y persiguiéndola. No hace falta tope de seguridad: al derivarse del inset, la cuenta se corrige sola. Antes de que el JS mida, `--bm-inset` vale su reserva de 0.75rem y el botón queda a 12px de la orilla interior —dentro de la pantalla—, que era justo el fallo que aquel `max()` venía a tapar. */ .bm-cab.is-flota .bm-cab__menu { right: calc(var(--sec-pad-x) - var(--bm-inset, 0.75rem)); } } /* La barra de móvil no se colapsa nunca, pero si la clase llegara a ponerse el botón no puede apagarse: es la única salida al resto del sitio. */ .bm-cab.is-colapsada .bm-cab__menu { opacity: 1; transform: none; pointer-events: auto; } .bm-cab__menu[aria-expanded='true'] .bm-cab__rayas i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .bm-cab__menu[aria-expanded='true'] .bm-cab__rayas i:nth-child(2) { opacity: 0; } .bm-cab__menu[aria-expanded='true'] .bm-cab__rayas i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── El panel de menú de móvil ─────────────────────────────── VIVE FUERA DEL

a propósito. La cabecera lleva `overflow: hidden` —el recorte ES su animación— y un panel colgando dentro se vería cortado a la altura de la píldora. Es la misma razón por la que en `Navbar.tsx` de la landing el menú también está fuera. `top` lo escribe el JS con el borde inferior REAL de la barra: la barra cambia de alto al flotar, y con un número escrito aquí el panel se despegaría o se montaría encima según el estado. */ .bm-movil { position: fixed; top: var(--bm-movil-top, 4.75rem); left: 0.75rem; right: 0.75rem; z-index: 89; /* debajo de la cabecera (90), encima de todo lo demás */ max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; border-radius: 24px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur); transition: max-height var(--tr-lenta), opacity var(--tr-media); } .bm-movil.is-abierto { max-height: 80vh; opacity: 1; pointer-events: auto; } /* En escritorio no existe: el botón que lo abre tampoco. */ @media (min-width: 861px) { .bm-movil { display: none; } } .bm-movil__nav { display: flex; flex-direction: column; padding: 1rem 1rem 0; } .bm-movil__enlace { display: block; padding: 0.85rem 1rem; border-radius: 12px; font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 500; color: var(--tinta); text-align: center; transition: background-color var(--tr-rapida), color var(--tr-rapida); } .bm-movil__enlace:hover, .bm-movil__enlace:focus-visible { background: var(--linea); color: var(--acento); } /* Las dos piezas que se fueron de la barra. Van juntas y abajo porque las dos son de «ajustes y acción», no de navegación. */ .bm-movil__pie { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0.75rem 1rem 1.25rem; margin-top: 0.5rem; border-top: 1px solid var(--linea); } .bm-movil__cta { padding: 0.7rem 1.6rem; min-height: 42px; font-size: 0.9rem; } /* Servicios, dentro del menú de móvil. AHORA SÍ ES UN SUBMENÚ (2/oct/2026): antes salía desplegado —«seis renglones escondidos son un acertijo»— e Isaac pidió que arranque retraído y se abra como submenú. El rótulo «Servicios» SIGUE SIENDO UN ENLACE (mismo criterio que el desplegable de escritorio) y la flecha de al lado es la que abre y cierra. Sin JS no hay flecha y la lista se queda abierta: nunca se pierde un destino. Y por eso el panel pasa a poder rodar cuando está abierto: con doce renglones y el pie, en un teléfono corto el botón de cotizar caía fuera del recorte y no había forma de llegar a él. */ .bm-movil__sub { display: flex; flex-direction: column; margin: 0.15rem 0 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } /* ⚠ CENTRADOS COMO SUS PADRES. Primero se sangraron contra un riel a la izquierda —que es lo que uno dibuja para decir «esto cuelga de aquí arriba»— y en el teléfono se leía como OTRO menú pegado al de al lado: los seis enlaces de arriba van centrados, y un riel a la izquierda no cuelga de nada que esté encima suyo. Aquí la jerarquía la dan el tamaño, el color y los dos filetes que encierran el grupo, no la sangría. */ .bm-movil__subenlace { display: block; padding: 0.45rem 1rem; border-radius: 10px; font-family: var(--fuente-titulo); font-size: 0.86rem; font-weight: 500; color: var(--tinta-suave); text-align: center; transition: background-color var(--tr-rapida), color var(--tr-rapida); } .bm-movil__subenlace:hover, .bm-movil__subenlace:focus-visible { background: var(--linea); color: var(--acento); } .bm-movil.is-abierto { overflow-y: auto; } /* El renglón de Servicios: el enlace centrado como los demás y la flecha colgada a la derecha, con su propio blanco de 44px para que tocar una cosa no sea tocar la otra. */ .bm-movil__grupo { position: relative; } .bm-movil__abre { position: absolute; right: 0.25rem; top: 50%; display: none; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tinta-suave); cursor: pointer; transition: background-color var(--tr-rapida), color var(--tr-rapida); } .bm-movil__abre svg { transition: transform var(--tr-media); } .bm-movil__abre[aria-expanded='true'] svg { transform: rotate(180deg); } .bm-movil__abre:hover, .bm-movil__abre:focus-visible { background: var(--linea); color: var(--acento); } .js-on .bm-movil__abre { display: grid; } .js-on .bm-movil__sub:not(.is-abierto) { display: none; } /* Al abrirse, los renglones bajan un poco y aparecen: dice de dónde salen. Sólo `transform` y `opacity`. */ .js-on .bm-movil__sub.is-abierto { animation: bm-sub-entra var(--tr-media) both; } @keyframes bm-sub-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-on .bm-movil__sub.is-abierto { animation: none; } .bm-movil__abre svg { transition: none; } } /* ── El desplegable de Servicios ────────────────────────────── 🚨 VA FUERA DEL

, y no es una preferencia: `.bm-cab` lleva `overflow: hidden` —el recorte ES la animación de la píldora— y un panel colgando dentro saldría cortado a la altura de la barra. Mismo motivo, y mismo remedio, que el menú de móvil. Estando fuera, `top` y `left` los ESCRIBE EL JS: la píldora se mueve y cambia de alto al flotar, así que un número aquí serviría para un estado y mentiría en el otro. Se abre con `transform` y `opacity`, que son lo único gratis por fotograma; `visibility` lo saca del recorrido del teclado sin quitarle la caja, así que el JS puede medir su ancho para centrarlo aunque esté cerrado. LAS DOS COLUMNAS SON LAS DOS FORMAS DE CONTRATAR —una vez o cada mes—, que es la división real del negocio y la misma que ya usa `/servicios/`. No es una retícula para que quepan: es la respuesta a la primera pregunta que alguien se hace mirando este menú. */ .bm-desp { position: fixed; top: var(--bm-desp-top, 4.75rem); left: var(--bm-desp-x, 50%); z-index: 89; width: max-content; max-width: calc(100vw - 1.5rem); padding: 1.1rem 1.25rem 0.9rem; border-radius: 20px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.9rem; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--tr-media), transform var(--tr-media), visibility 0s linear 240ms; } .bm-desp.is-abierto { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--tr-media), transform var(--tr-media), visibility 0s; } /* En un teléfono no existe: ahí Servicios se despliega dentro del menú. */ @media (max-width: 860px) { .bm-desp { display: none; } } .bm-desp__col { display: flex; flex-direction: column; gap: 0.15rem; } .bm-desp__rotulo { font-family: var(--fuente-titulo); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); margin: 0 0 0.55rem; padding-left: 0.7rem; } .bm-desp__enlace { display: block; padding: 0.5rem 0.7rem; border-radius: 10px; transition: background-color var(--tr-rapida); } .bm-desp__enlace:hover, .bm-desp__enlace:focus-visible { background: var(--linea); } .bm-desp__nombre { display: block; font-family: var(--fuente-titulo); font-size: 0.92rem; font-weight: 500; color: var(--tinta); white-space: nowrap; } .bm-desp__enlace:hover .bm-desp__nombre, .bm-desp__enlace:focus-visible .bm-desp__nombre { color: var(--acento); } /* El renglón de debajo es lo que hace que esto sea un menú y no una lista de sustantivos: con «Sitios web / Aplicaciones / Branding» a secas hay que entrar a las tres para saber cuál es la tuya. */ .bm-desp__pie2 { display: block; font-size: 0.78rem; line-height: 1.35; color: var(--tinta-suave); margin-top: 0.1rem; } .bm-desp__todo { grid-column: 1 / -1; margin-top: 0.5rem; padding: 0.7rem 0.7rem 0.1rem; border-top: 1px solid var(--linea); font-family: var(--fuente-titulo); font-size: 0.84rem; font-weight: 600; color: var(--acento); display: inline-flex; align-items: center; gap: 0.45rem; } .bm-desp__todo::after { content: ''; width: 14px; height: 1.5px; background: currentColor; transition: width var(--tr-media); } .bm-desp__todo:hover::after { width: 24px; } /* Mientras el panel está abierto, el enlace de la barra se queda subrayado: sin eso, el panel flota sin decir de cuál de los seis rótulos ha salido. */ .bm-cab__enlace[aria-expanded='true']::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .bm-desp { transform: none; transition: opacity var(--tr-rapida), visibility 0s; } .bm-desp.is-abierto { transform: none; } } /* ── Hero ───────────────────────────────────────────────────── */ .bm-hero { padding-top: clamp(4rem, 9vw, 7rem); } .bm-hero__titular { font-size: clamp(2.5rem, 6.6vw, 4.6rem); max-width: 17ch; margin-bottom: 1.4rem; } .bm-hero__entrada { margin-bottom: 2.4rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); } .bm-hero__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* ── Pixel, en el hueco de la derecha ──────────────── El hero es texto alineado a la izquierda y bajo el titular la mitad derecha quedaba vacía. Aquí va la mascota de la fase de desarrollo. 🚨 ABSOLUTO, Y ESA ES LA CONDICIÓN DE QUE EXISTA. El mismo 2/sep se recortaron 168px del hero para que las garantías entraran en una ventana de 620px; cualquier cosa añadida EN EL FLUJO lo desharía. Sacado del flujo, ocupa hueco que ya estaba vacío y el alto del hero no se mueve. Cuelga de `.bm-cont`, que ya es `position: relative`, y se ancla a su pie: así la mascota se apoya en la misma línea que cierra el texto, midan lo que midan el titular y la entradilla. */ .bm-hero__pixel { display: none; } /* ⚠ DESDE 1100px Y NO DESDE 861, y se midió por qué: entre 861 y ~1100 el titular todavía ocupa cuatro renglones y se estira hacia la derecha, justo por donde entraría la mascota. Por debajo de ese ancho no hay hueco que llenar —y en teléfono, además, sería alto de más—. */ @media (min-width: 1100px) { .bm-hero__pixel { display: block; position: absolute; /* 🚨 PEGADA A LA ORILLA DE LA PANTALLA, NO AL CONTENEDOR. Con `right: 0` se anclaba a `.bm-cont`, que a 1440 acaba en x=1310: la mascota quedaba a 130px del borde, flotando en medio del hueco y leéndose como una calcomanía pegada al fondo. Lo dijo Isaac: «se supone que sale de dónde». Tocando la orilla ya se lee como que entra desde fuera de cuadro. `calc(50% - 50vw)` lo resuelve a CUALQUIER ancho sin un solo número escrito: el `50%` se resuelve contra el contenedor y el `50vw` contra la ventana, así que la resta vale exactamente lo que le sobra al contenedor por ese lado —el centrado más el relleno de la sección—. Un valor fijo habría fallado en cuanto el contenedor deja de tocar su ancho máximo. Y de paso ALEJA la mascota del titular: a 1280 pasa de solaparse con el último renglón a dejarle aire. Por eso el alto no sube: el sitio ganado se gasta en holgura, no en tamaño. */ right: calc(50% - 50vw); bottom: 0; width: auto; height: clamp(230px, 26vw, 340px); /* No captura el cursor: el imán de los botones y el anti-imán del titular viven a su lado, y un adorno que se traga el puntero los apagaría sin que se vea por qué. */ pointer-events: none; } /* Las dos capas ocupan la caja entera y se apilan. Al salir del flujo con `position:absolute`, la caja se quedaría sin alto: se lo da la capa del CUERPO, que vuelve a ser estática. Los ojos, encima y absolutos. ⚠ `will-change` va SOLO en las dos capas y no en la caja: promueve cada una a su propio plano para que moverlas no repinte el hero entero. */ .bm-pixel__capa { display: block; height: 100%; width: auto; will-change: transform; } /* El CUERPO es la capa que se queda en el flujo, y por eso es la que le da el alto a la caja: los ojos son absolutos y no miden nada. `relative` además lo mete en el mismo contexto de apilado, por debajo de los ojos, sin necesidad de un `z-index` que luego haya que perseguir. */ .bm-pixel__cuerpo { position: relative; } /* La CAJA de los ojos es la que se mueve con el cursor. Dentro viven los cuatro estados apilados y sólo uno visible: así el cambio de estado y el seguimiento son cosas independientes y ninguna pisa a la otra. Si cada estado llevara su propio transform, al cambiar de ojo se perdería la posición y daría un tirón. */ .bm-pixel__ojos { position: absolute; inset: 0; } .bm-pixel__ojo { position: absolute; inset: 0; height: 100%; width: auto; opacity: 0; /* Corto a propósito: un parpadeo con fundido largo no se lee como parpadeo, se lee como que la imagen tarda en cargar. */ transition: opacity 90ms linear; } .bm-pixel__ojo.is-visible { opacity: 1; } /* 🚨 EL ORIGEN DE GIRO ES DISTINTO EN CADA OJO, y en porcentaje. Los ojos no están en el centro del lienzo —la cara de Pixel está girada y el derecho queda más arriba y a la derecha—, así que un origen común los haría orbitar. Estos dos números salen de medir dónde cae cada ojo en el recorte de 506x680: (156,295) y (239,257). En % para que aguanten el escalado. */ .bm-pixel__ojo--izq { transform-origin: 30.8% 43.4%; } .bm-pixel__ojo--der { transform-origin: 47.2% 37.8%; } .bm-pixel__ojo--gira { animation: bm-remolino 850ms linear infinite; } @keyframes bm-remolino { to { transform: rotate(360deg); } } } /* Las cifras del pie del hero, como las de la portada de la cotización: separadas por un filete y con el número en grande. */ .bm-cifras { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--linea); } .bm-cifra { display: flex; flex-direction: column; gap: 2px; } .bm-cifra__n { font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.05; } .bm-cifra__q { font-size: 0.82rem; line-height: 1.35; color: var(--tinta-suave); max-width: 22ch; } /* ── Casos ─────────────────────────────────────────────────── El color de cada tarjeta es el de LA MARCA DEL CLIENTE, no el de Bimm: salen del login de su app (Gorillax), del favicon (Petroleum) y de sus logotipos. Viven aquí y no en un `style=` del bloque, porque el bloque es sólo marcado — y porque un color suelto en el marcado se queda atrás el día que la marca del cliente cambie. El logo va como MÁSCARA: del PNG sólo importa el canal alfa y el color lo pone el fondo. Así un logotipo pensado para fondo claro no llega aquí como una mancha. */ .bm-caso { display: flex; flex-direction: column; gap: 0.5rem; } /* 🚨 VA ENCADENADO `.bm-card.bm-caso` Y NO ES REDUNDANTE: es lo único que hace que esta regla exista. `.bm-card:hover` (más abajo en este archivo) pesa lo mismo y va DESPUÉS, así que ganó siempre y el borde se teñía del acento del sitio en vez del color del cliente. Estaba así desde que se escribió la sección —nadie lo vio porque el síntoma es un color que SÍ cambia, sólo que al equivocado—. Lo mismo vale para el relleno y el neón de más abajo. */ .bm-card.bm-caso:hover { border-top-color: var(--marca); } /* ── El logotipo del cliente como marca de agua ────────────── En reposo el logotipo es GRANDE y tenue, anclado arriba a la izquierda y recortado por el canto de la tarjeta: es fondo, y el texto le pasa por encima. Al activarse SE RECOGE a su insignia de 40px, se vuelve opaco, y es LA TARJETA la que se enciende en neón del color del cliente. 🚨 EL LOGOTIPO SALE CON SU COLOR, NO TEÑIDO. La primera versión (3/sep, mediodía) los usaba a todos de máscara teñida con `--marca`. Isaac lo cortó: «esos son del color prefijo». Y además se perdía información — el de Consulting lleva blanco y negro DENTRO del círculo verde, y de máscara quedaba un disco verde plano, que fue justo lo que reportó. 🚨 PERO DOS SÍ SE TIÑEN, Y NO ES UNA EXCEPCIÓN CAPRICHOSA: son los MONOCROMOS. Medido en los PNG: gorillax #060606 negro veta-fina #ede8e2 casi blanco petroleum #cba705 dorado propio consulting #7aae26 + blanco + negro arcotechos #2263a4 azul propio Un logotipo negro sobre el tema oscuro no se ve, y uno blanco sobre el papel tampoco. Los dos monocromos van de máscara teñida con `var(--tinta)`, que ya es negra en claro y blanca en oscuro, así que cambian solos con el tema. Isaac señaló el caso de Gorillax; Veta Fina es el mismo caso al revés y por eso entra aquí. Los otros tres van como IMAGEN, con su color de manual de marca intacto. */ .bm-caso { --logo-lado: 150px; /* lado en reposo */ --logo-x: 1.35rem; /* desde el canto DERECHO */ --logo-y: 1.4rem; /* … y desde el canto de ABAJO */ --logo-fin: 64px; /* lado ya recogido. Era 40 y a Isaac le parecía pequeño (22/sep). */ /* 🚨 CADA LOGOTIPO SE PINTA DE UN TAMAÑO DISTINTO CON EL MISMO `background-size`, y por eso existe este factor. Con la insignia en 40px, midiendo sobre la captura de las cinco tarjetas activadas el lado mayor de lo que DE VERDAD se ve, salía esto: Gorillax 40 x 40 Consulting 36 x 36 Petroleum 40 x 41 Arcotechos 36 x 37 Veta Fina 40 x 42 Un 10% entre el mayor y el menor, y Isaac lo cazó a ojo: «todos del mismo tamaño». Las causas son del archivo, no del diseño: Arcotechos trae margen transparente dentro del PNG (su tinta ocupa 500x490 de un lienzo de 512) y el aro exterior del globo de Consulting es OSCURO, así que sobre la tarjeta negra no se ve y el dibujo lee más chico de lo que mide. 🚨 Y HAY QUE MEDIR AL TAMAÑO FINAL, NO AL VIEJO. La primera tanda de factores salió de la medida a 40px y **se pasó**: a 64px, Consulting se fue a 70 y Arcotechos a 65. El motivo es que a 40px el navegador reduce mucho el PNG y los bordes se apagan al mezclarse, así que el dibujo MIDE menos de lo que mide con sitio de sobra. O sea que el defecto se corrige solo en parte al agrandar: a 64px, Consulting ya sólo necesita un 1.6%. Los números de abajo son la segunda pasada, ya medida a 64px, y los cinco pintan 64. ⚠ Si se cambia un PNG o el tamaño de la insignia, se vuelve a medir: el número viejo deja de valer y no lo avisa nadie. */ --logo-ajuste: 1; --logo-fx: 1.35rem; /* dónde queda, desde el canto DERECHO */ --logo-fy: 14px; /* … y desde el canto de ARRIBA */ /* 🚨 LOS DOS ESTADOS, ESCRITOS UNA VEZ CADA UNO. En reposo: GRANDE, tenue y ENTERO, apoyado en la esquina INFERIOR DERECHA. Activo: pequeño, opaco y recogido en la esquina SUPERIOR DERECHA. Lo pidió Isaac el 22/sep. El viaje queda pegado al canto derecho, así que el logotipo no cruza por encima del texto en ningún momento. 🚨 NADA SE SALE DE LA TARJETA, y es una corrección del mismo día: la primera versión del reposo sobresalía 34px por la derecha y 30 por abajo, y `.bm-card` lleva `overflow: hidden`, así que el logotipo aparecía MORDIDO por dos cantos. Isaac: «se corta el logo, haz que no se corten». Los cuatro números son offsets POSITIVOS y ninguno es menor que el relleno de la tarjeta: `--logo-x` y `--logo-fx` valen el relleno lateral de `.bm-card` y `--logo-y` el vertical, así que el logotipo cae a plomo con el canto del texto en las dos posiciones. **Si alguno vuelve a ser negativo, vuelve el mordisco.** */ --logo-sitio-reposo: right var(--logo-x) bottom var(--logo-y); --logo-tam-reposo: calc(var(--logo-lado) * var(--logo-ajuste)); --logo-sitio-activo: right var(--logo-fx) top var(--logo-fy); --logo-tam-activo: calc(var(--logo-fin) * var(--logo-ajuste)); } /* 🚨 YA NO SE RESERVA SITIO ARRIBA (22/sep/2026). Había `padding-top: 14 + 40 + 8 = 62px` en dos reglas encadenadas, porque la insignia recogida caía en la esquina superior IZQUIERDA, justo encima del rótulo. Isaac lo mandó al otro lado: «en el lado superior derecho hay más espacio en blanco». Y ahí no hay nada que esquivar en vertical —el rótulo y el título son cortos y acaban mucho antes del canto—, así que la reserva se hace en HORIZONTAL, que no cuesta alto, y las tarjetas pierden los 40px de más que las hacían más largas que la de cierre. Ahora miden lo mismo. Lo que se reserva a la derecha va abajo, en `.bm-caso > .bm-caso__rubro`. */ /* 🚨 EL SELECTOR LLEVA `.bm-caso >` Y SIN ESO NO FUNCIONA NADA DE ESTO. Más abajo, en la sección del foco del cursor, está `.bm-card > * { position: relative; z-index: 1 }`. Pesa lo mismo que `.bm-caso__logo` a secas —una clase— y va DESPUÉS, así que ganaba: el logotipo se quedaba en `relative`, o sea EN EL FLUJO, ocupando sus 150px de alto y empujando todo el texto hacia abajo. Eso —y no el relleno— era el «las tarjetas se ven muy largas» que reportó Isaac. Es el mismo tropiezo que ya está documentado en `.bm-fase__mascota`, y van dos: en este archivo, cualquier hijo directo de `.bm-card` que necesite salirse del flujo tiene que ganarle a esa regla por peso. */ .bm-caso > .bm-caso__logo { /* 🚨 LA CAPA OCUPA LA TARJETA ENTERA Y LO QUE VIAJA ES EL DIBUJO, no la caja. Antes era una caja de 150px anclada a una esquina que se movía con `transform`, y así NO se puede ir de abajo a arriba: el `translate` tendría que valer «el alto de la tarjeta menos tanto», y ese alto lo decide la rejilla en cada fila y en cada ancho de pantalla. `background-position` sí sabe dónde está el canto de abajo sin que nadie se lo diga, y admite `bottom` y `top` en la misma declaración. ⚠ `.bm-card` lleva `overflow: hidden`: lo que se salga se PIERDE, y por eso los offsets del reposo son positivos. Lo que se pierde es que esto PINTA en vez de componer. Se pagan 180ms de repintado en UNA tarjeta —la señalada—, en un sitio que ya le anima la sombra a esa misma tarjeta, que cuesta más. */ position: absolute; inset: 0; margin: 0; background-repeat: no-repeat; opacity: 0.16; pointer-events: none; /* 🚨 180ms, NO 620. La primera versión usaba la curva de muelle y los 620ms de la baraja: en una tarjeta que se señala al pasar, eso no se lee como suavidad sino como retraso —Isaac: «tiene que activarse al instante»—. El muelle vale para lo que el cursor EMPUJA; esto es un acuse de recibo y tiene que ir por delante del ojo. La curva es la de salida del sistema, que arranca seca. */ transition: background-position 180ms cubic-bezier(0.22, 0.8, 0.3, 1), background-size 180ms cubic-bezier(0.22, 0.8, 0.3, 1), -webkit-mask-position 180ms cubic-bezier(0.22, 0.8, 0.3, 1), mask-position 180ms cubic-bezier(0.22, 0.8, 0.3, 1), -webkit-mask-size 180ms cubic-bezier(0.22, 0.8, 0.3, 1), mask-size 180ms cubic-bezier(0.22, 0.8, 0.3, 1), opacity 140ms linear; } /* Los tres que tienen color propio: la imagen, sin tocar. */ .bm-caso--petroleum .bm-caso__logo { background-image: url(/wp-content/uploads/2026/10/petroleum.png); } /* ⚠ `consulting-hme.png` Y NO `consulting.png`: el original trae un ANILLO NEGRO grueso alrededor del globo que no pertenece al logotipo —lo cantó Isaac—. Se limpió bajando el alfa de todo lo que esté por debajo de 90 de luminancia, con desvanecido cuadrático para no dejar dientes de sierra, y se subió con OTRO NOMBRE: WordPress no sustituye un archivo existente, crea un `-1` y el CSS seguiría apuntando al viejo sin avisar. */ .bm-caso--consulting .bm-caso__logo { background-image: url(/wp-content/uploads/2026/10/consulting-hme.png); } .bm-caso--arcotechos .bm-caso__logo { background-image: url(/wp-content/uploads/2026/10/arcotechos.png); } /* Los dos monocromos van de máscara —su PNG es de un solo color—, pero NO se tiñen de lo mismo: · Gorillax es negro y su marca es negra o blanca según el fondo, así que se tiñe con `var(--tinta)` y cambia solo con el tema. · Veta Fina viene en blanco crema en el archivo, pero **su marca es CAFÉ** —lo corrigió Isaac—, así que se tiñe con su `--marca`, igual que el resto de la tarjeta. El archivo es sólo la silueta. De ahí que la regla común ponga la máscara y cada uno su color aparte. */ .bm-caso--gorillax .bm-caso__logo, .bm-caso--veta-fina .bm-caso__logo { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .bm-caso--gorillax .bm-caso__logo { background-color: var(--tinta); -webkit-mask-image: url(/wp-content/uploads/2026/10/gorillax.png); mask-image: url(/wp-content/uploads/2026/10/gorillax.png); } .bm-caso--veta-fina .bm-caso__logo { background-color: var(--marca); -webkit-mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); } /* ── DÓNDE SE PINTA EL LOGOTIPO EN REPOSO ──────────────────── 🚨 ESTA REGLA VA AQUÍ ABAJO Y NO ARRIBA CON EL RESTO, y no es manía de orden: la regla de los monocromos de tres líneas más arriba pone `mask-position: center` y `mask-size: contain`, y pesa LO MISMO que ésta —dos clases cada una—. Si ésta fuera antes, ganaría aquélla por ir después, y los dos logotipos de máscara, Gorillax y Veta Fina, se quedarían centrados y quietos mientras los otros tres viajan. Es el tercer caso del mismo tropiezo en este archivo. Y el `>` tampoco sobra: aquella regla alcanza también a las tarjetas de `/casos/`, que giran y colocan sus iconos por su cuenta. ⚠ EL TAMAÑO ES UN ANCHO, NO UN `contain`. `background-size: 150px` significa «150 de ancho y el alto que toque», mientras que el `contain` de antes metía el dibujo dentro de un cuadrado. Hoy da igual porque los cinco PNG son cuadrados —medidos: de 0.99 a 1.05 de alto entre ancho— y el peor caso, Veta Fina, se pasa 2px de los 40 de la insignia. Pero un logotipo nuevo que sea claramente más alto que ancho SE SALDRÍA del hueco reservado arriba a la derecha. Ese día se le da a ÉL un `background-size: auto Npx` propio; esta regla no se toca. */ .bm-caso > .bm-caso__logo { background-position: var(--logo-sitio-reposo); background-size: var(--logo-tam-reposo); -webkit-mask-position: var(--logo-sitio-reposo); mask-position: var(--logo-sitio-reposo); -webkit-mask-size: var(--logo-tam-reposo); mask-size: var(--logo-tam-reposo); } /* Se recoge arriba a la derecha. ⚠ EL `>` ES NUEVO Y ARREGLA ALGO QUE YA ESTABA MAL. Sin él, esta regla alcanzaba también a los iconos de las tarjetas de `/casos/` —se llaman igual, pero van anidados dentro de `.bm-caso__cara`— y les encajaba encima el gesto de la portada, que allí no pinta nada. */ .bm-caso:hover > .bm-caso__logo, .bm-caso:focus-within > .bm-caso__logo { background-position: var(--logo-sitio-activo); background-size: var(--logo-tam-activo); -webkit-mask-position: var(--logo-sitio-activo); mask-position: var(--logo-sitio-activo); -webkit-mask-size: var(--logo-tam-activo); mask-size: var(--logo-tam-activo); opacity: 1; } /* ── Y EL NEÓN, QUE VA EN LA TARJETA ───────────────────────── No en el logotipo: eso era lo de antes y desdibujaba la marca del cliente. Al activarse, la tarjeta entera se enciende del color de SU cliente — el filete de arriba, el canto y un halo hacia fuera—, que es lo que hace que se lea «esta es la de Gorillax» sin tocar el logotipo. Tres capas, y las tres hacen falta: el anillo de 1px pegado al borde da el canto encendido, el halo corto lo despega del fondo, y el largo es el derrame. Con una sola queda un borde de color, no un neón. `color-mix` sobre `--marca` en vez de colores nuevos: el día que un cliente cambie de color, cambia el suyo y esto lo sigue. */ /* 🚨 EL FONDO TEÑIDO VA EN `box-shadow: inset` Y NO EN `background`, y no es un truco: es la única forma de que se pueda DESVANECER. `background-image` no interpola —un degradado no se puede animar de «no hay» a «hay»—, y las dos capas de la tarjeta ya están ocupadas: `::after` es el foco que sigue al cursor y `::before` es el filete que se dibuja. Una sombra interior con mucho desenfoque pinta exactamente eso —color que entra por los cantos y se disuelve hacia el centro—, y `box-shadow` SÍ transiciona, con la que la tarjeta ya tiene declarada. En reposo no hay nada: la tarjeta sigue con su fondo de siempre. */ .bm-card.bm-caso:hover, .bm-card.bm-caso:focus-within { border-color: color-mix(in srgb, var(--marca) 45%, transparent); border-top-color: var(--marca); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 40%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--marca) 46%, transparent), 0 0 26px -4px color-mix(in srgb, var(--marca) 30%, transparent), inset 0 0 54px -12px color-mix(in srgb, var(--marca) 34%, transparent), inset 0 30px 46px -34px color-mix(in srgb, var(--marca) 52%, transparent), inset 0 1px 0 var(--vidrio-brillo); } /* En papel el neón se recorta a la mitad. Un halo de color sobre blanco no «enciende»: ensucia, y resta contraste al texto que tiene al lado. */ :root:not([data-tema='oscuro']) .bm-card.bm-caso:hover, :root:not([data-tema='oscuro']) .bm-card.bm-caso:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 34%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--marca) 34%, transparent), inset 0 0 46px -14px color-mix(in srgb, var(--marca) 20%, transparent), inset 0 26px 40px -34px color-mix(in srgb, var(--marca) 26%, transparent), inset 0 1px 0 var(--vidrio-brillo); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-card.bm-caso:hover, :root:not([data-tema='claro']) .bm-card.bm-caso:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 40%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--marca) 46%, transparent), 0 0 26px -4px color-mix(in srgb, var(--marca) 30%, transparent), inset 0 0 46px -14px color-mix(in srgb, var(--marca) 20%, transparent), inset 0 26px 40px -34px color-mix(in srgb, var(--marca) 26%, transparent), inset 0 1px 0 var(--vidrio-brillo); } } /* EL SITIO DE LA INSIGNIA, EN HORIZONTAL Y SÓLO DONDE ESTORBA. Sube el rótulo y el título, que son las dos únicas líneas a la altura de la esquina; el texto, las etiquetas y los enlaces van más abajo y conservan el ancho entero. Reservarlo en la tarjeta entera —como hace la cara trasera de `/casos/`— habría estrechado la descripción sin necesidad. ⚠ EL `>` NO SOBRA: en `/casos/` el rótulo y el título van DENTRO de `.bm-caso__cara`, y aquellas tarjetas ya resuelven lo suyo con su propio `padding-right`. Sin el `>`, esto les metría la reserva dos veces. La reserva es el lado de la insignia más un respiro; como `--logo-fx` vale justo el relleno lateral de la tarjeta, la cuenta sale sola. ⚠ LLEVA EL `--logo-ajuste` DENTRO, y hace falta: con la corrección, la insignia de Consulting mide un 11% más que la de Gorillax. Reservar el lado nominal para todas dejaría a las dos corregidas metiéndose debajo del título. Así cada tarjeta reserva lo suyo. */ .bm-caso > .bm-caso__rubro, .bm-caso > .bm-h3 { padding-right: calc(var(--logo-fin) * var(--logo-ajuste) + 14px); } /* La tarjeta de cierre —«y siete más»— ya no necesita que se le devuelva el relleno: desde el 22/sep nadie se lo quita. */ @media (prefers-reduced-motion: reduce) { .bm-caso__logo { transition: none; } } .bm-caso--gorillax { --marca: #2f9e5c; } .bm-caso--petroleum { --marca: #a08404; } .bm-caso--consulting { --marca: #5f8a1e; } .bm-caso--arcotechos { --marca: #2263a4; } .bm-caso--veta-fina { --marca: #8a6f45; } /* La corrección de tamaño de cada logotipo, junto a su color porque es lo mismo: cosas del archivo del cliente, no del diseño. Gorillax vale 1 y es la referencia; los demás salen de dividir 64 entre el lado mayor que pintaban, medido a 64px. La cuenta entera está en `.bm-caso`. */ .bm-caso--petroleum { --logo-ajuste: 0.975; } .bm-caso--consulting { --logo-ajuste: 1.016; } .bm-caso--arcotechos { --logo-ajuste: 1.064; } .bm-caso--veta-fina { --logo-ajuste: 0.952; } /* Los tonos de arriba son los de cliente AJUSTADOS para que se lean sobre papel: los originales —#4ade80, #cba705, #7aae26, #b8996e— dan menos de 3:1 sobre blanco. Sobre el tema oscuro se usan los originales, que ahí sí contrastan y son los de su manual de marca. */ [data-tema='oscuro'] .bm-caso--gorillax { --marca: #4ade80; } [data-tema='oscuro'] .bm-caso--petroleum { --marca: #cba705; } [data-tema='oscuro'] .bm-caso--consulting { --marca: #7aae26; } [data-tema='oscuro'] .bm-caso--veta-fina { --marca: #b8996e; } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-caso--gorillax { --marca: #4ade80; } :root:not([data-tema='claro']) .bm-caso--petroleum { --marca: #cba705; } :root:not([data-tema='claro']) .bm-caso--consulting { --marca: #7aae26; } :root:not([data-tema='claro']) .bm-caso--veta-fina { --marca: #b8996e; } } .bm-caso--gorillax .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/2026/10/gorillax.png); mask-image: url(/wp-content/uploads/2026/10/gorillax.png); } .bm-caso--veta-fina .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); } .bm-caso__rubro { font-family: var(--fuente-titulo); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marca, var(--tinta-suave)); } /* Las etiquetas no son enlaces ni filtros: son una línea de texto que dice de un vistazo qué se hizo. Un chip por etiqueta prometería un filtro que no existe. */ .bm-caso__tags { font-size: 0.8rem; color: var(--tinta-suave); margin-top: auto; padding-top: 0.6rem; } .bm-caso__enlace { font-family: var(--fuente-titulo); font-size: 0.86rem; font-weight: 500; color: var(--tinta); align-self: flex-start; border-bottom: 1.5px solid var(--marca, var(--acento)); padding-bottom: 1px; transition: color var(--tr-rapida); } .bm-caso__enlace:hover { color: var(--marca, var(--acento)); } .bm-caso--mas { justify-content: center; } .bm-caso--mas .bm-btn { align-self: flex-start; margin-top: 0.9rem; } /* ── Fases y servicios ─────────────────────────────────────── */ .bm-fase { display: flex; flex-direction: column; gap: 0.4rem; } /* La mascota se menciona al PIE y en pequeño: es un emblema, no lo que se contrata. Si subiera de tamaño volvería a leerse como un equipo. */ .bm-fase__emblema { margin-top: auto; padding-top: 1rem; font-size: 0.82rem; color: var(--tinta-suave); } .bm-fase__emblema strong { color: var(--acento); font-weight: 600; } /* ── La mascota de cada fase ───────────────────────── En reposo asoma por el canto de abajo de la tarjeta —manos agarradas al borde— y al pasar el cursor salta. Las seis imágenes son de Isaac, generadas con los prompts de `PROMPTS-MASCOTAS.md`. 🚨 EL RECORTE LO TRAE LA IMAGEN, no el CSS. Las de reposo se generaron ya asomadas, con las manos apoyadas en un borde que no existe. Si se hubiera generado el cuerpo entero y se recortara aquí, las manos no quedarían apoyadas en nada y el personaje se vería flotando —está anotado como aviso en el propio documento de prompts—. Las dos imágenes de cada fase comparten un lienzo de 600×600 anclado abajo, así que al cambiar de una a otra el personaje NO SALTA DE SITIO: el brinco lo pone el `translateY` de aquí, no el archivo. */ /* 🚨 EL SELECTOR LLEVA `.bm-fase >` A PROPÓSITO, y sin eso no funciona. Más abajo está `.bm-card > * { position: relative; z-index: 1 }`, que pone el contenido por encima del brillo especular de la tarjeta. Misma especificidad que `.bm-fase__mascota` a secas y va DESPUÉS, así que ganaba: la mascota se quedaba en `relative` y salía en el flujo, debajo del renglón del emblema y pegada a la izquierda. El `right` y el `width` sí se aplicaban, que es lo que lo hacía confuso —parecía que la regla entraba entera—. Medido, no supuesto. El `z-index: 1` se hereda de aquella regla a mano: sin él la mascota pasaría por debajo del brillo. */ /* ── El marco: la tarjeta y su mascota ─────────────── 🚨 LA MASCOTA VIVE FUERA DE LA TARJETA, Y ES OBLIGATORIO. `.bm-card` lleva `overflow: hidden` para recortar el brillo especular que sigue al cursor —un círculo de 340px que si no se sale por los cuatro lados—. Dentro de la tarjeta, la mascota no puede asomar NADA por el canto: se recorta con todo lo demás. Y asomar es justo el punto: se está agarrando al borde, así que sus manos tienen que quedar POR FUERA. Lo pidió Isaac al verlo. Con la mascota como hermana de la tarjeta dentro de un marco común, la tarjeta sigue recortando su brillo y la mascota es libre. El marco es el ítem de la rejilla, así que la tarjeta tiene que estirarse dentro de él para que las tres sigan midiendo lo mismo. */ .bm-fase__marco { position: relative; display: flex; } .bm-fase__marco > .bm-fase { flex: 1 1 auto; } .bm-fase__marco > .bm-fase__mascota { position: absolute; z-index: 1; right: 0.4rem; /* NEGATIVO, PERO MUY POCO: lo que sobresale son LOS DEDOS y nada más. Tercera pasada de este número, y las tres las cantó Isaac: -26px «MUUUUY abajo, ya no se ven como si estuvieran saliendo» -10px la mano ENTERA quedaba por debajo del canto: la mascota se lee flotando bajo la tarjeta, no agarrada a ella -5px el canto cruza por la palma y sólo asoman los dedos —que es justo lo que simula que se están agarrando del borde La referencia no es «cuánto asoma la mascota» sino DÓNDE CORTA EL CANTO: en las tres ilustraciones las manos ocupan los últimos ~20px de los 108, así que 5 deja fuera la punta y deja dentro la palma. */ bottom: -5px; width: 108px; height: auto; /* No captura el cursor: la tarjeta entera es la zona sensible, y un adorno que se trague el puntero apagaría el efecto justo al acercarse a él, que es cuando más raro se ve. */ pointer-events: none; transition: opacity var(--tr-media), transform var(--tr-media); } .bm-fase__marco > .bm-fase__mascota--salta { opacity: 0; /* 🚨 ÉSTA NO SOBRESALE, Y ES LO CONTRARIO QUE LA DE REPOSO. Lo pidió Isaac. Y tiene su lógica: en reposo la mascota está AGARRADA al canto —por eso las manos quedan por fuera—, pero saltando ya se soltó, y algo que salta no atraviesa el suelo del que salió. Se queda entera dentro de la tarjeta. 🚨 EL SELECTOR LLEVA `.bm-fase__marco >` PORQUE SI NO PIERDE. La regla que pone `bottom: -10px` es `.bm-fase__marco > .bm-fase__mascota`, o sea DOS clases; `.bm-fase__mascota--salta` a secas es UNA y no gana por ir después. Se midió: la del salto seguía sobresaliendo los mismos 10px. Es la TERCERA vez hoy con el mismo tropiezo en esta sección —antes con `.bm-card > *` y con `.bm-card::after`—. La regla que sale de aquí: en esta hoja, un selector de una sola clase casi nunca gana; hay que contar contra quién compite ANTES de escribirlo, no después de que no funcione. Con `bottom: 0` la imagen se apoya en el canto, y el `translateY` del estado activo la despega otros 12px hacia adentro. */ bottom: 0; } /* El sitio para la mascota se RESERVA en el renglón del emblema, no en toda la tarjeta: es el único que llega hasta abajo a la derecha, que es donde ella vive. El párrafo de arriba queda libre. */ .bm-fase__emblema { padding-right: 7rem; } /* Y la tarjeta gana suelo, para que la mascota tenga dónde asomarse sin meterse en el texto. */ .bm-fase { padding-bottom: 3.25rem; } /* ── El cursor enciende la tarjeta con el color de su mascota ── La tarjeta ya tenía un brillo especular que sigue al cursor, en blanco. Lo pidió Isaac teñido: los colores de Bimm en Mundi, el rojo en Flama y el azul en Pixel. NO SE AÑADE UNA CAPA NUEVA, se tiñe la que ya hay. El `::after` de `.bm-card` es un círculo FIJO que se mueve con `translate3d` —ver su comentario, y la advertencia de las dos pestañas congeladas que costó averiguarlo—. Cambiarle el color no le añade ni un repintado: sigue siendo una capa que el compositor mueve. Se sigue el patrón de `--marca` de las tarjetas de caso: una variable por tarjeta, ajustada por tema. Es el mismo problema —un color de identidad que tiene que leerse sobre papel Y sobre negro— y ya estaba resuelto ahí. MUNDI LLEVA DOS PARADAS y los otros una. Su color no es uno: su neón va de naranja-rojo a cian, que es el degradado de la marca. Flama y Pixel sí tienen un color propio, así que su segunda parada repite la primera. */ .bm-fase--mundi { --fase: var(--coral); --fase-b: var(--teal); } .bm-fase--flama { --fase: var(--coral); --fase-b: var(--coral); } .bm-fase--pixel { --fase: var(--teal); --fase-b: var(--teal); } /* En oscuro entra el turquesa, que sobre papel se queda en nada —#52f5dc al 30% sobre blanco no se ve— y sobre negro es el acento del sitio. */ [data-tema='oscuro'] .bm-fase--mundi { --fase-b: var(--turquesa); } [data-tema='oscuro'] .bm-fase--pixel { --fase: var(--turquesa); --fase-b: var(--turquesa); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-fase--mundi { --fase-b: var(--turquesa); } :root:not([data-tema='claro']) .bm-fase--pixel { --fase: var(--turquesa); --fase-b: var(--turquesa); } } /* ── La tarjeta activa se tiñe por el FONDO ───────────── Isaac descartó la primera versión, que teñía del color de la mascota el brillo especular que sigue al cursor: un foco de color persiguiendo el puntero pesaba demasiado para lo que es —un acuse de recibo—. Ese brillo vuelve a ser blanco, como en el resto de tarjetas del sitio. En su lugar, al activarse la tarjeta aparecen DOS MANCHITAS TENUES en su fondo, con los colores de su mascota. No es un recurso nuevo: son las mismas MANCHAS que pinta cada sección de la portada —gradientes radiales que se apagan al 70% del radio, en esquinas opuestas—, reducidas al tamaño de una tarjeta. El sitio ya habla ese idioma. ⚠ Y se encienden con el `::before`, no con el `::after`: el `::after` ES el brillo del cursor y sigue haciendo su trabajo. Son dos capas distintas con dos oficios distintos. ⚠ INTENSIDAD: 14% y 10%. Nació en 26/20 e Isaac lo pidió más tenue. La referencia son las manchas de sección, que sobre papel andan por 0.18–0.24: en una caja del tamaño de una tarjeta el mismo valor pesa más, porque el gradiente recorre menos distancia antes de apagarse. ⚠ «ACTIVA» ES HOVER EN ESCRITORIO Y CENTRADA EN TÁCTIL. En un teléfono no hay cursor —el mismo motivo por el que el salto de la mascota cuelga del scroll—, así que la clase `is-saltando` del marco enciende también el fondo: la tarjeta que estilla en el centro de la pantalla es la que está activa. */ .bm-card.bm-fase::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--tr-media); background: radial-gradient(38% 42% at 10% 92%, color-mix(in srgb, var(--fase) 14%, transparent) 0%, transparent 70%), radial-gradient(34% 38% at 90% 12%, color-mix(in srgb, var(--fase-b) 10%, transparent) 0%, transparent 70%); } /* EN ESCRITORIO manda el cursor, y sólo el cursor. */ .bm-card.bm-fase:hover::before { opacity: 1; } /* 🚨 Y EN TÁCTIL, LA CLASE DEL SCROLL —PERO SÓLO AHÍ. Esto faltaba y fue un fallo visible: la clase `is-saltando` la pone el JS en TODOS los aparatos —su filtro de puntero vive en el CSS, no en el JS—, y esta regla estaba fuera de cualquier consulta. Resultado en escritorio: al rodar hacia la sección, las tarjetas se encendían solas al cruzar el centro, sin que el cursor tocara nada. Isaac lo vio en cuanto entró. El fondo con manchas es un estado de «esta tarjeta está activa», y activa significa cosas distintas según el aparato: con cursor, la que se señala; sin cursor, la que está centrada. Nunca las dos a la vez. */ @media (hover: none) { .bm-fase__marco.is-saltando .bm-fase::before { opacity: 1; } .bm-fase__marco.is-saltando .bm-fase { border-top-color: var(--fase); } } /* El filete de arriba toma el color de la mascota en vez del acento del sitio. Es lo que ata la mancha del fondo al personaje; sin él el color se lee como un accidente. */ .bm-card.bm-fase:hover { border-top-color: var(--fase); } /* ⚠ EL SALTO SÓLO CON PUNTERO FINO Y SIN MOVIMIENTO REDUCIDO, y las dos condiciones van en la MISMA consulta a propósito: así no hay que anular nada después, que es donde se cuelan los fallos de orden. En táctil no hay `hover` que valga —quedaría pegado tras el primer toque— y quien pide menos movimiento se queda con la mascota asomada, que es lo que dice el documento de prompts. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .bm-fase__marco:hover .bm-fase__mascota--reposo, .bm-fase__marco:focus-within .bm-fase__mascota--reposo { opacity: 0; } .bm-fase__marco:hover .bm-fase__mascota--salta, .bm-fase__marco:focus-within .bm-fase__mascota--salta { opacity: 1; transform: translateY(-12px); } } /* ── Y EN TÁCTIL, EL MISMO SALTO PERO CON EL SCROLL ────── Sin cursor, el efecto de arriba no ocurre nunca y las tres mascotas se quedaban asomadas para siempre. La clase la pone el `IntersectionObserver` de `bloques.js` cuando la tarjeta cruza el centro de la pantalla, y la quita al salir: rodando, saltan una tras otra. 🚨 LA CONDICIÓN DE PUNTERO VIVE AQUÍ, NO EN EL JS, y es al revés de como nació. La primera versión se salía en el JS con `pointer: fine`, y no hubo forma de comprobarla: en Chrome sin interfaz la emulación de puntero grueso da resultados que no cuadran. Puesta aquí sí se comprueba —la clase queda en el DOM y se lee—, y en un híbrido no hay pelea: las dos rutas, el `hover` de arriba y ésta, producen exactamente el mismo efecto. `hover: none` y no un ancho: lo que falta en un teléfono no es pantalla, es CURSOR. Una tableta ancha tampoco lo tiene. */ @media (hover: none) and (prefers-reduced-motion: no-preference) { .bm-fase__marco.is-saltando .bm-fase__mascota--reposo { opacity: 0; } .bm-fase__marco.is-saltando .bm-fase__mascota--salta { opacity: 1; transform: translateY(-12px); } } /* Rótulo que parte el catálogo en «por proyecto» y «por mes». No es un h3: no titula un contenido, etiqueta un grupo. */ .bm-sub { margin: clamp(2.25rem, 5vw, 3.25rem) 0 1.25rem; font-family: var(--fuente-titulo); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); padding-bottom: 0.5rem; border-bottom: 1px solid var(--linea); } /* La tarjeta de servicio ES el enlace y no lleva uno dentro: un dentro de otro el parser lo desanida y parte la tarjeta en trozos. Así, además, el área de toque es la tarjeta entera. */ .bm-serv { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; } .bm-serv__mas { margin-top: auto; padding-top: 1rem; font-family: var(--fuente-titulo); font-size: 0.86rem; font-weight: 500; color: var(--acento); } /* La flecha se adelanta al pasar el cursor: dice a dónde va sin decirlo. */ .bm-serv__mas::after { content: '→'; display: inline-block; margin-left: 0.4rem; transition: transform var(--tr-media); } .bm-serv:hover .bm-serv__mas::after { transform: translateX(4px); } /* ── Bimm App y cierre ─────────────────────────────────────── */ .bm-cierre { padding-block: clamp(4.5rem, 10vw, 7.5rem); } .bm-cierre__caja { max-width: 660px; } .bm-cierre__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; } /* ── Pie ───────────────────────────────────────────────────── Vive en `bloques/pie/pie.html` y lo imprime el tema. Es la única sección que no se publica como contenido de una página: sale en todas. */ .bm-pie { padding-block: clamp(3rem, 6vw, 4.5rem); /* 🚨 `clip` Y NO EL `hidden` QUE HEREDA DE `.bm-sec`, y de esto depende que la marca se pegue. Los dos recortan igual, pero `overflow: hidden` crea un CONTENEDOR DE SCROLL, y un `position: sticky` dentro de un contenedor que no rueda no se pega a nada: la marca bajaría con el resto del pie y el pegado sería letra muerta, sin ningún aviso. `clip` recorta sin crear contenedor, así que las manchas se siguen quedando dentro y la marca se pega contra la ventana. El `contain: paint` que `.bm-sec` lleva al final del archivo tampoco estorba: recorta la pintura, no crea contenedor de scroll. */ overflow: clip; } /* ── El boletín, arriba del pie ────────────────────────────── A quién le sirve y cuándo: a quien ya leyó la página, no va a escribir hoy, y quiere enterarse si abrimos un servicio o sacamos precio de temporada. Por eso vive en el PIE y no en el cierre — el cierre pide una conversación ahora; esto es para el que dice «hoy no». ⚠ NO ES el boletín de la landing y D-07 SIGUE EN PIE. Aquel prometía una «asesoría gratis de tu sitio en PDF, en un par de días» y esa plantilla todavía no existe: ofrecerlo sería empezar debiendo. Éste no promete ningún entregable, sólo avisar cuando haya algo — y eso sí se puede sostener. Lo pidió Isaac el 1/sep/2026. Va centrado y en una columna como el resto del pie, y estrecho a propósito: un campo de correo a todo el ancho del pie parece un buscador. */ /* ES LA COLUMNA DERECHA DE LA BANDA, Y VA EN UNA SOLA COLUMNA A PROPOSITO. 🚨 NO SE PARTE EN HORIZONTAL, y se probó el 2/sep. SU ALTURA ES EL RECORRIDO DEL CHICLE: el logotipo de al lado va pegajoso dentro de esta banda, y lo que puede bajar es exactamente lo que el boletín mide de más. Partido en dos columnas la banda se queda a la mitad y el logotipo se vuelve a quedar arriba, que es el problema que se venía a quitar. Estrecho también a propósito: un campo de correo a todo el ancho del pie parece un buscador. */ .bm-boletin { position: relative; /* El hueco es para la medianera, que cuelga de aquí —ver `::before`—. */ padding-left: clamp(1.25rem, 2.5vw, 2.25rem); } /* EL TEXTO SÍ SE ESTRECHA, AUNQUE LA COLUMNA DÉ PARA MÁS. Con el 70% de la banda son ~730px: un párrafo ahí son ~90 caracteres por renglón y se lee como un muro. El FORMULARIO no se estrecha —ocupa la columna entera—, y esa diferencia es la que hace que la columna se vea llena y no descuadrada. Las medidas van en `ch` de CADA elemento, no en píxeles: el titular va en Space Grotesk grande y el párrafo en Source Serif pequeña, así que el mismo número de píxeles sería una medida distinta en cada uno. */ .bm-boletin__titulo { max-width: 24ch; } .bm-boletin > .bm-card__texto { max-width: 54ch; } /* EL FILETE, DE PIE, COMO MEDIANERA DE LA BANDA. La banda de cuatro paradas que abre el sitio, girada 90°. Cuelga del boletín porque el boletín es el elemento de la derecha: su orilla izquierda ES la costura, y así la raya mide exactamente lo que mide la banda sin que nadie escriba un alto. Va porque el pie no tenía ni un color de marca —era el único sitio de la portada sin nada— y porque dos columnas de altura muy distinta, sin nada en medio, se leen como una retícula descuadrada en vez de como una decisión. Es la pieza equivalente a los filetes que separan las bandas del pie de Petroleum, dicha en el idioma de esta casa. ⚠ NO SON LOS TRES FILETES QUE SE QUITARON EL 1/sep. Aquellos eran tres degradados, uno bajo cada rótulo, compitiendo entre ellos y con los iconos de los enlaces. Éste es uno solo y hace otro oficio: separa, no subraya. Se apaga en los dos extremos con una máscara: a tope de arriba abajo parecería una valla, y lo que tiene que hacer es acompañar. */ .bm-boletin::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; /* `--grad-marca` va a 90°; aquí hace falta el mismo recorrido en vertical, así que se reescriben las cuatro paradas a 180°. */ background: linear-gradient(180deg, var(--crema) 0%, var(--coral) 33%, var(--turquesa) 67%, var(--teal) 100%); opacity: 0.5; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } /* Apilado no hay dos columnas, así que no hay costura que marcar. */ @media (max-width: 860px) { .bm-boletin { margin-inline: auto; padding-left: 0; } .bm-boletin::before { display: none; } } .bm-boletin__titulo { font-family: var(--fuente-titulo); font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; line-height: 1.25; margin: 0.5rem 0 0.6rem; } /* Sin margen propio: el hueco entre el texto y el formulario lo pone el `gap` de `.bm-boletin`, que sirve para los dos repartos —apilado y al lado—. Con los dos, apilado sumaba 40px donde tocaban 20. */ .bm-boletin__forma { margin-top: 0; } /* Los dos campos comparten renglón mientras quepan y se apilan cuando no. `12rem` es el ancho por debajo del cual un correo normal deja de verse entero mientras se escribe. */ .bm-boletin__fila { display: flex; flex-wrap: wrap; gap: 0.6rem; } @media (max-width: 860px) { .bm-boletin__fila { justify-content: center; } } /* `flex: 1 1 15rem` y no un ancho fijo: en un teléfono el campo ocupa el renglón entero y el botón cae debajo; en pantalla ancha van juntos. */ .bm-boletin__campo { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: 0.7rem 1.1rem; border: 1px solid var(--linea-fuerte); border-radius: 100px; background: var(--papel); color: var(--tinta); font-family: var(--fuente-texto); font-size: 0.95rem; } .bm-boletin__campo::placeholder { color: var(--tinta-suave); } .bm-boletin__campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-color: var(--acento); } .bm-boletin__enviar { margin-top: 0.7rem; } .bm-boletin__enviar[disabled] { opacity: 0.55; cursor: progress; } /* La etiqueta existe para el lector de pantalla: un `placeholder` desaparece al escribir y deja el campo sin nombre. */ .bm-boletin__etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Trampa para robots: un campo que una persona no ve ni puede tabular. Si llega relleno, la petición se contesta que sí y no se guarda nada. */ .bm-boletin__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .bm-boletin__nota { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); } /* Reserva su altura desde el principio: si apareciera de la nada, el botón daría un salto justo cuando el usuario acaba de pulsarlo. */ .bm-boletin__aviso { margin: 0.5rem 0 0; min-height: 1.4em; font-size: 0.88rem; font-family: var(--fuente-titulo); color: var(--acento); } /* El error va en tinta plena y no en coral: el coral da 3.4:1 sobre papel y no llega para texto. Lo que distingue el fallo es lo que dice, no el color. */ .bm-boletin__aviso.is-mal { color: var(--tinta); } /* ── LA BANDA DE ARRIBA: LA MARCA Y EL BOLETÍN ───────── El pie son DOS FILAS: esta banda arriba, y los tres menús debajo a todo lo ancho. Lo pidió Isaac el 2/sep/2026. EL HUECO QUE ARREGLA: la marca son cuatro renglones y el boletín de al lado mide el triple —rótulo, titular, párrafo, dos campos y un botón—, así que bajo el logotipo colgaban ~330px de fondo liso. No se arregla recortando la banda: se arregla dejando que el logotipo BAJE por ella, que es lo de abajo. 30/70, Y LO PIDIÓ ASÍ ISAAC el 2/sep/2026. Estaba a `1fr 1.15fr`, que se lee como mitad y mitad: la marca son un logotipo y tres renglones, y a media banda pesaba lo mismo que un boletín con titular, párrafo, dos campos y un botón. Con 30/70 cada columna ocupa lo que tiene que decir. */ .bm-pie__alto { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); align-items: start; text-align: left; gap: clamp(2rem, 6vw, 4.5rem); } /* 🍬 EL LOGOTIPO BAJA CON EL SCROLL, Y SÓLO DENTRO DE ESTA BANDA. Se queda a la vista mientras el boletín de al lado pasa por la ventana, y se para al acabarse la banda —no se mete en la fila de los menús—. Que el tope sea la banda y no el pie entero lo pidió Isaac: el hueco estaba aquí. EL RECORRIDO ES «ALTO DEL BOLETÍN − ALTO DE ESTA CAJA», ~230px hoy. Por eso el boletín no se parte en horizontal y por eso conviene no engordar la marca: las dos cosas se comen el recorrido. `6.5rem` es el mismo tope que usa `.bm-subnav` con la cabecera flotando —la píldora mide ~52px más su margen—. No es un número suelto: si cambia allí, cambia aquí. 🚨 `align-self: start` ES OBLIGATORIO. Con el `stretch` por omisión la caja mediría toda la fila y no quedaría nada que recorrer: el pegado no fallaría, simplemente no se notaría nunca. */ .bm-pie__marca { position: sticky; top: 6.5rem; align-self: start; max-width: 38ch; } /* El logotipo es una imagen de bloque: `text-align` no la mueve, hay que mover la caja. */ .bm-pie__nombre { display: flex; justify-content: flex-start; font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 0.9rem; } /* En cuanto las dos columnas dejan de caber se apilan Y VUELVEN AL CENTRO: una sola columna alineada a la izquierda dentro de un pie centrado se lee como si se hubiera descolgado. Y LA MARCA SE DESPEGA. Apilada ya no tiene banda que recorrer —va encima del boletín, no al lado—, y un logotipo pegado en un teléfono taparía el formulario justo mientras se rellena. */ @media (max-width: 860px) { .bm-pie__alto { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(2.5rem, 7vw, 3.5rem); } .bm-pie__marca { position: static; max-width: 46ch; } .bm-pie__nombre { justify-content: center; } } /* ── LA SEGUNDA FILA: LOS TRES MENÚS, A TODO LO ANCHO ──── TRES COLUMNAS DE IGUAL ANCHO y alineadas a la izquierda. Es el reparto del pie de Petroleum, y lo pidió Isaac el 2/sep/2026. Iban al ancho de su contenido con el grupo centrado, y así colgaban del centro dejando ~300px vacíos a su izquierda. Con `1fr` sobre el ancho COMPLETO del pie se reparten la fila entera y el vacío desaparece. Y OCUPAN SU PROPIA FILA, no la columna del boletín. Dos razones, y las dos mandan: metidos en dos tercios del ancho, cada columna baja de las ~160px que necesita «Aplicaciones a la medida» y el enlace parte en dos renglones —se midió, y obligaba a subir el quiebre del pie de 860 a 1120px—; y el logotipo pegajoso no los quiere debajo, porque su tope tiene que ser la banda. La raya de arriba los separa del boletín. */ .bm-pie__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid var(--linea); text-align: left; } /* Los enlaces del pie son de bloque: en columna, uno por renglón. En línea quedarían pegados y con el área de toque de una sola palabra. */ .bm-pie__enlace { display: block; padding: 0.3rem 0; color: var(--tinta-suave); font-size: 0.92rem; transition: color var(--tr-rapida); } .bm-pie__enlace:hover { color: var(--acento); } /* ── Los menús del pie, vivos ──────────────────────────────── Estaban muertos: tres listas de texto gris que sólo cambiaban de color al pasar por encima. El pie es lo último que ve alguien que ya bajó entero la página, y ahí es donde decide si escribe o se va. NO SE INVENTA NADA NUEVO — se le presta al pie el idioma que el sitio YA habla, que es lo que hace que se lea como la misma casa: · el subrayado que CRECE DESDE LA IZQUIERDA, el mismo de `.bm-cab__enlace`, porque el texto también se lee desde la izquierda; · el filete de la marca, el de las cuatro paradas, bajo cada rótulo. Iconos de redes, botones o tarjetas habrían sido cosas nuevas compitiendo por la atención justo donde el visitante está decidiendo. */ /* Cada columna es una pila centrada. Hace falta para el subrayado: con los enlaces en `display: block` su caja ocupa TODA la columna, y la raya saldría del ancho del grupo en vez del ancho de la palabra. */ .bm-pie__nav > div { display: flex; flex-direction: column; align-items: flex-start; } /* Se quitó el filete de colores que iba bajo cada rótulo: lo pidió Isaac el 1/sep/2026. Tres degradados de cuatro paradas, uno por columna, competían entre ellos y con los iconos que ahora llevan los enlaces. */ /* El rótulo se mete hasta donde arranca el TEXTO de los enlaces, no hasta el icono: así encabeza una columna de palabras y no queda colgando a su izquierda. Es el ancho del icono más su hueco. */ .bm-pie__nav .bm-rotulo { margin-bottom: 1rem; margin-left: calc(17px + 0.6rem); } /* El juego de iconos no se ve: sólo guarda los dibujos para los ``. */ .bm-pie__iconos { position: absolute; width: 0; height: 0; overflow: hidden; } /* CADA ENLACE ES ICONO + PALABRA, y el `` del texto es lo que hace falta para que el subrayado mida la PALABRA y no el renglón entero con su icono. */ .bm-pie__nav .bm-pie__enlace { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0; font-size: 0.98rem; } .bm-pie__ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; /* En reposo van APAGADOS. Catorce iconos a todo color en el pie serían catorce cosas pidiendo turno; así acompañan y sólo se encienden el que estás tocando. */ opacity: 0.42; transition: opacity var(--tr-media), transform var(--tr-media), color var(--tr-media); } /* El icono se enciende y da un paso adelante: dice «éste» sin mover el texto, que si se moviera arrastraría el renglón entero. */ .bm-pie__nav .bm-pie__enlace:hover .bm-pie__ico, .bm-pie__nav .bm-pie__enlace:focus-visible .bm-pie__ico { opacity: 1; color: var(--acento); transform: translateX(2px) scale(1.14); } .bm-pie__nav .bm-pie__enlace > span { position: relative; /* el subrayado cuelga de aquí */ } .bm-pie__nav .bm-pie__enlace > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform var(--tr-media); } .bm-pie__nav .bm-pie__enlace:hover > span::after, .bm-pie__nav .bm-pie__enlace:focus-visible > span::after { transform: scaleX(1); } /* ALINEADOS A LA IZQUIERDA, y es por los iconos: centrados, cada enlace arranca en un sitio distinto según lo larga que sea su palabra y los catorce dibujos quedan en zigzag. Alineados forman una columna y se leen como una lista de verdad. En teléfono no hay columna que alinear —los tres grupos van uno debajo de otro y el pie entero vuelve al centro—, así que cada enlace se centra como una pieza entera y el rótulo pierde la sangría del icono. */ @media (max-width: 860px) { .bm-pie__nav { text-align: center; } .bm-pie__nav > div { align-items: center; } .bm-pie__nav .bm-rotulo { margin-left: 0; } } /* EL RENGLÓN LEGAL, ALINEADO DE VERDAD. Eran dos piezas de altura distinta en un flex: en pantalla ancha el enlace caía ~5px más bajo por su relleno, y en teléfono, al partirse en dos renglones, el hueco entre ellos era mayor que el interlineado del párrafo y se leían como dos cosas sueltas. Ahora las dos comparten cuerpo e interlineado, el hueco entre renglones es el mismo que dentro de un párrafo, y en pantalla ancha van separadas por un punto medio que las ata en una sola línea. */ .bm-pie__legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: 0.88rem; line-height: 1.6; color: var(--tinta-suave); text-align: center; } /* EN PANTALLA ANCHA VA A LAS DOS ORILLAS, no centrada: es la barra que cierra el pie —el sitio y el aviso legal—, y con dos calles que llegan a las orillas un par de líneas centradas debajo se leen como si les faltara algo a los lados. Es la barra inferior de Petroleum, con dos piezas en vez de tres. */ @media (min-width: 861px) { .bm-pie__legal { justify-content: space-between; } } .bm-pie__legal > * { margin: 0; font-size: inherit; line-height: inherit; } /* El separador sólo aparece cuando las dos piezas caben en el mismo renglón Y van juntas: si se parten, un punto suelto al final de una línea no ata nada, y por encima de 860px las separa todo el ancho del pie, así que tampoco hay nada que atar. ⚠ El tope de 860px va EN LA CONSULTA y no como una regla que lo anule después, y es a propósito: esta regla vive más abajo en el archivo que la de `space-between`, así que a igual especificidad ganaría ella. Anularla desde arriba no habría funcionado, y no habría dado ningún error. */ @media (min-width: 561px) and (max-width: 860px) { .bm-pie__legal > * + *::before { content: '·'; margin-right: 1rem; color: var(--linea-fuerte); } } /* Los enlaces del pie son de bloque y llevan relleno vertical para tener área de toque. En el renglón legal eso los baja ~5px respecto al texto de al lado, y centrado se ve como un renglón desalineado. Aquí no hace falta el relleno: el enlace está solo y tiene sitio de sobra. */ .bm-pie__legal .bm-pie__enlace { padding: 0; } /* UNA COLUMNA EN TELÉFONO: tres bloques, uno debajo de otro. Con dos columnas, «Servicios» y «Estudio» compartían renglón y «Escríbenos» caía sola debajo — una rejilla de 2+1 que se lee como si al último grupo le faltara pareja, y además «Aplicaciones a la medida» partía en dos renglones. Con una columna los tres grupos pesan lo mismo y todos quedan centrados en el mismo eje que el resto del pie. */ @media (max-width: 560px) { .bm-pie__nav { grid-template-columns: 1fr; gap: 2rem; } } /* ── Cursor propio ─────────────────────────────────────────── Sólo con puntero fino. En táctil se restaura el del sistema: un cursor dibujado que no sigue a ningún dedo es un adorno que estorba. */ @media (pointer: fine) { *, *::before, *::after { cursor: none !important; } } @media (pointer: coarse) { .bm-cursor, .bm-cursor__anillo { display: none !important; } } .bm-cursor, .bm-cursor__anillo { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; } /* 🚨 CUADRADO, NO REDONDO, Y ÉSA ES LA DECISIÓN (22/sep/2026). Isaac lo eligió de una muestra de catorce: «un diseño más geek», familia PÍXEL — esquinas vivas, ni una curva—. Es el mismo lenguaje de Pixel, la mascota, que está literalmente dibujada en píxeles. Si alguien devuelve el `border-radius`, deja de ser esto. 🚨 Y EL COLOR ES `--tinta`, QUE ES BLANCO O NEGRO SEGÚN EL TEMA. Antes el punto era `--acento` (teal). Lo pidió así: «de color negro o blanco dependiendo del modo de vista que esté activo». `--tinta` ya hace exactamente eso —#ffffff en oscuro, #12201f en papel— y cambia sola con el conmutador, sin una línea de más. Un par de literales aquí habría obligado a mantener las dos ramas a mano. */ .bm-cursor { width: 7px; height: 7px; background: var(--tinta); transition: width var(--tr-rapida), height var(--tr-rapida), background-color var(--tr-rapida); } /* Sobre lo interactivo el punto crece y el anillo se cierra sobre él: el cursor «se prepara» antes del clic. */ .bm-cursor.is-activo { width: 11px; height: 11px; } /* 🚨 EL CLIC ES EL TERCER MOMENTO, Y ANTES NO EXISTÍA. Había reposo y activo; Isaac pidió el de la muestra A: al pulsar, TODO se cierra de golpe —el cuadro a 4px y el marco a 12—. Es el acuse de recibo del clic, y sin él el cursor se preparaba para pulsar y luego no acusaba nada. */ .bm-cursor.is-clic { width: 4px; height: 4px; } .bm-cursor__anillo { width: 30px; height: 30px; border: 1px solid var(--tinta-suave); transition: width var(--tr-media), height var(--tr-media), border-color var(--tr-media), opacity var(--tr-rapida); } .bm-cursor__anillo.is-activo { width: 20px; height: 20px; border-color: var(--tinta); } .bm-cursor__anillo.is-clic { width: 12px; height: 12px; border-color: var(--tinta); } /* ── Red de seguridad: la cabecera del padre ───────────────── `functions.php` la retira con `remove_action`. Pero el nombre de la funcion enganchada cambia entre versiones de GeneratePress y `remove_action` con un nombre que no existe NO falla: no hace nada, y en silencio. Sin esta linea, una actualizacion del padre nos dejaria dos cabeceras en produccion. */ .site-header { display: none; } /* Separacion entre la entradilla de una seccion y su rejilla. */ .bm-casos, .bm-fases, .bm-servicios, .bm-app { margin-top: clamp(1.75rem, 4vw, 2.75rem); } .bm-cierre__texto { margin-inline: 0; } /* ── Sub-navegación pegajosa ───────────────────────────────── El patrón de Hostinger, visto en su sitio el 28/ago: una píldora centrada que flota sobre el contenido y va marcando en qué sección estás. POR QUÉ GANA SU SITIO AQUÍ, que es la pregunta que manda la regla INDISPENSABLE: la portada son seis secciones y ~3.400px de alto. Sin esto, quien quiere ver los servicios tiene que rodar y adivinar. Con esto sabe dónde está y salta a donde quiera. En una página corta sobraría. Va de vidrio, como la cabecera, y se sitúa DEBAJO de ella: `top` deja hueco para la píldora de arriba, que mide ~48px más su margen. Y su `z-index` es menor que el de la cabecera, para que al llegar arriba pase por debajo y no choquen dos píldoras. */ .bm-subnav { position: sticky; top: 5.25rem; z-index: 80; display: flex; justify-content: center; padding: 0 var(--sec-pad-x); pointer-events: none; /* el hueco a los lados no debe capturar el cursor */ /* 🚨 ALTO CERO A PROPÓSITO — aquí estaba la «franja» entre el hero y los casos. Ocupando su alto en el flujo, esta píldora metía ~50px de papel LISO entre las dos secciones: liso porque cada sección recorta sus manchas en su propia orilla (`overflow: hidden` + `contain: paint`), así que el turquesa del hero moría de golpe, venía una banda blanca y después empezaba el crema de los casos. Medido el 1/sep/2026 sobre la captura del sitio SERVIDO, columna x=40: y=902 185,251,241 <- turquesa del hero y=908 255,255,255 <- la banda, 50 filas iguales y=962 253,251,238 <- crema de los casos Con alto cero las dos secciones se tocan y la píldora se monta encima, que además es el patrón de Hostinger del que salió. `align-items` tiene que ser `flex-start`: con el `stretch` por omisión, un contenedor de alto cero aplasta la píldora a cero también. */ height: 0; align-items: flex-start; } .bm-subnav__caja { pointer-events: auto; display: flex; gap: 0.25rem; padding: 0.3rem; border-radius: 100px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur); /* Si no cabe, rueda en horizontal en vez de partirse en dos renglones: una píldora de dos pisos deja de leerse como una píldora. */ overflow-x: auto; scrollbar-width: none; max-width: 100%; } .bm-subnav__caja::-webkit-scrollbar { display: none; } .bm-subnav__enlace { flex: none; padding: 0.55rem 1.05rem; border-radius: 100px; font-family: var(--fuente-titulo); font-size: 0.86rem; font-weight: 500; color: var(--tinta-suave); white-space: nowrap; transition: color var(--tr-rapida), background-color var(--tr-rapida); } .bm-subnav__enlace:hover { color: var(--tinta); } /* La sección activa se rellena. Es el mismo gesto del botón principal —tinta llena, papel encima— para que el sitio tenga un solo idioma de «esto está seleccionado». */ .bm-subnav__enlace.is-activo { background: var(--tinta); color: var(--papel); } /* El rótulo largo es el de escritorio y el corto el de teléfono. No es duplicar contenido: es el MISMO destino con el nombre que cabe. «Cómo trabajamos» se lee mejor, pero en 430px se come el ancho de dos opciones y las últimas quedaban fuera de la píldora sin que nada lo dijera. */ .bm-subnav__corto { display: none; } @media (max-width: 620px) { /* En móvil la cabecera no se colapsa, así que ocupa más: la sub-navegación baja para no quedar debajo de ella. */ .bm-subnav { top: 4.75rem; } /* Las cinco opciones tienen que CABER. Antes sumaban ~394px de contenido en los 382px útiles de una pantalla de 430, y las dos últimas quedaban pasado el borde: la píldora rueda en horizontal, pero sin barra visible —está oculta a propósito— nada avisa de que hay más. Con el rótulo corto y estos números suman ~370px y entran las cinco. */ .bm-subnav__caja { gap: 0.15rem; padding: 0.25rem; } .bm-subnav__enlace { padding: 0.45rem 0.5rem; font-size: 0.78rem; } .bm-subnav__largo { display: none; } .bm-subnav__corto { display: inline; } /* ⚠ Y SE LE DEVUELVE ANCHO ÚTIL. La píldora hereda el relleno lateral de sección —24px—, así que en una pantalla de 390 sólo le quedaban 342 para un contenido de ~370: iba de orilla a orilla, sin respiro, y en 360 se salía. Con 0.75rem quedan 366 y entra con margen desde 390. */ .bm-subnav { padding-inline: 0.75rem; } } /* 🚨 CUANDO NO CABE, QUE SE VEA QUE NO CABE. La píldora rueda en horizontal —es lo correcto: partirla en dos pisos deja de leerse como píldora— pero su barra de scroll está oculta a propósito, así que en una pantalla de 360 las últimas opciones quedaban pasado el borde SIN QUE NADA LO DIJERA. Ya estaba anotado como problema aquí mismo desde el 1/sep; esto lo cierra. La clase la pone el JS SÓLO cuando de verdad sobra contenido. Un difuminado fijo se comería el último rótulo en las pantallas donde sí cabe todo, que es la mayoría: sería cambiar un fallo por otro. */ .bm-subnav__caja.is-rueda { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent 100%); } /* Medido sobre el sitio servido: con las reglas de arriba las cinco opciones suman 344px de contenido. En 430px de pantalla quedan 382px útiles y entran con holgura; en 390 quedan 342 y se pasan por dos píxeles. Este escalón las mete también en los teléfonos pequeños, hasta 360px. */ @media (max-width: 400px) { .bm-subnav__enlace { padding: 0.45rem 0.4rem; font-size: 0.74rem; } } /* ── Fila de garantías ─────────────────────────────────────── También de Hostinger: bajo la acción principal, una línea de tres cosas que quitan miedo. Allá son «30 días de garantía · Cancela cuando quieras · Ayuda 24 horas». ⚠ LAS NUESTRAS TIENEN QUE SER VERDAD. «Sin permanencia» sería mentira: la póliza integral está atada a 12 meses. Las tres que se usan salen de decisiones ya tomadas y verificables. */ .bm-garantias { display: flex; flex-wrap: wrap; /* 🚨 `list-style` Y `padding-left` A CERO, Y FALTABAN. Esto es un

, y el navegador le mete 40px de sangría por omisión: las tres garantías arrancaban 40px más a la derecha que el rótulo, el titular, la entradilla y los botones. No se veía como un fallo sino como una decisión rara, que es peor. Lo cazó Isaac el 2/sep/2026. Los marcadores no se veían —`display: flex` en el

convierte los

en ítems flexibles y les quita el `display: list-item`—, pero la sangría seguía ahí. Por eso pasaba desapercibido: faltaba el síntoma obvio. */ list-style: none; padding-left: 0; /* 🚨 Y EL CULPABLE DE VERDAD ERA `margin-left`, NO `padding-left`. El primer intento puso sólo el relleno a cero y NO SE MOVIÓ NADA: el desfase seguía siendo de 41px. Medido contra el CSS de GeneratePress, que trae `ul { margin: 0 0 1.5em 3em }` —y 3em del cuerpo de aquí, 0.86rem, son 41.28px, clavado con lo que se medía en pantalla—. Va como `margin` completo y no como `margin-left: 0` suelto para llevarse por delante también el `1.5em` de abajo, que tampoco pinta nada aquí. */ margin: 1.75rem 0 0; /* Renglón y columna por separado: entre las tres garantías hacía falta más aire para que se lean como tres cosas —lo pidió Isaac—, pero el hueco VERTICAL manda cuando se apilan en el teléfono, y ahí no sobra alto. */ gap: 1rem clamp(1.5rem, 4vw, 3rem); font-size: 0.86rem; color: var(--tinta-suave); } .bm-garantia { display: flex; align-items: center; gap: 0.5rem; } /* El punto es un SVG de 6px dibujado con CSS, no un emoji ni un carácter: un emoji cambia de forma en cada sistema y no se puede teñir. */ .bm-garantia::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex: none; } /* ── Tarjetas de vidrio ────────────────────────────────────── Aquí se juntan las dos cosas que pidió Isaac: el FONDO es de documento —papel y manchas— y las TARJETAS son de vidrio, flotando encima. Y funciona por una razón física: el vidrio necesita color detrás para refractar. Sobre un fondo liso se vería un rectángulo gris; sobre las manchas, cada tarjeta recoge el tono que le toca. Por eso las secciones con tarjetas llevan siempre manchas. La regla de 2px de arriba se queda: es lo que las ata al documento. Sin ella, esto sería una interfaz cualquiera con vidrio. */ .bm-card { position: relative; padding: 1.4rem 1.35rem; border: 1px solid var(--vidrio-borde); border-top: 2px solid var(--tinta); border-radius: var(--radio-vidrio); background: var(--vidrio); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur); transition: transform var(--tr-media), border-top-color var(--tr-media), box-shadow var(--tr-media); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bm-card { background: var(--papel); } } /* Se levanta 3px al pasar el cursor. Tres, no diez: es un acuse de recibo, no un salto. Y va en `transform` para no recalcular la maqueta. */ .bm-card:hover { transform: translateY(-3px); border-top-color: var(--acento); box-shadow: 0 14px 40px rgba(18, 32, 31, 0.14), inset 0 1px 0 var(--vidrio-brillo); } [data-tema='oscuro'] .bm-card:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--vidrio-brillo); } /* ── Sitio de aterrizaje de las anclas ─────────────────────── Sin esto, al pulsar «Servicios» en la sub-navegacion el navegador deja el borde de la seccion justo en el borde de la ventana... que es donde estan flotando la cabecera Y la sub-navegacion. El rotulo y el titular quedan TAPADOS: el visitante salta y aterriza en mitad de un parrafo. Los 9rem son las dos pildoras (~48px + ~44px) mas aire. No es un numero redondo por gusto: es la suma de lo que flota. */ .bm-sec[id] { scroll-margin-top: 9rem; } /* ── 🚨 EL CONTENIDO VA A SANGRE ───────────────────────────── ÉSTE ERA EL FALLO: los fondos de sección no llegaban a las orillas. GeneratePress envuelve la página entera en `#page.grid-container`, que lleva `max-width` — o sea que nuestras secciones vivían dentro de una columna de 1180px y su fondo se cortaba ahí. Se veía como un diseño «flotando» en una caja, con papel a los lados. La cadena real, comprobada pidiendo el HTML servido: #page.grid-container > .site-content > .content-area > .site-main > article > .inside-article > .entry-content > nuestras secciones Se suelta el ancho SÓLO en páginas, portada Y LA 404. En las ENTRADAS del blog el contenedor tiene que seguir midiendo: ahí sí se lee texto largo y una línea a 1900px no se lee, se recorre. 🚨 `.error404` SE AÑADIÓ EL 2/sep/2026, y faltaba desde que existe la regla. La página de error no es `.page` ni `.home`, así que se quedaba dentro del contenedor de 1180px: la sección salía metida en una caja con las manchas recortadas en un rectángulo visible a media pantalla. Y HAY QUE TOCAR LOS CUATRO NIVELES, no sólo `#page`. Se intentó primero soltando únicamente `#page` y `.site-content` desde `bimm.css`: la caja desapareció, pero el contenido se quedó pegado a la orilla —x=65 contra los x=131 de la portada, medido sobre el sitio servido— porque los niveles de en medio seguían con su relleno y su ancho. Es esta lista entera o nada. */ .home #page.grid-container, .page #page.grid-container, .error404 #page.grid-container { max-width: 100%; padding: 0; } .home .site-content, .page .site-content, .error404 .site-content, .home .content-area, .page .content-area, .error404 .content-area, .home .site-main, .page .site-main, .error404 .site-main, .home .entry-content, .page .entry-content, .error404 .entry-content { margin: 0; padding: 0; max-width: none; } /* 🚨 Y LA 404 NECESITA UNA MÁS: VOLVER `.site-content` A BLOQUE. GeneratePress lo pinta en FLEX —es su reparto `separate-containers`—, y la sección de la 404 cuelga de él COMO HIJO DIRECTO, no enterrada en `.entry-content` como en las páginas. De ítem flexible no crecía. Medido sobre el sitio servido el 2/sep/2026, ventana de 1422: #page ancho 1407 .site-content ancho 1407 display: flex .bm-404 ancho 1308 <- no llegaba a la orilla .bm-404__caja ancho 1180 x=64 O sea que el contenedor SÍ medía sus 1180 y SÍ se centraba —dentro de una sección de 1308—. Por eso el contenido salía en x=65 y no en los x=131 de la portada, y por eso soltar el ancho de `#page` no bastaba: el problema no era el ancho máximo, era el reparto. */ .error404 .site-content { display: block; } /* ── Las manchas entran con la sección ─────────────────────── El patrón de Petroleum (`.pg-geo` con `is-armed` / `is-live`): el fondo no está simplemente ahí, ENTRA. Arranca un poco más grande y desplazado, y se asienta cuando la sección asoma. Va lento a propósito —900ms contra los 420 del contenido—: un fondo que se mueve al mismo ritmo que el texto compite con él. Detrás, más despacio. Y ADEMÁS SE MUEVE CON EL SCROLL: `--bm-par` lo escribe el JS con la posición de la sección en la ventana. Es paralaje de verdad —el fondo va más lento que el contenido— y es lo que da profundidad sin una sola imagen. */ .bm-manchas::before { transform: translate3d(0, calc(var(--bm-par, 0) * 1px), 0); transition: opacity 900ms cubic-bezier(0.32, 0.72, 0, 1), scale 900ms cubic-bezier(0.32, 0.72, 0, 1); scale: 1; } .js-on .bm-manchas::before { opacity: 0; scale: 1.18; } .js-on .bm-manchas.is-viva::before { opacity: 1; scale: 1; } /* Sin JS —o con movimiento reducido— el fondo está y no se mueve. Nunca en blanco: un fondo invisible para siempre es peor que un fondo quieto. */ @media (prefers-reduced-motion: reduce) { .js-on .bm-manchas::before { opacity: 1 !important; scale: 1 !important; transform: none !important; } } /* ── Brillo especular que sigue al cursor ──────────────────── La firma de Liquid Glass: el reflejo se MUEVE por la superficie. 🚨 Y ESTÁ HECHO DE UNA MANERA MUY CONCRETA, POR UN FALLO QUE YA COSTÓ DOS PESTAÑAS CONGELADAS. La versión obvia —un `radial-gradient` cuyo centro sigue al cursor— obliga al navegador a REPINTAR la tarjeta en cada movimiento del ratón; y como la tarjeta lleva `backdrop-filter`, cada repintado recompone también el desenfoque. Con seis tarjetas en pantalla, el renderizador se cae. Aquí el degradado es FIJO —un círculo de 340px que no cambia nunca— y lo que se mueve es la capa, con `translate3d`. Mover una capa es trabajo del compositor: no repinta nada. El efecto en pantalla es idéntico y el coste es otro orden de magnitud. `--mx` y `--my` los escribe el JS en PÍXELES relativos a la tarjeta, y el `-170px` la centra en el cursor. Sin JS se queda en opacidad 0. */ .bm-card { /* Recorta el foco a la tarjeta. Va aquí y no en el `::after` porque lo que hay que recortar es la capa que se mueve. */ overflow: hidden; } .bm-card::after { content: ''; position: absolute; top: 0; left: 0; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; background: radial-gradient(circle closest-side, var(--vidrio-brillo) 0%, transparent 100%); transform: translate3d(calc(var(--mx, 0) * 1px - 170px), calc(var(--my, 0) * 1px - 170px), 0); transition: opacity var(--tr-media); } .bm-card:hover::after { opacity: 0.5; } /* El contenido va por encima del brillo. Sin esto, el foco pasa por delante del texto y lo lava. */ .bm-card > * { position: relative; z-index: 1; } /* ── Cabecera: menos plana ─────────────────────────────────── En reposo era una barra transparente con enlaces sueltos y un rectángulo negro: sobre papel blanco se leía como algo sin terminar. Ahora el reposo también tiene cuerpo —un filete inferior finísimo y un velo— y el botón deja de ser un rectángulo negro para llevar el degradado de la marca. */ .bm-cab:not(.is-flota) { background: color-mix(in srgb, var(--papel) 72%, transparent); border-bottom-color: var(--linea); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* El botón de la cabecera lleva el degradado y tinta negra encima. Las dos mitades juntas: el degradado pasa por la crema, y el blanco sobre crema da 1.3:1 — no se leería. */ .bm-cab__cta, .bm-cab__cta:hover, .bm-cab__cta:focus-visible { background: var(--grad-marca); color: #12201f; border-color: transparent; border-radius: 100px; font-weight: 600; } .bm-cab__cta:hover { opacity: 0.9; } /* 🚨 EL ENLACE DEL LOGOTIPO NO LLEVA FONDO. Cuando el logotipo era TEXTO, aquí había un degradado con `background-clip: text` para teñir las letras. Al pasar a imagen, ese degradado se quedó — y `background-clip: text` no recorta nada si dentro hay un ``: lo que se veía era un RECTÁNGULO de degradado detrás del PNG, colándose por los huecos transparentes entre las letras. En tema oscuro se notaba muchísimo. Ahora el color lo trae la propia imagen y aquí no se pinta nada. */ .bm-cab__logo { background: none; } /* El interruptor, más discreto: en la cabecera compite con el botón, y lo que se mira ahí es el botón. */ .bm-tema { width: 46px; height: 25px; border-width: 1px; } .bm-tema__bola { width: 17px; height: 17px; top: 3px; left: 3px; } [data-tema='oscuro'] .bm-tema__bola { transform: translateX(21px); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-tema__bola { transform: translateX(21px); } } /* ── La cabecera respira ───────────────────────────────────── Lo reporto Isaac: «choca con el borde y se siente feo». Tenia razon y eran dos cosas a la vez. 1. EL FILETE LE COMIA EL AIRE. El filete va fijo arriba y mide 5px; la cabecera empezaba a 1.2rem del borde de la ventana, o sea a menos de 1rem del filete. Se leian como una sola franja apretada. Ahora el relleno superior DESCUENTA el filete: el aire que se ve es el aire que se pidio. 2. ERA DEMASIADO BAJA para lo que lleva dentro. Un logotipo, cinco elementos de menu, un interruptor y un boton en 60px de alto no es una cabecera, es una barra de herramientas. Sube a ~92px en reposo. La pildora flotante tambien baja y engorda: pegada al filete parecia que se le habia olvidado terminar de entrar. */ .bm-cab { padding-top: calc(1.7rem + 5px); padding-bottom: 1.7rem; } .bm-cab__logo { font-size: 1.45rem; } .bm-cab__enlace { font-size: 0.94rem; } .bm-cab__cta { padding: 0.72rem 1.35rem; min-height: 42px; font-size: 0.9rem; } /* Flotando: se despega del filete y gana relleno. */ .bm-cab.is-flota { top: 1.15rem; padding: 0.7rem 1.25rem; } .bm-cab.is-flota .bm-cab__logo { font-size: 1.18rem; } /* La sub-navegacion baja con ella: si no, se le mete debajo. Los 6.5rem son la pildora de arriba (~52px) mas su margen mas aire. */ .bm-subnav { top: 6.5rem; } /* Y las anclas aterrizan mas abajo, que ahora flota mas cosa. */ .bm-sec[id] { scroll-margin-top: 10.5rem; } @media (max-width: 860px) { .bm-cab { padding-top: calc(1.15rem + 5px); padding-bottom: 1.15rem; } .bm-cab__logo { font-size: 1.25rem; } .bm-subnav { top: 5.5rem; } } /* El hero tiene que DEJAR SITIO a la cabecera. La cabecera va `fixed`, asi que no ocupa espacio en el flujo: sin este relleno, el antetitulo arranca a 16px de ella y se leen pegados. Los ~11rem son la altura de la cabecera (~96px) mas aire de verdad. Va aqui y no en la cabecera porque la cabecera flota sobre TODAS las paginas, y quien tiene que apartarse es la primera seccion de cada una. */ .bm-hero { padding-top: clamp(9rem, 14vw, 12rem); } /* Y en las paginas interiores, la primera seccion tambien. */ .bm-sec:first-of-type { padding-top: clamp(8.5rem, 12vw, 11rem); } /* 🚨 EN ESCRITORIO ESE AIRE SOBRA, Y COSTABA CONTENIDO. Lo reportó Isaac el 2/sep/2026: no se alcanzaban a ver los dos botones ni el renglón de «Cotizamos sin compromiso» sin rodar. El `clamp` de arriba llega a su TOPE de 12rem —192px— a partir de 1140px de ancho, y la cabecera de escritorio mide ~96px: quedaban otros ~96px de aire muerto antes del antetítulo. Medido sobre el sitio servido a 1440 de ancho, el último renglón del hero caía en y=769, o sea fuera de un portátil de 768. AQUÍ VA UN VALOR FIJO Y NO UN `clamp`, y es lo correcto: la cabecera de escritorio mide lo mismo a 900 que a 1920 de ancho —su alto sale del relleno y del logotipo, no del viewport—, así que la separación que tiene que dejar la primera sección tampoco depende del ancho. Los 8rem son los ~96px de la cabecera más ~32px de aire. ⚠ MÓVIL NO SE TOCA. Se probó recortarlo ahí primero y estaba bien como estaba: en un teléfono manda el SUELO del `clamp` —9rem— y la cabecera es más baja, así que la proporción ya cuadraba. */ @media (min-width: 861px) { .bm-hero, .bm-sec:first-of-type { padding-top: 7rem; } /* Y SE APRIETAN LOS TRES HUECOS DE DENTRO, no sólo el de arriba. Segunda pasada, el mismo 2/sep: con los 8rem de arriba aún no se veían las garantías y bajar sólo el relleno no daba para más —a 6rem la cabecera quedaría pegada al antetítulo—. Medido en el sitio servido a 1440 de ancho, los cuatro huecos entre el antetítulo y el último renglón sumaban ~98px de aire. Repartido: relleno de arriba 128 -> 112 (-16) bajo el titular 22 -> 16 (-6) bajo la entradilla 38 -> 24 (-14) sobre las garantías 28 -> 18 (-10) Son 46px, y ninguno de los cuatro baja de lo que separa dos párrafos: no se aprieta el texto, se quita aire de más. ⚠ SÓLO EN ESCRITORIO. En teléfono estos huecos están bien —lo dijo Isaac— y ahí el hero no compite con una cabecera de 96px. */ /* Y EL TITULAR PASA DE 4 RENGLONES A 3, sin tocar el cuerpo de letra: se le ensancha la medida de 17ch a 21ch. Es el bloque más alto del hero —305px de 680— y un renglón suyo vale 81px, más que los cuatro huecos juntos que se acaban de apretar. El sitio para ensancharlo ya estaba: a 1440 el titular ocupaba ~800px de los 1180 del contenedor, o sea que sobraban 380 a su derecha sin usar. 21ch siguen siendo una medida de titular, no de párrafo. ⚠ Es lo ÚLTIMO que se puede quitar sin tocar el diseño. Si aún así no entrara, la siguiente palanca ya no es espacio: es bajar el tope del `clamp` del cuerpo de letra, y eso cambia cómo se ve la portada. */ .bm-hero__titular { margin-bottom: 1rem; max-width: 21ch; } .bm-hero__entrada { margin-bottom: 1.5rem; } .bm-hero .bm-garantias { margin-top: 1.1rem; } } /* ── El logotipo de la marca ───────────────────────────────── Dos archivos, uno por tema, y se ensena el que toca. El logotipo lleva la segunda M en degradado, asi que no se puede resolver con una mascara tenida como los logos de cliente: la mascara solo conserva el alfa y el degradado se perderia. El alto lo manda el contenedor y el ancho va `auto`: asi el logotipo escala sin que haya que tocar dos numeros cada vez. Y los atributos `width`/ `height` estan en el marcado para que el navegador reserve el hueco antes de descargar la imagen — si no, al cargar la cabecera pega un salto. */ .bm-marca { display: block; width: auto; height: 100%; } .bm-marca--oscuro { display: none; } [data-tema='oscuro'] .bm-marca--claro { display: none; } [data-tema='oscuro'] .bm-marca--oscuro { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-marca--claro { display: none; } :root:not([data-tema='claro']) .bm-marca--oscuro { display: block; } } /* El enlace del logotipo pasa a ser una caja con altura: es lo que define el tamano del logotipo, y lo que la pildora mide para saber cuanto encogerse. */ .bm-cab__logo { display: block; height: 34px; transition: height var(--tr-media); } .bm-cab.is-flota .bm-cab__logo { height: 26px; } /* El alto de esta caja ES el tamaño del logotipo: `.bm-marca` va a `height: 100%`. Los 42px son los de teléfono, donde la marca comparte renglón con nada y no necesita gritar. */ .bm-pie__nombre { height: 42px; margin-bottom: 1rem; } /* En escritorio sube a 64px. Lo pidió Isaac el 1/sep/2026: desde que la banda de arriba son dos columnas, el logotipo comparte fila con el boletín entero —rótulo, titular, párrafo, dos campos y un botón— y a 42px se leía como un pie de foto al lado de un bloque con peso. A 64px mide 205px de ancho, que entran de sobra en las 38ch de su columna. */ @media (min-width: 861px) { .bm-pie__nombre { height: 64px; margin-bottom: 1.15rem; } } @media (max-width: 860px) { .bm-cab__logo { height: 28px; } } /* ── El boton de la cabecera, sin saturar ──────────────────── Llevaba el degradado de cuatro paradas. En una pildora de 42px el degradado completo —crema, coral, turquesa, teal— mete cuatro colores en el elemento MAS PEQUENO de la cabecera, justo al lado del logotipo, que ya trae el degradado. Dos degradados a 20cm uno del otro se pelean, y ninguno de los dos gana. Ahora es tinta solida: el mismo gesto que la pestana activa de la sub-navegacion. El sitio queda con UN idioma para «esto es la accion», y el degradado se reserva para donde significa marca — el logotipo y el filete. */ .bm-cab__cta, .bm-cab__cta:hover, .bm-cab__cta:focus-visible { background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 500; } .bm-cab__cta:hover { opacity: 0.85; } /* ════════════════════════════════════════════════════════════ TANDA DEL 28/AGO (cierre) — lo que reportó Isaac ════════════════════════════════════════════════════════════ */ /* ── 🚨 EL SCROLL IBA TRABADO, Y ERA EL VIDRIO ─────────────── «Al ir bajando se siente trabada la página». Tenía razón, y la causa es concreta: había **más de veinte elementos con `backdrop-filter`** a la vez —cada tarjeta—. Un `backdrop-filter` obliga al navegador a recomponer lo que hay DETRÁS del elemento en cada fotograma en que algo se mueve; con el scroll, todo se mueve. Veinte de esos es pedirle veinte recomposiciones por fotograma. El desenfoque se queda SÓLO donde aporta y son pocos elementos: la cabecera y la sub-navegación, que flotan sobre el contenido y ahí el desenfoque es lo que las despega. Las tarjetas no flotan sobre nada — están sobre las manchas, que ya son suaves. Y no se pierde el vidrio: la tarjeta conserva las otras dos capas —el fondo translúcido y el brillo especular del canto—, que son las que dan el relieve. Lo que desaparece es lo que no se veía y costaba todo. */ .bm-card { -webkit-backdrop-filter: none; backdrop-filter: none; /* Sin desenfoque detrás, el fondo sube de opacidad para que el texto no dependa de lo que pase por debajo. */ background: color-mix(in srgb, var(--papel) 86%, transparent); } [data-tema='oscuro'] .bm-card { background: color-mix(in srgb, #172120 82%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-card { background: color-mix(in srgb, #172120 82%, transparent); } } /* `will-change` reserva una capa de composición. En 20 tarjetas son 20 capas permanentes en memoria por un efecto que sólo ocurre al pasar el cursor: se pide cuando hace falta y no antes. */ .bm-card::after { will-change: auto; } .bm-card:hover::after { will-change: transform, opacity; } /* ── Las uniones entre secciones ───────────────────────────── «Se nota mucho dónde corta una sección y dónde empieza otra». El corte era real: la banda alterna cambiaba de color de golpe, en una línea recta de 1500px de ancho. Ahora la banda se DESVANECE por arriba y por abajo. El color sigue estando —la sección se distingue— pero el borde deja de ser una línea y pasa a ser una transición de un 14 % de la altura. */ .bm-sec--hondo { background: linear-gradient( 180deg, transparent 0%, var(--papel-hondo) 14%, var(--papel-hondo) 86%, transparent 100% ); } /* ── Los colores del tema claro, más presentes ─────────────── «Apenas y se ven». Las manchas se calibraron pensando en papel impreso, y en pantalla se quedaban cortas. Suben, y el papel de las bandas se tiñe un poco en vez de ser gris. Siguen por debajo del umbral que importa: el texto va sobre el papel, no sobre la mancha, así que subirlas no toca ningún contraste de lectura. */ :root { --mancha-teal: 0.34; --mancha-menta: 0.42; --mancha-crema: 0.62; --papel-hondo: #f2f7f6; } /* ── El conmutador, con sol y luna ─────────────────────────── La pastilla lleva dentro el icono del tema en el que ESTÁS: sol en claro, luna en oscuro. Los dos van en el marcado y se enseña el que toca — cambiar el `d` de un path por JS haría que el icono saltara sin transición. Los dibujos son propios, en `0 0 24 24`, con el mismo grosor de trazo que el resto del sitio. No se usa un emoji: cambia de forma en cada sistema y no se puede teñir. */ .bm-tema { width: 54px; height: 30px; } .bm-tema__bola { width: 22px; height: 22px; top: 3px; left: 3px; display: grid; place-items: center; } [data-tema='oscuro'] .bm-tema__bola { transform: translateX(24px); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-tema__bola { transform: translateX(24px); } } .bm-tema__ico { grid-area: 1 / 1; width: 13px; height: 13px; /* El icono va del color del PAPEL porque la pastilla es de tinta: es un hueco en la pastilla, no un dibujo encima. */ stroke: var(--papel); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--tr-rapida); } .bm-tema__ico--luna { opacity: 0; } [data-tema='oscuro'] .bm-tema__ico--sol { opacity: 0; } [data-tema='oscuro'] .bm-tema__ico--luna { opacity: 1; } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-tema__ico--sol { opacity: 0; } :root:not([data-tema='claro']) .bm-tema__ico--luna { opacity: 1; } } /* ── El cohete que vuelve arriba ───────────────────────────── Portado de `BackToTop.tsx` de la landing, incluido el despegue. LA CLAVE DE QUE SE SIENTA BIEN es que el vuelo y el scroll comparten DURACIÓN y CURVA: el cohete toca el borde superior en el mismo instante en que la página termina de llegar al hero. Si cada uno fuera por su lado, coincidirían al final y se notaría el desajuste en medio. Aparece pasados 400px de scroll. El aro es el degradado de marca. */ .bm-cohete { position: fixed; right: 2rem; bottom: 2rem; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; z-index: 85; opacity: 0; transform: translateY(16px) scale(0.85); pointer-events: none; transition: opacity 320ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); } .bm-cohete.is-visible { opacity: 1; transform: none; pointer-events: auto; } .bm-cohete:hover { transform: translateY(-3px) scale(1.08); } /* El aro va en un `::before` para que el botón no tenga fondo propio: así el cohete puede salirse volando sin arrastrar una caja detrás. */ .bm-cohete::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--grad-marca); /* Aro de degradado: se pinta el degradado y se recorta el centro con una máscara. Un `border` no admite degradado. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .bm-cohete__nave { width: 22px; height: 22px; overflow: visible; transform: rotate(-45deg); fill: none; stroke: url(#bm-grad-cohete); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bm-cohete.is-despegando .bm-cohete__nave { animation: bm-despegue 1300ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes bm-despegue { 0% { transform: translateY(0) rotate(-45deg); opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(calc(-100vh + 90px)) rotate(-45deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bm-cohete.is-despegando .bm-cohete__nave { animation: none; } } @media (max-width: 620px) { .bm-cohete { right: 1rem; bottom: 1rem; } } /* ── Mas ligereza para el scroll ───────────────────────────── Tres ajustes mas, todos con el mismo criterio: que el navegador tenga menos trabajo por fotograma mientras se rueda. 1. LAS MANCHAS SE PROMUEVEN UNA VEZ. Sin `will-change`, el navegador decide en cada fotograma si conviene darle capa propia a la capa que se mueve, y esa decision cuesta. Con el aviso, la promociona al principio y ya. 2. LA CAPA DE MANCHAS SE ENCOGE. Iba a `inset: -20%`, o sea un 40% mas grande que la seccion —en una seccion de 1200px de alto son casi 500px de mas que hay que componer y recortar en cada fotograma—. Con el recorrido del paralaje bajado a 24px, con 60px de margen sobra. 3. `contain: paint` en las secciones. Le dice al navegador que nada de dentro se pinta fuera, asi que puede saltarse la seccion entera cuando no esta en pantalla en vez de comprobarlo pieza por pieza. */ .bm-manchas::before { inset: -60px; will-change: transform; } .bm-sec { contain: paint; } /* El cohete no puede vivir dentro de un `contain: paint`, pero es hijo del , asi que no le afecta. Se deja anotado por si alguien lo mueve. */ /* ── La página 404 ─────────────────────────────────────────── Sustituye la de GeneratePress, que era un título y un buscador sobre papel en blanco. La plantilla es `tema-hijo/404.php`; aquí va sólo su estilo. A quién le sirve y cuándo —la pregunta que manda la regla INDISPENSABLE—: a quien escribió mal una dirección o llegó por un enlace viejo. Lo que necesita es entender en un vistazo que no es culpa suya y tener a mano lo que sí existe. Nada más: una página de error con veinte enlaces es una segunda portada, y quien llega aquí no venía a explorar. NO lleva manchas propias: la clase `bm-manchas--1` se la pone la plantilla, igual que a cualquier sección. */ /* 🚨 NO LLEVA `display: flex`, Y SE PROBÓ CON ÉL. Con la sección en flex, `.bm-cont` pasa a ser un ítem flexible y deja de respetar su `max-width: var(--cont-max)`: el contenido se iba a la orilla del relleno de la sección en vez de al contenedor de 1180px. Medido sobre el sitio SERVIDO el 2/sep/2026: la portada arranca en x=131 y esta página arrancaba en x=65, o sea 66px de más por lado. En bloque, como todas las demás secciones, cae donde le toca. El flex estaba para centrar vertical. No hace falta: con el mínimo de alto y el relleno de arriba la página se sostiene, y arrancar arriba es como se lee el resto del sitio. */ .bm-404 { /* La cabecera va `fixed` y no ocupa sitio en el flujo. Sin este mínimo, en una ventana corta el rótulo «Error 404» nace debajo de la píldora. */ min-height: calc(100vh - 6rem); padding-top: 9rem; } .bm-404__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); } /* La ilustración va PRIMERA en el marcado —para que en el teléfono se vea antes que el texto— y a la DERECHA en pantalla ancha. `order` es lo que separa las dos cosas sin duplicar marcado. */ .bm-404__ilustra { order: 2; } .bm-404__pixel { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; /* El PNG viene recortado y con alfa, así que el halo cian de Pixel es el único brillo: no lleva sombra ni fondo, que sobre papel blanco se verían como un parche gris alrededor del recorte. */ } .bm-404__texto { order: 1; } /* El titular es un
por jerarquía —es el título de la página— pero se ve como un
: a tamaño de portada compite con el dibujo, y aquí el dibujo es quien cuenta lo que pasó. */ .bm-404__titulo { margin: 0.2rem 0 0; } .bm-404__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2rem); } .bm-404__rotulo-pistas { margin: clamp(2rem, 4vw, 2.75rem) 0 0.9rem; font-size: 0.88rem; color: var(--tinta-suave); } /* Dos columnas y no una lista: cuatro destinos en fila se leen de un vistazo, apilados obligan a recorrerlos. */ .bm-404__pistas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } /* Cada pista es una tarjeta mínima: filete a la izquierda en el acento, que es el mobiliario del documento, y nada más. Sin vidrio: cuatro tarjetas de vidrio aquí competirían con la ilustración, que es lo que tiene que mirar. */ .bm-404__pista { display: block; padding: 0.7rem 0.9rem; border-left: 2px solid var(--linea-fuerte); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; text-decoration: none; transition: border-color var(--tr-media), background-color var(--tr-media), transform var(--tr-media); } .bm-404__pista strong { display: block; font-family: var(--fuente-titulo); font-size: 0.98rem; font-weight: 600; color: var(--tinta); } .bm-404__pista em { display: block; margin-top: 0.15rem; font-style: normal; font-size: 0.85rem; line-height: 1.45; color: var(--tinta-suave); } .bm-404__pista:hover, .bm-404__pista:focus-visible { border-left-color: var(--acento); background: var(--papel-hondo); transform: translateX(3px); } .bm-404__pista:hover strong { color: var(--acento); } /* Apilado: la ilustración arriba y más chica —a tamaño de escritorio se come la pantalla del teléfono entera y el texto queda fuera de la vista—. */ @media (max-width: 860px) { .bm-404 { min-height: 0; padding-top: 7.5rem; text-align: center; } .bm-404__caja { grid-template-columns: 1fr; } .bm-404__pixel { max-width: 320px; } .bm-404 .bm-lead { margin-inline: auto; } .bm-404__acciones { justify-content: center; } .bm-404__pista { text-align: left; } } @media (max-width: 480px) { .bm-404__pistas { grid-template-columns: 1fr; } } /* ============================================================ TARJETAS — GESTOS DE ACTIVACIÓN (3/sep/2026) ============================================================ De dónde sale esto: del catálogo de 22 tarjetas que se armó el 3/sep a partir de las de Petroleum. Lo que Isaac eligió es el mecanismo de la BARAJA —«se ve una y las demás se desenfocan»— más una decoración callada por sección. LA REGLA QUE DECIDE ANTES QUE EL GUSTO, y no es negociable: 🚨 **Si la tarjeta es un ENLACE, no se desenfoca.** Una tarjeta atenuada y borrosa se lee como DESHABILITADA, y el visitante no la pulsa. En la portada eso descarta casos (`.bm-caso`, con uno o dos enlaces dentro) y servicios (`.bm-serv`, que es un `` entero). El desenfoque se queda donde no hay nada que pulsar: las tres fases y las tarjetas de la App. La misma conclusión está escrita en el CSS de Petroleum, con su razón. 🚨 **Una sola tarjeta con gesto fuerte por pantalla.** Dos se anulan: el ojo no sabe cuál importa y las dos se leen como adorno. Y el reparto que salió de ahí: Casos troquel teñido con el color del cliente + filete Tres fases desenfoque de hermanas (ya tienen mascota y mancha) Servicios sólo filete — es la sección que se queda callada Bimm App desenfoque + el borde de luz en «abre el 15» ============================================================ */ /* ── El foco de la Bimm App ────────────────────────────────── 🚨 ESTO HACÍA LO CONTRARIO HASTA EL 22/sep/2026. Era el «desenfoque de hermanas»: las tres nítidas, y al señalar una se apagaban las otras dos. Isaac le dio la vuelta: «que cuando estén inactivas estén desenfocadas las 3, cuando se activen como que se acerquen y se enfoquen». Así que el REPOSO es ahora el estado borroso y encogido, y activar es enfocar y acercar. Se cae el `:has()`, que ya no hace falta: cada tarjeta decide sola y no necesita mirar a sus hermanas. ⚠ ALCANCE: `bm-grid--foco` vive SÓLO en `bloques/nivel-1/05-bimm-app.html` —comprobado con grep antes de tocar—, así que esto no llega a ninguna otra rejilla. Si algún día se le pone a otra sección, hereda este gesto entero. 🚨 EL ACERCAMIENTO VA EN `scale`, LA PROPIEDAD SUELTA, Y NO EN `transform`. El `transform` de estas tarjetas ya está ocupado dos veces: `.js-on .bm-up` lo usa para la entrada al asomar y `.bm-card:hover` para el levantón de 3px. Metiendo aquí un `transform` habría que ganarle en peso a `.is-visible` —que vale (0,3,0)— y al hacerlo se rompería la entrada. `scale` se multiplica con lo que haya y no pelea con nadie. Y por lo mismo NO se toca la opacidad, aunque el efecto viejo sí lo hacía: la opacidad es la que mueve la entrada de `.bm-up`. El desenfoque y el tamaño dicen lo mismo sin disputarle una propiedad a nadie. ⚠ `filter` crea contexto de apilamiento: por eso la señalada sube de `z-index`, o una borrosa de al lado se pinta encima de su canto. */ /* 🚨 LOS SELECTORES LLEVAN `.js-on` DELANTE Y NO ES DECORACIÓN: SIN ESO LA TRANSICIÓN NO CORRÍA. Estas tres tarjetas llevan `.bm-up` para entrar al asomar, y `.js-on .bm-up` declara `transition: opacity, transform`. Pesa (0,2,0), más que `.bm-grid--foco > *`, y `transition` es un ATAJO: ganaba entera, así que `filter` y `scale` se quedaban sin transición y cambiaban de golpe. Eso era el «muy brusco» que reportó Isaac —no la curva—. Desde fuera las dos cosas se ven igual, y por eso se cazó midiendo: leer `transitionProperty` en el sitio servido devolvía `opacity, transform`, sin rastro de `filter` ni de `scale`. ⚠ LA LISTA SE ESCRIBE ENTERA, las cuatro de estado más las dos de la entrada. Al ganarle el atajo a `.bm-up` hay que devolverle lo suyo o la sección aparece de golpe al asomar. El selector sin `.js-on` se queda como respaldo: si el script no arranca, `.js-on` no existe y esta regla es la única que hay. `border-top-color` y `box-shadow` entran aquí porque son parte del MISMO cambio de estado —el filete se tiñe y la tarjeta levanta sombra al activarse— y venían sin transición por este mismo atropello. */ @media (hover: hover) and (pointer: fine) { .js-on .bm-grid--foco > *, .bm-grid--foco > * { filter: blur(3px) var(--niebla-lavado); scale: 0.955; transition: filter var(--tr-foco), scale var(--tr-foco), border-top-color var(--tr-foco), box-shadow var(--tr-foco), opacity var(--tr-lenta), transform var(--tr-lenta); } /* Pesan lo mismo que la de arriba y van DESPUÉS: el orden es lo único que les da la última palabra. */ .bm-grid--foco > *:hover, .bm-grid--foco > *:focus-within { filter: none; scale: 1.04; z-index: 3; } } /* ── …y en táctil, sin JS nuevo ────────────────────────────── `is-saltando` ya la pone el IntersectionObserver de `bloques.js` en la tarjeta que cruza el centro de la pantalla —es lo que hace saltar a la mascota—. Aquí se reutiliza tal cual: la centrada es la que se enfoca. Un observador nuevo para lo mismo sería un segundo motor haciendo el mismo trabajo. ⚠ Sólo dentro de `hover: none`. Fuera de la consulta, en escritorio las tarjetas se enfocarían solas al rodar la página sin que el cursor toque nada — que es exactamente el fallo que Isaac vio con las mascotas. */ @media (hover: none) { .js-on .bm-grid--foco > *, .bm-grid--foco > * { filter: blur(2.7px) var(--niebla-lavado); scale: 0.955; transition: filter var(--tr-foco), scale var(--tr-foco), border-top-color var(--tr-foco), box-shadow var(--tr-foco), opacity var(--tr-lenta), transform var(--tr-lenta); } .bm-grid--foco > .is-saltando { filter: none; scale: 1.04; z-index: 3; } } /* ── LA NEBLINA ────────────────────────────────────────────── 🚨 EL DESENFOQUE SOLO NO ES NEBLINA, y ése era el problema. Isaac lo pidió tres veces por el lado del tiempo —«más lento», «aún más lento», «como a 2400ms»— y seguía sin ser lo que quería: «una especie de revelación, como si se quitara neblina de algo». Alargar un `blur` no lo consigue porque lo que falta no es duración, es MATERIA. La niebla de verdad hace cuatro cosas a la vez, y aquí están las cuatro: · desenfoca → `blur()` · LAVA EL COLOR → `saturate(0.28)` · apaga → `brightness(0.74)` · aplana el contraste → `contrast(0.92)` y encima de todo eso hay un VELO lechoso, que es esta regla. Sin el velo se ve una foto desenfocada; con él se ve algo detrás de la niebla. ⚠ `::before` ESTÁ LIBRE EN ESTAS TARJETAS Y EN OTRAS NO. `.bm-card--filete` lo usa para el filete que se dibuja y `.bm-card.bm-fase` para la mancha de su mascota. Las tres de la Bimm App son `.bm-card` a secas, así que aquí no se le quita el sitio a nadie. Si algún día llevan filete, esto choca. ⚠ Y VA POR ENCIMA DEL TEXTO (`z-index: 2`), que es lo contrario de lo normal en este archivo. La niebla está DELANTE de lo que tapa; puesta detrás sería un fondo de color y no taparía nada. */ .bm-grid--foco > .bm-card::before { content: ''; position: absolute; inset: -10%; z-index: 2; pointer-events: none; /* Las tres paradas salen de la densidad del tema, así que la niebla se aclara entera con un solo número. `calc()` sobre un porcentaje dentro de `color-mix` es válido y es lo que evita tener tres tokens. */ background: linear-gradient(170deg, color-mix(in srgb, var(--tinta) var(--niebla-densidad), transparent) 0%, color-mix(in srgb, var(--tinta) calc(var(--niebla-densidad) * 0.62), transparent) 42%, color-mix(in srgb, var(--tinta) calc(var(--niebla-densidad) * 0.31), transparent) 78%, transparent 100%); opacity: 1; /* Se LEVANTA al irse, no se apaga en el sitio. Son 14px y sobran: lo que convence no es ver el movimiento, es que el velo no se desvanezca quieto como un interruptor. */ translate: 0 0; transition: opacity var(--tr-foco), translate var(--tr-foco); } .bm-grid--foco > .bm-card:hover::before, .bm-grid--foco > .bm-card:focus-within::before, .bm-grid--foco > .bm-card.is-saltando::before { opacity: 0; translate: 0 -14px; } /* ── LA MANCHA QUE SIGUE AL CURSOR ─────────────────────────── No es una capa nueva: es el brillo especular que TODAS las tarjetas ya tienen en `::after`, teñido del acento y crecido. Se reaprovecha a propósito, porque ese `::after` está montado de una manera muy concreta para no tumbar el navegador —el degradado es FIJO y lo que se mueve es la capa, con `translate3d`— y rehacerlo aquí sería repetir el fallo que ya costó dos pestañas congeladas. Ver su bloque más arriba. ⚠ EL `-240px` ES LA MITAD DE 480 Y TIENE QUE SEGUIRLO. Es lo que centra la mancha en el cursor; si uno cambia y el otro no, la mancha se va a una esquina y nada avisa. */ .bm-grid--foco > .bm-card::after { width: 480px; height: 480px; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--acento) 26%, transparent) 0%, color-mix(in srgb, var(--acento) 9%, transparent) 46%, transparent 100%); transform: translate3d(calc(var(--mx, 0) * 1px - 240px), calc(var(--my, 0) * 1px - 240px), 0); transition: opacity var(--tr-foco); } /* Aparece con la niebla, no antes: es el premio de haber enfocado. */ .bm-grid--foco > .bm-card:hover::after { opacity: 0.9; } /* Con movimiento reducido no se difumina ni se acerca nada: apilar, desenfocar y escalar marea. Queda el reposo legible, que es el que aguanta solo. ⚠ VA DESPUÉS DE LAS DOS CONSULTAS DE ARRIBA A PROPÓSITO: pesa lo mismo que ellas (una clase), así que lo único que le da la última palabra es el orden. Si esto sube, deja de servir para nada y en silencio. */ @media (prefers-reduced-motion: reduce) { .js-on .bm-grid--foco > *, .bm-grid--foco > * { filter: none; scale: 1; } /* Y el velo se quita del todo. Dejarlo fijo taparía el texto para siempre justo en el ajuste que existe para que nada estorbe. */ .bm-grid--foco > .bm-card::before { display: none; } } /* ── El filete que se dibuja ───────────────────────────────── La tarjeta ya lleva su regla de 2px arriba —es lo que la ata al documento—. Esto pinta ENCIMA de esa regla el degradado de cuatro paradas de la marca, dibujándose de izquierda a derecha. Por qué el degradado y no un color: es el MISMO filete que llevan la cotización, la orden de servicio y la cabecera del sitio. No es un adorno nuevo, es el gesto de la casa repetido donde el visitante está mirando. ⚠ NO se combina con `.bm-fase`: esa tarjeta ya usa su `::before` para la mancha del color de su mascota (`.bm-card.bm-fase::before`). Las fases se activan por su borde teñido, que es su propia versión de esto. Se anima `transform`, no `width`: sale gratis. */ .bm-card--filete::before { content: ''; position: absolute; top: -2px; /* encima del borde de 2px, no debajo */ left: 0; right: 0; height: 2px; z-index: 2; background: var(--grad-marca); transform: scaleX(0); transform-origin: left center; transition: transform var(--tr-lenta); pointer-events: none; } .bm-card--filete:hover::before, .bm-card--filete:focus-within::before { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .bm-card--filete::before { transition: none; } } /* ── El borde de luz que gira ──────────────────────────────── Se usa UNA vez en todo el sitio y su razón es exacta: señala lo que está por estrenarse —la Bimm App abre el 15 de septiembre—. El día que abra, esta clase se retira. Si se pone en dos sitios deja de significar eso y pasa a ser decoración. Cómo funciona: un `conic-gradient` más grande que la tarjeta girando dentro de un envoltorio con `overflow: hidden`; la tarjeta opaca encima deja ver sólo el canto. Lo que gira es `transform`, así que el trabajo es del compositor y no repinta. ⚠ La animación arranca al pasar el cursor y no en reposo: una animación infinita gasta batería y compite con el texto de la página. */ .bm-luz { position: relative; padding: 1.5px; border-radius: var(--radio-vidrio); overflow: hidden; isolation: isolate; margin-top: clamp(1.75rem, 4vw, 2.75rem); } .bm-luz::before { content: ''; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; z-index: 0; transform: translate(-50%, -50%) rotate(0turn); background: conic-gradient(from 0deg, transparent 0deg 244deg, var(--turquesa) 300deg, var(--teal) 332deg, transparent 360deg); opacity: 0; transition: opacity var(--tr-media); pointer-events: none; } .bm-luz > .bm-card { position: relative; z-index: 1; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .bm-luz:hover::before { opacity: 1; animation: bm-girar 2.6s linear infinite; } } @keyframes bm-girar { to { transform: translate(-50%, -50%) rotate(1turn); } } /* El aviso de apertura: dentro del envoltorio de luz ya no es un párrafo suelto, es una tarjeta. Se centra porque es UNA en su fila y alineada a la izquierda quedaría como una tarjeta a la que le falta su pareja. */ .bm-app__aviso { text-align: center; font-family: var(--fuente-titulo); font-size: 1.02rem; } .bm-app__aviso strong { color: var(--acento); font-weight: 600; } /* ── El expediente en abanico ──────────────────────────────── Para `/servicios/`, en «cómo se contrata». Es la baraja de Petroleum traída aquí: cuatro hojas solapadas en arco, y al señalar una se endereza, sube y crece. Las cuatro son los documentos que Bimm entrega de verdad —COT/BIMM, CTO/BIMM, BM/XX y el manual con su número de serie—, con su folio. 🚨 NACE ABIERTO, Y ESO CAMBIÓ SOBRE LA MARCHA. La primera versión era una PILA que se abría en abanico al pasar el cursor. Se veía muy bien y estaba mal, por lo mismo que ya costó media sección en Petroleum: **el contenido no puede depender de que alguien descubra un gesto.** Lo escondido eran los cuatro documentos de un trámite —justo lo que la sección viene a explicar— y encima el gesto sólo existe con cursor: en un teléfono no se abría nunca. Ahora el arco es el reposo, se lee entero de un vistazo, y el cursor sólo levanta la hoja que se señala. La pila cerrada sigue siendo buena idea para un ADELANTO —algo que invita a abrir y cuyo contenido no hace falta para entender la página—; no para esto. 🚨 Y VA EN FLEX CON MARGEN NEGATIVO, NO EN POSICIÓN ABSOLUTA. La segunda versión colocaba las hojas en absoluto, a ±348 y ±116 del centro, con 250px de ancho fijo. Medido en el DOM: el contenido de cada hoja acababa 50px DENTRO de la siguiente, y se leía «en cuánto tiem» y «los datos fisca» cortados a media palabra. El ancho fijo contra un contenedor elástico no cuadra en ningún ancho salvo el que se probó, y además obligaba a un corte a 1120px calculado a mano. En flex, cada hoja mide lo que le toca del contenedor, el solape es un número y no una resta de coordenadas, y no hace falta ningún corte por ancho. 🚨 Y LAS HOJAS SON OPACAS, no de vidrio. La tarjeta normal es translúcida al 82 % y funciona porque debajo tiene el papel con sus manchas; aquí debajo tiene OTRA HOJA, y se leían los tres textos de abajo a través del de arriba. Una hoja de papel no deja ver la siguiente. Sólo se anima `transform`: el trabajo es del compositor. */ .bm-abanico { display: flex; align-items: stretch; justify-content: center; margin-top: clamp(2rem, 5vw, 3.25rem); /* Aire para que la hoja levantada no se recorte contra la sección. */ padding: 30px 0 20px; } .bm-abanico .bm-hoja { flex: 1 1 0; min-width: 0; margin-left: -26px; background-color: var(--papel); transform-origin: bottom center; transition: transform var(--muelle), box-shadow var(--tr-lenta), border-top-color var(--tr-media); } .bm-abanico .bm-hoja:first-child { margin-left: 0; } [data-tema='oscuro'] .bm-abanico .bm-hoja { background-color: #172120; } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-abanico .bm-hoja { background-color: #172120; } } /* 🚨 EL RELLENO DERECHO DE LAS TRES PRIMERAS NO ES DECORATIVO. La hoja de encima monta sobre el canto derecho de la anterior, y sin esto se come el final de cada renglón. La cuenta es la de Petroleum: 26px de solape más los ~17px que invade la esquina de una hoja girada respecto a su vecina son 43px; 3.25rem (52px) los cubre con holgura. La cuarta no lo lleva: nadie monta encima de ella. */ .bm-abanico .bm-hoja:nth-child(1), .bm-abanico .bm-hoja:nth-child(2), .bm-abanico .bm-hoja:nth-child(3) { padding-right: 3.25rem; } /* El folio, al pie y a la izquierda: es donde va en el papel, y es la esquina que no tapa nadie. Arriba a la derecha quedaba oculto en tres de cuatro. */ .bm-hoja__folio { position: absolute; left: 1.35rem; bottom: 1rem; font-family: var(--fuente-titulo); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; color: var(--acento); } /* Sitio para el folio al pie, y un suelo común para las cuatro. */ .bm-abanico .bm-hoja { padding-bottom: 3rem; } /* El arco: las de los extremos giran más y caen un poco, como una mano de cartas. Menos de 6° — con más, la hoja de fuera se sale del renglón óptico de la sección y parece que se cayó. */ .bm-abanico .bm-hoja:nth-child(1) { transform: rotate(-5deg) translateY(16px); z-index: 1; } .bm-abanico .bm-hoja:nth-child(2) { transform: rotate(-1.7deg) translateY(2px); z-index: 2; } .bm-abanico .bm-hoja:nth-child(3) { transform: rotate(1.7deg) translateY(2px); z-index: 3; } .bm-abanico .bm-hoja:nth-child(4) { transform: rotate(5deg) translateY(16px); z-index: 4; } @media (hover: hover) and (pointer: fine) { /* Se saca de la mano: se endereza, sube y crece. No se desenfocan las otras —eso es para elegir UNA entre varias, y aquí las cuatro son la misma explicación: apagar tres cuartas partes de un trámite no ayuda a nadie. */ .bm-abanico .bm-hoja:hover { transform: rotate(0deg) translateY(-22px) scale(1.05); z-index: 9; border-top-color: var(--acento); box-shadow: 0 26px 52px rgba(18, 32, 31, 0.2), inset 0 1px 0 var(--vidrio-brillo); } } [data-tema='oscuro'] .bm-abanico .bm-hoja:hover { box-shadow: 0 26px 52px rgba(0, 0, 0, 0.62), inset 0 1px 0 var(--vidrio-brillo); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-abanico .bm-hoja:hover { box-shadow: 0 26px 52px rgba(0, 0, 0, 0.62), inset 0 1px 0 var(--vidrio-brillo); } } /* Cuatro hojas en arco necesitan ancho. A 900px cada una se queda en 230px y el texto sale a tres palabras por renglón: ahí se apilan en lista, que es lo mismo que hay que leer. Y en táctil no hay cursor que levante ninguna, así que la lista no es el plan B: es el diseño para ese ancho. */ @media (max-width: 980px), (hover: none) { .bm-abanico { display: grid; gap: 0.9rem; padding: 0; } .bm-abanico .bm-hoja { margin-left: 0; padding-right: 1.35rem; padding-bottom: 3rem; } .bm-abanico .bm-hoja:nth-child(1), .bm-abanico .bm-hoja:nth-child(2), .bm-abanico .bm-hoja:nth-child(3), .bm-abanico .bm-hoja:nth-child(4) { transform: none; } } @media (prefers-reduced-motion: reduce) { .bm-abanico .bm-hoja { transition: none; } } /* ── La vía directa con pestaña de expediente ──────────────── Para `/contacto/`. Cada vía —WhatsApp, correo— es una ficha con su pestaña arriba, como una carpeta de expediente. 🚨 LA PESTAÑA TIENE QUE DECIR ALGO REAL: qué es esa vía y para qué sirve. Si algún día lleva una palabra puesta para llenarla, es la sección «Clientes» de la regla indispensable otra vez. La tarjeta entera es un enlace, así que aquí NO se desenfoca nada: se levanta la pestaña y se tiñe el filete, que es acuse suficiente. */ .bm-vias { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: calc(clamp(1.75rem, 4vw, 2.75rem) + 1.4rem); } @media (max-width: 760px) { .bm-vias { grid-template-columns: 1fr; } } .bm-via { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; /* La esquina de arriba a la izquierda se queda recta: es donde encaja la pestaña, y una pestaña sobre una esquina redondeada se despega. */ border-top-left-radius: 0; } /* 🚨 LA PESTAÑA VA DENTRO DEL CANTO, NO POR ENCIMA. La primera versión la colgaba del borde superior con `top: -1.55rem`, como una carpeta de verdad —y NO SE VEÍA: `.bm-card` lleva `overflow: hidden` para recortar el foco del cursor, y se comía entera la parte que sobresalía. Es el cuarto elemento de este archivo que tropieza con ese `overflow` —ya pasó con la mascota de las fases, con el troquel y con la de este formulario—. La regla: si algo tiene que salirse de `.bm-card`, o vive fuera de ella o no se sale. Aquí no hace falta que se salga: encajada en la esquina superior izquierda, con la esquina de abajo redondeada, se lee igual como la pestaña de un expediente. Y la tarjeta le reserva su sitio con el relleno de arriba. */ .bm-via { padding-top: 3rem; } .bm-via__pestana { position: absolute; left: 0; top: 0; padding: 0.42rem 0.9rem 0.38rem; background: color-mix(in srgb, var(--acento) 12%, transparent); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); border-right: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); border-radius: 0 0 var(--radio-md) 0; font-family: var(--fuente-titulo); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); transition: color var(--tr-media), background-color var(--tr-media); } .bm-via:hover .bm-via__pestana, .bm-via:focus-visible .bm-via__pestana { color: var(--acento); background: color-mix(in srgb, var(--acento) 20%, transparent); } .bm-via__dato { font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 500; margin-top: 0.2rem; } .bm-via__cuando { font-size: 0.86rem; color: var(--tinta-suave); margin-top: auto; padding-top: 0.8rem; } @media (prefers-reduced-motion: reduce) { .bm-via__pestana { transition: none; } } /* ── El acordeón horizontal de servicios ───────────────────── Los servicios como lomos en un estante: el señalado se abre y los demás se estrechan. Lo pidió Isaac el 3/sep, del catálogo (muestra 04). 🚨 EL PRIMERO NACE ABIERTO, y es la misma corrección que se le hizo al abanico el mismo día. Un acordeón con todos los paneles cerrados esconde TODAS las descripciones detrás de un gesto: quien no pase el cursor —o quien entre por el teléfono— ve tres lomos con un nombre vertical y nada más. Abriendo el primero, la sección se explica sola en reposo, los cerrados se leen como «hay más aquí», y el cursor sólo cambia cuál está abierto. 🚨 SE ANIMA `flex-grow`, QUE ES MAQUETA POR FOTOGRAMA. Es la excepción consciente a la regla de esta casa —sólo `transform` y `opacity` son gratis—, y se admite por dos razones: son tres o dos paneles, no veinte, y no hay ningún `backdrop-filter` en la sección con el que se pise. Si algún día esta sección lleva vidrio, esto hay que medirlo otra vez. El nombre del servicio NO se rota con `writing-mode` en el panel cerrado como en la muestra: «Aplicaciones a la medida» en vertical pide 260px de alto y descuadra la fila. Se queda horizontal y lo que se recorta es la descripción, con el título siempre legible. */ .bm-acordeon { display: flex; gap: 0.9rem; align-items: stretch; /* Altura común para la fila: sin esto, al abrirse un panel crece el alto de TODOS y la página de abajo da un salto. */ min-height: 208px; margin-top: clamp(1.25rem, 3vw, 2rem); } .bm-acordeon > .bm-serv { flex: 1 1 0; min-width: 0; overflow: hidden; /* Cerrado, el título se centra en vertical. Arriba del todo dejaba un hueco muerto debajo y el panel se leía como una caja a medio llenar; al centro se lee como la pestaña de un separador, que es lo que es. Abierto vuelve arriba, que es por donde se empieza a leer. */ justify-content: center; /* 300ms y sin rebote. El muelle (520ms, con overshoot) hacía que el panel pasara de largo y volviera: en algo que se abre al pasar el cursor eso se siente como que se atasca, no como que rebota. */ transition: flex-grow 300ms cubic-bezier(0.22, 0.8, 0.3, 1), border-top-color var(--tr-media), box-shadow var(--tr-lenta); } /* 🚨 EL DETALLE TIENE ANCHO FIJO, Y AHÍ ESTÁ LA FLUIDEZ. La primera versión animaba `grid-template-rows: 0fr → 1fr` ADEMÁS del ancho del panel: dos animaciones de maqueta a la vez y, peor, el párrafo RE-PARTIÉNDOSE en renglones distintos en cada fotograma mientras el panel se ensancha. Eso es lo que Isaac notó como «trabadas». Con un ancho fijo el texto se compone UNA vez y el panel lo va descubriendo —lo recorta `overflow: hidden`—, así que ya no hay reflujo por fotograma. Y el alto no se anima: la fila tiene altura común, así que no hay nada vertical que mover. Los 320px son el ancho del panel abierto menos su relleno: el texto llena la tarjeta abierta y no sobra hueco a la derecha. */ .bm-serv__detalle { width: 320px; opacity: 0; transition: opacity 160ms linear; } /* 🚨 NINGUNA NACE ABIERTA, y esto cambió el 3/sep. La primera versión abría la primera tarjeta con una clase `is-abierta` en el marcado, para que la sección se explicara sola en reposo. Isaac lo corrigió contra la maqueta del catálogo (muestra 04): ahí **todas están cerradas** y sólo se abre la que se señala. Se retiró la clase del marcado y sus reglas de aquí. Lo que sostiene la decisión es el táctil: sin cursor no hay reposo mudo, porque el `IntersectionObserver` abre la que cruza la banda central en cuanto se baja. El caso de «nadie descubre el gesto» sólo existiría en escritorio, donde el cursor pasa por encima al primer movimiento. */ @media (hover: hover) and (pointer: fine) { /* En cuanto el cursor entra en la fila, manda él y no el reposo: la primera se cierra si la señalada es otra. */ .bm-acordeon > .bm-serv:hover, .bm-acordeon:hover > .bm-serv:hover { flex-grow: 2.4; justify-content: flex-start; } .bm-acordeon > .bm-serv:hover .bm-serv__detalle, .bm-acordeon:hover > .bm-serv:hover .bm-serv__detalle { opacity: 1; } .bm-acordeon > .bm-serv:hover { border-top-color: var(--acento); box-shadow: 0 18px 40px rgba(18, 32, 31, 0.16), inset 0 1px 0 var(--vidrio-brillo); } } /* Con el teclado pasa lo mismo que con el cursor: la que recibe el foco se abre. Sin esto, quien tabula por los cinco servicios oye el enlace pero no ve nunca de qué va. */ .bm-acordeon > .bm-serv:focus-visible { flex-grow: 2.4; } .bm-acordeon > .bm-serv:focus-visible .bm-serv__detalle { opacity: 1; } [data-tema='oscuro'] .bm-acordeon > .bm-serv:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--vidrio-brillo); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-acordeon > .bm-serv:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--vidrio-brillo); } } /* El remate («Ver el servicio») sólo se enseña en la abierta: en un panel estrecho se parte en dos renglones y se lee como un error. */ .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 0; transition: opacity var(--tr-media); } .bm-acordeon > .bm-serv:hover .bm-serv__mas, .bm-acordeon > .bm-serv:focus-visible .bm-serv__mas { opacity: 1; } @media (hover: hover) and (pointer: fine) { } /* Por debajo de 900px con cursor —una ventana estrecha en un portátil— tres paneles dejan 190px cada uno y el título se parte en cuatro renglones: ahí se apilan. El caso TÁCTIL ya no cae aquí: tiene su propio acordeón vertical más abajo, sincronizado con el scroll. */ @media (max-width: 900px) and (hover: hover) { .bm-acordeon { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .bm-acordeon > .bm-serv { flex: none; overflow: visible; justify-content: flex-start; } .bm-acordeon > .bm-serv .bm-serv__detalle { width: auto; opacity: 1; } .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 1; } } @media (max-width: 620px) { .bm-acordeon { grid-template-columns: 1fr; } } /* Con movimiento reducido no se anima el ancho —es lo que más marea de todo el sitio— y se abren todos: mejor una rejilla quieta y completa que un acordeón que salta. */ @media (prefers-reduced-motion: reduce) { .bm-acordeon { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .bm-acordeon > .bm-serv { flex: none; overflow: visible; justify-content: flex-start; } .bm-acordeon > .bm-serv .bm-serv__detalle { width: auto; opacity: 1; transition: none; } .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 1; } } /* ── SIN CURSOR, EL SCROLL ACTIVA (3/sep/2026) ────────────── «Recuerda que las animaciones en el modo móvil deben ir sincronizadas con el scroll, porque ahí carecemos de cursor.» — Isaac. Es la regla de la casa desde las mascotas, y ahora se aplica a los dos gestos nuevos. La clase `is-saltando` la pone el `IntersectionObserver` de `bloques.js` en lo que cruza la banda central de la pantalla —el 10 % de en medio, por `rootMargin: -45%`—, y aquí se le da significado. 🚨 TODO ESTO VA DENTRO DE `@media (hover: none)`, Y NO ES UN DETALLE. El JS pone la clase en TODOS los aparatos —a propósito: así se puede comprobar leyendo el DOM y en un híbrido no hay pelea—. Si estas reglas salieran de la consulta, en escritorio las tarjetas se encenderían solas al rodar la página, sin que el cursor tocara nada. Eso ya pasó una vez con las mascotas y lo vio Isaac en cuanto entró. Y una diferencia con el cursor que es deliberada: en táctil se activa UNA tarjeta, la centrada. Con cursor puede no haber ninguna. Por eso el reposo tiene que seguir siendo legible por sí solo — ninguno de estos efectos esconde contenido, sólo lo destaca. */ @media (hover: none) { /* Casos: el logotipo se recoge y la tarjeta se enciende de su color. Es exactamente lo del cursor, con el mismo cálculo y la misma duración. */ .bm-caso.is-saltando > .bm-caso__logo { background-position: var(--logo-sitio-activo); background-size: var(--logo-tam-activo); -webkit-mask-position: var(--logo-sitio-activo); mask-position: var(--logo-sitio-activo); -webkit-mask-size: var(--logo-tam-activo); mask-size: var(--logo-tam-activo); opacity: 1; } .bm-card.bm-caso.is-saltando { border-color: color-mix(in srgb, var(--marca) 45%, transparent); border-top-color: var(--marca); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 40%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--marca) 46%, transparent), 0 0 26px -4px color-mix(in srgb, var(--marca) 30%, transparent), inset 0 0 54px -12px color-mix(in srgb, var(--marca) 34%, transparent), inset 0 30px 46px -34px color-mix(in srgb, var(--marca) 52%, transparent), inset 0 1px 0 var(--vidrio-brillo); } /* En papel, el neón recortado igual que con cursor. */ :root:not([data-tema='oscuro']) .bm-card.bm-caso.is-saltando { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 34%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--marca) 34%, transparent), inset 0 0 46px -14px color-mix(in srgb, var(--marca) 20%, transparent), inset 0 26px 40px -34px color-mix(in srgb, var(--marca) 26%, transparent), inset 0 1px 0 var(--vidrio-brillo); } } @media (hover: none) and (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-card.bm-caso.is-saltando { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 40%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--marca) 46%, transparent), 0 0 26px -4px color-mix(in srgb, var(--marca) 30%, transparent), inset 0 0 46px -14px color-mix(in srgb, var(--marca) 20%, transparent), inset 0 26px 40px -34px color-mix(in srgb, var(--marca) 26%, transparent), inset 0 1px 0 var(--vidrio-brillo); } } /* Con movimiento reducido, la tarjeta se enciende pero el logotipo no viaja: lo que molesta de esto es el desplazamiento, no el color. */ @media (hover: none) and (prefers-reduced-motion: reduce) { .bm-acordeon { height: auto; } .bm-acordeon > .bm-serv, .bm-acordeon > .bm-serv.is-saltando { flex: none; opacity: 1; overflow: visible; } .bm-acordeon > .bm-serv .bm-serv__detalle, .bm-acordeon > .bm-serv.is-saltando .bm-serv__detalle { opacity: 1; transition: none; } .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 1; } } /* ── El acordeón, en vertical y con el scroll (3/sep/2026) ── «En móvil mantén el mismo diseño, sólo que en vertical, y sincronizado con el scroll.» — Isaac. Sustituye a la rejilla que había aquí antes. Aquella abría las cinco tarjetas de golpe: se entendía, pero era OTRO diseño, y el sitio dejaba de comportarse igual en los dos aparatos. Ahora es el mismo acordeón: uno abierto y los demás recogidos, sólo que apilados y con el scroll haciendo de cursor. 🚨 SE ABRE LA QUE CRUZA LA BANDA CENTRAL, y la clase la pone el mismo `IntersectionObserver` de las mascotas y los casos (`is-saltando`). Un observador por sección serían tres motores para el mismo trabajo. 🚨 Y AQUÍ SÍ SE ANIMA EL ALTO, que en escritorio evité a propósito. Es defendible porque el disparo es OTRO: con el cursor, el alto se recalcula en cada fotograma mientras el puntero recorre la fila —eso era lo que se sentía trabado—; con el scroll ocurre UNA vez por tarjeta y al ritmo de la lectura. `max-height` en vez de `height` porque el contenido no mide lo mismo en las cinco, y 26rem es holgura de sobra para la más larga. ⚠ LAS TARJETAS RECOGIDAS SE ATENÚAN, NO SE DESENFOCAN. Isaac pidió «el mismo desenfoque», pero cada tarjeta de servicio es un enlace entero, y una tarjeta borrosa se lee como DESHABILITADA: es la regla del principio de esta sección y es la misma razón por la que el desenfoque no está en casos. Se atenúan a .72, que marca cuál manda sin apagar las otras. */ @media (hover: none) { /* 🚨 LA FILA TIENE ALTO FIJO Y LAS TARJETAS SE LO REPARTEN. Es el acordeón horizontal girado 90°, y es lo que resuelve la contradicción de las dos versiones anteriores: v1 crecía al abrirse → empujaba el contenido mientras se rodaba; «se buguea y no se ve nada» v2 alto fijo por tarjeta → no se movía nada; «no cambian su tamaño, como que se traban» Repartiendo un alto CONSTANTE, la que se activa se lleva el sitio de las otras: el cambio de tamaño se ve —que es lo que faltaba— y el total de la fila no varía ni un píxel, así que nada de lo que hay debajo se mueve —que es lo que había que conservar—. El reparto: 4 partes para la abierta y 1 para cada cerrada. Sobre 440px menos los huecos, eso deja ~285 a la activa —título, ilustración, texto y remate— y ~71 a cada cerrada, que es su título con su aire. Los números salen de medir el contenido, no de tantear. Se anima `flex-grow`, que es maqueta; aquí se admite por lo mismo que en escritorio: son tres elementos por fila y ocurre UNA vez por tarjeta al pasar el scroll, no en cada fotograma. */ .bm-acordeon { display: flex; flex-direction: column; gap: 0.6rem; /* 500 y no 440: con 440 el reparto dejaba 280 a la abierta y el texto se cortaba a media frase —se vio en la captura—. La cuenta buena: relleno 28 + título 24 + ilustración 96 con su aire 18 + tres renglones 72 + remate 24 = 262, y hay que darle holgura porque el texto no mide lo mismo en las seis. Con 500 y un reparto de 5:1:1 quedan 343 a la abierta y 68 a cada cerrada. */ height: 500px; min-height: 0; } .bm-acordeon > .bm-serv { flex: 1 1 0; min-height: 0; overflow: hidden; justify-content: flex-start; /* Menos relleno vertical que en escritorio: la tarjeta cerrada mide dos dedos y 22px arriba y abajo se comen el título. */ padding-block: 0.9rem; opacity: 0.72; transition: flex-grow 320ms cubic-bezier(0.22, 0.8, 0.3, 1), opacity var(--tr-lenta), border-top-color var(--tr-media); } /* Cerrada sólo cabe el nombre, así que va a su tamaño de siempre: el titular grande de escritorio necesita una tarjeta alta, y aquí la tarjeta cerrada mide dos dedos. */ .bm-acordeon > .bm-serv .bm-h3 { font-size: clamp(1.05rem, 4.4vw, 1.25rem); line-height: 1.25; } .bm-acordeon > .bm-serv .bm-serv__detalle { width: auto; opacity: 0; transition: opacity var(--tr-media); } .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 0; } /* La que cruza la banda se lleva el sitio. */ .bm-acordeon > .bm-serv.is-saltando { flex-grow: 5; opacity: 1; border-top-color: var(--acento); } .bm-acordeon > .bm-serv.is-saltando .bm-serv__detalle { opacity: 1; } .bm-acordeon > .bm-serv.is-saltando .bm-serv__mas { opacity: 1; } } /* Con movimiento reducido, todas abiertas y quietas: una lista completa se lee mejor que un acordeón que salta solo mientras bajas. */ @media (hover: none) and (prefers-reduced-motion: reduce) { .bm-acordeon > .bm-serv { opacity: 1; } .bm-acordeon > .bm-serv .bm-serv__detalle { max-height: none; opacity: 1; transition: none; } .bm-acordeon > .bm-serv .bm-serv__mas { opacity: 1; } } /* ── El titular del hero: anti-imán fuera, ola de brincos dentro ── «En móvil, como no tenemos cursor, la animación anti-imán no se puede apreciar.» — Isaac, 3/sep/2026. Y tiene razón: el efecto existe, el JS lo monta, y en un teléfono no ocurre NUNCA porque su disparador es el puntero. Así que en táctil el titular hace otra cosa: las letras brincan una tras otra, como una ola, y vuelven a hacerlo cada pocos segundos. 🚨 EL REPARTO LO DECIDE EL CSS, NO EL JS. `repeler()` parte el titular en letras SIEMPRE —el `return` por puntero grueso va después del troceado— y escribe en cada una su índice `--i`. Aquí sólo se le da uso. Es la misma idea que con `is-saltando`: un solo motor, y la hoja de estilos decide qué aparato ve qué. CÓMO SALE EL COMPÁS: el ciclo entero dura 5.5s y el brinco ocupa el primer 8 % (≈440ms). Cada letra sale 45ms después de la anterior, así que en un titular de ~30 letras la ola tarda ~1.35s en recorrerlo. Lo que queda hasta cerrar el ciclo —unos 3.7s— es la pausa que pidió Isaac. Con `animation-delay` todas comparten el mismo periodo: el retardo sólo cambia la FASE, así que la ola se repite entera cada 5.5s sin desincronizarse nunca. Se anima `transform`, que es gratis, y `.bm-huye__letra` ya trae `display: inline-block` y `will-change: transform` de la versión de cursor. */ @media (hover: none) { .bm-huye__letra { animation: bm-brinco-letra 5.5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; animation-delay: calc(var(--i, 0) * 45ms); } } @keyframes bm-brinco-letra { 0% { transform: translateY(0); } 3% { transform: translateY(-0.24em); } 6% { transform: translateY(0.05em); } 8%, 100% { transform: translateY(0); } } /* Quien pide menos movimiento no quiere un titular saltando en bucle. */ @media (hover: none) and (prefers-reduced-motion: reduce) { .bm-huye__letra { animation: none; } } /* ── Los iconos del pie, brincando mientras se señalan ─────── Lo pidió Isaac: «que salten repetidamente, no tan rápido, mientras estén activados». De ahí los 900ms —un brinco por segundo largo, que se lee como un latido y no como un parpadeo— y de ahí que la animación viva en el `:hover`/`:focus-visible` del ENLACE y no en el icono suelto: el objetivo del cursor es la fila entera, así que el icono tiene que responder desde que se entra en ella, no sólo cuando se acierta al SVG de 18px. ⚠ No se anima en reposo. Un pie con cuatro iconos brincando solos compite con el contenido y no significa nada. */ .bm-pie__enlace:hover .bm-pie__ico, .bm-pie__enlace:focus-visible .bm-pie__ico { animation: bm-brinco-ico 900ms cubic-bezier(0.3, 0.7, 0.4, 1) infinite; } @keyframes bm-brinco-ico { 0%, 55%, 100% { transform: translateY(0); } 22% { transform: translateY(-3px); } 38% { transform: translateY(1px); } } @media (prefers-reduced-motion: reduce) { .bm-pie__enlace:hover .bm-pie__ico, .bm-pie__enlace:focus-visible .bm-pie__ico { animation: none; } } /* ── La imagen del servicio (3/sep/2026) ──────────────────── Una por tarjeta, y sólo se ve con el panel abierto. Son ilustraciones 3D generadas para esto, con el mismo acabado que las mascotas: cuerpo grafito, contraluz turquesa y un punto de coral. 🚨 PNG CON ALFA, Y ES REQUISITO, NO PREFERENCIA. El sitio tiene dos temas —papel blanco y casi negro—: cualquier imagen con fondo incrustado se ve como un parche recortado en uno de los dos. Por eso el prompt lo pedía transparente y por eso no llevan sombra proyectada: la sombra necesita suelo, y aquí no hay. Pesan 65 KB cada una, no 1.1 MB: vienen de 1254px y se recortaron al contenido, se cuadraron con un 8 % de aire —para que las cinco tengan el mismo margen óptico— y se bajaron a 400px, que es el doble de los ~200 a los que se pintan. Cinco a tamaño original habrían sido 5.5 MB en la portada. 🚨 VA DENTRO DE `.bm-serv__detalle`, no suelta en la tarjeta. Así hereda el mismo desvanecido y el mismo ancho fijo que el texto, que es lo que evita que el panel recomponga su contenido en cada fotograma mientras se abre. Una imagen fuera de ahí volvería a traer el tirón que ya se corrigió. */ /* 🚨 EL ANCHO SUBE A 490 PORQUE AHORA HAY DOS COSAS DENTRO. El detalle tenía 320px —el ancho del texto— y al meter la ilustración de 152 más el hueco de 18, al texto le quedaban 150: el párrafo se componía en una columna de tres palabras. La cuenta es 320 + 18 + 152 = 490, y el cuerpo conserva sus 320 FIJOS. Que los dos anchos sean fijos no es rigidez: es lo que hace que el texto se componga UNA vez y el panel lo descubra al abrirse, en vez de re-partirlo en cada fotograma. Es la misma razón por la que el detalle tenía ancho fijo desde el principio. */ .bm-serv__detalle { display: flex; align-items: center; gap: 1.1rem; width: 490px; } /* El texto y el remate en una columna; la ilustración a su DERECHA. Va con `order` y no cambiando el marcado ni con `row-reverse`: en el HTML la imagen sigue yendo primera —que es donde la dejó el guion que las metó— y `row-reverse` habría invertido también el punto de partida del reparto de espacio. `order` mueve una pieza y no toca nada más. */ .bm-serv__cuerpo { flex: 0 0 auto; width: 320px; } .bm-serv__imagen { order: 2; flex: 0 0 auto; width: 152px; height: 152px; object-fit: contain; /* Que no la estire la caja flexible ni se coma el texto en una ventana estrecha: por debajo de cierto ancho desaparece, y el texto manda. */ align-self: center; } /* En un panel abierto de menos de 520px la imagen y el texto se pelean por el sitio y ganan los dos a medias. Se va la imagen: el texto es lo que hay que leer. Es la misma decisión que en el abanico. */ @media (max-width: 1100px) and (hover: hover) { .bm-serv__imagen { display: none; } .bm-serv__detalle { width: 320px; } } /* ── En táctil, encima del texto ───────────────────────────── El acordeón es vertical, así que la tarjeta abierta es ancha y baja: la imagen al lado dejaría el texto en una columna de tres palabras. Va arriba, centrada, y más chica — en un teléfono compite con el titular. */ @media (hover: none) { .bm-serv__detalle { display: block; width: auto; } .bm-serv__cuerpo { width: auto; } .bm-serv__imagen { display: block; width: 96px; height: 96px; margin: 0.15rem auto 0.7rem; } } @media (prefers-reduced-motion: reduce) { .bm-serv__imagen { transition: none; } } /* ── La Bimm App: la tarjeta se inclina hacia el cursor ────── Muestra 08 del catálogo, traída aquí tal cual: el puntero escribe dos variables normalizadas (−1 a 1) y el CSS las convierte en un giro de ±7°. Por qué AQUÍ y no en otra sección: es la única rejilla del sitio cuyas tarjetas no son enlaces ni llevan nada que pulsar —son tres afirmaciones sobre lo que la App enseña—. Una tarjeta que se inclina invita a mirarla, y aquí mirarla es todo lo que hay que hacer. En casos o servicios, donde se pulsa, un plano que se mueve bajo el cursor estorba a la puntería. 🚨 EL ALZADO DEL `:hover` VIAJA EN UNA VARIABLE, no en su propio `transform`. `.bm-card:hover` ya declara `transform: translateY(-3px)`, y dos reglas no pueden escribir la misma propiedad: la última gana y la otra desaparece —o el giro o el alzado, nunca los dos—. Metiendo el alzado en `--alza`, el `transform` se escribe UNA sola vez y lleva las dos cosas. ⚠ NO HAY PARALAJE DE CAPAS, y no es olvido: `translateZ` sobre el titular no haría nada porque `.bm-card` lleva `overflow: hidden` —lo necesita para recortar el foco del cursor— y eso obliga al navegador a aplanar el 3D del contenido. La tarjeta gira entera, que es el efecto que se ve. ⚠ Y sin puntero fino no existe: en táctil no hay nada que seguir, y ahí la sección ya se activa con el scroll. */ .bm-app { perspective: 900px; } @media (hover: hover) and (pointer: fine) { .bm-app > .bm-card { transform: translateY(var(--alza, 0px)) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 7deg)); transition: transform var(--tr-media), border-top-color var(--tr-media), box-shadow var(--tr-media); } .bm-app > .bm-card:hover { --alza: -3px; } } @media (prefers-reduced-motion: reduce) { .bm-app > .bm-card { transform: none; } } /* ── El título llena la tarjeta cerrada (3/sep/2026) ──────── «Cuando están desactivadas y sólo sale el nombre del servicio, haz el título más grande, ocupando en su totalidad el tamaño de la card desactivada; y cuando se active que se encoja a un espacio normal.» — Isaac. 🚨 Y DE PASO ARREGLA EL HUECO QUE REPORTÓ. El síntoma era «en Sitios web y Branding, al activarse se agrega un espacio blanco debajo». Medido en el DOM: las seis tarjetas miden 272px SIEMPRE, abiertas o cerradas, porque la ilustración ocupa sus 152px de alto aunque esté en `opacity: 0`. O sea que la tarjeta cerrada reservaba el sitio de una imagen que no se ve, y ese era el hueco. Un título que llena la caja lo ocupa. 🚨 LA FILA LLEVA `height` FIJA, NO `min-height`. Con el mínimo, la fila crecía hasta la tarjeta más alta y ese cálculo cambiaba según qué panel estuviera abierto: de ahí el «se ve trabado». Fijada en los 272 que ya miden, abrir una tarjeta no mueve un píxel de la página. ⚠ Se anima `font-size`, que es maqueta. Es una excepción consciente y acotada: son seis elementos, un solo texto corto cada uno, y ocurre UNA vez por señalamiento —no en cada fotograma mientras el cursor recorre la fila, que es lo que sí se sentía mal—. 180ms, más corto que el ancho, para que el título ya esté en su sitio cuando el panel termina de abrirse. */ @media (hover: hover) and (pointer: fine) { .bm-acordeon { height: 272px; min-height: 0; } /* 🚨 CERRADA, EL PANEL NO OCUPA SITIO. Con sólo `opacity: 0` seguía reservando sus 152px —el alto de la ilustración—, y por eso la tarjeta cerrada tenía un hueco muerto debajo del título por más que se agrandara el título. En `height: 0` la caja entera queda para el nombre. El alto NO se anima —de 0 a `auto` no hay interpolación—, y no hace falta: la fila tiene alto FIJO, así que el salto no mueve la página, y lo que se ve entrar es el desvanecido del contenido. */ .bm-acordeon > .bm-serv .bm-serv__detalle { height: 0; overflow: hidden; } .bm-acordeon > .bm-serv:hover .bm-serv__detalle, .bm-acordeon > .bm-serv:focus-visible .bm-serv__detalle { height: auto; overflow: visible; } .bm-acordeon > .bm-serv .bm-h3 { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.04; letter-spacing: -0.025em; transition: font-size 180ms cubic-bezier(0.22, 0.8, 0.3, 1); } /* Abierta: el titular vuelve al cuerpo normal de la casa y le deja el sitio al texto y a la ilustración. */ .bm-acordeon > .bm-serv:hover .bm-h3, .bm-acordeon > .bm-serv:focus-visible .bm-h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.25; } } /* En táctil el título se queda en su tamaño normal: ahí la tarjeta cerrada es ancha y baja —una fila del acordeón vertical—, no una columna alta que llenar. Un titular de 2rem en un teléfono se comería la pantalla. */ /* ── EL HERO DE LAS PÁGINAS INTERNAS, v2 ────────────────────── Isaac, 3/sep/2026: «los hero se ven muy muy simples y lo hace ver barato; igual calidad de diseño que en inicio». Y era literal: `.bm-cabecera2` eran un padding, un `h1` y una entradilla. Nada más. Comparado con la portada —titular que huye, mascota, botones, garantías— parecía otra web. 🚨 PERO NO SE COPIA EL DE LA PORTADA, Y ESO ES EL DISEÑO. Es la convención de Petroleum: la portada tiene SU hero y las páginas de dentro tienen OTRO. No es capricho de estilo — es orientación. En la portada nadie se pregunta dónde está; en una página de dentro es la primera pregunta, y un hero idéntico al de la portada la deja sin responder. Cuatro piezas, y ninguna es adorno: · LA MIGAJA dice dónde estás y de dónde cuelga esta página. Es lo único que distingue de verdad una hija de una madre. · EL FILETE DE MARCA —los cuatro colores— crece de izquierda a derecha al entrar. Es la firma de la casa, la misma del borde superior del sitio, y es lo que dice «esto sigue siendo Bimm» sin repetir el logotipo. · LA FICHA son tres datos DE ESTA PÁGINA: cuántos niveles, cuántos pasos, cuántas pólizas. Ocupa el sitio de las garantías de la portada y hace lo mismo que ellas —dar de qué agarrarse antes de leer— pero con datos propios en vez de promesas repetidas. · LA ILUSTRACIÓN sube al hero. Estaba enterrada en la primera sección, donde nadie la veía hasta después de rodar. Aquí es lo que le da peso al bloque, y flota despacio para que el hero no sea una imagen quieta. Sin ilustración el hero sigue en pie: la segunda columna es `auto`, así que sin imagen mide cero y el texto se queda con todo el ancho. Las páginas legales no llevan monigote y no tienen por qué. */ .bm-cabecera2 { position: relative; padding-top: clamp(7rem, 12vw, 9.5rem); padding-bottom: clamp(2rem, 5vw, 3.25rem); } .bm-cabecera2__caja { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); } /* min-width: 0 y no es de adorno: un hijo de reticula se niega a bajar de su ancho minimo de contenido, asi que un titular largo empujaba la columna de la ilustracion fuera de la caja en vez de partirse. */ .bm-cabecera2__texto { min-width: 0; } /* ── La migaja ── */ .bm-migaja { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin-bottom: 1.1rem; font-family: var(--fuente-titulo); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; } .bm-migaja a { color: var(--tinta-suave); transition: color var(--tr-rapida); } .bm-migaja a:hover { color: var(--acento); } /* El separador va en el pseudoelemento y no en el marcado: una barra suelta entre dos enlaces la lee un lector de pantalla como si fuera contenido. */ .bm-migaja a::after { content: '/'; margin-left: 0.55rem; color: var(--linea-fuerte); } .bm-migaja [aria-current] { color: var(--tinta); } /* ── El filete de marca ── */ .bm-cabecera2__filete { display: block; position: relative; width: 64px; height: 3px; border-radius: 2px; overflow: hidden; margin-bottom: 1.1rem; } .bm-cabecera2__filete::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #FBEFB7, #FF3D3E 34%, #52F5DC 68%, #07ABAA); transform: scaleX(0); transform-origin: left; transition: transform 760ms cubic-bezier(0.32, 0.72, 0, 1) 120ms; } /* Crece cuando la pieza se revela. `.bm-up` mueve el ELEMENTO y esto escala el PSEUDOELEMENTO: dos transformaciones que no se pisan. */ .js-on .bm-cabecera2__filete.is-visible::after { transform: scaleX(1); } html:not(.js-on) .bm-cabecera2__filete::after { transform: scaleX(1); } .bm-cabecera2 .bm-h1 { font-size: clamp(2.6rem, 6.6vw, 4.6rem); line-height: 1.01; letter-spacing: -0.038em; max-width: 16ch; margin: 0.5rem 0 0; } .bm-cabecera2 .bm-lead { margin-top: 1.15rem; max-width: 54ch; } /* ── La ficha de datos ── */ .bm-ficha { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 clamp(1.25rem, 3vw, 2.25rem); margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; list-style: none; } .bm-ficha__dato { min-width: 9rem; display: flex; flex-direction: column; gap: 0.15rem; padding-left: clamp(1.25rem, 3vw, 2.25rem); border-left: 1px solid var(--linea); } /* El primero no lleva raya: una raya antes del primer dato no separa nada. */ .bm-ficha__dato:first-child { padding-left: 0; border-left: 0; } .bm-ficha__n { font-family: var(--fuente-titulo); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--acento); font-variant-numeric: tabular-nums; } /* 20ch y no 16: a 16 las glosas se partian en columnas de tres palabras y la ficha se leia como una tabla rota. El min-width del dato es lo que impide que una glosa corta encoja su columna por debajo de lo que mide el numero. */ .bm-ficha__q { font-size: 0.82rem; line-height: 1.35; color: var(--tinta-suave); max-width: 20ch; } /* ── La ilustración ── */ .bm-cabecera2__ilus { width: clamp(150px, 22vw, 280px); height: auto; justify-self: end; animation: bm-flota 6.5s ease-in-out infinite; } /* Flota despacio y poco: 10px en seis segundos y medio. Es respiración, no movimiento — a más recorrido o más prisa se convierte en un banner y compite con el titular, que es lo que aquí tiene que mandar. */ @keyframes bm-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* En un teléfono la ilustración pasa arriba y a tamaño de icono: al lado dejaría el titular en una columna de tres palabras. Mismo criterio que las franjas, y por el mismo motivo. */ @media (max-width: 820px) { .bm-cabecera2__caja { grid-template-columns: 1fr; } .bm-cabecera2__ilus { order: -1; justify-self: start; width: clamp(110px, 30vw, 150px); } .bm-cabecera2 .bm-h1 { max-width: none; } } @media (prefers-reduced-motion: reduce) { .bm-cabecera2__ilus { animation: none; } .bm-cabecera2__filete::after { transform: scaleX(1); transition: none; } } /* ============================================================ EL FORMULARIO DE CONTACTO ============================================================ Segunda versión, 3/sep. La primera funcionaba y no se entendía: los campos flotaban sueltos sobre el fondo, sin nada que dijera «esto es una sola pieza». En un sitio donde todo lo demás es tarjeta, un formulario sin cuerpo se lee como una maqueta a medio terminar. Isaac: «casi no se entiende». Tres decisiones lo arreglan, y las tres encadenan con algo que ya existe: 1. **El formulario ES la tarjeta.** `.bm-form__pliego` —la pieza que ya se doblaba para salir volando— pasa a ser una tarjeta de la casa: vidrio, filete de cuatro paradas arriba y su relleno. Así lo que se convierte en avión es un objeto, no un montón de campos sueltos. 2. **Una escalera de pasos que se enciende.** Cada paso lleva su número en un disco a la izquierda, unidos por un raíl. El disco se ilumina y el tramo se rellena cuando ese paso está resuelto. No es adorno: es la única respuesta a «¿cuánto me falta?», que es lo que un formulario largo tiene que contestar sin que se lo pregunten. 3. **La rama elegida gana y la otra se retira.** Es el mismo lenguaje del resto del sitio —restar atención en vez de sumarla—: al elegir camino, el que no se eligió se atenúa y encoge un punto. ============================================================ */ .bm-form { position: relative; margin-top: clamp(1rem, 3vw, 1.75rem); max-width: 900px; } /* ── El cuerpo: la tarjeta que después se dobla ────────────── */ .bm-form__pliego { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-vidrio); background: color-mix(in srgb, var(--papel) 88%, transparent); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); transition: transform 420ms cubic-bezier(0.55, 0, 0.85, 0.35), opacity 320ms linear; } [data-tema='oscuro'] .bm-form__pliego { background: color-mix(in srgb, #172120 88%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-form__pliego { background: color-mix(in srgb, #172120 88%, transparent); } } /* El filete de la casa corona la tarjeta. Aquí va entero y fijo —no se dibuja al pasar el cursor como en las tarjetas de la portada—: esto no es algo que se señale, es donde se está trabajando. */ .bm-form__pliego::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-marca); } /* ── La escalera ──────────────────────────────────────────── El raíl es el borde izquierdo del paso, y el disco lo pisa. Con `::before` en el paso y el número dentro del disco, no hace falta ni un elemento más en el marcado. */ .bm-form__paso { position: relative; padding-left: clamp(2.6rem, 5vw, 3.4rem); padding-bottom: clamp(1.75rem, 4vw, 2.5rem); } /* El tramo de raíl que baja hacia el paso siguiente. El último no lo lleva. */ .bm-form__paso::before { content: ''; position: absolute; left: clamp(0.85rem, 1.8vw, 1.15rem); top: 2.2rem; bottom: 0; width: 2px; background: var(--linea); transition: background-color var(--tr-lenta); } .bm-form__paso:last-of-type { padding-bottom: 0; } .bm-form__paso:last-of-type::before { display: none; } /* Resuelto: el tramo se tiñe del acento. Es el «vas por aquí». */ .bm-form__paso.is-hecho::before { background: var(--acento); } .bm-form__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: clamp(1.9rem, 3.6vw, 2.3rem); height: clamp(1.9rem, 3.6vw, 2.3rem); margin: 0; border: 2px solid var(--linea-fuerte); border-radius: 50%; background: var(--papel-hondo); font-family: var(--fuente-titulo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--tinta-suave); transition: border-color var(--tr-media), color var(--tr-media), background-color var(--tr-media), transform var(--muelle); } .bm-form__paso.is-hecho .bm-form__num { border-color: var(--acento); background: var(--acento); color: var(--papel); transform: scale(1.06); } .bm-form__pregunta i { font-style: normal; font-size: 0.78em; font-weight: 400; letter-spacing: 0; color: var(--tinta-suave); } .bm-form__pregunta { font-family: var(--fuente-titulo); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 0.15rem 0 1.1rem; } /* ── La bifurcación ───────────────────────────────────────── Dos caminos, no una lista de siete: siete servicios en fila obligan a leerlos todos para descartar cinco. */ .bm-form__ramas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2vw, 1.1rem); } @media (max-width: 700px) { .bm-form__ramas { grid-template-columns: 1fr; } } .bm-form__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .bm-form__rama { position: relative; display: block; height: 100%; cursor: pointer; padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--linea); border-radius: var(--radio-vidrio); background: var(--papel-hondo); overflow: hidden; transition: border-color var(--tr-media), transform var(--muelle), box-shadow var(--tr-lenta), opacity var(--tr-lenta); } .bm-form__rama .bm-form__icono { display: block; width: 30px; height: 30px; margin-bottom: 0.8rem; color: var(--linea-fuerte); transition: color var(--tr-media), transform var(--muelle); } .bm-form__rama .bm-form__icono svg { width: 100%; height: 100%; display: block; fill: currentColor; } .bm-form__rama b { display: block; font-family: var(--fuente-titulo); font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.3rem; } .bm-form__rama span { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--tinta-suave); } @media (hover: hover) { .bm-form__rama:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); } .bm-form__rama:hover .bm-form__icono { color: var(--acento); } } /* La elegida gana: filete de marca arriba, canto encendido y el color de la casa entrando por los bordes. Es el mismo difuminado que las tarjetas del portafolio, con el acento en vez del color de cliente. */ .bm-form__radio:checked + .bm-form__rama { border-color: color-mix(in srgb, var(--acento) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent), 0 12px 34px -16px color-mix(in srgb, var(--acento) 50%, transparent), inset 0 0 44px -14px color-mix(in srgb, var(--acento) 28%, transparent); } .bm-form__radio:checked + .bm-form__rama .bm-form__icono { color: var(--acento); transform: scale(1.08); } .bm-form__radio:checked + .bm-form__rama::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-marca); } /* 🚨 Y LA QUE NO SE ELIGIÓ SE RETIRA. Es el lenguaje del resto del sitio —restar atención en vez de sumarla— y aquí además informa: deja claro cuál quedó marcada de un vistazo, sin tener que comparar los dos cantos. */ .bm-form__ramas:has(.bm-form__radio:checked) .bm-form__radio:not(:checked) + .bm-form__rama { opacity: 0.5; transform: scale(0.985); } .bm-form__radio:focus-visible + .bm-form__rama { outline: 2px solid var(--acento); outline-offset: 3px; } /* ── Los servicios de la rama elegida ─────────────────────── 🚨 EL PASO 02 NO EXISTE HASTA QUE HAY CAMINO ELEGIDO. Con el paso siempre visible quedaba un hueco vacío entre «¿Cuál de todos?» y el 03, y un hueco así no se lee como «falta elegir arriba»: se lee como algo que no cargó. */ .bm-form__paso--servicios { display: none; } .bm-form:has(input[name="bm-rama"]:checked) .bm-form__paso--servicios { display: block; } .bm-form__servicios { display: none; flex-wrap: wrap; gap: 0.55rem; } .bm-form__servicios.is-visible { display: flex; } /* Las opciones entran escalonadas al aparecer su rama: es lo que convierte un bloque que «sale de golpe» en algo que se despliega. 40ms entre una y otra —lo justo para que se lea como una tirada y no como una lista lenta. */ .bm-form__servicios.is-visible > * { animation: bm-chip-entra 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both; } .bm-form__servicios.is-visible > *:nth-child(2) { animation-delay: 40ms; } .bm-form__servicios.is-visible > *:nth-child(3) { animation-delay: 80ms; } .bm-form__servicios.is-visible > *:nth-child(4) { animation-delay: 120ms; } @keyframes bm-chip-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* El chip es la casilla del documento: recta, de 3px, con su marca al elegirla. No es una píldora — una píldora es de aplicación, no de papel. */ .bm-form__chip { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.72rem 1.1rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); background: var(--papel-hondo); font-family: var(--fuente-titulo); font-size: 0.93rem; transition: border-color var(--tr-rapida), color var(--tr-rapida), background-color var(--tr-rapida), transform var(--tr-rapida); } /* La casilla, dibujada con el propio pseudo-elemento: un cuadrito que se rellena. Sin marcado extra y sin una imagen más. */ .bm-form__chip::before { content: ''; width: 14px; height: 14px; flex: none; border: 1.5px solid var(--linea-fuerte); border-radius: 2px; transition: border-color var(--tr-rapida), background-color var(--tr-rapida), box-shadow var(--tr-rapida); } @media (hover: hover) { .bm-form__chip:hover { border-color: var(--acento); transform: translateY(-1px); } .bm-form__chip:hover::before { border-color: var(--acento); } } .bm-form__radio:checked + .bm-form__chip { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); } .bm-form__radio:checked + .bm-form__chip::before { border-color: var(--acento); background: var(--acento); box-shadow: inset 0 0 0 2px var(--papel-hondo); } .bm-form__radio:focus-visible + .bm-form__chip { outline: 2px solid var(--acento); outline-offset: 3px; } /* ── Los campos ─────────────────────────────────────────────── */ .bm-form__campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 2vw, 1.2rem); } @media (max-width: 700px) { .bm-form__campos { grid-template-columns: 1fr; } } .bm-campo { display: flex; flex-direction: column; gap: 0.35rem; } .bm-campo--ancho { grid-column: 1 / -1; } .bm-campo--sitio { display: none; } .bm-campo--sitio.is-visible { display: flex; animation: bm-chip-entra 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both; } .bm-campo label { font-family: var(--fuente-titulo); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); } .bm-campo label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; } /* 🚨 EL CAMPO SE LEE POR SU LÍNEA DE ABAJO, no por una caja. Es el renglón del documento: el mismo gesto de una hoja donde se escribe encima de la raya, y además resuelve un problema real de la primera versión —una caja con borde fino sobre fondo oscuro casi no se veía, y los campos parecían huecos—. */ .bm-campo input, .bm-campo textarea { width: 100%; padding: 0.75rem 0.2rem; font-family: var(--fuente-texto); font-size: 1.02rem; color: var(--tinta); background: transparent; border: 0; border-bottom: 1.5px solid var(--linea-fuerte); border-radius: 0; transition: border-color var(--tr-rapida), box-shadow var(--tr-rapida); } .bm-campo textarea { min-height: 108px; resize: vertical; padding: 0.75rem 0.9rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-sm); } .bm-campo input::placeholder, .bm-campo textarea::placeholder { color: var(--tinta-suave); opacity: 0.55; } .bm-campo input:focus, .bm-campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 2px 0 -1px var(--acento); } .bm-campo textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent); } /* 🚨 LA TRAMPA PARA ROBOTS VA FUERA DE PANTALLA, NO EN `display: none`. Un campo oculto con `display:none` lo ignoran los robots que miran el estilo calculado; uno desplazado lo rellenan igual. Y sin `tabindex` ni etiqueta asociada, una persona no llega a él ni con el teclado. */ .bm-form__trampa { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; } .bm-form__legal { grid-column: 1 / -1; font-size: 0.86rem; color: var(--tinta-suave); margin: 0.2rem 0 0; } .bm-form__legal a { color: var(--acento); } .bm-form__pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); } .bm-form__error { font-size: 0.9rem; color: var(--coral); margin: 0; } /* ============================================================ EL ENVÍO: el formulario se dobla y se va volando ============================================================ Lo pidió Isaac. Y funciona porque el gesto DICE algo cierto: el mensaje se fue. Un botón que se queda igual con un «enviando…» debajo obliga a creer; esto se ve. Cómo está hecho, y por qué así: · Sólo `transform` y `opacity`. Un doblado de origami de verdad pide varias caras con `rotateY` y bisagras; a este tamaño no se distingue del recogido con giro, y aquel cuesta capas y este es gratis. · El avión es un SVG en el marcado, no una imagen: se tiñe con el acento del tema y no pide una petición más. · La animación arranca AL PULSAR, sin esperar al servidor —si esperara, el gesto llegaría medio segundo tarde y se sentiría roto—, pero el mensaje de «enviado» sólo aparece con el 201 en la mano. Si el envío falla, el formulario vuelve. Ver `bloques.js`. ============================================================ */ .bm-form__lienzo { position: relative; } .bm-form.is-enviando .bm-form__pliego { transform: scale(0.82) rotate(-3deg); opacity: 0; pointer-events: none; } .bm-form__avion { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: var(--acento); opacity: 0; pointer-events: none; } .bm-form__avion svg { width: 100%; height: 100%; fill: currentColor; display: block; } .bm-form.is-enviando .bm-form__avion { animation: bm-vuela 1150ms cubic-bezier(0.4, 0, 0.6, 1) forwards; } @keyframes bm-vuela { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(0.4); } 22% { opacity: 1; transform: translate(0, -6px) rotate(-8deg) scale(1); } 38% { opacity: 1; transform: translate(-14px, 6px) rotate(-14deg) scale(1); } 100% { opacity: 0; transform: translate(min(46vw, 520px), -230px) rotate(16deg) scale(0.42); } } /* La estela: dos filetes finos que salen detrás del avión. Es lo que hace que se lea como vuelo y no como un icono que se desplaza. */ .bm-form__estela { position: absolute; left: 50%; top: 42%; width: 120px; height: 2px; margin: -1px 0 0 -140px; background: linear-gradient(90deg, transparent, var(--acento)); opacity: 0; pointer-events: none; } .bm-form.is-enviando .bm-form__estela { animation: bm-estela 1150ms cubic-bezier(0.4, 0, 0.6, 1) forwards; } @keyframes bm-estela { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scaleX(0.2); } 30% { opacity: 0.5; transform: translate(20px, 0) rotate(-10deg) scaleX(1); } 100% { opacity: 0; transform: translate(min(46vw, 520px), -230px) rotate(16deg) scaleX(0.3); } } /* El acuse. Ocupa el sitio del formulario y no aparece debajo: si apareciera debajo, en un teléfono quedaría fuera de pantalla justo cuando hay que leerlo. */ .bm-form__gracias { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; opacity: 0; visibility: hidden; transition: opacity var(--tr-lenta), visibility 0s linear var(--tr-lenta); } .bm-form.is-enviado .bm-form__gracias { opacity: 1; visibility: visible; transition: opacity var(--tr-lenta) 120ms, visibility 0s; } /* 🚨 Y AL TERMINAR, EL HUECO SE CIERRA. El acuse va en absoluto sobre la tarjeta —tiene que ocupar su sitio, no aparecer debajo—, pero la tarjeta sigue MIDIENDO lo suyo aunque esté invisible: en un teléfono eso dejaba media pantalla en blanco bajo un mensaje de dos renglones, y el avión volaba por un descampado. Lo dijo Isaac. Al pasar a `is-enviado` la tarjeta se retira del flujo y el acuse vuelve a él, así que el alto pasa a ser el del contenido que queda. El salto ocurre una vez, cuando el avión ya se fue. ⚠ `display: none` y no `visibility: hidden`: lo segundo sigue ocupando. */ .bm-form.is-enviado .bm-form__pliego { display: none; } .bm-form.is-enviado .bm-form__gracias { position: static; padding: clamp(2rem, 6vw, 3.5rem) 1rem; } .bm-form__gracias h3 { font-family: var(--fuente-titulo); font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; margin: 0; } .bm-form__gracias p { color: var(--tinta-suave); max-width: 42ch; margin: 0; } /* Con movimiento reducido no vuela nada: el formulario se apaga y el acuse aparece. La información es la misma; el espectáculo, no. */ @media (prefers-reduced-motion: reduce) { .bm-form__pliego, .bm-form__gracias { transition: opacity var(--tr-media); } .bm-form.is-enviando .bm-form__pliego { transform: none; } .bm-form.is-enviando .bm-form__avion, .bm-form.is-enviando .bm-form__estela { animation: none; opacity: 0; } } /* ── Texto legal ───────────────────────────────────────────── Una columna estrecha y nada más. Un aviso de privacidad se lee de arriba a abajo y de una sentada: la medida corta —unos 68 caracteres— es lo único que decide si se termina de leer. Sin tarjetas, sin gestos, sin nada que compita: es la página donde cualquier adorno estorba. */ .bm-legal { max-width: 68ch; } .bm-legal h2 { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: -0.02em; margin: clamp(2rem, 4vw, 2.75rem) 0 0.7rem; padding-top: 1rem; border-top: 1px solid var(--linea); } .bm-legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .bm-legal p { margin: 0 0 1rem; } .bm-legal ul { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; } .bm-legal li { line-height: 1.6; } .bm-legal a { color: var(--acento); } /* Las dos notas —la fecha y lo que falta— en tinta suave y con su filete: son metadatos del documento, no su contenido. */ .bm-legal .bm-nota { padding: 0.9rem 1.1rem; border-left: 2px solid var(--linea-fuerte); background: color-mix(in srgb, var(--papel) 60%, transparent); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* ── Mundi, asomada al canto del formulario ────────────────── El mismo gesto de las tarjetas de la portada: agarrada del borde, con sólo los dedos por fuera. Y la misma razón para que esté aquí y no en cualquier sitio: es la mascota de la fase de ESTRATEGIA, la del primer contacto. Quien está llenando esto está justo ahí. 🚨 VIVE FUERA DEL PLIEGO, y es obligatorio: `.bm-form__pliego` lleva `overflow: hidden` —lo necesita para recortar el filete de arriba— y una mascota dentro se cortaría por la mitad justo por donde tiene que sobresalir. Es el mismo tropiezo documentado en `.bm-fase__mascota`, y van tres. Va por encima del canto y por debajo del avión: cuando el formulario se dobla y sale volando, ella se queda. */ .bm-form__mascota { position: absolute; right: clamp(1rem, 4vw, 2.5rem); /* 🚨 -96 Y NO -62. La referencia no es «cuánto asoma» sino DÓNDE CORTA EL CANTO: en la ilustración las manos ocupan los últimos ~20px de los 104, así que el canto tiene que cruzar por ahí. Con -62 quedaban 42px de mascota por debajo de la línea —medio cuerpo dentro de la tarjeta— y se leía caída, no agarrada. Con -96 sobresalen 8: la palma dentro y los dedos fuera. Es la misma cuenta que en las tarjetas de la portada. */ top: -96px; z-index: 2; width: 104px; height: auto; pointer-events: none; transition: transform var(--muelle), opacity var(--tr-lenta); } /* Al empezar a escribir se asoma un poco más. Lo dispara `:focus-within` del formulario, así que no cuesta ni una línea de JS. */ .bm-form:focus-within .bm-form__mascota { transform: translateY(-6px); } /* Y cuando el formulario sale volando, ella se agacha: si se quedara flotando sobre una tarjeta que ya no está, se leería como un recorte pegado. */ .bm-form.is-enviando .bm-form__mascota { transform: translateY(26px); opacity: 0; } @media (max-width: 620px) { .bm-form__mascota { width: 76px; top: -70px; right: 0.75rem; } } /* ── Y saltando en el acuse ────────────────────────────────── El premio. Entra con rebote justo después del mensaje, no a la vez: dos cosas apareciendo al mismo tiempo se leen como un parpadeo. */ .bm-form__festejo { width: 132px; height: auto; margin-bottom: 0.4rem; opacity: 0; transform: translateY(14px) scale(0.9); transition: opacity var(--tr-lenta), transform var(--muelle); } .bm-form.is-enviado .bm-form__festejo { opacity: 1; transform: none; transition-delay: 260ms; } @media (prefers-reduced-motion: reduce) { .bm-form__mascota, .bm-form__festejo { transition: none; } .bm-form.is-enviando .bm-form__mascota { transform: none; opacity: 1; } .bm-form.is-enviado .bm-form__festejo { transform: none; } } /* ── El horario ────────────────────────────────────────────── Estaba en un renglón fino al final de la página, debajo de las vías: Isaac no lo veía, y con razón — quien busca a qué hora contestan lo mira ANTES de decidir por dónde escribir, no después. Ahora abre la sección, con cuerpo de tarjeta y su reloj. Dice también qué pasa fuera de horario. Un horario a secas deja al que escribe a las 11 de la noche sin saber si su mensaje se perdió. */ .bm-horario { display: flex; align-items: flex-start; gap: 1rem; max-width: 640px; margin-top: clamp(1.5rem, 4vw, 2.25rem); padding: 1.1rem 1.3rem; border: 1px solid var(--vidrio-borde); border-left: 3px solid var(--acento); border-radius: var(--radio-md); background: color-mix(in srgb, var(--papel) 70%, transparent); } [data-tema='oscuro'] .bm-horario { background: color-mix(in srgb, #172120 70%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-horario { background: color-mix(in srgb, #172120 70%, transparent); } } .bm-horario__ico { flex: none; display: block; width: 26px; height: 26px; margin-top: 0.1rem; color: var(--acento); } .bm-horario__ico svg { width: 100%; height: 100%; display: block; fill: currentColor; } .bm-horario b { display: block; font-family: var(--fuente-titulo); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.2rem; } .bm-horario span { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--tinta-suave); } /* ── /contacto/ a dos columnas ─────────────────────────────── El formulario a la izquierda y las vías directas a la derecha. Lo pidió Isaac, y la razón aguanta sola: **la mitad de la gente no llena formularios.** Con las vías debajo había que bajar a buscarlas, y eso las convertía en un plan B; al lado son lo que son — otra manera igual de válida de empezar. El reparto es 1.35fr / 1fr y no mitad y mitad: el formulario tiene tres pasos y campos en dos columnas, la columna de al lado son dos tarjetas y dos fichas. Partirlo por la mitad dejaría el formulario apretado y la derecha con aire de sobra. ⚠ `align-items: start` para que la columna derecha NO se estire al alto del formulario: sin eso, las dos tarjetas y las dos fichas se reparten 700px y quedan flotando con huecos entre ellas. */ .bm-contacto { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; } /* Por debajo de 1000px el formulario se queda sin ancho para sus dos columnas de campos, así que se apila: primero el formulario, después las vías. */ @media (max-width: 1000px) { .bm-contacto { grid-template-columns: 1fr; } } /* La columna de al lado empieza a la altura del primer paso, no del filete: así los dos rótulos —«01» y «Sin formulario»— quedan en la misma línea óptica y se lee como una sola composición y no como dos bloques pegados. */ /* El envoltorio del formulario existe para una cosa: darle a la mascota y al avión un contexto que no se recorte. El `min-width: 0` es el de siempre en rejilla —sin él, un hijo con contenido ancho ensancha su columna—. */ .bm-contacto__form { min-width: 0; } .bm-contacto__aparte { padding-top: clamp(0.5rem, 2vw, 1.5rem); } .bm-contacto__aparte .bm-h3 { margin-bottom: 0.5rem; } .bm-contacto__aparte .bm-nota { margin-bottom: clamp(1.1rem, 2.5vw, 1.5rem); } /* En una columna estrecha las vías van apiladas siempre. */ .bm-contacto__aparte .bm-vias { grid-template-columns: 1fr; margin-top: 0; } .bm-contacto__aparte .bm-horario { margin-top: clamp(0.9rem, 2vw, 1.1rem); } /* ── Qué pasa después ──────────────────────────────────────── Tres tarjetas numeradas, sin más gesto que el filete: es una explicación que se lee de un tirón, no algo que se explore. */ .bm-despues { margin-top: clamp(1.75rem, 4vw, 2.75rem); } /* ── El carrusel de clientes ───────────────────────────────── Sustituye a la tira quieta. Lo pidió Isaac, y aquí gana su sitio: con siete clientes y lo que se hizo para cada uno, una fila fija obligaría a encoger las fichas hasta que no se lean. La cinta rueda y cada ficha pasa a su tamaño. 🚨 LA CINTA ESTÁ ESCRITA DOS VECES EN EL MARCADO, y sin eso no hay bucle: la animación desplaza la cinta EXACTAMENTE la mitad de su ancho y vuelve a empezar; como la segunda mitad es idéntica a la primera, el salto cae en un fotograma en que se ve lo mismo y no se nota. La copia va con `aria-hidden` para que un lector de pantalla no lea los clientes dos veces. 🚨 Y SE PARA AL PASAR EL CURSOR. Un carrusel que sigue rodando mientras alguien intenta leer una ficha es un carrusel que no deja leer ninguna. Se anima `transform`: el trabajo es del compositor y no repinta. */ /* ⚠ EL BOTÓN DE DEBAJO NECESITA SU AIRE. La regla existía para la tira quieta (`.bm-logos + p`) y al cambiar la clase dejó de aplicarse: el botón volvió a montarse sobre las fichas. Va pegada a la cinta para que viaje con ella. */ .bm-carrusel + p { margin-top: clamp(1.75rem, 4vw, 2.5rem); } .bm-carrusel { position: relative; margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2.25rem); border-top: 1px solid var(--linea); overflow: hidden; /* Los cantos se disuelven: una cinta que se corta en seco contra el borde se lee como recortada, no como en movimiento. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .bm-carrusel__cinta { display: flex; width: max-content; gap: clamp(1.25rem, 3vw, 2rem); animation: bm-rueda 38s linear infinite; } @media (hover: hover) { .bm-carrusel:hover .bm-carrusel__cinta { animation-play-state: paused; } } @keyframes bm-rueda { from { transform: translateX(0); } /* La mitad justa: es donde empieza la copia. Con `gap` en la cinta, la mitad incluye su hueco, así que se compensa con el mismo `gap` a la derecha — si no, cada vuelta se adelanta un hueco y la cinta deriva. */ to { transform: translateX(calc(-50% - clamp(1.25rem, 3vw, 2rem) / 2)); } } .bm-carrusel__ficha { flex: none; width: clamp(190px, 22vw, 240px); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio-vidrio); background: color-mix(in srgb, var(--papel) 60%, transparent); text-align: center; transition: border-color var(--tr-media), transform var(--muelle); } [data-tema='oscuro'] .bm-carrusel__ficha { background: color-mix(in srgb, #172120 60%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bm-carrusel__ficha { background: color-mix(in srgb, #172120 60%, transparent); } } .bm-carrusel__ficha b { font-family: var(--fuente-titulo); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.015em; } .bm-carrusel__ficha span { font-size: 0.82rem; line-height: 1.45; color: var(--tinta-suave); } /* ⚠ LA CAJA ES APAISADA (92×60) Y NO CUADRADA, y por eso caben los dos tipos de logotipo que hay aquí: los cuadrados —la B de BYM, el globo de Consulting— se limitan por el ALTO y llenan sus 60px; los apaisados —el coche de Car Studio, 3.4:1— se limitan por el ANCHO y llenan sus 92. Con una caja cuadrada, un logotipo apaisado se queda en una franja fina en medio. */ .bm-carrusel__logo { display: block; width: 92px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.8; filter: grayscale(1); transition: opacity var(--tr-media), filter var(--tr-media); } @media (hover: hover) { .bm-carrusel__ficha:hover { border-color: var(--linea-fuerte); transform: translateY(-3px); } .bm-carrusel__ficha:hover .bm-carrusel__logo { opacity: 1; filter: none; } } /* Los tres de color propio. */ .bm-carrusel__logo--petroleum { background-image: url(/wp-content/uploads/2026/10/petroleum.png); } .bm-carrusel__logo--consulting { background-image: url(/wp-content/uploads/2026/10/consulting-hme.png); } .bm-carrusel__logo--arcotechos { background-image: url(/wp-content/uploads/2026/10/arcotechos.png); } .bm-carrusel__logo--bym { background-image: url(/wp-content/uploads/2026/10/bym.png); } /* Y los dos monocromos, de máscara teñida con la tinta del tema: uno es negro y el otro casi blanco, así que sin esto uno de los dos desaparece siempre. */ /* 🚨 CAR STUDIO ENTRA AQUÍ Y NO CON LOS DE COLOR, aunque su coche sea azul y naranja: su palabra «CAR STUDIO» está en NEGRO, y sobre el tema oscuro desaparecía —se vio al quitarle el fondo—. Teñido entero se lee en los dos temas; se pierde el color del coche, que en esta tira va en gris de todos modos hasta que se señala. */ .bm-carrusel__logo--gorillax, .bm-carrusel__logo--veta-fina, .bm-carrusel__logo--car-studio { background-color: var(--tinta); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: none; opacity: 0.7; } .bm-carrusel__logo--gorillax { -webkit-mask-image: url(/wp-content/uploads/2026/10/gorillax.png); mask-image: url(/wp-content/uploads/2026/10/gorillax.png); } .bm-carrusel__logo--veta-fina { -webkit-mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); mask-image: url(/wp-content/uploads/2026/10/veta-fina.png); } /* ⚠ `car-studio-ancho.png` y no `car-studio.png`: el primero está recortado a su contenido; el segundo venía cuadrado y el coche ocupaba sólo el 28 % del alto del lienzo, así que se veía minúsculo al lado de los demás. Lo cantó Isaac. */ .bm-carrusel__logo--car-studio { -webkit-mask-image: url(/wp-content/uploads/2026/10/car-studio-ancho.png); mask-image: url(/wp-content/uploads/2026/10/car-studio-ancho.png); } /* ── Y sin cursor, la del centro se enciende sola ────────── La marca la pone el `IntersectionObserver` de `bloques.js` cuando la ficha está centrada en la banda de en medio. 🚨 Dentro de `@media (hover: none)` a propósito. El JS pone la clase en todos los aparatos —así se puede comprobar leyendo el DOM— y si estas reglas salieran de la consulta, en escritorio las fichas se encenderían solas al pasar por el centro además de al señalarlas con el cursor: dos cosas compitiendo por decir cuál importa. */ @media (hover: none) { .bm-carrusel__ficha.is-centro { border-color: var(--linea-fuerte); transform: translateY(-3px); } .bm-carrusel__ficha.is-centro .bm-carrusel__logo { opacity: 1; filter: none; } /* Los dos monocromos no tienen color que recuperar —son una máscara—, así que su encendido es subir a opaco del todo. */ .bm-carrusel__ficha.is-centro .bm-carrusel__logo--gorillax, .bm-carrusel__ficha.is-centro .bm-carrusel__logo--veta-fina, .bm-carrusel__ficha.is-centro .bm-carrusel__logo--car-studio { opacity: 1; } } /* Con movimiento reducido la cinta se para y se deja ver lo que quepa: un carrusel que rueda solo es de lo que más molesta a quien pide menos movimiento. Se puede arrastrar con el dedo o con la barra. */ @media (prefers-reduced-motion: reduce) { .bm-carrusel { overflow-x: auto; } .bm-carrusel__cinta { animation: none; } .bm-carrusel__ficha { transition: none; } } /* ── Iconos de las vías ────────────────────────────────────── El sprite vive en el pie, que se pinta en todas las páginas, así que `` lo encuentra aunque esté declarado más abajo en el documento. Van en trazo y no en relleno: los símbolos del pie están dibujados así, y rellenarlos los convertiría en manchas. */ .bm-via__ico { display: block; width: 26px; height: 26px; margin-bottom: 0.55rem; color: var(--acento); } .bm-via__ico svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ── Una sección centrada ──────────────────────────────────── `.bm-cont--centro` centra el texto y devuelve al centro las piezas que por omisión se alinean a la izquierda —el titular, la entradilla, las cifras—. No se toca `.bm-cont` para no centrar medio sitio. */ .bm-cont--centro { text-align: center; } .bm-cont--centro .bm-h2, .bm-cont--centro .bm-lead { margin-inline: auto; } .bm-cont--centro .bm-cifras { justify-content: center; } .bm-cont--centro .bm-cifra { text-align: center; } /* ── La franja de servicio (/servicios/) ──────────────────── Texto a un lado, ilustración al otro, alternando. Es la pieza de una página de catálogo: cada servicio ocupa su franja entera y se lee de un tirón, sin competir con los demás por el ancho. Alternar no es adorno: con las tres franjas iguales, el ojo baja por la columna de texto y se salta las imágenes; alternando, cada franja obliga a un pequeño cambio de dirección y se leen las tres. ⚠ La imagen es la MISMA de la tarjeta de la portada, y a propósito: quien llega aquí desde una tarjeta reconoce la que acaba de pulsar. */ .bm-franja { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.75rem, 4vw, 2.5rem) 0; border-top: 1px solid var(--linea); } .bm-franja:first-of-type { border-top: 0; } /* La alterna cambia el orden visual, no el del marcado: el texto sigue yendo primero para quien lee con lector de pantalla. */ .bm-franja--alterna .bm-franja__texto { order: 2; } .bm-franja__texto { max-width: 62ch; } .bm-franja__texto .bm-h3 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -0.025em; margin-bottom: 0.5rem; } .bm-franja__imagen { /* De 230 a 330px el 4/sep: Isaac lo vio pequeno para el hueco. La franja reparte 1fr para el texto y auto para la imagen, asi que crecer aqui NO recorta el texto: le quita aire sobrante. */ width: clamp(170px, 26vw, 330px); height: auto; justify-self: center; } /* Por debajo de 820px la ilustración pasa arriba y a tamaño de icono: al lado dejaría el texto en una columna de tres palabras, que es el mismo problema que ya se resolvió en el acordeón de la portada. */ @media (max-width: 820px) { .bm-franja { grid-template-columns: 1fr; justify-items: start; } .bm-franja--alterna .bm-franja__texto { order: 0; } .bm-franja__imagen { order: -1; width: 108px; justify-self: start; margin-bottom: 0.5rem; } } /* ── Las listas de alcance ─────────────────────────────────── Lo que incluye cada servicio y cada póliza. Con marca propia en vez del punto del navegador: el punto redondo es de artículo de blog; esta es una lista de entregables y se lee mejor con el filete de la casa. */ .bm-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .bm-lista li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--tinta-suave); } .bm-lista li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--acento); } .bm-lista li strong { color: var(--tinta); font-weight: 600; } /* En las pólizas la lista es el contenido, no un apoyo: sube de tamaño y la tarjeta le da su aire. */ /* 🚨 SIN `align-items: start`, y a propósito. Lo llevaba de cuando eran tarjetas planas, y al pasarlas a tarjeta que gira dejó de ser inofensivo: corta el estirado de la fila en el PRIMER eslón, así que por muchas retículas que haya debajo cada tarjeta acaba midiendo su propio reverso. Aquí el estirado ES el mecanismo. */ .bm-polizas { margin-top: clamp(1.75rem, 4vw, 2.75rem); } .bm-polizas .bm-card { display: flex; flex-direction: column; } .bm-polizas .bm-nota { margin: 0.3rem 0 0; } .bm-polizas .bm-lista { margin-top: 0.9rem; } /* La nota de «no incluye» de cada franja: separada por un filete para que no se lea como una viñeta más de la lista de arriba. */ .bm-franja__texto .bm-nota { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--linea); } .bm-franja__texto .bm-nota a { color: var(--acento); } /* ── El panel de alcance (22/sep/2026) ────────────────────── 🚨 NACE DE UN FALLO DE COMPOSICIÓN, NO DE UNA FALTA DE CSS, y eso es lo que costó encontrarlo. Tres secciones de `/servicios/sitios-web/` usaban `.bm-franja` con SÓLO su `__texto` y sin `__imagen`. La franja es una rejilla de dos columnas —texto e ilustración, alternando—, así que sin la segunda columna se queda en una tira de 62ch pegada al canto izquierdo, con media pantalla vacía al lado. Isaac lo describió como «texto simple sin nada», y tanto el marcado como el CSS estaban del todo correctos por separado. ⚠ LA FRANJA NO SE TOCA: donde SÍ hay ilustración —`/servicios/`, `/nosotros/`— sigue siendo la pieza buena. Lo que cambia es que una lista de alcance sin ilustración va en TARJETA, que es el mueble con el que el resto del sitio agrupa cosas. */ .bm-alcance { margin-top: clamp(1.75rem, 4vw, 2.75rem); } .bm-alcance .bm-lista { margin-top: 0.9rem; } /* Doce entregables en una columna son una tira de scroll; en dos se leen de un vistazo. 🚨 DOS FIJAS, NO `auto-fit`. El primer intento usaba `repeat(auto-fit, minmax(240px, 1fr))` para ahorrarse la consulta de medios, y dentro de una tarjeta de 1150px eso **cabe CUATRO veces**: doce renglones de dos líneas repartidos en cuatro columnas dejan de ser una lista y pasan a ser un mosaico de retales. El corte en 620px es el mismo que usan `.bm-grid-2` y `.bm-grid-3`, así que la página entera cambia de columnas a la vez. */ /* 🚨 Y NO ES UNA REJILLA DE DOS, ES UNA COLUMNA PARTIDA EN DOS. Con `grid-template-columns: repeat(2, 1fr)` la lista se llena por FILAS, así que el renglón que ocupa dos líneas —«Velocidad y posicionamiento técnico»— estira su fila entera y deja un hueco en blanco enfrente. Se ve como un error de maquetación y no como una lista. `columns` fluye por COLUMNAS: llena la primera de arriba abajo y sigue en la segunda, sin filas que cuadrar. Además se lee en el orden natural. El `break-inside` es obligatorio o un renglón de dos líneas se parte entre las dos columnas, que es peor que el hueco. */ .bm-lista--dos { display: block; columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); } .bm-lista--dos li { break-inside: avoid; margin-bottom: 0.5rem; /* lo que daba el `gap` de la rejilla */ } @media (max-width: 620px) { .bm-lista--dos { columns: 1; } } /* El mismo filete que la nota tenía dentro de la franja, para que no se lea como una viñeta más de la lista de arriba. */ .bm-alcance .bm-nota { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--linea); /* La tarjeta ocupa el contenedor entero y la nota no tiene por qué: sin tope se iba a 150 caracteres por renglón y dejaba de leerse. */ max-width: 78ch; } .bm-alcance .bm-nota a { color: var(--acento); } /* Mismo motivo que el tope de la nota: la tarjeta ocupa el contenedor entero, pero un párrafo de 1150px de ancho no se lee. Donde la tarjeta ya es media —las dos del SEO— este tope no llega a morder. */ .bm-alcance .bm-card__texto { max-width: 78ch; } /* ── El sello de incluido / aparte ─────────────────────────── La sección del SEO existe para contestar UNA pregunta: qué entra en la póliza y qué no. Con dos listas seguidas esa respuesta hay que deducirla leyendo las dos; con el sello se ve antes de leer. Es información, no adorno — que es la prueba que pide la regla INDISPENSABLE. */ .bm-sello { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-family: var(--fuente-titulo); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-suave); } /* El cuadrito hereda el color del sello, así que el modificador sólo tiene que cambiar `color` y las dos cosas siguen. */ .bm-sello::before { content: ''; width: 7px; height: 7px; flex: none; background: currentColor; } .bm-sello--si { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); background: color-mix(in srgb, var(--acento) 10%, transparent); } .bm-alcance .bm-sello + .bm-lista { margin-top: 1rem; } .bm-alcance .bm-sello + .bm-card__texto { margin-top: 0.9rem; } /* ── El flujo de trabajo de cada servicio ──────────────── Los pasos que se siguen de verdad, dictados por Isaac el 3/sep. Van numerados y con su raíl, como la escalera del formulario de contacto: es el mismo gesto —«esto va en orden y éste es el orden»— y conviene que se lea igual en las dos páginas. ⚠ Aquí la numeración SÍ significa algo: es una secuencia real, no una lista de características. Si algún día esto deja de ser un orden, se quitan los números y vuelve a ser una `bm-lista`. El contador va en CSS y no escrito en el marcado: así añadir o quitar un paso no obliga a renumerar a mano, que es justo donde se cuelan los saltos. */ .bm-flujo__titulo { font-family: var(--fuente-titulo); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin: 1.4rem 0 0.8rem; } .bm-flujo { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .bm-flujo li { position: relative; counter-increment: paso; padding-left: 2.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--tinta-suave); } .bm-flujo li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1.5px solid var(--linea-fuerte); border-radius: 50%; font-family: var(--fuente-titulo); font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); background: var(--papel-hondo); } /* El raíl entre un paso y el siguiente. El último no lo lleva: si lo llevara, colgaría hacia un paso que no existe. */ .bm-flujo li::after { content: ''; position: absolute; left: calc(0.775rem - 1px); top: 1.75rem; bottom: -0.7rem; width: 2px; background: var(--linea); } .bm-flujo li:last-child::after { display: none; } .bm-flujo li strong { color: var(--tinta); font-weight: 600; } /* ── La baraja del flujo: se ve una y las demás se apagan ──── El abanico de «cómo se contrata» con el mecanismo del grupo A del catálogo encima. Aquí SÍ se desenfoca, y en el abanico de los documentos no — la diferencia no es capricho: · Los cuatro documentos son UNA explicación que se lee junta; apagar tres cuartas partes de un trámite no ayuda a nadie. · Los pasos de un flujo se leen DE UNO EN UNO, en orden. Apagar los demás es lo que dice «vas por aquí». Y ninguna de las dos lleva enlaces dentro, que es la condición para poder desenfocar sin que parezcan deshabilitadas. */ @media (hover: hover) and (pointer: fine) { .bm-abanico--foco:hover .bm-hoja { filter: blur(2.5px); opacity: 0.45; } .bm-abanico--foco .bm-hoja:hover { filter: none; opacity: 1; } } /* Sin cursor, la que cruza la banda central. La clase la pone el mismo observador que el resto del sitio; aquí sólo se le da significado. */ @media (hover: none) { .bm-abanico--foco .bm-hoja { filter: blur(2.2px); opacity: 0.45; transition: filter var(--tr-lenta), opacity var(--tr-lenta); } .bm-abanico--foco .bm-hoja.is-saltando { filter: none; opacity: 1; border-top-color: var(--acento); } } @media (prefers-reduced-motion: reduce) { .bm-abanico--foco:hover .bm-hoja, .bm-abanico--foco .bm-hoja { filter: none; opacity: 1; } } /* La carta del flujo es más baja que la de un documento: lleva un número y un renglón, no un párrafo. */ /* 🚨 EL ABANICO DE «CÓMO SE CONTRATA» ESTÁ HECHO PARA CUATRO CARTAS: su arco y su relleno van por `nth-child(1..4)`. Los flujos tienen cuatro, cinco y seis, así que con esas reglas la quinta y la sexta salen sin girar y el texto de las de en medio se corta —se vio en la primera captura—. Aquí el giro NO puede depender del índice, porque el ángulo tendría que saberse cuántas hay y CSS no sabe contar. Se resuelve con un ladeo alterno —par a un lado, impar al otro— y un poco más en la primera y la última: se lee como una mano de cartas con cualquier número, que era el objetivo. Y el relleno derecho pasa a TODAS menos la última: la que monta encima es siempre la siguiente, exista o no. */ .bm-abanico--foco .bm-hoja { min-height: 168px; padding-bottom: 1.4rem; transform: none; } .bm-abanico--foco .bm-hoja:nth-child(odd) { transform: rotate(-1.6deg) translateY(3px); } .bm-abanico--foco .bm-hoja:nth-child(even) { transform: rotate(1.6deg); } .bm-abanico--foco .bm-hoja:first-child { transform: rotate(-3.4deg) translateY(10px); } .bm-abanico--foco .bm-hoja:last-child { transform: rotate(3.4deg) translateY(10px); } .bm-abanico--foco .bm-hoja:not(:last-child) { padding-right: 3.25rem; } .bm-abanico--foco .bm-hoja:last-child { padding-right: 1.35rem; } /* 🚨 EL APILADO HAY QUE ESCRIBIRLO, Y ESO NO ERA OBVIO. Se puso `z-index: auto` pensando que el orden del marcado bastaba —y basta, ENTRE ELEMENTOS SIN z-index—. Pero el abanico base fija `z-index: 1..4` por `nth-child` para sus cuatro documentos, y esas reglas pesan más (0,3,0 contra 0,2,0): las cartas 1 a 4 se quedaban con su número y la 5 y la 6 en `auto`, o sea DEBAJO de todas. El síntoma era la quinta carta cortada por la IZQUIERDA —no por la derecha, que es lo que hacía dudar del relleno—. Se escriben ocho niveles: cuatro más de los que hoy usa el flujo más largo, por si algún servicio gana pasos. */ .bm-abanico--foco .bm-hoja { position: relative; } .bm-abanico--foco .bm-hoja:nth-child(1) { z-index: 1; } .bm-abanico--foco .bm-hoja:nth-child(2) { z-index: 2; } .bm-abanico--foco .bm-hoja:nth-child(3) { z-index: 3; } .bm-abanico--foco .bm-hoja:nth-child(4) { z-index: 4; } .bm-abanico--foco .bm-hoja:nth-child(5) { z-index: 5; } .bm-abanico--foco .bm-hoja:nth-child(6) { z-index: 6; } .bm-abanico--foco .bm-hoja:nth-child(7) { z-index: 7; } .bm-abanico--foco .bm-hoja:nth-child(8) { z-index: 8; } @media (hover: hover) and (pointer: fine) { .bm-abanico--foco .bm-hoja:hover { transform: rotate(0deg) translateY(-20px) scale(1.05); z-index: 9; } } @media (hover: none) { .bm-abanico--foco .bm-hoja.is-saltando { z-index: 9; } } @media (max-width: 1119px) { .bm-abanico--foco .bm-hoja:not(:last-child), .bm-abanico--foco .bm-hoja:last-child { padding-right: 1.35rem; } .bm-abanico--foco .bm-hoja:nth-child(odd), .bm-abanico--foco .bm-hoja:nth-child(even), .bm-abanico--foco .bm-hoja:first-child, .bm-abanico--foco .bm-hoja:last-child { transform: none; } } /* ── La póliza, que gira sobre el eje horizontal ───────────── Muestra 06 del catálogo. Gira sobre el eje HORIZONTAL y no el vertical porque la tarjeta es más ancha que alta: sobre el vertical barrería media columna y la perspectiva la deformaría en los extremos. 🚨 LAS DOS CARAS VAN EN LA MISMA CELDA DE UNA RETÍCULA (`grid-area: 1/1`), no en posición absoluta: así la tarjeta mide lo que mida la cara más alta —la lista de nueve viñetas de Plataforma— y no hay que fijarle una altura que se rompa en cuanto cambie el alcance de una póliza. ⚠ Y ES UN CONTENIDO QUE SE ESCONDE DETRÁS DE UN GESTO. Lo pidió Isaac y se hace, pero conviene tenerlo escrito: lo que hay detrás es el alcance exacto de cada póliza, que es lo que esta página viene a decir. Se compensa con dos cosas: la cara de delante lleva «Qué incluye» con su flecha —así se sabe que hay algo detrás— y en táctil se voltea sola al cruzar la banda del scroll, que es donde no hay cursor que lo descubra. */ /* 🚨 LAS TRES SON UNA RETÍCULA DE PUNTA A PUNTA, sin un solo bloque en medio. La cadena es: `.bm-polizas` (grid) → `.bm-poliza` (grid) → `.bm-poliza__giro` (grid) → las dos caras en la misma celda. Si `.bm-poliza` se queda en bloque —como estaba— el estirado de la fila muere ahí: el `min-height: 100%` del giro se resuelve contra una altura `auto` y no estira nada, así que cada tarjeta acaba midiendo lo que mide SU PROPIO reverso. Se veía feo de inmediato: tres tarjetas de tres alturas y el «Qué incluye» a tres alturas distintas. Con la cadena entera de retículas, la fila mide lo que la póliza más larga y las tres bajan hasta el mismo renglón. */ .bm-poliza { perspective: 1600px; display: grid; } .bm-poliza__giro { display: grid; transform-style: preserve-3d; transition: transform 720ms cubic-bezier(0.4, 0.15, 0.2, 1); } .bm-poliza__cara { grid-area: 1 / 1; backface-visibility: hidden; display: flex; flex-direction: column; transition: opacity 360ms linear; } .bm-poliza__cara--tras { transform: rotateX(180deg); opacity: 0; } .bm-poliza:hover .bm-poliza__giro, .bm-poliza:focus-within .bm-poliza__giro { transform: rotateX(180deg); } .bm-poliza:hover .bm-poliza__cara--frente, .bm-poliza:focus-within .bm-poliza__cara--frente { opacity: 0; } .bm-poliza:hover .bm-poliza__cara--tras, .bm-poliza:focus-within .bm-poliza__cara--tras { opacity: 1; } /* 🚨 EL PARPADEO AL ACTIVAR: LAS DOS CARAS SON `.bm-card`. Isaac, 3/sep/2026: «cuando se activa como que parpadean». La causa no estaba en el giro sino en una regla generica que nadie sospecharia: .bm-card:hover { transform: translateY(-3px); } <- 0,2,0 Las dos caras llevan `bm-card`, asi que al posarse sobre la poliza esa regla les fija SU PROPIO transform —y `transform` no se acumula, SUSTITUYE—. El reverso perdia su `rotateX(180deg)` (0,1,0, que pierde por especificidad) y las dos caras acababan mirando al mismo lado, en la misma celda de la reticula y a la misma profundidad. Eso es z-fighting: el navegador no tiene forma de decidir cual va delante y las alterna fotograma a fotograma. De ahi el parpadeo, y de ahi que solo pasara con el cursor y nunca en tactil. Se apaga el levanton dentro de la poliza —ya se levanta la tarjeta entera, no hacen falta dos acuses de recibo— y se le devuelve al reverso su giro con especificidad suficiente para que ninguna regla generica se lo quite. */ /* 🚨 EL PARPADEO, SEGUNDA PARTE: LAS CARAS NO PUEDEN CAZAR EL CURSOR. El arreglo anterior quitó el `translateY` que le robaba el giro al reverso, pero Isaac siguió viéndolo AL MOVER el cursor sobre la tarjeta ya activada —y eso es otra cosa distinta—. `brillo()` guarda qué tarjeta está señalada con un `mouseover` delegado: var card = e.target.closest('.bm-card'); Las DOS caras son `.bm-card` y viven en la MISMA celda de la retícula, así que moviendo el cursor el `mouseover` salta de una a otra sin parar: el foco que sigue al puntero cambia de capa en cada salto, y el rect que ese guion cachea al entrar deja de ser cierto en cuanto el padre gira. Dos capas promovidas peleandose la misma profundidad, sesenta veces por segundo. La cura no es parchear el foco: es que **la pieza interactiva sea UNA**. Quien se activa es la póliza entera —ella lleva el `:hover` que dispara el giro—; las caras son dibujo. Con `pointer-events: none` el cursor las atraviesa, `.bm-card:hover` no llega a dispararse nunca ahí dentro y el ping-pong desaparece de raíz. Y el foco que sigue al cursor se apaga dentro de la poliza: esta pensado para tarjetas planas, y aqui el gesto fuerte ya es el giro. Uno por pantalla, que es la regla del catalogo. */ .bm-poliza__cara { pointer-events: none; /* caras: dibujo, no boton */ } .bm-poliza .bm-card::after { display: none; } .bm-poliza .bm-card.bm-poliza__cara:hover { transform: none; } .bm-poliza .bm-card.bm-poliza__cara--tras, .bm-poliza .bm-card.bm-poliza__cara--tras:hover { transform: rotateX(180deg); } /* Y el relevo de opacidad pasa a ser INSTANTANEO a mitad del giro, no un fundido. El giro dura 720ms y el fundido duraba 360: la cara de delante se apagaba del todo cuando la tarjeta llevaba media vuelta y el reverso todavia ensenaba su dorso oculto, asi que habia un instante con NADA a la vista. Un salto seco a los 360ms cae justo donde las dos caras estan de canto y no se ve ninguna: ahi el cambio es invisible por geometria. */ .bm-poliza__cara { transition: opacity 0s linear 360ms; } /* La pista de que hay algo detrás. Sin ella, el reverso depende de que a alguien se le ocurra pasar por encima. */ .bm-poliza__pista { margin-top: auto; padding-top: 1rem; font-family: var(--fuente-titulo); font-size: 0.82rem; font-weight: 600; color: var(--acento); display: inline-flex; align-items: center; gap: 0.4rem; } .bm-poliza__pista::after { content: ''; width: 14px; height: 2px; background: currentColor; transition: width var(--tr-media); } .bm-poliza:hover .bm-poliza__pista::after { width: 22px; } .bm-poliza__rotulo { font-family: var(--fuente-titulo); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); margin: 0 0 0.7rem; } .bm-poliza__cara--tras .bm-lista li { font-size: 0.88rem; } /* ── La cara de delante ya no está vacía ────────────────────── Isaac, 3/sep/2026: «las cards de las pólizas tienen mucho espacio en blanco cuando están inactivas». Y tenía razón por construcción: la tarjeta mide lo que mide su REVERSO —nueve viñetas— y delante sólo hay un título, un renglón y la pista. El hueco no era un descuido de maqueta, era la sombra del contenido de atrás. Se llena con lo que ya debería haber estado ahí y no con relleno: el nombre de la póliza a tamaño de titular —es lo que se viene a leer— y una mancha tenue de la familia de la marca, la misma que usan las secciones. La mancha va DENTRO de la tarjeta y quieta: la de las secciones lleva paralaje y entrada, y aquí no hay nada que acompañar. Cada póliza lleva la suya en distinta esquina para que las tres no se vean calcadas, igual que se alternan los cuatro repartos de sección. */ /* Y el frente se compone CENTRADO, no pegado arriba. La tarjeta mide lo que mide su reverso, asi que por mucho que crezca el titulo siempre va a sobrar alto: con el contenido arriba ese sobrante queda todo junto al final y se lee como un hueco; centrado se reparte arriba y abajo y se lee como aire. La pista deja de ir pegada al fondo por lo mismo — abajo del todo, sola, volvia a marcar la distancia que se queria disimular. */ .bm-poliza__cara--frente { justify-content: center; /* frente */ } .bm-poliza__cara--frente .bm-poliza__pista { margin-top: 1.4rem; padding-top: 0; } .bm-poliza__cara--frente .bm-h3 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0.6rem; } .bm-poliza__cara--frente .bm-card__texto { font-size: 1.02rem; max-width: 30ch; } /* ⚠ `.bm-card` fija `background` y va DESPUÉS en el archivo: hay que encadenar las dos clases o la mancha no llega nunca. Es la tercera vez que esta misma trampa cuesta un rato — ver el bloque de casos. */ .bm-card.bm-poliza__cara--frente { background-image: radial-gradient(52% 46% at 88% 8%, rgba(82, 245, 220, var(--mancha-menta)) 0%, rgba(82, 245, 220, 0) 72%), radial-gradient(46% 40% at 4% 96%, rgba(251, 239, 183, var(--mancha-crema)) 0%, rgba(251, 239, 183, 0) 72%); } .bm-poliza:nth-child(2) > .bm-poliza__giro > .bm-card.bm-poliza__cara--frente { background-image: radial-gradient(50% 44% at 6% 10%, rgba(7, 171, 170, var(--mancha-teal)) 0%, rgba(7, 171, 170, 0) 72%), radial-gradient(46% 40% at 94% 94%, rgba(82, 245, 220, var(--mancha-menta)) 0%, rgba(82, 245, 220, 0) 72%); } .bm-poliza:nth-child(3) > .bm-poliza__giro > .bm-card.bm-poliza__cara--frente { background-image: radial-gradient(48% 44% at 92% 92%, rgba(251, 239, 183, var(--mancha-crema)) 0%, rgba(251, 239, 183, 0) 72%), radial-gradient(44% 40% at 8% 12%, rgba(7, 171, 170, var(--mancha-teal)) 0%, rgba(7, 171, 170, 0) 72%); } /* El reverso NO lleva mancha: ahí hay nueve renglones y la mancha compite con ellos. La mancha existe para llenar un hueco, no para decorar un texto. */ /* ── LOS NIVELES DE UN SERVICIO ─────────────────────────────── Las tres páginas de servicio —sitios, aplicaciones, branding— tienen el mismo problema que resolver: decir de qué tamaños viene esto y cómo sabe uno cuál es el suyo. Un solo componente para las tres, porque es la misma pregunta y merece la misma respuesta. 🚨 LA BARRA DE NIVEL NO ES ADORNO: es el único sitio donde la escala se ve de un vistazo. Cuatro tarjetas con el mismo aspecto son cuatro opciones sueltas; con la barra llenándose 25, 50, 75, 100 son una ESCALERA, y eso es información que el texto tardaría un párrafo en dar. Se anima con `transform: scaleX`, que es de lo poco gratis por fotograma, y arranca al revelarse la tarjeta —no en bucle—: se llena una vez, delante de ti. El gesto fuerte es el de siempre: la que se señala se levanta y las hermanas se retiran. NO se desenfocan, y no es descuido —la regla del catálogo—: aquí se comparan columnas, y comparar exige poder leerlas todas a la vez. Desenfocar tres de cuatro rompería justo lo que la sección viene a hacer. */ .bm-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.4rem); margin-top: clamp(1.75rem, 4vw, 2.75rem); } .bm-nivel { position: relative; display: flex; flex-direction: column; padding: 1.35rem 1.25rem 1.4rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--vidrio); transition: transform var(--tr-media), border-color var(--tr-media), box-shadow var(--tr-media), opacity var(--tr-media); } /* La barra vive en el borde de arriba, pegada a la esquina redondeada. */ .bm-nivel__barra { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; border-radius: 6px 6px 0 0; background: var(--linea); } .bm-nivel__barra::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07ABAA, var(--acento)); transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.32, 0.72, 0, 1) 220ms; } /* Se llena cuando la tarjeta se revela. Si el JS no llega, la barra se queda llena desde el principio: mejor quieta que vacía para siempre. */ .js-on .bm-nivel.is-visible .bm-nivel__barra::after { transform: scaleX(var(--llena, 1)); } html:not(.js-on) .bm-nivel__barra::after { transform: scaleX(var(--llena, 1)); } /* El llenado va en CLASE y no en un `style` del marcado: WordPress filtra atributos de estilo segun quien publique, y una propiedad personalizada que desaparece deja la barra a cero sin decir por que. */ .bm-nivel--20 { --llena: 0.20; } .bm-nivel--33 { --llena: 0.33; } .bm-nivel--40 { --llena: 0.40; } .bm-nivel--50 { --llena: 0.50; } .bm-nivel--60 { --llena: 0.60; } .bm-nivel--66 { --llena: 0.66; } .bm-nivel--75 { --llena: 0.75; } .bm-nivel--80 { --llena: 0.80; } .bm-nivel--100 { --llena: 1; } .bm-nivel__n { font-family: var(--fuente-titulo); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--acento); margin: 0 0 0.5rem; } .bm-nivel__nombre { font-family: var(--fuente-titulo); font-size: 1.22rem; font-weight: 600; line-height: 1.15; color: var(--tinta); margin: 0 0 0.15rem; } /* La medida que lo define, que es el dato por el que se entra a mirar. */ .bm-nivel__medida { font-family: var(--fuente-titulo); font-size: 0.94rem; font-weight: 500; color: var(--acento); margin: 0 0 0.75rem; } .bm-nivel__quien { font-size: 0.88rem; line-height: 1.45; color: var(--tinta-suave); margin: auto 0 0; padding-top: 0.6rem; border-top: 1px solid var(--linea); } /* Las filas de criterio, para la página de aplicaciones. La etiqueta se repite en cada tarjeta A PROPÓSITO: sin repetirla, en un teléfono —donde las cuatro se apilan— los valores se quedan huérfanos de su fila. */ .bm-nivel__fila { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.42rem 0; border-top: 1px solid var(--linea); } .bm-nivel__fila:first-of-type { border-top: 0; padding-top: 0; } .bm-nivel__eti { font-family: var(--fuente-titulo); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); } .bm-nivel__val { font-size: 0.88rem; line-height: 1.35; color: var(--tinta); } @media (hover: hover) and (pointer: fine) { .bm-niveles:hover .bm-nivel { opacity: 0.62; } .bm-niveles .bm-nivel:hover { opacity: 1; transform: translateY(-8px); border-color: color-mix(in srgb, var(--acento) 55%, var(--linea)); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent); } } /* Sin cursor manda el scroll, con el mismo motor que el resto del sitio. */ @media (hover: none) { /* 0.78 y no 0.62 como en escritorio, a proposito: aqui NADA esta activo hasta que la primera tarjeta cruza la banda del scroll, asi que ese valor es el estado de LLEGADA y no el de reposo entre hermanas. A 0.62 la seccion se recibia entera atenuada, y estas tarjetas son una tabla de comparacion: lo primero que se hace con ellas es leerlas todas. */ .bm-nivel { opacity: 0.78; transition: opacity var(--tr-lenta), transform var(--tr-lenta); } .bm-nivel.is-saltando { opacity: 1; transform: translateY(-6px); border-color: color-mix(in srgb, var(--acento) 55%, var(--linea)); } } @media (prefers-reduced-motion: reduce) { .bm-niveles:hover .bm-nivel, .bm-nivel { opacity: 1; transform: none; } .bm-nivel__barra::after { transition: none; } } /* En táctil se voltea la que cruza la banda del scroll. */ @media (hover: none) { .bm-poliza.is-saltando .bm-poliza__giro { transform: rotateX(180deg); } .bm-poliza.is-saltando .bm-poliza__cara--frente { opacity: 0; } .bm-poliza.is-saltando .bm-poliza__cara--tras { opacity: 1; } } /* Con movimiento reducido no gira nada: se enseña el alcance y punto. Es la información; el giro era el envoltorio. */ @media (prefers-reduced-motion: reduce) { .bm-poliza__giro { transform: none !important; transition: none; } .bm-poliza__cara--frente { opacity: 1 !important; } .bm-poliza__cara--tras { transform: none; opacity: 1 !important; grid-area: auto; margin-top: 0.9rem; } .bm-poliza__pista { display: none; } } /* ── LA BARAJA, AHORA SÍ COMO LAS DE PETROLEUM ──────────────── Isaac, 4/sep/2026: «hazlas idénticas a las de Petroleum, son del mismo diseño tipo baraja; éstas están muy cortas y no se sienten como cartas». Tenía razón y la causa era una sola: **les faltaba la proporción**. Una carta no es una tarjeta ancha con poco texto — es un rectángulo ALTO. Sin `aspect-ratio` el alto lo ponía el contenido, y con un número y un renglón salían tarjetas achatadas que no se parecían a un naipe por mucho arco y mucho solape que llevaran encima. Lo que se trae de `pg-baraja` de Petroleum, pieza por pieza: · `aspect-ratio: .72` — la proporción de un naipe. Es LO QUE FALTABA. · Solape de 26px con `transform-origin: bottom center`, para que giren desde la base como una mano de cartas y no desde el centro. · Los dos «palos» en esquinas opuestas, que es lo que convierte un rectángulo en una carta. · El número enorme DETRÁS del texto, con `z-index: -1`. · Al sacar una: se endereza, sube 30px, escala 1.07 y las demás se apagan. 🚨 PERO EL ARCO NO SE COPIA, SE CALCULA. Petroleum tiene cuatro pasos y su arco está escrito a mano en `nth-child(1..4)`. Aquí las barajas son de SEIS, CINCO y CUATRO, y ese mismo truco ya falló una vez —el abanico de documentos con seis tarjetas: las dos últimas se colaban debajo porque el `z-index` sólo llegaba a 4—. Así que el giro, la caída y el apilado los escribe el JS en `--rot`, `--dy` y `z-index` a partir de cuántas cartas haya de verdad. Con eso la baraja sale simétrica tenga las que tenga. ⚠ Y LA ENTRADA VA EN EL CONTENEDOR, NO EN CADA CARTA. Está avisado en el CSS de Petroleum y aplica igual aquí: `.bm-up` pone `transform: none` al revelarse, y en la carta eso le borra el giro del arco — la baraja saldría recta. Por eso `bm-up` cuelga del `.bm-abanico--foco` y las hojas no lo llevan. */ .bm-abanico--foco { display: flex; align-items: flex-start; justify-content: center; margin-top: clamp(1.75rem, 4vw, 3rem); padding: 34px 0 22px; /* aire para que la carta elevada no se recorte */ } .bm-abanico--foco .bm-hoja { flex: 1 1 0; min-width: 0; aspect-ratio: 0.72; margin-left: -26px; padding: 2rem 1.6rem 1.75rem; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; transform-origin: bottom center; transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); transition: transform 420ms cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 420ms cubic-bezier(0.22, 0.8, 0.3, 1), filter 380ms linear, opacity 380ms linear, border-color 300ms linear; } .bm-abanico--foco .bm-hoja:first-child { margin-left: 0; } /* Los dos palos, en esquinas opuestas. Son lo que hace que se lea como naipe y no como rectángulo: un naipe se reconoce por las esquinas, no por el contorno. */ .bm-abanico--foco .bm-hoja::before { content: ''; position: absolute; right: 20px; top: 22px; width: 11px; height: 11px; border-radius: 2px 2px 2px 100%; background: var(--acento); opacity: 0.85; pointer-events: none; } .bm-abanico--foco .bm-hoja > .bm-card__num { position: absolute; left: 20px; bottom: 2px; z-index: -1; margin: 0; font-family: var(--fuente-titulo); font-size: clamp(72px, 7.5vw, 116px); line-height: 0.8; font-weight: 600; color: var(--tinta); opacity: 0.09; transition: opacity 420ms linear; } /* El texto manda en la carta: arranca pegado arriba y cuelga de ahí, que es como se lee un naipe. */ .bm-abanico--foco .bm-hoja > .bm-card__texto { position: relative; z-index: 1; margin: 0; font-family: var(--fuente-titulo); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.28; letter-spacing: -0.015em; color: var(--tinta); } @media (hover: hover) and (pointer: fine) { .bm-abanico--foco .bm-hoja:hover { filter: none; opacity: 1; transform: rotate(0deg) translateY(-30px) scale(1.07); z-index: 20; border-top-color: var(--acento); box-shadow: 0 44px 70px -32px rgba(0, 0, 0, 0.55), 0 10px 26px -14px color-mix(in srgb, var(--acento) 40%, transparent); } .bm-abanico--foco .bm-hoja:hover > .bm-card__num { opacity: 0.26; } } /* Sin cursor manda el scroll, con el mismo motor del resto del sitio. */ @media (hover: none) { .bm-abanico--foco .bm-hoja.is-saltando { transform: rotate(0deg) translateY(-18px) scale(1.04); z-index: 20; border-top-color: var(--acento); } .bm-abanico--foco .bm-hoja.is-saltando > .bm-card__num { opacity: 0.26; } } /* En un teléfono una fila de seis naipes deja cada uno a 50px. Se apilan, y ahí el solape y el arco estorban: dos cartas giradas una debajo de otra se ven torcidas, no en abanico. */ @media (max-width: 820px) { .bm-abanico--foco { flex-direction: column; align-items: stretch; padding: 12px 0; gap: 0.9rem; } .bm-abanico--foco .bm-hoja { aspect-ratio: auto; min-height: 128px; margin-left: 0; transform: none; text-align: left; } .bm-abanico--foco .bm-hoja.is-saltando { transform: translateY(-6px) scale(1.02); } .bm-abanico--foco .bm-hoja > .bm-card__num { font-size: 66px; left: auto; right: 16px; } } @media (prefers-reduced-motion: reduce) { .bm-abanico--foco .bm-hoja { transform: none; } } /* ── El enlace de cada servicio pasa a ser botón ────────────── Isaac: «los CTA de cada servicio hazlos más vistosos, conviértelos en botón con efecto imán y cambio de color cuando el cursor esté encima». Era un enlace de texto con un filete que crecía — la misma pista discreta que usan las pólizas. Discreta está bien para una pista dentro de una tarjeta; para la puerta que lleva a la página del servicio, no: es LA acción de esa franja y competía en peso con el «no incluye» de al lado. El imán lo pone `bm-imanta` en el marcado, que es el mismo mecanismo de todos los botones del sitio. Aquí sólo se le da cuerpo. */ .bm-franja__mas { position: relative; overflow: hidden; /* recorta el destello a la píldora */ display: inline-flex; align-items: center; margin-top: 1.25rem; padding: 0.72rem 1.35rem; min-height: 42px; border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--linea)); border-radius: 100px; background: color-mix(in srgb, var(--acento) 10%, transparent); font-family: var(--fuente-titulo); font-size: 0.9rem; font-weight: 600; color: var(--acento); transition: background-color var(--tr-media), border-color var(--tr-media), color var(--tr-media), box-shadow var(--tr-media); } /* 🚨 EL DESTELLO SÓLO EXISTE EN REPOSO, Y ÉSA ES LA IDEA ENTERA. Isaac, 4/sep/2026: «un efecto reflectivo cuando el botón esté desactivado, y desactívalo cuando cambie de color, sólo para llamar la atención». Y está bien pensado, porque son dos trabajos distintos: · EN REPOSO el botón compite con el texto de la franja por que alguien repare en él. El barrido de luz es lo que dice «esto se puede pulsar» sin gritar — un botón quieto en una página de texto se lee como parte del texto. · YA SEÑALADO no hay nada que llamar: el cursor ya está encima. El destello ahí pasa de invitación a ruido, y encima competiría con la inversión de color, que es el acuse de recibo de verdad. EL RITMO ES LO QUE LO SALVA DE SER UN ANUNCIO: el ciclo dura 4.2s y el barrido ocupa el primer 22%. O sea, algo menos de un segundo de brillo y más de tres de calma. Un destello continuo cansa a los diez segundos y se acaba ignorando, que es justo lo contrario de lo que se busca. Va en `transform` y `opacity`, lo único gratis por fotograma. */ .bm-franja__mas::after { content: ''; position: absolute; top: -60%; left: 0; width: 34%; height: 220%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acento) 42%, transparent), transparent); transform: translateX(-140%) skewX(-18deg); animation: bm-destello 4.2s ease-in-out infinite; } @keyframes bm-destello { 0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; } 4% { opacity: 0.95; } 18% { opacity: 0.95; } 22%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } } /* El cambio de color que pide: se invierte, el acento pasa de tinta a fondo. Y con él se apaga el destello. */ .bm-franja__mas:hover, .bm-franja__mas:focus-visible { background: var(--acento); border-color: var(--acento); color: var(--papel); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--acento) 70%, transparent); } .bm-franja__mas:hover::after, .bm-franja__mas:focus-visible::after { animation: none; opacity: 0; } /* Con movimiento reducido el botón se queda quieto. Sigue siendo un botón: el borde, el fondo tenue y el color de marca ya dicen que se pulsa; el destello era el extra, no el mensaje. */ @media (prefers-reduced-motion: reduce) { .bm-franja__mas::after { animation: none; opacity: 0; } } /* ── LAS TARJETAS DE /casos/ GIRAN ──────────────────────────── Isaac, 4/sep/2026: «quiero que den vuelta; en la card inactiva el icono en gris, pasamos el cursor, dan vuelta, se ilumina como ahorita y el icono pasa a la esquina superior derecha. Hazlas cuadradas para que se adapten bien los iconos». 🚨 LAS CARAS NO SON `.bm-card`, Y ESO NO ES UN DETALLE. Es la lección que costó tres intentos en las pólizas: un componente genérico metido dentro de un `transform-style: preserve-3d` arrastra TODO lo que le cuelga —su `:hover` con transform propio, su pseudoelemento promovido y el `brillo()` que lo persigue con un `mouseover` delegado— y el resultado es una tarjeta que parpadea. Aquí las caras son piezas propias que copian el aspecto de tarjeta sin heredar su comportamiento. ⚠ Y AQUÍ HAY ENLACES DETRÁS, que en las pólizas no había. Por eso no se puede apagar el puntero en las dos caras y ya: se apaga en las dos POR DEFECTO —así ninguna caza el cursor— y se enciende sólo en el reverso cuando la tarjeta está activa, que es cuando de verdad se puede pulsar. ⚠ ESTO ESCONDE CONTENIDO DETRÁS DE UN GESTO, y la regla del catálogo dice que eso hay que compensarlo. Se hace con dos cosas: la cara de delante lleva «Ver el caso» con su flecha, así que se sabe que hay algo detrás; y en táctil se voltea sola al cruzar la banda del scroll, con el observador que ya existe. La portada NO cambia: allá las tarjetas de caso son el resumen y siguen con el logotipo que se recoge. Aquí es la página del portafolio y la tarjeta se puede permitir dos caras. Misma lógica que los hero: el resumen y la página no tienen por qué dibujarse igual. */ .bm-caso--gira { position: relative; aspect-ratio: 1; /* cuadradas, para que el icono respire */ perspective: 1600px; display: grid; border: 0; background: none; padding: 0; overflow: visible; } .bm-caso__giro { display: grid; transform-style: preserve-3d; transition: transform 640ms cubic-bezier(0.4, 0.15, 0.2, 1); } /* La cara copia el aspecto de tarjeta a mano: vidrio, filete y radio. Sin `.bm-card`, que es justo el punto. */ .bm-caso__cara { grid-area: 1 / 1; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.4rem 1.35rem; border: 1px solid var(--vidrio-borde); border-top: 2px solid var(--tinta); border-radius: var(--radio-vidrio); background: var(--vidrio); box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo); -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur); backface-visibility: hidden; pointer-events: none; /* ninguna caza el cursor: manda el artículo */ /* La sombra NO va en la transicion: repintarla en cada fotograma del giro era una de las tres causas del tiron. Entra de golpe, en la mitad del giro en que esta cara ni se ve. */ transition: opacity 0s linear 300ms, border-top-color var(--tr-media); } .bm-caso__cara--tras { transform: rotateX(180deg); opacity: 0; } /* ── El giro ── */ .bm-caso--gira:hover .bm-caso__giro, .bm-caso--gira:focus-within .bm-caso__giro { transform: rotateX(180deg); } .bm-caso--gira:hover .bm-caso__cara--frente, .bm-caso--gira:focus-within .bm-caso__cara--frente { opacity: 0; } .bm-caso--gira:hover .bm-caso__cara--tras, .bm-caso--gira:focus-within .bm-caso__cara--tras { opacity: 1; pointer-events: auto; } /* 🚨 `is-saltando` SOLO EN TACTIL, y esta guarda no es opcional. `mascotas()` pone esa clase SIEMPRE, en todos los aparatos —está escrito en su comentario: la clase se pone y quien decide si se ve es el CSS—. Sin encerrarla en `@media (hover: none)`, en escritorio las tarjetas que cruzan el centro de la pantalla se voltean solas mientras ruedas, y encima pelean con el `:hover`. Se vio en la primera captura: tres tarjetas del revés sin que nadie las tocara. */ @media (hover: none) { .bm-caso--gira.is-saltando .bm-caso__giro { transform: rotateX(180deg); } .bm-caso--gira.is-saltando .bm-caso__cara--frente { opacity: 0; } .bm-caso--gira.is-saltando .bm-caso__cara--tras { opacity: 1; pointer-events: auto; border-top-color: var(--marca); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 30%, transparent), 0 18px 44px -22px color-mix(in srgb, var(--marca) 60%, transparent), inset 0 0 54px -12px color-mix(in srgb, var(--marca) 34%, transparent); } } /* El neón del color del cliente, sólo en la cara que se ve. */ .bm-caso--gira:hover .bm-caso__cara--tras, .bm-caso--gira:focus-within .bm-caso__cara--tras { border-top-color: var(--marca); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 30%, transparent), 0 18px 44px -22px color-mix(in srgb, var(--marca) 60%, transparent), inset 0 0 54px -12px color-mix(in srgb, var(--marca) 34%, transparent); } /* ── El icono ── */ /* Delante: grande, centrado y EN GRIS. El gris es lo que hace que encenderse signifique algo — una marca que ya está a todo color no puede iluminarse. */ .bm-caso--gira .bm-caso__cara--frente .bm-caso__logo { position: absolute; inset: 0; margin: auto; width: 58%; height: 58%; background-repeat: no-repeat; background-position: center; background-size: contain; filter: grayscale(1); opacity: 0.42; pointer-events: none; transition: opacity var(--tr-media), filter var(--tr-media); } /* Detrás: pequeño, en la esquina superior derecha —el hueco que señaló Isaac— y a todo color. */ .bm-caso--gira .bm-caso__cara--tras .bm-caso__logo { position: absolute; top: 1.1rem; right: 1.15rem; width: 44px; height: 44px; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } /* Los dos monocromos van de máscara y no de imagen, así que el gris no se consigue con `grayscale` sino con el color del relleno. */ .bm-caso--gira.bm-caso--gorillax .bm-caso__cara--frente .bm-caso__logo, .bm-caso--gira.bm-caso--veta-fina .bm-caso__cara--frente .bm-caso__logo { background-color: var(--tinta-suave); } /* ── La cara de delante ── */ .bm-caso__cara--frente { justify-content: flex-end; text-align: left; } .bm-caso__cara--frente .bm-caso__rubro { position: relative; z-index: 1; } .bm-caso__cara--frente .bm-h3 { position: relative; z-index: 1; margin: 0.2rem 0 0; } /* La pista de que hay algo detrás. Sin ella, el reverso depende de que a alguien se le ocurra pasar por encima. */ .bm-caso__pista { position: relative; z-index: 1; margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--fuente-titulo); font-size: 0.82rem; font-weight: 600; color: var(--acento); } .bm-caso__pista::after { content: ''; width: 14px; height: 2px; background: currentColor; transition: width var(--tr-media); } .bm-caso--gira:hover .bm-caso__pista::after { width: 22px; } /* ── La cara de atrás ── */ .bm-caso__cara--tras { padding-right: 4.2rem; } /* sitio para el icono */ .bm-caso__cara--tras .bm-card__texto { margin: 0 0 auto; } .bm-caso__cara--tras .bm-caso__tags { margin: 0.9rem 0 0.6rem; } .bm-caso__cara--tras .bm-caso__enlace { position: relative; z-index: 1; } /* La tarjeta de cierre no gira: no tiene marca ni reverso que enseñar. */ .bm-caso--mas { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; } @media (prefers-reduced-motion: reduce) { .bm-caso__giro { transform: none !important; transition: none; } .bm-caso__cara--frente { opacity: 1 !important; } .bm-caso__cara--tras { transform: none; opacity: 1 !important; grid-area: auto; margin-top: 0.9rem; pointer-events: auto; } .bm-caso--gira { aspect-ratio: auto; } .bm-caso__pista { display: none; } } /* ── La nota que sigue a una fila de tarjetas ─────────── Isaac lo pidió en `/nosotros/` y en `/bimm-app/` con las mismas palabras: «separa este texto de las 2 cards que están arriba». Y las dos veces es el mismo fallo: una nota pegada al canto inferior de una fila de tarjetas se lee como si perteneciera a la última. No es un problema de aire —añadir margen y ya deja la duda—, es de PERTENENCIA: hace falta algo que diga «esto ya no es de esas tarjetas, es de la sección entera». Por eso van las dos cosas: aire de sobra y un filete que cruza todo el ancho. El filete es el que hace el trabajo; el aire sólo lo deja respirar. */ .bm-grid-2 + .bm-nota, .bm-grid-3 + .bm-nota, .bm-niveles + .bm-nota { margin-top: clamp(1.9rem, 4vw, 2.9rem); padding-top: clamp(1.1rem, 2.2vw, 1.6rem); border-top: 1px solid var(--linea); } /* ── LOS TRES, JUNTO AL PRINCIPIO QUE EXPLICAN ─────────── Isaac, 4/sep/2026: una imagen de las mascotas en `/nosotros/`, vertical en escritorio porque la sección es vertical, y horizontal en móvil. 🚨 SON TRES ARCHIVOS Y NO DOS IMÁGENES COMPUESTAS, y esa decisión es la que hace que funcione. Un render «vertical» y otro «horizontal» serían dos generaciones que hay que rehacer enteras cada vez que cambie algo, y además el generador ya demostró que con tres personajes en un mismo prompt se inventa uno —salió una gota de agua en vez de Mundi—. Con tres recortes sueltos, la disposición la decide el CSS: columna a la derecha del texto en escritorio, fila encima en teléfono. Dos maquetas, cero imágenes de más. ⚠ LOS TRES VIENEN NORMALIZADOS A LA MISMA ALTURA —560px— y por eso aquí se fija `height` y NO `width`: si se fijara el ancho, Mundi —que va con el brazo estirado y mide 555 de ancho— saldría enano al lado de Flama, que mide 305. Con la altura compartida los tres quedan a la misma escala y de pie sobre la misma línea. Y Mundi va ARRIBA señalando: su brazo apunta a la izquierda, o sea hacia el texto. Ponerlo abajo o darle la vuelta lo dejaría señalando al vacío. */ .bm-cont--conTrio { display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 290px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .bm-trio { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.2rem); } .bm-trio__uno { width: auto; height: clamp(112px, 13vw, 168px); /* Respiran desfasados: los tres a la vez sería un logotipo latiendo. */ animation: bm-flota 6.5s ease-in-out infinite; } /* Mundi abre el ciclo. Se escribe aunque sea el valor por omision: los tres desfases juntos se leen de un vistazo, y uno ausente parece un olvido. */ .bm-trio__uno--mundi { animation-delay: 0s; } .bm-trio__uno--flama { animation-delay: -2.2s; } .bm-trio__uno--pixel { animation-delay: -4.4s; } /* En teléfono pasan arriba y en fila, apoyados en la misma línea. */ @media (max-width: 820px) { .bm-cont--conTrio { grid-template-columns: 1fr; } .bm-trio { order: -1; flex-direction: row; align-items: flex-end; justify-content: center; gap: clamp(0.5rem, 3vw, 1.1rem); margin-bottom: 0.5rem; } .bm-trio__uno { height: clamp(92px, 26vw, 128px); } } @media (prefers-reduced-motion: reduce) { .bm-trio__uno { animation: none; } } /* ── LA CUENTA ATRÁS DEL HERO ───────────────────────────────── Isaac: «en el hero pon el contador, para meter algo de diseño especial». 🚨 Y ES EL ÚNICO DATO DE ESA PÁGINA QUE CAMBIA SOLO. Todo lo demás en `/bimm-app/` describe algo que todavía no se puede usar; el contador es lo único que se mueve, y por eso es lo que convierte «abre el 15 de septiembre» de una frase en una promesa con fecha encima. ⚠ SE CAE CON GRACIA CUANDO LLEGUE EL DÍA. Un contador en negativo el 16 de septiembre sería peor que no haberlo puesto: el JS lo cambia por «Ya está abierta» y esta hoja no tiene que saber nada de eso. */ .bm-cuenta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; list-style: none; } .bm-cuenta__caja { min-width: 82px; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--vidrio); text-align: center; } .bm-cuenta__n { display: block; font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--acento); font-variant-numeric: tabular-nums; } .bm-cuenta__q { display: block; margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); } /* Cuando ya abrió, las tres cajas se sustituyen por una sola frase. */ .bm-cuenta--abierta { display: block; } .bm-cuenta__abierta { font-family: var(--fuente-titulo); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--acento); } /* ── EL CARRUSEL DE MOCKUPS ─────────────────────────────────── Isaac: «mete los mockups de la app que están en la landing, como carrusel con flechas; en móvil ponlas abajo y que vayan cambiando con el scroll». 🚨 LOS MOCKUPS NO ERAN IMÁGENES QUE COPIAR. En la landing están construidos en código —seis `mockup-card` repartidas en 816 líneas de React— así que aquí se rehacen en marcado plano con el MISMO contenido: los mismos números, los mismos rótulos y el mismo orden. Se eligieron TRES y no seis, y no por ahorrar: son exactamente las tres cosas que la sección «Qué vas a ver» ya promete —métricas por servicio, avance del proyecto y el panel que los reúne—. Un carrusel de seis obligaría a pasar tres veces por delante de cosas que la página no ha prometido. ⚠ EN MÓVIL NO HAY CARRUSEL, Y ES A PROPÓSITO. Las flechas piden un blanco de 44px que en un teléfono compite con el scroll de la página, y un carrusel horizontal dentro de una página que se recorre en vertical se traga los gestos. Ahí los tres se apilan debajo del texto y se encienden al cruzar la banda central, con el MISMO observador que ya usa el resto del sitio. Es lo que Isaac pide —que cambien con el scroll— con el mecanismo que ya existe en vez de uno nuevo. */ .bm-mock { position: relative; margin-top: clamp(1.75rem, 4vw, 2.5rem); } .bm-mock__vista { overflow: hidden; border-radius: 12px; } .bm-mock__tira { display: flex; transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1); transform: translateX(calc(var(--i, 0) * -100%)); } .bm-mock__hoja { flex: 0 0 100%; min-width: 0; } /* La ventana: cabecera con sus tres puntos y cuerpo. Es el lenguaje de la landing, y se conserva para que quien venga de allá lo reconozca. */ .bm-vent { border: 1px solid var(--vidrio-borde); border-radius: 12px; background: color-mix(in srgb, var(--papel) 82%, #000); overflow: hidden; } .bm-vent__barra { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linea); background: color-mix(in srgb, var(--papel) 70%, #000); } .bm-vent__puntos { display: flex; gap: 0.35rem; } .bm-vent__punto { width: 9px; height: 9px; border-radius: 50%; } .bm-vent__punto--rojo { background: #FD4A42; } .bm-vent__punto--ambar { background: #FED18D; } .bm-vent__punto--verde { background: #5BF3DC; } .bm-vent__titulo { font-size: 0.72rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-vent__cuerpo { padding: 1.1rem 1.25rem; } /* Saludo */ .bm-vent__saludo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.75rem; } .bm-vent__quien { font-family: var(--fuente-titulo); font-size: 1rem; color: var(--tinta); } .bm-vent__mini { font-size: 0.7rem; color: var(--tinta-suave); } .bm-vent__pastilla { font-size: 0.65rem; color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent); padding: 3px 10px; border-radius: 100px; white-space: nowrap; } /* Fichas de métrica */ .bm-vent__fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .bm-vent__ficha { background: color-mix(in srgb, #000 30%, transparent); border: 1px solid var(--linea); border-radius: 10px; padding: 0.7rem 0.6rem; } .bm-vent__cifra { font-family: var(--fuente-titulo); font-size: 1.3rem; line-height: 1; color: var(--acento); font-variant-numeric: tabular-nums; } .bm-vent__ficha--ambar .bm-vent__cifra { color: #FED18D; } .bm-vent__ficha--verde .bm-vent__cifra { color: #22C55E; } .bm-vent__eti { font-size: 0.63rem; color: var(--tinta-suave); margin: 4px 0 3px; line-height: 1.3; } .bm-vent__delta { font-size: 0.6rem; color: #22C55E; } /* Lista de servicios / métricas */ .bm-vent__caja { background: color-mix(in srgb, #000 20%, transparent); border-radius: 10px; padding: 0.9rem 0.75rem 0.6rem; } .bm-vent__cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.65rem; } .bm-vent__cabeza span:first-child { font-size: 0.72rem; color: var(--tinta-suave); } .bm-vent__cabeza span:last-child { font-size: 0.6rem; color: var(--acento); } .bm-vent__fila { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linea); } .bm-vent__fila:last-child { border-bottom: 0; } /* Los tres colores van en clase y no en un `style=` del marcado: el comprobador rechaza colores literales ahi, y con razon — un hex suelto en el bloque es un color que el tema no puede cambiar. */ .bm-vent__punto2 { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .bm-vent__punto2--menta { background: #52F5DC; } .bm-vent__punto2--ambar { background: #FED18D; } .bm-vent__punto2--verde { background: #22C55E; } /* Son `span` dentro de un `span`: sin esto salen en la misma linea. */ .bm-vent__mini, .bm-vent__quien, .bm-vent__nombre, .bm-vent__detalle { display: block; } .bm-vent__nombre { font-size: 0.75rem; color: var(--tinta); } .bm-vent__detalle { font-size: 0.6rem; color: var(--tinta-suave); margin-top: 2px; } /* Avance */ .bm-vent__avance { background: color-mix(in srgb, #000 28%, transparent); border-radius: 11px; padding: 0.85rem 1rem; margin-bottom: 1rem; } .bm-vent__avanceFila { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem; } .bm-vent__avanceFila span:first-child { font-size: 0.72rem; color: var(--tinta-suave); } .bm-vent__pct { font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--acento); } .bm-vent__riel { height: 5px; border-radius: 100px; background: var(--linea); overflow: hidden; } .bm-vent__lleno { height: 100%; width: 68%; border-radius: 100px; background: linear-gradient(90deg, #FBEFB7, #FF3D3E 34%, #52F5DC 68%, #07ABAA); } /* ── Las flechas ── */ .bm-mock__mandos { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; } .bm-mock__flecha { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--acento) 40%, var(--linea)); border-radius: 50%; background: color-mix(in srgb, var(--acento) 8%, transparent); color: var(--acento); cursor: pointer; transition: background-color var(--tr-media), color var(--tr-media), border-color var(--tr-media); } .bm-mock__flecha:hover { background: var(--acento); color: var(--papel); border-color: var(--acento); } .bm-mock__flecha svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bm-mock__cual { margin-left: auto; font-size: 0.78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } /* ── En móvil: apilados y encendiéndose con el scroll ── */ @media (max-width: 820px) { .bm-mock__vista { overflow: visible; } .bm-mock__tira { flex-direction: column; gap: 1rem; transform: none !important; transition: none; } .bm-mock__hoja { flex: 1 1 auto; opacity: 0.55; transform: scale(0.97); transition: opacity var(--tr-lenta), transform var(--tr-lenta); } .bm-mock__hoja.is-saltando { opacity: 1; transform: scale(1); } .bm-mock__mandos { display: none; } /* no hay carrusel que mandar */ } @media (prefers-reduced-motion: reduce) { .bm-mock__tira { transition: none; } .bm-mock__hoja { opacity: 1; transform: none; } } /* ── EL CONTADOR, EN VIDRIO LÍQUIDO Y A LA DERECHA ──────────── Isaac, 4/sep/2026: «el contador ponlo a la derecha con un diseño liquid glass; deja los números que estaban». 🚨 OCUPA LA COLUMNA QUE EN LAS PÁGINAS DE SERVICIO LLEVA LA ILUSTRACIÓN, y por eso encaja sin tocar el hero: `.bm-cabecera2__caja` ya es una retícula de dos columnas —texto y `auto`— y en `/bimm-app/` la segunda estaba vacía porque esta página no tiene monigote. El contador la llena, y de paso la ficha vuelve a su sitio a la izquierda. EL VIDRIO LÍQUIDO SON CUATRO CAPAS, y ninguna sobra: · El desenfoque de fondo con `saturate`, que es lo que hace que lo que queda detrás se vea *a través* y no simplemente tapado. · Un degradado propio de arriba a abajo, más claro arriba: sin él el panel se ve plano y parece un rectángulo con blur. · El filo interior de luz en el borde superior (`inset 0 1px 0`), que es el canto del cristal. Es el detalle que más trabaja de los cuatro. · Y un reflejo diagonal en `::before` que cruza la esquina de arriba. Va con `opacity` baja y quieto: un reflejo que se mueve se convierte en un destello, y aquí lo que llama la atención tiene que ser el número. ⚠ El desenfoque se degrada solo: sin `backdrop-filter` el panel se queda con su degradado y su borde, que ya se sostienen. Nada depende del blur. */ .bm-cuenta--vidrio { position: relative; overflow: hidden; align-self: center; justify-self: end; min-width: clamp(200px, 24vw, 260px); padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--vidrio-borde); border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--tinta) 10%, transparent) 0%, color-mix(in srgb, var(--tinta) 4%, transparent) 46%, transparent 100%), var(--vidrio); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--vidrio-brillo), inset 0 -1px 0 color-mix(in srgb, var(--tinta) 6%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } .bm-cuenta__rotulo { position: relative; z-index: 1; margin: 0 0 0.9rem; font-family: var(--fuente-titulo); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); } .bm-cuenta__cajas { position: relative; z-index: 1; /* Tres columnas iguales y no `flex-wrap`: envolviendo, «minutos» caia a una segunda fila el solo y el panel se veia descuadrado. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin: 0; padding: 0; list-style: none; } /* Dentro del panel las cajas ya no llevan cristal propio: dos vidrios uno dentro de otro se anulan y el conjunto se ve sucio. Aquí basta un filete. */ .bm-cuenta--vidrio .bm-cuenta__caja { min-width: 0; flex: 1 1 62px; padding: 0.55rem 0.35rem; border: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--tinta) 4%, transparent); backdrop-filter: none; } .bm-cuenta--vidrio .bm-cuenta__n { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .bm-cuenta--vidrio .bm-cuenta__q { font-size: 0.62rem; letter-spacing: 0.08em; } .bm-cuenta--vidrio.bm-cuenta--abierta .bm-cuenta__cajas { display: block; } @media (max-width: 820px) { .bm-cuenta--vidrio { justify-self: stretch; min-width: 0; margin-top: 1.5rem; } } /* ── Los mockups, al lado del texto que los explica ─────────── Isaac: «en escritorio a la derecha de la sección Por qué existe, y en móvil debajo». Y tiene razón de sobra: la sección explica POR QUÉ un servicio mensual no se ve, y los mockups son la respuesta. Uno debajo del otro obligaba a leer el argumento, rodar, y reconstruir de memoria de qué hablaba. Al lado, el argumento y su prueba se leen a la vez. En móvil van debajo sin más: es el orden del marcado, así que no hace falta ni un `order`. Y ahí el carrusel se apila y cambia con el scroll, que es lo que ya hacía. */ .bm-cont--conMock { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 40vw, 520px); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; } .bm-cont--conMock .bm-franja { display: block; } .bm-cont--conMock .bm-mock { margin-top: 0; } @media (max-width: 900px) { .bm-cont--conMock { grid-template-columns: 1fr; } .bm-cont--conMock .bm-mock { margin-top: clamp(1.5rem, 4vw, 2.25rem); } } /* ── Y las ventanas, con los valores REALES de la landing ───── 🚨 Estaban aproximados. Isaac: «te pedí extraerlos de la landing». Estos son los de `.mockup-card`, `.mockup-header` y `.mockup-title-bar` de `bimm-st/src/app/globals.css`, copiados uno a uno: · cabecera con fondo `rgba(0,0,0,.3)` y filete inferior al 5% · borde de la tarjeta al 7%, no el borde de vidrio del sitio · el rótulo en VERSALITAS con `letter-spacing: .05em` — esto era lo que más se notaba: el mío iba en caja baja y se leía como otro componente · al posarse, la tarjeta sube 6px y el borde se pone turquesa Lo único que NO se trae es el foco que sigue al cursor (`::before` con `--mx/--my`): en la landing lo alimenta un `onMouseMove` de React, y aquí significaría un tercer motor de puntero para un adorno. */ .bm-vent { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; transition: transform var(--tr-media), border-color var(--tr-media), box-shadow var(--tr-media); } .bm-vent:hover { transform: translateY(-6px); border-color: rgba(82, 245, 220, 0.25); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .bm-vent__barra { padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .bm-vent__titulo { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; } .bm-vent__cuerpo { padding: 1rem; } /* El tema claro necesita su propio borde: el 7% de blanco sobre papel no se ve, y la ventana quedaría flotando sin contorno. */ [data-tema='claro'] .bm-vent { border-color: var(--linea-fuerte); } [data-tema='claro'] .bm-vent__barra { background: color-mix(in srgb, var(--tinta) 5%, transparent); } /* ── CASOS, SEGUNDA VUELTA ──────────────────────────── Isaac, 4/sep/2026: «la vista inactiva sin texto, sólo el logo en gris; al activarse se muestra el nombre... y la animación la siento trabada». 🚨 LO TRABADO ERA EL `backdrop-filter` GIRANDO EN 3D. Las dos caras heredaban el vidrio del sitio, y un `backdrop-filter` obliga al compositor a volver a muestrear TODO lo que hay detrás en cada fotograma —y con la tarjeta rotando, el «detrás» cambia de ángulo 60 veces por segundo, sobre dos capas a la vez—. Es de lo más caro que se puede pedir. Fuera el desenfoque en las caras: se sustituye por un fondo sólido que a simple vista es el mismo, porque lo que hay debajo de estas tarjetas es fondo de sección, no contenido. Las otras dos causas, menores pero del mismo tipo: · La sombra de neón se ANIMABA durante el giro. Una `box-shadow` en transición se repinta entera cada fotograma. Ahora entra de golpe, y no se nota: cae en la mitad del giro en que esa cara ni se ve. · `will-change: transform` en el giro promueve la capa UNA vez, en vez de que el navegador lo decida a mitad de camino —que es cuando da el tirón—. ⚠ Y LA CARA DE REPOSO SE QUEDA SIN UNA SOLA PALABRA. Lo pidió Isaac y se hace, pero queda escrito que es una apuesta: sin texto, lo único que invita a señalar la tarjeta es el logotipo en gris. En táctil no hay problema —se voltean solas al cruzar la banda del scroll— y en escritorio el gris pide color, que es una invitación real. Si alguna vez se ve que nadie las activa, la primera sospecha es ésta. */ .bm-caso__cara { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--papel) 88%, var(--tinta)); transition: opacity 0s linear 300ms; } [data-tema='claro'] .bm-caso__cara { background: color-mix(in srgb, var(--papel) 96%, var(--tinta)); } .bm-caso__giro { will-change: transform; } /* La cara de reposo: el logotipo centrado y nada más. Sin texto, el logotipo puede crecer y respirar —que es lo que se viene a reconocer—. */ .bm-caso--gira .bm-caso__cara--frente { justify-content: center; } .bm-caso--gira .bm-caso__cara--frente .bm-caso__logo { width: 64%; height: 64%; opacity: 0.5; } /* El reverso: el nombre manda, y el logotipo pequeño no le estorba. */ .bm-caso__cara--tras .bm-caso__rubro { margin-bottom: 0.15rem; } .bm-caso__cara--tras .bm-h3 { margin: 0 0 0.5rem; } .bm-caso__cara--tras .bm-card__texto { margin: 0 0 auto; font-size: 0.92rem; } /* ── 🚨 EL RETRACTO DE LA PORTADA ALCANZABA AL ICONO DEL REVERSO ── Isaac, 4/sep/2026: «el icono pequeño tiene que estar en la card cuando está activa». Y no estaba, aunque en el marcado sí. La culpa era de esto: .bm-caso:hover .bm-caso__logo { transform: ... scale(calc(40 / 150)); } Es la regla del gesto de la PORTADA —el logotipo grande de marca de agua que se recoge a la esquina al señalar la tarjeta—. Es un selector de DESCENDENCIA, así que en `/casos/` alcanzaba también al icono pequeño del reverso y, al activar la tarjeta, lo encogía al **27%** y lo desplazaba. En la página se veía como que el icono desaparecía. ⚠ Y NO SE VIO EN LAS PRUEBAS porque las capturas forzaban el estado volteado por CSS, sin cursor: sin `:hover` la regla no se dispara. La leccion es de metodo, no de codigo — **un estado que se activa con el cursor hay que probarlo con el cursor, o probarlo con las mismas reglas que lo activan**. Van las dos cosas: el retracto se anula dentro de las que giran, y el icono del reverso se blinda con su tamaño y su sitio. Tercera vez que una regla generica de `.bm-caso`/`.bm-card` se cuela en un componente nuevo; la defensa es siempre la misma, encadenar clases para ganar por peso. */ .bm-caso.bm-caso--gira:hover .bm-caso__logo, .bm-caso.bm-caso--gira:focus-within .bm-caso__logo, .bm-caso.bm-caso--gira.is-saltando .bm-caso__logo { transform: none; } .bm-caso.bm-caso--gira .bm-caso__cara--tras .bm-caso__logo { top: 1.1rem; right: 1.15rem; left: auto; bottom: auto; width: 46px; height: 46px; opacity: 1; filter: none; } /* ── 🚨 EL HUECO DEL REVERSO ERA UN `margin-top: auto` PRESTADO ── Isaac, 4/sep/2026: «mucho espacio entre el texto y el tipo de servicios, espacio desperdiciado que no hace armonía». La causa: .bm-caso__tags { margin-top: auto; } En la PORTADA eso es lo correcto: las tarjetas son de alto libre y el auto fija las etiquetas al fondo, para que las cinco tarjetas tengan su renglón de etiquetas a la misma altura. Pero el reverso de `/casos/` es una tarjeta CUADRADA de alto fijo, y ahí el mismo auto se come todo lo que sobra y lo deja como un vacío en medio. Va la cuarta vez que una regla de la portada se cuela en este componente. Aquí el texto, las etiquetas y los botones se leen como un bloque seguido, y el aire sobrante se reparte ARRIBA — que es donde Isaac lo pedía y además es donde no estorba: deja respirar al nombre. */ .bm-caso--gira .bm-caso__cara--tras { justify-content: flex-start; padding-top: 1.9rem; } .bm-caso--gira .bm-caso__tags { margin-top: 0; padding-top: 0.9rem; border-top: 1px solid var(--linea); } /* ── Los enlaces pasan a botones ─────────────────────── Eran texto subrayado —la pista discreta de una tarjeta que no se podía pulsar entera—. Ahora la tarjeta se voltea y ESTOS son la única acción que hay dentro: tienen que parecer pulsables desde el otro lado de la mesa. Van en fila y con el color de la marca del cliente, que es el mismo que ya enciende la tarjeta. Al posarse se rellenan: el borde pasa a fondo. */ .bm-caso__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .bm-caso--gira .bm-caso__acciones .bm-caso__enlace { align-self: auto; padding: 0.5rem 0.95rem; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--marca, var(--acento)) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--marca, var(--acento)) 55%, transparent); border-radius: 100px; background: color-mix(in srgb, var(--marca, var(--acento)) 12%, transparent); font-size: 0.82rem; font-weight: 600; color: var(--tinta); transition: background-color var(--tr-media), color var(--tr-media), border-color var(--tr-media); } .bm-caso--gira .bm-caso__acciones .bm-caso__enlace:hover, .bm-caso--gira .bm-caso__acciones .bm-caso__enlace:focus-visible { background: var(--marca, var(--acento)); border-color: var(--marca, var(--acento)); color: var(--papel); } /* ⚠ Y ERAN DOS `auto` distintos, no uno. Quitar el de `.bm-caso__tags` no bastó porque el hueco lo abría TAMBIÉN el `margin-bottom: auto` que se le había puesto al texto del reverso — y ese lo escribí yo, dos cambios antes, para empujar etiquetas y botones al fondo. Al buscar la causa me quedé con la primera que encontré y di el arreglo por hecho sin volver a mirar. La regla de oficio: cuando un hueco no se cierra después de quitar el `auto` que lo explicaba, es que hay otro. En una columna flexible cualquier margen automatico se come TODO el sobrante, y basta uno para que el resto no se note. */ .bm-caso--gira .bm-caso__cara--tras .bm-card__texto { margin: 0; } /* ── FLAMA, DE PIE SOBRE LA TARJETA DE LA COTIZACIÓN ────── Isaac la pidió haciendo la seña 🤟 en la última tarjeta de «Qué pasa después» — la de la cotización, que es el final feliz de esa secuencia. 🚨 VA FUERA DE `.bm-card`, EN UN ENVOLTORIO. La tarjeta lleva `overflow: hidden` —lo necesita para el foco del cursor— y cualquier cosa que asome por el canto se corta ahí mismo. Van CINCO veces con esta trampa: la mascota de las fases, el troquel, la mascota del formulario, las pestañas de las vías y ahora ésta. La regla, otra vez: si algo tiene que salirse de `.bm-card`, vive fuera de ella. El envoltorio es quien ocupa la celda de la retícula; la tarjeta va dentro sin tocar, y la mascota cuelga en absoluto por encima del canto superior. ⚠ `overflow: visible` en el envoltorio no basta por sí solo — también hace falta que la fila de la retícula no lo recorte, y por eso la sección lleva sitio arriba: sin ese aire, Flama se comería el titular de la sección. */ .bm-flama { position: relative; display: flex; overflow: visible; } .bm-flama > .bm-card { flex: 1 1 auto; width: 100%; } .bm-flama__img { position: absolute; right: clamp(0.5rem, 3%, 1.5rem); bottom: 100%; /* se apoya en el canto superior */ width: auto; height: clamp(86px, 11vw, 132px); /* ⚠ SE APOYA, NO SE PARA ENCIMA. Isaac: «baja mas la imagen de flama» — y antes de eso, una correccion mia: la imagen SI salio sentada, lo que pasa es que Flama no tiene torso, asi que la flexion de rodillas casi no se lee y de lejos parecia de pie. Con las caderas a la altura del canto y las piernas colgando por delante, la postura se entiende sola. El desplazamiento va en PORCENTAJE de su propia altura y no en pixeles: la imagen es fluida (`clamp`) y un numero fijo la descolocaria en cuanto cambiara el ancho de la ventana. */ /* 🚨 EL 30% NO ES A OJO: SALE DE MEDIR LA IMAGEN. Con `bottom: 100%`, el punto que queda sobre el canto de la tarjeta es el que esta al (100 - T)% de la altura. La mano que descansa —la que no hace la seña— esta al 70%, asi que T = 30% la deja apoyada justo en el borde. Con el 42% anterior sobre el canto caian los muslos y se veia hundida. Se mide con reglas sobre la imagen, no tanteando: cada tanteo son un despliegue y una captura, y la medida se saca una vez. */ transform: translateY(30%); transition: transform var(--tr-media); pointer-events: none; z-index: 1; } /* El aire que necesita para no comerse el titular de la seccion. */ .bm-despues { padding-top: clamp(56px, 7vw, 86px); } /* En un telefono las tres tarjetas se apilan y la primera queda pegada al titulo: ahi el aire sobra arriba de la fila y hace falta sobre SU tarjeta. */ @media (max-width: 620px) { .bm-despues { padding-top: 0; } .bm-flama { margin-top: clamp(48px, 15vw, 74px); } } @media (prefers-reduced-motion: reduce) { .bm-flama__img { transition: none; } } /* ── Las tres ventanas que faltaban ──────────────────── Isaac: «los mockups salen 3 y en realidad son muchas más». Son SEIS en la landing, y ahora son seis aquí. Con ellas, la sección «Qué vas a ver» pasa de tres tarjetas a seis — si no, la página prometería tres cosas y enseñaría seis, que es peor que enseñar tres. ⚠ El texto de esas seis tarjetas es el DE LA LANDING, palabra por palabra: son afirmaciones ya aprobadas sobre un producto que aún no abre, y no es sitio para escribir promesas nuevas. */ /* El calendario */ .bm-cal { margin: 0.75rem 0 0.9rem; } .bm-cal__cabeza, .bm-cal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .bm-cal__cabeza { margin-bottom: 5px; font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); text-align: center; } .bm-cal__dia { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--tinta) 7%, transparent); } .bm-cal__dia--menta { background: #52F5DC; } .bm-cal__dia--rojo { background: #FD4A42; } .bm-cal__dia--ambar { background: #FED18D; } .bm-cal__canales { display: flex; gap: 0.4rem; } .bm-cal__canal { font-size: 0.62rem; padding: 3px 10px; border-radius: 100px; border: 1px solid currentColor; } .bm-cal__canal--rojo { color: #FD4A42; } .bm-cal__canal--menta { color: #52F5DC; } /* El reporte */ .bm-vent__pie { margin: 0.75rem 0 0; font-size: 0.62rem; color: var(--tinta-suave); } /* La galeria de identidad viva */ .bm-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.75rem 0 0.9rem; } .bm-gal__pieza { aspect-ratio: 1.35; border-radius: 8px; display: flex; align-items: flex-end; padding: 0.35rem 0.45rem; font-size: 0.58rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } /* Los seis degradados de la landing, uno por pieza. Van en clase y no en un `style=` del marcado: el comprobador rechaza colores literales ahi. */ .bm-gal__pieza--rojo { background: linear-gradient(135deg, #FD4A42, #7A1F1A); } .bm-gal__pieza--menta { background: linear-gradient(135deg, #5BF3DC, #1A5A52); } .bm-gal__pieza--ambar { background: linear-gradient(135deg, #FED18D, #7A5C1F); } .bm-gal__pieza--lila { background: linear-gradient(135deg, #C9A6FF, #3A2A5A); } .bm-gal__pieza--azul { background: linear-gradient(135deg, #7CC4FF, #1F4A7A); } .bm-gal__pieza--rosa { background: linear-gradient(135deg, #FF9ECB, #7A1F4A); } .bm-vent__lleno--83 { width: 83%; } /* ── Flama se levanta con su tarjeta ─────────────────── Isaac: «la card tiene un efecto cuando pasa el cursor, mete ese efecto tambien a flama para que combine». `.bm-card:hover` sube la tarjeta 3px. Si Flama se queda quieta, al posarse el cursor la tarjeta se le va de debajo y ella flota — justo lo contrario de lo que se busca, que es que parezca sentada EN ella. Sube los mismos 3px y con la misma curva, asi que las dos se mueven como una sola pieza. ⚠ El levanton se SUMA al 30% que la coloca, no lo sustituye: `transform` no se acumula entre reglas, la ultima que gana se lleva todo. Por eso va el `calc` con las dos partes. Es el mismo tropiezo que borro el giro del reverso de las polizas, y aqui esta escrito para no repetirlo. El envoltorio no tiene fondo, y la imagen no caza el cursor (`pointer-events: none`), asi que `.bm-flama:hover` se dispara exactamente sobre la tarjeta — ni antes por el voladizo, ni despues. */ .bm-flama:hover .bm-flama__img { transform: translateY(calc(30% - 3px)); } @media (prefers-reduced-motion: reduce) { .bm-flama:hover .bm-flama__img { transform: translateY(30%); } } /* ── EL VIDRIO, SEGUNDA VUELTA ────────────────────── Isaac: «arregla el liquid glass». Dos cosas estaban mal, y las dos se ven en cuanto se mira la captura de cerca: 1. 🚨 **EL RÓTULO SALIÓ AL LADO, NO ENCIMA.** `.bm-cuenta` base es `display: flex`, así que el `
` y el `
` se pusieron en fila. El panel heredó esa fila sin que nadie lo pidiera. Se vuelve bloque. 2. 🚨 **EL REFLEJO DIAGONAL SE VEÍA COMO UN PLIEGUE.** Era una banda girada 22° con bordes DUROS: sobre un panel oscuro eso no se lee como brillo, se lee como una arruga o una mancha. Un reflejo de cristal no tiene canto — se apaga. Ahora es un halo radial suave en la esquina de arriba, sin borde ninguno, más una línea de luz de 1px pegada al filo superior, que es de donde viene la luz. La leccion: en vidrio, lo que delata a un degradado es el CANTO. Si se ve dónde empieza y dónde acaba, no parece luz. */ .bm-cuenta--vidrio { display: block; padding: 1.5rem 1.6rem 1.6rem; } .bm-cuenta--vidrio::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 90% at 18% -14%, color-mix(in srgb, var(--tinta) 15%, transparent) 0%, transparent 62%); } /* La línea de luz del filo: 1px, y sólo en la mitad de arriba. */ .bm-cuenta--vidrio::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tinta) 42%, transparent), transparent); } .bm-cuenta__rotulo { margin-bottom: 1rem; } /* Cuatro cajas: días, horas, minutos y SEGUNDOS. En el panel estrecho pasan a dos por fila, que es mejor que cuatro columnas de 40px. */ .bm-cuenta--vidrio .bm-cuenta__cajas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; } @media (max-width: 1180px) { .bm-cuenta--vidrio .bm-cuenta__cajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bm-cuenta--vidrio .bm-cuenta__caja { padding: 0.6rem 0.25rem; } .bm-cuenta--vidrio .bm-cuenta__n { font-size: clamp(1.25rem, 2.2vw, 1.7rem); } .bm-cuenta--vidrio .bm-cuenta__q { font-size: 0.56rem; letter-spacing: 0.1em; } /* Los segundos no dan saltos de ancho: cifras de ancho fijo. */ .bm-cuenta__n { font-variant-numeric: tabular-nums; } /* ── LAS FLECHAS SE VEÍAN... PORQUE MEDÍAN 0 DE ANCHO ───── Isaac: «las flechas de los mockups tampoco se ven». No era contraste: el ` —no puede vivir dentro de una sección: `contain: paint` haría de la sección el contenedor del `position: fixed`— y sólo si en la página hay secciones `.bm-cintas`. Las secciones marcadas se vuelven transparentes y pierden manchas y costuras, que es justo lo que hace que el fondo se lea como UNO: no hay orillas que fundir porque no hay cortes. LOS DOS TEMAS NO SE PINTAN IGUAL: en oscuro las cintas SUMAN luz (crema, coral, turquesa, teal); en papel son TINTA (coral, teal, acento) con la cobertura topada para que el texto no baje de 4.5:1. Las tarjetas no llevan `backdrop-filter` (ver arriba), y por eso un lienzo que se repinta cada fotograma detrás de ellas es barato. */ .bm-cintas__lienzo { position: fixed; inset: 0; width: 100%; height: 100%; /* 0 y PRIMER HIJO del : queda encima del fondo del body —que tiene que tener color propio, lo lee la barra de Safari— y debajo de todo lo que viene después, porque las secciones y la cabecera van posicionadas. Con -1 el fondo del body lo tapaba. */ z-index: 0; display: block; pointer-events: none; opacity: 0; transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1); } .bm-con-cintas .bm-cintas__lienzo.is-vivo { opacity: 1; } /* Los contenedores de GeneratePress pintan papel; con ellos opacos el lienzo no se vería. Sólo en páginas con cintas. */ .bm-con-cintas .site, .bm-con-cintas .site-content, .bm-con-cintas .content-area, .bm-con-cintas .site-main, .bm-con-cintas .inside-article, .bm-con-cintas .entry-content { background: transparent; } html .bm-sec.bm-cintas { background: transparent; } /* ── El cierre se ENCIENDE, y va en una tarjeta ────────────── Como «LA REGLA DE LA CASA» de la prueba: al llegar al cierre el fondo entero cambia —en oscuro se ilumina de naranja rojizo, en papel se hace NEGRO— y el cierre va en una tarjeta CLARA encima. La tarjeta es clara en los dos temas a propósito: es lo único claro sobre un fondo encendido u oscuro, y por eso es lo que se mira. No hace falta marcado nuevo: todas las páginas cierran con la misma `.bm-cierre__caja`, y es ella la que se vuelve tarjeta. Sus colores son FIJOS (los del papel) y no los del tema, porque la tarjeta no cambia de tema: si heredara `--tinta` del oscuro, quedaría texto blanco sobre crema. */ /* El cierre ocupa la pantalla entera, con la tarjeta al centro: cuando se llega a él no asoman ni el final de la sección anterior ni el pie («que aparezca él solo», Isaac). `grid` y no `flex`: con flex `.bm-cont` deja de respetar su ancho (ver la nota de la 404). `svh` para que en el móvil no cuente la barra del navegador. */ .bm-cierre.bm-cintas { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; } .bm-cierre.bm-cintas .bm-cierre__caja { --papel: #ffffff; --tinta: #12201f; --tinta-suave: #556867; --linea: #dde4e3; --linea-fuerte: #b9c9c7; --acento: #057b7a; max-width: 760px; padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem); border-radius: var(--radio-vidrio); background: rgba(250, 248, 243, 0.94); color: var(--tinta); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .bm-cierre.bm-cintas .bm-cierre__caja .bm-h2, .bm-cierre.bm-cintas .bm-cierre__texto { margin-inline: auto; } .bm-cierre.bm-cintas .bm-cierre__acciones { justify-content: center; } /* ========================================================================== REDISEÑO 7/OCT/2026, SEGUNDA VERSIÓN — SÓLO DISEÑO, NO EXPERIENCIA. La primera versión cambió cómo se usa (carruseles para deslizar, cintas apagadas en móvil, acordeón quieto, Bimm App sin foco) y a Isaac no le gustó: «en ningún momento te dije que acomodaras la experiencia, sólo el diseño». Todo eso se REVIRTIÓ: el sitio se recorre y se anima igual que antes. Lo que cambia es cómo se VE, con Petroleum de referencia: · Cintas: siguen en TODOS los tamaños, algo más quietas (saturaban). · Móvil: menos aire muerto entre secciones; cabeceras de sección centradas y más grandes; tarjetas con el título grande y centrado y el número enorme de fondo, como las cartas de Petroleum. · «Por mes»: baraja como «Cómo trabaja la Unidad de Inspección». ========================================================================== */ /* Cintas más quietas, en todos los tamaños. */ .bm-con-cintas .bm-cintas__lienzo.is-vivo { opacity: .7; filter: saturate(.8); } /* «Por mes», en baraja. Tres cartas de naipe: emblema abajo a la derecha (como el número grande de las cartas de Petroleum), folio abajo a la izquierda. */ .bm-abanico--polizas { align-items: stretch; } .bm-abanico--polizas .bm-carta { display: flex; flex-direction: column; gap: .7rem; min-height: 330px; padding: 1.75rem 3.25rem 4.5rem 1.6rem; color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; } .bm-abanico--polizas .bm-carta:last-child { padding-right: 1.6rem; } .bm-abanico--polizas .bm-carta .bm-h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); letter-spacing: -.02em; } .bm-carta__emblema { position: absolute; right: -14px; bottom: -14px; z-index: -1; width: 132px; height: 132px; object-fit: contain; opacity: .5; transition: opacity var(--tr-media), transform var(--tr-lenta); } .bm-abanico--polizas .bm-carta .bm-serv__mas { margin-top: auto; opacity: 1; } @media (hover: hover) and (pointer: fine) { .bm-abanico--polizas .bm-carta:hover { transform: rotate(0deg) translateY(-26px) scale(1.06); z-index: 10; border-top-color: var(--acento); box-shadow: 0 44px 70px -32px rgba(0, 0, 0, .45); } .bm-abanico--polizas .bm-carta:hover .bm-carta__emblema { opacity: .9; transform: scale(1.06) rotate(-4deg); } } @media (max-width: 760px) { /* ── Aire: de ~128px muertos entre secciones a ~88px. */ .bm-sec { padding-top: 2.75rem; padding-bottom: 2.75rem; } .bm-sub { margin: 2rem 0 1rem; } /* ── El hero, centrado entero (antes sólo se centraba el párrafo y el titular y los botones quedaban a la izquierda: se veía chueco). */ .bm-hero .bm-cont { text-align: center; } .bm-hero .bm-hero__titular { margin-inline: auto; text-align: center; } .bm-hero .bm-hero__entrada { margin-inline: auto; } .bm-hero .bm-hero__acciones { justify-content: center; } .bm-hero .bm-garantias { justify-content: center; align-items: center; } /* ── El subtítulo «Por mes» quedaba debajo de la última caja del acordeón de «Por proyecto», que en móvil reserva más alto al abrirse. */ .bm-acordeon + .bm-sub { margin-top: 3.5rem; } /* ── La barra de secciones, separada de la del logo (se encimaban). */ .bm-subnav { top: 4.9rem; } /* ── Cabeceras de sección: centradas y con más presencia. */ .bm-sec > .bm-cont > .bm-rotulo, .bm-sec > .bm-cont > .bm-h2, .bm-sec > .bm-cont > .bm-lead, .bm-sec > .bm-cont > .bm-sub { text-align: center; margin-inline: auto; } .bm-sec > .bm-cont > .bm-rotulo { justify-content: center; } .bm-h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; } .bm-lead { font-size: 1.06rem; line-height: 1.6; max-width: 34ch; } .bm-sub { font-size: .8rem; letter-spacing: .16em; } /* ── Tarjetas: título grande y centrado, texto centrado, número enorme de fondo abajo a la derecha (las cartas de Petroleum). Mismo relleno en todas para que la columna se lea pareja. */ .bm-grid-3 { gap: 1rem !important; } .bm-grid-3 .bm-card, .bm-grid-2 .bm-card { padding: 1.6rem 1.35rem 1.5rem; text-align: center; overflow: hidden; isolation: isolate; } .bm-grid-3 .bm-card .bm-h3, .bm-grid-2 .bm-card .bm-h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: .55rem; } .bm-grid-3 .bm-card .bm-card__texto, .bm-grid-2 .bm-card .bm-card__texto { font-size: 1rem; line-height: 1.6; margin-inline: auto; max-width: 32ch; } .bm-grid-3 .bm-card .bm-card__num, .bm-grid-2 .bm-card .bm-card__num { position: absolute; right: .9rem; bottom: -.4rem; z-index: -1; margin: 0; font-size: 5.5rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; opacity: .14; } .bm-card .bm-caso__rubro, .bm-card .bm-caso__tags { text-align: center; } .bm-caso { align-items: center; } .bm-caso .bm-caso__enlace { align-self: center; } /* Las fases: el emblema queda abajo y centrado, la mascota no tapa texto. */ .bm-fase { align-items: center; } .bm-fase .bm-fase__emblema { justify-content: center; } /* El acordeón de «Por proyecto» conserva su comportamiento (se abre con el scroll); sólo el título cerrado, más grande y centrado. */ .bm-acordeon > .bm-serv .bm-h3 { text-align: center; } /* «Por mes» en móvil: pila solapada, como la baraja de Petroleum en móvil. Cada carta monta sobre el pie de la anterior (donde viven el folio y el emblema); la que cruza la banda central (`.is-saltando`, la pone acordeones()) se endereza. */ .bm-abanico--polizas { display: block; padding: 8px 0 20px; } .bm-abanico--polizas .bm-carta { width: 100%; max-width: 460px; min-height: 0; margin: 0 auto !important; padding: 1.6rem 1.4rem 4rem !important; align-items: center; text-align: center; } .bm-abanico--polizas .bm-carta + .bm-carta { margin-top: -30px !important; } /* 🚨 z-index con !important: `.bm-abanico--foco .bm-hoja.is-saltando { z-index: 9 }` (del abanico de /servicios/) subía la activa encima de todas y tapaba el título de la siguiente. */ .bm-abanico--polizas .bm-carta:nth-child(1) { transform: rotate(-1.2deg); z-index: 1 !important; } .bm-abanico--polizas .bm-carta:nth-child(2) { transform: rotate(.9deg); z-index: 2 !important; } .bm-abanico--polizas .bm-carta:nth-child(3) { transform: rotate(-.9deg); z-index: 3 !important; } .bm-abanico--polizas .bm-carta.is-saltando { transform: rotate(0deg) scale(1.02); box-shadow: 0 30px 52px -26px rgba(0, 0, 0, .5); } .bm-carta__emblema { width: 104px; height: 104px; } } @media (prefers-reduced-motion: reduce) { .bm-abanico--polizas .bm-carta, .bm-abanico--polizas .bm-carta.is-saltando { transform: none !important; } } /* ── El pie, sobre el MISMO fondo que la página (7/oct/2026, Isaac: «no le pongas un fondo independiente, porque se corta y se ve feo»). En las páginas con cintas (`.bm-con-cintas`, la pone bloques.js al montar el lienzo) el pie deja su papel opaco y sus manchas y se ve el lienzo fijo de detrás, igual que en el resto de secciones: no hay costura entre el cierre y el pie. En las páginas SIN cintas conserva su fondo de siempre. */ .bm-con-cintas .bm-pie { background: transparent; } .bm-con-cintas .bm-pie.bm-manchas::before, .bm-con-cintas .bm-pie.bm-manchas::after { display: none; } /* ========================================================================== AJUSTES MÓVIL 9/OCT/2026 (Isaac, con capturas de su iPhone). SÓLO DISEÑO: la experiencia (foco por scroll, baraja, cintas) se queda como está. ========================================================================== */ /* ── 5 · Casos: UNA encendida, la que cruza el centro. En iPhone el `:hover` y el `:focus-within` se QUEDAN pegados en la última tarjeta que tocaste, y la dejaban volteada y teñida junto a la que marca el scroll: dos a la vez. En táctil sólo cuenta `is-saltando` (y el JS ya elige una sola). */ @media (hover: none) { .bm-caso--gira:not(.is-saltando):hover .bm-caso__giro, .bm-caso--gira:not(.is-saltando):focus-within .bm-caso__giro { transform: none !important; } .bm-caso--gira:not(.is-saltando):hover .bm-caso__cara--frente, .bm-caso--gira:not(.is-saltando):focus-within .bm-caso__cara--frente { opacity: 1 !important; } .bm-caso--gira:not(.is-saltando):hover .bm-caso__cara--tras, .bm-caso--gira:not(.is-saltando):focus-within .bm-caso__cara--tras { opacity: 0 !important; pointer-events: none !important; } .bm-card.bm-caso:not(.is-saltando):hover, .bm-card.bm-caso:not(.is-saltando):focus-within { border-color: var(--vidrio-borde) !important; border-top-color: var(--tinta) !important; box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo) !important; } } /* ── 9 · Las pólizas en baraja también dentro de /servicios/ y de cada servicio. Allí la carta lleva su lista «qué incluye»: la lista se lee a la izquierda aunque la carta se centre en móvil. */ .bm-abanico--polizas .bm-carta .bm-lista { text-align: left; margin-top: .35rem; } .bm-abanico--polizas .bm-carta .bm-nota { text-align: left; } /* Una sola carta (la póliza de un servicio): derecha, sin giro y más ancha. */ .bm-abanico--una { display: block; } .bm-abanico--una .bm-hoja.bm-carta { max-width: 880px; margin: 0 auto !important; padding-right: 1.6rem !important; transform: none !important; } .bm-abanico--una .bm-carta__emblema { width: 150px; height: 150px; } @media (max-width: 760px) { /* ── 1 · Pólizas: ya no se enciman. Cada carta con su aire; el folio y el emblema del pie quedan a la vista. */ .bm-abanico--polizas .bm-carta + .bm-carta { margin-top: 1rem !important; } /* ── 2 · Fases: la mascota vive abajo a la derecha, así que el número grande se va ARRIBA a la izquierda. Ya no se enciman. */ .bm-grid-3 .bm-fase .bm-card__num { top: .1rem; bottom: auto; left: .85rem; right: auto; font-size: 4.5rem; } /* ── 8 · Tarjetas con número de fondo: el texto termina ANTES del número (antes le pasaba por encima). */ .bm-grid-3 .bm-card:not(.bm-fase):has(> .bm-card__num), .bm-grid-2 .bm-card:not(.bm-fase):has(> .bm-card__num) { padding-bottom: 5.4rem; } /* ── 3 · La barra de secciones flota sobre el arranque de la sección que sigue (alto cero, a propósito): esa sección necesita aire arriba para que la píldora no quede pegada a su rótulo. */ .bm-subnav + .bm-sec, .bm-subnav + * > .bm-sec:first-child { padding-top: 5.75rem; } /* ── 4 · La ficha de datos del hero (todas las páginas): tres columnas parejas, cada una con su raya, en vez de dos y una que se caía al renglón de abajo descuadrada. */ .bm-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .bm-ficha__dato { min-width: 0; padding: 0 .55rem; border-left: 1px solid var(--linea); } .bm-ficha__dato:first-child { padding-left: 0; border-left: 0; } .bm-ficha__n { font-size: 1.55rem; } .bm-ficha__q { font-size: .78rem; max-width: none; } /* ── 7 · Botones de cierre de sección, centrados como su cabecera. */ .bm-sec > .bm-cont > .bm-cierre__acciones { justify-content: center; } } /* Las cartas de póliza CON lista (en /servicios/ y en cada servicio): el emblema va DEBAJO del texto, nunca encima. Se reserva su alto al pie. */ .bm-abanico--polizas .bm-carta:has(.bm-lista) { padding-bottom: 10rem !important; } @media (max-width: 760px) { .bm-abanico--polizas .bm-carta:has(.bm-lista) { padding-bottom: 8rem !important; } } /* 🚨 En escritorio `.bm-abanico--foco .bm-hoja` fija `aspect-ratio: .72` (naipe): con la lista dentro, la carta se quedaba en 583 px con 877 de contenido, la lista se cortaba y el folio caía encima del texto. La carta con lista crece con lo que lleva. */ .bm-abanico--polizas .bm-carta:has(.bm-lista) { aspect-ratio: auto !important; } .bm-abanico--polizas .bm-carta:has(.bm-lista) > * { flex-shrink: 0; } /* ── El pie en teléfono, en DOS columnas (9/oct/2026, Isaac: «hazlos en 2 columnas porque abarca mucho espacio»). Antes iba en una sola (ver la nota de 560px más arriba: el 2+1 se leía cojo). Ahora «Servicios» y «Estudio» van lado a lado y «Escríbenos» ocupa todo el ancho DEBAJO, con sus enlaces en renglón (Instagram y Facebook comparten línea): no es una columna huérfana, es una franja de contacto. */ @media (max-width: 560px) { .bm-pie__nav { grid-template-columns: 1fr 1fr; gap: 1.75rem .5rem; text-align: left; } /* Cada columna, a la izquierda (los iconos forman fila) y centrada en su mitad como bloque. */ .bm-pie__nav > div:nth-child(-n+2) { align-items: flex-start; justify-self: center; } .bm-pie__nav > div:nth-child(-n+2) .bm-rotulo { margin-left: calc(17px + .45rem); } .bm-pie__nav .bm-pie__enlace { font-size: .9rem; padding: .3rem 0; gap: .45rem; align-items: flex-start; } .bm-pie__nav .bm-pie__enlace .bm-pie__ico { margin-top: .2em; } .bm-pie__nav .bm-rotulo { margin-bottom: .55rem; } /* «Escríbenos», a todo el ancho: correo y WhatsApp en su renglón; Instagram y Facebook juntos. */ .bm-pie__nav > div:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; column-gap: 1.5rem; text-align: center; } .bm-pie__nav > div:nth-child(3) .bm-rotulo, .bm-pie__nav > div:nth-child(3) .bm-pie__enlace:nth-of-type(1), .bm-pie__nav > div:nth-child(3) .bm-pie__enlace:nth-of-type(2) { grid-column: 1 / -1; } } /* ── PÓLIZAS EN PILA (sólo móvil, 9/oct/2026). La clase `.bm-pila` la pone `pilaPolizas()` en bloques.js, que también fija el alto de la caja (el recorrido del scroll) y, carta por carta, `--pila-t` (posición), `--pila-z` (capa) y `--pila-luz` (las de atrás, un poco más oscuras). Sin JS o con movimiento reducido no hay clase y se quedan una debajo de otra. */ @media (max-width: 760px) { /* 🚨 `overflow: hidden` en la sección madre mata el sticky; `clip` recorta igual sin crear contenedor de scroll. */ .bm-sec:has(.bm-pila) { overflow: clip; contain: none; } .bm-abanico--polizas.bm-pila { display: grid; grid-template-columns: 1fr; align-items: start; padding: 0; } .bm-abanico--polizas.bm-pila .bm-carta { grid-area: 1 / 1; position: sticky; top: var(--pila-tope, 9.5rem); align-self: start; margin: 0 auto !important; min-height: min(58svh, 470px); justify-content: center; gap: .9rem; transform: var(--pila-t, none) !important; transform-origin: 50% 0; z-index: var(--pila-z, 1) !important; filter: brightness(var(--pila-luz, 1)) !important; opacity: 1 !important; transition: none !important; will-change: transform; box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .45); } /* El texto, en medio y grande: la carta se aprovecha entera. */ .bm-abanico--polizas.bm-pila .bm-carta .bm-h3 { font-size: 2.5rem; line-height: 1.05; } .bm-abanico--polizas.bm-pila .bm-carta .bm-card__texto { font-size: 1.12rem; line-height: 1.55; max-width: 30ch; margin-inline: auto; } .bm-abanico--polizas.bm-pila .bm-carta .bm-serv__mas { margin-top: .6rem; } .bm-abanico--polizas.bm-pila .bm-carta__emblema { width: 112px; height: 112px; } } /* ── Cintas en CLARO, más vistosas (9/oct/2026, Isaac: «en modo claro las líneas se ven demasiado tenues… hazlas como en oscuro»). El shader ya pinta más cobertura en papel; aquí se les quita el 70 % de opacidad y la desaturación que llevan en todos los temas. El oscuro no cambia. */ [data-tema='claro'] .bm-con-cintas .bm-cintas__lienzo.is-vivo, [data-tema='claro'].bm-con-cintas .bm-cintas__lienzo.is-vivo { opacity: 1; filter: saturate(1.1); } @media (prefers-color-scheme: light) { :root:not([data-tema='oscuro']) .bm-con-cintas .bm-cintas__lienzo.is-vivo, :root:not([data-tema='oscuro']).bm-con-cintas .bm-cintas__lienzo.is-vivo { opacity: 1; filter: saturate(1.1); } }