/* Portada Prisma: capa editorial sobre el motor de menú, sesiones y transiciones existente. */
body.portada-prisma{background:#061733;color:#eaf4ff}
body.portada-prisma #fondo{opacity:.18;filter:saturate(.8)}
/* --menu-extra lo escribe app.js: el alto que las tarjetas del menú
   ocupan DE MÁS respecto a la rejilla básica (con sesión premium o de
   administración salen más filas). El héroe crece esa medida por abajo
   —con transición, para que se abra suave— y así las tarjetas nunca se
   montan sobre los textos ni sobre Fran, que sube a la vez. */
body.portada-prisma .heroe{isolation:isolate;min-height:1000px;align-items:flex-start;justify-content:flex-start;padding:clamp(150px,15vh,210px) max(5vw,calc((100vw - 1360px)/2)) calc(340px + var(--menu-extra,0px));transition:padding-bottom .8s cubic-bezier(.22,.9,.26,1),min-height .8s cubic-bezier(.22,.9,.26,1);text-align:left;background-color:#071632;background-image:linear-gradient(90deg,rgba(3,11,35,.9) 0%,rgba(3,11,35,.62) 40%,rgba(3,11,35,.08) 76%),url('https://i.imgur.com/HZIDVUC.jpg');background-position:center;background-size:cover;overflow:hidden}
body.portada-prisma .heroe::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 29% 28%,rgba(77,220,255,.16),transparent 27%),linear-gradient(180deg,rgba(1,8,28,.1),rgba(1,8,28,.28))}
body.portada-prisma .pv-aurora{position:absolute;top:10%;left:24%;width:38vw;height:34vw;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(77,220,255,.18),rgba(123,86,255,.12) 34%,transparent 69%);filter:blur(14px);animation:pvAurora 8s ease-in-out infinite}
body.portada-prisma .heroe-titulo,body.portada-prisma .heroe-cinta,body.portada-prisma .heroe-texto,body.portada-prisma .heroe-texto-2{width:min(54%,690px);margin-left:0}
body.portada-prisma .heroe-titulo{margin-bottom:4px}
body.portada-prisma .heroe-titulo .sombrero{display:none}
body.portada-prisma .heroe-titulo h1{font-family:var(--f-cuerpo);font-size:clamp(3.5rem,7vw,7.4rem);font-weight:900;line-height:.88;letter-spacing:-.072em;color:#fff;text-shadow:0 12px 45px rgba(0,0,0,.4)}
body.portada-prisma .heroe-cinta{margin-top:20px;padding:0;background:none;border:0;box-shadow:none;clip-path:none;font-family:var(--f-cuerpo);font-size:clamp(1.35rem,2.2vw,2.25rem);font-weight:750;letter-spacing:-.035em;color:#8eeaff}
body.portada-prisma .heroe-texto{margin-top:20px;font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.55;color:#f4f8ff}
body.portada-prisma .heroe-texto-2{display:none}
body.portada-prisma .pv-fran{position:absolute;z-index:-1;right:max(3vw,calc((100vw - 1500px)/2));bottom:262px;width:min(49vw,700px);height:auto;filter:drop-shadow(0 32px 36px rgba(0,0,0,.42));animation:pvFlota 6s ease-in-out infinite}
body.portada-prisma .tarjetas{position:absolute;z-index:2;left:50%;bottom:42px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;width:min(93vw,1380px);margin:0;padding:0;background:none;border:0;box-shadow:none;clip-path:none}
body.portada-prisma .tarjeta{isolation:isolate;display:flex;min-height:170px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;overflow:hidden;padding:22px;border:1px solid rgba(205,234,255,.48);border-radius:19px;background-color:#0a2248;background-image:linear-gradient(180deg,rgba(3,12,35,.02) 25%,rgba(2,11,34,.92) 100%),url('https://i.imgur.com/nLfSnKg.jpg');background-size:100% 100%,400% 200%;background-repeat:no-repeat;color:#fff;box-shadow:0 18px 35px rgba(0,5,25,.32),inset 0 1px rgba(255,255,255,.2);transform:translate3d(var(--tx,0),0,0);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease}
body.portada-prisma .tarjeta:not(:first-child){border-top:1px solid rgba(205,234,255,.48)}
body.portada-prisma .tarjeta:not(:first-child)::before{display:none}
body.portada-prisma .tarjeta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(155,236,255,.28),transparent 38%);opacity:0;transition:opacity .3s ease}
body.portada-prisma .tarjeta:hover,body.portada-prisma .tarjeta:focus-visible{transform:translate3d(var(--mx,0),-10px,0) scale(1.015);border-color:var(--acc);background-image:linear-gradient(180deg,rgba(3,12,35,0) 12%,rgba(2,11,34,.95) 100%),url('https://i.imgur.com/nLfSnKg.jpg');box-shadow:0 26px 50px rgba(0,4,25,.46),0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent);animation:none}
body.portada-prisma .tarjeta:hover::after,body.portada-prisma .tarjeta:focus-visible::after{opacity:1}
body.portada-prisma .tarjeta .icono{width:42px;height:42px;margin-bottom:auto;font-size:1.6rem;filter:drop-shadow(0 0 12px var(--acc));animation:none}
body.portada-prisma .tarjeta .icono .fm-icono{width:42px;height:42px}
body.portada-prisma .tarjeta h3{font-family:var(--f-cuerpo);font-size:clamp(1rem,1.25vw,1.28rem);font-weight:850;line-height:1.05;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
body.portada-prisma .tarjeta h3::before{display:none}
body.portada-prisma .tarjeta p{position:static;width:auto;height:auto;margin:7px 0 0;overflow:visible;clip-path:none;white-space:normal;color:#dbeaff;font-size:.81rem;line-height:1.3;text-align:left}
body.portada-prisma .tarjeta .ir{display:block;margin-top:11px;color:var(--acc);font-size:.78rem;font-weight:900}
body.portada-prisma .tarjeta[data-zona="aula-de-fran"]{background-position:0 0,0 0}body.portada-prisma .tarjeta[data-zona="docencia"]{background-position:0 0,33.333% 0}body.portada-prisma .tarjeta[data-zona="aula-virtual"]{background-position:0 0,66.666% 0}body.portada-prisma .tarjeta[data-zona="sala-premium"]{background-position:0 0,100% 0}body.portada-prisma .tarjeta[data-zona="oposiciones"]{background-position:0 0,0 100%}body.portada-prisma .tarjeta[data-zona="donar"]{background-position:0 0,33.333% 100%}body.portada-prisma .tarjeta[data-zona="zona-pruebas"]{background-position:0 0,66.666% 100%}body.portada-prisma .tarjeta[data-zona="facebar"]{background-position:0 0,100% 100%}
body.portada-prisma .tarjeta:nth-child(5):last-child{grid-column:2 / span 2}
body.portada-prisma .lema{display:none}
body.portada-prisma .baja{bottom:14px;left:50%;transform:translateX(-50%);color:#d7efff}.baja .flecha{animation:pvBajar 1.8s ease-in-out infinite}
body.portada-prisma .zona{width:min(92vw,1360px);padding:clamp(70px,10vw,130px) 0}
body.portada-prisma #sobre{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}.portada-prisma #sobre .titulo-zona{grid-column:1/-1}.portada-prisma #sobre .sobre-caja{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;border-radius:30px;background:#fff;color:#102a57;box-shadow:0 25px 70px rgba(4,25,69,.18)}
body.portada-prisma .sobre-texto{padding:clamp(30px,5vw,70px)}body.portada-prisma .sobre-texto p{color:#4a6087;font-size:1.05rem;line-height:1.7}body.portada-prisma .sobre-escena{min-height:480px;background:url('https://i.imgur.com/4lydgBy.jpg') center/cover no-repeat}.portada-prisma .sobre-escena svg,.portada-prisma .monitor-palabras,.portada-prisma .vaho{display:none}
body.portada-prisma #recursos{position:relative;width:100%;padding-left:4vw;padding-right:4vw;background:linear-gradient(135deg,#061b45,#102f6f);color:#fff}.portada-prisma #recursos .titulo-zona h2{color:#fff}.portada-prisma #recursos .sub-zona{color:#cce0ff}.portada-prisma .carrusel-caja{max-width:1360px;margin:auto}.portada-prisma .recurso{border-radius:22px;overflow:hidden;box-shadow:0 20px 42px rgba(0,0,0,.3)}
body.portada-prisma #comunidad{width:100%;padding:120px max(4vw,calc((100vw - 1360px)/2));background:#eff6ff url('https://i.imgur.com/4lydgBy.jpg') center/cover no-repeat}.portada-prisma .banda{max-width:1360px;margin:auto}.portada-prisma .banda-caja{border-radius:24px;backdrop-filter:blur(12px);background:rgba(255,255,255,.88);box-shadow:0 18px 50px rgba(4,27,75,.15)}
body.portada-prisma .pie{position:relative;min-height:280px;padding-top:150px;background:#061634 url('https://i.imgur.com/4lydgBy.jpg') center/cover no-repeat;color:#fff}
@media (prefers-reduced-motion:no-preference){body.portada-prisma .tarjeta:nth-child(4n+1){animation:pvTarjeta 5.8s ease-in-out infinite}body.portada-prisma .tarjeta:nth-child(4n+2){animation:pvTarjeta 6.5s ease-in-out infinite -2.2s}body.portada-prisma .tarjeta:nth-child(4n+3){animation:pvTarjeta 5.2s ease-in-out infinite -1s}body.portada-prisma .tarjeta:nth-child(4n){animation:pvTarjeta 7.1s ease-in-out infinite -3.4s}}
@keyframes pvFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pvAurora{0%,100%{transform:scale(.9) translate(-2%,-2%);opacity:.45}50%{transform:scale(1.16) translate(3%,4%);opacity:.9}}@keyframes pvTarjeta{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pvBajar{50%{transform:translateY(7px)}}
@media(max-width:1050px){body.portada-prisma .heroe{min-height:1120px;padding-bottom:calc(460px + var(--menu-extra,0px))}body.portada-prisma .tarjetas{grid-template-columns:repeat(2,1fr);bottom:38px}body.portada-prisma .tarjeta{min-height:145px}body.portada-prisma .pv-fran{width:55vw;right:-2vw;bottom:435px}body.portada-prisma .heroe-titulo,body.portada-prisma .heroe-cinta,body.portada-prisma .heroe-texto,body.portada-prisma .heroe-texto-2{width:58%}}
@media(max-width:680px){body.portada-prisma .heroe{min-height:1310px;padding:125px 22px 575px;background-position:63% center}body.portada-prisma .heroe-titulo,body.portada-prisma .heroe-cinta,body.portada-prisma .heroe-texto,body.portada-prisma .heroe-texto-2{width:100%}body.portada-prisma .heroe-titulo h1{font-size:clamp(3.5rem,17vw,5.4rem)}body.portada-prisma .pv-fran{right:-7%;bottom:502px;width:95vw;opacity:.8}body.portada-prisma .tarjetas{grid-template-columns:1fr 1fr;gap:9px;bottom:36px;width:calc(100% - 24px)}body.portada-prisma .tarjeta{min-height:130px;padding:13px;border-radius:15px}.portada-prisma .tarjeta .icono{width:31px;height:31px}.portada-prisma .tarjeta .icono .fm-icono{width:31px;height:31px}.portada-prisma .tarjeta h3{font-size:.88rem}.portada-prisma .tarjeta p{display:none}.portada-prisma .tarjeta .ir{margin-top:5px;font-size:.67rem}body.portada-prisma #sobre .sobre-caja{grid-template-columns:1fr}.portada-prisma .sobre-escena{min-height:300px;grid-row:1}.portada-prisma #sobre{display:block}.portada-prisma .zona{width:min(94vw,1360px)}}
@media(prefers-reduced-motion:reduce){body.portada-prisma *,body.portada-prisma *::before,body.portada-prisma *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Capas vivas de la escena: ornamentación lenta, sin interferir con los accesos. */
body.portada-prisma .pv-constelacion{position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:.2;background:url('https://i.imgur.com/kQlWfP2.png') center/cover no-repeat;mix-blend-mode:screen;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 42%,transparent 88%);animation:pvConstelacion 26s ease-in-out infinite alternate}
body.portada-prisma .pv-orbita{position:absolute;z-index:-1;width:clamp(130px,16vw,250px);aspect-ratio:1;border:1px solid rgba(127,225,255,.48);border-radius:50%;box-shadow:inset 0 0 28px rgba(97,194,255,.16),0 0 28px rgba(97,194,255,.16);pointer-events:none}
body.portada-prisma .pv-orbita::before{content:"";position:absolute;width:13px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 10%,#aaf4ff 28%,#2979e3 60%,#132c80 100%);box-shadow:0 0 22px #65d9ff;top:calc(50% - 7px);left:-7px}
body.portada-prisma .pv-orbita--uno{right:35%;top:15%;transform:rotateX(66deg) rotateZ(18deg);animation:pvOrbitaUno 16s linear infinite}
body.portada-prisma .pv-orbita--dos{right:4%;top:8%;width:clamp(80px,10vw,150px);border-color:rgba(255,202,94,.45);transform:rotateX(66deg) rotateZ(-25deg);animation:pvOrbitaDos 13s linear infinite}
body.portada-prisma .pv-orbita--dos::before{background:radial-gradient(circle at 35% 35%,#fff7cf 0 10%,#ffd46a 30%,#eb862c 62%,#723414 100%);box-shadow:0 0 20px #ffbf58}
body.portada-prisma .pv-cometa{position:absolute;z-index:1;top:22%;right:45%;width:82px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(126,233,255,.15),#dcfbff);filter:drop-shadow(0 0 7px #69d8ff);transform:rotate(-30deg);opacity:0;pointer-events:none;animation:pvCometa 11s ease-in-out infinite}
@keyframes pvConstelacion{from{transform:scale(1.02) translate3d(-.8%,-.4%,0);opacity:.14}to{transform:scale(1.1) translate3d(1.2%,.8%,0);opacity:.27}}
@keyframes pvOrbitaUno{to{transform:rotateX(66deg) rotateZ(378deg)}}
@keyframes pvOrbitaDos{to{transform:rotateX(66deg) rotateZ(335deg)}}
@keyframes pvCometa{0%,15%{opacity:0;transform:translate3d(0,0,0) rotate(-30deg)}23%{opacity:1}42%,100%{opacity:0;transform:translate3d(-310px,180px,0) rotate(-30deg)}}
@media(max-width:760px){body.portada-prisma .pv-constelacion{opacity:.12;mask-image:none}body.portada-prisma .pv-orbita--uno{right:2%;top:20%}body.portada-prisma .pv-orbita--dos{display:none}body.portada-prisma .pv-cometa{right:20%;top:29%}}

/* Ilustraciones narrativas para que las secciones no sean simples bloques de texto. */
body.portada-prisma .sobre-escena{position:relative;overflow:hidden;background:#d9eeff url('https://i.imgur.com/9wAb9gB.png') center/cover no-repeat}
body.portada-prisma .sobre-escena::after{content:"";position:absolute;inset:-18%;pointer-events:none;background:radial-gradient(circle at 30% 28%,rgba(255,218,92,.46),transparent 10%),radial-gradient(circle at 68% 52%,rgba(70,222,255,.32),transparent 18%);mix-blend-mode:screen;animation:pvLuzSeccion 8s ease-in-out infinite alternate}
body.portada-prisma #comunidad{position:relative;isolation:isolate;background:#081840 url('https://i.imgur.com/EhDSQpG.png') center/cover no-repeat}
body.portada-prisma #comunidad::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,13,44,.26),transparent 30%,transparent 70%,rgba(5,13,44,.26));pointer-events:none}
body.portada-prisma #comunidad .banda{position:relative;z-index:1}
body.portada-prisma #comunidad .banda-caja:first-child{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(195,231,255,.48);background:rgba(4,17,52,.76);color:#fff;box-shadow:0 28px 70px rgba(1,7,27,.38),inset 0 1px rgba(255,255,255,.2)}
body.portada-prisma #comunidad .banda-caja:first-child::before{content:"";position:absolute;inset:-55% 30% -55% -20%;z-index:-1;background:radial-gradient(circle,rgba(98,230,255,.28),transparent 57%);filter:blur(7px);animation:pvHaloComunidad 11s ease-in-out infinite alternate}
body.portada-prisma #comunidad .banda-caja:first-child h2,body.portada-prisma #comunidad .banda-caja:first-child .mini-sub{color:#fff}
body.portada-prisma #comunidad .banda-caja:first-child .btn-comunidad{position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(255,71,179,.28)}
body.portada-prisma #comunidad .banda-caja:first-child .btn-comunidad::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.5) 48%,transparent 63%);transform:translateX(-130%);animation:pvBrilloBoton 5.8s ease-in-out infinite}
@keyframes pvLuzSeccion{from{transform:translate3d(-2%,-1%,0) scale(.94);opacity:.42}to{transform:translate3d(3%,2%,0) scale(1.08);opacity:.9}}
@keyframes pvHaloComunidad{from{transform:translate3d(-7%,-3%,0) scale(.86);opacity:.48}to{transform:translate3d(17%,8%,0) scale(1.18);opacity:.95}}
@keyframes pvBrilloBoton{0%,67%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
@media(max-width:680px){body.portada-prisma .sobre-escena{background-position:72% center}body.portada-prisma #comunidad{background-position:56% center}body.portada-prisma #comunidad .banda-caja:first-child{background:rgba(4,17,52,.84)}}

/* El panel de presentación necesita contraste de lectura y una unión más elegante con la ilustración. */
body.portada-prisma #sobre .sobre-caja{position:relative;isolation:isolate;border:1px solid rgba(147,215,255,.45);background:#071b42;box-shadow:0 28px 72px rgba(4,21,62,.24),inset 0 1px rgba(255,255,255,.16)}
body.portada-prisma #sobre .sobre-texto{position:relative;z-index:1;overflow:hidden;background:radial-gradient(circle at 10% 8%,rgba(72,211,255,.2),transparent 31%),linear-gradient(145deg,#061536 0%,#0b2b65 100%);color:#f4f9ff}
body.portada-prisma #sobre .sobre-texto::before{content:"";position:absolute;inset:-35% -35% auto auto;width:280px;aspect-ratio:1;border:1px solid rgba(133,228,255,.35);border-radius:50%;box-shadow:inset 0 0 30px rgba(95,201,255,.15),0 0 32px rgba(95,201,255,.12);transform:rotateX(63deg) rotateZ(-20deg);pointer-events:none;animation:pvOrbitaSobre 14s linear infinite}
body.portada-prisma #sobre .sobre-texto::after{content:"";position:absolute;right:12%;bottom:11%;width:9px;aspect-ratio:1;border-radius:50%;background:#ffdf76;box-shadow:-84px -30px 0 -2px #70e9ff,-132px 26px 0 -3px #ff87d9,-45px 63px 0 -4px #fff3bd,0 0 18px #ffe080;pointer-events:none;animation:pvChispasSobre 6.5s ease-in-out infinite alternate}
body.portada-prisma #sobre .sobre-texto p{position:relative;z-index:1;color:#dcecff;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.72;text-shadow:0 1px 0 rgba(0,0,0,.16)}
body.portada-prisma #sobre .sobre-texto p strong{color:#fff;font-size:1.06em}
body.portada-prisma #sobre .sobre-texto .btn-pixel{position:relative;z-index:1;margin-top:12px;border:1px solid rgba(209,247,255,.64);background:linear-gradient(135deg,#40c9f6,#5277f2);color:#fff;box-shadow:0 12px 28px rgba(30,147,239,.34)}
body.portada-prisma #sobre .sobre-escena{min-height:520px;background-position:65% center}
body.portada-prisma #sobre .sobre-escena::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071b42 0%,transparent 26%);pointer-events:none}
@keyframes pvOrbitaSobre{to{transform:rotateX(63deg) rotateZ(340deg)}}
@keyframes pvChispasSobre{from{transform:translate3d(-4px,3px,0);opacity:.58}to{transform:translate3d(8px,-8px,0);opacity:1}}
@media(max-width:680px){body.portada-prisma #sobre .sobre-texto{padding:34px 28px 78px}body.portada-prisma #sobre .sobre-escena{min-height:310px;background-image:url('https://i.imgur.com/fhGEOPu.png');background-position:center;background-size:cover}body.portada-prisma #sobre .sobre-escena::before{background:linear-gradient(180deg,#071b42 0%,transparent 34%)}}

/* ── Ajuste de las ilustraciones al redimensionar ──────────────────
   Las imágenes de la portada estaban medidas solo por el ANCHO de la
   ventana (vw) y colocadas con distancias fijas en píxeles, así que al
   cambiar el tamaño se deformaban, se salían o se comían el texto.
   Aquí se les da proporción propia y un límite por altura. */

/* Fran: la figura mide 1024x1536, o sea que a 700px de ancho pide 1050px
   de alto y el héroe solo tiene 1000px: se quedaba descabezada por el
   overflow. Con max-height el navegador reduce las DOS medidas a la vez
   (regla de los elementos reemplazados), así que nunca se estira. */
body.portada-prisma .pv-fran{
  width:auto;
  height:auto;
  max-width:min(46vw,660px);
  max-height:min(76vh,900px);
  bottom:clamp(180px,24vh,262px);
}

/* Las tarjetas recortan una celda de un sprite de 4x2 (mundos-portada.png,
   1536x1024 → celdas de 384x512, verticales). Con background-size en
   "400% 200%" cada celda se estiraba hasta la proporción de la tarjeta,
   que es apaisada: la ilustración salía aplastada, y más cuanto más
   estrecha fuera la ventana. Con "400% auto" la celda conserva su
   proporción y simplemente se recorta, como un object-fit:cover. Las
   posiciones verticales 18%/82% centran la celda de cada fila sin
   invadir la fila vecina. */
body.portada-prisma .tarjeta,
body.portada-prisma .tarjeta:hover,
body.portada-prisma .tarjeta:focus-visible{background-size:100% 100%,400% auto}
body.portada-prisma .tarjeta[data-zona="aula-de-fran"]{background-position:0 0,0 18%}
body.portada-prisma .tarjeta[data-zona="docencia"]{background-position:0 0,33.333% 18%}
body.portada-prisma .tarjeta[data-zona="aula-virtual"]{background-position:0 0,66.666% 18%}
body.portada-prisma .tarjeta[data-zona="sala-premium"]{background-position:0 0,100% 18%}
body.portada-prisma .tarjeta[data-zona="oposiciones"]{background-position:0 0,0 82%}
body.portada-prisma .tarjeta[data-zona="donar"]{background-position:0 0,33.333% 82%}
body.portada-prisma .tarjeta[data-zona="zona-pruebas"]{background-position:0 0,66.666% 82%}
body.portada-prisma .tarjeta[data-zona="facebar"]{background-position:0 0,100% 82%}

/* Alturas de las bandas con fondo: en píxeles fijos dejaban franjas
   vacías en pantallas bajas y recortaban el motivo en las altas. */
/* El min-height también suma --menu-extra: si solo creciera el relleno,
   con la caja aún por debajo del mínimo el héroe no se estiraría, pero
   Fran (anclado abajo) subiría igual y se saldría por arriba. */
body.portada-prisma .heroe{min-height:calc(clamp(760px,102vh,1040px) + var(--menu-extra,0px))}
body.portada-prisma #sobre .sobre-escena{min-height:clamp(320px,42vh,520px)}
body.portada-prisma .pie{min-height:clamp(220px,26vh,300px)}

@media(max-width:1050px){
  body.portada-prisma .heroe{min-height:calc(clamp(940px,116vh,1180px) + var(--menu-extra,0px));padding-bottom:calc(clamp(380px,42vh,470px) + var(--menu-extra,0px))}
  body.portada-prisma .pv-fran{width:auto;max-width:min(52vw,520px);right:-2vw;bottom:clamp(330px,40vh,440px);max-height:58vh}
}

@media(max-width:680px){
  /* A 95vw la cara se plantaba encima del párrafo. Se baja de tamaño,
     se ancla al borde y se aparta del texto. */
  body.portada-prisma .heroe{min-height:calc(clamp(1060px,128vh,1360px) + var(--menu-extra,0px));padding-bottom:calc(clamp(470px,56vh,580px) + var(--menu-extra,0px))}
  body.portada-prisma .pv-fran{width:auto;max-width:min(68vw,360px);right:-6vw;bottom:clamp(250px,32vh,320px);max-height:46vh;opacity:.85}
  /* El nombre del sitio se salía por la derecha a 17vw: se recorta un
     punto para que quepa entero en pantallas de 360-380px. */
  body.portada-prisma .heroe-titulo h1{font-size:clamp(2.4rem,12.8vw,5.4rem)}
  body.portada-prisma #sobre .sobre-escena{min-height:clamp(230px,32vh,320px)}
}

/* ── La ilustración de "Sobre FRAN96MC.ES" desaparecía ──────────────
   No se veía ni en móvil ni en tablet, por dos motivos distintos que
   daban el mismo resultado: el bloque acababa con 0px de ancho.

   · En tablet (≤900px) secciones.css le pone `margin:0 auto`. En una
     rejilla, un margen automático anula el estirado del item, así que
     el div —que es puramente decorativo y no tiene contenido— se
     quedaba en su ancho de contenido, es decir, cero.
   · En móvil (≤680px) llevaba solo `grid-row:1`. Como la caja pasa a
     una sola columna y el texto ya ocupaba la fila 1, el navegador
     mandaba la escena a una columna implícita de ancho automático:
     cero otra vez.

   La imagen se descargaba en los dos casos; simplemente no había caja
   donde pintarla. Se colocan las dos piezas de forma explícita y se
   apila la ilustración encima del texto. */
@media(max-width:900px){
  body.portada-prisma #sobre .sobre-caja{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  body.portada-prisma #sobre .sobre-escena{
    grid-column:1;grid-row:1;
    width:auto;max-width:none;margin:0;
    /* 52vw mantiene la caja en la proporción de la ilustración
       (1586x992 = 1.6) a cualquier ancho, así el cover casi no recorta. */
    min-height:clamp(300px,52vw,470px);
    background-position:center 34%;
  }
  body.portada-prisma #sobre .sobre-texto{grid-column:1;grid-row:2}
  /* Apilada, la caja es apaisada y encaja con la ilustración ancha
     (1586x992); la vertical de móvil se reserva para ≤680px. */
  body.portada-prisma #sobre .sobre-escena::before{background:linear-gradient(180deg,#071b42 0%,transparent 34%)}
}
@media(max-width:680px){
  body.portada-prisma #sobre .sobre-escena{
    /* La vertical de móvil (1122x1402 = 0.8) pide caja más alta. */
    min-height:clamp(300px,96vw,420px);
    background-image:url('https://i.imgur.com/fhGEOPu.png');
    background-position:center 30%;
  }
}

/* ── "Scroll para explorar" se salía por la izquierda ────────────────
   El aviso venía con `left:50%` + `transform:translateX(-50%)`, que es
   el truco de centrar algo POSICIONADO. Pero .baja es `position:static`
   (un item más de la columna flex del héroe), así que `left` no hacía
   nada y solo quedaba el translate: el texto se desplazaba media
   anchura hacia la izquierda y el `overflow:hidden` del héroe le
   cortaba las primeras letras ("ara explorar").
   Como el héroe ya es una columna flex, basta con centrar el item. */
/* Centrado quedaba encima de la ilustración de Fran, en mitad de la
   escena. Se lleva a la columna de texto, justo debajo del párrafo:
   ahí hay hueco libre a cualquier ancho, sigue el orden de lectura
   (título → lema → párrafo → invitación) y no pisa el dibujo. */
body.portada-prisma .baja{
  align-self:flex-start;
  transform:none;
  left:auto;
  margin-top:clamp(18px,3vh,32px);
  padding-top:0;
  flex-direction:row;
  align-items:center;
  gap:.55rem;
  max-width:100%;
  opacity:.82;
}
body.portada-prisma .baja span{white-space:nowrap}
body.portada-prisma .baja .flecha{width:14px;height:20px}

/* ── Si imgur no responde ────────────────────────────────────────────
   Las ilustraciones se sirven desde i.imgur.com y ya NO hay copia en el
   servidor: el hosting va justo de espacio y 23 MB de PNG no cabían.
   El plan B, por tanto, no puede ser otro fichero, así que es una
   degradación limpia: cada bloque conserva su color de fondo y sus
   degradados, que están declarados aparte de la imagen, y la figura de
   Fran se oculta en vez de dejar el icono de imagen rota. La portada
   se sigue leyendo entera aunque no cargue ni una sola ilustración. */
html.sin-imgur body.portada-prisma .pv-fran{display:none}
html.sin-imgur body.portada-prisma .sobre-escena{background-image:none}

/* ── La mirada de Fran sigue al cursor ───────────────────────────────
   La ilustración es un PNG, así que los ojos no se pueden mover: se
   dibujan otros encima. Cada ojo es una "tapa" con el color de la
   esclerótica, difuminada por los bordes (mask) para que se funda con
   los párpados y las sombras del dibujo original, y dentro un iris
   propio que se desplaza unos pocos píxeles.

   Toda la geometría va en % de la imagen (medida sobre el original de
   1024x1536: ojo izquierdo centrado en 510,175 y derecho en 579,199),
   así que la mirada sigue cuadrada a cualquier tamaño de pantalla.

   El posicionamiento pasa de la <img> a .pv-fran-caja para que los ojos
   viajen con ella: flotación, sombra y opacidad se aplican ahora a la
   caja entera. */
/* La caja NO lleva medidas propias: al estar posicionada se ajusta
   sola a la imagen, y así los % de los ojos se calculan sobre el mismo
   rectángulo que ocupa el dibujo. Las medidas siguen en la <img>, que
   es quien conserva la proporción con max-width/max-height. */
body.portada-prisma .pv-fran-caja{
  position:absolute;
  z-index:-1;
  right:max(3vw,calc((100vw - 1500px)/2));
  /* Sube lo mismo que crece el héroe cuando el menú trae más filas. */
  bottom:calc(clamp(180px,24vh,262px) + var(--menu-extra,0px));
  transition:bottom .8s cubic-bezier(.22,.9,.26,1);
  line-height:0;
  filter:drop-shadow(0 32px 36px rgba(0,0,0,.42));
  animation:pvFlota 6s ease-in-out infinite;
  pointer-events:none;
}
body.portada-prisma .pv-fran{
  position:static;
  display:block;
  right:auto;bottom:auto;
  filter:none;animation:none;
}

body.portada-prisma .pv-ojo{
  position:absolute;
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* La esclerótica del dibujo es cálida, no blanca: un blanco puro
     cantaría al lado de la piel. */
  background:radial-gradient(circle at 50% 44%,#dcc7b7 0 38%,#a3816a 100%);
  /* El difuminado del borde es lo que hace que la tapa no se note. La
     máscara es una ELIPSE achatada, no un círculo: el círculo desbordaba
     el hueco del párpado y pintaba esclerótica sobre la piel de abajo. */
  -webkit-mask-image:radial-gradient(ellipse 46% 38% at 50% 47%,#000 55%,rgba(0,0,0,.55) 78%,transparent 98%);
          mask-image:radial-gradient(ellipse 46% 38% at 50% 47%,#000 55%,rgba(0,0,0,.55) 78%,transparent 98%);
  overflow:hidden;
}
/* Sombra del párpado superior, que en el dibujo original oscurece la
   parte de arriba del ojo. */
body.portada-prisma .pv-ojo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(52,22,8,.8) 0%,rgba(52,22,8,.3) 30%,transparent 56%);
  pointer-events:none;
}
body.portada-prisma .pv-ojo i{
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  /* --mx y --my los escribe portada-visual.js, en % del propio iris. */
  transform:translate(calc(-50% + var(--mx,0%)),calc(-50% + var(--my,0%)));
  transition:transform .12s ease-out;
  background:
    radial-gradient(circle at 31% 24%,rgba(255,255,255,.97) 0 10%,transparent 11%),
    radial-gradient(circle at 69% 31%,rgba(255,255,255,.45) 0 5%,transparent 6%),
    radial-gradient(circle at 50% 52%,#0b0603 0 36%,transparent 37%),
    radial-gradient(circle at 50% 68%,#9a5220 0 24%,#5d2a06 58%,#241002 100%);
}
/* Medidas tomadas una a una sobre el original de 1024x1536, no a ojo:
   ojo izquierdo abierto de 39x34 px centrado en (509.5,173) con un iris
   de 27; ojo derecho —que está más de perfil y por tanto más bajo y más
   a la derecha— de 42x38 centrado en (588,204.5) con un iris de 28.
   La primera versión puso el derecho 8 px a la izquierda y con el iris
   demasiado grande, y se le montaba encima de la montura y del párpado
   de abajo. La segunda tenía las dos tapas caídas —la derecha casi 7 px—
   y el ojo se veía torcido: comprobado contra el centroide de la pupila
   real, el izquierdo va centrado en (509.5,170) y el derecho en (588,197). */
body.portada-prisma .pv-ojo--izq{left:49.76%;top:11.08%;width:3.81%;aspect-ratio:39/34}
body.portada-prisma .pv-ojo--izq i{width:80%;aspect-ratio:1}
body.portada-prisma .pv-ojo--der{left:57.30%;top:12.68%;width:4.10%;aspect-ratio:42/38}
body.portada-prisma .pv-ojo--der i{width:82%;aspect-ratio:1}

/* Párpado del parpadeo: una tapa de piel que baja sobre el ojo cuando
   portada-visual.js pone la clase pv-cerrado. Va en ::before (el ::after
   ya es la sombra del párpado) con z-index para taparlo todo, y con el
   borde de abajo oscurecido para que haga de línea de pestañas. */
body.portada-prisma .pv-ojo::before{
  content:"";position:absolute;inset:-4%;z-index:2;border-radius:50%;
  background:linear-gradient(180deg,#d99b78 0%,#eab08d 55%,#a96a48 88%,#4a2410 100%);
  transform:translateY(-105%);
  transition:transform .09s ease-in;
  pointer-events:none;
}
body.portada-prisma .pv-ojo.pv-cerrado::before{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){body.portada-prisma .pv-ojo::before{display:none}}

/* Los ojos del Fran de la escena "Sobre mí". El dibujo es un fondo
   cover, así que aquí no hay % fijos: portada-visual.js escribe left,
   top, width y aspect-ratio en línea según el recorte visible, y hasta
   entonces el ojo no existe (pv-listo lo enciende). */
body.portada-prisma .pv-ojo-escena{display:none;z-index:1}
body.portada-prisma .pv-ojo-escena.pv-listo{display:block}
body.portada-prisma .pv-ojo-escena i{width:64%;aspect-ratio:1}

/* Sin ilustración no hay ojos que pintar: ni con imgur caído del todo
   (sin-imgur) ni cuando falla solo el PNG del héroe (pv-sin-fran, lo
   pone su onerror) — si no, los ojos quedan flotando sobre el fondo. */
html.sin-imgur body.portada-prisma .pv-ojo{display:none}
body.portada-prisma .pv-fran-caja.pv-sin-fran .pv-ojo{display:none}
@media(prefers-reduced-motion:reduce){body.portada-prisma .pv-ojo i{transition:none}}

@media(max-width:1050px){
  body.portada-prisma .pv-fran-caja{right:-2vw;bottom:calc(clamp(330px,40vh,440px) + var(--menu-extra,0px))}
}
@media(max-width:680px){
  body.portada-prisma .pv-fran-caja{right:-6vw;bottom:calc(clamp(250px,32vh,320px) + var(--menu-extra,0px));opacity:.85}
}