/* ========================================================= 1. COLORES Y FUENTES (cambia aquí la paleta completa) ========================================================= */ /* Tipografía: Craft Vintage (solo el logo) + Cormorant Garamond y Inter (Google Fonts) */ @font-face { font-family: "Craft Vintage"; src: url("../fonts/Craft_Vintage.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E; /* la fuente no trae tildes: esas letras usan la fuente de respaldo */ } :root { --white: #FFFFFF; /* blanco (antes vainilla) */ --paper: #FFFFFF; /* marco de "copia impresa" */ --ink: #33291F; /* texto principal */ --muted: #B3B3B1; /* texto secundario sobre el negro */ --orange: #D9732F; /* naranja McLaren, tono vintage */ --blue: #4A74B0; /* azul Williams, tono pastel */ --blue-soft: #9DB7D6; --panel: #1D1D1C; /* negro lavado, sólido (para barras pequeñas) */ --panel-ink: var(--white); /* texto sobre el negro */ --sec: .8; /* escala del texto de las secciones (1 = tamaño original; ahora al 80%) */ /* Fondo negro vintage: lo usan la portada y TODAS las secciones */ --film-bg: var(--film-noise), radial-gradient(120% 90% at 50% 45%, #2A2A29 0%, #1C1C1B 70%, #171716 100%); color-scheme: dark; --font-logo: "Craft Vintage", "Cormorant Garamond", Georgia, serif; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* menú y títulos */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* textos */ /* ===================================================== 2. TU FOTO PRINCIPAL Cuando tengas tu foto, descomenta la línea de abajo y pon la ruta correcta. Mientras tanto se ve un degradado. ===================================================== */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); /* grano de película */ --film-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .92 0 0 0 0 .92 .15 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); /* ruido del fondo */ --photo: none; /* --photo: url("images/home.jpg"); */ box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); } body { height: 100%; margin: 0; background: #1B1B1A; color: var(--white); font-family: var(--font-body); overflow: hidden; font-synthesis: none; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } a { color: inherit; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; } /* ========================================================= 3. PORTADA: foto a pantalla completa ========================================================= */ .hero { position: fixed; inset: 0; overflow: hidden; /* Fondo: negro "lavado" con ruido de película vieja (ver --film-bg arriba). */ background: var(--film-bg); } .photo { position: absolute; inset: 0; background-image: var(--photo); background-size: cover; background-position: var(--pos, center); /* punto focal de cada foto */ } /* Degradado de respaldo: solo se usa si una foto no carga o no hay fotos */ .photo.placeholder { background-image: radial-gradient(120% 70% at 72% 84%, rgba(233,161,94,.95) 0%, rgba(233,161,94,0) 62%), linear-gradient(180deg, #7FA3D1 0%, #A9BFD9 38%, #FFFFFF 68%, #E4A56A 86%, #C9763A 100%); } /* Viñeta muy suave: solo lo justo para que el menú se lea sobre la foto */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,10,10,.16), transparent 20%); } /* Grano de película al 5%: súbelo o bájalo cambiando opacity (0 = sin grano) */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--grain); opacity: .05; mix-blend-mode: overlay; } @keyframes rise { from { opacity: 0; } to { opacity: 1; } } /* ========================================================= 3b. FOTO "RASGADA": el menú queda sobre el fondo negro, en la parte donde la foto impresa está rota (borde irregular y fibra de papel blanco). --tear = ancho MÁXIMO de la zona del menú (escritorio) o alto (móvil). En pantallas horizontales la zona es delgada arriba, más ancha en el centro (donde está el menú) y se vuelve a cerrar abajo. Todo el efecto está al 60%. ========================================================= */ :root { --tear: clamp(9rem, 12.6vw, 12.6rem); --edge: calc(100% - var(--tear)); --lx: clamp(1.05rem, 3vw, 2.63rem); } .torn-bar { display: none; } .torn-edge { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; filter: drop-shadow(1.5px 0 5px rgba(0,0,0,.7)); } .hero.ready .torn-edge { opacity: 1; } .torn-paper { position: absolute; inset: 0; background: linear-gradient(90deg, #E4E0D7, #F7F4EE); clip-path: polygon(calc(100% - var(--tear) * 0.235 + 2.5px) 0.00%, calc(100% - var(--tear) * 0.237 + 5.3px) 1.02%, calc(100% - var(--tear) * 0.243 + 3.3px) 2.09%, calc(100% - var(--tear) * 0.255 + 2.7px) 3.18%, calc(100% - var(--tear) * 0.266 + 2.4px) 3.97%, calc(100% - var(--tear) * 0.288 - 0.3px) 5.22%, calc(100% - var(--tear) * 0.311 - 1.4px) 6.33%, calc(100% - var(--tear) * 0.336 - 1.7px) 7.47%, calc(100% - var(--tear) * 0.350 - 3.7px) 8.08%, calc(100% - var(--tear) * 0.376 - 1.7px) 9.25%, calc(100% - var(--tear) * 0.395 - 2.1px) 10.16%, calc(100% - var(--tear) * 0.424 - 5.4px) 11.65%, calc(100% - var(--tear) * 0.440 - 1.3px) 12.62%, calc(100% - var(--tear) * 0.448 + 3.1px) 13.26%, calc(100% - var(--tear) * 0.464 - 1.3px) 14.88%, calc(100% - var(--tear) * 0.467 + 0.3px) 15.92%, calc(100% - var(--tear) * 0.470 + 1.4px) 16.76%, calc(100% - var(--tear) * 0.479 + 4.9px) 17.78%, calc(100% - var(--tear) * 0.490 + 4.3px) 18.54%, calc(100% - var(--tear) * 0.509 + 4.3px) 19.49%, calc(100% - var(--tear) * 0.543 + 3.7px) 20.85%, calc(100% - var(--tear) * 0.565 + 2.2px) 21.60%, calc(100% - var(--tear) * 0.603 + 3.0px) 22.72%, calc(100% - var(--tear) * 0.643 - 0.7px) 23.80%, calc(100% - var(--tear) * 0.678 - 1.3px) 24.71%, calc(100% - var(--tear) * 0.731 + 1.5px) 26.02%, calc(100% - var(--tear) * 0.771 + 4.3px) 27.05%, calc(100% - var(--tear) * 0.820 + 3.5px) 28.34%, calc(100% - var(--tear) * 0.848 + 0.2px) 29.18%, calc(100% - var(--tear) * 0.883 + 2.5px) 30.30%, calc(100% - var(--tear) * 0.907 + 0.5px) 31.25%, calc(100% - var(--tear) * 0.930 + 6.7px) 32.39%, calc(100% - var(--tear) * 0.942 + 2.4px) 33.31%, calc(100% - var(--tear) * 0.949 + 1.6px) 34.24%, calc(100% - var(--tear) * 0.950 + 0.4px) 35.73%, calc(100% - var(--tear) * 0.951 - 0.1px) 36.77%, calc(100% - var(--tear) * 0.952 - 2.5px) 37.71%, calc(100% - var(--tear) * 0.955 - 2.6px) 38.67%, calc(100% - var(--tear) * 0.957 - 1.5px) 39.47%, calc(100% - var(--tear) * 0.961 - 1.7px) 40.46%, calc(100% - var(--tear) * 0.965 - 0.2px) 41.53%, calc(100% - var(--tear) * 0.969 + 3.0px) 42.44%, calc(100% - var(--tear) * 0.975 + 4.0px) 43.92%, calc(100% - var(--tear) * 0.977 + 9.6px) 44.73%, calc(100% - var(--tear) * 0.981 + 8.1px) 46.05%, calc(100% - var(--tear) * 0.981 + 9.6px) 46.80%, calc(100% - var(--tear) * 0.982 + 15.8px) 48.20%, calc(100% - var(--tear) * 0.980 + 10.0px) 49.18%, calc(100% - var(--tear) * 0.979 + 9.1px) 49.69%, calc(100% - var(--tear) * 0.975 + 8.4px) 50.86%, calc(100% - var(--tear) * 0.968 + 9.1px) 52.34%, calc(100% - var(--tear) * 0.963 + 15.8px) 53.11%, calc(100% - var(--tear) * 0.954 + 8.2px) 54.47%, calc(100% - var(--tear) * 0.949 + 11.8px) 55.14%, calc(100% - var(--tear) * 0.942 + 14.3px) 55.98%, calc(100% - var(--tear) * 0.932 + 12.5px) 57.37%, calc(100% - var(--tear) * 0.924 + 14.9px) 58.51%, calc(100% - var(--tear) * 0.919 + 14.3px) 59.23%, calc(100% - var(--tear) * 0.914 + 14.0px) 60.16%, calc(100% - var(--tear) * 0.910 + 13.3px) 61.35%, calc(100% - var(--tear) * 0.908 + 9.4px) 62.79%, calc(100% - var(--tear) * 0.908 + 7.2px) 63.70%, calc(100% - var(--tear) * 0.909 + 8.4px) 64.34%, calc(100% - var(--tear) * 0.913 + 4.4px) 65.47%, calc(100% - var(--tear) * 0.913 + 7.1px) 66.42%, calc(100% - var(--tear) * 0.909 + 6.6px) 67.43%, calc(100% - var(--tear) * 0.895 + 5.7px) 68.94%, calc(100% - var(--tear) * 0.886 + 3.8px) 69.59%, calc(100% - var(--tear) * 0.865 + 5.7px) 70.87%, calc(100% - var(--tear) * 0.847 + 8.9px) 71.84%, calc(100% - var(--tear) * 0.828 + 7.0px) 72.72%, calc(100% - var(--tear) * 0.796 + 7.2px) 74.10%, calc(100% - var(--tear) * 0.780 + 6.3px) 74.77%, calc(100% - var(--tear) * 0.749 + 6.9px) 76.13%, calc(100% - var(--tear) * 0.733 + 5.6px) 76.84%, calc(100% - var(--tear) * 0.707 + 5.6px) 78.08%, calc(100% - var(--tear) * 0.691 + 5.3px) 78.99%, calc(100% - var(--tear) * 0.674 + 4.3px) 80.06%, calc(100% - var(--tear) * 0.658 + 3.8px) 81.54%, calc(100% - var(--tear) * 0.653 + 0.6px) 82.48%, calc(100% - var(--tear) * 0.651 + 6.8px) 83.21%, calc(100% - var(--tear) * 0.643 + 10.3px) 84.62%, calc(100% - var(--tear) * 0.638 + 6.6px) 85.24%, calc(100% - var(--tear) * 0.626 + 6.6px) 86.39%, calc(100% - var(--tear) * 0.607 + 6.4px) 87.72%, calc(100% - var(--tear) * 0.592 + 3.2px) 88.63%, calc(100% - var(--tear) * 0.580 + 3.2px) 89.33%, calc(100% - var(--tear) * 0.551 + 0.2px) 90.93%, calc(100% - var(--tear) * 0.541 - 0.6px) 91.49%, calc(100% - var(--tear) * 0.522 - 0.2px) 92.56%, calc(100% - var(--tear) * 0.498 - 3.0px) 93.92%, calc(100% - var(--tear) * 0.487 - 2.7px) 94.68%, calc(100% - var(--tear) * 0.473 - 4.9px) 95.71%, calc(100% - var(--tear) * 0.463 - 1.4px) 96.61%, calc(100% - var(--tear) * 0.454 - 4.4px) 97.66%, calc(100% - var(--tear) * 0.447 - 5.4px) 99.01%, calc(100% - var(--tear) * 0.446 - 2.9px) 100.00%, calc(100% - var(--tear) * 0.446 - 17.3px) 100.00%, calc(100% - var(--tear) * 0.447 - 17.6px) 99.01%, calc(100% - var(--tear) * 0.454 - 17.2px) 97.66%, calc(100% - var(--tear) * 0.463 - 16.0px) 96.61%, calc(100% - var(--tear) * 0.473 - 17.6px) 95.71%, calc(100% - var(--tear) * 0.487 - 15.2px) 94.68%, calc(100% - var(--tear) * 0.498 - 17.7px) 93.92%, calc(100% - var(--tear) * 0.522 - 14.7px) 92.56%, calc(100% - var(--tear) * 0.541 - 13.9px) 91.49%, calc(100% - var(--tear) * 0.551 - 12.3px) 90.93%, calc(100% - var(--tear) * 0.580 - 10.4px) 89.33%, calc(100% - var(--tear) * 0.592 - 9.8px) 88.63%, calc(100% - var(--tear) * 0.607 - 8.5px) 87.72%, calc(100% - var(--tear) * 0.626 - 6.7px) 86.39%, calc(100% - var(--tear) * 0.638 - 8.4px) 85.24%, calc(100% - var(--tear) * 0.643 - 5.4px) 84.62%, calc(100% - var(--tear) * 0.651 - 8.5px) 83.21%, calc(100% - var(--tear) * 0.653 - 14.0px) 82.48%, calc(100% - var(--tear) * 0.658 - 10.2px) 81.54%, calc(100% - var(--tear) * 0.674 - 9.6px) 80.06%, calc(100% - var(--tear) * 0.691 - 8.8px) 78.99%, calc(100% - var(--tear) * 0.707 - 11.0px) 78.08%, calc(100% - var(--tear) * 0.733 - 10.7px) 76.84%, calc(100% - var(--tear) * 0.749 - 8.8px) 76.13%, calc(100% - var(--tear) * 0.780 - 9.3px) 74.77%, calc(100% - var(--tear) * 0.796 - 7.7px) 74.10%, calc(100% - var(--tear) * 0.828 - 7.2px) 72.72%, calc(100% - var(--tear) * 0.847 - 6.9px) 71.84%, calc(100% - var(--tear) * 0.865 - 8.7px) 70.87%, calc(100% - var(--tear) * 0.886 - 9.6px) 69.59%, calc(100% - var(--tear) * 0.895 - 9.4px) 68.94%, calc(100% - var(--tear) * 0.909 - 9.2px) 67.43%, calc(100% - var(--tear) * 0.913 - 7.2px) 66.42%, calc(100% - var(--tear) * 0.913 - 9.6px) 65.47%, calc(100% - var(--tear) * 0.909 - 5.7px) 64.34%, calc(100% - var(--tear) * 0.908 - 6.9px) 63.70%, calc(100% - var(--tear) * 0.908 - 4.4px) 62.79%, calc(100% - var(--tear) * 0.910 - 0.4px) 61.35%, calc(100% - var(--tear) * 0.914 - 0.7px) 60.16%, calc(100% - var(--tear) * 0.919 + 0.6px) 59.23%, calc(100% - var(--tear) * 0.924 + 0.9px) 58.51%, calc(100% - var(--tear) * 0.932 + 0.4px) 57.37%, calc(100% - var(--tear) * 0.942 + 0.5px) 55.98%, calc(100% - var(--tear) * 0.949 - 0.3px) 55.14%, calc(100% - var(--tear) * 0.954 - 4.0px) 54.47%, calc(100% - var(--tear) * 0.963 - 3.3px) 53.11%, calc(100% - var(--tear) * 0.968 - 2.8px) 52.34%, calc(100% - var(--tear) * 0.975 - 4.4px) 50.86%, calc(100% - var(--tear) * 0.979 - 5.7px) 49.69%, calc(100% - var(--tear) * 0.980 - 3.9px) 49.18%, calc(100% - var(--tear) * 0.982 + 1.8px) 48.20%, calc(100% - var(--tear) * 0.981 - 3.9px) 46.80%, calc(100% - var(--tear) * 0.981 - 4.9px) 46.05%, calc(100% - var(--tear) * 0.977 - 5.9px) 44.73%, calc(100% - var(--tear) * 0.975 - 10.9px) 43.92%, calc(100% - var(--tear) * 0.969 - 12.1px) 42.44%, calc(100% - var(--tear) * 0.965 - 13.7px) 41.53%, calc(100% - var(--tear) * 0.961 - 16.3px) 40.46%, calc(100% - var(--tear) * 0.957 - 17.1px) 39.47%, calc(100% - var(--tear) * 0.955 - 16.5px) 38.67%, calc(100% - var(--tear) * 0.952 - 17.9px) 37.71%, calc(100% - var(--tear) * 0.951 - 15.5px) 36.77%, calc(100% - var(--tear) * 0.950 - 15.1px) 35.73%, calc(100% - var(--tear) * 0.949 - 13.7px) 34.24%, calc(100% - var(--tear) * 0.942 - 12.7px) 33.31%, calc(100% - var(--tear) * 0.930 - 13.7px) 32.39%, calc(100% - var(--tear) * 0.907 - 13.9px) 31.25%, calc(100% - var(--tear) * 0.883 - 11.9px) 30.30%, calc(100% - var(--tear) * 0.848 - 14.3px) 29.18%, calc(100% - var(--tear) * 0.820 - 13.0px) 28.34%, calc(100% - var(--tear) * 0.771 - 11.1px) 27.05%, calc(100% - var(--tear) * 0.731 - 13.9px) 26.02%, calc(100% - var(--tear) * 0.678 - 16.2px) 24.71%, calc(100% - var(--tear) * 0.643 - 14.2px) 23.80%, calc(100% - var(--tear) * 0.603 - 12.4px) 22.72%, calc(100% - var(--tear) * 0.565 - 13.8px) 21.60%, calc(100% - var(--tear) * 0.543 - 10.9px) 20.85%, calc(100% - var(--tear) * 0.509 - 11.0px) 19.49%, calc(100% - var(--tear) * 0.490 - 11.0px) 18.54%, calc(100% - var(--tear) * 0.479 - 9.9px) 17.78%, calc(100% - var(--tear) * 0.470 - 13.1px) 16.76%, calc(100% - var(--tear) * 0.467 - 12.8px) 15.92%, calc(100% - var(--tear) * 0.464 - 13.4px) 14.88%, calc(100% - var(--tear) * 0.448 - 15.2px) 13.26%, calc(100% - var(--tear) * 0.440 - 15.1px) 12.62%, calc(100% - var(--tear) * 0.424 - 17.6px) 11.65%, calc(100% - var(--tear) * 0.395 - 18.8px) 10.16%, calc(100% - var(--tear) * 0.376 - 16.1px) 9.25%, calc(100% - var(--tear) * 0.350 - 17.1px) 8.08%, calc(100% - var(--tear) * 0.336 - 13.9px) 7.47%, calc(100% - var(--tear) * 0.311 - 14.0px) 6.33%, calc(100% - var(--tear) * 0.288 - 12.2px) 5.22%, calc(100% - var(--tear) * 0.266 - 12.2px) 3.97%, calc(100% - var(--tear) * 0.255 - 11.5px) 3.18%, calc(100% - var(--tear) * 0.243 - 11.5px) 2.09%, calc(100% - var(--tear) * 0.237 - 8.6px) 1.02%, calc(100% - var(--tear) * 0.235 - 11.0px) 0.00%); } .photo-stack { position: absolute; inset: 0; clip-path: polygon(0 0, calc(100% - var(--tear) * 0.235 - 1.4px) 0.00%, calc(100% - var(--tear) * 0.237 + 1.0px) 1.02%, calc(100% - var(--tear) * 0.243 - 1.9px) 2.09%, calc(100% - var(--tear) * 0.255 - 1.9px) 3.18%, calc(100% - var(--tear) * 0.266 - 2.6px) 3.97%, calc(100% - var(--tear) * 0.288 - 2.6px) 5.22%, calc(100% - var(--tear) * 0.311 - 4.4px) 6.33%, calc(100% - var(--tear) * 0.336 - 4.3px) 7.47%, calc(100% - var(--tear) * 0.350 - 7.5px) 8.08%, calc(100% - var(--tear) * 0.376 - 6.5px) 9.25%, calc(100% - var(--tear) * 0.395 - 9.2px) 10.16%, calc(100% - var(--tear) * 0.424 - 8.0px) 11.65%, calc(100% - var(--tear) * 0.440 - 5.5px) 12.62%, calc(100% - var(--tear) * 0.448 - 5.6px) 13.26%, calc(100% - var(--tear) * 0.464 - 3.8px) 14.88%, calc(100% - var(--tear) * 0.467 - 3.2px) 15.92%, calc(100% - var(--tear) * 0.470 - 3.5px) 16.76%, calc(100% - var(--tear) * 0.479 - 0.3px) 17.78%, calc(100% - var(--tear) * 0.490 - 1.4px) 18.54%, calc(100% - var(--tear) * 0.509 - 1.4px) 19.49%, calc(100% - var(--tear) * 0.543 - 1.3px) 20.85%, calc(100% - var(--tear) * 0.565 - 4.2px) 21.60%, calc(100% - var(--tear) * 0.603 - 2.8px) 22.72%, calc(100% - var(--tear) * 0.643 - 4.6px) 23.80%, calc(100% - var(--tear) * 0.678 - 6.6px) 24.71%, calc(100% - var(--tear) * 0.731 - 4.3px) 26.02%, calc(100% - var(--tear) * 0.771 - 1.5px) 27.05%, calc(100% - var(--tear) * 0.820 - 3.4px) 28.34%, calc(100% - var(--tear) * 0.848 - 4.7px) 29.18%, calc(100% - var(--tear) * 0.883 - 2.3px) 30.30%, calc(100% - var(--tear) * 0.907 - 4.3px) 31.25%, calc(100% - var(--tear) * 0.930 - 4.1px) 32.39%, calc(100% - var(--tear) * 0.942 - 3.1px) 33.31%, calc(100% - var(--tear) * 0.949 - 4.1px) 34.24%, calc(100% - var(--tear) * 0.950 - 5.5px) 35.73%, calc(100% - var(--tear) * 0.951 - 5.9px) 36.77%, calc(100% - var(--tear) * 0.952 - 8.3px) 37.71%, calc(100% - var(--tear) * 0.955 - 6.9px) 38.67%, calc(100% - var(--tear) * 0.957 - 7.5px) 39.47%, calc(100% - var(--tear) * 0.961 - 6.7px) 40.46%, calc(100% - var(--tear) * 0.965 - 4.1px) 41.53%, calc(100% - var(--tear) * 0.969 - 2.5px) 42.44%, calc(100% - var(--tear) * 0.975 - 1.3px) 43.92%, calc(100% - var(--tear) * 0.977 + 3.7px) 44.73%, calc(100% - var(--tear) * 0.981 + 4.7px) 46.05%, calc(100% - var(--tear) * 0.981 + 5.7px) 46.80%, calc(100% - var(--tear) * 0.982 + 11.4px) 48.20%, calc(100% - var(--tear) * 0.980 + 5.7px) 49.18%, calc(100% - var(--tear) * 0.979 + 3.9px) 49.69%, calc(100% - var(--tear) * 0.975 + 5.2px) 50.86%, calc(100% - var(--tear) * 0.968 + 6.8px) 52.34%, calc(100% - var(--tear) * 0.963 + 6.3px) 53.11%, calc(100% - var(--tear) * 0.954 + 5.6px) 54.47%, calc(100% - var(--tear) * 0.949 + 9.3px) 55.14%, calc(100% - var(--tear) * 0.942 + 10.1px) 55.98%, calc(100% - var(--tear) * 0.932 + 10.0px) 57.37%, calc(100% - var(--tear) * 0.924 + 10.5px) 58.51%, calc(100% - var(--tear) * 0.919 + 10.2px) 59.23%, calc(100% - var(--tear) * 0.914 + 8.9px) 60.16%, calc(100% - var(--tear) * 0.910 + 9.2px) 61.35%, calc(100% - var(--tear) * 0.908 + 5.2px) 62.79%, calc(100% - var(--tear) * 0.908 + 2.7px) 63.70%, calc(100% - var(--tear) * 0.909 + 3.9px) 64.34%, calc(100% - var(--tear) * 0.913 + 0.0px) 65.47%, calc(100% - var(--tear) * 0.913 + 2.4px) 66.42%, calc(100% - var(--tear) * 0.909 + 0.4px) 67.43%, calc(100% - var(--tear) * 0.895 + 0.2px) 68.94%, calc(100% - var(--tear) * 0.886 - 0.0px) 69.59%, calc(100% - var(--tear) * 0.865 + 0.9px) 70.87%, calc(100% - var(--tear) * 0.847 + 2.7px) 71.84%, calc(100% - var(--tear) * 0.828 + 2.4px) 72.72%, calc(100% - var(--tear) * 0.796 + 1.9px) 74.10%, calc(100% - var(--tear) * 0.780 + 0.3px) 74.77%, calc(100% - var(--tear) * 0.749 + 0.8px) 76.13%, calc(100% - var(--tear) * 0.733 - 1.1px) 76.84%, calc(100% - var(--tear) * 0.707 - 1.4px) 78.08%, calc(100% - var(--tear) * 0.691 + 0.8px) 78.99%, calc(100% - var(--tear) * 0.674 - 0.0px) 80.06%, calc(100% - var(--tear) * 0.658 - 0.6px) 81.54%, calc(100% - var(--tear) * 0.653 - 4.4px) 82.48%, calc(100% - var(--tear) * 0.651 + 1.1px) 83.21%, calc(100% - var(--tear) * 0.643 + 4.2px) 84.62%, calc(100% - var(--tear) * 0.638 + 1.2px) 85.24%, calc(100% - var(--tear) * 0.626 + 2.9px) 86.39%, calc(100% - var(--tear) * 0.607 + 1.1px) 87.72%, calc(100% - var(--tear) * 0.592 - 0.2px) 88.63%, calc(100% - var(--tear) * 0.580 - 0.8px) 89.33%, calc(100% - var(--tear) * 0.551 - 2.7px) 90.93%, calc(100% - var(--tear) * 0.541 - 4.3px) 91.49%, calc(100% - var(--tear) * 0.522 - 5.1px) 92.56%, calc(100% - var(--tear) * 0.498 - 8.1px) 93.92%, calc(100% - var(--tear) * 0.487 - 5.6px) 94.68%, calc(100% - var(--tear) * 0.473 - 8.0px) 95.71%, calc(100% - var(--tear) * 0.463 - 6.4px) 96.61%, calc(100% - var(--tear) * 0.454 - 7.6px) 97.66%, calc(100% - var(--tear) * 0.447 - 8.0px) 99.01%, calc(100% - var(--tear) * 0.446 - 7.7px) 100.00%, 0 100%); } @media (max-width: 760px) { :root { --tear: 7.2rem; } .torn-edge { filter: drop-shadow(0 -1.5px 5px rgba(0,0,0,.7)); } .torn-paper { background: linear-gradient(180deg, #E4E0D7, #F7F4EE); clip-path: polygon(0.00% calc(var(--edge) - 0.6px), 0.83% calc(var(--edge) + 1.8px), 2.28% calc(var(--edge) + 5.2px), 3.28% calc(var(--edge) + 6.2px), 4.46% calc(var(--edge) + 9.3px), 5.31% calc(var(--edge) + 7.5px), 6.46% calc(var(--edge) + 17.7px), 7.74% calc(var(--edge) + 10.5px), 8.70% calc(var(--edge) + 8.3px), 9.97% calc(var(--edge) + 11.8px), 10.79% calc(var(--edge) + 10.1px), 11.95% calc(var(--edge) + 8.2px), 13.47% calc(var(--edge) + 10.6px), 14.39% calc(var(--edge) + 13.6px), 15.56% calc(var(--edge) + 12.4px), 16.82% calc(var(--edge) + 11.2px), 17.68% calc(var(--edge) + 13.8px), 18.59% calc(var(--edge) + 13.3px), 20.19% calc(var(--edge) + 9.4px), 21.17% calc(var(--edge) + 9.7px), 22.33% calc(var(--edge) + 6.4px), 23.41% calc(var(--edge) + 4.9px), 24.76% calc(var(--edge) + 0.9px), 25.46% calc(var(--edge) + 6.8px), 26.84% calc(var(--edge) + 4.4px), 27.69% calc(var(--edge) + 7.7px), 28.94% calc(var(--edge) - 1.9px), 30.11% calc(var(--edge) + 11.7px), 30.99% calc(var(--edge) + 12.6px), 31.95% calc(var(--edge) + 9.8px), 33.32% calc(var(--edge) + 10.7px), 34.59% calc(var(--edge) + 9.8px), 35.62% calc(var(--edge) + 9.4px), 36.63% calc(var(--edge) + 7.7px), 37.87% calc(var(--edge) + 8.3px), 38.68% calc(var(--edge) + 12.9px), 39.79% calc(var(--edge) + 14.1px), 40.99% calc(var(--edge) + 8.3px), 42.43% calc(var(--edge) + 6.8px), 43.13% calc(var(--edge) + 6.6px), 44.19% calc(var(--edge) + 9.1px), 45.29% calc(var(--edge) + 7.4px), 46.36% calc(var(--edge) + 10.6px), 47.63% calc(var(--edge) + 8.2px), 48.94% calc(var(--edge) + 5.8px), 50.21% calc(var(--edge) + 2.9px), 51.00% calc(var(--edge) - 8.1px), 52.14% calc(var(--edge) - 0.8px), 53.19% calc(var(--edge) - 3.3px), 54.31% calc(var(--edge) - 4.7px), 55.74% calc(var(--edge) - 3.0px), 56.70% calc(var(--edge) - 2.5px), 57.62% calc(var(--edge) - 2.0px), 58.63% calc(var(--edge) - 0.3px), 60.19% calc(var(--edge) - 0.7px), 61.25% calc(var(--edge) + 0.5px), 62.44% calc(var(--edge) - 4.5px), 63.16% calc(var(--edge) - 5.2px), 64.47% calc(var(--edge) - 4.0px), 65.83% calc(var(--edge) - 2.3px), 66.73% calc(var(--edge) - 1.1px), 68.07% calc(var(--edge) + 1.2px), 68.67% calc(var(--edge) - 0.0px), 70.32% calc(var(--edge) + 1.8px), 70.82% calc(var(--edge) + 3.8px), 72.17% calc(var(--edge) + 5.7px), 73.02% calc(var(--edge) + 7.2px), 74.65% calc(var(--edge) + 7.3px), 75.68% calc(var(--edge) + 7.3px), 76.98% calc(var(--edge) + 3.5px), 77.98% calc(var(--edge) + 3.8px), 79.19% calc(var(--edge) + 1.8px), 80.03% calc(var(--edge) + 0.6px), 81.44% calc(var(--edge) + 4.2px), 82.39% calc(var(--edge) + 3.1px), 83.23% calc(var(--edge) + 0.6px), 84.76% calc(var(--edge) + 3.2px), 85.47% calc(var(--edge) + 5.2px), 86.46% calc(var(--edge) + 6.4px), 87.50% calc(var(--edge) + 5.1px), 88.87% calc(var(--edge) + 4.7px), 89.80% calc(var(--edge) + 6.8px), 91.40% calc(var(--edge) + 3.4px), 92.52% calc(var(--edge) + 5.3px), 93.14% calc(var(--edge) + 6.0px), 94.18% calc(var(--edge) + 5.7px), 95.57% calc(var(--edge) + 12.0px), 96.45% calc(var(--edge) + 7.3px), 97.81% calc(var(--edge) + 16.0px), 99.10% calc(var(--edge) + 15.5px), 100.00% calc(var(--edge) + 14.9px), 100.00% calc(var(--edge) - 0.3px), 99.10% calc(var(--edge) - 0.7px), 97.81% calc(var(--edge) - 3.1px), 96.45% calc(var(--edge) - 6.1px), 95.57% calc(var(--edge) - 2.7px), 94.18% calc(var(--edge) - 8.4px), 93.14% calc(var(--edge) - 9.6px), 92.52% calc(var(--edge) - 10.1px), 91.40% calc(var(--edge) - 9.5px), 89.80% calc(var(--edge) - 8.4px), 88.87% calc(var(--edge) - 7.7px), 87.50% calc(var(--edge) - 7.0px), 86.46% calc(var(--edge) - 7.7px), 85.47% calc(var(--edge) - 9.0px), 84.76% calc(var(--edge) - 9.6px), 83.23% calc(var(--edge) - 12.0px), 82.39% calc(var(--edge) - 10.9px), 81.44% calc(var(--edge) - 9.7px), 80.03% calc(var(--edge) - 11.3px), 79.19% calc(var(--edge) - 11.4px), 77.98% calc(var(--edge) - 8.3px), 76.98% calc(var(--edge) - 9.1px), 75.68% calc(var(--edge) - 7.5px), 74.65% calc(var(--edge) - 6.7px), 73.02% calc(var(--edge) - 8.0px), 72.17% calc(var(--edge) - 9.3px), 70.82% calc(var(--edge) - 11.8px), 70.32% calc(var(--edge) - 13.4px), 68.67% calc(var(--edge) - 14.9px), 68.07% calc(var(--edge) - 14.5px), 66.73% calc(var(--edge) - 16.1px), 65.83% calc(var(--edge) - 17.6px), 64.47% calc(var(--edge) - 19.8px), 63.16% calc(var(--edge) - 19.3px), 62.44% calc(var(--edge) - 18.8px), 61.25% calc(var(--edge) - 15.5px), 60.19% calc(var(--edge) - 17.5px), 58.63% calc(var(--edge) - 16.0px), 57.62% calc(var(--edge) - 16.0px), 56.70% calc(var(--edge) - 19.2px), 55.74% calc(var(--edge) - 19.5px), 54.31% calc(var(--edge) - 20.0px), 53.19% calc(var(--edge) - 17.7px), 52.14% calc(var(--edge) - 15.0px), 51.00% calc(var(--edge) - 21.9px), 50.21% calc(var(--edge) - 13.1px), 48.94% calc(var(--edge) - 9.4px), 47.63% calc(var(--edge) - 7.5px), 46.36% calc(var(--edge) - 5.0px), 45.29% calc(var(--edge) - 6.3px), 44.19% calc(var(--edge) - 3.2px), 43.13% calc(var(--edge) - 6.1px), 42.43% calc(var(--edge) - 7.1px), 40.99% calc(var(--edge) - 4.7px), 39.79% calc(var(--edge) - 4.6px), 38.68% calc(var(--edge) - 0.3px), 37.87% calc(var(--edge) - 5.0px), 36.63% calc(var(--edge) - 4.2px), 35.62% calc(var(--edge) - 2.7px), 34.59% calc(var(--edge) - 2.9px), 33.32% calc(var(--edge) - 2.2px), 31.95% calc(var(--edge) - 3.9px), 30.99% calc(var(--edge) - 1.9px), 30.11% calc(var(--edge) - 6.3px), 28.94% calc(var(--edge) - 15.0px), 27.69% calc(var(--edge) - 7.6px), 26.84% calc(var(--edge) - 8.3px), 25.46% calc(var(--edge) - 8.1px), 24.76% calc(var(--edge) - 13.1px), 23.41% calc(var(--edge) - 8.9px), 22.33% calc(var(--edge) - 8.0px), 21.17% calc(var(--edge) - 3.9px), 20.19% calc(var(--edge) - 4.7px), 18.59% calc(var(--edge) - 1.9px), 17.68% calc(var(--edge) - 1.0px), 16.82% calc(var(--edge) - 3.6px), 15.56% calc(var(--edge) - 3.4px), 14.39% calc(var(--edge) - 2.8px), 13.47% calc(var(--edge) - 4.8px), 11.95% calc(var(--edge) - 7.0px), 10.79% calc(var(--edge) - 5.0px), 9.97% calc(var(--edge) - 4.4px), 8.70% calc(var(--edge) - 5.3px), 7.74% calc(var(--edge) - 4.6px), 6.46% calc(var(--edge) - 3.6px), 5.31% calc(var(--edge) - 6.7px), 4.46% calc(var(--edge) - 5.4px), 3.28% calc(var(--edge) - 7.6px), 2.28% calc(var(--edge) - 9.6px), 0.83% calc(var(--edge) - 13.2px), 0.00% calc(var(--edge) - 15.7px)); } .photo-stack { clip-path: polygon(0 0, 100% 0, 100.00% calc(var(--edge) + 9.3px), 99.10% calc(var(--edge) + 8.9px), 97.81% calc(var(--edge) + 6.5px), 96.45% calc(var(--edge) + 3.5px), 95.57% calc(var(--edge) + 6.9px), 94.18% calc(var(--edge) + 1.2px), 93.14% calc(var(--edge) - 0.0px), 92.52% calc(var(--edge) - 0.5px), 91.40% calc(var(--edge) + 0.1px), 89.80% calc(var(--edge) + 1.2px), 88.87% calc(var(--edge) + 1.9px), 87.50% calc(var(--edge) + 2.6px), 86.46% calc(var(--edge) + 1.9px), 85.47% calc(var(--edge) + 0.6px), 84.76% calc(var(--edge) - 0.0px), 83.23% calc(var(--edge) - 2.4px), 82.39% calc(var(--edge) - 1.3px), 81.44% calc(var(--edge) - 0.1px), 80.03% calc(var(--edge) - 1.7px), 79.19% calc(var(--edge) - 1.8px), 77.98% calc(var(--edge) + 1.3px), 76.98% calc(var(--edge) + 0.5px), 75.68% calc(var(--edge) + 2.1px), 74.65% calc(var(--edge) + 2.9px), 73.02% calc(var(--edge) + 1.6px), 72.17% calc(var(--edge) + 0.3px), 70.82% calc(var(--edge) - 2.2px), 70.32% calc(var(--edge) - 3.8px), 68.67% calc(var(--edge) - 5.3px), 68.07% calc(var(--edge) - 4.9px), 66.73% calc(var(--edge) - 6.5px), 65.83% calc(var(--edge) - 8.0px), 64.47% calc(var(--edge) - 10.2px), 63.16% calc(var(--edge) - 9.7px), 62.44% calc(var(--edge) - 9.2px), 61.25% calc(var(--edge) - 5.9px), 60.19% calc(var(--edge) - 7.9px), 58.63% calc(var(--edge) - 6.4px), 57.62% calc(var(--edge) - 6.4px), 56.70% calc(var(--edge) - 9.6px), 55.74% calc(var(--edge) - 9.9px), 54.31% calc(var(--edge) - 10.4px), 53.19% calc(var(--edge) - 8.1px), 52.14% calc(var(--edge) - 5.4px), 51.00% calc(var(--edge) - 12.3px), 50.21% calc(var(--edge) - 3.5px), 48.94% calc(var(--edge) + 0.2px), 47.63% calc(var(--edge) + 2.1px), 46.36% calc(var(--edge) + 4.6px), 45.29% calc(var(--edge) + 3.3px), 44.19% calc(var(--edge) + 6.4px), 43.13% calc(var(--edge) + 3.5px), 42.43% calc(var(--edge) + 2.5px), 40.99% calc(var(--edge) + 4.9px), 39.79% calc(var(--edge) + 5.0px), 38.68% calc(var(--edge) + 9.3px), 37.87% calc(var(--edge) + 4.6px), 36.63% calc(var(--edge) + 5.4px), 35.62% calc(var(--edge) + 6.9px), 34.59% calc(var(--edge) + 6.7px), 33.32% calc(var(--edge) + 7.4px), 31.95% calc(var(--edge) + 5.7px), 30.99% calc(var(--edge) + 7.7px), 30.11% calc(var(--edge) + 3.3px), 28.94% calc(var(--edge) - 5.4px), 27.69% calc(var(--edge) + 2.0px), 26.84% calc(var(--edge) + 1.3px), 25.46% calc(var(--edge) + 1.5px), 24.76% calc(var(--edge) - 3.5px), 23.41% calc(var(--edge) + 0.7px), 22.33% calc(var(--edge) + 1.6px), 21.17% calc(var(--edge) + 5.7px), 20.19% calc(var(--edge) + 4.9px), 18.59% calc(var(--edge) + 7.7px), 17.68% calc(var(--edge) + 8.6px), 16.82% calc(var(--edge) + 6.0px), 15.56% calc(var(--edge) + 6.2px), 14.39% calc(var(--edge) + 6.8px), 13.47% calc(var(--edge) + 4.8px), 11.95% calc(var(--edge) + 2.6px), 10.79% calc(var(--edge) + 4.6px), 9.97% calc(var(--edge) + 5.2px), 8.70% calc(var(--edge) + 4.3px), 7.74% calc(var(--edge) + 5.0px), 6.46% calc(var(--edge) + 6.0px), 5.31% calc(var(--edge) + 2.9px), 4.46% calc(var(--edge) + 4.2px), 3.28% calc(var(--edge) + 2.0px), 2.28% calc(var(--edge) + 0.0px), 0.83% calc(var(--edge) - 3.6px), 0.00% calc(var(--edge) - 6.1px)); } } .name, .menu, .lang, .note { position: fixed; z-index: 5; text-shadow: 0 1px 3px rgba(10,10,10,.45), 0 2px 18px rgba(10,10,10,.6); } .name { --ty: calc(1.2rem + env(safe-area-inset-top, 0px)); top: var(--ty); left: var(--lx); font-family: var(--font-logo); font-weight: 400; font-size: clamp(1.35rem, 2.25vw, 1.8rem); letter-spacing: .03em; text-decoration: none; color: var(--white); transition: color .3s; animation: rise 1.2s 1s both; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); } /* Fondo del logo: la ESQUINA superior izquierda está rota. La pieza llega a los bordes de arriba e izquierda y el desgarro (irregular, con fibra de papel blanco) queda a la derecha y abajo. Los márgenes de izquierda=derecha y arriba=abajo son iguales para que el logo quede centrado. */ .name::before, .name::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .name::before { top: calc(-1 * var(--ty)); left: calc(-1 * var(--lx)); right: calc(-1 * (var(--lx) + 6px + 15px)); bottom: calc(-1 * (var(--ty) + 6px + 15px)); background: linear-gradient(135deg, #F7F4EE, #E4E0D7); clip-path: polygon(0 0, 100% 0, calc(100.00% - 10.5px) calc(0.00% - 0.0px), calc(100.00% - 10.7px) calc(8.45% - 2.5px), calc(100.00% - 10.0px) calc(16.58% - 4.9px), calc(100.00% - 19.9px) calc(18.87% - 5.6px), calc(100.00% - 16.4px) calc(28.38% - 8.4px), calc(100.00% - 16.4px) calc(38.12% - 11.3px), calc(100.00% - 26.8px) calc(43.67% - 12.9px), calc(100.00% - 18.1px) calc(52.18% - 15.4px), calc(100.00% - 18.9px) calc(55.04% - 16.3px), calc(100.00% - 7.5px) calc(64.12% - 19.0px), calc(100.00% - 15.7px) calc(70.05% - 20.7px), calc(100.00% - 15.1px) calc(78.81% - 23.3px), calc(100.00% - 11.5px) calc(86.12% - 25.5px), calc(100.00% - 13.2px) calc(90.21% - 26.7px), calc(100.00% - 14.3px) calc(100.00% - 29.6px), calc(100.00% - 28.7px) calc(100.00% - 6.7px), calc(98.59% - 28.3px) calc(100.00% - 8.4px), calc(95.17% - 27.3px) calc(100.00% - 8.7px), calc(93.23% - 26.7px) calc(100.00% - 9.1px), calc(90.46% - 25.9px) calc(100.00% - 8.7px), calc(88.86% - 25.5px) calc(100.00% - 9.3px), calc(85.90% - 24.6px) calc(100.00% - 10.1px), calc(84.48% - 24.2px) calc(100.00% - 7.6px), calc(81.30% - 23.3px) calc(100.00% - 14.8px), calc(79.15% - 22.7px) calc(100.00% - 16.8px), calc(77.42% - 22.2px) calc(100.00% - 18.5px), calc(74.93% - 21.5px) calc(100.00% - 16.9px), calc(72.41% - 20.7px) calc(100.00% - 19.1px), calc(70.98% - 20.3px) calc(100.00% - 18.4px), calc(68.09% - 19.5px) calc(100.00% - 19.6px), calc(65.38% - 18.7px) calc(100.00% - 16.8px), calc(64.04% - 18.4px) calc(100.00% - 18.5px), calc(60.84% - 17.4px) calc(100.00% - 22.2px), calc(58.77% - 16.8px) calc(100.00% - 17.9px), calc(56.22% - 16.1px) calc(100.00% - 13.8px), calc(54.83% - 15.7px) calc(100.00% - 14.7px), calc(52.98% - 15.2px) calc(100.00% - 12.2px), calc(49.48% - 14.2px) calc(100.00% - 11.4px), calc(47.20% - 13.5px) calc(100.00% - 13.2px), calc(45.55% - 13.1px) calc(100.00% - 11.5px), calc(43.88% - 12.6px) calc(100.00% - 14.3px), calc(41.43% - 11.9px) calc(100.00% - 17.3px), calc(38.40% - 11.0px) calc(100.00% - 15.1px), calc(36.72% - 10.5px) calc(100.00% - 25.8px), calc(33.31% - 9.5px) calc(100.00% - 23.0px), calc(31.67% - 9.1px) calc(100.00% - 20.0px), calc(30.06% - 8.6px) calc(100.00% - 16.7px), calc(27.00% - 7.7px) calc(100.00% - 14.5px), calc(25.24% - 7.2px) calc(100.00% - 11.7px), calc(21.98% - 6.3px) calc(100.00% - 12.0px), calc(19.75% - 5.7px) calc(100.00% - 10.9px), calc(18.16% - 5.2px) calc(100.00% - 12.5px), calc(15.66% - 4.5px) calc(100.00% - 5.1px), calc(13.29% - 3.8px) calc(100.00% - 10.6px), calc(10.84% - 3.1px) calc(100.00% - 11.2px), calc(8.27% - 2.4px) calc(100.00% - 12.5px), calc(7.63% - 2.2px) calc(100.00% - 13.0px), calc(4.78% - 1.4px) calc(100.00% - 15.6px), calc(2.10% - 0.6px) calc(100.00% - 18.7px), calc(0.00% - 0.0px) calc(100.00% - 19.3px)); } .name::after { top: calc(-1 * var(--ty)); left: calc(-1 * var(--lx)); right: calc(-1 * (var(--lx) + 6px)); bottom: calc(-1 * (var(--ty) + 6px)); background: var(--film-bg); clip-path: polygon(0 0, 100% 0, calc(100.00% - 1.5px) calc(0.00% - 0.0px), calc(100.00% - 0.0px) calc(8.45% - 1.6px), calc(100.00% - 5.0px) calc(16.58% - 3.2px), calc(100.00% - 7.6px) calc(18.87% - 3.6px), calc(100.00% - 5.2px) calc(28.38% - 5.4px), calc(100.00% - 8.2px) calc(38.12% - 7.3px), calc(100.00% - 17.8px) calc(43.67% - 8.3px), calc(100.00% - 9.6px) calc(52.18% - 10.0px), calc(100.00% - 9.7px) calc(55.04% - 10.5px), calc(100.00% - 5.5px) calc(64.12% - 12.2px), calc(100.00% - 4.7px) calc(70.05% - 13.4px), calc(100.00% - 5.2px) calc(78.81% - 15.0px), calc(100.00% - 4.8px) calc(86.12% - 16.4px), calc(100.00% - 5.7px) calc(90.21% - 17.2px), calc(100.00% - 4.5px) calc(100.00% - 19.1px), calc(100.00% - 18.2px) calc(100.00% - 0.5px), calc(98.59% - 17.9px) calc(100.00% - 1.4px), calc(95.17% - 17.3px) calc(100.00% - 0.0px), calc(93.23% - 16.9px) calc(100.00% - 0.0px), calc(90.46% - 16.4px) calc(100.00% - 0.0px), calc(88.86% - 16.1px) calc(100.00% - 0.4px), calc(85.90% - 15.6px) calc(100.00% - 1.7px), calc(84.48% - 15.3px) calc(100.00% - 2.2px), calc(81.30% - 14.8px) calc(100.00% - 4.1px), calc(79.15% - 14.4px) calc(100.00% - 5.8px), calc(77.42% - 14.1px) calc(100.00% - 7.0px), calc(74.93% - 13.6px) calc(100.00% - 4.8px), calc(72.41% - 13.1px) calc(100.00% - 8.2px), calc(70.98% - 12.9px) calc(100.00% - 7.6px), calc(68.09% - 12.4px) calc(100.00% - 9.7px), calc(65.38% - 11.9px) calc(100.00% - 8.9px), calc(64.04% - 11.6px) calc(100.00% - 15.7px), calc(60.84% - 11.0px) calc(100.00% - 13.8px), calc(58.77% - 10.7px) calc(100.00% - 11.3px), calc(56.22% - 10.2px) calc(100.00% - 6.8px), calc(54.83% - 10.0px) calc(100.00% - 6.3px), calc(52.98% - 9.6px) calc(100.00% - 5.8px), calc(49.48% - 9.0px) calc(100.00% - 4.4px), calc(47.20% - 8.6px) calc(100.00% - 5.6px), calc(45.55% - 8.3px) calc(100.00% - 4.6px), calc(43.88% - 8.0px) calc(100.00% - 5.5px), calc(41.43% - 7.5px) calc(100.00% - 6.8px), calc(38.40% - 7.0px) calc(100.00% - 12.4px), calc(36.72% - 6.7px) calc(100.00% - 15.7px), calc(33.31% - 6.0px) calc(100.00% - 11.5px), calc(31.67% - 5.7px) calc(100.00% - 7.6px), calc(30.06% - 5.5px) calc(100.00% - 5.2px), calc(27.00% - 4.9px) calc(100.00% - 3.6px), calc(25.24% - 4.6px) calc(100.00% - 2.8px), calc(21.98% - 4.0px) calc(100.00% - 1.9px), calc(19.75% - 3.6px) calc(100.00% - 2.2px), calc(18.16% - 3.3px) calc(100.00% - 2.5px), calc(15.66% - 2.8px) calc(100.00% - 2.8px), calc(13.29% - 2.4px) calc(100.00% - 2.0px), calc(10.84% - 2.0px) calc(100.00% - 3.2px), calc(8.27% - 1.5px) calc(100.00% - 4.5px), calc(7.63% - 1.4px) calc(100.00% - 5.1px), calc(4.78% - 0.9px) calc(100.00% - 7.1px), calc(2.10% - 0.4px) calc(100.00% - 9.1px), calc(0.00% - 0.0px) calc(100.00% - 10.9px)); } /* Sobre las secciones el fondo detrás de la esquina es más oscuro, para que se note el rasgado */ body.has-screen .name::after, body.has-panel .name::after { background: var(--film-noise), #151514; } /* MENÚ: texto plano que se funde con la foto (lado derecho) */ .menu { right: clamp(.84rem, 2.4vw, 2.1rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: .33rem; animation: rise 1.4s 1.2s both; } .menu a { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.33rem, 2.28vw, 2.1rem); letter-spacing: .01em; line-height: 1.1; color: var(--white); text-decoration: underline 2px transparent; text-underline-offset: .22em; transition: text-decoration-color .25s, color .25s; } .menu a:hover { text-decoration-color: var(--orange); } .menu a[aria-current="page"] { text-decoration-color: var(--blue-soft); } .lang { left: var(--lx); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .9rem; font-size: .95rem; transition: color .3s; animation: rise 1.2s 1.4s both; } .lang button { background: none; border: 0; padding: .2rem 0; font: inherit; color: inherit; cursor: pointer; opacity: .7; text-decoration: underline 2px transparent; text-underline-offset: .3em; } .lang button[aria-pressed="true"] { opacity: 1; text-decoration-color: var(--orange); } .note { left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; font-size: .85rem; opacity: .85; text-align: center; max-width: 60vw; animation: rise 1.2s 1.6s both; } /* Cuando hay un panel abierto, el nombre e idioma pasan a tinta oscura */ body.has-panel .name, body.has-panel .lang, body.has-screen .name, body.has-screen .lang { color: var(--panel-ink); text-shadow: none; } body.has-panel .note, body.has-screen .note { opacity: 0; } /* ========================================================= 4. PANELES (Proyectos, Álbum, Contacto, Enlaces) ========================================================= */ .panel { --pgr: 20px; --pgb: 20px; /* franja extra (derecha y abajo) para la fibra de papel del borde rasgado */ position: fixed; z-index: 3; top: 0; left: 0; width: fit-content; max-width: min(calc(720px + var(--pgr)), calc(100% - var(--tear) - 3rem)); max-height: 100%; color: var(--panel-ink); visibility: hidden; } .panel.open { visibility: visible; } .panel-edge { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7)); } .panel-paper { position: absolute; inset: 0; background: linear-gradient(135deg, #F7F4EE, #E4E0D7); clip-path: polygon(0 0, 100% 0, calc(99.00% - 31.3px) calc(0.00% - 0.0px), calc(98.95% - 32.5px) calc(2.48% - 0.9px), calc(98.75% - 30.0px) calc(5.84% - 2.2px), calc(98.37% - 31.9px) calc(9.57% - 3.6px), calc(97.77% - 26.8px) calc(14.36% - 5.4px), calc(97.54% - 31.4px) calc(16.20% - 6.1px), calc(97.03% - 26.5px) calc(21.16% - 7.9px), calc(96.84% - 25.5px) calc(24.38% - 9.1px), calc(96.80% - 35.7px) calc(26.44% - 9.9px), calc(96.85% - 28.5px) calc(30.90% - 11.6px), calc(96.94% - 35.7px) calc(34.09% - 12.7px), calc(97.08% - 24.6px) calc(37.43% - 14.0px), calc(97.31% - 16.6px) calc(42.37% - 15.8px), calc(97.36% - 6.4px) calc(43.44% - 16.2px), calc(97.48% - 15.2px) calc(46.68% - 17.5px), calc(97.60% - 14.5px) calc(52.49% - 19.6px), calc(97.59% - 18.8px) calc(54.52% - 20.4px), calc(97.47% - 16.3px) calc(57.41% - 21.5px), calc(97.14% - 17.3px) calc(61.17% - 22.9px), calc(96.66% - 17.5px) calc(64.69% - 24.2px), calc(95.83% - 17.0px) calc(69.65% - 26.0px), calc(95.56% - 14.5px) calc(71.13% - 26.6px), calc(94.95% - 13.1px) calc(74.57% - 27.9px), calc(94.25% - 29.8px) calc(78.95% - 29.5px), calc(93.85% - 21.4px) calc(82.28% - 30.8px), calc(93.54% - 20.6px) calc(86.76% - 32.4px), calc(93.50% - 18.6px) calc(89.00% - 33.3px), calc(93.50% - 29.8px) calc(89.00% - 32.6px), calc(91.95% - 29.3px) calc(89.02% - 32.8px), calc(90.12% - 28.7px) calc(89.10% - 35.5px), calc(89.30% - 28.5px) calc(89.16% - 33.5px), calc(87.26% - 27.8px) calc(89.33% - 34.8px), calc(85.30% - 27.2px) calc(89.55% - 27.6px), calc(84.12% - 26.8px) calc(89.69% - 31.4px), calc(82.06% - 26.2px) calc(89.97% - 26.3px), calc(80.58% - 25.7px) calc(90.16% - 28.2px), calc(79.63% - 25.4px) calc(90.29% - 24.1px), calc(78.51% - 25.0px) calc(90.43% - 24.7px), calc(76.06% - 24.3px) calc(90.70% - 24.2px), calc(75.24% - 24.0px) calc(90.77% - 26.7px), calc(73.82% - 23.5px) calc(90.88% - 25.3px), calc(71.41% - 22.8px) calc(90.99% - 22.7px), calc(69.72% - 22.2px) calc(91.00% - 22.0px), calc(68.17% - 21.7px) calc(91.07% - 23.6px), calc(66.47% - 21.2px) calc(91.24% - 20.5px), calc(65.80% - 21.0px) calc(91.33% - 18.5px), calc(64.39% - 20.5px) calc(91.57% - 20.9px), calc(62.78% - 20.0px) calc(91.90% - 16.8px), calc(60.21% - 19.2px) calc(92.53% - 20.4px), calc(59.68% - 19.0px) calc(92.67% - 21.6px), calc(58.06% - 18.5px) calc(93.10% - 23.7px), calc(56.67% - 18.1px) calc(93.47% - 28.9px), calc(55.08% - 17.6px) calc(93.87% - 21.2px), calc(53.53% - 17.1px) calc(94.23% - 14.5px), calc(51.60% - 16.5px) calc(94.59% - 17.1px), calc(50.27% - 16.0px) calc(94.78% - 18.7px), calc(48.53% - 15.5px) calc(94.94% - 27.8px), calc(46.24% - 14.8px) calc(95.00% - 28.5px), calc(45.59% - 14.5px) calc(95.02% - 29.7px), calc(43.26% - 13.8px) calc(95.16% - 27.2px), calc(41.79% - 13.3px) calc(95.32% - 29.0px), calc(40.44% - 12.9px) calc(95.51% - 32.7px), calc(38.87% - 12.4px) calc(95.77% - 33.5px), calc(37.08% - 11.8px) calc(96.10% - 27.9px), calc(35.74% - 11.4px) calc(96.36% - 25.7px), calc(34.60% - 11.0px) calc(96.59% - 24.6px), calc(32.93% - 10.5px) calc(96.92% - 20.1px), calc(31.47% - 10.0px) calc(97.20% - 10.7px), calc(29.73% - 9.5px) calc(97.49% - 20.3px), calc(27.47% - 8.8px) calc(97.78% - 19.2px), calc(26.58% - 8.5px) calc(97.86% - 29.2px), calc(25.44% - 8.1px) calc(97.94% - 20.0px), calc(23.40% - 7.5px) calc(98.00% - 20.9px), calc(21.45% - 6.8px) calc(98.03% - 17.0px), calc(20.32% - 6.5px) calc(98.06% - 14.9px), calc(18.46% - 5.9px) calc(98.16% - 26.3px), calc(17.63% - 5.6px) calc(98.21% - 18.6px), calc(16.10% - 5.1px) calc(98.33% - 18.0px), calc(13.83% - 4.4px) calc(98.54% - 19.1px), calc(13.00% - 4.1px) calc(98.62% - 16.9px), calc(11.14% - 3.6px) calc(98.80% - 17.6px), calc(9.49% - 3.0px) calc(98.97% - 12.5px), calc(8.15% - 2.6px) calc(99.09% - 16.5px), calc(6.78% - 2.2px) calc(99.21% - 17.0px), calc(5.26% - 1.7px) calc(99.32% - 16.9px), calc(2.58% - 0.8px) calc(99.46% - 17.0px), calc(1.33% - 0.4px) calc(99.49% - 26.1px), calc(0.00% - 0.0px) calc(99.50% - 20.2px)); } /* La hoja se ajusta al tamaño del contenido: el resto de la pantalla deja ver el fondo. Su contorno es irregular (los bordes se inclinan y se curvan, no es un rectángulo). */ .panel-sheet { position: relative; margin: 0 var(--pgr) var(--pgb) 0; min-width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--pgb)); overflow-y: auto; overscroll-behavior: contain; background: var(--film-bg); padding: calc(7.5rem + env(safe-area-inset-top, 0px)) calc(var(--lx) + 2.6rem) calc(4.2rem + env(safe-area-inset-bottom, 0px)) var(--lx); clip-path: polygon(0 0, 100% 0, calc(99.00% - 18.8px) calc(0.00% - 0.0px), calc(98.95% - 17.8px) calc(2.48% - 0.5px), calc(98.75% - 17.6px) calc(5.84% - 1.3px), calc(98.37% - 16.3px) calc(9.57% - 2.1px), calc(97.77% - 14.2px) calc(14.36% - 3.1px), calc(97.54% - 20.9px) calc(16.20% - 3.5px), calc(97.03% - 15.2px) calc(21.16% - 4.6px), calc(96.84% - 15.6px) calc(24.38% - 5.3px), calc(96.80% - 24.5px) calc(26.44% - 5.7px), calc(96.85% - 16.0px) calc(30.90% - 6.7px), calc(96.94% - 25.6px) calc(34.09% - 7.4px), calc(97.08% - 14.0px) calc(37.43% - 8.1px), calc(97.31% - 3.3px) calc(42.37% - 9.2px), calc(97.36% - 0.8px) calc(43.44% - 9.4px), calc(97.48% - 0.0px) calc(46.68% - 10.1px), calc(97.60% - 2.6px) calc(52.49% - 11.4px), calc(97.59% - 3.9px) calc(54.52% - 11.8px), calc(97.47% - 2.8px) calc(57.41% - 12.4px), calc(97.14% - 3.8px) calc(61.17% - 13.2px), calc(96.66% - 6.1px) calc(64.69% - 14.0px), calc(95.83% - 5.2px) calc(69.65% - 15.1px), calc(95.56% - 1.9px) calc(71.13% - 15.4px), calc(94.95% - 3.0px) calc(74.57% - 16.2px), calc(94.25% - 15.6px) calc(78.95% - 17.1px), calc(93.85% - 6.2px) calc(82.28% - 17.8px), calc(93.54% - 4.4px) calc(86.76% - 18.8px), calc(93.50% - 3.0px) calc(89.00% - 19.3px), calc(93.50% - 15.8px) calc(89.00% - 20.4px), calc(91.95% - 15.6px) calc(89.02% - 21.5px), calc(90.12% - 15.3px) calc(89.10% - 21.4px), calc(89.30% - 15.1px) calc(89.16% - 19.5px), calc(87.26% - 14.8px) calc(89.33% - 18.9px), calc(85.30% - 14.4px) calc(89.55% - 11.8px), calc(84.12% - 14.2px) calc(89.69% - 17.6px), calc(82.06% - 13.9px) calc(89.97% - 13.3px), calc(80.58% - 13.6px) calc(90.16% - 12.2px), calc(79.63% - 13.5px) calc(90.29% - 10.5px), calc(78.51% - 13.3px) calc(90.43% - 12.5px), calc(76.06% - 12.9px) calc(90.70% - 11.6px), calc(75.24% - 12.7px) calc(90.77% - 13.0px), calc(73.82% - 12.5px) calc(90.88% - 11.6px), calc(71.41% - 12.1px) calc(90.99% - 11.6px), calc(69.72% - 11.8px) calc(91.00% - 10.3px), calc(68.17% - 11.5px) calc(91.07% - 11.6px), calc(66.47% - 11.3px) calc(91.24% - 10.4px), calc(65.80% - 11.1px) calc(91.33% - 9.4px), calc(64.39% - 10.9px) calc(91.57% - 8.8px), calc(62.78% - 10.6px) calc(91.90% - 8.4px), calc(60.21% - 10.2px) calc(92.53% - 9.6px), calc(59.68% - 10.1px) calc(92.67% - 10.4px), calc(58.06% - 9.8px) calc(93.10% - 11.1px), calc(56.67% - 9.6px) calc(93.47% - 20.0px), calc(55.08% - 9.3px) calc(93.87% - 9.6px), calc(53.53% - 9.1px) calc(94.23% - 1.6px), calc(51.60% - 8.7px) calc(94.59% - 11.0px), calc(50.27% - 8.5px) calc(94.78% - 4.1px), calc(48.53% - 8.2px) calc(94.94% - 14.1px), calc(46.24% - 7.8px) calc(95.00% - 16.7px), calc(45.59% - 7.7px) calc(95.02% - 16.0px), calc(43.26% - 7.3px) calc(95.16% - 14.2px), calc(41.79% - 7.1px) calc(95.32% - 15.3px), calc(40.44% - 6.8px) calc(95.51% - 16.5px), calc(38.87% - 6.6px) calc(95.77% - 18.7px), calc(37.08% - 6.3px) calc(96.10% - 15.3px), calc(35.74% - 6.0px) calc(96.36% - 11.5px), calc(34.60% - 5.9px) calc(96.59% - 10.4px), calc(32.93% - 5.6px) calc(96.92% - 7.8px), calc(31.47% - 5.3px) calc(97.20% - 5.5px), calc(29.73% - 5.0px) calc(97.49% - 8.4px), calc(27.47% - 4.7px) calc(97.78% - 9.6px), calc(26.58% - 4.5px) calc(97.86% - 19.4px), calc(25.44% - 4.3px) calc(97.94% - 10.1px), calc(23.40% - 4.0px) calc(98.00% - 8.9px), calc(21.45% - 3.6px) calc(98.03% - 8.9px), calc(20.32% - 3.4px) calc(98.06% - 6.1px), calc(18.46% - 3.1px) calc(98.16% - 14.4px), calc(17.63% - 3.0px) calc(98.21% - 8.6px), calc(16.10% - 2.7px) calc(98.33% - 6.3px), calc(13.83% - 2.3px) calc(98.54% - 9.0px), calc(13.00% - 2.2px) calc(98.62% - 6.6px), calc(11.14% - 1.9px) calc(98.80% - 6.2px), calc(9.49% - 1.6px) calc(98.97% - 0.0px), calc(8.15% - 1.4px) calc(99.09% - 3.6px), calc(6.78% - 1.1px) calc(99.21% - 3.4px), calc(5.26% - 0.9px) calc(99.32% - 2.9px), calc(2.58% - 0.4px) calc(99.46% - 2.1px), calc(1.33% - 0.2px) calc(99.49% - 13.5px), calc(0.00% - 0.0px) calc(99.50% - 4.7px)); } /* Cada panel tiene su propia forma de desgarro (se elige con data-shape desde el JS) */ .panel[data-shape="links"] .panel-paper { clip-path: polygon(0 0, 100% 0, calc(94.50% - 27.1px) calc(0.00% - 0.0px), calc(94.93% - 28.7px) calc(5.76% - 2.0px), calc(95.26% - 35.6px) calc(7.78% - 2.7px), calc(96.51% - 29.1px) calc(14.21% - 5.0px), calc(97.05% - 23.1px) calc(17.35% - 6.1px), calc(97.49% - 22.2px) calc(22.37% - 7.9px), calc(97.50% - 20.7px) calc(23.82% - 8.4px), calc(97.80% - 27.5px) calc(30.35% - 10.7px), calc(98.13% - 21.4px) calc(33.87% - 12.0px), calc(98.63% - 30.2px) calc(38.38% - 13.5px), calc(99.00% - 33.4px) calc(41.88% - 14.8px), calc(99.44% - 52.4px) calc(48.03% - 17.0px), calc(99.50% - 43.9px) calc(51.23% - 18.1px), calc(99.29% - 36.0px) calc(55.68% - 19.7px), calc(98.80% - 31.8px) calc(59.77% - 21.1px), calc(98.23% - 17.2px) calc(63.56% - 22.4px), calc(97.53% - 21.9px) calc(68.64% - 24.2px), calc(97.25% - 23.1px) calc(72.24% - 25.5px), calc(97.12% - 19.2px) calc(76.30% - 26.9px), calc(96.71% - 15.9px) calc(79.16% - 27.9px), calc(95.32% - 8.1px) calc(84.73% - 29.9px), calc(94.61% - 11.2px) calc(87.66% - 30.9px), calc(94.00% - 1.0px) calc(93.00% - 32.8px), calc(94.00% - 38.4px) calc(93.00% - 21.2px), calc(92.72% - 37.9px) calc(93.05% - 23.2px), calc(90.16% - 36.9px) calc(93.40% - 15.7px), calc(88.34% - 36.1px) calc(93.83% - 15.7px), calc(86.48% - 35.4px) calc(94.38% - 13.5px), calc(83.65% - 34.2px) calc(95.32% - 25.5px), calc(81.56% - 33.4px) calc(95.97% - 15.3px), calc(79.84% - 32.7px) calc(96.43% - 30.7px), calc(78.45% - 32.1px) calc(96.71% - 28.3px), calc(75.82% - 31.0px) calc(96.99% - 31.8px), calc(75.01% - 30.7px) calc(97.00% - 32.0px), calc(72.47% - 29.6px) calc(97.08% - 32.3px), calc(70.54% - 28.9px) calc(97.23% - 30.9px), calc(69.18% - 28.3px) calc(97.38% - 25.2px), calc(66.50% - 27.2px) calc(97.75% - 21.2px), calc(64.81% - 26.5px) calc(98.02% - 20.9px), calc(62.86% - 25.7px) calc(98.35% - 16.0px), calc(61.30% - 25.1px) calc(98.60% - 15.2px), calc(58.50% - 23.9px) calc(99.02% - 13.8px), calc(57.34% - 23.4px) calc(99.16% - 16.3px), calc(55.53% - 22.7px) calc(99.34% - 23.4px), calc(52.33% - 21.4px) calc(99.50% - 1.4px), calc(51.20% - 20.9px) calc(99.50% - 12.2px), calc(48.79% - 20.0px) calc(99.39% - 11.3px), calc(46.66% - 19.1px) calc(99.17% - 15.6px), calc(44.65% - 18.3px) calc(98.88% - 17.9px), calc(42.47% - 17.4px) calc(98.50% - 22.7px), calc(41.63% - 17.0px) calc(98.33% - 20.4px), calc(39.24% - 16.1px) calc(97.86% - 25.1px), calc(37.76% - 15.4px) calc(97.57% - 26.2px), calc(34.92% - 14.3px) calc(97.07% - 23.5px), calc(33.70% - 13.8px) calc(96.89% - 25.4px), calc(31.69% - 13.0px) calc(96.66% - 29.7px), calc(29.75% - 12.2px) calc(96.53% - 25.4px), calc(27.09% - 11.1px) calc(96.51% - 15.9px), calc(25.49% - 10.4px) calc(96.55% - 25.2px), calc(23.01% - 9.4px) calc(96.66% - 19.8px), calc(21.41% - 8.8px) calc(96.77% - 18.1px), calc(19.45% - 8.0px) calc(96.94% - 31.3px), calc(17.37% - 7.1px) calc(97.14% - 44.9px), calc(15.92% - 6.5px) calc(97.30% - 35.7px), calc(13.86% - 5.7px) calc(97.53% - 39.8px), calc(12.07% - 4.9px) calc(97.72% - 46.0px), calc(10.23% - 4.2px) calc(97.92% - 32.7px), calc(7.23% - 3.0px) calc(98.19% - 29.6px), calc(5.71% - 2.3px) calc(98.30% - 32.2px), calc(3.98% - 1.6px) calc(98.40% - 32.6px), calc(1.78% - 0.7px) calc(98.48% - 33.6px), calc(0.00% - 0.0px) calc(98.50% - 23.9px)); } .panel[data-shape="links"] .panel-sheet { clip-path: polygon(0 0, 100% 0, calc(94.50% - 18.8px) calc(0.00% - 0.0px), calc(94.93% - 15.8px) calc(5.76% - 1.2px), calc(95.26% - 25.4px) calc(7.78% - 1.6px), calc(96.51% - 14.0px) calc(14.21% - 2.9px), calc(97.05% - 8.8px) calc(17.35% - 3.5px), calc(97.49% - 8.1px) calc(22.37% - 4.5px), calc(97.50% - 7.6px) calc(23.82% - 4.8px), calc(97.80% - 15.3px) calc(30.35% - 6.1px), calc(98.13% - 11.3px) calc(33.87% - 6.9px), calc(98.63% - 17.6px) calc(38.38% - 7.8px), calc(99.00% - 24.6px) calc(41.88% - 8.5px), calc(99.44% - 39.6px) calc(48.03% - 9.7px), calc(99.50% - 32.8px) calc(51.23% - 10.4px), calc(99.29% - 22.1px) calc(55.68% - 11.3px), calc(98.80% - 18.4px) calc(59.77% - 12.1px), calc(98.23% - 3.6px) calc(63.56% - 12.9px), calc(97.53% - 7.3px) calc(68.64% - 13.9px), calc(97.25% - 9.6px) calc(72.24% - 14.6px), calc(97.12% - 7.1px) calc(76.30% - 15.4px), calc(96.71% - 3.6px) calc(79.16% - 16.0px), calc(95.32% - 0.0px) calc(84.73% - 17.2px), calc(94.61% - 0.0px) calc(87.66% - 17.7px), calc(94.00% - 0.0px) calc(93.00% - 18.8px), calc(94.00% - 24.4px) calc(93.00% - 11.2px), calc(92.72% - 24.1px) calc(93.05% - 14.0px), calc(90.16% - 23.4px) calc(93.40% - 3.9px), calc(88.34% - 23.0px) calc(93.83% - 5.5px), calc(86.48% - 22.5px) calc(94.38% - 2.2px), calc(83.65% - 21.8px) calc(95.32% - 12.1px), calc(81.56% - 21.2px) calc(95.97% - 12.4px), calc(79.84% - 20.8px) calc(96.43% - 15.4px), calc(78.45% - 20.4px) calc(96.71% - 14.8px), calc(75.82% - 19.7px) calc(96.99% - 17.6px), calc(75.01% - 19.5px) calc(97.00% - 18.2px), calc(72.47% - 18.8px) calc(97.08% - 16.4px), calc(70.54% - 18.3px) calc(97.23% - 14.9px), calc(69.18% - 18.0px) calc(97.38% - 10.8px), calc(66.50% - 17.3px) calc(97.75% - 7.3px), calc(64.81% - 16.9px) calc(98.02% - 6.9px), calc(62.86% - 16.3px) calc(98.35% - 6.0px), calc(61.30% - 15.9px) calc(98.60% - 5.3px), calc(58.50% - 15.2px) calc(99.02% - 3.7px), calc(57.34% - 14.9px) calc(99.16% - 5.0px), calc(55.53% - 14.4px) calc(99.34% - 12.5px), calc(52.33% - 13.6px) calc(99.50% - 0.0px), calc(51.20% - 13.3px) calc(99.50% - 0.0px), calc(48.79% - 12.7px) calc(99.39% - 0.0px), calc(46.66% - 12.1px) calc(99.17% - 4.6px), calc(44.65% - 11.6px) calc(98.88% - 7.4px), calc(42.47% - 11.0px) calc(98.50% - 11.8px), calc(41.63% - 10.8px) calc(98.33% - 8.7px), calc(39.24% - 10.2px) calc(97.86% - 13.8px), calc(37.76% - 9.8px) calc(97.57% - 13.0px), calc(34.92% - 9.1px) calc(97.07% - 9.1px), calc(33.70% - 8.8px) calc(96.89% - 9.6px), calc(31.69% - 8.2px) calc(96.66% - 14.2px), calc(29.75% - 7.7px) calc(96.53% - 19.4px), calc(27.09% - 7.0px) calc(96.51% - 0.0px), calc(25.49% - 6.6px) calc(96.55% - 13.9px), calc(23.01% - 6.0px) calc(96.66% - 8.4px), calc(21.41% - 5.6px) calc(96.77% - 12.2px), calc(19.45% - 5.1px) calc(96.94% - 19.3px), calc(17.37% - 4.5px) calc(97.14% - 34.6px), calc(15.92% - 4.1px) calc(97.30% - 32.6px), calc(13.86% - 3.6px) calc(97.53% - 30.0px), calc(12.07% - 3.1px) calc(97.72% - 33.6px), calc(10.23% - 2.7px) calc(97.92% - 22.3px), calc(7.23% - 1.9px) calc(98.19% - 20.7px), calc(5.71% - 1.5px) calc(98.30% - 20.2px), calc(3.98% - 1.0px) calc(98.40% - 22.0px), calc(1.78% - 0.5px) calc(98.48% - 21.8px), calc(0.00% - 0.0px) calc(98.50% - 22.1px)); } .panel h2, .screen h2 { font-family: var(--font-display); font-weight: 500; font-size: calc(clamp(2.7rem, 5vw, 3.9rem) * var(--sec)); letter-spacing: .02em; margin: 0 0 2rem; line-height: 1.05; outline: none; } .close { position: absolute; top: calc(1.45rem + env(safe-area-inset-top, 0px)); right: var(--lx); font-size: calc(.95rem * var(--sec)); text-decoration: underline 2px var(--orange); text-underline-offset: .3em; } .panel .close { right: calc(var(--lx) + 2.6rem); } .panel p { font-size: calc(1rem * var(--sec)); line-height: 1.65; max-width: 62ch; margin: 0 0 1rem; } .foot { margin-top: 3rem; font-size: calc(.85rem * var(--sec)); color: var(--muted); } .panel .foot, .screen .foot { margin-top: 2.25rem; font-size: calc(.85rem * var(--sec)); } /* .panel p anulaba el margen de arriba */ /* Marcadores de posición: reemplázalos por tus fotos reales (ver instrucciones) */ .ph { width: 100%; } .t0 { background: linear-gradient(160deg, #7FA3D1, #FFFFFF); } .t1 { background: linear-gradient(200deg, #E8A468, #FFFFFF 70%); } .t2 { background: linear-gradient(180deg, #3F6AA5, #9DB7D6 60%, #E9C9A0); } .t3 { background: linear-gradient(135deg, #FFFFFF, #E07B39); } .t4 { background: linear-gradient(170deg, #A9BFD9, #E8A468); } .print { background: var(--paper); padding: .6rem; box-shadow: 0 3px 14px rgba(0,0,0,.5); } .print img { display: block; width: 100%; height: auto; } /* ========================================================= 4b. SECCIONES A PANTALLA COMPLETA (Proyectos y Álbum) Se muestran al hacer clic en el menú y se ocultan con "Ocultar", con Esc, o volviendo a hacer clic en el mismo botón del menú. ========================================================= */ .screen { position: fixed; inset: 0; z-index: 3; overflow: hidden; background: var(--film-bg); color: var(--panel-ink); visibility: hidden; } .screen.open { visibility: visible; } .screen-sheet { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(7.5rem + env(safe-area-inset-top, 0px)) clamp(1.4rem, 5vw, 4rem) calc(3rem + env(safe-area-inset-bottom, 0px)); } .screen-inner { max-width: 1320px; margin: 0 auto; } .screen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2.4rem; } .screen-head h2 { margin: 0; } .hide { font-size: calc(.95rem * var(--sec)); text-decoration: underline 2px var(--orange); text-underline-offset: .3em; } /* Con una sección a pantalla completa, el menú sube a la barra superior */ body.has-screen .menu a { color: var(--panel-ink); text-shadow: none; } body.has-screen .menu a[aria-current="page"] { text-decoration-color: var(--blue-soft); } /* Pantallas anchas: el menú ocupa el ancho de la zona rasgada (pegado al borde derecho) y sus líneas van centradas, así queda al centro entre el desgarro y el borde de la pantalla. */ @media (min-width: 761px) { .menu { right: 0; width: calc(var(--tear) * .97 - 6px); align-items: center; } } /* Menú de Proyectos/Álbum: la esquina superior derecha también está rota (solo esa esquina) */ .menu::before, .menu::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; } @media (min-width: 761px) { body.has-screen .menu { --mr: clamp(1.2rem, 4.3vw, 3.43rem); --my: calc(1.45rem + env(safe-area-inset-top, 0px)); --mx: clamp(1.2rem, 2.57vw, 2.23rem); filter: drop-shadow(-1.7px 1.7px 4.5px rgba(0,0,0,.55)); } body.has-screen .menu::before, body.has-screen .menu::after { opacity: 1; top: calc(-1 * var(--my)); right: calc(-1 * var(--mr)); } body.has-screen .menu::before { left: calc(-1 * (var(--mx) + 7px + 17.1px)); bottom: calc(-1 * (var(--my) + 7px + 17.1px)); background: linear-gradient(225deg, #F7F4EE, #E4E0D7); clip-path: polygon(100% 0, 19.5px calc(0.00% - 0.0px), 21.8px calc(6.25% - 1.5px), 18.1px calc(20.02% - 4.8px), 10.2px calc(33.03% - 7.9px), 13.0px calc(36.81% - 8.8px), 14.9px calc(50.41% - 12.0px), 11.0px calc(60.89% - 14.5px), 27.6px calc(66.51% - 15.9px), 19.0px calc(79.08% - 18.9px), 16.7px calc(91.55% - 21.8px), 17.0px calc(100.00% - 23.8px), calc(0.00% + 32.1px) calc(100.00% - 15.2px), calc(2.06% + 31.4px) calc(100.00% - 9.7px), calc(3.74% + 30.9px) calc(100.00% - 16.5px), calc(5.19% + 30.4px) calc(100.00% - 13.4px), calc(6.24% + 30.1px) calc(100.00% - 15.7px), calc(8.36% + 29.4px) calc(100.00% - 15.6px), calc(9.78% + 28.9px) calc(100.00% - 14.8px), calc(11.35% + 28.4px) calc(100.00% - 16.3px), calc(13.91% + 27.6px) calc(100.00% - 18.1px), calc(15.63% + 27.1px) calc(100.00% - 16.0px), calc(16.09% + 26.9px) calc(100.00% - 8.7px), calc(18.79% + 26.0px) calc(100.00% - 14.7px), calc(20.13% + 25.6px) calc(100.00% - 17.6px), calc(21.52% + 25.2px) calc(100.00% - 13.0px), calc(23.06% + 24.7px) calc(100.00% - 13.6px), calc(25.22% + 24.0px) calc(100.00% - 21.8px), calc(26.61% + 23.5px) calc(100.00% - 18.5px), calc(28.57% + 22.9px) calc(100.00% - 14.1px), calc(30.21% + 22.4px) calc(100.00% - 9.4px), calc(31.20% + 22.1px) calc(100.00% - 14.0px), calc(33.67% + 21.3px) calc(100.00% - 11.8px), calc(35.61% + 20.6px) calc(100.00% - 14.0px), calc(37.26% + 20.1px) calc(100.00% - 10.3px), calc(38.48% + 19.7px) calc(100.00% - 9.3px), calc(39.42% + 19.4px) calc(100.00% - 11.3px), calc(41.04% + 18.9px) calc(100.00% - 9.4px), calc(42.87% + 18.3px) calc(100.00% - 11.6px), calc(45.56% + 17.5px) calc(100.00% - 12.1px), calc(46.42% + 17.2px) calc(100.00% - 4.7px), calc(48.16% + 16.6px) calc(100.00% - 16.3px), calc(50.50% + 15.9px) calc(100.00% - 19.6px), calc(51.43% + 15.6px) calc(100.00% - 12.0px), calc(53.40% + 14.9px) calc(100.00% - 20.5px), calc(54.92% + 14.5px) calc(100.00% - 22.0px), calc(56.12% + 14.1px) calc(100.00% - 22.2px), calc(58.44% + 13.3px) calc(100.00% - 16.0px), calc(60.44% + 12.7px) calc(100.00% - 24.7px), calc(61.23% + 12.4px) calc(100.00% - 23.2px), calc(62.98% + 11.9px) calc(100.00% - 23.8px), calc(64.89% + 11.3px) calc(100.00% - 22.3px), calc(66.08% + 10.9px) calc(100.00% - 23.1px), calc(68.33% + 10.2px) calc(100.00% - 22.8px), calc(70.40% + 9.5px) calc(100.00% - 26.3px), calc(71.87% + 9.0px) calc(100.00% - 22.3px), calc(73.38% + 8.5px) calc(100.00% - 26.3px), calc(75.45% + 7.9px) calc(100.00% - 17.1px), calc(76.22% + 7.6px) calc(100.00% - 22.4px), calc(78.42% + 6.9px) calc(100.00% - 22.9px), calc(79.84% + 6.5px) calc(100.00% - 24.3px), calc(81.79% + 5.8px) calc(100.00% - 17.4px), calc(82.84% + 5.5px) calc(100.00% - 18.3px), calc(85.35% + 4.7px) calc(100.00% - 16.3px), calc(86.16% + 4.4px) calc(100.00% - 15.8px), calc(87.91% + 3.9px) calc(100.00% - 16.3px), calc(90.39% + 3.1px) calc(100.00% - 18.7px), calc(92.23% + 2.5px) calc(100.00% - 16.3px), calc(93.25% + 2.2px) calc(100.00% - 16.5px), calc(94.89% + 1.6px) calc(100.00% - 17.8px), calc(96.34% + 1.2px) calc(100.00% - 19.8px), calc(98.05% + 0.6px) calc(100.00% - 20.7px), calc(100.00% + 0.0px) calc(100.00% - 24.3px)); } body.has-screen .menu::after { left: calc(-1 * (var(--mx) + 7px)); bottom: calc(-1 * (var(--my) + 7px)); background: var(--film-noise), #151514; clip-path: polygon(100% 0, 9.7px calc(0.00% - 0.0px), 10.2px calc(6.25% - 0.7px), 6.9px calc(20.02% - 2.4px), 1.3px calc(33.03% - 3.9px), 5.3px calc(36.81% - 4.4px), 3.0px calc(50.41% - 6.0px), 0.0px calc(60.89% - 7.2px), 14.5px calc(66.51% - 7.9px), 11.9px calc(79.08% - 9.4px), 7.0px calc(91.55% - 10.8px), 3.2px calc(100.00% - 11.8px), calc(0.00% + 20.1px) calc(100.00% - 5.6px), calc(2.06% + 19.7px) calc(100.00% - 4.0px), calc(3.74% + 19.3px) calc(100.00% - 4.5px), calc(5.19% + 19.0px) calc(100.00% - 2.7px), calc(6.24% + 18.8px) calc(100.00% - 4.3px), calc(8.36% + 18.4px) calc(100.00% - 2.3px), calc(9.78% + 18.1px) calc(100.00% - 1.4px), calc(11.35% + 17.8px) calc(100.00% - 2.4px), calc(13.91% + 17.3px) calc(100.00% - 4.3px), calc(15.63% + 16.9px) calc(100.00% - 3.3px), calc(16.09% + 16.8px) calc(100.00% - 3.4px), calc(18.79% + 16.3px) calc(100.00% - 4.7px), calc(20.13% + 16.0px) calc(100.00% - 4.7px), calc(21.52% + 15.8px) calc(100.00% - 3.7px), calc(23.06% + 15.4px) calc(100.00% - 2.6px), calc(25.22% + 15.0px) calc(100.00% - 10.8px), calc(26.61% + 14.7px) calc(100.00% - 7.3px), calc(28.57% + 14.3px) calc(100.00% - 2.9px), calc(30.21% + 14.0px) calc(100.00% - 1.5px), calc(31.20% + 13.8px) calc(100.00% - 4.6px), calc(33.67% + 13.3px) calc(100.00% - 2.9px), calc(35.61% + 12.9px) calc(100.00% - 3.4px), calc(37.26% + 12.6px) calc(100.00% - 3.2px), calc(38.48% + 12.3px) calc(100.00% - 1.0px), calc(39.42% + 12.2px) calc(100.00% - 1.7px), calc(41.04% + 11.8px) calc(100.00% - 0.8px), calc(42.87% + 11.5px) calc(100.00% - 0.9px), calc(45.56% + 10.9px) calc(100.00% - 1.9px), calc(46.42% + 10.8px) calc(100.00% - 2.2px), calc(48.16% + 10.4px) calc(100.00% - 5.2px), calc(50.50% + 9.9px) calc(100.00% - 7.2px), calc(51.43% + 9.7px) calc(100.00% - 0.0px), calc(53.40% + 9.4px) calc(100.00% - 7.1px), calc(54.92% + 9.0px) calc(100.00% - 8.7px), calc(56.12% + 8.8px) calc(100.00% - 8.3px), calc(58.44% + 8.3px) calc(100.00% - 3.2px), calc(60.44% + 7.9px) calc(100.00% - 10.8px), calc(61.23% + 7.8px) calc(100.00% - 10.0px), calc(62.98% + 7.4px) calc(100.00% - 11.9px), calc(64.89% + 7.0px) calc(100.00% - 10.7px), calc(66.08% + 6.8px) calc(100.00% - 10.6px), calc(68.33% + 6.4px) calc(100.00% - 11.5px), calc(70.40% + 5.9px) calc(100.00% - 17.0px), calc(71.87% + 5.6px) calc(100.00% - 10.5px), calc(73.38% + 5.3px) calc(100.00% - 17.8px), calc(75.45% + 4.9px) calc(100.00% - 12.2px), calc(76.22% + 4.8px) calc(100.00% - 13.8px), calc(78.42% + 4.3px) calc(100.00% - 15.9px), calc(79.84% + 4.0px) calc(100.00% - 13.7px), calc(81.79% + 3.7px) calc(100.00% - 9.7px), calc(82.84% + 3.4px) calc(100.00% - 10.0px), calc(85.35% + 2.9px) calc(100.00% - 7.2px), calc(86.16% + 2.8px) calc(100.00% - 7.1px), calc(87.91% + 2.4px) calc(100.00% - 8.4px), calc(90.39% + 1.9px) calc(100.00% - 7.3px), calc(92.23% + 1.6px) calc(100.00% - 7.2px), calc(93.25% + 1.4px) calc(100.00% - 7.5px), calc(94.89% + 1.0px) calc(100.00% - 7.4px), calc(96.34% + 0.7px) calc(100.00% - 7.2px), calc(98.05% + 0.4px) calc(100.00% - 8.0px), calc(100.00% + 0.0px) calc(100.00% - 13.0px)); } body.has-screen .menu { top: calc(1.45rem + env(safe-area-inset-top, 0px)); right: clamp(1.2rem, 4.3vw, 3.43rem); width: auto; transform: none; flex-direction: row; align-items: baseline; gap: clamp(.73rem, 1.8vw, 1.55rem); text-shadow: none; } body.has-screen .menu a { font-size: clamp(1.07rem, 1.5vw, 1.33rem); } } /* Proyectos: una fila grande por proyecto */ .shows { display: grid; gap: clamp(3rem, 7vw, 5.5rem); } .show { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: end; } .show p { font-size: calc(1rem * var(--sec)); } .show h3 { font-family: var(--font-display); font-weight: 500; font-size: calc(clamp(2.2rem, 3.4vw, 3.1rem) * var(--sec)); line-height: 1.05; margin: 0 0 .3rem; } .show .yr { font-size: calc(1rem * var(--sec)); display: block; color: var(--muted); margin-bottom: 1rem; } @media (max-width: 860px) { .show { grid-template-columns: 1fr; } } /* Álbum: mosaico de 3, 2 o 1 columnas según el ancho */ /* Álbum: feed de Instagram incrustado */ .ig-open a { color: var(--white); text-decoration: underline 2px var(--orange); text-underline-offset: .25em; } .ig-wrap { --ig-w: 540px; width: min(100%, var(--ig-w)); margin: 0 auto; } /* --ig-w = ancho del embed. 540px es el ancho máximo que usa Instagram. Si todavía ves blanco a los lados, baja el número (480px, 440px, 400px...) hasta que el recuadro quede justo del tamaño del contenido. */ .ig-wrap.print { padding: 0; } /* sin el marco blanco de "copia impresa": ese borde sumaba más blanco */ .ig-embed { display: block; width: 100%; height: clamp(640px, 130vw, 860px); border: 0; background: #fff; } .ig-open { font-size: calc(1rem * var(--sec)); max-width: 540px; margin: 1.6rem auto 0; text-align: center; } /* Móvil: el menú queda abajo, con una barra de fondo para que se lea */ @media (max-width: 760px) { /* Móvil: en las secciones, el menú queda sobre una franja con el borde de arriba rasgado */ .torn-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; height: calc(8.1rem + 17.1px + env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .4s; filter: drop-shadow(0 -1.7px 5px rgba(0,0,0,.65)); } body.has-panel .torn-bar, body.has-screen .torn-bar { opacity: 1; } .tb-paper, .tb-dark { position: absolute; left: 0; right: 0; bottom: 0; } .tb-paper { top: 0; background: linear-gradient(180deg, #F7F4EE, #E4E0D7); clip-path: polygon(0.00% 11.3px, 1.09% 11.9px, 2.56% 11.5px, 3.90% 6.6px, 5.42% 14.9px, 7.40% 15.0px, 8.17% 9.8px, 10.03% 17.3px, 11.12% 14.4px, 12.63% 17.6px, 14.21% 15.1px, 16.08% 20.1px, 17.26% 20.8px, 18.04% 24.6px, 19.76% 18.9px, 21.04% 15.4px, 23.26% 17.7px, 24.62% 26.5px, 26.05% 28.6px, 27.50% 18.6px, 28.84% 16.6px, 30.49% 23.7px, 31.75% 21.0px, 32.59% 14.2px, 34.67% 13.5px, 35.70% 18.4px, 37.42% 16.9px, 38.64% 16.2px, 39.92% 18.7px, 41.28% 16.4px, 42.78% 16.4px, 44.08% 14.8px, 45.30% 17.4px, 47.49% 19.4px, 48.90% 16.3px, 50.53% 12.1px, 51.64% 11.8px, 52.92% 20.8px, 54.56% 25.1px, 55.32% 22.0px, 57.33% 23.9px, 58.51% 23.1px, 59.65% 21.8px, 61.11% 17.4px, 62.88% 23.9px, 64.02% 24.7px, 65.67% 29.2px, 67.26% 30.1px, 68.46% 19.0px, 69.60% 22.5px, 71.42% 16.5px, 72.57% 23.2px, 74.00% 12.0px, 75.38% 11.3px, 77.00% 4.4px, 78.11% 11.9px, 80.16% 11.3px, 81.92% 9.8px, 82.74% 13.2px, 84.52% 9.3px, 86.18% 5.1px, 86.65% 9.9px, 88.18% 12.8px, 90.33% 11.6px, 91.80% 13.8px, 93.01% 13.5px, 93.92% 11.8px, 95.62% 11.2px, 97.54% 9.7px, 98.99% 13.0px, 100.00% 2.7px, 100% 100%, 0 100%); } .tb-dark { top: 17.1px; background: var(--film-noise), #151514; clip-path: polygon(0.00% 2.1px, 1.09% 2.3px, 2.56% 2.5px, 3.90% 3.3px, 5.42% 3.9px, 7.40% 5.2px, 8.17% 0.0px, 10.03% 5.0px, 11.12% 4.1px, 12.63% 3.9px, 14.21% 3.6px, 16.08% 6.8px, 17.26% 7.6px, 18.04% 11.8px, 19.76% 7.3px, 21.04% 11.1px, 23.26% 7.3px, 24.62% 15.2px, 26.05% 16.0px, 27.50% 15.1px, 28.84% 15.0px, 30.49% 13.5px, 31.75% 11.1px, 32.59% 4.4px, 34.67% 9.8px, 35.70% 8.2px, 37.42% 7.5px, 38.64% 8.0px, 39.92% 9.2px, 41.28% 9.3px, 42.78% 8.1px, 44.08% 4.7px, 45.30% 6.6px, 47.49% 8.0px, 48.90% 8.1px, 50.53% 2.6px, 51.64% 2.3px, 52.92% 10.6px, 54.56% 19.6px, 55.32% 12.3px, 57.33% 10.8px, 58.51% 9.4px, 59.65% 10.7px, 61.11% 9.3px, 62.88% 12.3px, 64.02% 12.5px, 65.67% 16.0px, 67.26% 16.6px, 68.46% 7.0px, 69.60% 10.0px, 71.42% 6.7px, 72.57% 11.2px, 74.00% 2.0px, 75.38% 2.4px, 77.00% 0.4px, 78.11% 1.4px, 80.16% 0.4px, 81.92% 0.0px, 82.74% 4.4px, 84.52% 0.8px, 86.18% 3.6px, 86.65% 1.8px, 88.18% 3.2px, 90.33% 3.7px, 91.80% 2.8px, 93.01% 2.7px, 93.92% 1.7px, 95.62% 0.0px, 97.54% 0.0px, 98.99% 1.0px, 100.00% 0.3px, 100% 100%, 0 100%); } body[data-section="album"] .tb-paper { clip-path: polygon(0.00% 14.4px, 1.72% 13.6px, 3.08% 14.0px, 4.46% 12.2px, 5.29% 21.3px, 6.63% 10.5px, 8.45% 15.0px, 10.27% 21.8px, 11.16% 9.8px, 12.86% 15.9px, 14.09% 16.2px, 16.09% 18.5px, 17.63% 12.1px, 18.46% 17.8px, 20.54% 16.4px, 20.95% 24.1px, 23.20% 17.6px, 24.69% 16.3px, 25.34% 12.8px, 27.37% 23.1px, 28.64% 25.1px, 30.49% 28.7px, 31.11% 28.2px, 32.90% 29.9px, 34.70% 26.3px, 35.86% 24.6px, 36.94% 23.1px, 38.12% 24.3px, 40.48% 21.6px, 41.40% 19.2px, 43.40% 25.1px, 43.90% 31.4px, 46.05% 31.7px, 47.48% 29.6px, 49.03% 23.3px, 49.48% 27.2px, 51.29% 21.4px, 52.37% 20.4px, 54.56% 21.6px, 55.56% 18.0px, 57.64% 15.6px, 58.44% 8.8px, 60.30% 12.9px, 61.83% 14.0px, 62.57% 15.1px, 64.35% 15.9px, 66.21% 13.8px, 67.17% 10.9px, 68.42% 11.4px, 69.75% 14.1px, 71.74% 12.6px, 72.52% 10.0px, 74.40% 14.4px, 75.77% 15.0px, 77.20% 17.2px, 78.17% 14.9px, 80.17% 15.3px, 81.88% 16.0px, 82.66% 19.4px, 84.10% 17.5px, 86.16% 16.5px, 87.23% 15.3px, 88.32% 14.3px, 89.47% 13.0px, 91.70% 13.3px, 92.69% 4.0px, 94.25% 14.5px, 95.47% 13.2px, 97.29% 15.2px, 98.82% 11.8px, 100.00% 12.6px, 100% 100%, 0 100%); } body[data-section="album"] .tb-dark { clip-path: polygon(0.00% 3.6px, 1.72% 4.1px, 3.08% 3.7px, 4.46% 3.2px, 5.29% 9.8px, 6.63% 2.5px, 8.45% 4.7px, 10.27% 12.3px, 11.16% 0.0px, 12.86% 6.4px, 14.09% 7.8px, 16.09% 9.7px, 17.63% 9.0px, 18.46% 7.7px, 20.54% 6.5px, 20.95% 13.6px, 23.20% 6.2px, 24.69% 7.7px, 25.34% 9.1px, 27.37% 11.7px, 28.64% 14.8px, 30.49% 17.2px, 31.11% 17.3px, 32.90% 17.9px, 34.70% 15.9px, 35.86% 13.3px, 36.94% 11.2px, 38.12% 10.6px, 40.48% 9.5px, 41.40% 9.1px, 43.40% 11.8px, 43.90% 17.7px, 46.05% 19.7px, 47.48% 20.3px, 49.03% 21.0px, 49.48% 15.2px, 51.29% 18.3px, 52.37% 9.0px, 54.56% 10.5px, 55.56% 13.2px, 57.64% 5.6px, 58.44% 5.5px, 60.30% 4.2px, 61.83% 4.5px, 62.57% 5.4px, 64.35% 5.9px, 66.21% 3.6px, 67.17% 1.8px, 68.42% 2.4px, 69.75% 2.4px, 71.74% 2.8px, 72.52% 0.8px, 74.40% 2.6px, 75.77% 2.9px, 77.20% 4.1px, 78.17% 4.7px, 80.17% 5.1px, 81.88% 5.1px, 82.66% 5.6px, 84.10% 4.2px, 86.16% 5.1px, 87.23% 4.9px, 88.32% 4.2px, 89.47% 0.0px, 91.70% 3.3px, 92.69% 2.5px, 94.25% 4.3px, 95.47% 3.2px, 97.29% 4.7px, 98.82% 0.4px, 100.00% 4.6px, 100% 100%, 0 100%); } body[data-section="contact"] .tb-paper { clip-path: polygon(0.00% 16.4px, 1.12% 13.1px, 3.17% 15.4px, 4.62% 14.0px, 5.73% 15.3px, 7.15% 14.6px, 8.28% 14.8px, 9.46% 23.0px, 11.29% 14.8px, 12.95% 17.9px, 13.82% 16.9px, 16.03% 16.6px, 16.85% 18.3px, 18.28% 17.1px, 19.50% 22.7px, 21.97% 15.3px, 23.12% 3.3px, 24.69% 18.2px, 25.84% 17.1px, 26.64% 17.1px, 28.39% 18.6px, 30.00% 19.1px, 31.01% 18.9px, 33.35% 17.4px, 34.14% 8.3px, 35.34% 24.9px, 37.49% 17.1px, 38.16% 17.8px, 40.46% 21.2px, 41.38% 14.2px, 42.91% 12.0px, 44.12% 19.8px, 45.70% 21.6px, 46.80% 21.0px, 48.07% 20.3px, 50.40% 15.6px, 51.14% 21.9px, 53.16% 12.8px, 53.97% 29.7px, 56.22% 24.6px, 57.57% 26.7px, 58.85% 29.1px, 60.29% 28.2px, 61.52% 24.8px, 63.11% 17.3px, 63.88% 20.0px, 65.69% 17.8px, 67.50% 21.2px, 68.25% 14.1px, 70.46% 13.6px, 71.85% 6.1px, 72.76% 13.1px, 74.14% 8.5px, 75.66% 7.8px, 77.02% 11.9px, 79.11% 11.7px, 79.88% 11.9px, 80.91% 10.2px, 82.42% 15.5px, 84.52% 10.1px, 86.25% 12.8px, 87.14% 3.8px, 88.56% 12.0px, 90.05% 13.6px, 91.70% 13.3px, 92.56% 13.8px, 94.40% 12.4px, 95.78% 14.3px, 97.28% 13.9px, 98.22% 10.3px, 100.00% 10.3px, 100% 100%, 0 100%); } body[data-section="contact"] .tb-dark { clip-path: polygon(0.00% 5.5px, 1.12% 2.8px, 3.17% 3.9px, 4.62% 2.9px, 5.73% 4.1px, 7.15% 3.9px, 8.28% 4.7px, 9.46% 10.2px, 11.29% 5.6px, 12.95% 7.2px, 13.82% 8.3px, 16.03% 7.8px, 16.85% 7.4px, 18.28% 7.0px, 19.50% 13.0px, 21.97% 8.1px, 23.12% 1.5px, 24.69% 10.1px, 25.84% 9.5px, 26.64% 9.6px, 28.39% 10.5px, 30.00% 8.3px, 31.01% 8.1px, 33.35% 7.4px, 34.14% 0.0px, 35.34% 14.6px, 37.49% 7.2px, 38.16% 5.8px, 40.46% 8.8px, 41.38% 3.1px, 42.91% 1.2px, 44.12% 7.7px, 45.70% 8.5px, 46.80% 9.1px, 48.07% 9.5px, 50.40% 9.7px, 51.14% 9.3px, 53.16% 10.7px, 53.97% 19.0px, 56.22% 13.7px, 57.57% 15.6px, 58.85% 17.6px, 60.29% 17.4px, 61.52% 16.5px, 63.11% 14.4px, 63.88% 10.8px, 65.69% 8.4px, 67.50% 13.9px, 68.25% 4.8px, 70.46% 4.2px, 71.85% 3.6px, 72.76% 2.5px, 74.14% 0.7px, 75.66% 0.0px, 77.02% 2.1px, 79.11% 0.0px, 79.88% 0.0px, 80.91% 0.0px, 82.42% 2.9px, 84.52% 0.0px, 86.25% 0.0px, 87.14% 0.0px, 88.56% 0.0px, 90.05% 0.5px, 91.70% 0.9px, 92.56% 1.3px, 94.40% 1.5px, 95.78% 1.6px, 97.28% 0.7px, 98.22% 0.4px, 100.00% 0.3px, 100% 100%, 0 100%); } body[data-section="links"] .tb-paper { clip-path: polygon(0.00% 17.4px, 1.83% 15.6px, 3.01% 17.3px, 3.79% 16.6px, 6.21% 13.7px, 6.88% 10.7px, 8.36% 17.7px, 9.92% 10.9px, 11.52% 21.6px, 12.45% 19.7px, 14.49% 21.4px, 16.08% 23.8px, 17.16% 15.7px, 18.89% 21.9px, 20.14% 23.0px, 21.78% 23.1px, 22.51% 16.1px, 24.13% 12.5px, 25.68% 19.5px, 26.71% 20.3px, 29.09% 18.6px, 30.15% 21.0px, 30.99% 22.1px, 32.95% 23.4px, 34.19% 19.6px, 35.38% 22.4px, 36.77% 26.2px, 38.53% 30.2px, 39.53% 31.2px, 41.50% 31.1px, 42.87% 24.8px, 43.88% 28.4px, 46.12% 18.5px, 46.64% 24.9px, 48.22% 23.7px, 50.34% 17.8px, 51.13% 16.6px, 52.77% 7.7px, 54.35% 17.0px, 55.64% 19.9px, 57.14% 10.8px, 58.58% 12.4px, 59.98% 12.0px, 60.95% 15.2px, 63.20% 14.0px, 64.05% 11.1px, 65.22% 14.6px, 67.04% 11.5px, 68.91% 11.2px, 70.14% 15.9px, 71.38% 12.7px, 72.83% 12.8px, 73.98% 12.3px, 75.84% 10.9px, 76.98% 11.4px, 78.10% 13.3px, 79.60% 14.0px, 80.99% 14.7px, 83.06% 11.3px, 84.70% 15.7px, 85.99% 17.5px, 86.84% 15.4px, 88.19% 12.1px, 90.49% 11.6px, 91.29% 16.4px, 92.50% 15.5px, 94.36% 15.1px, 95.84% 16.7px, 97.19% 12.8px, 98.52% 14.1px, 100.00% 16.5px, 100% 100%, 0 100%); } body[data-section="links"] .tb-dark { clip-path: polygon(0.00% 6.6px, 1.83% 5.2px, 3.01% 8.2px, 3.79% 6.7px, 6.21% 6.2px, 6.88% 6.6px, 8.36% 7.3px, 9.92% 1.2px, 11.52% 10.9px, 12.45% 10.3px, 14.49% 12.2px, 16.08% 12.6px, 17.16% 11.6px, 18.89% 11.6px, 20.14% 12.0px, 21.78% 10.8px, 22.51% 4.2px, 24.13% 7.9px, 25.68% 8.6px, 26.71% 7.7px, 29.09% 8.2px, 30.15% 9.5px, 30.99% 8.7px, 32.95% 10.3px, 34.19% 13.3px, 35.38% 12.4px, 36.77% 15.6px, 38.53% 18.9px, 39.53% 21.9px, 41.50% 21.0px, 42.87% 14.7px, 43.88% 19.4px, 46.12% 10.6px, 46.64% 14.7px, 48.22% 12.9px, 50.34% 9.2px, 51.13% 9.1px, 52.77% 7.5px, 54.35% 7.6px, 55.64% 9.8px, 57.14% 0.0px, 58.58% 3.5px, 59.98% 2.3px, 60.95% 3.6px, 63.20% 2.3px, 64.05% 1.8px, 65.22% 2.9px, 67.04% 1.6px, 68.91% 0.3px, 70.14% 3.5px, 71.38% 0.0px, 72.83% 0.0px, 73.98% 0.2px, 75.84% 0.0px, 76.98% 0.4px, 78.10% 0.9px, 79.60% 2.1px, 80.99% 4.0px, 83.06% 5.4px, 84.70% 6.2px, 85.99% 5.2px, 86.84% 5.6px, 88.19% 5.7px, 90.49% 3.6px, 91.29% 5.3px, 92.50% 6.4px, 94.36% 5.8px, 95.84% 6.0px, 97.19% 5.5px, 98.52% 5.6px, 100.00% 5.8px, 100% 100%, 0 100%); } body.has-panel .menu a, body.has-screen .menu a { color: var(--panel-ink); text-shadow: none; } .screen-sheet { padding-bottom: calc(9.8rem + env(safe-area-inset-bottom, 0px)); } .panel .close { right: var(--lx); } } /* Contacto y enlaces */ .mail { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: calc(clamp(1.6rem, 3.4vw, 2.5rem) * var(--sec)); text-decoration: underline 3px var(--orange); text-underline-offset: .2em; word-break: break-word; } .links { list-style: none; margin: 0; padding: 0; } .links li { border-bottom: 1px solid color-mix(in srgb, var(--panel-ink) 18%, transparent); } .links a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.1rem 0; text-decoration: none; } .links a:hover .l { text-decoration: underline 2px var(--orange); text-underline-offset: .25em; } .links .l { font-family: var(--font-display); font-weight: 500; font-size: calc(1.75rem * var(--sec)); } .links .n { color: var(--muted); font-size: calc(.95rem * var(--sec)); text-align: right; } /* ========================================================= 5. MÓVIL ========================================================= */ @media (max-width: 760px) { .menu { top: auto; transform: none; left: 0; right: 0; bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px)); flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: baseline; padding: 0 1rem; gap: .25rem .7rem; } .menu a { font-size: clamp(.81rem, 3.48vw, 1.05rem); } .lang { left: 50%; transform: translateX(-50%); bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px)); } .note { display: none; } .panel { --pgr: 0px; right: 0; width: auto; max-width: none; } .panel .panel-sheet { min-width: 0; padding-right: var(--lx); padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 9rem - var(--pgb) - env(safe-area-inset-bottom, 0px)); } .panel .panel-paper { background: linear-gradient(180deg, #F7F4EE, #E4E0D7); } .panel[data-shape="contact"] .panel-sheet, .panel .panel-sheet { clip-path: polygon(0 0, 100% 0, 100.00% calc(100.00% - 0.0px), 98.18% calc(100.00% - 0.0px), 96.01% calc(100.00% - 0.0px), 94.01% calc(100.00% - 0.0px), 93.34% calc(100.00% - 0.0px), 91.35% calc(100.00% - 2.2px), 89.45% calc(100.00% - 4.3px), 87.67% calc(100.00% - 9.7px), 86.05% calc(100.00% - 14.3px), 83.38% calc(100.00% - 13.9px), 81.90% calc(100.00% - 11.5px), 80.32% calc(100.00% - 8.8px), 78.67% calc(100.00% - 12.2px), 76.40% calc(100.00% - 5.1px), 74.73% calc(100.00% - 8.0px), 72.66% calc(100.00% - 9.4px), 71.15% calc(100.00% - 13.1px), 70.12% calc(100.00% - 6.8px), 67.95% calc(100.00% - 6.9px), 66.06% calc(100.00% - 7.2px), 64.17% calc(100.00% - 11.2px), 62.22% calc(100.00% - 5.5px), 60.37% calc(100.00% - 7.8px), 58.34% calc(100.00% - 4.5px), 57.00% calc(100.00% - 12.3px), 55.16% calc(100.00% - 11.6px), 52.92% calc(100.00% - 13.4px), 51.51% calc(100.00% - 13.3px), 50.02% calc(100.00% - 13.0px), 48.54% calc(100.00% - 13.1px), 46.08% calc(100.00% - 11.5px), 44.16% calc(100.00% - 12.0px), 42.52% calc(100.00% - 9.7px), 41.29% calc(100.00% - 11.6px), 39.94% calc(100.00% - 11.4px), 38.11% calc(100.00% - 10.5px), 35.63% calc(100.00% - 10.1px), 34.46% calc(100.00% - 10.1px), 31.67% calc(100.00% - 10.8px), 29.94% calc(100.00% - 3.5px), 28.77% calc(100.00% - 3.0px), 26.15% calc(100.00% - 2.6px), 24.79% calc(100.00% - 9.7px), 22.76% calc(100.00% - 5.9px), 21.22% calc(100.00% - 8.8px), 20.00% calc(100.00% - 11.0px), 18.29% calc(100.00% - 14.7px), 15.89% calc(100.00% - 14.1px), 14.55% calc(100.00% - 11.5px), 11.85% calc(100.00% - 10.3px), 10.30% calc(100.00% - 10.6px), 8.32% calc(100.00% - 7.1px), 6.74% calc(100.00% - 8.6px), 5.04% calc(100.00% - 8.2px), 4.25% calc(100.00% - 9.5px), 2.22% calc(100.00% - 8.1px), 0.00% calc(100.00% - 7.4px)); } .panel[data-shape="contact"] .panel-paper, .panel .panel-paper { clip-path: polygon(0.00% calc(100.00% - 21.1px), 2.22% calc(100.00% - 23.2px), 4.25% calc(100.00% - 20.6px), 5.04% calc(100.00% - 21.5px), 6.74% calc(100.00% - 20.9px), 8.32% calc(100.00% - 19.1px), 10.30% calc(100.00% - 13.8px), 11.85% calc(100.00% - 22.9px), 14.55% calc(100.00% - 22.2px), 15.89% calc(100.00% - 24.8px), 18.29% calc(100.00% - 22.7px), 20.00% calc(100.00% - 23.6px), 21.22% calc(100.00% - 17.7px), 22.76% calc(100.00% - 16.3px), 24.79% calc(100.00% - 19.8px), 26.15% calc(100.00% - 16.2px), 28.77% calc(100.00% - 13.1px), 29.94% calc(100.00% - 15.1px), 31.67% calc(100.00% - 24.2px), 34.46% calc(100.00% - 23.2px), 35.63% calc(100.00% - 24.2px), 38.11% calc(100.00% - 24.1px), 39.94% calc(100.00% - 14.4px), 41.29% calc(100.00% - 27.5px), 42.52% calc(100.00% - 21.6px), 44.16% calc(100.00% - 27.0px), 46.08% calc(100.00% - 26.1px), 48.54% calc(100.00% - 27.1px), 50.02% calc(100.00% - 27.5px), 51.51% calc(100.00% - 27.1px), 52.92% calc(100.00% - 25.8px), 55.16% calc(100.00% - 24.2px), 57.00% calc(100.00% - 25.1px), 58.34% calc(100.00% - 16.9px), 60.37% calc(100.00% - 19.9px), 62.22% calc(100.00% - 16.7px), 64.17% calc(100.00% - 20.6px), 66.06% calc(100.00% - 17.0px), 67.95% calc(100.00% - 16.7px), 70.12% calc(100.00% - 18.8px), 71.15% calc(100.00% - 22.3px), 72.66% calc(100.00% - 20.2px), 74.73% calc(100.00% - 21.7px), 76.40% calc(100.00% - 17.9px), 78.67% calc(100.00% - 24.8px), 80.32% calc(100.00% - 20.7px), 81.90% calc(100.00% - 25.4px), 83.38% calc(100.00% - 29.2px), 86.05% calc(100.00% - 28.9px), 87.67% calc(100.00% - 22.5px), 89.45% calc(100.00% - 17.0px), 91.35% calc(100.00% - 14.2px), 93.34% calc(100.00% - 13.8px), 94.01% calc(100.00% - 14.8px), 96.01% calc(100.00% - 12.2px), 98.18% calc(100.00% - 13.8px), 100.00% calc(100.00% - 10.2px), 100.00% calc(100.00% - 34.0px), 98.18% calc(100.00% - 34.0px), 96.01% calc(100.00% - 34.0px), 94.01% calc(100.00% - 34.0px), 93.34% calc(100.00% - 34.0px), 91.35% calc(100.00% - 36.2px), 89.45% calc(100.00% - 38.3px), 87.67% calc(100.00% - 43.7px), 86.05% calc(100.00% - 48.3px), 83.38% calc(100.00% - 47.9px), 81.90% calc(100.00% - 45.5px), 80.32% calc(100.00% - 42.8px), 78.67% calc(100.00% - 46.2px), 76.40% calc(100.00% - 39.1px), 74.73% calc(100.00% - 42.0px), 72.66% calc(100.00% - 43.4px), 71.15% calc(100.00% - 47.1px), 70.12% calc(100.00% - 40.8px), 67.95% calc(100.00% - 40.9px), 66.06% calc(100.00% - 41.2px), 64.17% calc(100.00% - 45.2px), 62.22% calc(100.00% - 39.5px), 60.37% calc(100.00% - 41.8px), 58.34% calc(100.00% - 38.5px), 57.00% calc(100.00% - 46.3px), 55.16% calc(100.00% - 45.6px), 52.92% calc(100.00% - 47.4px), 51.51% calc(100.00% - 47.3px), 50.02% calc(100.00% - 47.0px), 48.54% calc(100.00% - 47.1px), 46.08% calc(100.00% - 45.5px), 44.16% calc(100.00% - 46.0px), 42.52% calc(100.00% - 43.7px), 41.29% calc(100.00% - 45.6px), 39.94% calc(100.00% - 45.4px), 38.11% calc(100.00% - 44.5px), 35.63% calc(100.00% - 44.1px), 34.46% calc(100.00% - 44.1px), 31.67% calc(100.00% - 44.8px), 29.94% calc(100.00% - 37.5px), 28.77% calc(100.00% - 37.0px), 26.15% calc(100.00% - 36.6px), 24.79% calc(100.00% - 43.7px), 22.76% calc(100.00% - 39.9px), 21.22% calc(100.00% - 42.8px), 20.00% calc(100.00% - 45.0px), 18.29% calc(100.00% - 48.7px), 15.89% calc(100.00% - 48.1px), 14.55% calc(100.00% - 45.5px), 11.85% calc(100.00% - 44.3px), 10.30% calc(100.00% - 44.6px), 8.32% calc(100.00% - 41.1px), 6.74% calc(100.00% - 42.6px), 5.04% calc(100.00% - 42.2px), 4.25% calc(100.00% - 43.5px), 2.22% calc(100.00% - 42.1px), 0.00% calc(100.00% - 41.4px)); } .panel[data-shape="links"] .panel-sheet { clip-path: polygon(0 0, 100% 0, 100.00% calc(100.00% - 8.3px), 98.10% calc(100.00% - 9.2px), 96.66% calc(100.00% - 7.2px), 94.33% calc(100.00% - 9.4px), 93.38% calc(100.00% - 4.4px), 90.73% calc(100.00% - 5.1px), 88.70% calc(100.00% - 5.0px), 87.61% calc(100.00% - 0.0px), 85.87% calc(100.00% - 6.8px), 83.46% calc(100.00% - 6.4px), 81.89% calc(100.00% - 9.0px), 80.03% calc(100.00% - 10.8px), 78.26% calc(100.00% - 8.7px), 77.39% calc(100.00% - 7.9px), 74.90% calc(100.00% - 3.9px), 73.29% calc(100.00% - 4.5px), 71.39% calc(100.00% - 4.7px), 69.86% calc(100.00% - 4.2px), 68.02% calc(100.00% - 2.2px), 66.28% calc(100.00% - 4.1px), 64.71% calc(100.00% - 5.1px), 62.32% calc(100.00% - 6.2px), 60.21% calc(100.00% - 10.4px), 59.50% calc(100.00% - 11.5px), 57.22% calc(100.00% - 18.0px), 55.53% calc(100.00% - 21.0px), 53.87% calc(100.00% - 22.3px), 52.34% calc(100.00% - 19.3px), 49.63% calc(100.00% - 18.9px), 47.97% calc(100.00% - 16.4px), 46.56% calc(100.00% - 17.8px), 45.24% calc(100.00% - 18.5px), 42.80% calc(100.00% - 19.2px), 40.82% calc(100.00% - 18.7px), 39.87% calc(100.00% - 17.8px), 37.07% calc(100.00% - 14.7px), 35.81% calc(100.00% - 18.6px), 33.72% calc(100.00% - 7.5px), 32.49% calc(100.00% - 15.3px), 29.71% calc(100.00% - 14.6px), 28.95% calc(100.00% - 14.4px), 26.33% calc(100.00% - 11.6px), 24.93% calc(100.00% - 14.1px), 22.85% calc(100.00% - 8.6px), 21.97% calc(100.00% - 0.0px), 19.81% calc(100.00% - 10.3px), 17.82% calc(100.00% - 12.5px), 16.49% calc(100.00% - 12.9px), 14.02% calc(100.00% - 15.0px), 12.03% calc(100.00% - 26.9px), 10.11% calc(100.00% - 12.5px), 9.36% calc(100.00% - 9.6px), 6.88% calc(100.00% - 11.7px), 4.94% calc(100.00% - 8.8px), 3.77% calc(100.00% - 7.3px), 1.17% calc(100.00% - 8.3px), 0.00% calc(100.00% - 6.9px)); } .panel[data-shape="links"] .panel-paper { clip-path: polygon(0.00% calc(100.00% - 23.2px), 1.17% calc(100.00% - 16.9px), 3.77% calc(100.00% - 21.0px), 4.94% calc(100.00% - 20.8px), 6.88% calc(100.00% - 26.5px), 9.36% calc(100.00% - 23.7px), 10.11% calc(100.00% - 24.7px), 12.03% calc(100.00% - 37.3px), 14.02% calc(100.00% - 28.0px), 16.49% calc(100.00% - 24.9px), 17.82% calc(100.00% - 24.8px), 19.81% calc(100.00% - 21.5px), 21.97% calc(100.00% - 8.3px), 22.85% calc(100.00% - 19.3px), 24.93% calc(100.00% - 23.8px), 26.33% calc(100.00% - 20.8px), 28.95% calc(100.00% - 26.9px), 29.71% calc(100.00% - 25.5px), 32.49% calc(100.00% - 26.8px), 33.72% calc(100.00% - 20.4px), 35.81% calc(100.00% - 33.3px), 37.07% calc(100.00% - 27.0px), 39.87% calc(100.00% - 30.0px), 40.82% calc(100.00% - 26.6px), 42.80% calc(100.00% - 35.6px), 45.24% calc(100.00% - 31.4px), 46.56% calc(100.00% - 30.4px), 47.97% calc(100.00% - 30.1px), 49.63% calc(100.00% - 31.8px), 52.34% calc(100.00% - 34.2px), 53.87% calc(100.00% - 35.6px), 55.53% calc(100.00% - 31.7px), 57.22% calc(100.00% - 28.4px), 59.50% calc(100.00% - 23.1px), 60.21% calc(100.00% - 20.5px), 62.32% calc(100.00% - 16.6px), 64.71% calc(100.00% - 14.4px), 66.28% calc(100.00% - 3.4px), 68.02% calc(100.00% - 13.4px), 69.86% calc(100.00% - 15.5px), 71.39% calc(100.00% - 16.5px), 73.29% calc(100.00% - 16.9px), 74.90% calc(100.00% - 16.3px), 77.39% calc(100.00% - 20.8px), 78.26% calc(100.00% - 19.3px), 80.03% calc(100.00% - 25.6px), 81.89% calc(100.00% - 24.5px), 83.46% calc(100.00% - 22.1px), 85.87% calc(100.00% - 21.2px), 87.61% calc(100.00% - 15.3px), 88.70% calc(100.00% - 20.5px), 90.73% calc(100.00% - 18.4px), 93.38% calc(100.00% - 20.3px), 94.33% calc(100.00% - 23.6px), 96.66% calc(100.00% - 20.1px), 98.10% calc(100.00% - 20.9px), 100.00% calc(100.00% - 21.1px), 100.00% calc(100.00% - 42.3px), 98.10% calc(100.00% - 43.2px), 96.66% calc(100.00% - 41.2px), 94.33% calc(100.00% - 43.4px), 93.38% calc(100.00% - 38.4px), 90.73% calc(100.00% - 39.1px), 88.70% calc(100.00% - 39.0px), 87.61% calc(100.00% - 34.0px), 85.87% calc(100.00% - 40.8px), 83.46% calc(100.00% - 40.4px), 81.89% calc(100.00% - 43.0px), 80.03% calc(100.00% - 44.8px), 78.26% calc(100.00% - 42.7px), 77.39% calc(100.00% - 41.9px), 74.90% calc(100.00% - 37.9px), 73.29% calc(100.00% - 38.5px), 71.39% calc(100.00% - 38.7px), 69.86% calc(100.00% - 38.2px), 68.02% calc(100.00% - 36.2px), 66.28% calc(100.00% - 38.1px), 64.71% calc(100.00% - 39.1px), 62.32% calc(100.00% - 40.2px), 60.21% calc(100.00% - 44.4px), 59.50% calc(100.00% - 45.5px), 57.22% calc(100.00% - 52.0px), 55.53% calc(100.00% - 55.0px), 53.87% calc(100.00% - 56.3px), 52.34% calc(100.00% - 53.3px), 49.63% calc(100.00% - 52.9px), 47.97% calc(100.00% - 50.4px), 46.56% calc(100.00% - 51.8px), 45.24% calc(100.00% - 52.5px), 42.80% calc(100.00% - 53.2px), 40.82% calc(100.00% - 52.7px), 39.87% calc(100.00% - 51.8px), 37.07% calc(100.00% - 48.7px), 35.81% calc(100.00% - 52.6px), 33.72% calc(100.00% - 41.5px), 32.49% calc(100.00% - 49.3px), 29.71% calc(100.00% - 48.6px), 28.95% calc(100.00% - 48.4px), 26.33% calc(100.00% - 45.6px), 24.93% calc(100.00% - 48.1px), 22.85% calc(100.00% - 42.6px), 21.97% calc(100.00% - 34.0px), 19.81% calc(100.00% - 44.3px), 17.82% calc(100.00% - 46.5px), 16.49% calc(100.00% - 46.9px), 14.02% calc(100.00% - 49.0px), 12.03% calc(100.00% - 60.9px), 10.11% calc(100.00% - 46.5px), 9.36% calc(100.00% - 43.6px), 6.88% calc(100.00% - 45.7px), 4.94% calc(100.00% - 42.8px), 3.77% calc(100.00% - 41.3px), 1.17% calc(100.00% - 42.3px), 0.00% calc(100.00% - 40.9px)); } .panel-edge { filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); } } @media (prefers-reduced-motion: reduce) { .name, .menu, .lang, .note { animation: none; } } /* ---- SEO / accesibilidad ---- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .noscript-box { position: fixed; inset: 0; z-index: 20; overflow: auto; padding: 2rem clamp(1.4rem, 6vw, 4rem); background: var(--film-bg); color: var(--white); font-family: var(--font-body); line-height: 1.6; } .noscript-box h1 { font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; margin: 0 0 1rem; } .noscript-box a { color: var(--white); text-decoration: underline 2px var(--orange); text-underline-offset: .25em; } .noscript-box ul { padding-left: 1.2rem; }