/* ═══════════════════════════════════════════════════════════════════════════ ACCESOS · LA SECCIÓN PRISMA (ver accesos-prisma.js) Libro de marca: tinta, deep, teal, salvia (sólo relleno), crema y blanco. Letra de exhibición Marcellus (provisional de PP Fragment Glare), texto Figtree (de PP Fragment Sans); sin negrita ni itálica. El velo de foto: tinta hasta 45 % desde el 45 % de la altura. Una sola sombra, la del libro. ═══════════════════════════════════════════════════════════════════════════ */ /* TODO EL ECOSISTEMA, EN UNA SOLA PIEZA (Luis, 2026-09-22: «no le da personalidad a todo el ecosistema, no lo engloba; algo mucho más épico que englobe todo ese apartado»). El bloque deja de ser texto suelto sobre la página: pasa a ser una lámina —tinta honda, filete crema, la sombra del libro— que encierra el nombre, las caras, las apps y los mapas. Adentro, la luz: un haz que baja sobre PRISMA y los colores de la casa derivando muy despacio. */ #sections-container > section.prisma{ position:relative; width:100%; max-width:74rem; margin:0 auto 6.5rem !important; align-items:stretch !important; font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif; padding:0 clamp(1rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.6rem); border-radius:26px; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, #101822 0%, #121C26 55%, #0E151E 100%); border:1px solid rgba(234,223,206,.12); box-shadow:0 30px 70px -18px rgba(26,38,51,.62); } /* el filo superior, una línea de luz que cruza la lámina entera */ #sections-container > section.prisma::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; background:linear-gradient(90deg, rgba(234,223,206,0), rgba(234,223,206,.45) 22%, rgba(0,109,130,.55) 52%, rgba(125,155,91,.45) 74%, rgba(234,223,206,0)); } /* ── La cabecera: el nombre y lo que significa ────────────────────────────── */ /* LA FOTO MANDA (Luis, 2026-10-03): sin palabra grande, como una firma. PRISMA va en versalitas crema y la sigla debajo, chicas. La firma va siempre sobre el bosque y las caras arrancan ya en el mar: lo afina `firmaSobreElBosque()` (accesos-prisma.js), que mide la foto como quedó recortada y acomoda su encuadre, el alto de arriba de la firma y el de esta cabecera. Estas medidas son las de antes de que corra: la cabecera llega al 74 % de la foto, que va de -6rem a 33rem (§LA LÁMINA) y en el teléfono de -3rem a 24rem (§EL MÓVIL DE PRISMA). */ .prisma__cab{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; box-sizing:border-box; min-height:calc(.74 * 39rem - 6rem); padding:clamp(5rem, 10vw, 8rem) 1rem 2rem; isolation:isolate; } @media (max-width:640px){ .prisma__cab{ min-height:calc(.74 * 27rem - 3rem); } } /* PRISMA, del mismo tamaño que NIDO arriba (Luis, 2026-10-04): las dos plataformas se firman igual */ #sections-container > section.prisma h2.prisma__titulo{ margin:0; font-family:Figtree, 'PP Fragment Sans', system-ui, sans-serif !important; font-style:normal !important; font-weight:400 !important; font-size:1.15rem !important; line-height:1 !important; letter-spacing:.7em !important; padding-left:.7em; color:#EADFCE !important; text-shadow:0 2px 8px rgba(11,20,28,.7) !important; } /* la sigla, en la misma voz que la del Nido —«Navegador Integral de Destinos de la Organización»—: versalitas finas y espaciadas, las iniciales en blanco (Luis, 2026-09-28) */ .prisma__siglas{ margin:.9rem 0 0; font-family:Figtree, system-ui, sans-serif; font-size:.78rem; line-height:1.6; letter-spacing:.3em; padding-left:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); max-width:none; } .prisma__siglas span{ color:#FFFFFF; } @media (max-width:640px){ .prisma__siglas{ font-size:.62rem; letter-spacing:.14em; padding-left:.14em; } } /* ═══════════════════════════════════════════════════════════════════════════ LAS CARAS: CADA UNA ES UN LIBRO (Luis, 2026-10-03, la «A2» de la maqueta caras-centro) ─────────────────────────────────────────────────────────────────────────── La gerencia pidió que lo grande sea lo que la app HACE. En reposo, el nombre propio («CIMA») corre a lo alto por el borde izquierdo —el lomo— con su filete, y la función («Control Maestro») va grande al pie. Al pasar el cursor: · el nombre sube al medio del lomo, crece un poco y queda entre dos filetes; · la etiqueta de arriba se aparta y la función va al centro, con su sigla en versalitas; · la foto sólo se acerca apenas, despacio: no se corre ni gira, y la tarjeta no se levanta ni se inclina. Lo que se mueve es lo de adelante; · las demás caras se apagan, quietas. El centrado es exacto con un renglón o con dos: el bloque ocupa todo el alto con dos resortes; en reposo el de arriba empuja todo al pie y al pasar crece también el de abajo (flex-grow sí se anima). La letra de cada función la ajusta `ajustarFunciones()` para que su palabra más larga entre. Al entrar, el nombre deja el lomo y crece hasta el portal (accesos-prisma.js). ═══════════════════════════════════════════════════════════════════════════ */ .prisma__caras{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:24.6rem; gap:1rem; } @media (max-width:1023px){ .prisma__caras{ grid-auto-rows:22rem; } } @media (max-width:767px){ .prisma__caras{ grid-auto-rows:19.4rem; } } @media (max-width:560px){ .prisma__caras{ grid-auto-rows:11rem; gap:.6rem; } } a.prisma__cara{ position:relative; display:block; overflow:hidden; isolation:isolate; border-radius:14px; text-decoration:none; color:#FFFFFF; border:1px solid rgba(234,223,206,.16); transition:border-color .3s linear, filter .45s cubic-bezier(.4,0,.2,1); } a.prisma__cara:hover{ border-color:rgba(234,223,206,.08); } a.prisma__cara:focus-visible{ outline:2px solid #006D82; box-shadow:0 0 0 4px rgba(234,223,206,.22); } .prisma__caras:hover a.prisma__cara:not(:hover){ filter:brightness(.45) saturate(.5); } /* la foto: quieta; al pasar, sólo se acerca apenas */ .prisma__cara-foto{ position:absolute; inset:0; z-index:-2; background:var(--foto) var(--pos) / cover no-repeat; filter:brightness(.9); transition:transform .9s cubic-bezier(.4,0,.2,1); } a.prisma__cara:hover .prisma__cara-foto{ transform:scale(1.06); transition:transform 2.8s cubic-bezier(.2,.7,.2,1); } /* el velo: hondo junto al lomo y al pie; al pasar, el centro se hace hondo para la letra */ .prisma__cara-velo{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,21,30,.75) 0%, rgba(14,21,30,.2) 22%, rgba(14,21,30,0) 40%), linear-gradient(180deg, rgba(14,21,30,0) 45%, rgba(14,21,30,.8) 100%); } .prisma__cara-velo::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s; background:radial-gradient(85% 55% at 50% 50%, rgba(14,21,30,.62), rgba(14,21,30,.28) 72%, rgba(14,21,30,.55)); } a.prisma__cara:hover .prisma__cara-velo::after{ opacity:1; transition:opacity 1.1s; } /* la letra se sostiene sola sobre cualquier foto: su propia sombra en tres capas */ .prisma__cara-lomo, .prisma__cara-parte, .prisma__cara-funcion, .prisma__cara-sigla{ text-shadow:0 1px 2px rgba(6,12,18,.96), 0 4px 12px rgba(6,12,18,.88), 0 14px 40px rgba(6,12,18,.72); } /* la parte del árbol: una línea de versalitas arriba a la derecha; al pasar se aparta */ .prisma__cara-parte{ position:absolute; top:1.1rem; right:1.1rem; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:#EADFCE; transition:opacity .4s; } a.prisma__cara:hover .prisma__cara-parte{ opacity:0; } .prisma__cara-parte--vacia{ visibility:hidden; } /* el lomo */ .prisma__cara-lomo{ position:absolute; left:1.45rem; bottom:1.6rem; display:flex; align-items:center; gap:1rem; white-space:nowrap; font-size:.9rem; letter-spacing:.5em; text-transform:uppercase; color:#EADFCE; transform-origin:0 100%; transform:rotate(-90deg) translateY(100%) translateX(0); transition:bottom .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), font-size .6s cubic-bezier(.4,0,.2,1), letter-spacing .6s cubic-bezier(.4,0,.2,1); } .prisma__cara-lomo::before, .prisma__cara-lomo::after{ content:""; height:1px; background:rgba(234,223,206,.6); transition:width .5s cubic-bezier(.4,0,.2,1); } .prisma__cara-lomo::before{ width:0; } .prisma__cara-lomo::after{ width:4.1rem; } a.prisma__cara:hover .prisma__cara-lomo{ bottom:50%; transform:rotate(-90deg) translateY(100%) translateX(-50%); font-size:1.05rem; letter-spacing:.56em; transition:bottom 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), font-size 1.1s cubic-bezier(.16,1,.3,1), letter-spacing 1.1s cubic-bezier(.16,1,.3,1); } a.prisma__cara:hover .prisma__cara-lomo::before, a.prisma__cara:hover .prisma__cara-lomo::after{ width:3.2rem; transition:width 1s cubic-bezier(.16,1,.3,1) .25s; } /* el bloque de la letra: todo el alto; los resortes deciden si va al pie o al centro */ .prisma__cara-cuerpo{ position:absolute; top:0; bottom:1.4rem; left:3.9rem; right:1.2rem; display:flex; flex-direction:column; align-items:flex-start; text-align:left; transition:bottom .6s cubic-bezier(.4,0,.2,1); } a.prisma__cara:hover .prisma__cara-cuerpo{ bottom:0; align-items:center; text-align:center; transition:bottom 1.1s cubic-bezier(.16,1,.3,1); } .prisma__cara-resorte{ flex:1 1 0; min-height:0; transition:flex-grow .6s cubic-bezier(.4,0,.2,1); } .prisma__cara-resorte--abajo{ flex-grow:0; } a.prisma__cara:hover .prisma__cara-resorte--abajo{ flex-grow:1; transition:flex-grow 1.1s cubic-bezier(.16,1,.3,1); } /* la función, grande; la sigla, en versalitas, sólo al pasar */ .prisma__cara-funcion{ max-width:100%; font-family:Marcellus, 'PP Fragment Glare', Georgia, serif; font-size:2.05rem; line-height:1.08; letter-spacing:.02em; color:#FFFFFF; text-wrap:balance; overflow-wrap:normal; } .prisma__cara-sigla{ max-height:0; opacity:0; overflow:hidden; font-size:.66rem; line-height:1.7; letter-spacing:.24em; text-transform:uppercase; color:#EADFCE; transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s, margin .4s; } a.prisma__cara:hover .prisma__cara-sigla{ max-height:4rem; opacity:1; margin-top:1rem; transition:max-height .9s cubic-bezier(.16,1,.3,1) .45s, opacity .8s .55s, margin .9s cubic-bezier(.16,1,.3,1) .45s; } /* en el celular la tarjeta es angosta: el nombre va al medio del lomo, más chico y sin filete (con el filete no cabía), y la letra se acerca al borde */ @media (max-width:560px){ a.prisma__cara{ border-radius:12px; } .prisma__cara-lomo, a.prisma__cara:hover .prisma__cara-lomo{ left:.85rem; bottom:50%; gap:0; font-size:.62rem; letter-spacing:.3em; transform:rotate(-90deg) translateY(100%) translateX(-50%); } .prisma__cara-lomo::before, .prisma__cara-lomo::after{ display:none; } .prisma__cara-cuerpo{ left:2.5rem; right:.7rem; bottom:.8rem; } .prisma__cara-funcion{ font-size:1.25rem; } .prisma__cara-parte{ top:.7rem; right:.75rem; font-size:.5rem; letter-spacing:.2em; } } /* en una pantalla táctil no existe «ponerse encima»: nada se apaga */ @media (hover:none){ .prisma__caras:hover a.prisma__cara:not(:hover){ filter:none; } } @media (prefers-reduced-motion:reduce){ .prisma__cara-lomo, .prisma__cara-cuerpo, .prisma__cara-resorte, .prisma__cara-sigla, .prisma__cara-foto{ transition:none; } } /* ── Las demás apps y los ecosistemas ─────────────────────────────────────── */ .prisma-ecos{ --acento:#2A93A8; } /* los ecosistemas: el teal un paso más claro (Luis) */ /* ── Las demás secciones (Sistemas, Reservas, Producto…) con el mismo lenguaje ── */ #sections-container > section.prisma-seccion{ width:100%; max-width:72rem; margin:0 auto 4.5rem !important; align-items:stretch !important; font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif; } /* UN SOLO TÍTULO PARA TODAS (Luis, 2026-09-28): «Los ecosistemas» y Sistemas, Reservas… con el mismo diseño —centrado, entre dos filetes del color de su sección— y la letra del rótulo de arriba (versalitas espaciadas), «un poquito más grande». */ #sections-container > section.prisma-seccion h2.prisma-seccion__titulo{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin:0 0 1.4rem; padding-left:.32em; text-align:center; font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-style:normal !important; font-weight:400 !important; font-size:.86rem !important; line-height:1.4 !important; letter-spacing:.32em !important; text-transform:uppercase; color:rgba(255,255,255,.88) !important; text-shadow:none; } .prisma-seccion__titulo::before, .prisma-seccion__titulo::after{ content:""; flex:1; max-width:14rem; height:1px; } .prisma-seccion__titulo::before{ background:linear-gradient(270deg, var(--acento), transparent); } .prisma-seccion__titulo::after{ background:linear-gradient(90deg, var(--acento), transparent); } /* ── Tableta y celular ────────────────────────────────────────────────────── */ @media (max-width:640px){ #sections-container > section.prisma h2.prisma__titulo{ font-size:.92rem !important; letter-spacing:.6em !important; padding-left:.6em; } } /* DOCE CARAS, UN SOLO ECOSISTEMA (Luis, 2026-09-29): todas las apps son caras. La rejilla pasa por los tres tamaños según el ancho —«en escritorio 4 columnas, y al bajar el tamaño pasa a 3 y a 2»—, y con doce las tres cuadran sin huecos: 4 × 3, 3 × 4 y 2 × 6. */ .prisma__caras{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; column-gap:1.1rem !important; } @media (max-width:1279px){ .prisma__caras{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; column-gap:1.25rem !important; } } @media (max-width:1023px){ .prisma__caras{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; column-gap:.9rem !important; } } /* un botón nuevo del panel que todavía no tiene su cara escrita: entra igual, sobre la hoja de tinta */ a.prisma__cara--sin-foto{ background:#222E3A; } /* el portal */ .prisma-portal{ position:fixed; inset:0; z-index:9999; pointer-events:all; } /* EL OSCURECIMIENTO VIAJA CON LA FOTO (Luis, 2026-09-22: «ese cuadro viene como en movimiento rezagado y se nota cuando se incrementa la imagen; quiero que el cuadro y la imagen vayan al mismo tiempo»). Antes el velo era una caja aparte con sus propias transiciones: la foto se acercaba y el velo no, y el borde del velo se veía. Ahora el velo es la propia foto —su `::after`—, así que crece, se mueve y se acerca EXACTAMENTE con ella, y al final se disuelve. */ /* EL VIAJE, SIN BRINCOS EN EL CELULAR (Luis, 2026-10-05: «pega demasiados brincos, se ve lo de atrás, desaparece la imagen y vuelve a aparecer»). Antes la foto crecía cambiando su posición y su tamaño (left, top, width, height): en cada cuadro el teléfono volvía a medir la página y a redibujar la imagen entera, no le daba el tiempo y se veían cuadros vacíos. Ahora la imagen nace YA del tamaño final, dibujada una sola vez, y viaja sólo con `transform` desde donde estaba en la tarjeta; lo que crece es su recorte (`clip-path`), de la tarjeta a la pantalla. Lo mismo que se veía —sale de la tarjeta, crece y se acerca— sin trabajo para el teléfono. Un solo viaje y una sola curva: el recorte y la imagen terminan a la vez (Luis, 2026-09-22). */ .prisma-portal__foto{ position:fixed; inset:0; overflow:hidden; clip-path:var(--recorte); transition:clip-path 1s cubic-bezier(.62,0,.2,1); } .prisma-portal__imagen{ position:absolute; background-size:100% 100%; filter:brightness(.9); transform-origin:0 0; transform:var(--desde); will-change:transform; transition:transform 1s cubic-bezier(.62,0,.2,1); } .prisma-portal__foto::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at center, rgba(26,38,51,.15) 0%, rgba(26,38,51,.55) 60%, rgba(20,29,39,.92) 100%); transition:opacity .62s cubic-bezier(.62,0,.2,1); } .prisma-portal.abierto .prisma-portal__foto{ clip-path:inset(0 0 0 0 round 0); } .prisma-portal.abierto .prisma-portal__imagen{ transform:none; } .prisma-portal.abierto .prisma-portal__foto::after{ opacity:1; } /* El nombre entra casi con la foto y se sostiene: antes aparecía a los 450 ms y se iba a los 1.750, y apenas se leía (Luis, 2026-09-22: «el nombre sale muy tarde y casi no dura nada»). */ .prisma-portal__marca{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; color:#FFFFFF; text-align:center; padding:1rem; } /* El nombre sale de la tarjeta y crece mientras la foto viaja (2026-10-02, accesos-prisma.js `crecerNombre`). Lo demás de la marca entra cuando la imagen YA terminó su viaje (1 s), no antes (Luis, 2026-09-22). */ .prisma-portal__funcion, .prisma-portal__entrando{ opacity:0; transform:translateY(8px); transition:opacity .5s ease 1s, transform .8s cubic-bezier(.2,.8,.2,1) 1s; } .prisma-portal.abierto .prisma-portal__funcion, .prisma-portal.abierto .prisma-portal__entrando{ opacity:1; transform:none; } .prisma-portal__marca img{ width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); animation:prismaGiro 1.2s cubic-bezier(.2,.8,.2,1) 1s both; } @keyframes prismaGiro{ from{ transform:rotate(-90deg) scale(.6); opacity:0; } to{ transform:none; opacity:1; } } .prisma-portal__nombre{ font-family:Marcellus, Georgia, serif; font-size:clamp(2.4rem, 7vw, 4.6rem); letter-spacing:.16em; line-height:1; padding-left:.16em; text-shadow:0 8px 40px rgba(0,0,0,.45); } .prisma-portal__funcion{ font-family:Figtree, system-ui, sans-serif; font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.85); } .prisma-portal__entrando{ margin-top:1.4rem; font-family:Figtree, system-ui, sans-serif; font-size:.64rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(234,223,206,.75); position:relative; padding-bottom:.6rem; } .prisma-portal__entrando::after{ content:""; position:absolute; left:50%; bottom:0; height:1px; width:0; background:#EADFCE; transform:translateX(-50%); animation:prismaCarga 1s cubic-bezier(.7,0,.2,1) .5s forwards; } @keyframes prismaCarga{ to{ width:120%; } } .prisma-portal.cerrando{ opacity:0; transition:opacity .6s ease; } /* Mientras dura, el dedo no desplaza la página de atrás. Antes se le quitaba el desplazamiento al body, y en el teléfono eso mueve la barra del navegador y la página entera brinca debajo. */ .prisma-portal{ touch-action:none; overscroll-behavior:contain; } @media (prefers-reduced-motion: reduce){ } /* el último instante del portal: la escena se funde a tinta y ahí entra la otra app */ /* el portal termina en la foto del login de destino, SIN BRINCO (Luis, 2026-10-04: «que simplemente sea el fondo acomodándose»). La foto de la tarjeta es la del login, y en el vuelo ya va tomando su encuadre (accesos-prisma.js `portal`); la del login aparece cuando la otra aterrizó, con su mismo acercamiento, así el relevo no se nota, y desde ahí el fondo se aleja despacio hasta quedar como lo pinta el login. Antes entraba a mitad del vuelo con otra escala y las dos fotos se veían a la vez en tamaños distintos. */ .prisma-portal__destino{ position:fixed; inset:0; background-size:cover; background-repeat:no-repeat; opacity:0; transform:scale(1.32); transition:opacity .35s ease, transform 1.9s cubic-bezier(.45,0,.2,1); } .prisma-portal.destino .prisma-portal__destino{ opacity:1; transform:scale(1); } /* lleva el mismo velo que la foto de la tarjeta, y se va con él al final: si no, al aparecer la del login el velo se apagaba de golpe */ .prisma-portal__destino::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(26,38,51,.15) 0%, rgba(26,38,51,.55) 60%, rgba(20,29,39,.92) 100%); } .prisma-portal.final .prisma-portal__destino::after{ opacity:0; transition:opacity .45s ease; } .prisma-portal.final .prisma-portal__marca{ opacity:0; transform:scale(1.03); transition:opacity .45s ease, transform .6s ease; } /* El oscurecimiento existe PARA que el logo y el nombre se lean; cuando ellos se van, se va con ellos y la foto del login queda limpia (Luis, 2026-09-22). Van juntos, misma duración. */ .prisma-portal.final .prisma-portal__foto::after{ opacity:0; transition:opacity .45s ease; } /* ── LA ESCENA DE PRISMA (Luis, 2026-09-22: «algo mucho más épico») ───────────────────── El apartado deja de ser un fondo de color: es una escena. Arriba, el dosel de la selva visto desde el aire —la copa del ecosistema— con el nombre encima; hacia abajo la tinta se cierra y de esa oscuridad emergen las caras. Misma gramática que las cabeceras de las apps: foto nítida, velo del libro, Marcellus en blanco. */ .prisma__escena{ position:absolute; z-index:0; inset:0 0 auto; height:min(52%, 30rem); background:url("fotos/1629221078063-be07a8a5f867.webp") center 58% / cover no-repeat; animation:prismaEscena 30s ease-in-out infinite alternate; } .prisma__velo{ position:absolute; z-index:1; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(16,24,34,.58) 0%, rgba(16,24,34,.46) 18%, rgba(16,24,34,.80) 34%, rgba(14,21,30,.97) 46%, #0E151E 56%), radial-gradient(120% 60% at 50% 4%, rgba(234,223,206,.12) 0%, rgba(234,223,206,0) 58%); } @keyframes prismaEscena{ from{ transform:scale(1.045); } to{ transform:scale(1); } } #sections-container > section.prisma > .prisma__cab, #sections-container > section.prisma > .prisma__caras{ position:relative; z-index:2; } /* sobre la foto, las siglas piden su sombra */ .prisma__siglas{ text-shadow:0 2px 8px rgba(11,20,28,.7); } @media (prefers-reduced-motion:reduce){ .prisma__escena{ animation:none; } } /* ── EL PASO DE LA FOTO A LA TINTA, SIN COSTURA (Luis, 2026-09-22) ────────────────────── «El degradado con el color sólido se ve marcado; debe verse como un degradado entre el agua turquesa y el fondo oscuro.» El corte salía de dos bordes que no coincidían —la máscara de la foto y el velo— y de un salto brusco al color sólido. Ahora la foto se desvanece muy largo, el velo pasa por un tono de agua honda antes de llegar a la tinta, y la lámina es de un solo color: no hay contra quién marcar el borde. */ #sections-container > section.prisma{ background:#0E151E !important; } /* La foto, un paso más honda: se veía demasiado clara y le quitaba peso a las caras (Luis, 2026-09-22). Se oscurece la imagen misma, no el velo, para no ensuciar el color. */ .prisma__escena{ filter:brightness(.62) contrast(1.02) !important; height:min(60%, 33rem) !important; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.22) 80%,rgba(0,0,0,.08) 90%,transparent 100%) !important; mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.22) 80%,rgba(0,0,0,.08) 90%,transparent 100%) !important; } /* Sin tintes ni reflejos: sólo tinta, para que la foto se aprecie como es (Luis, 2026-09-22: «quitale esos reflejos de color»). */ .prisma__velo{ background:linear-gradient(180deg, rgba(14,21,30,.42) 0%, rgba(14,21,30,.34) 18%, rgba(14,21,30,.46) 34%, rgba(14,21,30,.64) 48%, rgba(14,21,30,.82) 62%, rgba(14,21,30,.94) 74%, #0E151E 86%) !important; } /* Sin la franja de luz del borde superior: iluminaba de más y no gusta (Luis, 2026-09-22). */ #sections-container > section.prisma::before{ display:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ AL MIRAR UNA TARJETA, SE APAGA EL TEATRO (Luis, 2026-09-22 · segunda pasada) ─────────────────────────────────────────────────────────────────────────── Tres correcciones sobre la primera versión: · «Con las de abajo debe pasar lo mismo»: ahora lo dispara cualquier tarjeta con foto —las caras y, entonces, las apps del ecosistema; hoy todas son caras—. Y se apaga lo que no es ella: si el cursor está abajo, arriba baja la luz; si está arriba, baja abajo. · «No debe ser tan marcado ese oscurecimiento»: el fondo va a media luz, no a penumbra. · «¿Y si todas las orillas de la imagen se difuminan y llegan al color del fondo, y cuando se apague se apague todo hasta el fondo?»: la fotografía ya no termina en un canto recto —se desvanece por los cuatro lados hasta el color de la sección— y al apagarse no se ennegrece: se FUNDE con ese mismo color, bajando su opacidad. Así no queda un rectángulo oscuro flotando sobre el fondo; queda fondo. ═══════════════════════════════════════════════════════════════════════════ */ /* LAS ORILLAS (Luis: «degradar la imagen con el color de afuera, el fondo, para que no exista borde; no difuminado hacia adentro»). El primer intento pintaba franjas oscuras ENCIMA de la foto, y eso se ve como un viñeteado que se come la imagen. Esto es al revés: la fotografía pierde opacidad en sus cuatro orillas —una máscara— y por donde se va apareciendo el fondo de la sección, que ya es #0E151E. No hay banda ni sombra: la foto simplemente deja de ser foto y pasa a ser fondo. Las dos máscaras —la de los lados y la de la altura— se cruzan con `mask-composite: intersect`: manda la más transparente de las dos en cada punto. */ .prisma__escena{ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 2%, rgba(0,0,0,.62) 5%, rgba(0,0,0,.9) 8%, #000 12%, #000 88%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.62) 95%, rgba(0,0,0,.18) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 1.5%, rgba(0,0,0,.9) 3.5%, #000 6%, #000 34%, rgba(0,0,0,.92) 48%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.22) 80%, rgba(0,0,0,.08) 90%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 2%, rgba(0,0,0,.62) 5%, rgba(0,0,0,.9) 8%, #000 12%, #000 88%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.62) 95%, rgba(0,0,0,.18) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 1.5%, rgba(0,0,0,.9) 3.5%, #000 6%, #000 34%, rgba(0,0,0,.92) 48%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.22) 80%, rgba(0,0,0,.08) 90%, transparent 100%) !important; -webkit-mask-composite:source-in !important; mask-composite:intersect !important; } /* y el velo vuelve a ser sólo el de la altura: las orillas ya no se pintan, se desvanecen */ .prisma__velo{ background:linear-gradient(180deg, rgba(14,21,30,.42) 0%, rgba(14,21,30,.34) 18%, rgba(14,21,30,.46) 34%, rgba(14,21,30,.64) 48%, rgba(14,21,30,.82) 62%, rgba(14,21,30,.94) 74%, #0E151E 86%) !important; } @media (hover:hover){ #sections-container > section.prisma .prisma__escena, #sections-container > section.prisma .prisma__cab, #sections-container > section.prisma .prisma__caras{ transition:filter .75s cubic-bezier(.16,1,.3,1), opacity .75s cubic-bezier(.16,1,.3,1) !important; } /* LA FOTO SE FUNDE CON EL FONDO. Baja la luz un punto y, sobre todo, baja su opacidad: lo que se ve por debajo es el color de la sección, así que el apagado llega hasta el fondo. */ #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__escena{ opacity:.58 !important; filter:brightness(.58) contrast(1.02) saturate(.88) !important; } /* el título se retira un paso */ #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__cab{ opacity:.58 !important; } } @media (prefers-reduced-motion: reduce){ #sections-container > section.prisma .prisma__escena, #sections-container > section.prisma .prisma__cab, #sections-container > section.prisma .prisma__caras{ transition-duration:.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LA LÁMINA: MÁS ANCHA, CON AIRE, Y FUNDIDA CON LO DE AFUERA (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── · «Dame más ancho a la imagen, queda mucho a los lados.» La sección se salía apenas hasta 74rem dentro de un contenedor de 80: sobraba página a ambos lados. Ahora se lleva casi todo el ancho de la ventana —hasta 92rem— saliéndose del contenedor con márgenes negativos calculados, que es la forma de que un bloque interior llegue al borde sin sacarlo de su sitio en la columna. · «Todo muy pegado al borde.» El aire interior sube de 2.6rem a 4rem: las tarjetas y el título respiran dentro de la lámina en vez de rozarla. · «Redondeá las esquinas de lo de atrás.» Vuelven, a 28px. No vuelven ni el borde de un píxel ni la sombra: eran ellos los que dibujaban el canto, no el radio. · Las orillas siguen desvaneciéndose —la lámina pierde opacidad en sus cuatro lados— pero el fundido se acorta, para que la esquina redondeada se note. ═══════════════════════════════════════════════════════════════════════════ */ #sections-container > section.prisma{ /* OJO: la raíz de NIDO mide 13.6px, no 16, así que en rem la lámina se quedaba corta. Va en píxeles y contra el ancho de la ventana: casi todo, con un dedo de aire a los lados. */ /* El aire de los lados no puede ser el mismo en una pantalla de 1500 que en una de 375: seis rem se comían un cuarto del teléfono (Luis pidió revisar el móvil). Ahora el margen crece con la pantalla y nunca baja de un dedo. */ --lamina:min(1560px, calc(100vw - clamp(1.4rem, 4.5vw, 6rem))); width:var(--lamina) !important; max-width:var(--lamina) !important; margin-left:calc((100% - var(--lamina)) / 2) !important; margin-right:calc((100% - var(--lamina)) / 2) !important; padding:0 clamp(1.4rem, 3.2vw, 4rem) clamp(2rem, 3vw, 3rem) !important; border:0 !important; box-shadow:none !important; border-radius:28px !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) .7%, rgba(0,0,0,.85) 1.4%, #000 2.4%, #000 97.6%, rgba(0,0,0,.85) 98.6%, rgba(0,0,0,.45) 99.3%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) .35%, rgba(0,0,0,.88) .7%, #000 1.3%, #000 98.7%, rgba(0,0,0,.88) 99.3%, rgba(0,0,0,.5) 99.65%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) .7%, rgba(0,0,0,.85) 1.4%, #000 2.4%, #000 97.6%, rgba(0,0,0,.85) 98.6%, rgba(0,0,0,.45) 99.3%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) .35%, rgba(0,0,0,.88) .7%, #000 1.3%, #000 98.7%, rgba(0,0,0,.88) 99.3%, rgba(0,0,0,.5) 99.65%, transparent 100%) !important; -webkit-mask-composite:source-in !important; mask-composite:intersect !important; } /* ═══════════════════════════════════════════════════════════════════════════ CUANDO SE APAGA, SE APAGA TODO LO DE ATRÁS (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «No sólo lo de PRISMA.» Antes bajaba la luz dentro de la sección y el resto de NIDO seguía encendido, así que la tarjeta competía con la portada, el buscador y las demás secciones. Ahora baja todo: el brillo de ambiente del fondo, la portada, el buscador, el pie, las otras secciones y el color mismo de la página. Queda la tarjeta y nada más. ═══════════════════════════════════════════════════════════════════════════ */ @media (hover:hover){ body#app-body, body > .ambient-background, body > header, body > #buscador-proveedores, body > footer, #sections-container > section:not(.prisma){ transition:opacity .75s cubic-bezier(.16,1,.3,1), background-color .75s cubic-bezier(.16,1,.3,1) !important; } body:has(#sections-container a.prisma__cara:hover){ background-color:#080D13 !important; } body:has(#sections-container a.prisma__cara:hover) > .ambient-background{ opacity:.2 !important; } body:has(#sections-container a.prisma__cara:hover) > header, body:has(#sections-container a.prisma__cara:hover) > #buscador-proveedores, body:has(#sections-container a.prisma__cara:hover) > footer{ opacity:.26 !important; } #sections-container:has(a.prisma__cara:hover) > section:not(.prisma){ opacity:.26 !important; } } @media (prefers-reduced-motion: reduce){ body#app-body, body > .ambient-background, body > header, body > #buscador-proveedores, body > footer, #sections-container > section:not(.prisma){ transition-duration:.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EL CIERRE DE NIDO: LA MISMA PLAYA, AL REVÉS (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Ese cierre puede ser mucho mejor: una imagen de mar cerrando ahí, y después arena y bosque, pero tenue al fondo, no como arriba. Algo así, curioso.» Es la MISMA fotografía con que abre PRISMA, espejada: arriba abre con el bosque y abajo cierra con el mar —la página entra por la copa y sale por el agua—. Y va tenue: media luz, media opacidad y desvanecida por los cuatro lados, para que el logo siga siendo lo que se lee. El pie pierde su vidrio y su línea: si hay fotografía, el panel sobra. OJO con el orden: la máscara se escribe ANTES del volteo, así que arriba y abajo van cambiados respecto a lo que se ve. ═══════════════════════════════════════════════════════════════════════════ */ body#app-body > footer, body > footer{ position:relative; overflow:hidden; isolation:isolate; background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-top:0 !important; } body > footer::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; /* Su propia playa —Luis la eligió—: cenital, el mar turquesa arriba, la arena cruzando al medio y el bosque cerrando abajo. Ya viene en ese orden, así que no hace falta voltearla: PRISMA abre con la copa del bosque y NIDO cierra con el agua. */ background:url("fotos/1789293159688-25981e792f86.webp") center 71% / cover no-repeat; filter:brightness(.5) saturate(.95) contrast(1.02); opacity:.62; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.76) 34%, #000 46%, #000 82%, rgba(0,0,0,.6) 91%, rgba(0,0,0,.22) 97%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 3%, rgba(0,0,0,.72) 7%, #000 13%, #000 87%, rgba(0,0,0,.72) 93%, rgba(0,0,0,.3) 97%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.14) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.76) 34%, #000 46%, #000 82%, rgba(0,0,0,.6) 91%, rgba(0,0,0,.22) 97%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 3%, rgba(0,0,0,.72) 7%, #000 13%, #000 87%, rgba(0,0,0,.72) 93%, rgba(0,0,0,.3) 97%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* una tinta encima, para que la letra del cierre se lea sin depender de la foto */ body > footer::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(20,29,39,0) 0%, rgba(20,29,39,.10) 12%, rgba(20,29,39,.22) 30%, rgba(20,29,39,.46) 52%, rgba(20,29,39,.7) 74%, rgba(20,29,39,.9) 92%, #141D27 100%); } /* el logo y la firma, un punto más presentes sobre la fotografía */ body > footer #lock-container span{ text-shadow:0 1px 2px rgba(6,12,18,.9), 0 6px 22px rgba(6,12,18,.7); } /* ═══════════════════════════════════════════════════════════════════════════ EL BORDE DE ARRIBA, TAN SUAVE COMO EL DE ABAJO (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «El difuminado de abajo está bien; arriba quiero más, para que la orilla no se marque tanto entre la imagen y el fondo.» Arriba el fundido duraba veinte píxeles —prácticamente un canto— mientras abajo se tomaba media lámina. Ahora la fotografía nace del fondo: entra en unos noventa píxeles, y la lámina que la sostiene, en unos setenta. Los dos desvanecidos se suman, así que el paso del color de la página a la copa del bosque ya no tiene filo. ═══════════════════════════════════════════════════════════════════════════ */ .prisma__escena{ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 2%, rgba(0,0,0,.62) 5%, rgba(0,0,0,.9) 8%, #000 12%, #000 88%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.62) 95%, rgba(0,0,0,.18) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 4%, rgba(0,0,0,.45) 9%, rgba(0,0,0,.76) 14%, #000 21%, #000 38%, rgba(0,0,0,.92) 50%, rgba(0,0,0,.72) 61%, rgba(0,0,0,.45) 71%, rgba(0,0,0,.22) 81%, rgba(0,0,0,.08) 90%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 2%, rgba(0,0,0,.62) 5%, rgba(0,0,0,.9) 8%, #000 12%, #000 88%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.62) 95%, rgba(0,0,0,.18) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 4%, rgba(0,0,0,.45) 9%, rgba(0,0,0,.76) 14%, #000 21%, #000 38%, rgba(0,0,0,.92) 50%, rgba(0,0,0,.72) 61%, rgba(0,0,0,.45) 71%, rgba(0,0,0,.22) 81%, rgba(0,0,0,.08) 90%, transparent 100%) !important; } /* y la lámina entra con el mismo cuidado por arriba (abajo se queda como estaba, que gusta) */ #sections-container > section.prisma{ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) .7%, rgba(0,0,0,.85) 1.4%, #000 2.4%, #000 97.6%, rgba(0,0,0,.85) 98.6%, rgba(0,0,0,.45) 99.3%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 1.2%, rgba(0,0,0,.55) 2.6%, rgba(0,0,0,.85) 3.8%, #000 5.2%, #000 98.7%, rgba(0,0,0,.88) 99.3%, rgba(0,0,0,.5) 99.65%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) .7%, rgba(0,0,0,.85) 1.4%, #000 2.4%, #000 97.6%, rgba(0,0,0,.85) 98.6%, rgba(0,0,0,.45) 99.3%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 1.2%, rgba(0,0,0,.55) 2.6%, rgba(0,0,0,.85) 3.8%, #000 5.2%, #000 98.7%, rgba(0,0,0,.88) 99.3%, rgba(0,0,0,.5) 99.65%, transparent 100%) !important; } /* ═══════════════════════════════════════════════════════════════════════════ EL DIFUMINADO VA HACIA AFUERA, NO HACIA ADENTRO (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Para nada es el difuminado que pedí: lo hiciste para dentro y debe ser para fuera, y debe estar en todo; debe realmente unirse con el fondo, todo.» Tenía razón y el error era de concepto. Hasta ahora la fotografía se apagaba DENTRO de su propio rectángulo: se encogía, y el rectángulo seguía ahí. Lo que hay que hacer es lo contrario: que la fotografía SE SALGA —más ancha y más alta que la sección— y que el desvanecido ocurra en ese terreno de más, sobre el fondo de la página. El borde recto de la imagen queda fuera de la vista; lo que se ve es cómo muere. Y para que eso funcione hay que desmontar la lámina, porque una lámina siempre tiene canto: · la sección se queda SIN fondo propio, sin máscara y sin recorte —`overflow:visible`—, así lo que la foto derrame no se corta; · la tinta que sostiene a las tarjetas deja de ser un bloque de color y pasa a ser un degradado que termina exactamente en el color de la página: donde acaba, no hay nada que acabe; · las dos capas se extienden lo mismo y llevan la misma máscara, así que se van juntas. ═══════════════════════════════════════════════════════════════════════════ */ #sections-container > section.prisma{ background:transparent !important; overflow:visible !important; border-radius:0 !important; -webkit-mask-image:none !important; mask-image:none !important; -webkit-mask-composite:add !important; mask-composite:add !important; } /* LA FOTOGRAFÍA, derramada: 6rem por arriba y 5rem por cada lado fuera de la sección. */ .prisma__escena{ top:-6rem !important; left:-5rem !important; right:-5rem !important; bottom:auto !important; height:calc(min(60%, 33rem) + 6rem) !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.17) 7%, rgba(0,0,0,.4) 11.5%, rgba(0,0,0,.7) 16%, #000 22%, #000 78%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.4) 88.5%, rgba(0,0,0,.17) 93%, rgba(0,0,0,.05) 97%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.88) 20%, #000 26%, #000 44%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.72) 65%, rgba(0,0,0,.45) 74%, rgba(0,0,0,.22) 83%, rgba(0,0,0,.08) 91%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.17) 7%, rgba(0,0,0,.4) 11.5%, rgba(0,0,0,.7) 16%, #000 22%, #000 78%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.4) 88.5%, rgba(0,0,0,.17) 93%, rgba(0,0,0,.05) 97%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.88) 20%, #000 26%, #000 44%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.72) 65%, rgba(0,0,0,.45) 74%, rgba(0,0,0,.22) 83%, rgba(0,0,0,.08) 91%, transparent 100%) !important; -webkit-mask-composite:source-in !important; mask-composite:intersect !important; } /* LA TINTA, derramada igual y con la misma máscara lateral: empieza en nada, sostiene a las tarjetas y termina en el color exacto de la página, que es donde deja de existir. */ .prisma__velo{ /* También por abajo: la tinta no termina, se va. Antes llegaba al pie de la sección todavía opaca y ahí aparecía de golpe el fondo de la página, que lleva su propio brillo de ambiente — ese era el canto horizontal. Ahora el velo se estira 7rem por debajo del final y en ese tramo se disuelve hasta desaparecer (Luis: «difuminá el final también hacia abajo con el otro color»). */ top:-6rem !important; left:-5rem !important; right:-5rem !important; bottom:-7rem !important; background:linear-gradient(180deg, rgba(20,29,39,0) 0%, rgba(20,29,39,.10) 9%, rgba(20,29,39,.28) 20%, rgba(20,29,39,.36) 29%, rgba(20,29,39,.50) 38%, rgba(20,29,39,.70) 47%, rgba(20,29,39,.86) 55%, rgba(20,29,39,.96) 62%, #141D27 70%, #141D27 84%, rgba(20,29,39,.88) 91%, rgba(20,29,39,.52) 96%, rgba(20,29,39,0) 100%) !important; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.17) 7%, rgba(0,0,0,.4) 11.5%, rgba(0,0,0,.7) 16%, #000 22%, #000 78%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.4) 88.5%, rgba(0,0,0,.17) 93%, rgba(0,0,0,.05) 97%, transparent 100%) !important; mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.17) 7%, rgba(0,0,0,.4) 11.5%, rgba(0,0,0,.7) 16%, #000 22%, #000 78%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.4) 88.5%, rgba(0,0,0,.17) 93%, rgba(0,0,0,.05) 97%, transparent 100%) !important; } /* EL CIERRE: que la imagen se vea más (Luis). Sube la luz y la presencia, y se le quita el fundido de los lados: el pie ya llega de borde a borde de la ventana, ahí no hay nada que unir. */ body > footer::before{ filter:brightness(.72) saturate(1.02) contrast(1.02) !important; opacity:.88 !important; /* Sin cola abajo: la fotografía llega entera al final de la página y ahí termina, porque ahí termina todo (Luis: «eliminá el degradado del final»). El desvanecido sólo va arriba, que es donde nace del fondo. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 6%, rgba(0,0,0,.52) 13%, rgba(0,0,0,.84) 20%, #000 27%, #000 100%) !important; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 6%, rgba(0,0,0,.52) 13%, rgba(0,0,0,.84) 20%, #000 27%, #000 100%) !important; -webkit-mask-composite:add !important; mask-composite:add !important; } body > footer::after{ background:linear-gradient(180deg, rgba(20,29,39,0) 0%, rgba(20,29,39,.06) 14%, rgba(20,29,39,.16) 38%, rgba(20,29,39,.3) 62%, rgba(20,29,39,.34) 84%, rgba(20,29,39,.34) 100%) !important; } /* ═══════════════════════════════════════════════════════════════════════════ LA FOTO ANCHA, LAS TARJETAS ANGOSTAS (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «El ancho de la imagen está bien, pero las tarjetas deben ser más angostas, como antes.» Al ensanchar la sección para que la fotografía llegara lejos, el contenido se fue con ella. Se separan las dos cosas: la sección sigue ancha —es el lienzo de la foto— y lo que se lee vuelve a su columna de 940px, que es justo lo que medía antes. */ #sections-container > section.prisma > .prisma__cab, #sections-container > section.prisma > .prisma__caras{ width:100% !important; max-width:940px !important; margin-left:auto !important; margin-right:auto !important; } /* Con cuatro columnas (desde 1280 px, doce caras) la rejilla se abre a 1240px para que cada tarjeta conserve su ancho de siempre —unos 300px, lo que medía cada una de las tres en 940— y no se angoste más: a 940 quedaban de 224 y el nombre (HORMIGA) no cabía. La cabecera sigue en su columna de 940. */ @media (min-width:1280px){ #sections-container > section.prisma > .prisma__caras{ max-width:1240px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ AIRE ENTRE SECCIONES, Y MÁS FONDO EN LAS ORILLAS (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── · «Dale espacio entre una sección y otra, sin dañar el degradado.» El problema no era el margen sino que la fotografía se derrama 6rem hacia arriba y la tinta 7rem hacia abajo: esos desvanecidos se comían todo el aire y las secciones se tocaban. Ahora el margen cuenta con ellos —arriba y abajo— y queda espacio de verdad DESPUÉS del degradado. · «El fondo de atrás podría verse un poco más a los lados, generando más degradado.» El desvanecido lateral pasa de unos 170px a unos 350px: la imagen entrega las orillas mucho antes y el color de la página respira a los dos costados. ═══════════════════════════════════════════════════════════════════════════ */ #sections-container > section.prisma{ margin-top:8rem !important; margin-bottom:21rem !important; } /* el campo libre donde corre el oleaje (antes 11rem) */ /* ═══════════════════════════════════════════════════════════════════════════ LOS BOTONES SIN FOTO: RELIEVE Y RELLENO (Luis, 2026-09-28) ─────────────────────────────────────────────────────────────────────────── De los dos modelos que trajo, éste: «me gusta la versión de relieve, relleno». La píldora sale de la superficie con una sombra larga, y a la izquierda lleva el sello de su sección —el mismo punto de color de antes, ahora en relieve, como una perla—. Al pasar: «que el círculo se expanda y le dé el mismo color a todo el botón, pero que el botón adquiera el relieve de ese circulito». El sello late una vez y se derrama: un círculo del mismo color y con la misma luz (arriba a la izquierda) y sombra (abajo a la derecha) crece desde el sello hasta cubrir la píldora, que sube y queda como una sola pieza en relieve. Al salir, el color se recoge de vuelta al sello. Todos del mismo tamaño —también Mapa de Ecosistemas y Descripciones— y el nombre en la letra de siempre, siempre en una sola línea. Sin íconos: el sello dice la sección. ═══════════════════════════════════════════════════════════════════════════ */ /* La fila es su propio escenario (isolation): la sombra y la luz de cada botón viven en su capa de atrás, debajo de TODOS los botones de la fila; así la luz del de abajo nunca pasa por encima del de arriba (Luis, 2026-09-28). Y un poco más de aire entre filas, para que se lea cada relieve. */ .prisma__apps, .prisma__ecos{ display:flex; flex-wrap:wrap; justify-content:center; --gx:.9rem; gap:2.2rem var(--gx); --col:3; isolation:isolate; } /* la fila corta queda al medio */ /* Todos del mismo ancho: la fila de los ecosistemas vive en la columna de 940px de la sección PRISMA y las demás en secciones de 72rem, así que un porcentaje daba botones distintos. Las dos miden contra el contenedor de las secciones (72rem como máximo). */ #sections-container{ container-type:inline-size; } .prisma__apps > a, .prisma__ecos > a{ min-width:0; flex:0 0 min(100%, calc((min(72rem, 100cqw) - (var(--col) - 1) * var(--gx)) / var(--col))); } /* Mapa y Descripciones, siempre lado a lado mientras quepan (Luis, 2026-09-28): del ancho de los demás cuando hay lugar, y si no, cada uno la mitad de su fila. */ .prisma__ecos > a{ flex-basis:min(calc((100% - var(--gx)) / 2), calc((min(72rem, 100cqw) - (var(--col) - 1) * var(--gx)) / var(--col))); } a.prisma__app, a.prisma__eco{ --x:calc(1.45rem + 6px); --r:6px; --claro:color-mix(in srgb, var(--acento) 72%, #fff); --hondo:color-mix(in srgb, var(--acento) 70%, #000); position:relative; display:flex; align-items:center; justify-content:center; min-height:3.7rem; padding:1rem 1.6rem 1rem 3.4rem; border-radius:999px; text-decoration:none; background:#18232F; border:1px solid rgba(234,223,206,.07); --luz:color-mix(in srgb, var(--acento) 16%, transparent); transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, background-color .5s ease; } /* el relieve: la sombra de abajo a la derecha y la luz de su color arriba a la izquierda, en la capa de atrás de la fila */ .prisma__relieve{ position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; box-shadow:12px 14px 28px rgba(0,0,0,.6), -8px -8px 22px var(--luz); transition:box-shadow .55s cubic-bezier(.16,1,.3,1); } /* el sello en reposo: una perla del color de la sección */ a.prisma__app::after, a.prisma__eco::after{ content:""; position:absolute; z-index:0; top:50%; left:calc(var(--x) - var(--r)); width:calc(var(--r) * 2); height:calc(var(--r) * 2); margin-top:calc(var(--r) * -1); border-radius:50%; background:radial-gradient(circle at 34% 28%, var(--claro) 0%, var(--acento) 48%, var(--hondo) 100%); box-shadow:2px 3px 5px rgba(0,0,0,.6), -1px -1px 3px var(--luz); } /* el derrame: nace del tamaño exacto del sello y crece hasta cubrir la píldora */ a.prisma__app::before, a.prisma__eco::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background:radial-gradient(140% 220% at 22% 18%, var(--claro) 0%, var(--acento) 42%, var(--hondo) 100%); box-shadow:inset 2px 2px 1px -1px rgba(255,255,255,.28), inset -3px -4px 10px rgba(0,0,0,.28); clip-path:circle(var(--r) at var(--x) 50%); opacity:0; transition:clip-path .5s cubic-bezier(.55,0,.1,1), opacity 0s linear .5s; } /* el nombre: la letra de siempre, en una sola línea */ a.prisma__app span, a.prisma__eco span{ position:relative; z-index:2; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:Marcellus, 'PP Fragment Glare', Georgia, serif; font-size:1rem; letter-spacing:.13em; line-height:1.25; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(6,12,18,.7); transition:color .4s ease, letter-spacing .8s cubic-bezier(.16,1,.3,1), text-shadow .4s ease; } /* al pasar (y con el teclado): el sello late y se derrama */ a.prisma__app:is(:hover, :focus-visible), a.prisma__eco:is(:hover, :focus-visible){ transform:translateY(-3px); border-color:transparent; outline:none; } a:is(:hover, :focus-visible) > .prisma__relieve{ box-shadow:14px 20px 34px rgba(0,0,0,.6), -10px -10px 28px color-mix(in srgb, var(--acento) 26%, transparent); } a.prisma__app:is(:hover, :focus-visible)::after, a.prisma__eco:is(:hover, :focus-visible)::after{ animation:nidoLate .32s cubic-bezier(.3,0,.2,1); } a.prisma__app:is(:hover, :focus-visible)::before, a.prisma__eco:is(:hover, :focus-visible)::before{ clip-path:circle(160% at var(--x) 50%); opacity:1; transition:clip-path .85s cubic-bezier(.7,0,.15,1) .12s, opacity 0s linear .12s; } a.prisma__app:is(:hover, :focus-visible) span, a.prisma__eco:is(:hover, :focus-visible) span{ color:#FFFFFF; letter-spacing:.16em; text-shadow:0 1px 2px rgba(6,12,18,.55), 0 4px 14px rgba(6,12,18,.35); } /* sobre la crema, el nombre en tinta y sin sombra */ .prisma-seccion--clara a.prisma__app:is(:hover, :focus-visible) span{ color:#1A2633; text-shadow:none; } @keyframes nidoLate{ 0%{ transform:scale(1); } 45%{ transform:scale(1.55); } 100%{ transform:scale(1); } } /* las hermanas se retiran */ @media (hover:hover){ /* sin filter sobre el botón: un filter lo volvería escenario propio y su luz subiría otra vez */ .prisma__apps:hover a.prisma__app:not(:hover), .prisma__ecos:hover a.prisma__eco:not(:hover){ background-color:#131C26; } .prisma__apps:hover a.prisma__app:not(:hover) > span, .prisma__ecos:hover a.prisma__eco:not(:hover) > span, .prisma__apps:hover a.prisma__app:not(:hover)::after, .prisma__ecos:hover a.prisma__eco:not(:hover)::after{ opacity:.55; } } @media (prefers-reduced-motion: reduce){ a.prisma__app, a.prisma__eco, a.prisma__app::before, a.prisma__eco::before, .prisma__relieve{ transition:none; } a.prisma__app:is(:hover, :focus-visible), a.prisma__eco:is(:hover, :focus-visible){ transform:none; } a.prisma__app:is(:hover, :focus-visible)::after, a.prisma__eco:is(:hover, :focus-visible)::after{ animation:none; } } @media (max-width:900px){ .prisma__apps, .prisma__ecos{ --col:2; } } @media (max-width:560px){ .prisma__apps, .prisma__ecos{ --col:1; } a.prisma__app, a.prisma__eco{ --x:calc(1.1rem + 6px); min-height:3.2rem; padding:.85rem 1.2rem .85rem 2.8rem; } a.prisma__app span, a.prisma__eco span{ font-size:.94rem; letter-spacing:.1em; } } @media (max-width:480px){ .prisma__ecos > a{ flex-basis:100%; } } /* ═══════════════════════════════════════════════════════════════════════════ LA FIRMA DEL CIERRE (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Incrementá el tamaño del nombre, eliminá esa línea divisora y subilo un poquito.» La línea se va; el acceso administrativo que vivía en medio de ella se queda —invisible pero en su sitio, para no perder la puerta—. El nombre dobla su tamaño y «Costa Rica · Pura Vida» lo acompaña con más aire entre letras. Y todo sube: el pie mantiene su altura, pero la firma se apoya más arriba, sobre el agua. ═══════════════════════════════════════════════════════════════════════════ */ /* el aire de arriba, con el peso justo para ganarle a la py-16 de Tailwind: deja el logo donde va */ body#app-body > footer.relative{ padding-top:15rem !important; padding-bottom:10rem !important; } /* la línea divisora, fuera; el disparador del modo administrador sigue ahí, sin dibujo */ body > footer > div.max-w-md{ margin-bottom:1.2rem !important; gap:0 !important; min-height:0 !important; } body > footer > div.max-w-md > div[class*="h-[1px]"]{ display:none !important; } body > footer #unlock-trigger{ width:26px !important; height:26px !important; opacity:0 !important; } /* el nombre, al doble */ body > footer #lock-container span.font-display{ font-size:clamp(2rem, 3.4vw, 3.1rem) !important; letter-spacing:.06em !important; line-height:1.1 !important; text-shadow:0 1px 3px rgba(6,12,18,.92), 0 8px 30px rgba(6,12,18,.75) !important; } /* «Costa Rica · Pura Vida», más presente */ body > footer p{ font-size:.86rem !important; letter-spacing:.48em !important; margin-top:.9rem !important; color:rgba(255,255,255,.88) !important; text-shadow:0 1px 3px rgba(6,12,18,.92), 0 6px 22px rgba(6,12,18,.7) !important; } /* el año, un paso más chico y más tenue que el lema */ body > footer p.lujo-cierre-anio{ margin-top:-.4rem !important; font-size:.7rem !important; color:rgba(255,255,255,.62) !important; } @media (max-width:640px){ body#app-body > footer.relative{ padding-top:9rem !important; padding-bottom:5rem !important; } body > footer p{ letter-spacing:.32em !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EL LOGO DEL CIERRE (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── Estaba mirando el sitio equivocado: el nombre que agrandé antes (#lock-container) está oculto; lo que se ve en el pie es la imagen de la marca dentro de .lujo-cierre-marca, que medía 40px de alto. Ahora crece a más del doble. Y la línea divisora no era ninguna de las dos de Tailwind sino el ::before de ese mismo bloque —520 × 1px de crema—: se va, y con ella los 2.2rem que reservaba, así que la firma sube sola. */ .lujo-cierre-marca::before{ display:none !important; } .lujo-cierre-marca{ gap:1.3rem !important; } .lujo-cierre-marca img{ height:clamp(58px, 6.4vw, 96px) !important; opacity:1 !important; filter:drop-shadow(0 2px 6px rgba(6,12,18,.9)) drop-shadow(0 12px 38px rgba(6,12,18,.65)) !important; } /* ═══════════════════════════════════════════════════════════════════════════ LA IMAGEN DE PRISMA, A SANGRE Y SIN LADOS (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «La imagen de atrás de PRISMA no debería tener difuminado a los lados; debería ser como la de abajo: difuminado arriba, después la imagen sin difuminar, después se difumina con el color… para que haya conexión entre esa imagen de arriba y la de abajo.» Las dos fotografías de la página pasan a tratarse igual: van de borde a borde de la ventana —ni orilla ni fundido lateral, como el cierre—, nacen del fondo por arriba y mueren en el color por abajo. Lo único que se desvanece es lo que toca al fondo, arriba y abajo; a los costados no hay nada que unir porque no hay borde: la imagen sale de la pantalla. El truco de ancho completo es el clásico: el borde izquierdo al centro de la sección (`left:50%`) y de ahí media ventana hacia atrás (`margin-left:-50vw`), con `width:100vw`. ═══════════════════════════════════════════════════════════════════════════ */ .prisma__escena{ left:50% !important; right:auto !important; margin-left:-50vw !important; width:100vw !important; top:-6rem !important; bottom:auto !important; height:calc(min(60%, 33rem) + 6rem) !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.88) 20%, #000 26%, #000 46%, rgba(0,0,0,.92) 56%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.22) 84%, rgba(0,0,0,.08) 92%, transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.88) 20%, #000 26%, #000 46%, rgba(0,0,0,.92) 56%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.22) 84%, rgba(0,0,0,.08) 92%, transparent 100%) !important; -webkit-mask-composite:add !important; mask-composite:add !important; } /* la tinta hace el mismo recorrido y tampoco tiene lados */ .prisma__velo{ left:50% !important; right:auto !important; margin-left:-50vw !important; width:100vw !important; top:-6rem !important; bottom:-7rem !important; -webkit-mask-image:none !important; mask-image:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ LA PRIMERA PANTALLA (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Esta pantalla es la que más impacto debe tener, porque es el inicio de todo, donde empieza la navegación. Después bajamos a PRISMA, el mar de aplicaciones, y cierra en el mar de abajo.» Las tres escenas de la página pasan a hablar el mismo idioma. La de abajo y la de PRISMA ya son imagen a sangre; ésta seguía siendo una foto con un bloque de texto flotando encima y, debajo, el buscador en su propia caja. Ahora: · la escena ocupa la ventana entera y el buscador vive DENTRO, al pie: la primera pantalla no sólo se mira, se usa; · manda NIDO. El logo de la casa se queda —es la firma— pero cede el tamaño: pasa de 589px de ancho a la mitad, y el nombre de la app crece al triple. Antes competían y ganaba el logo, que es lo que uno ya sabe; ahora se lee primero dónde está; · nada flota: se le quita el balanceo al bloque, que restaba solidez a la entrada; · y al pie, una línea que respira con el rótulo «El ecosistema»: dice que hay más abajo sin poner una flecha. TODO cuelga de la clase `portada-top`. Para volver a la portada de antes se quita esa clase (en accesos-prisma.js, la función portadaTop) y nada más. ═══════════════════════════════════════════════════════════════════════════ */ body.portada-top > header{ min-height:100svh !important; justify-content:center !important; padding-top:5rem !important; padding-bottom:7rem !important; } /* abajo, el sitio del pie (lugar y fecha): en ventanas bajas se montaba sobre el buscador */ /* nada flota: la entrada se apoya */ body.portada-top > header .animate-float{ animation:none !important; } /* la marca y el nombre suben un poco; el buscador y su línea se quedan donde están (Luis, 2026-09-28). Se corre sólo el dibujo: el buscador no se entera, y la portada de carga sigue calzando porque calzarPortada mide dónde cae NIDO, con este corrimiento incluido. */ body.portada-top > header > .animate-float{ transform:translateY(-2.2rem); } @media (max-width:640px){ body.portada-top > header > .animate-float{ transform:translateY(-1.4rem); } } /* LA MARCA Y EL NOMBRE, IDÉNTICOS EN LAS DOS PANTALLAS (Luis, 2026-09-22) «El NIDO de la pantalla de carga tiene que calzar milimétricamente con el de la portada, y el logo lo quiero mucho más grande, como al inicio: que sea lo que explota.» Achicar el logo fue un error mío —la marca es lo que abre la casa— y además rompió el calce entre las dos pantallas, que compartían medidas. Estas reglas NO cuelgan de `portada-top`: son globales, así que la portada de carga y la portada real reciben exactamente los mismos números y vuelven a superponerse sin un salto. */ .lujo-logo{ height:auto !important; width:min(600px, 80vw) !important; opacity:1 !important; margin-bottom:1.2rem !important; } /* NIDO y ACCESOS: sus medidas viven en accesos-lujo.css, también globales (Luis, 2026-09-28). */ /* EL BUSCADOR, dentro de la escena: la primera pantalla se usa, no sólo se mira. LA FIRMA CON ESTRELLA (Luis, 2026-09-28: la propuesta S1). No es una caja: el texto centrado en la letra de la casa —«Buscar un proveedor» en reposo; al tocarlo, la pista de qué se puede buscar, más chica y tenue (el texto lo cambia el guion, traducirPortada)— y una línea que se desvanece en las puntas y que en el centro corta la estrella de 8 puntas, que gira un cuarto al tocar el buscador (un cuarto: sus puntas largas y cortas vuelven a caer donde estaban). Sin lupa: el texto dice qué se busca. Sin vidrio ni desenfoque: con fondo transparente, el desenfoque solo ya dibujaba una caja oscura. */ body.portada-top > header #buscador-proveedores{ position:relative !important; z-index:20 !important; width:min(820px, 88vw) !important; margin:3.2rem auto 0 !important; } body.portada-top > header #buscador-proveedores .bp-caja{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } body.portada-top > header #buscador-proveedores .bp-caja::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.7) 22%, rgba(255,255,255,.7) calc(50% - 20px), transparent calc(50% - 20px), transparent calc(50% + 20px), rgba(255,255,255,.7) calc(50% + 20px), rgba(255,255,255,.7) 78%, transparent 100%); } body.portada-top > header #buscador-proveedores .bp-caja::before{ content:""; position:absolute; left:50%; bottom:-10px; width:20px; height:20px; margin-left:-10px; pointer-events:none; background:url("marca/estrella-clara.png") center/contain no-repeat; /* a 20 px el trazo es tan fino que se leía gris junto a la de la carga (brillo 136 contra 198): dos filetes blancos de 0,4 px lo engruesan —no es un halo— y la dejan del mismo blanco. La estrella que baja de la carga termina con este mismo filtro (index.html, nidoRetirar). */ filter:drop-shadow(0 0 .4px #fff) drop-shadow(0 0 .4px #fff) drop-shadow(0 1px 6px rgba(6,12,18,.7)); transition:transform .6s cubic-bezier(.2,.7,.2,1); } body.portada-top > header #buscador-proveedores .bp-caja:focus-within{ background:transparent !important; box-shadow:none !important; } body.portada-top > header #buscador-proveedores .bp-caja:focus-within::before{ transform:rotate(90deg); } body.portada-top > header #bp-input{ font-family:Marcellus, Georgia, serif !important; font-weight:400 !important; font-size:1.45rem !important; color:#FFFFFF !important; text-align:center !important; letter-spacing:.02em !important; padding:.75rem 2.6rem 1rem !important; text-shadow:0 2px 12px rgba(6,12,18,.7); } body.portada-top > header #bp-input::placeholder{ color:rgba(255,255,255,.72) !important; } body.portada-top > header #bp-input:focus::placeholder{ font-size:1rem; letter-spacing:.03em; color:rgba(255,255,255,.45) !important; } body.portada-top > header #bp-limpiar{ color:#FFFFFF !important; right:.2rem !important; } @media (prefers-reduced-motion: reduce){ body.portada-top > header #buscador-proveedores .bp-caja::before{ transition:none; } } @media (max-width:640px){ body.portada-top > header{ padding-top:3.5rem !important; padding-bottom:4.5rem !important; } body.portada-top > header .lujo-logo{ width:min(230px, 62vw) !important; } body.portada-top > header #buscador-proveedores{ margin-top:2rem !important; } body.portada-top > header #bp-input{ font-size:1.05rem !important; padding:.6rem 2rem .9rem !important; } body.portada-top > header #bp-input:focus::placeholder{ font-size:.8rem; } } /* ═══════════════════════════════════════════════════════════════════════════ LA PORTADA, SEGUNDA PASADA (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Esa línea de abajo que dice ecosistema, quitala —después sigue ecosistema otra vez—. Y esa barra de que van pasando las imágenes no se ve bien. La primera pantalla no mejoró mucho.» Tres decisiones: · Fuera la línea del pie: decía lo mismo que el rótulo de la sección siguiente. Repetir no es guiar. · Fuera las barritas del carrusel: eran un control de una galería, y esto no es una galería; las fotos pasan solas y nadie necesita saber en cuál va. El nombre del lugar se queda, pero se retira a la esquina, en voz baja, como el pie de foto de una revista. · Y lo que faltaba de verdad: que la pantalla ESTÉ VIVA y que sea UNA PIEZA. — el saludo: la hora del día y la fecha de hoy, arriba del logo. Es el único dato de la portada que cambia solo, y basta para que no se sienta un cartel impreso; — el encuadre: cuatro ángulos finos en las esquinas, como el visor de una cámara. No dicen nada; sostienen la escena y la vuelven una pieza en vez de una foto con texto. ═══════════════════════════════════════════════════════════════════════════ */ /* las barritas del carrusel se van; el lugar se retira a la esquina. OJO con el alcance: la pantalla de carga usa la MISMA clase `lujo-pie` para su estrella, y la regla suelta se la llevaba al fondo de la pantalla (Luis: «la estrella está demasiado abajo, ya no está arriba»). Por eso ahora apunta sólo al pie que cuelga del encabezado. */ body.portada-top > header .lujo-barras{ display:none !important; } body.portada-top > header > .lujo-pie{ position:absolute !important; left:0; right:0; bottom:2.9rem; margin:0 !important; justify-content:space-between !important; align-items:baseline !important; } body.portada-top > header > .lujo-pie .lujo-lugar{ font-size:.72rem !important; letter-spacing:.32em !important; color:rgba(234,223,206,.55) !important; } /* EL ENCUADRE: cuatro ángulos */ .portada-marco{ position:absolute; inset:clamp(18px, 2.4vw, 34px); z-index:15; pointer-events:none; } .portada-marco i{ position:absolute; width:clamp(26px, 3vw, 44px); height:clamp(26px, 3vw, 44px); border:1px solid rgba(234,223,206,.30); } .portada-marco i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; } .portada-marco i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; } .portada-marco i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; } .portada-marco i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; } @media (max-width:640px){ .portada-marco{ inset:12px; } body.portada-top .lujo-pie{ bottom:1rem; } } /* Los ángulos de las esquinas, fuera: «no me gusta» (Luis, 2026-09-22). El pie de foto en la esquina, en cambio, se queda: «parece la firma de la foto y está muy bien ahí». */ body.portada-top .portada-marco{ display:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ EL BUSCADOR VOLVIÓ A RECIBIR EL DEDO (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Buscar un proveedor por nombre dejó de funcionar, y el botón de tickets tampoco.» Lo rompí yo al subir el buscador dentro de la portada: el encabezado lleva la clase `pointer-events-none` —para que el carrusel de fotos no se coma los clics— y el buscador, al mudarse ahí dentro, heredó esa sordera. Estaba entero y visible, pero ningún clic le llegaba. Se le devuelve el oído a él y a todo lo suyo. ═══════════════════════════════════════════════════════════════════════════ */ body.portada-top > header #buscador-proveedores{ pointer-events:auto !important; } body.portada-top > header #buscador-proveedores *{ pointer-events:auto !important; } /* LA FECHA del pie: la misma voz que el nombre del lugar, en la otra punta. */ .portada-fecha{ font-family:Figtree, system-ui, sans-serif; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(234,223,206,.55); text-shadow:0 2px 10px rgba(0,0,0,.8); } @media (max-width:560px){ .portada-fecha{ letter-spacing:.2em; font-size:.62rem; } body.portada-top > header > .lujo-pie .lujo-lugar{ font-size:.62rem !important; letter-spacing:.2em !important; } } /* ── EL MÓVIL DE PRISMA ─────────────────────────────────────────────────────────────────── En el teléfono la escena también se derrama, pero menos: seis rem por arriba y cinco por los lados eran medidas de escritorio y ahí dejaban la fotografía colgando fuera de cuadro. */ @media (max-width:640px){ #sections-container > section.prisma{ padding:0 1.1rem 1.6rem !important; margin-top:4.5rem !important; margin-bottom:6rem !important; } .prisma__escena{ top:-3rem !important; height:calc(min(56%, 24rem) + 3rem) !important; } .prisma__velo{ top:-3rem !important; bottom:-4rem !important; } #sections-container > section.prisma > .prisma__cab, #sections-container > section.prisma > .prisma__caras{ max-width:100% !important; } } /* La escena de PRISMA se estira a 100vw para ir de borde a borde, y 100vw INCLUYE la barra de desplazamiento: en tabletas eso deja unos píxeles de más y el documento se puede correr de lado. El cuerpo ya lo tapaba, pero la raíz no. `clip` recorta sin crear un desplazamiento nuevo —a diferencia de `hidden`, que sí lo crearía y rompería lo que se queda pegado. */ html{ overflow-x:clip; } @supports not (overflow-x: clip){ html{ overflow-x:hidden; } } /* ═══════════════════════════════════════════════════════════════════════════ LOS RESULTADOS FLOTAN, NO EMPUJAN (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Cuando busco, la tabla expande la imagen; la imagen debe mantener su tamaño y la tabla salir encima.» Al subir el buscador dentro de la portada, su tabla de resultados pasó a crecer DENTRO de la escena: el encabezado pasaba de 860 a 7042 píxeles y la fotografía se estiraba con él. Ahora la tabla sale del flujo y cuelga del buscador, por encima de la imagen, con su propio desplazamiento cuando hay muchas fichas. La escena no se entera. */ body.portada-top > header #buscador-proveedores{ position:relative !important; } body.portada-top > header #buscador-proveedores > div:not(.bp-caja){ overflow-x:hidden; border-radius:16px; box-shadow:0 34px 80px -26px rgba(6,12,18,.95); } /* La tabla flotaba, sí, pero por DEBAJO de PRISMA: el encabezado vive en la capa 10 igual que las secciones, y al venir ellas después en la página se pintan encima. Subirle la capa al encabezado siempre taparía el borde superior de la escena de PRISMA, así que se le sube sólo mientras hay tabla o el buscador tiene el foco. (Luis, 2026-09-22: «la tabla queda como oculta detrás de Prisma».) */ body.portada-top > header:has(#buscador-proveedores > div.visible), body.portada-top > header:has(#buscador-proveedores:focus-within){ z-index:60 !important; } /* Y la tabla por delante SIEMPRE (Luis: «no puede pasar por detrás, se daña todo»). El intento anterior levantaba el encabezado sólo mientras había resultados, con :has(); eso depende de que el panel lleve su clase en ese instante y es frágil. Acá no hay nada que adivinar: el encabezado vive en una capa por encima de las secciones y punto. No tapa nada —ocupa sólo la primera pantalla, y por debajo empieza PRISMA— y no roba clics, porque el encabezado es transparente al cursor salvo el buscador. */ body.portada-top > header{ z-index:60 !important; } body.portada-top > header #buscador-proveedores{ z-index:70 !important; } body.portada-top > header #buscador-proveedores > div:not(.bp-caja){ z-index:80 !important; } /* En el teléfono la tabla entraba a la fuerza en 318 píxeles y partía las palabras letra por letra («vent as@l agu nato rtug uero»). Ocho columnas no caben en una mano. Se le da a la tabla el ancho que necesita para respirar y el panel se desliza de lado: se lee, que era lo que hacía falta (Luis: «para que sea legible y se pueda leer»). */ /* ═══════════════════════════════════════════════════════════════════════════ LA TABLA EN EL TELÉFONO: TABLA, PERO SÓLO LO QUE CABE (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Quiero una tabla con varias columnas, optimizada para que no exista desplazamiento horizontal.» Probé antes convertir cada fila en una ficha de una sola columna y quedó un muro de novecientos píxeles: se veía mal y había que bajar mucho para pasar de un proveedor al siguiente. Así que vuelve a ser tabla, pero con las columnas que de verdad caben en una mano. En 325 píxeles entran tres bien, no ocho: · QUIÉN ES — el nombre y su razón social, · QUÉ ES — tipo, ecosistema y ubicación, · HASTA CUÁNDO — el vencimiento, su estado y el tarifario. Las otras cinco —identificación, comercial, contactos, pólizas y políticas— se guardan en el teléfono: en pantalla chica primero se busca y se reconoce; el detalle se consulta en la ficha completa. Las pólizas, además, ya no asoman su contenido: sólo su número. `table-layout: fixed` es lo que obliga a las tres a respetar su ancho y no estirarse. ═══════════════════════════════════════════════════════════════════════════ */ /* El corte estaba en 760 y una tableta mide 768: por nueve pixeles se colaban las ocho columnas, la tabla volvia a deslizarse y «POLITICAS» caia letra por letra en vertical. El limite pasa a 1023, que es donde de verdad deja de haber sitio. */ @media (max-width:1023px){ /* nada se desliza de lado */ body.portada-top > header #buscador-proveedores .bp-marco{ overflow:visible !important; } /* REPARTO AUTOMATICO. Con anchos fijos en porcentaje las columnas sumaban 638 de 766 y quedaban 128 pixeles muertos a la derecha —la franja que se veia mal—. Con el reparto automatico la tabla llena el contenedor de lado a lado y cada columna toma lo que su contenido pide; los minimos de abajo evitan que las pastillas se aplasten. */ body.portada-top > header #buscador-proveedores table{ min-width:0 !important; width:100% !important; table-layout:auto !important; } /* LA FRANJA MUERTA ERA UN COLGROUP. La tabla trae un que reparte el cien por ciento entre las OCHO columnas (21+13+13+17+15+9+6+6). Al esconder tres de ellas, su cuarenta y cinco por ciento se quedaba sin dueño y aparecia como una franja vacia a la derecha. Aqui se anulan esos anchos y el ancho se reparte entre las que quedan. */ body.portada-top > header #buscador-proveedores table col{ width:auto !important; } /* LAS QUE SE GUARDAN son sólo las de texto largo —identificación, comercial y contactos—, que son las que no entran de ninguna manera. Pólizas y políticas SÍ se quedan (Luis: «no salen las últimas columnas»): son dos pastillas con un número, ocupan un dedo y son justamente lo que uno mira de un vistazo. */ body.portada-top > header #buscador-proveedores th:nth-child(2), body.portada-top > header #buscador-proveedores td:nth-child(2), body.portada-top > header #buscador-proveedores th:nth-child(4), body.portada-top > header #buscador-proveedores td:nth-child(4), body.portada-top > header #buscador-proveedores th:nth-child(5), body.portada-top > header #buscador-proveedores td:nth-child(5){ display:none !important; } /* EL REPARTO DEL ANCHO. Las cinco columnas suman cien: la tabla cubre el contenedor de lado a lado y no queda ninguna franja muerta (Luis: «eso de que quede una franja vacía o una columna vacía se ve muy mal»). A pólizas y políticas se les da sitio de verdad —catorce por ciento cada una— porque con diez el rótulo «POLÍTICAS» caía en tres pedazos. */ body.portada-top > header #buscador-proveedores th:nth-child(1), body.portada-top > header #buscador-proveedores td:nth-child(1){ width:30% !important; min-width:9rem !important; } body.portada-top > header #buscador-proveedores th:nth-child(3), body.portada-top > header #buscador-proveedores td:nth-child(3){ width:22% !important; min-width:7rem !important; } body.portada-top > header #buscador-proveedores th:nth-child(6), body.portada-top > header #buscador-proveedores td:nth-child(6){ width:20% !important; min-width:6.5rem !important; } body.portada-top > header #buscador-proveedores th:nth-child(7), body.portada-top > header #buscador-proveedores td:nth-child(7){ width:14% !important; min-width:5rem !important; } body.portada-top > header #buscador-proveedores th:nth-child(8), body.portada-top > header #buscador-proveedores td:nth-child(8){ width:14% !important; min-width:5rem !important; } /* el aire de la última columna, más corto acá: con 2.4rem se comía media pastilla */ body.portada-top > header #buscador-proveedores th:last-child, body.portada-top > header #buscador-proveedores td:last-child{ padding-right:1rem !important; } /* y los encabezados, sin tanto aire entre letras, que es lo que rompía «POLÍTICAS» */ body.portada-top > header #buscador-proveedores th{ letter-spacing:.06em !important; } body.portada-top > header #buscador-proveedores th{ font-size:.48rem !important; letter-spacing:.14em !important; padding:.8rem .45rem !important; } body.portada-top > header #buscador-proveedores td{ padding:.9rem .45rem !important; vertical-align:top !important; } body.portada-top > header #buscador-proveedores .bp-celda{ gap:.4rem !important; } body.portada-top > header #buscador-proveedores .bp-rotulo{ font-size:.45rem !important; letter-spacing:.14em !important; } body.portada-top > header #buscador-proveedores .bp-valor{ font-size:.74rem !important; overflow-wrap:anywhere; line-height:1.4 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LOS DOS PANELES, CON EL VESTIDO DE NIDO (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Esa tabla tiene el diseño del panel de Terranova Accesos, no el de NIDO; puede mejorar su estructura, su elegancia, su forma luxury, sin perder lo que ya tiene. Igual el panel de tickets.» No se toca ni un dato ni una columna: lo que cambia es el material y el ritmo. · el panel deja de ser una caja opaca y pasa a ser el mismo vidrio oscuro de las píldoras, de modo que la fotografía se adivina detrás; · los encabezados bajan la voz —versalitas de crema, finas y espaciadas— y se separan del cuerpo con un filete de un píxel, no con un bloque de color; · los nombres suben la voz: Marcellus, que es la letra de la casa, donde antes había una negrita de sistema; · las filas se separan con un hilo y se encienden al pasar, como todo lo demás en PRISMA; · los rótulos de cada campo se vuelven discretos para que el dato mande. ═══════════════════════════════════════════════════════════════════════════ */ /* LA TABLA ELEVADA (Luis, 2026-09-28, con la portada C): la ley de ARIA. Tinta, crema y blanco; salvia, ocre y rojo sólo de relleno; ni negrita; radio 14; una sola sombra; filete teal bajo los títulos. La cuenta de fichas va en la letra de la casa. */ body.portada-top > header #buscador-proveedores > div:not(.bp-caja){ background:rgba(26,38,51,.9) !important; -webkit-backdrop-filter:blur(22px) saturate(1.15) !important; backdrop-filter:blur(22px) saturate(1.15) !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:14px !important; box-shadow:0 34px 80px -34px rgba(10,16,22,.92) !important; } body.portada-top > header #buscador-proveedores .bp-marco{ background:transparent !important; border:0 !important; border-radius:14px !important; } /* el rótulo de arriba: «9 fichas para tortug» */ body.portada-top > header #buscador-proveedores .bp-marco > :first-child{ padding:1.05rem 1.5rem !important; align-items:baseline !important; border-bottom:1px solid rgba(234,223,206,.12) !important; } /* los encabezados de columna, en voz baja, sobre un filete teal */ body.portada-top > header #buscador-proveedores th{ font-family:Figtree, system-ui, sans-serif !important; text-transform:uppercase !important; font-weight:400 !important; color:rgba(234,223,206,.7) !important; padding-top:.95rem !important; padding-bottom:.95rem !important; border-bottom:1px solid #006D82 !important; } /* las filas: un hilo entre ellas, y se encienden al pasar */ body.portada-top > header #buscador-proveedores tbody tr{ border-bottom:1px solid rgba(234,223,206,.08) !important; transition:background-color .35s ease !important; } body.portada-top > header #buscador-proveedores tbody tr:hover td{ background:rgba(234,223,206,.04) !important; } body.portada-top > header #buscador-proveedores td{ padding:1.2rem .9rem !important; vertical-align:top !important; border-bottom-color:rgba(234,223,206,.08) !important; } /* el nombre del proveedor, con la letra de la casa */ body.portada-top > header #buscador-proveedores .bp-fuerte{ font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-size:1.12rem !important; letter-spacing:.01em !important; line-height:1.2 !important; } /* los rótulos de cada campo se retiran; el dato manda */ body.portada-top > header #buscador-proveedores .bp-rotulo{ font-weight:400 !important; font-size:.52rem !important; letter-spacing:.18em !important; color:rgba(234,223,206,.62) !important; } body.portada-top > header #buscador-proveedores .bp-valor{ font-size:.8rem !important; font-weight:300 !important; color:#EADFCE !important; } body.portada-top > header #buscador-proveedores .bp-valor.vacio{ color:rgba(234,223,206,.35) !important; } body.portada-top > header #buscador-proveedores td a{ color:#EADFCE !important; text-decoration-color:rgba(234,223,206,.4) !important; text-underline-offset:3px; } /* la tabla no se encoge con el buscador: en escritorio toma su propio ancho, centrada (el guion la coloca bajo la caja con el ancho de la caja, que ahora es una línea de 820 px) */ @media (min-width:1024px){ body.portada-top > header #buscador-proveedores > div:not(.bp-caja){ width:min(1180px, 94vw) !important; left:max(3vw, calc(50% - 590px)) !important; } body.portada-top > header #buscador-proveedores .bp-mono{ white-space:nowrap; } } @media (max-width:560px){ body.portada-top > header #buscador-proveedores .bp-marco > :first-child{ padding:.8rem 1rem !important; } body.portada-top > header #buscador-proveedores .bp-fuerte{ font-size:1rem !important; } body.portada-top > header #buscador-proveedores .bp-cuenta{ font-size:1.02rem !important; } body.portada-top > header #buscador-proveedores td{ padding-top:.95rem !important; padding-bottom:.95rem !important; } } /* ── EL PANEL DE TICKETS ────────────────────────────────────────────────────────────────── Mismo vidrio y mismo ritmo: cada ticket es una línea con su sello a la izquierda, el nombre en Marcellus y la fecha en voz baja a la derecha. */ body.portada-top > header #buscador-proveedores .tk-fila, body.portada-top > header #buscador-proveedores .tk-item{ border-bottom:1px solid rgba(234,223,206,.07) !important; transition:background-color .35s ease !important; padding:.9rem 1rem !important; } body.portada-top > header #buscador-proveedores .tk-fila:hover, body.portada-top > header #buscador-proveedores .tk-item:hover{ background:rgba(234,223,206,.05) !important; } body.portada-top > header #buscador-proveedores .tk-nombre, body.portada-top > header #buscador-proveedores .tk-fila b{ font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-size:1rem !important; font-weight:400 !important; letter-spacing:.04em !important; color:#FFFFFF !important; } body.portada-top > header #buscador-proveedores .tk-fecha, body.portada-top > header #buscador-proveedores .tk-meta{ font-size:.56rem !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:rgba(234,223,206,.45) !important; } /* El panel de tickets por dentro: sus piezas se llaman tk-marco, tk-tipo y tk-detalle, y no las había alcanzado. El marco desaparece (el vidrio ya lo pone el panel), el tipo de ticket se vuelve un sello discreto —no una etiqueta gritada— y el detalle baja a voz de lectura. */ body.portada-top > header #buscador-proveedores .tk-marco{ background:transparent !important; border:0 !important; } body.portada-top > header #buscador-proveedores .tk-tipo{ display:inline-flex !important; align-items:center !important; padding:.28rem .75rem !important; border-radius:999px !important; background:rgba(125,155,91,.16) !important; border:1px solid rgba(125,155,91,.34) !important; font-family:Figtree, system-ui, sans-serif !important; font-size:.52rem !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:500 !important; color:rgba(234,223,206,.9) !important; } body.portada-top > header #buscador-proveedores .tk-detalle{ font-size:.8rem !important; line-height:1.55 !important; color:rgba(255,255,255,.72) !important; margin-top:.35rem !important; } /* por si el panel llega a pintarse antes de que el guion lo mire: uno sin contenido no dibuja */ body.portada-top > header #buscador-proveedores > div:not(.bp-caja):empty{ display:none !important; } /* ── EN EL TELÉFONO, DOS COLUMNAS ANCHAS ────────────────────────────────────────────────── Por debajo de 560px la vigencia ya se mudó junto a la clasificación (lo hace el guion), así que aquí sólo se esconde su columna vacía y las dos que quedan se reparten el ancho. Y se deja de partir palabras: que el renglón salte donde toca, entre palabra y palabra. */ @media (max-width:560px){ /* la vigencia ya se mudó a la clasificación, así que su columna se esconde vacía y quedan cuatro: quién es, qué es (con su vencimiento), las pólizas y las políticas. */ body.portada-top > header #buscador-proveedores th:nth-child(6), body.portada-top > header #buscador-proveedores td:nth-child(6){ display:none !important; } body.portada-top > header #buscador-proveedores th:nth-child(1), body.portada-top > header #buscador-proveedores td:nth-child(1){ width:44% !important; } body.portada-top > header #buscador-proveedores th:nth-child(3), body.portada-top > header #buscador-proveedores td:nth-child(3){ width:36% !important; } /* pólizas y políticas comparten columna (el guion muda la segunda dentro de la primera) */ body.portada-top > header #buscador-proveedores th:nth-child(7), body.portada-top > header #buscador-proveedores td:nth-child(7){ width:20% !important; padding-left:.3rem !important; padding-right:.5rem !important; } body.portada-top > header #buscador-proveedores th:nth-child(8), body.portada-top > header #buscador-proveedores td:nth-child(8){ display:none !important; } /* su rótulo se calla: dos palabras de nueve letras en esa columna caían letra por letra, y el escudo y la hoja ya dicen cuál es cuál */ body.portada-top > header #buscador-proveedores th:nth-child(7){ font-size:0 !important; } /* las pastillas, una debajo de otra y sin partirse */ body.portada-top > header #buscador-proveedores td:nth-child(7){ display:flex !important; flex-direction:column !important; gap:.4rem !important; align-items:flex-start !important; } body.portada-top > header #buscador-proveedores td:nth-child(7) *{ white-space:nowrap !important; } body.portada-top > header #buscador-proveedores td:nth-child(7) .bp-etq{ font-size:.5rem !important; letter-spacing:.06em !important; } body.portada-top > header #buscador-proveedores .bp-valor{ overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important; } body.portada-top > header #buscador-proveedores td{ padding:.95rem .7rem !important; } body.portada-top > header #buscador-proveedores th{ padding:.8rem .7rem !important; } body.portada-top > header #buscador-proveedores .bp-valor{ font-size:.78rem !important; } } /* «CLASIFICACIÓN» son trece letras y con el espaciado de escritorio no cabe en su columna: se partía en dos renglones. En el teléfono los encabezados van más juntos. */ @media (max-width:560px){ body.portada-top > header #buscador-proveedores th{ letter-spacing:.06em !important; font-size:.48rem !important; } } /* ── LA ÚLTIMA COLUMNA, DESPEGADA DEL BORDE ─────────────────────────────────────────────── «En el más grande el botón de políticas queda demasiado al ras de la orilla de la tabla.» La última columna terminaba pegada al canto del panel; ahora respira lo mismo que respira el nombre en la primera. */ body.portada-top > header #buscador-proveedores th:last-child, body.portada-top > header #buscador-proveedores td:last-child{ padding-right:2.4rem !important; } body.portada-top > header #buscador-proveedores th:first-child, body.portada-top > header #buscador-proveedores td:first-child{ padding-left:1.5rem !important; } @media (max-width:560px){ body.portada-top > header #buscador-proveedores th:last-child, body.portada-top > header #buscador-proveedores td:last-child{ padding-right:.8rem !important; } body.portada-top > header #buscador-proveedores th:first-child, body.portada-top > header #buscador-proveedores td:first-child{ padding-left:.8rem !important; } } /* En el telefono los rotulos de campo iban tan espaciados que «ECOSISTEMA» y las fechas se partian en dos renglones. Se aprietan: en pantalla chica el aire entre letras es un lujo que se paga con palabras rotas. */ @media (max-width:560px){ body.portada-top > header #buscador-proveedores .bp-rotulo{ letter-spacing:.04em !important; font-size:.44rem !important; } body.portada-top > header #buscador-proveedores .bp-valor{ font-size:.75rem !important; } body.portada-top > header #buscador-proveedores td{ padding-left:.55rem !important; padding-right:.55rem !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LA CABECERA DE LA TABLA SE QUEDA (Luis, 2026-09-22) ─────────────────────────────────────────────────────────────────────────── «Cuando hago scroll, lo de "X fichas" y la línea de títulos se va hacia arriba; debería quedarse fija y que sólo suban las líneas, para saber siempre qué estoy leyendo.» Se quedan las dos: la barra de arriba pegada al borde del panel, y la fila de títulos justo debajo de ella —el guion mide esa barra y le dice al CSS a qué altura anclarse, porque su alto cambia con el ancho de la pantalla—. Las dos llevan el mismo vidrio que el panel, para que las filas pasen por detrás sin transparentarse encima. Y dos arreglos de forma que pedía la misma captura: · los títulos van en UNA SOLA LÍNEA —«PÓLIZAS» y «POLÍTICAS» caían en tres pedazos—, · y CENTRADOS, porque el contenido de cada columna está centrado y el título no lo estaba. ═══════════════════════════════════════════════════════════════════════════ */ /* El marco y su envoltura dejan de recortar: un distinto de visible en un ancestro ancla ahi lo que se queda pegado, y la cabecera se anclaba al marco —que no se desplaza— en vez de al panel, que es el que si lo hace. Por eso no se quedaba. */ body.portada-top > header #buscador-proveedores .bp-scroll, body.portada-top > header #buscador-proveedores .bp-marco{ overflow:visible !important; } /* la barra de «N fichas para …» */ body.portada-top > header #buscador-proveedores .bp-marco > :first-child{ position:sticky !important; top:0 !important; z-index:7 !important; background:rgba(26,38,51,.97) !important; -webkit-backdrop-filter:blur(22px) saturate(1.1) !important; backdrop-filter:blur(22px) saturate(1.1) !important; } /* la fila de títulos, justo debajo */ body.portada-top > header #buscador-proveedores thead th{ position:sticky !important; top:var(--bp-cab, 3.6rem) !important; z-index:6 !important; background:rgba(26,38,51,.97) !important; -webkit-backdrop-filter:blur(22px) saturate(1.1) !important; backdrop-filter:blur(22px) saturate(1.1) !important; white-space:nowrap !important; text-align:center !important; } /* Con los titulos en una sola linea hay que darles el sitio para caber: «POLITICAS» pedia mas de los 63 pixeles que el colgroup daba a su columna, y se recortaba. Las dos ultimas ganan ancho y todos los titulos van un punto mas juntos. */ body.portada-top > header #buscador-proveedores table col:nth-child(7), body.portada-top > header #buscador-proveedores table col:nth-child(8){ width:9% !important; } body.portada-top > header #buscador-proveedores table col:nth-child(2){ width:11% !important; } body.portada-top > header #buscador-proveedores table col:nth-child(5){ width:13% !important; } body.portada-top > header #buscador-proveedores thead th{ font-size:.56rem !important; letter-spacing:.18em !important; padding-left:.5rem !important; padding-right:.5rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ EL TRADUCTOR, VESTIDO COMO LA PORTADA (Luis, 2026-09-23) ─────────────────────────────────────────────────────────────────────────── El botón venía de la versión anterior de Accesos: pastilla con vidrio, contorno teal y un halo de luz alrededor. Sobre la portada nueva —una foto a sangre con el logo grande— ese halo compite con la marca y el contorno se pierde contra el agua. Queda como el resto de NIDO: una pastilla de tinta translúcida, filete tenue, y al pasar por encima se aclara. Sin resplandores (Luis ya los descartó en las tarjetas). La firma de la foto y el buscador viven abajo; el idioma, arriba a la derecha, lejos de los dos, porque se toca una vez cada mucho. ═══════════════════════════════════════════════════════════════════════════ */ .prisma-portada #langToggleBtn, body #langToggleBtn{ gap:.45rem !important; padding:.42rem .95rem !important; background:rgba(20,29,39,.58) !important; border:1px solid rgba(255,255,255,.3) !important; border-radius:999px !important; box-shadow:none !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .3s ease, border-color .3s ease !important; } body #langToggleBtn:hover{ background:rgba(0,85,101,.85) !important; border-color:rgba(255,255,255,.55) !important; } /* el globo y las dos letras, en blanco y sin negrita (2026-09-28: el vidrio de la barra de ARIA); sin halo */ body #langToggleBtn i, body #langToggleBtn #langToggleText{ color:#FFFFFF !important; filter:none !important; text-shadow:none !important; } body #langToggleBtn i{ font-size:.78rem !important; } body #langToggleBtn #langToggleText{ font-family:Figtree, system-ui, sans-serif !important; font-size:.66rem !important; font-weight:400 !important; letter-spacing:.16em !important; } body #langToggleBtn:hover i, body #langToggleBtn:hover #langToggleText{ color:#FFFFFF !important; } /* En el celular la portada es más apretada: el botón se encoge y se pega a la orilla. */ @media (max-width:640px){ body #langToggleBtn{ padding:.34rem .7rem !important; } body #langToggleBtn #langToggleText{ font-size:.6rem !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EL CIERRE, CON LA FORMA DE LA BAHÍA (Luis, 2026-09-23) ─────────────────────────────────────────────────────────────────────────── «Que ese degradado sea como media luna, la panza hacia abajo, para simular la forma de la bahía; como esa imagen la tirás así, le daría un efecto muy cool.» Tenía razón en la observación de fondo: la fotografía del pie es una toma cenital de la costa, y la costa que se ve en ella ya dibuja un arco. Pero el borde por donde la imagen nacía era una línea recta, perfectamente horizontal — la única recta en una fotografía que no tiene ninguna—. Se notaba como lo que era: un corte. Ahora el borde es un arco que baja en el centro y sube en los extremos, igual que la orilla. Se hace con una máscara RADIAL en vez de lineal: el centro de la elipse queda por encima del pie, así que la zona transparente se estira hacia abajo en el medio y se recoge a los lados. El resultado es que el mar entra por las esquinas primero, como cuando uno se asoma a una ensenada, y la fotografía termina de aparecer en el centro un poco después. Los porcentajes: la elipse mide 96% del ancho y 62% del alto del pie, centrada en 50% -16% (Luis, 2026-09-28: la foto más junto a los últimos botones, sin mover el logo) —un poco arriba del borde—, y el desvanecido ocupa del 46% al 100% de su radio, que es lo que hace que el arco sea suave y no un recorte con filo. ═══════════════════════════════════════════════════════════════════════════ */ body > footer::before{ -webkit-mask-image: radial-gradient(96% 62% at 50% -16%, transparent 46%, rgba(0,0,0,.14) 57%, rgba(0,0,0,.42) 67%, rgba(0,0,0,.72) 77%, rgba(0,0,0,.92) 88%, #000 100%) !important; mask-image: radial-gradient(96% 62% at 50% -16%, transparent 46%, rgba(0,0,0,.14) 57%, rgba(0,0,0,.42) 67%, rgba(0,0,0,.72) 77%, rgba(0,0,0,.92) 88%, #000 100%) !important; -webkit-mask-composite:source-in !important; mask-composite:intersect !important; } /* En el celular el pie es mucho más angosto y alto: con la misma elipse el arco se vuelve un agujero. Se abre la curva —más ancha y menos honda— para que siga leyéndose como una orilla y no como un óvalo. */ @media (max-width:760px){ body > footer::before{ -webkit-mask-image: radial-gradient(170% 48% at 50% -10%, transparent 50%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.85) 88%, #000 100%) !important; mask-image: radial-gradient(170% 48% at 50% -10%, transparent 50%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.85) 88%, #000 100%) !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EL OLEAJE AL PIE DE LA LÁMINA (Luis, 2026-09-28: la opción B de la maqueta «dos mares») ─────────────────────────────────────────────────────────────────────────── Donde la tinta de PRISMA se encuentra con el teal de la página, en vez de un degradado recto: tres olas difuminadas que avanzan a distinto ritmo (30, 41 y 57 s, una en sentido contrario). La de atrás es teal hondo y las dos de adelante tinta: el contraste lo dan las olas mismas, sin bandas rectas ni vaivén vertical, que destapaban un borde recto (Luis). «Debe parecer un movimiento fluido infinito»: cada ola es una curva que termina igual que empieza, repetida en mosaico, y avanza exactamente un tramo por ciclo; el final es idéntico al principio y no hay costura. El velo se queda en tinta hasta su pie y la ola continúa esa tinta hacia abajo. ═══════════════════════════════════════════════════════════════════════════ */ .prisma__velo{ background:linear-gradient(180deg, rgba(20,29,39,0) 0%, rgba(20,29,39,.10) 9%, rgba(20,29,39,.28) 20%, rgba(20,29,39,.36) 29%, rgba(20,29,39,.50) 38%, rgba(20,29,39,.70) 47%, rgba(20,29,39,.86) 55%, rgba(20,29,39,.96) 62%, #141D27 70%, #141D27 100%) !important; } .prisma__olas{ position:absolute; z-index:1; pointer-events:none; left:50%; width:100vw; margin-left:-50vw; bottom:calc(-7rem - 128px); height:170px; filter:blur(9px); } /* su borde de arriba (difuminado) queda dentro de la tinta: sin costura */ .prisma__olas > i{ position:absolute; inset:0; background-repeat:repeat-x; background-size:var(--t) 100%; } .prisma__olas > i:nth-child(1){ --t:1500px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 170' preserveAspectRatio='none'%3E%3Cpath fill='%23005565' d='M0,0L0.0,125.1L12.5,124.0L25.0,123.0L37.5,121.9L50.0,121.0L62.5,120.0L75.0,119.2L87.5,118.3L100.0,117.5L112.5,116.8L125.0,116.1L137.5,115.5L150.0,114.9L162.5,114.4L175.0,113.9L187.5,113.5L200.0,113.1L212.5,112.8L225.0,112.4L237.5,112.2L250.0,111.9L262.5,111.7L275.0,111.5L287.5,111.3L300.0,111.1L312.5,110.9L325.0,110.7L337.5,110.5L350.0,110.3L362.5,110.0L375.0,109.8L387.5,109.6L400.0,109.3L412.5,109.0L425.0,108.6L437.5,108.3L450.0,107.9L462.5,107.5L475.0,107.1L487.5,106.7L500.0,106.2L512.5,105.7L525.0,105.2L537.5,104.7L550.0,104.2L562.5,103.7L575.0,103.3L587.5,102.8L600.0,102.3L612.5,101.9L625.0,101.5L637.5,101.2L650.0,100.9L662.5,100.6L675.0,100.4L687.5,100.3L700.0,100.2L712.5,100.2L725.0,100.3L737.5,100.5L750.0,100.8L762.5,101.1L775.0,101.6L787.5,102.1L800.0,102.7L812.5,103.4L825.0,104.2L837.5,105.1L850.0,106.1L862.5,107.2L875.0,108.3L887.5,109.6L900.0,110.9L912.5,112.2L925.0,113.6L937.5,115.1L950.0,116.6L962.5,118.1L975.0,119.6L987.5,121.2L1000.0,122.7L1012.5,124.3L1025.0,125.8L1037.5,127.3L1050.0,128.8L1062.5,130.2L1075.0,131.6L1087.5,132.9L1100.0,134.1L1112.5,135.3L1125.0,136.4L1137.5,137.3L1150.0,138.2L1162.5,139.0L1175.0,139.7L1187.5,140.2L1200.0,140.7L1212.5,141.0L1225.0,141.2L1237.5,141.3L1250.0,141.3L1262.5,141.2L1275.0,141.0L1287.5,140.7L1300.0,140.2L1312.5,139.7L1325.0,139.1L1337.5,138.4L1350.0,137.6L1362.5,136.8L1375.0,135.8L1387.5,134.9L1400.0,133.9L1412.5,132.8L1425.0,131.7L1437.5,130.6L1450.0,129.5L1462.5,128.4L1475.0,127.3L1487.5,126.2L1500.0,125.1L1500,0Z'/%3E%3C/svg%3E"); opacity:.45; animation:olaCorre3 57s linear infinite; } .prisma__olas > i:nth-child(2){ --t:900px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 170' preserveAspectRatio='none'%3E%3Cpath fill='%23141D27' d='M0,0L0.0,127.4L7.5,127.1L15.0,126.7L22.5,126.1L30.0,125.4L37.5,124.6L45.0,123.7L52.5,122.7L60.0,121.6L67.5,120.4L75.0,119.1L82.5,117.8L90.0,116.4L97.5,115.1L105.0,113.6L112.5,112.2L120.0,110.8L127.5,109.3L135.0,107.9L142.5,106.5L150.0,105.2L157.5,103.9L165.0,102.6L172.5,101.4L180.0,100.3L187.5,99.2L195.0,98.1L202.5,97.2L210.0,96.3L217.5,95.4L225.0,94.7L232.5,93.9L240.0,93.3L247.5,92.7L255.0,92.1L262.5,91.6L270.0,91.2L277.5,90.7L285.0,90.3L292.5,89.9L300.0,89.5L307.5,89.2L315.0,88.8L322.5,88.4L330.0,88.0L337.5,87.6L345.0,87.2L352.5,86.7L360.0,86.2L367.5,85.7L375.0,85.1L382.5,84.5L390.0,83.9L397.5,83.2L405.0,82.4L412.5,81.6L420.0,80.8L427.5,80.0L435.0,79.1L442.5,78.2L450.0,77.3L457.5,76.3L465.0,75.4L472.5,74.4L480.0,73.5L487.5,72.6L495.0,71.7L502.5,70.9L510.0,70.1L517.5,69.4L525.0,68.8L532.5,68.2L540.0,67.7L547.5,67.4L555.0,67.1L562.5,66.9L570.0,66.9L577.5,67.0L585.0,67.2L592.5,67.6L600.0,68.1L607.5,68.7L615.0,69.5L622.5,70.5L630.0,71.5L637.5,72.8L645.0,74.1L652.5,75.6L660.0,77.2L667.5,78.9L675.0,80.7L682.5,82.7L690.0,84.7L697.5,86.8L705.0,88.9L712.5,91.2L720.0,93.4L727.5,95.7L735.0,98.0L742.5,100.3L750.0,102.6L757.5,104.8L765.0,107.0L772.5,109.2L780.0,111.2L787.5,113.2L795.0,115.1L802.5,116.9L810.0,118.6L817.5,120.2L825.0,121.6L832.5,122.8L840.0,124.0L847.5,125.0L855.0,125.8L862.5,126.4L870.0,126.9L877.5,127.3L885.0,127.5L892.5,127.5L900.0,127.4L900,0Z'/%3E%3C/svg%3E"); opacity:.8; animation:olaCorre2 41s linear infinite reverse; } .prisma__olas > i:nth-child(3){ --t:1200px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='none'%3E%3Cpath fill='%23141D27' d='M0,0L0.0,70.0L10.0,72.0L20.0,73.9L30.0,75.8L40.0,77.7L50.0,79.5L60.0,81.3L70.0,83.0L80.0,84.7L90.0,86.2L100.0,87.7L110.0,89.0L120.0,90.3L130.0,91.4L140.0,92.4L150.0,93.3L160.0,94.0L170.0,94.6L180.0,95.1L190.0,95.5L200.0,95.7L210.0,95.8L220.0,95.8L230.0,95.7L240.0,95.4L250.0,95.1L260.0,94.7L270.0,94.1L280.0,93.5L290.0,92.8L300.0,92.0L310.0,91.2L320.0,90.3L330.0,89.3L340.0,88.4L350.0,87.4L360.0,86.4L370.0,85.4L380.0,84.4L390.0,83.4L400.0,82.4L410.0,81.4L420.0,80.5L430.0,79.6L440.0,78.7L450.0,77.9L460.0,77.1L470.0,76.3L480.0,75.6L490.0,74.9L500.0,74.3L510.0,73.8L520.0,73.2L530.0,72.7L540.0,72.3L550.0,71.8L560.0,71.4L570.0,71.1L580.0,70.7L590.0,70.3L600.0,70.0L610.0,69.7L620.0,69.3L630.0,68.9L640.0,68.6L650.0,68.2L660.0,67.7L670.0,67.3L680.0,66.8L690.0,66.2L700.0,65.7L710.0,65.1L720.0,64.4L730.0,63.7L740.0,62.9L750.0,62.1L760.0,61.3L770.0,60.4L780.0,59.5L790.0,58.6L800.0,57.6L810.0,56.6L820.0,55.6L830.0,54.6L840.0,53.6L850.0,52.6L860.0,51.6L870.0,50.7L880.0,49.7L890.0,48.8L900.0,48.0L910.0,47.2L920.0,46.5L930.0,45.9L940.0,45.3L950.0,44.9L960.0,44.6L970.0,44.3L980.0,44.2L990.0,44.2L1000.0,44.3L1010.0,44.5L1020.0,44.9L1030.0,45.4L1040.0,46.0L1050.0,46.7L1060.0,47.6L1070.0,48.6L1080.0,49.7L1090.0,51.0L1100.0,52.3L1110.0,53.8L1120.0,55.3L1130.0,57.0L1140.0,58.7L1150.0,60.5L1160.0,62.3L1170.0,64.2L1180.0,66.1L1190.0,68.0L1200.0,70.0L1200,0Z'/%3E%3C/svg%3E"); animation:olaCorre1 30s linear infinite; } @keyframes olaCorre1{ from{ background-position:0 0; } to{ background-position:-1200px 0; } } @keyframes olaCorre2{ from{ background-position:0 0; } to{ background-position:-900px 0; } } @keyframes olaCorre3{ from{ background-position:0 0; } to{ background-position:-1500px 0; } } @media (max-width:640px){ .prisma__olas{ bottom:calc(-4rem - 98px); height:130px; } } @media (prefers-reduced-motion:reduce){ .prisma__olas > i{ animation:none; } }