/* Carrusel Flexbox. El arte se separa del contenido. */
.portada { display: flex; flex-direction: column; background: #0d120f; }
.portada-ventana { position: relative; overflow: hidden; opacity: 1; transition: opacity .55s ease; }
.portada-ventana.cambiando { opacity: 0; transition-duration: .22s; }
.portada-pista { display: flex; align-items: stretch; transform: translateX(var(--desplazamiento,0%)); touch-action: pan-y; }
.banner { --zoom-inicio: 1.28; --recorrido-x: 3%; --recorrido-y: 1%; --foco: 65% 55%; --banner-rgb: 240 203 97; --acento: rgb(var(--banner-rgb)); position: relative; isolation: isolate; display: flex; flex: 0 0 100%; min-width: 0; min-height: clamp(620px,calc(100svh - 150px),860px); overflow: hidden; }
/* Acentos tomados de las imágenes: tablero clásico, magia, fuego, mar y plumas. */
.banner-poleana-cuadrado { --banner-rgb: 240 203 97; }
.banner-poleana-pentagonal { --banner-rgb: 114 191 245; --recorrido-x: -3%; --recorrido-y: 2%; --foco: 55% 55%; }
.banner-surtur { --banner-rgb: 255 157 94; --recorrido-x: -3%; --foco: 75% 50%; }
.banner-poseidon { --banner-rgb: 107 212 217; --foco: 45% 50%; }
.banner-quetzalcoatl { --banner-rgb: 139 216 161; --recorrido-x: -3%; --recorrido-y: 2%; --foco: 65% 45%; }
.banner-arte { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.banner-arte img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0,0,0) scale(1); transform-origin: var(--foco); }
/* Recorrido de cámara hacia el sujeto: alejamiento y paneo, siempre cubriendo el marco. */
.banner:not([aria-hidden="true"]) .banner-arte img { animation: recorrer-banner 9s cubic-bezier(.2,.45,.45,1) both; will-change: transform; }
@keyframes recorrer-banner {
    from { transform: translate3d(var(--recorrido-x),var(--recorrido-y),0) scale(var(--zoom-inicio)); }
    to { transform: translate3d(0,0,0) scale(1); }
}
.banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0b120fec 0%,#0b120fc7 27%,#0b120f65 48%,transparent 76%),linear-gradient(0deg,#0d120f 0%,transparent 30%,#0b120f16); }
.banner-contenido { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 30px; padding: 55px var(--margen); }
.banner-texto { display: flex; flex-direction: column; align-items: flex-start; width: 58%; max-width: 750px; }
.banner h1, .banner h2 { font-size: clamp(70px,7.2vw,112px); line-height: .99; letter-spacing: -.045em; text-shadow: 0 3px 35px #00000022; }
.banner h1 em, .banner h2 em { color: var(--acento); }
.banner .etiqueta { color: var(--acento); margin-bottom: 25px; }
.banner-descripcion { max-width: 420px; color: #d0d4c9; font-size: 15px; line-height: 1.85; margin-top: 28px; }
.banner .acciones { margin-top: 30px; gap: 23px; }
.banner .boton-principal { background: var(--acento); border-color: var(--acento); color: #101713; box-shadow: 0 6px 24px rgb(var(--banner-rgb) / .12); }
.banner .boton-principal:hover { background: color-mix(in srgb,var(--acento),white 12%); border-color: var(--acento); box-shadow: 0 8px 30px rgb(var(--banner-rgb) / .24); }
.banner-poseidon .banner-arte img { object-position: 58% center; }
.banner-quetzalcoatl .banner-arte img { object-position: 65% center; }
.banner-tablero .banner-texto { width: 45%; max-width: 580px; }
.portada-controles { display: flex; justify-content: center; align-items: center; padding: 4px var(--margen) 12px; min-height: 60px; border-bottom: 1px solid var(--linea); }
.portada-indices { display: flex; align-items: center; justify-content: center; gap: 2px; }
.portada-indices button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; }
.portada-indicador { width: 8px; height: 8px; border-radius: 999px; background: #8d9787; transition: width .25s ease, background-color .25s ease; }
.portada-indices button[aria-current] .portada-indicador { width: 32px; background: #efd3a0; }
.portada-indices button:hover .portada-indicador { background: #efd3a0; }
.portada-indices button:focus-visible { outline: 2px solid #efd3a0; outline-offset: 0; }
@media (min-width: 1800px) {
    .banner { min-height: 850px; }
    .banner-arte img { object-position: center 42%; }
}
@media (max-width: 1100px) {
    .banner h1, .banner h2 { font-size: 82px; }
    .banner-texto { width: 66%; }
}
@media (max-width: 900px) {
    .banner { min-height: 650px; }
    .banner-contenido { padding-block: 45px; }
    .banner h1, .banner h2 { font-size: 76px; }
    .banner-texto { width: 80%; }
    .banner-tablero h1, .banner-tablero h2 { font-size: clamp(54px,8vw,72px); }
}
@media (max-width: 600px) {
    .banner { --zoom-inicio: 1.22; min-height: 755px; }
    .banner-arte { height: 440px; }
    .banner-arte img { object-position: 78% top; }
    .banner-poseidon .banner-arte img { object-position: 35% top; }
    .banner-quetzalcoatl .banner-arte img { object-position: 64% top; }
    .banner::before { background: linear-gradient(0deg,#0d120f 39%,#0d120feb 48%,#0d120f88 61%,transparent 83%),linear-gradient(90deg,#0d120f20,transparent); }
    .banner-contenido { align-items: flex-end; padding: 300px var(--margen) 32px; }
    .banner-texto { width: 100%; max-width: none; }
    .banner-tablero .banner-arte { inset: 0 0 auto; height: auto; aspect-ratio: 3 / 2; }
    .banner-tablero::before { background: linear-gradient(0deg,#0d120f 0%,#0d120f 55%,transparent 78%); }
    .banner-tablero .banner-contenido { padding-top: calc(66.667vw + 20px); }
    .banner-tablero .banner-texto { width: 100%; max-width: none; }
    .banner-tablero h1, .banner-tablero h2 { font-size: clamp(52px,14vw,74px); }
    .banner h1, .banner h2 { font-size: clamp(52px,14vw,74px); }
    .banner .etiqueta { font-size: 9px; letter-spacing: .12em; margin-bottom: 18px; }
    .banner .linea { width: 22px; margin-right: 10px; }
    .banner-descripcion { font-size: 14px; max-width: 350px; margin-top: 22px; }
    .banner .acciones { margin-top: 24px; gap: 12px 20px; }
    .banner .boton { font-size: 12px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .portada-ventana, .portada-indicador { transition: none; }
    .banner:not([aria-hidden="true"]) .banner-arte img { animation: none; will-change: auto; }
}