/* ========================================================================== La entrada al disco. El efecto es el de The Metropolitan Enigma de Ferragamo: papel con sombra de ramas, un título que se deshace en letras y unas tarjetas que esperan en las esquinas y, al entrar, pasan a un carrusel. Aquí las tarjetas son las carátulas del disco. ========================================================================== */ @font-face { font-family: 'EB Garamond'; src: url('../assets/fuentes/eb-garamond-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } :root { /* Claro u oscuro, como en la web del disco (js/tema.js marca el tema en el antes de pintar). El oscuro es el de fábrica: la pared de cal de noche, el logo sobre oscuro y los textos en blanco. En el carrusel, la carátula desenfocada con el velo oscuro de las páginas de canción. */ --papel: #2a2c31; --mezcla-pared: multiply; --logo: url('../assets/logo-oscuro.png'); --texto: #fff; --sombra-texto: 0 1px 2px rgba(0, 0, 0, 0.5); --fondo-cancion: #111; --fondo-portada: 0.95; --lavado-portada: saturate(1); --velo-fondo: none; --flecha-borde: rgba(255, 255, 255, 0.55); --raya-ficha: rgba(255, 255, 255, 0.45); --flecha-fondo: rgba(255, 255, 255, 0.1); --velo-ficha: rgba(20, 20, 24, 0.55); --flecha-fondo-encima: rgba(255, 255, 255, 0.22); --boton-tema: rgba(20, 22, 26, 0.55); --boton-tema-encima: rgba(20, 22, 26, 0.75); --sombra-carta: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.12); --halo-foco: rgba(252, 0, 89, 0.3); --alto-carta: clamp(160px, 44vh, 440px); --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif; } /* El claro: la pared encalada a pleno día, el logo sobre claro y el texto en su tinta, con un halo claro para leerse sobre las sombras. En el carrusel, la carátula lavada sobre papel crema, como el tema claro de las páginas de canción. */ :root[data-tema="claro"] { --papel: #efede9; --mezcla-pared: normal; --logo: url('../assets/logo.png'); --texto: #2f3742; --sombra-texto: 0 0 14px rgba(255, 255, 255, 0.7); --fondo-cancion: #f2eee5; --fondo-portada: 0.9; --lavado-portada: saturate(1.25) contrast(0.72) brightness(1.42); --velo-fondo: radial-gradient(60% 40% at 18% 12%, rgba(255, 253, 246, 0.4), transparent 70%), radial-gradient(55% 38% at 85% 78%, rgba(226, 218, 200, 0.38), transparent 72%), linear-gradient(rgba(244, 240, 231, 0.6), rgba(236, 230, 217, 0.68)); --flecha-borde: rgba(47, 55, 66, 0.45); --raya-ficha: rgba(47, 55, 66, 0.4); --flecha-fondo: rgba(255, 255, 255, 0.4); --velo-ficha: rgba(250, 248, 242, 0.72); --flecha-fondo-encima: rgba(255, 255, 255, 0.75); --boton-tema: rgba(255, 255, 255, 0.7); --boton-tema-encima: rgba(255, 255, 255, 0.9); } @media (orientation: portrait) { :root { --alto-carta: clamp(120px, 25vh, 300px); } } *, *::before, *::after { box-sizing: border-box; } html, body { position: fixed; inset: 0; margin: 0; overflow: hidden; } body { touch-action: pan-y pinch-zoom; /* El patrón de cal se repite en mosaico: sus bordes casan y no se ven las juntas, y así pesa poco y no se estira en pantallas grandes. */ background: var(--papel) url('../assets/cal/pared.jpg') 0 0 / 800px auto repeat; /* En oscuro, la cal se multiplica por el tono de la noche. */ background-blend-mode: var(--mezcla-pared); color: var(--texto); transition: background-color 0.5s ease, color 0.5s ease; font-family: var(--font-sans); font-weight: 300; font-size: max(14px, 1.05vw); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------- El papel --- */ /* La sombra de unas ramas sobre el papel, muy desenfocada. Es un SVG en línea, no una foto: no pesa nada. Algo más grande que la pantalla para que al inclinarse con el ratón no se le vean los bordes. */ .sombras { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply; will-change: transform; } .sombras svg { position: absolute; top: 50%; left: 50%; width: 120vw; height: 120vh; transform: translate(-50%, -50%); filter: blur(min(4vw, 48px)); opacity: 0.32; } .rama { fill: #5c5048; } /* El grano, como en la web del disco. Sobre la cal ya lo pone la foto de la pared: aquí se deja apagado. */ .grano { position: fixed; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* --------------------------------------------- El fondo de la canción --- */ /* Como en las páginas de canción de la web del disco: la carátula ampliada (210 %, para que el desenfoque no deje bordes), desenfocada 28 px y con un velo oscuro. Aparece al entrar en el carrusel, por encima de la cal. */ .fondo-cancion { position: fixed; inset: 0; z-index: 2; overflow: hidden; background: var(--fondo-cancion); opacity: 0; pointer-events: none; transition: opacity 1.2s ease, background-color 0.5s ease; } .con-caratula .fondo-cancion { opacity: 1; } /* La capa nueva llega desde el lado hacia el que se va (--desde) y un poco más cerca, y se posa mientras la anterior se funde. */ .fondo-capa { position: absolute; top: -55%; left: -55%; width: 210%; height: 210%; background-position: 50% !important; background-repeat: no-repeat !important; background-size: cover !important; filter: blur(28px) var(--lavado-portada); opacity: 0; transform: translateX(0) scale(1.04); transition: opacity 1.1s ease, transform 1.8s cubic-bezier(0.25, 1, 0.5, 1); } .fondo-capa.activa { opacity: var(--fondo-portada); transform: translateX(0) scale(1); } .fondo-capa.llega { transition: none; opacity: 0; transform: translateX(var(--desde, 0%)) scale(1.1); } @media (prefers-reduced-motion: reduce) { .fondo-capa, .fondo-cancion { transition: none; } } /* Sobre la carátula del tema claro, lavada, el halo claro sobra. */ :root[data-tema="claro"] .con-caratula { --sombra-texto: none; } /* El velo del papel sobre la carátula, en el tema claro; en oscuro, nada. */ .fondo-cancion::after { content: ''; position: absolute; inset: 0; background: var(--velo-fondo); } /* ------------------------------------------------------ El interruptor --- */ /* Claro u oscuro, como en la web del disco: arriba a la derecha, con el icono de adonde se va y no del tema en que se está. */ .tema { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 60; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--boton-tema); /* Un cristal: en la esquina puede asomar una carátula, y sin él el botón se perdía encima de ella. */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } .tema:hover { background: var(--boton-tema-encima); } .tema:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--halo-foco); } .tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root[data-tema="claro"] .icono-sol, :root:not([data-tema="claro"]) .icono-luna { display: none; } .icono-luna { fill: currentColor; stroke: none; } /* ------------------------------------------------------------ La firma --- */ .cabecera { position: fixed; top: max(24px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 30; text-align: center; pointer-events: none; } /* Dentro, la firma deja paso al logo pequeño, que va abajo a la derecha: en la esquina opuesta a la ficha, para dejarle a la carátula todo el centro. En la portada no se ve (el logo grande ya está en el centro). */ .marca { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); /* Con el ancho y también con el alto: en una ventana de proporción intermedia no se queda pequeño. */ width: clamp(110px, max(10vw, 21vh), 170px); aspect-ratio: 718 / 458; /* Es un botón (vuelve al título): sin cara de botón, con mano de botón. La cabecera no atiende al ratón, pero el logo sí. */ padding: 0; border: 0; background-color: transparent; cursor: pointer; pointer-events: auto; background-image: var(--logo); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(var(--sombra-texto)); opacity: 0; transition: opacity 0.9s ease; } .marca:focus-visible { outline: 2px solid var(--tinta); outline-offset: 8px; } /* En el móvil la ficha baja encima de las flechas, así que el logo sube arriba, al centro: también en el lado opuesto. */ @media (max-width: 720px), (max-aspect-ratio: 4/3) { .marca { width: clamp(135px, 36vw, 185px); top: max(20px, env(safe-area-inset-top)); right: auto; bottom: auto; left: 50%; translate: -50% 0; } /* El botón Portada no está: arriba, en el centro, ya está el logo, que hace lo mismo */ .inicio { display: none; } } .con-caratula .firma { opacity: 0; } .con-caratula .marca { opacity: 1; transition-delay: 0.5s; } .firma { transition: opacity 0.9s ease; margin: 0; font-family: var(--font-serif); font-size: max(15px, 1.35vw); letter-spacing: 0.32em; text-transform: uppercase; text-shadow: var(--sombra-texto); } /* Dentro, donde estaba la firma: arriba, centrado, un botón que vuelve a la portada del título, con el aire de las flechas del mando pero en forma de muesca: colgado del borde de arriba, plano arriba y redondeado abajo, como el notch de macOS. La cabecera no atiende al ratón; el botón, sí. */ .inicio { position: fixed; z-index: 30; top: 0; left: 50%; translate: -50% 0; margin: 0; padding: 8px 28px 9px; border: 1px solid var(--flecha-borde); border-top: 0; border-radius: 0 0 14px 14px; background: var(--flecha-fondo); color: var(--texto); font: 500 11px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: var(--sombra-texto); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity 0.9s ease, background 0.2s ease, border-color 0.2s ease; } .inicio:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--halo-foco); } .con-caratula .inicio { opacity: 1; } /* ----------------------------------------------------------- La portada --- */ .portada { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; text-align: center; pointer-events: none; } .portada.fuera { visibility: hidden; } /* El logotipo crece con el ancho de la pantalla, pero poco a poco: una base fija más un pelo por cada píxel. Si fuera un porcentaje sin más, en el móvil se quedaría en nada o en el ordenador se lo comería todo; así va de unos 210 px en un móvil a unos 350 en un portátil. Con un techo para las pantallas grandes, y sin pasar del 42 % del alto, por las ventanas apaisadas y bajas. */ .logo { position: relative; width: min(160px + 12vw, 380px, 42vh * 718 / 458); aspect-ratio: 718 / 458; margin: 0 auto 2.4vh; } /* Cada trozo es una ventana a su parte de la imagen: el tamaño y la posición del fondo los calcula js/coreografia.js. Empiezan medio hundidos y sin color, como las letras de Ferragamo. */ .trozo { position: absolute; background-image: var(--logo); background-repeat: no-repeat; opacity: 0; transform: translateY(50%); } /* El botón de Ferragamo: mayúsculas y una raya debajo que, al pasar por encima, se recoge hacia un lado y vuelve a tenderse desde el otro. */ .entrar { position: fixed; bottom: max(9vh, calc(env(safe-area-inset-bottom) + 40px)); left: 50%; translate: -50% 0; padding: 8px 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: var(--sombra-texto); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(35px); -webkit-tap-highlight-color: transparent; } .entrar span { position: relative; } .entrar span::before, .entrar span::after { content: ''; position: absolute; bottom: -5px; height: 1px; background: currentColor; } .entrar span::before { left: 10%; width: 80%; transform-origin: 100% 50%; transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .entrar span::after { left: 0; width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; } @media (hover: hover) and (pointer: fine) { .entrar:hover span::before { transform: scaleX(0); } .entrar:hover span::after { transform: scaleX(1); } } .entrar:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--halo-foco); border-radius: 999px; } /* ---------------------------------------------------------- Las cartas --- */ /* Un punto en el centro de la pantalla: cada carta se coloca desde ahí con su transform, en vw y vh, como las tarjetas de Ferragamo. */ .cartas { position: fixed; top: 50%; left: 50%; z-index: 10; width: 1px; height: 1px; /* Una sola perspectiva para todas las cartas, con el punto de fuga en el centro de la pantalla: así el carrusel parece una fila de discos. */ perspective: 1400px; } .carta { --op: 0; --grosor: calc(var(--alto-carta) * 0.03); position: absolute; top: 0; left: 0; display: block; will-change: transform; height: var(--alto-carta); transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; } /* La carta es un bloque, como una lámina montada sobre cartón pluma. El script mueve la .carta de sitio; el bloque, por dentro, flota solo, cada una a su ritmo, para que parezcan vivas. */ .carta-bloque { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: flotar var(--flota, 7s) ease-in-out var(--desfase, 0s) infinite alternate; } /* La tapa del libreto, con la carátula. */ .carta-cuerpo { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 2px 5px 5px 2px; background: #f4f2ee; opacity: var(--op); transform: translateZ(0.5px); } /* El lomo sobre la tapa: la banda por donde se dobla, como en la portada de la web del disco. */ .libreto-lomo { position: absolute; top: 0; left: 0; width: 7%; height: 100%; border-left: 2px solid rgba(0, 0, 0, 0.12); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.07) 100% ); pointer-events: none; } /* Un brillo leve que recorre la tapa, del lomo hacia fuera. */ .libreto-brillo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 100%); opacity: 0.08; pointer-events: none; } /* Las hojas, detrás de la tapa y un pelo más allá de su borde, para que se vea su canto. */ .libreto-pagina { position: absolute; top: 1.5%; bottom: 1.5%; left: 1.5%; right: -1.2%; border-radius: 0 4px 4px 0; background: #fbfaf6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); opacity: var(--op); transform: translateZ(calc(var(--grosor) * -0.25 * var(--hoja))); } /* Los cantos, girados hacia atrás desde cada borde de la tapa, y el dorso al fondo, que es lo que echa la sombra. */ .canto, .carta-dorso { position: absolute; opacity: var(--op); } .canto-arriba, .canto-abajo { left: 0; width: 100%; height: var(--grosor); } .canto-lomo, .canto-derecha { top: 0; width: var(--grosor); height: 100%; } .canto-arriba { top: 0; transform-origin: top; transform: rotateX(-90deg); } .canto-abajo { bottom: 0; transform-origin: bottom; transform: rotateX(90deg); } .canto-derecha { right: 0; transform-origin: right; transform: rotateY(-90deg); } /* El filo de las hojas apiladas: rayas finas de papel y sombra, a lo hondo. */ .canto-paginas { background: repeating-linear-gradient( 90deg, #fbfaf6 0 1.4px, #ddd5c7 1.4px 2.2px ); } .canto-arriba.canto-paginas, .canto-abajo.canto-paginas { background: repeating-linear-gradient( 180deg, #fbfaf6 0 1.4px, #ddd5c7 1.4px 2.2px ); } .canto-abajo.canto-paginas { filter: brightness(0.86); } /* El lomo de fuera: el borde de la ilustración (lo pone el script), oscurecido y redondeado con un degradado, como la tapa doblada. */ .canto-lomo { left: 0; transform-origin: left; transform: rotateY(90deg); background-color: #6b645b; background-size: auto 100%; background-position: left center; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.18); } .carta-dorso { inset: 0; border-radius: 2px 5px 5px 2px; transform: translateZ(calc(-1 * var(--grosor))); background: #d8d1c4; box-shadow: var(--sombra-carta); } /* El brillo: una luz blanda que cae donde está el ratón, como en una lámina que se inclina bajo una lámpara. La posición la pone el script. */ .carta-cuerpo::after { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at var(--brillo-x, 50%) var(--brillo-y, 50%), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60% ); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .carta.brilla .carta-cuerpo::after { opacity: 1; } @keyframes flotar { from { transform: translate(0, 0) rotate(-0.8deg); } to { transform: translate(0.4vw, -0.7vh) rotate(0.8deg); } } @media (prefers-reduced-motion: reduce) { .carta-bloque { animation: none; } } .carta img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .carta:focus-visible { outline: none; } .carta:focus-visible .carta-cuerpo { box-shadow: var(--sombra-carta), 0 0 0 4px var(--halo-foco); } /* -------------------------------------------------------- La estantería --- */ /* El lienzo de la estantería de libretos: a pantalla completa, sobre el fondo de la canción y debajo del mando. Aparece fundiéndose al entrar. */ .estanteria { position: fixed; inset: 0; z-index: 12; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; } .estanteria.visible { opacity: 1; visibility: visible; transition: opacity 0.9s ease; } .estanteria canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; } /* ------------------------------------------------------------ La ficha --- */ /* Arriba a la izquierda, como la de las películas en la galería de A24: el título grande y debajo, entre rayas finas, la pista, el poeta y la música. Sale al entrar, con el mando. */ .ficha { position: fixed; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); z-index: 40; width: clamp(220px, max(24vw, 44vh), 340px); /* lo que pide el título, que crece igual */ pointer-events: none; /* se arrastra la fila también por debajo */ opacity: 0; text-shadow: var(--sombra-texto); } /* El asa sólo sirve en pantallas pequeñas, donde la ficha se pliega. */ .ficha-asa { display: none; } .ficha-titulo { margin: 0 0 10px; font-family: var(--font-serif); font-size: clamp(23px, max(2.4vw, 4.4vh), 38px); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; /* En una línea: el más largo, «Cuando Nada Concluya», cabe justo. */ white-space: nowrap; } .ficha-datos { margin: 0; } .ficha-datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0 5px; border-top: 1px solid var(--raya-ficha); } .ficha-datos dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; } .ficha-datos dd { margin: 0; font-size: 14px; text-align: right; } /* En el móvil no cabe junto al logo: baja encima de las flechas. */ /* En pantallas pequeñas o no apaisadas (hasta 4:3): el logo arriba, la ficha al pie y el libreto en medio (las flechas, a los lados: más abajo, con el mando). */ @media (max-width: 720px), (max-aspect-ratio: 4/3) { /* Plegada, sólo el asa y el título; desplegada, sale de abajo con los datos sobre un velo translúcido, por encima del libreto si hace falta. */ .ficha { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); left: 8px; right: 8px; width: auto; max-width: 520px; margin-inline: auto; padding: 4px 12px 10px; border-radius: 16px; pointer-events: auto; transition: background-color 0.35s ease; } .ficha.desplegada { background: var(--velo-ficha); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); } .ficha-cabeza { display: flex; flex-direction: column; align-items: center; } .ficha-titulo { margin-bottom: 0; font-size: 27px; text-align: center; } .ficha-asa { display: flex; align-items: center; justify-content: center; width: 64px; height: 36px; padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ficha-flecha { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(var(--sombra-texto)); animation: asoma 1.6s ease-in-out infinite; transition: rotate 0.35s ease; } .ficha.desplegada .ficha-flecha { rotate: 180deg; animation: none; } .ficha-datos { max-height: 16em; margin-top: 10px; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease; } .ficha:not(.desplegada) .ficha-datos { max-height: 0; margin-top: 0; opacity: 0; } } /* La flecha del asa sube y baja un poco: se puede tocar. */ @keyframes asoma { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } @media (prefers-reduced-motion: reduce) { .ficha-flecha { animation: none; } } /* ------------------------------------------------------------ El mando --- */ /* Debajo de la carátula del centro, las dos flechas. Sale al entrar; hasta entonces no se ve ni se puede tocar. */ .mando { position: fixed; bottom: max(6vh, calc(env(safe-area-inset-bottom) + 20px)); left: 50%; z-index: 40; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 36px); translate: -50% 0; opacity: 0; text-shadow: var(--sombra-texto); } .flecha { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--flecha-borde); border-radius: 50%; background: var(--flecha-fondo); color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, border-color 0.2s ease; } .flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .flecha:hover, .inicio:hover { background: var(--flecha-fondo-encima); border-color: var(--texto); } } .flecha:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--halo-foco); } /* En pantallas pequeñas o no apaisadas, las flechas se separan a los lados, a la altura del libreto: el centro del hueco lo pone entrada.js en --centro-del-hueco. */ @media (max-width: 720px), (max-aspect-ratio: 4/3) { .mando { top: var(--centro-del-hueco, 50%); bottom: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); justify-content: space-between; translate: 0 -50%; pointer-events: none; /* entre flecha y flecha se arrastra la fila */ } .flecha { pointer-events: auto; } } /* -------------------------------------------- Entrar en el libro --- */ /* Mientras se abre el libro y se entra en él, se apartan la ficha, las flechas, el botón Portada, el logo y el interruptor (!important, porque su opacidad la dejan las animaciones en el propio elemento). */ .entrando .ficha, .entrando .mando, .entrando .inicio, .entrando .marca, .entrando .tema { opacity: 0 !important; pointer-events: none; transition: opacity 0.5s ease; }