/* ═══════════════════════════════════════════════════════════════════════════
   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 prisma, el nombre y lo que significa ─────────────────── */
/* LA LUZ QUE SE ABRE EN CARAS (Luis, 2026-09-22: «que tenga aún más personalidad, pero no
   quiero figuras de prisma, sino una sección increíble»). PRISMA es «una sola luz que se abre
   en caras»: eso es lo que se dibuja —un haz que baja sobre el nombre y dos lavados de color de
   la casa que derivan muy despacio—, nunca la figura. Y bajo las siglas, un filete que recorre
   el crema, el teal, la salvia y el deep: la luz abierta, en una línea. */
.prisma__cab{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(3.4rem, 7vw, 5.6rem) 1rem clamp(2.8rem, 5vw, 4rem); isolation:isolate; }
.prisma__cab::before{ content:""; position:absolute; z-index:-2; left:50%; top:-46%; width:min(46rem, 86vw); height:150%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse 52% 46% at 50% 38%, rgba(234,223,206,.16) 0%, rgba(234,223,206,.06) 42%, transparent 72%);
  animation:prismaHaz 18s ease-in-out infinite alternate; }
.prisma__cab::after{ content:""; position:absolute; z-index:-3; inset:-30% -10% auto; height:150%; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 40% at 24% 46%, rgba(0,109,130,.34) 0%, rgba(0,109,130,.10) 45%, transparent 72%),
    radial-gradient(ellipse 32% 38% at 76% 52%, rgba(125,155,91,.26) 0%, rgba(125,155,91,.08) 45%, transparent 72%);
  animation:prismaDeriva 26s ease-in-out infinite alternate; filter:blur(6px); }
@keyframes prismaHaz{ from{ opacity:.75; transform:translateX(-50%) scale(1); } to{ opacity:1; transform:translateX(-50%) scale(1.06); } }
@keyframes prismaDeriva{ from{ transform:translate3d(-2%, 0, 0); } to{ transform:translate3d(2%, 1.5%, 0); } }
.prisma__espectro{ display:block; width:clamp(9rem, 22vw, 15rem); height:1px; margin:1.6rem auto .2rem;
  background:linear-gradient(90deg, rgba(234,223,206,0), #EADFCE 18%, #006D82 46%, #7D9B5B 72%, rgba(0,85,101,0) 100%); }
.prisma__cuenta{ margin:1rem 0 0; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(234,223,206,.62); }
.prisma__cuenta b{ font-family:Marcellus, Georgia, serif; font-size:1.5em; font-weight:400; color:#FFFFFF; letter-spacing:.02em; }
.prisma__ceja{ margin:0 0 1rem; font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(234,223,206,.70); }
#sections-container > section.prisma h2.prisma__titulo{ margin:0; font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-style:normal !important;
  font-weight:400 !important; font-size:clamp(3.4rem, 9vw, 6.6rem) !important; line-height:1 !important; letter-spacing:.22em !important; padding-left:.22em;
  color:#FFFFFF !important; text-shadow:0 10px 40px rgba(0,0,0,.45); }
.prisma__titulo span{ display:inline-block; animation:prismaLetra 1.1s cubic-bezier(.22,.9,.24,1) both; animation-delay:calc(var(--i) * 80ms); }
@keyframes prismaLetra{ from{ opacity:0; transform:translateY(18px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
.prisma__siglas{ margin:1.4rem 0 0; font-size:clamp(.9rem, 1.6vw, 1.08rem); line-height:1.6; color:rgba(234,223,206,.70); max-width:44rem; }
.prisma__siglas span{ color:#FFFFFF; font-family:Marcellus, Georgia, serif; font-size:1.18em; }
.prisma__lema{ margin:1.5rem auto 0; max-width:38rem; font-size:.94rem; line-height:1.7;
  letter-spacing:.01em; color:rgba(234,223,206,.78); }

/* ── Las tres caras ───────────────────────────────────────────────────────── */
.prisma__caras{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:15rem auto; column-gap:1rem; row-gap:0; }
/* Cada cara usa las dos filas de la rejilla (subgrid): así el recuadro del texto mide lo mismo
   en las cuatro aunque un texto sea más largo (Luis: «que se vea simétrico»). */
a.prisma__cara{ display:grid !important; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; margin-bottom:1rem; }
a.prisma__cara .prisma__cara-parte{ align-self:start; justify-self:start; }
a.prisma__cara .prisma__cara-cuerpo{ align-self:stretch; justify-content:flex-start; }
a.prisma__cara{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:0; padding:1.5rem;
  border-radius:14px; overflow:hidden; isolation:isolate; text-decoration:none; color:#FFFFFF;
  border:1px solid rgba(234,223,206,.16); transition:border-color 120ms linear; }
a.prisma__cara:hover{ border-color:rgba(234,223,206,.55); }
a.prisma__cara:focus-visible{ outline:2px solid #006D82; box-shadow:0 0 0 4px rgba(234,223,206,.22); }
.prisma__cara-foto{ position:absolute; inset:0; z-index:-2; background-image:var(--foto); background-size:cover; background-position:var(--pos);
  transform:scale(1.02); transition:transform .62s cubic-bezier(.22,.9,.24,1); }
a.prisma__cara:hover .prisma__cara-foto{ transform:scale(1.045); }           /* se mueve la imagen, no la tarjeta (§5) */
/* El velo del libro: tinta de 0 a 45 % desde el 45 % de la altura, y arriba una franja corta
   para la etiqueta; las dos no se tocan, así que ningún punto pasa del 45 %. */
.prisma__cara-velo{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,0) 22%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.prisma__cara-parte{ align-self:flex-start; padding:.4rem .8rem; border-radius:99px; background:rgba(26,38,51,.45); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.prisma__cara-cuerpo{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.1rem 1rem; margin:0 -.35rem -.35rem; border-radius:9px;
  background:rgba(26,38,51,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.prisma__cara-nombre{ font-family:Marcellus, 'PP Fragment Glare', Georgia, serif; font-size:2.25rem; line-height:1; letter-spacing:.12em; color:#FFFFFF; }
.prisma__cara-funcion{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.prisma__cara-sigla{ margin-top:.45rem; font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.85); }
.prisma__cara-que{ font-size:.86rem; line-height:1.5; color:#FFFFFF; }
.prisma__cara-ir{ position:absolute; top:1.5rem; right:1.5rem; width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:99px;
  background:rgba(26,38,51,.45); border:1px solid rgba(255,255,255,.22); color:#FFFFFF; font-size:.8rem; transition:background-color 120ms linear; }
a.prisma__cara:hover .prisma__cara-ir{ background:#005565; border-color:#005565; }

/* ── Las demás apps y los ecosistemas ─────────────────────────────────────── */
.prisma__bloque{ margin-top:2.6rem; }
.prisma__rotulo{ display:flex; align-items:center; gap:1rem; margin:0 0 1rem; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(234,223,206,.70); }
.prisma__rotulo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.22), transparent); }
.prisma__apps, .prisma__ecos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; --col:3; }   /* centradas: la fila corta queda al medio */
.prisma__ecos{ --col:2; }
.prisma__apps > a, .prisma__ecos > a{ flex:0 0 calc((100% - (var(--col) - 1) * .6rem) / var(--col)); min-width:0; }
a.prisma__app, a.prisma__eco{ display:flex; align-items:center; gap:.85rem; min-height:3.6rem; padding:.8rem 1.1rem; border-radius:9px; text-decoration:none;
  background:rgba(234,223,206,.035); border:1px solid rgba(234,223,206,.12); color:#EADFCE; font-size:.92rem; letter-spacing:.01em;
  transition:border-color 120ms linear, background-color 120ms linear; }
a.prisma__app:hover, a.prisma__eco:hover{ border-color:rgba(234,223,206,.45); background:rgba(0,85,101,.22); }
a.prisma__app:focus-visible, a.prisma__eco:focus-visible{ outline:2px solid #006D82; box-shadow:0 0 0 4px rgba(234,223,206,.22); }
a.prisma__app i, a.prisma__eco i{ width:1.2rem; text-align:center; color:#EADFCE; opacity:.85; font-size:.95rem; }
a.prisma__eco{ min-height:4.2rem; }
a.prisma__eco span{ flex:1; font-family:Marcellus, Georgia, serif; font-size:1.15rem; }
.prisma__eco-ir{ opacity:.6 !important; }

/* ── Las apps con la foto de su login: tarjetas chicas, hermanas de las caras ── */
a.prisma__app.con-foto{ position:relative; isolation:isolate; overflow:hidden; flex-direction:column; align-items:stretch; justify-content:space-between;
  gap:1.4rem; min-height:11rem; padding:.8rem; border-radius:12px; background:#1A2633; color:#FFFFFF; border-color:rgba(234,223,206,.16); }
.prisma__app-foto{ position:absolute; inset:0; z-index:-2; background-image:var(--foto); background-size:cover; background-position:center;
  transform:scale(1.02); transition:transform .62s cubic-bezier(.22,.9,.24,1); }
a.prisma__app.con-foto:hover .prisma__app-foto{ transform:scale(1.06); }         /* se mueve la foto, no la tarjeta */
.prisma__app-velo{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,38,51,.30) 0%, rgba(26,38,51,0) 30%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
a.prisma__app.con-foto:hover{ background:#1A2633; border-color:rgba(234,223,206,.55); }
.prisma__app-arriba{ display:flex; align-items:center; justify-content:space-between; }
a.prisma__app.con-foto .prisma__app-arriba > i, .prisma__app-ir{ width:2rem; height:2rem; display:grid; place-items:center; border-radius:99px; font-size:.78rem;
  color:#FFFFFF; opacity:1; background:rgba(26,38,51,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22);
  transition:background-color 120ms linear, border-color 120ms linear; }
.prisma__app-ir i{ color:#FFFFFF; width:auto; opacity:1; font-size:.72rem; }
a.prisma__app.con-foto:hover .prisma__app-ir{ background:#005565; border-color:#005565; }
.prisma__app-cuerpo{ display:flex; flex-direction:column; justify-content:center; gap:.2rem; min-height:4.1rem; padding:.7rem .9rem; border-radius:9px;
  background:rgba(26,38,51,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
a.prisma__app.con-foto .prisma__app-nombre{ font-family:Marcellus, 'PP Fragment Glare', Georgia, serif; font-size:1.14rem; line-height:1.2; letter-spacing:.02em; color:#FFFFFF; }
.prisma__app-que{ font-size:.74rem; line-height:1.35; letter-spacing:.01em; color:rgba(255,255,255,.85); }

/* ── 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; }
#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; text-align:center;
  font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-style:normal !important; font-weight:400 !important;
  font-size:clamp(1.6rem, 3vw, 2.1rem) !important; letter-spacing:.06em; color:#FFFFFF !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); }
/* los botones toman el color del área: un velo de su tono, el filete y el ícono en su círculo */
.prisma-seccion a.prisma__app{ background:linear-gradient(135deg, color-mix(in srgb, var(--acento) 30%, transparent), color-mix(in srgb, var(--acento) 8%, transparent));
  border-color:color-mix(in srgb, var(--acento) 50%, transparent); color:#FFFFFF; }
.prisma-seccion a.prisma__app:hover{ background:color-mix(in srgb, var(--acento) 30%, transparent); border-color:var(--acento); }
.prisma-seccion a.prisma__app i{ width:2rem; height:2rem; display:grid; place-items:center; flex-shrink:0; border-radius:99px; background:var(--acento);
  color:#1A2633; opacity:1; font-size:.82rem; }

/* ── Tableta y celular ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .prisma__caras{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .prisma__caras{ grid-auto-rows:10rem auto; }
}
@media (max-width:900px){
  .prisma__caras{ grid-auto-rows:9rem auto; }
  .prisma__apps{ --col:2; }
  a.prisma__app.con-foto{ min-height:10rem; }
}
@media (max-width:560px){
  #sections-container > section.prisma h2.prisma__titulo{ letter-spacing:.16em !important; padding-left:.16em; }
  .prisma__apps, .prisma__ecos{ --col:1; }
  /* las de foto siguen de a dos, bajitas, para que no se haga una torre */
  .prisma__apps:has(.con-foto){ --col:2; }
  a.prisma__app.con-foto{ min-height:9.5rem; padding:.55rem; gap:.9rem; }
  a.prisma__app.con-foto .prisma__app-nombre{ font-size:.95rem; }
  .prisma__app-cuerpo{ min-height:0; height:3.4rem; padding:.5rem .6rem; }   /* todas iguales: el nombre hasta en dos líneas */
  .prisma__app-que{ display:none; }
  .prisma__app-ir{ display:none !important; }
  /* en el celular las caras siguen de a dos, bien ajustadas (Luis) */
  .prisma__caras{ grid-auto-rows:6.5rem auto; column-gap:.6rem; } a.prisma__cara{ padding:.55rem; margin-bottom:.6rem; border-radius:12px; }
  .prisma__cara-parte{ padding:.3rem .6rem; font-size:.54rem; letter-spacing:.2em; }
  .prisma__cara-cuerpo{ margin:0; padding:.7rem .7rem .75rem; gap:.25rem; }
  .prisma__cara-nombre{ font-size:1.55rem; letter-spacing:.08em; }
  .prisma__cara-funcion{ font-size:.56rem; letter-spacing:.2em; }
  .prisma__cara-sigla{ display:none; }
  .prisma__cara-que{ font-size:.74rem; line-height:1.4; }
  .prisma__cara-ir{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .prisma__titulo span{ animation:none !important; }
  .prisma__cara-foto, .prisma__app-foto{ transition:none; }
}

/* Seis caras (Reservas y Pagos y Operaciones subieron): tres columnas y dos filas en escritorio,
   cómodas y con aire; dos columnas en tableta y celular. */
.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; } }
/* los nombres largos («Reservas y Pagos», «Operaciones») en un renglón, sin achicar el resto */
a.prisma__cara--largo .prisma__cara-nombre{ font-size:1.55rem !important; letter-spacing:.06em !important; white-space:nowrap; }
@media (max-width:767px){ a.prisma__cara--largo .prisma__cara-nombre{ font-size:1.15rem !important; white-space:normal; } }

/* ── ENTRAR: al pasar, la cara invita a entrar; al tocar, un portal a la otra app ─────────── */
a.prisma__cara{ transition:border-color 160ms linear, box-shadow .6s cubic-bezier(.22,.9,.24,1); }
a.prisma__cara .prisma__cara-foto{ transition:transform 1.4s cubic-bezier(.16,.84,.24,1), filter .8s ease; }
a.prisma__cara:hover .prisma__cara-foto{ transform:scale(1.14); filter:brightness(1.1) saturate(1.12); }
a.prisma__cara:hover{ border-color:rgba(234,223,206,.6); box-shadow:0 30px 70px -18px rgba(26,38,51,.62), 0 0 0 1px rgba(234,223,206,.18); }
/* un destello de luz cruza la tarjeta una vez, como una puerta que se abre */
a.prisma__cara::after{ content:""; position:absolute; inset:-40% -60%; z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 48%, rgba(234,223,206,.28) 50%, rgba(255,255,255,.12) 52%, transparent 62%);
  transform:translateX(-45%); }
a.prisma__cara:hover::after{ animation:prismaDestello 1.25s cubic-bezier(.22,.9,.24,1) .05s 1 both; }
@keyframes prismaDestello{ 0%{ opacity:0; transform:translateX(-45%); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateX(45%); } }
/* la flecha se abre en «Entrar →» */
.prisma__cara-ir{ transition:width .5s cubic-bezier(.22,.9,.24,1), background-color 160ms linear, border-color 160ms linear; overflow:hidden; white-space:nowrap; z-index:2; }
.prisma__cara-ir::before{ content:"Entrar"; font-family:Figtree, system-ui, sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#FFFFFF;
  max-width:0; opacity:0; transition:max-width .5s cubic-bezier(.22,.9,.24,1), opacity .3s ease .1s, margin .5s ease; }
a.prisma__cara:hover .prisma__cara-ir{ width:7.4rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
a.prisma__cara:hover .prisma__cara-ir::before{ max-width:5rem; opacity:1; }
a.prisma__cara:hover .prisma__cara-ir i{ animation:prismaFlecha 1.1s ease-in-out infinite; }
@keyframes prismaFlecha{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
/* las apps con foto: la misma invitación, más discreta */
a.prisma__app.con-foto .prisma__app-foto{ transition:transform 1.2s cubic-bezier(.16,.84,.24,1), filter .8s ease; }
a.prisma__app.con-foto:hover .prisma__app-foto{ transform:scale(1.12); filter:brightness(1.08) saturate(1.1); }
a.prisma__app.con-foto:hover .prisma__app-ir i{ animation:prismaFlecha 1.1s ease-in-out infinite; }

/* 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. */
.prisma-portal__foto{ position:fixed; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border-radius:14px; overflow:hidden; background-size:cover; transform:scale(1.14);
  /* Un solo viaje y una sola curva: el tamaño, la posición y el acercamiento terminan a la vez.
     Antes el acercamiento duraba 1,4 s contra 0,95 s del resto y la escena se sentía pegada
     (Luis, 2026-09-22). */
  transition:left 1s cubic-bezier(.62,0,.2,1), top 1s cubic-bezier(.62,0,.2,1), width 1s cubic-bezier(.62,0,.2,1),
    height 1s cubic-bezier(.62,0,.2,1), border-radius 1s cubic-bezier(.62,0,.2,1),
    transform 1s cubic-bezier(.62,0,.2,1), opacity .5s ease; }
.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{ left:0; top:0; width:100vw; height:100vh; border-radius:0; transform:scale(1.32); }
.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;
  opacity:0; transform:translateY(12px) scale(.96);
  /* Entra cuando la imagen YA terminó su viaje (1 s), no antes (Luis, 2026-09-22). */
  transition:opacity .5s ease 1s, transform .8s cubic-bezier(.2,.8,.2,1) 1s; text-align:center; padding:1rem; }
.prisma-portal.abierto .prisma-portal__marca{ 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; }
html.prisma-entrando body{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .prisma__cab::before, .prisma__cab::after{ animation:none !important; }
  a.prisma__cara:hover .prisma__cara-foto, a.prisma__app.con-foto:hover .prisma__app-foto{ transform:none; }
  a.prisma__cara:hover::after{ animation:none; }
  a.prisma__cara:hover .prisma__cara-ir i, a.prisma__app.con-foto:hover .prisma__app-ir i{ animation:none; }
}
/* 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: se funde sobre la de la tarjeta, del tamaño
   y encuadre del login (sin zoom), el nombre se difumina y queda sólo esa foto con el velo del
   login. Así lo último que se ve en Accesos es lo primero que pinta la app. */
.prisma-portal__destino{ position:fixed; inset:0; background-size:cover; background-repeat:no-repeat; opacity:0; transform:scale(1.06);
  transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.8,.2,1); }
.prisma-portal.destino .prisma-portal__destino{ opacity:1; transform:scale(1); }
.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; }

/* ── AL PASAR: LA ESCENA COBRA VIDA Y LO DEMÁS SE APAGA (Luis: «luxury, elegante, inmersivo») ──
   En reposo, cada foto está apenas apagada. La que tiene el cursor cobra vida: su color y su luz
   plenos, el velo se retira y la foto se acerca muy despacio; al mismo tiempo las demás caras se
   hunden en la sombra, y la mirada queda sólo en la que se va a entrar. Sin marcos, sin brillos,
   sin flechas. */
a.prisma__cara .prisma__cara-ir{ display:none !important; }
a.prisma__cara::after{ content:none !important; display:none !important; }
a.prisma__cara{ transition:transform 1s cubic-bezier(.2,.8,.2,1), box-shadow 1s cubic-bezier(.2,.8,.2,1), filter 1s cubic-bezier(.2,.8,.2,1),
  opacity 1s ease, border-color .6s ease !important; will-change:transform, filter; }
a.prisma__cara .prisma__cara-foto{ filter:saturate(.82) brightness(.9); transform:scale(1.02);
  transition:transform 2.6s cubic-bezier(.16,.84,.24,1), filter 1.4s cubic-bezier(.2,.8,.2,1) !important; }
a.prisma__cara .prisma__cara-velo{ transition:opacity 1.2s ease; }
a.prisma__cara .prisma__cara-cuerpo{ transition:background-color 1s ease, transform 1s cubic-bezier(.2,.8,.2,1), border-color 1s ease; }
a.prisma__cara .prisma__cara-nombre{ transition:text-shadow 1s ease, letter-spacing 1.2s cubic-bezier(.2,.8,.2,1) !important; transform:none !important; }
/* la que tiene el cursor: viva */
a.prisma__cara:hover{ transform:translateY(-4px) !important; border-color:rgba(234,223,206,.34) !important;
  box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; }
a.prisma__cara:hover .prisma__cara-foto{ filter:saturate(1.14) brightness(1.06) !important; transform:scale(1.1) !important; }
a.prisma__cara:hover .prisma__cara-velo{ opacity:.72; }
a.prisma__cara:hover .prisma__cara-cuerpo{ transform:translateY(-3px); }
a.prisma__cara:hover .prisma__cara-nombre{ letter-spacing:.16em !important; text-shadow:0 6px 30px rgba(0,0,0,.35); }
a.prisma__cara--largo:hover .prisma__cara-nombre{ letter-spacing:.08em !important; }
/* las demás: a la sombra */
.prisma__caras:hover a.prisma__cara:not(:hover){ filter:brightness(.58) saturate(.55); transform:scale(.985); }
.prisma__cara-parte--vacia{ visibility:hidden; }
@media (hover:none){
  a.prisma__cara .prisma__cara-foto{ filter:none; }
  .prisma__caras:hover a.prisma__cara:not(:hover){ filter:none; transform:none; }
  a.prisma__cara:hover{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  a.prisma__cara:hover, a.prisma__cara:hover .prisma__cara-foto, a.prisma__cara:hover .prisma__cara-cuerpo,
  .prisma__caras:hover a.prisma__cara:not(:hover){ transform:none !important; }
}
/* las apps con foto: el mismo foco, más discreto */
a.prisma__app.con-foto{ transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1), box-shadow .9s ease, border-color .5s ease !important; }
a.prisma__app.con-foto .prisma__app-foto{ filter:saturate(.84) brightness(.9); transition:transform 2.4s cubic-bezier(.16,.84,.24,1), filter 1.3s ease !important; }
a.prisma__app.con-foto:hover{ transform:translateY(-3px); box-shadow:0 30px 70px -18px rgba(26,38,51,.62); }
a.prisma__app.con-foto:hover .prisma__app-foto{ filter:saturate(1.12) brightness(1.05) !important; transform:scale(1.09) !important; }
.prisma__apps:hover a.prisma__app.con-foto:not(:hover){ filter:brightness(.62) saturate(.6); }
@media (hover:none){ a.prisma__app.con-foto .prisma__app-foto{ filter:none; } .prisma__apps:hover a.prisma__app.con-foto:not(:hover){ filter:none; } }

/* ── 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("https://images.unsplash.com/photo-1629221078063-be07a8a5f867?q=82&w=2600&auto=format&fit=crop") 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,
#sections-container > section.prisma > .prisma__bloque{ position:relative; z-index:2; }
/* sobre la foto, el nombre y las siglas piden su sombra */
#sections-container > section.prisma h2.prisma__titulo{ text-shadow:0 4px 18px rgba(11,20,28,.7), 0 18px 60px rgba(11,20,28,.55) !important; }
.prisma__ceja, .prisma__siglas{ text-shadow:0 2px 8px rgba(11,20,28,.7); }
@media (prefers-reduced-motion:reduce){ .prisma__escena{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS CARAS: EN REPOSO, LO JUSTO; AL PASAR, SE ABREN (Luis, 2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   «Sin ponerme encima, la tarjeta sólo debería decir CIMA, Control Maestro y abajo el nombre
   largo, sin el descriptivo. Cuando me ponga encima, que el contenedor desaparezca, el título
   suba con su subtítulo y aparezca la descripción, con más campo y más brillo. Y que algo gire,
   algo épico.»
   · En reposo: el nombre, la función y la sigla sobre su vidrio; la descripción, escondida.
   · Al pasar: el vidrio se disuelve —la foto queda limpia—, el bloque sube y la descripción
     entra desde abajo. La tarjeta se inclina en el espacio y se acerca: el giro es de verdad,
     en 3D, no un truco plano. La letra se sostiene con su sombra, ya sin panel debajo.
   La descripción va en posición absoluta: así aparece sin empujar la rejilla —si empujara,
   todas las tarjetas cambiarían de alto a la vez, porque comparten las filas—.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (min-width:768px){
  .prisma__caras{ perspective:1400px; }
  a.prisma__cara{ transform-style:preserve-3d;
    transition:border-color 160ms linear, box-shadow .6s cubic-bezier(.22,.9,.24,1), transform .7s cubic-bezier(.22,.9,.24,1); }
  a.prisma__cara:hover{ transform:translateY(-8px) rotateX(2.4deg) rotateY(-1.4deg) scale(1.015); }

  /* el vidrio del texto: en reposo sostiene la letra; al pasar, se va */
  .prisma__cara-cuerpo{ transition:background-color .55s cubic-bezier(.22,.9,.24,1), backdrop-filter .55s ease,
    transform .7s cubic-bezier(.22,.9,.24,1), box-shadow .55s ease; }
  a.prisma__cara:hover .prisma__cara-cuerpo{ background-color:transparent !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; transform:translate3d(0, -.45rem, 40px); }

  /* la letra, ya sin panel, se sostiene sola */
  a.prisma__cara:hover .prisma__cara-nombre, a.prisma__cara:hover .prisma__cara-funcion,
  a.prisma__cara:hover .prisma__cara-sigla, a.prisma__cara:hover .prisma__cara-que{
    text-shadow:0 2px 10px rgba(11,20,28,.85), 0 14px 44px rgba(11,20,28,.65); }

  /* la descripción ya vive fuera del panel y con su sitio reservado: sólo se enciende */
  a.prisma__cara:hover .prisma__cara-que{ opacity:1; visibility:visible; transform:translate3d(0,0,40px); transition-delay:.1s; }

  /* y la foto gana luz por debajo, para que todo se lea sin el panel */
  .prisma__cara-velo{ transition:opacity .6s ease, background .6s ease; }
  a.prisma__cara:hover .prisma__cara-velo{
    background:linear-gradient(180deg, rgba(11,20,28,.10) 0%, rgba(11,20,28,.04) 34%, rgba(11,20,28,.58) 76%, rgba(11,20,28,.86) 100%) !important; }

  /* la pastilla de la parte del árbol acompaña el movimiento */
  .prisma__cara-parte{ transition:transform .7s cubic-bezier(.22,.9,.24,1), background-color .4s ease; }
  a.prisma__cara:hover .prisma__cara-parte{ transform:translate3d(0,-4px,40px); background-color:rgba(26,38,51,.62); }
}
/* En el celular no hay «pasar por encima»: la descripción va siempre, en su sitio. */
@media (max-width:767px), (hover:none){
  .prisma__cara-que{ position:static; opacity:1; transform: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; }
/* el haz y los lavados de color de la cabecera también se van: ensucian la imagen */
.prisma__cab::before, .prisma__cab::after{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS CARAS, SEGUNDA VUELTA (Luis, 2026-09-22)
   «El nombre debe subir y centrarse igual que el subtítulo», «las letras blancas sólidas».
   El panel pasa a estar ANCLADO al pie de la tarjeta, con su zona de alto fijo: así, al
   abrirse, crece hacia arriba y nada se mueve —antes la descripción caía fuera de la rejilla
   y se montaba sobre el nombre—. Al pasar: el vidrio se disuelve, el bloque se centra, sube
   y la descripción se despliega. Todo el texto, blanco pleno.
   ═══════════════════════════════════════════════════════════════════════════ */
.prisma__cara-nombre, .prisma__cara-funcion, .prisma__cara-sigla, .prisma__cara-que, .prisma__cara-parte{ color:#FFFFFF !important; }
@media (min-width:768px){
  .prisma__caras{ grid-auto-rows:15rem 9.6rem !important; }
  a.prisma__cara .prisma__cara-cuerpo{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; margin:0 !important;
    align-self:auto !important; }
  .prisma__cara-que{ max-height:0; opacity:0; overflow:hidden; margin:0;
    transition:max-height .5s cubic-bezier(.22,.9,.24,1), opacity .4s ease, margin .5s ease; }
  a.prisma__cara:hover .prisma__cara-cuerpo{ align-items:center; text-align:center; }
  a.prisma__cara:hover .prisma__cara-que{ max-height:6rem; opacity:1; margin-top:.55rem; transition-delay:.06s; }
}

/* 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; }

/* El filete de luz bajo las siglas se va, pero deja su sitio: si desapareciera del todo, las
   tarjetas subirían (Luis, 2026-09-22: «quitá esa línea pero sin subir las tarjetas»). */
.prisma__espectro{ visibility:hidden !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS CARAS · LA VUELTA BUENA (Luis, 2026-09-22: «cuando pongo el mouse no pasa el efecto»)
   ───────────────────────────────────────────────────────────────────────────
   El efecto sí estaba escrito, pero no llegaba a la pantalla: una regla anterior fijaba
   `transform: translateY(-4px) !important` en la tarjeta, y el `!important` le ganaba al giro
   en 3D, que iba sin él. Acá se cierra el tema de una vez: esta sección es la última del
   archivo y lleva `!important` en todo lo que antes se peleaba, así nada la puede tapar.
   Lo que pasa al pasar el cursor, en orden:
     · la tarjeta se levanta y se inclina en el espacio —el giro de verdad, con perspectiva—,
     · la foto respira: se acerca y recupera color,
     · el vidrio del texto se disuelve y deja la imagen limpia,
     · el bloque de letra se centra, sube y se despliega la descripción,
     · las demás caras se apagan, para que sólo quede la que se mira.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (min-width:768px){
  .prisma__caras{ perspective:1500px; perspective-origin:50% 40%; }

  /* EL GIRO. La tarjeta se inclina hacia el cursor; la sombra la despega del fondo. */
  a.prisma__cara{ transition:transform .72s cubic-bezier(.22,.9,.24,1), box-shadow .72s cubic-bezier(.22,.9,.24,1),
    filter .72s cubic-bezier(.22,.9,.24,1), border-color .25s linear !important; }
  a.prisma__cara:hover{
    transform:translateY(-12px) rotateX(3.2deg) rotateY(-2.2deg) scale(1.022) !important;
    border-color:rgba(234,223,206,.62) !important;
    box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important;
    z-index:3 !important; }

  /* LA FOTO respira: se acerca y vuelve en color. */
  a.prisma__cara:hover .prisma__cara-foto{ transform:scale(1.13) !important; filter:saturate(1.16) brightness(1.08) !important; }

  /* EL VIDRIO SE VA. Queda la foto sola; la letra se sostiene con su sombra. */
  a.prisma__cara .prisma__cara-cuerpo{
    transition:background-color .5s ease, backdrop-filter .5s ease, transform .6s cubic-bezier(.22,.9,.24,1),
      align-items .3s ease !important; }
  a.prisma__cara:hover .prisma__cara-cuerpo{
    background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:none !important; border-color:transparent !important;
    align-items:center !important; text-align:center !important;
    transform:translateY(-.55rem) !important; }
  a.prisma__cara:hover .prisma__cara-nombre, a.prisma__cara:hover .prisma__cara-funcion,
  a.prisma__cara:hover .prisma__cara-sigla, a.prisma__cara:hover .prisma__cara-que{
    text-shadow:0 2px 12px rgba(11,20,28,.9), 0 16px 48px rgba(11,20,28,.7) !important; }

  /* LA DESCRIPCIÓN se despliega hacia arriba, sin empujar a nadie: el pie del bloque está
     anclado, así que crece hacia adentro de la tarjeta. */
  .prisma__cara-que{ max-height:0 !important; opacity:0 !important; overflow:hidden !important; margin-top:0 !important;
    transition:max-height .55s cubic-bezier(.22,.9,.24,1), opacity .45s ease .05s, margin-top .55s ease !important; }
  a.prisma__cara:hover .prisma__cara-que{ max-height:7rem !important; opacity:1 !important; visibility:visible !important;
    margin-top:.5rem !important; }

  /* LA PASTILLA de la parte del árbol acompaña. */
  .prisma__cara-parte{ transition:transform .6s cubic-bezier(.22,.9,.24,1), background-color .4s ease !important; }
  a.prisma__cara:hover .prisma__cara-parte{ transform:translateY(-4px) !important; background-color:rgba(26,38,51,.62) !important; }

  /* LAS DEMÁS, a la sombra: el foco es la que se mira. */
  .prisma__caras:hover a.prisma__cara:not(:hover){ filter:brightness(.52) saturate(.5) !important; transform:scale(.982) !important; }
}
@media (prefers-reduced-motion: reduce){
  a.prisma__cara:hover, a.prisma__cara:hover .prisma__cara-cuerpo, a.prisma__cara:hover .prisma__cara-parte,
  .prisma__caras:hover a.prisma__cara:not(:hover){ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS CARAS · TERCERA VUELTA (Luis, 2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   Tres cosas que pidió, y una que faltaba:
   1. «Que las letras se lean bien, no importa la tarjeta o la foto.» La letra ya no depende
      del panel: lleva su propia sombra en tres capas —una pegada, una media y una ancha—, que
      la sostiene sobre arena blanca igual que sobre bosque oscuro. No se oscurece la foto para
      lograrlo: se le da cuerpo a la letra.
   2. «Ese contorno que ilumina el cuadro no lo quiero; sólo que la imagen se ilumine.» Fuera el
      borde encendido y el filete del box-shadow. Al pasar, el borde se apaga todavía más: lo
      único que gana luz es la fotografía.
   3. «En tamaño móvil la animación deja de funcionar.» Estaba atada a `min-width:768px`. Ahora
      la condición es una sola: que haya puntero. Ventana angosta o pantalla grande, el efecto
      es el mismo; en una pantalla táctil de verdad —donde no existe «ponerse encima»— la
      descripción se queda a la vista, como hasta ahora.
   4. La transición, de nuevo. Antes todo se movía a la vez y por eso se sentía pobre. Ahora
      entra en cascada y enfocando: el nombre, la función, la sigla y la descripción llegan una
      tras otra, cada una subiendo y saliendo de un desenfoque suave, como si la tarjeta
      terminara de aclararse. Al salir, todo vuelve junto y rápido: entrar se saborea, salir no.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · LA LETRA SE SOSTIENE SOLA, SIEMPRE ────────────────────────────────────────────────── */
.prisma__cara-nombre, .prisma__cara-funcion, .prisma__cara-sigla, .prisma__cara-que{
  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) !important; }
.prisma__cara-funcion, .prisma__cara-sigla{ color:#FFFFFF !important; }

/* 2 · NI CONTORNO NI FILETE: SÓLO LA IMAGEN SE ILUMINA ──────────────────────────────────── */
a.prisma__cara:hover{ border-color:rgba(234,223,206,.08) !important;
  box-shadow:0 34px 80px -22px rgba(6,12,18,.72) !important; outline:none !important; }
a.prisma__cara:hover::after, a.prisma__cara::after{ content:none !important; display:none !important; animation:none !important; }

/* 3 y 4 · EL EFECTO, EN CUALQUIER ANCHO, Y EN CASCADA ───────────────────────────────────── */
@media (hover:hover){
  .prisma__caras{ perspective:1600px; perspective-origin:50% 42%; }

  /* la geometría que hace posible el despliegue: el bloque de letra anclado al pie, con su
     fila reservada en la rejilla, para que al abrirse crezca hacia adentro y no empuje a nadie */
  .prisma__caras{ grid-auto-rows:15rem 9.6rem !important; }
  a.prisma__cara .prisma__cara-cuerpo{ position:absolute !important; left:1.1rem; right:1.1rem; bottom:1.1rem;
    margin:0 !important; align-self:auto !important; }

  /* LA TARJETA: se levanta y se inclina; entra despacio, sale rápido */
  a.prisma__cara{ transform-style:preserve-3d;
    transition:transform .42s cubic-bezier(.4,0,.2,1), box-shadow .42s ease, border-color .3s linear, filter .42s ease !important; }
  a.prisma__cara:hover{
    transform:translateY(-14px) rotateX(4deg) rotateY(-2.6deg) scale(1.03) !important; z-index:3 !important;
    transition:transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s cubic-bezier(.16,1,.3,1), border-color .3s linear !important; }

  /* LA FOTO: se acerca muy despacio y gana luz — es lo único que se ilumina */
  a.prisma__cara .prisma__cara-foto{ transition:transform .7s cubic-bezier(.4,0,.2,1), filter .5s ease !important; }
  a.prisma__cara:hover .prisma__cara-foto{ transform:scale(1.16) !important;
    filter:saturate(1.2) brightness(1.14) !important;
    transition:transform 2.2s cubic-bezier(.12,.86,.2,1), filter 1s cubic-bezier(.2,.8,.2,1) !important; }

  /* EL VIDRIO SE DISUELVE y la foto se hace honda al pie, para que la letra tenga fondo */
  a.prisma__cara .prisma__cara-cuerpo{
    transition:background-color .45s ease, backdrop-filter .45s ease, transform .5s cubic-bezier(.4,0,.2,1) !important; }
  a.prisma__cara:hover .prisma__cara-cuerpo{
    background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:none !important; border-color:transparent !important;
    align-items:center !important; text-align:center !important;
    transform:translateY(-.5rem) !important;
    transition:background-color .5s ease, backdrop-filter .5s ease, transform .8s cubic-bezier(.16,1,.3,1) !important; }
  a.prisma__cara .prisma__cara-velo{ transition:background .5s ease !important; }
  a.prisma__cara:hover .prisma__cara-velo{
    background:linear-gradient(180deg, rgba(26,38,51,.30) 0%, rgba(26,38,51,.02) 24%, rgba(26,38,51,.10) 44%,
      rgba(6,12,18,.42) 66%, rgba(6,12,18,.72) 86%, rgba(6,12,18,.82) 100%) !important;
    transition:background .9s cubic-bezier(.16,1,.3,1) !important; }

  /* LA CASCADA. Cada línea sube y termina de enfocarse, una tras otra. */
  a.prisma__cara .prisma__cara-nombre, a.prisma__cara .prisma__cara-funcion,
  a.prisma__cara .prisma__cara-sigla{
    transform:none !important; filter:none;
    transition:transform .35s cubic-bezier(.4,0,.2,1), filter .3s ease, letter-spacing .35s ease !important; }
  a.prisma__cara:hover .prisma__cara-nombre{ transform:translateY(-2px) !important;
    transition:transform .8s cubic-bezier(.16,1,.3,1) .04s, letter-spacing .9s cubic-bezier(.16,1,.3,1) .04s, filter .5s ease .04s !important; }
  a.prisma__cara:hover .prisma__cara-funcion{ transform:translateY(-1px) !important;
    transition:transform .8s cubic-bezier(.16,1,.3,1) .1s, filter .5s ease .1s !important; }
  a.prisma__cara:hover .prisma__cara-sigla{ transform:translateY(-1px) !important;
    transition:transform .8s cubic-bezier(.16,1,.3,1) .16s, filter .5s ease .16s !important; }

  /* LA DESCRIPCIÓN, lo último en llegar: se despliega saliendo del desenfoque */
  .prisma__cara-que{ max-height:0 !important; opacity:0 !important; overflow:hidden !important; margin-top:0 !important;
    transform:translateY(6px); filter:blur(4px);
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin-top .35s ease,
      transform .35s ease, filter .25s ease !important; }
  a.prisma__cara:hover .prisma__cara-que{ max-height:7rem !important; opacity:1 !important; visibility:visible !important;
    margin-top:.5rem !important; transform:translateY(0); filter:blur(0);
    transition:max-height .75s cubic-bezier(.16,1,.3,1) .16s, opacity .55s ease .24s, margin-top .75s ease .16s,
      transform .75s cubic-bezier(.16,1,.3,1) .24s, filter .6s ease .24s !important; }

  /* la pastilla de la parte del árbol acompaña, con su propio tiempo */
  .prisma__cara-parte{ transition:transform .4s cubic-bezier(.4,0,.2,1), background-color .3s ease !important; }
  a.prisma__cara:hover .prisma__cara-parte{ transform:translateY(-5px) !important; background-color:rgba(6,12,18,.6) !important;
    transition:transform .85s cubic-bezier(.16,1,.3,1) .08s, background-color .5s ease !important; }

  /* las demás se apagan: el foco es la que se mira */
  .prisma__caras:hover a.prisma__cara:not(:hover){ filter:brightness(.5) saturate(.45) !important; transform:scale(.978) !important; }
}
/* la rejilla, ajustada a cada ancho para que la fila del texto alcance sin apretar */
@media (hover:hover) and (max-width:1023px){ .prisma__caras{ grid-auto-rows:13rem 9rem !important; } }
@media (hover:hover) and (max-width:767px){ .prisma__caras{ grid-auto-rows:11rem 8.4rem !important; } }
@media (hover:hover) and (max-width:560px){
  .prisma__caras{ grid-auto-rows:6.5rem 7rem !important; }
  a.prisma__cara .prisma__cara-cuerpo{ left:.55rem !important; right:.55rem !important; bottom:.55rem !important; }
  a.prisma__cara:hover .prisma__cara-que{ max-height:5.5rem !important; }
  a.prisma__cara:hover{ transform:translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.02) !important; }
}
/* En una pantalla táctil no existe «ponerse encima»: la descripción se queda a la vista. */
@media (hover:none){
  .prisma__cara-que{ position:static !important; max-height:none !important; opacity:1 !important;
    transform:none !important; filter:none !important; overflow:visible !important; }
  a.prisma__cara .prisma__cara-cuerpo{ position:static !important; }
}
@media (prefers-reduced-motion: reduce){
  a.prisma__cara, a.prisma__cara:hover, a.prisma__cara:hover .prisma__cara-cuerpo,
  a.prisma__cara:hover .prisma__cara-nombre, a.prisma__cara:hover .prisma__cara-funcion,
  a.prisma__cara:hover .prisma__cara-sigla, a.prisma__cara:hover .prisma__cara-parte,
  .prisma__caras:hover a.prisma__cara:not(:hover){ transform:none !important; }
  .prisma__cara-que, a.prisma__cara:hover .prisma__cara-que{ filter:none !important; transform:none !important; }
}

/* La sombra de la letra, también con el cursor encima: una regla anterior del hover la pisaba
   con una sombra más floja y el texto perdía cuerpo justo cuando el panel se va (Luis: «que se
   lean bien, no importa la tarjeta o la foto»). */
a.prisma__cara .prisma__cara-nombre, a.prisma__cara .prisma__cara-funcion,
a.prisma__cara .prisma__cara-sigla, a.prisma__cara .prisma__cara-que,
a.prisma__cara:hover .prisma__cara-nombre, a.prisma__cara:hover .prisma__cara-funcion,
a.prisma__cara:hover .prisma__cara-sigla, a.prisma__cara:hover .prisma__cara-que{
  text-shadow:0 1px 2px rgba(6,12,18,.96), 0 4px 12px rgba(6,12,18,.9), 0 14px 40px rgba(6,12,18,.75) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AL MIRAR UNA CARA, SE APAGA EL TEATRO (Luis, 2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   «Además de que se oscurezcan las demás tarjetas, que se oscurezca un poquito el fondo de
   atrás, para darle más impresión a eso en que nos estamos poniendo encima.»
   No se puede apagar el padre con un filtro —se apagaría también la tarjeta que se mira, que
   es su hija—. Se hace al revés: la sección pregunta si alguna de sus caras tiene el cursor
   (`:has`) y, si la tiene, baja la luz de todo lo que NO es esa tarjeta: la fotografía del
   fondo, el título y los bloques de abajo. La cara encendida queda sola en el escenario.
   Es un cambio de una sola pieza: si no gusta, se borra este bloque y todo vuelve a como está.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover){
  #sections-container > section.prisma .prisma__escena,
  #sections-container > section.prisma .prisma__velo,
  #sections-container > section.prisma .prisma__cab,
  #sections-container > section.prisma .prisma__bloque{
    transition:filter .75s cubic-bezier(.16,1,.3,1), opacity .75s cubic-bezier(.16,1,.3,1) !important; }

  /* la fotografía del fondo baja a media luz */
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__escena{
    filter:brightness(.26) contrast(1.02) saturate(.8) !important; }
  /* el título y lo de abajo se retiran un paso */
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__cab{ opacity:.4 !important; }
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__bloque{ opacity:.38 !important; }
}
@media (prefers-reduced-motion: reduce){
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__escena,
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__cab,
  #sections-container > section.prisma:has(a.prisma__cara:hover) .prisma__bloque{ transition-duration:.01ms !important; }
}