@font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cinzel-decorative-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cinzel-decorative-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('../recursos/tipografias/cinzel-decorative-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('../recursos/tipografias/cinzel-decorative-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-600-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-300-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/im-fell-english-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url('../recursos/tipografias/im-fell-english-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 92%; ascent-override: 88%; descent-override: 22%; } @font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 98%; ascent-override: 90%; descent-override: 22%; } @font-face { font-family: 'IM Fell Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 96%; ascent-override: 88%; descent-override: 22%; } :root { --color-negro: #0a0605; --color-negro-profundo: #060302; --color-carbon: #120c07; --color-tierra: #241a0e; --color-vino: #5c1220; --color-sangre: #8e1f30; --color-sangre-viva: #c0181a; --color-rubi: #a02538; --color-oro: #c1a049; --color-oro-claro: #dcc079; --color-oro-brillante: #e8d290; --color-oro-apagado: #6e5824; --color-oro-sombra: #4a3818; --color-oro-texto: #c1a049; --color-marfil: #f5efe6; --color-marfil-apagado: #ddd5c8; --borde-oro-tenue: rgba(201, 168, 76, .35); --borde-oro-fuerte: rgba(201, 168, 76, .75); --tipo-titulos: 'Cinzel Decorative', 'Cinzel Fallback', serif; --tipo-texto: 'Cormorant Garamond', 'Cormorant Fallback', serif; --tipo-detalle: 'IM Fell English', 'IM Fell Fallback', serif; --marco-grosor: clamp(20px, 3.4vw, 72px); --marco-esquina: calc(var(--marco-grosor) * 2.2222); --ancho-contenido: 860px; --alto-reproductor: 176px; --curva-elegante: cubic-bezier(.22, .61, .36, 1); --luz-x: 0.5; --luz-intensidad: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--color-oro-apagado) var(--color-negro-profundo); overflow-x: hidden; overflow-x: clip; overflow-anchor: none; } ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--color-negro-profundo); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--color-oro-apagado), var(--color-oro-sombra)); border: 2px solid var(--color-negro-profundo); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-oro); } body { position: relative; background: var(--color-negro); color: var(--color-marfil); font-family: var(--tipo-texto); font-size: 18px; line-height: 1.7; overflow-x: hidden; overflow-x: clip; } p { color: var(--color-marfil-apagado); margin-bottom: 1rem; } h2 { font-family: var(--tipo-titulos); font-size: clamp(1.6rem, 4vw, 2.5rem); color: var(--color-oro-claro); text-align: center; margin-bottom: 2rem; font-weight: 400; } .rotulo-de-seccion { display: block; font-family: var(--tipo-detalle); font-size: .85rem; letter-spacing: .46em; text-indent: .46em; text-transform: uppercase; color: var(--color-oro); text-align: center; margin-bottom: .75rem; } #capa-fondo { position: fixed; top: 0; left: 0; width: 100%; height: 125vh; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='0.02'/%3E%3C/svg%3E"), var(--velo-de-la-hora, linear-gradient(transparent, transparent)), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../recursos/fondo-ornamental.svg'); background-size: auto, cover, cover, cover; background-position: center, center, center, center; background-repeat: repeat, no-repeat, no-repeat, no-repeat; will-change: transform; } .divisor { display: flex; align-items: center; gap: 1rem; margin: 2.5rem auto; max-width: 500px; color: var(--color-oro); } .divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-oro-apagado), transparent); } .divisor span { font-size: 1.2rem; white-space: nowrap; } .marco-ornamental { position: relative; border: 1px solid rgba(201, 168, 76, .5); box-shadow: inset 0 0 30px rgba(201, 168, 76, .05), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(196, 150, 70, .12); } .marco-ornamental::before, .marco-ornamental::after { content: '✦'; position: absolute; left: 50%; transform: translateX(-50%); color: var(--color-oro); font-size: 1rem; background: var(--color-carbon); padding: 0 .5rem; } .marco-ornamental::before { top: -.6rem; } .marco-ornamental::after { bottom: -.6rem; } .boton-dorado, .boton-carmesi { position: relative; overflow: hidden; isolation: isolate; } .boton-dorado::after, .boton-carmesi::after { content: ''; position: absolute; top: -60%; left: 0; width: 34%; height: 220%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(-320%) skewX(-18deg); animation: barrido-especular 9s var(--retardo-del-destello, 0s) ease-in-out infinite; } @keyframes barrido-especular { 0%, 88% { transform: translateX(-320%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } } .boton-dorado:hover::after, .boton-carmesi:hover::after { animation: barrido-especular 1.1s ease-out; } .boton-dorado { display: inline-block; padding: .75rem 2.5rem; background: linear-gradient(135deg, var(--color-oro-apagado), var(--color-oro), var(--color-oro-apagado)); background-size: 200%; color: var(--color-negro); font-family: var(--tipo-detalle); font-size: .95rem; letter-spacing: .1em; text-decoration: none; border: none; transition: background-position .4s, transform .2s, box-shadow .3s; } .boton-dorado:hover { background-position: right; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201, 168, 76, .3); } .boton-carmesi { display: block; width: 100%; padding: 1rem 2rem; background: linear-gradient(135deg, #3d0d15, #6e1622); color: var(--color-marfil); font-family: var(--tipo-titulos); font-size: 1rem; letter-spacing: .1em; border: 1px solid rgba(140, 32, 42, .55); transition: all .3s; margin-top: 2rem; } .boton-carmesi:hover { background: linear-gradient(135deg, #55131d, #872030); box-shadow: 0 8px 30px rgba(110, 22, 34, .45); transform: translateY(-2px); } .boton-carmesi:disabled { opacity: .5; transform: none; } .boton-contorno { padding: .6rem 1.5rem; font-family: var(--tipo-detalle); font-size: .85rem; letter-spacing: .1em; background: transparent; border: 1px solid var(--borde-oro-tenue); color: var(--color-marfil-apagado); transition: all .25s; } .boton-contorno:hover { border-color: var(--color-oro); color: var(--color-oro); } .icono-dorado { width: 1.05em; height: 1.05em; vertical-align: -.18em; flex-shrink: 0; fill: none; stroke: url(#oro-icono); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .icono-dorado--grande { width: 3rem; height: 3rem; stroke-width: 1.1; } .rosa-inline { width: 1.15em; height: 1.15em; vertical-align: -.24em; } .revelar { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--curva-elegante), transform .8s var(--curva-elegante); } .revelar.visible { opacity: 1; transform: translateY(0); } @keyframes aparecer-desde-abajo { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes latido-suave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .solo-lectores-de-pantalla { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #boton-animaciones { position: fixed; top: calc(var(--marco-grosor) + .6rem); left: calc(var(--marco-grosor) + .6rem); z-index: 2500; display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .6rem .34rem .44rem; background: var(--color-carbon, #14100a); border: 1px solid var(--borde-oro-tenue); border-radius: 999px; color: var(--color-oro-apagado); font-family: var(--tipo-detalle); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1; cursor: pointer; opacity: .75; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); transition: opacity .25s, color .25s, border-color .25s; } #boton-animaciones:hover, #boton-animaciones:focus-visible { opacity: 1; color: var(--color-oro); border-color: var(--color-oro-apagado); } .boton-animaciones__icono { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; } #boton-animaciones.esta-apagado { color: var(--color-oro-apagado); } #boton-animaciones.esta-apagado .chispa-chica { display: none; } #boton-animaciones.esta-apagado .boton-animaciones__icono { position: relative; opacity: .6; } #boton-animaciones.esta-apagado::after { content: ''; position: absolute; left: .5rem; width: 1rem; height: 1.5px; background: currentColor; transform: rotate(-45deg); opacity: .85; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } html.animaciones-off *, html.animaciones-off *::before, html.animaciones-off *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.animaciones-off .portada__antetitulo, html.animaciones-off .portada__filete, html.animaciones-off .portada__nombre, html.animaciones-off .portada__edad, html.animaciones-off .portada__fecha, html.animaciones-off .portada__desliza, html.animaciones-off .portada__marco, html.animaciones-off .sobre__carta, html.animaciones-off .revelar { opacity: 1 !important; transform: none !important; } html.animaciones-off #haces-de-luz, html.animaciones-off #motas-de-polvo, html.animaciones-off .lluvia-de-petalos, html.animaciones-off #velo-de-revelado { display: none !important; } html.animaciones-off, html.animaciones-off * { cursor: auto !important; } html.animaciones-off #cursor-punto, html.animaciones-off #cursor-anillo { display: none !important; } #marco-victoriano { position: absolute; inset: 0; z-index: 60; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 0, 0, .75); } #marco-victoriano::after { content: ''; position: absolute; inset: 45% 0 0 0; pointer-events: none; background-image: radial-gradient(ellipse 8% 4% at 2% 1.0%, rgba(74, 92, 44, .09) 0%, transparent 70%), radial-gradient(ellipse 6% 5% at 98% 9.1%, rgba(66, 84, 40, .12) 0%, transparent 70%), radial-gradient(ellipse 7% 3% at 1% 41.8%, rgba(80, 96, 50, .18) 0%, transparent 70%), radial-gradient(ellipse 9% 4% at 99% 63.6%, rgba(70, 88, 44, .20) 0%, transparent 70%), radial-gradient(ellipse 12% 5% at 4% 16.4%, rgba(58, 40, 22, .12) 40%, rgba(46, 32, 18, .06) 75%, transparent 92%), radial-gradient(ellipse 10% 6% at 96% 41.8%, rgba(54, 38, 20, .18) 40%, rgba(44, 30, 16, .09) 75%, transparent 92%), radial-gradient(ellipse 14% 4% at 50% 81.8%, rgba(50, 36, 20, .24) 40%, rgba(40, 28, 16, .12) 75%, transparent 92%), radial-gradient(circle 2px at 1.1% 30.9%, rgba(16, 9, 5, .62) 0 70%, transparent 100%), radial-gradient(circle 2px at 1.9% 34.5%, rgba(16, 9, 5, .55) 0 70%, transparent 100%), radial-gradient(circle 1px at 1.4% 38.2%, rgba(16, 9, 5, .58) 0 70%, transparent 100%), radial-gradient(circle 2px at 98.8% 47.3%, rgba(16, 9, 5, .60) 0 70%, transparent 100%), radial-gradient(circle 1px at 99.4% 50.9%, rgba(16, 9, 5, .52) 0 70%, transparent 100%), radial-gradient(circle 2px at 98.5% 70.9%, rgba(16, 9, 5, .64) 0 70%, transparent 100%), radial-gradient(circle 2px at 1.6% 78.2%, rgba(16, 9, 5, .64) 0 70%, transparent 100%), radial-gradient(circle 1px at 1.0% 81.8%, rgba(16, 9, 5, .50) 0 70%, transparent 100%), radial-gradient(ellipse 5px 3px at 1.5% 41.8%, rgba(112, 48, 24, .50) 0 75%, transparent 100%), radial-gradient(ellipse 4px 6px at 98.9% 60.0%, rgba(112, 48, 24, .46) 0 75%, transparent 100%), radial-gradient(ellipse 7px 3px at 1.2% 87.3%, rgba(104, 44, 22, .55) 0 75%, transparent 100%), radial-gradient(ellipse 6px 4px at 99.1% 90.9%, rgba(104, 44, 22, .52) 0 75%, transparent 100%), radial-gradient(ellipse 40px 2px at 28% 99.3%, rgba(108, 46, 22, .40) 0 80%, transparent 100%), radial-gradient(ellipse 60px 2px at 67% 99.5%, rgba(108, 46, 22, .36) 0 80%, transparent 100%), linear-gradient(to bottom, transparent 0%, rgba(42, 32, 20, .07) 18%, rgba(36, 28, 18, .14) 55%, rgba(30, 24, 16, .22) 100%); } html.calidad-baja #marco-victoriano::after { display: none; } .marco__cenefa { position: absolute; left: var(--marco-esquina); right: var(--marco-esquina); height: var(--marco-grosor); background-image: url('../recursos/marco-borde-horizontal.svg'); background-repeat: repeat-x; background-size: auto 100%; } .marco__cenefa--superior { top: 0; } .marco__cenefa--inferior { bottom: 0; transform: scaleY(-1); } .marco__riel { position: absolute; top: var(--marco-esquina); bottom: var(--marco-esquina); width: var(--marco-grosor); background-image: url('../recursos/marco-borde-vertical.svg'); background-repeat: repeat-y; background-size: 100% auto; } .marco__riel--izquierdo { left: 0; } .marco__riel--derecho { right: 0; transform: scaleX(-1); } .marco__esquina { position: absolute; width: var(--marco-esquina); height: var(--marco-esquina); background-image: url('../recursos/marco-esquina.svg'); background-repeat: no-repeat; background-size: 100% 100%; } .marco__esquina--superior-izquierda { top: 0; left: 0; } .marco__esquina--superior-derecha { top: 0; right: 0; transform: scaleX(-1); } .marco__esquina--inferior-izquierda { bottom: 0; left: 0; transform: scaleY(-1); } .marco__esquina--inferior-derecha { bottom: 0; right: 0; transform: scale(-1, -1); } .marco__enredadera { position: absolute; top: 0; bottom: 0; width: calc(var(--marco-grosor) * 2.4); z-index: 2; pointer-events: none; } .marco__enredadera--izquierda { left: 0; } .marco__enredadera--derecha { right: 0; transform: scaleX(-1); } .racimo-de-rosas { display: block; width: 100%; height: auto; transform-origin: 50% 100%; overflow: visible; } @media (max-width: 720px) { .marco__enredadera { width: calc(var(--marco-grosor) * 2); } } .marco__ramillete { position: absolute; top: calc(var(--marco-grosor) * .35); width: min(36vw, 620px); z-index: 3; pointer-events: none; } .marco__ramillete--izquierdo { left: calc(var(--marco-grosor) * .35); } .marco__ramillete--derecho { right: calc(var(--marco-grosor) * .35); transform: scaleX(-1); } .racimo-de-rosas--esquina { transform-origin: 0% 0%; } @media (max-width: 720px) { .marco__ramillete { width: min(44vw, 200px); } } #contenido, #pie-de-pagina { position: relative; padding-left: calc(var(--marco-grosor) + 1.2rem); padding-right: calc(var(--marco-grosor) + 1.2rem); } #pie-de-pagina { z-index: 2; } #contenido { padding-top: var(--marco-grosor); } #pie-de-pagina { padding-bottom: calc(var(--marco-grosor) + var(--alto-reproductor)); } .tono-0 { --pet-cara: url(#rosa-pet-cara-t0); --pet-media: url(#rosa-pet-media-t0); --pet-interior: url(#rosa-pet-interior-t0); --pet-dorso: url(#rosa-pet-dorso-t0); --caliz: url(#rosa-caliz-t0); } .tono-1 { --pet-cara: url(#rosa-pet-cara-t1); --pet-media: url(#rosa-pet-media-t1); --pet-interior: url(#rosa-pet-interior-t1); --pet-dorso: url(#rosa-pet-dorso-t1); --caliz: url(#rosa-caliz-t1); } .tono-2 { --pet-cara: url(#rosa-pet-cara-t2); --pet-media: url(#rosa-pet-media-t2); --pet-interior: url(#rosa-pet-interior-t2); --pet-dorso: url(#rosa-pet-dorso-t2); --caliz: url(#rosa-caliz-t2); } .tono-3 { --pet-cara: url(#rosa-pet-cara-t3); --pet-media: url(#rosa-pet-media-t3); --pet-interior: url(#rosa-pet-interior-t3); --pet-dorso: url(#rosa-pet-dorso-t3); --caliz: url(#rosa-caliz-t3); } .tono-4 { --pet-cara: url(#rosa-pet-cara-t4); --pet-media: url(#rosa-pet-media-t4); --pet-interior: url(#rosa-pet-interior-t4); --pet-dorso: url(#rosa-pet-dorso-t4); --caliz: url(#rosa-caliz-t4); } .tono-5 { --pet-cara: url(#rosa-pet-cara-t5); --pet-media: url(#rosa-pet-media-t5); --pet-interior: url(#rosa-pet-interior-t5); --pet-dorso: url(#rosa-pet-dorso-t5); --caliz: url(#rosa-caliz-t5); } .tono-6 { --pet-cara: url(#rosa-pet-cara-t6); --pet-media: url(#rosa-pet-media-t6); --pet-interior: url(#rosa-pet-interior-t6); --pet-dorso: url(#rosa-pet-dorso-t6); --caliz: url(#rosa-caliz-t6); } .tono-7 { --pet-cara: url(#rosa-pet-cara-t7); --pet-media: url(#rosa-pet-media-t7); --pet-interior: url(#rosa-pet-interior-t7); --pet-dorso: url(#rosa-pet-dorso-t7); --caliz: url(#rosa-caliz-t7); } .tono-8 { --pet-cara: url(#rosa-pet-cara-t8); --pet-media: url(#rosa-pet-media-t8); --pet-interior: url(#rosa-pet-interior-t8); --pet-dorso: url(#rosa-pet-dorso-t8); --caliz: url(#rosa-caliz-t8); } .tono-9 { --pet-cara: url(#rosa-pet-cara-t9); --pet-media: url(#rosa-pet-media-t9); --pet-interior: url(#rosa-pet-interior-t9); --pet-dorso: url(#rosa-pet-dorso-t9); --caliz: url(#rosa-caliz-t9); } .tono-10 { --pet-cara: url(#rosa-pet-cara-t10); --pet-media: url(#rosa-pet-media-t10); --pet-interior: url(#rosa-pet-interior-t10); --pet-dorso: url(#rosa-pet-dorso-t10); --caliz: url(#rosa-caliz-t10); } .tono-11 { --pet-cara: url(#rosa-pet-cara-t11); --pet-media: url(#rosa-pet-media-t11); --pet-interior: url(#rosa-pet-interior-t11); --pet-dorso: url(#rosa-pet-dorso-t11); --caliz: url(#rosa-caliz-t11); } #sobre-de-apertura { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; text-align: center; background: radial-gradient(ellipse 70% 55% at 50% 40%, #1c1109 0%, #0a0605 55%, #050302 100%); transition: opacity 1.1s var(--curva-elegante), visibility 1.1s; } html.sobre-visible, body.sobre-visible { overflow: hidden; } #sobre-de-apertura.oculto { opacity: 0; visibility: hidden; pointer-events: none; } .sobre__monograma { width: 130px; height: 130px; } .sobre__monograma path { fill: none; stroke: var(--color-oro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: dibujar-trazo 2.6s var(--curva-elegante) infinite; } @keyframes dibujar-trazo { 0% { stroke-dashoffset: 620; opacity: .25; } 45% { stroke-dashoffset: 0; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -620; opacity: .25; } } .sobre__cargando { font-family: var(--tipo-detalle); font-size: .8rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-oro-apagado); } #sobre-de-apertura:not(.esta-cargando) .sobre__precarga { display: none; } #sobre-de-apertura.esta-cargando .sobre__carta { display: none; } .sobre__carta { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; animation: aparecer-desde-abajo 1s var(--curva-elegante) both; } .sobre__ilustracion { width: min(84vw, 440px); height: auto; transition: transform .5s var(--curva-elegante), filter .5s; } .sobre__ilustracion:hover { transform: translateY(-5px); filter: brightness(1.06); } .sobre__ilustracion:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 10px; } .sobre__solapa { transform-box: view-box; transform-origin: 220px 72px; transition: transform 1s var(--curva-elegante); } .sobre__sello { transform-box: view-box; transform-origin: 220px 152px; animation: latir-sello 2.8s ease-in-out infinite; } @keyframes latir-sello { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(192,24,26,0)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(192,24,26,.5)); } } .sobre__saludo { font-family: var(--tipo-titulos); font-size: clamp(1.1rem, 3.4vw, 1.6rem); color: var(--color-oro-claro); margin: 0; text-shadow: 0 0 30px rgba(201, 168, 76, .3); } .sobre__indicacion { font-family: var(--tipo-detalle); font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: var(--color-oro-apagado); margin: 0; } .sobre__indicacion { animation: respirar-indicacion 3s ease-in-out infinite; } @keyframes respirar-indicacion { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } #sobre-de-apertura.se-esta-abriendo .sobre__sello { animation: romper-sello .8s var(--curva-elegante) forwards; } @keyframes romper-sello { 0% { transform: scale(1) rotate(0) translateY(0); opacity: 1; } 35% { transform: scale(1.25) rotate(-14deg) translateY(-6px); opacity: 1; } 100% { transform: scale(.6) rotate(60deg) translateY(120px); opacity: 0; } } #sobre-de-apertura.se-esta-abriendo .sobre__solapa { transform: rotateX(-172deg); } #sobre-de-apertura.se-esta-abriendo .sobre__ilustracion { animation: entrar-en-el-sobre 1.15s .35s var(--curva-elegante) forwards; } @keyframes entrar-en-el-sobre { to { transform: scale(2.4) translateY(6%); opacity: 0; } } #sobre-de-apertura.se-esta-abriendo .sobre__saludo, #sobre-de-apertura.se-esta-abriendo .sobre__indicacion { animation: desvanecer-hacia-abajo .5s var(--curva-elegante) forwards; } @keyframes desvanecer-hacia-abajo { to { opacity: 0; transform: translateY(18px); } } #portada { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(5rem, 14vh, 11rem) 1rem 3rem; overflow: hidden; } #portada::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--ambiente-alto, rgba(139, 0, 0, .25)) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 100%, rgba(139, 0, 0, .15) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 100%, rgba(201, 168, 76, .08) 0%, transparent 70%); } .portada__broche { --ancho-broche: min(94vw, 1120px, 78vh); display: grid; place-items: center; width: var(--ancho-broche); position: relative; z-index: 2; } .portada__broche > * { grid-area: 1 / 1; } .portada__brillo-oro { z-index: 3; pointer-events: none; border-radius: 50%; mix-blend-mode: overlay; background-image: linear-gradient( 108deg, transparent 34%, rgba(255, 240, 205, .55) 47%, rgba(255, 248, 225, .75) 50%, rgba(255, 240, 205, .55) 53%, transparent 66%); background-size: 260% 100%; background-repeat: no-repeat; background-position: calc(var(--luz-x) * 100%) 0; opacity: calc(var(--luz-intensidad) * 1.6); transition: opacity .3s linear; } @media (prefers-reduced-motion: reduce) { .portada__brillo-oro { display: none; } } .portada__marco { width: 100%; height: auto; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 45px rgba(201, 168, 76, .16)) drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); will-change: opacity; opacity: 0; animation: aparecer-marco 1.8s .15s var(--curva-elegante) forwards; } @keyframes aparecer-marco { from { opacity: 0; filter: drop-shadow(0 0 0 rgba(201, 168, 76, 0)) drop-shadow(0 26px 30px rgba(0, 0, 0, 0)) blur(6px); } to { opacity: 1; filter: drop-shadow(0 0 45px rgba(201, 168, 76, .16)) drop-shadow(0 26px 30px rgba(0, 0, 0, .55)) blur(0); } } .portada__contenido { position: relative; z-index: 51; width: calc(var(--ancho-broche) * 0.46); text-align: center; } .portada__antetitulo { font-family: var(--tipo-detalle); font-size: calc(var(--ancho-broche) * 0.017); line-height: 1.5; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--color-oro); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); margin: 0; opacity: 0; animation: aparecer-desde-abajo .9s .9s forwards; } .portada__filete { display: flex; align-items: center; justify-content: center; gap: .4em; margin: calc(var(--ancho-broche) * 0.012) auto calc(var(--ancho-broche) * 0.006); width: 70%; opacity: 0; animation: aparecer-desde-abajo .9s 1s forwards; } .portada__filete::before, .portada__filete::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-oro-apagado), transparent); } .portada__filete span { color: var(--color-oro); font-size: calc(var(--ancho-broche) * 0.018); line-height: 1; } .portada__nombre { font-family: var(--tipo-titulos); font-size: calc(var(--ancho-broche) * 0.115); line-height: 1.05; margin: calc(var(--ancho-broche) * 0.008) 0; background-image: linear-gradient( 100deg, #8a6a2c 0%, #c9a84c 24%, #f4e2a0 42%, #ffffff 50%, #f4e2a0 58%, #c9a84c 76%, #8a6a2c 100%); background-size: 220% 100%; background-position: calc(var(--luz-x, .5) * 100%) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 -1px 0 rgba(255, 246, 214, .35), 0 1px 0 rgba(74, 52, 16, .55), 0 6px 14px rgba(0, 0, 0, .70), 0 0 55px rgba(201, 168, 76, .35); transition: background-position .3s linear; opacity: 0; animation: aparecer-desde-abajo .9s 1.15s forwards; } @media (prefers-reduced-motion: reduce) { .portada__nombre { background-position: 50% 0; transition: none; } } .portada__edad { font-family: var(--tipo-titulos); font-size: calc(var(--ancho-broche) * 0.042); line-height: 1.25; color: var(--color-sangre-viva); letter-spacing: .18em; margin: 0; text-shadow: 0 -1px 0 rgba(255, 180, 190, .25), 0 1px 1px rgba(40, 6, 12, .7), 0 4px 10px rgba(0, 0, 0, .55); opacity: 0; animation: aparecer-desde-abajo .9s 1.3s forwards; } .portada__fecha { font-family: var(--tipo-detalle); font-size: calc(var(--ancho-broche) * 0.027); line-height: 1.5; color: var(--color-marfil-apagado); letter-spacing: .04em; margin-top: calc(var(--ancho-broche) * 0.03); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); opacity: 0; animation: aparecer-desde-abajo .9s 1.45s forwards; } .portada__hora { display: block; font-size: .88em; color: var(--color-oro-apagado); margin-top: .2em; } .portada__desliza { margin-top: clamp(1rem, 3vh, 2.2rem); opacity: 0; animation: aparecer-desde-abajo .9s 1.9s forwards; } .portada__desliza span { display: block; font-family: var(--tipo-detalle); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--color-oro-apagado); margin-bottom: .5rem; } .portada__flecha { width: 2px; height: 46px; margin: 0 auto; background: linear-gradient(to bottom, var(--color-oro), transparent); animation: latido-suave 2s ease-in-out infinite; } .cuenta-regresiva { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.6rem, 2.5vw, 1.5rem); margin: 0 auto; max-width: 620px; } .cuenta-regresiva__cartela { position: relative; min-width: clamp(68px, 19vw, 120px); padding: 1.1rem .6rem 1.15rem; text-align: center; background: linear-gradient(180deg, rgba(201, 168, 76, .07), rgba(0, 0, 0, .35)); border: 1px solid var(--borde-oro-tenue); box-shadow: inset 0 0 22px rgba(0, 0, 0, .6); ⛔ SIN `paint`: el número lleva un text-shadow de 26 px de radio, y la contención de pintado lo cortaría en el borde de la cartela. Con `layout` y `style` alcanza —son las que impiden que el recálculo se propague—, y el resplandor del número queda intacto. */ contain: layout style; } .cuenta-regresiva__cartela::before, .cuenta-regresiva__cartela::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--color-oro); border-style: solid; } .cuenta-regresiva__cartela::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; } .cuenta-regresiva__cartela::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; } .cuenta-regresiva__numero { display: block; font-family: var(--tipo-titulos); font-size: clamp(1.5rem, 5.2vw, 2.5rem); line-height: 1; color: var(--color-oro-claro); text-shadow: 0 0 26px rgba(201, 168, 76, .35); font-variant-numeric: tabular-nums; } .cuenta-regresiva__etiqueta { display: block; margin-top: .62rem; font-family: var(--tipo-detalle); font-size: clamp(.58rem, 1.7vw, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--color-oro-apagado); } .cuenta-regresiva__llegada { display: none; font-family: var(--tipo-titulos); font-size: clamp(1.3rem, 4.5vw, 2rem); color: var(--color-oro-claro); text-align: center; text-shadow: 0 0 40px rgba(201, 168, 76, .45); } .cuenta-regresiva.es-hoy .cuenta-regresiva__cartela { display: none; } .cuenta-regresiva.es-hoy .cuenta-regresiva__llegada { display: block; } .seccion { position: relative; z-index: 2; max-width: var(--ancho-contenido); margin-inline: auto; padding: 5rem 1rem; text-align: center; } .seccion--ancha { max-width: 100%; border-top: 1px solid var(--borde-oro-tenue); border-bottom: 1px solid var(--borde-oro-tenue); } .seccion__interior { max-width: var(--ancho-contenido); margin-inline: auto; } .caja-mensaje { position: relative; max-width: 700px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); background: rgba(255, 255, 255, .02); border: 1px solid var(--borde-oro-tenue); } .caja-mensaje blockquote { font-family: var(--tipo-detalle); font-style: italic; font-size: clamp(1rem, 2.6vw, 1.25rem); line-height: 2.15; color: var(--color-marfil); text-align: center; } .caja-mensaje cite { display: block; margin-top: 1.5rem; font-family: var(--tipo-texto); font-size: .9rem; letter-spacing: .15em; color: var(--color-oro-texto); text-align: right; font-style: normal; } .caja-mensaje__adorno { position: absolute; color: var(--color-oro); font-size: 1.5rem; opacity: .5; } .caja-mensaje__adorno--si { top: .5rem; left: .75rem; } .caja-mensaje__adorno--sd { top: .5rem; right: .75rem; } .caja-mensaje__adorno--ii { bottom: .5rem; left: .75rem; } .caja-mensaje__adorno--id { bottom: .5rem; right: .75rem; } .tarjeta-regalo { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: 460px; margin-inline: auto; padding: clamp(2rem, 6vw, 3.5rem); background: rgba(201, 168, 76, .04); border: 1px solid var(--borde-oro-tenue); transition: border-color .3s, box-shadow .3s; } .tarjeta-regalo:hover { border-color: var(--borde-oro-fuerte); box-shadow: 0 0 30px rgba(201, 168, 76, .1); } .tarjeta-regalo__icono { font-size: 3rem; } .tarjeta-regalo p { margin: 0; font-size: 1rem; } .tarjeta-regalo__nota { font-size: .95rem; color: var(--color-oro-texto); font-style: italic; } .datos-lugar { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); justify-content: center; gap: 1.5rem 2rem; margin: 0 auto 2rem; text-align: left; } .dato-lugar { display: flex; gap: .75rem; align-items: flex-start; } .dato-lugar__icono { flex-shrink: 0; width: 21px; height: 21px; margin-top: .15rem; fill: none; stroke: url(#oro-icono); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: .92; } .dato-lugar span { color: var(--color-marfil-apagado); font-size: .95rem; } .dato-lugar strong { display: block; color: var(--color-marfil); font-family: var(--tipo-detalle); font-weight: 400; } .mapa-marco { position: relative; max-width: var(--ancho-contenido); margin: 2rem auto 0; overflow: hidden; border: 1px solid rgba(201, 168, 76, .5); box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .14), 0 0 24px rgba(196, 150, 70, .13), 0 18px 40px rgba(0, 0, 0, .55); } .mapa-marco--a-pedido { min-height: 380px; background: var(--color-carbon); } .mapa-marco__aviso { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; text-align: center; } .mapa-marco__aviso-nombre { font-family: var(--tipo-titulos); font-size: 1.15rem; color: var(--color-oro-claro); } .mapa-marco__aviso-direccion { max-width: 32ch; font-size: .85rem; line-height: 1.5; color: var(--color-marfil-apagado); } .mapa-marco__boton-ver { margin-top: .6rem; padding: .7rem 1.6rem; background: transparent; border: 1px solid var(--borde-oro-fuerte); border-radius: 999px; font-family: var(--tipo-detalle); font-size: .8rem; letter-spacing: .08em; color: var(--color-oro); cursor: pointer; transition: background-color .25s ease, color .25s ease; } .mapa-marco__boton-ver:hover, .mapa-marco__boton-ver:focus-visible { background: var(--color-oro); color: var(--color-negro); } .mapa-marco iframe { display: block; width: 100%; height: 380px; border: none; filter: grayscale(100%) invert(91%) sepia(78%) hue-rotate(345deg) saturate(240%) brightness(.58) contrast(1.05); } .mapa-marco__vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 44%, rgba(10, 6, 5, .55) 82%, rgba(10, 6, 5, .88) 100%); box-shadow: inset 0 0 60px rgba(10, 6, 5, .75); } .mapa-marco__escuadra { position: absolute; width: 22px; height: 22px; border-color: var(--color-oro); border-style: solid; pointer-events: none; z-index: 2; } .mapa-marco__escuadra--si { top: 9px; left: 9px; border-width: 1px 0 0 1px; } .mapa-marco__escuadra--sd { top: 9px; right: 9px; border-width: 1px 1px 0 0; } .mapa-marco__escuadra--ii { bottom: 9px; left: 9px; border-width: 0 0 1px 1px; } .mapa-marco__escuadra--id { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; } .mapa-marco__cartela { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; padding: .4rem 1.4rem .45rem; background: linear-gradient(180deg, rgba(10, 6, 5, .95), rgba(10, 6, 5, .78)); border: 1px solid var(--borde-oro-tenue); border-top: none; font-family: var(--tipo-detalle); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--color-oro); white-space: nowrap; max-width: calc(100% - 5rem); overflow: hidden; text-overflow: ellipsis; } .acciones-lugar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; } #pie-de-pagina { text-align: center; padding-top: 3rem; border-top: 1px solid var(--borde-oro-tenue); font-family: var(--tipo-detalle); font-size: .8rem; letter-spacing: .2em; color: var(--color-oro-texto); } #pie-de-pagina .rosa { color: var(--color-sangre); } #pie-de-pagina .rosa { display: inline-block; vertical-align: middle; transition: transform .3s var(--curva-elegante), filter .3s; } #pie-de-pagina .rosa.contando-1 { transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(160, 24, 36, .6)); } #pie-de-pagina .rosa.contando-2 { transform: scale(1.34); filter: drop-shadow(0 0 11px rgba(201, 168, 76, .75)); } #volver-arriba { flex-shrink: 0; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; background: var(--color-carbon); border: 1px solid var(--borde-oro-tenue); border-radius: 50%; color: var(--color-oro-apagado); box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 76, .1); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--curva-elegante), transform .35s var(--curva-elegante), visibility .35s, color .25s, border-color .25s, box-shadow .25s; } #volver-arriba.visible { opacity: 1; visibility: visible; transform: translateY(0); } #volver-arriba svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #volver-arriba:hover, #volver-arriba:focus-visible { color: var(--color-oro); border-color: var(--color-oro-apagado); box-shadow: 0 12px 50px rgba(0, 0, 0, .8), 0 0 25px rgba(201, 168, 76, .25); } #volver-arriba:active svg { transform: translateY(-2px); } #volver-arriba svg { transition: transform .2s var(--curva-elegante); } .formulario { position: relative; max-width: 680px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); background: rgba(255, 255, 255, .02); border: 1px solid var(--borde-oro-tenue); text-align: left; } .formulario__introduccion { text-align: center; max-width: 540px; margin: 0 auto 2.5rem; color: var(--color-marfil-apagado); } .formulario__fecha-limite { color: var(--color-oro); } .campo { margin-bottom: 1.75rem; } .campo > label, .campo__titulo { display: block; font-family: var(--tipo-detalle); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-oro); margin-bottom: .5rem; } .campo input, .campo select, .campo textarea { width: 100%; padding: .75rem 1rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--borde-oro-tenue); color: var(--color-marfil); font-family: var(--tipo-texto); font-size: 1rem; outline: none; appearance: none; transition: border-color .3s, box-shadow .3s; } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-oro); background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px rgba(201, 168, 76, .55), 0 0 14px rgba(201, 168, 76, .22), inset 0 0 12px rgba(201, 168, 76, .07); } .campo input:focus::placeholder, .campo textarea:focus::placeholder { color: rgba(200, 191, 176, .35); } .campo select option { background: var(--color-carbon); color: var(--color-marfil); } .campo textarea { resize: vertical; min-height: 90px; } .rejilla-doble { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .campo__subetiqueta { display: block; font-size: .75rem; letter-spacing: .1em; color: var(--color-marfil-apagado); margin-bottom: .35rem; text-transform: none; } .nota-campo { font-size: .85rem; color: var(--color-oro-texto); font-style: italic; margin-top: .4rem; } .solo-si-asiste { display: none; } .solo-si-asiste.visible { display: block; } .menus-por-persona { display: flex; flex-direction: column; gap: .6rem; } .fila-persona { display: grid; grid-template-columns: minmax(88px, 130px) 1fr; align-items: center; gap: .75rem; padding: .55rem .7rem; background: rgba(255, 255, 255, .015); border: 1px solid rgba(201, 168, 76, .18); animation: aparecer-desde-abajo .35s var(--curva-elegante) both; } .fila-persona__nombre { font-family: var(--tipo-detalle); font-size: .82rem; letter-spacing: .1em; color: var(--color-marfil); } .fila-persona__nombre small { display: block; font-size: .72em; color: var(--color-oro-texto); letter-spacing: .05em; } .fila-persona__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; } @media (max-width: 560px) { .fila-persona { grid-template-columns: 1fr; gap: .5rem; } .fila-persona__opciones { grid-template-columns: 1fr; } } .tarjeta-infantil { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; background: rgba(201, 168, 76, .06); border: 1px solid var(--color-oro); animation: aparecer-desde-abajo .35s var(--curva-elegante) both; } .tarjeta-infantil__icono { font-size: 1.5rem; line-height: 1; } .tarjeta-infantil__texto { flex: 1; font-family: var(--tipo-texto); font-size: 1rem; color: var(--color-oro-claro); } .tarjeta-infantil__texto small { display: block; font-family: var(--tipo-detalle); font-size: .72rem; letter-spacing: .08em; color: var(--color-oro-texto); margin-top: .1rem; } .tarjeta-infantil__cantidad { flex-shrink: 0; min-width: 2.6rem; padding: .3rem .6rem; text-align: center; font-family: var(--tipo-titulos); font-size: 1.1rem; line-height: 1; color: var(--color-negro); background: linear-gradient(135deg, var(--color-oro), var(--color-oro-claro)); box-shadow: 0 0 12px rgba(201, 168, 76, .35); font-variant-numeric: tabular-nums; } .opcion-menu { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; background: rgba(255, 255, 255, .035); border: 1px solid rgba(201, 168, 76, .5); font-family: var(--tipo-texto); font-size: .9rem; color: rgba(245, 239, 230, .82); transition: all .25s; } .opcion-menu:hover { border-color: var(--color-oro-apagado); color: var(--color-marfil); } .opcion-menu input { display: none; } .opcion-menu::before { content: ''; flex-shrink: 0; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borde-oro-fuerte); background: rgba(255, 255, 255, .03); font-size: .85rem; line-height: 1; transition: all .25s; } .opcion-menu--unica::before { border-radius: 50%; } .opcion-menu:has(input:checked) { border-color: var(--color-oro); color: var(--color-oro-claro); background: rgba(201, 168, 76, .08); } .opcion-menu:has(input:checked)::before { content: '✓'; color: var(--color-negro); font-weight: bold; background: linear-gradient(135deg, var(--color-oro), var(--color-oro-claro)); border-color: var(--color-oro-claro); box-shadow: 0 0 10px rgba(201, 168, 76, .45); } .opcion-menu:has(input:focus-visible) { outline: 2px solid var(--color-oro-claro); outline-offset: 2px; } .rombos-de-carga { display: inline-flex; align-items: center; gap: .6rem; } .rombos-de-carga i { width: 9px; height: 9px; border-radius: 1px; background: var(--color-marfil); transform: rotate(45deg); animation: latir-rombo 1.15s ease-in-out infinite; } .rombos-de-carga i:nth-child(2) { animation-delay: .16s; } .rombos-de-carga i:nth-child(3) { animation-delay: .32s; } @keyframes latir-rombo { 0%, 100% { opacity: .28; transform: rotate(45deg) scale(.72); } 40% { opacity: 1; transform: rotate(45deg) scale(1.12); } } .boton-carmesi.esta-enviando { pointer-events: none; } .boton-carmesi.esta-enviando::after { display: none; } .mensaje-exito { display: none; text-align: center; padding: 2rem; } .mensaje-exito.visible { display: block; } .mensaje-exito__icono { font-size: 3rem; margin-bottom: 1rem; } .mensaje-exito h3 { font-family: var(--tipo-titulos); color: var(--color-oro-claro); font-size: 1.5rem; margin-bottom: .75rem; } .mensaje-exito__acciones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; } .enlace-sutil { background: none; border: none; color: var(--color-oro-texto); font-family: var(--tipo-texto); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; } .enlace-sutil:hover { color: var(--color-oro); } #ventana-pase { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .85); backdrop-filter: blur(8px); } #ventana-pase.abierta { display: flex; } .pase { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: var(--color-carbon); border: 1px solid var(--borde-oro-fuerte); box-shadow: 0 0 60px rgba(201, 168, 76, .2); animation: entrar-pase .5s var(--curva-elegante) forwards; } @keyframes entrar-pase { from { transform: scale(.85) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .pase::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #8b0000, var(--color-oro), #8b0000); } .pase__escuadra { position: absolute; width: 16px; height: 16px; border-color: var(--color-oro); border-style: solid; pointer-events: none; z-index: 2; } .pase__escuadra--si { top: 7px; left: 7px; border-width: 1px 0 0 1px; } .pase__escuadra--sd { top: 7px; right: 7px; border-width: 1px 1px 0 0; } .pase__escuadra--ii { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; } .pase__escuadra--id { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; } .pase__sello { display: block; width: 46px; height: 46px; margin: .5rem auto .1rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); } .pase__filete { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 62%; margin: .45rem auto .55rem; } .pase__filete::before, .pase__filete::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-oro-apagado), transparent); } .pase__filete span { color: var(--color-oro); font-size: .6rem; } .pase__encabezado { padding: 1.75rem 2rem 1.5rem; text-align: center; border-bottom: 1px solid var(--borde-oro-tenue); background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(107, 21, 34, .45) 0%, transparent 70%), radial-gradient(ellipse 60% 70% at 50% 100%, rgba(201, 168, 76, .07) 0%, transparent 70%), linear-gradient(160deg, #1c1109, var(--color-negro)); } .pase__rotulo { font-family: var(--tipo-detalle); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--color-oro); } .pase__nombre { font-family: var(--tipo-titulos); font-size: clamp(1.4rem, 5vw, 2rem); color: var(--color-oro-claro); margin: .25rem 0; } .pase__lema { font-family: var(--tipo-texto); font-size: 1rem; color: var(--color-marfil-apagado); font-style: italic; } .pase__cuerpo { padding: 1.5rem 2rem; } .pase__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed rgba(201, 168, 76, .15); font-family: var(--tipo-texto); font-size: .95rem; } .pase__fila:last-child { border-bottom: none; } .pase__etiqueta { display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-family: var(--tipo-detalle); font-size: .88rem; letter-spacing: .08em; color: var(--color-oro-apagado); } .pase__icono { flex-shrink: 0; width: 17px; height: 17px; fill: none; stroke: url(#oro-icono); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: .9; } .pase__valor { color: var(--color-marfil); text-align: right; font-variant-numeric: tabular-nums; } .pase__pie { padding: 1.5rem 2rem; border-top: 1px solid var(--borde-oro-tenue); text-align: center; } #codigo-qr { margin: 0 auto 1rem; width: 100px; height: 100px; } #codigo-qr img, #codigo-qr canvas { margin: 0 auto; } .pase__codigo { font-family: monospace; font-size: .8rem; letter-spacing: .1em; color: var(--color-oro-apagado); } .pase__aviso { font-size: .8rem; color: var(--color-marfil-apagado); margin: .5rem 0 0; } .pase__acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; } .pase__acciones .boton-dorado { padding: .6rem 1.5rem; font-size: .85rem; } @media print { body > * { display: none !important; } #ventana-pase { display: block !important; position: static !important; background: none !important; backdrop-filter: none !important; padding: 0 !important; } .pase { max-width: 100% !important; max-height: none !important; border: 2px solid #333 !important; box-shadow: none !important; animation: none !important; background: #fff !important; color: #000 !important; } .pase__encabezado { background: #f2f2f2 !important; } .pase__nombre, .pase__rotulo, .pase__etiqueta, .pase__codigo { color: #333 !important; } .pase__icono { stroke: #555 !important; } .pase__escuadra { border-color: #777 !important; } .pase__filete span { color: #777 !important; } .pase__valor, .pase__lema, .pase__aviso { color: #000 !important; } .pase__acciones { display: none !important; } } #controles-flotantes { position: fixed; bottom: calc(var(--marco-grosor) + 1rem); right: calc(var(--marco-grosor) + 1rem); z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; pointer-events: none; } #controles-flotantes > * { pointer-events: auto; } #musica-flotante { position: relative; flex-shrink: 0; line-height: 0; } #boton-musica { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; background: var(--color-carbon); border: 1px solid var(--borde-oro-tenue); border-radius: 50%; color: var(--color-oro-apagado); box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 76, .1); cursor: pointer; transition: color .25s, border-color .25s, box-shadow .25s; } #boton-musica svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #boton-musica:hover, #boton-musica:focus-visible { color: var(--color-oro); border-color: var(--color-oro-apagado); box-shadow: 0 12px 50px rgba(0, 0, 0, .8), 0 0 25px rgba(201, 168, 76, .25); } #boton-musica[aria-expanded="true"] { color: var(--color-oro-claro); border-color: var(--borde-oro-fuerte); } #reproductor { position: absolute; right: calc(100% + .6rem); bottom: 0; z-index: 2; display: flex; align-items: center; gap: .75rem; width: 290px; height: 2.9rem; padding: 0 .8rem; background: var(--color-carbon); border: 1px solid var(--borde-oro-tenue); border-radius: 999px; box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 76, .1); opacity: 0; visibility: hidden; transform: translateX(10px); pointer-events: none; transition: opacity .3s var(--curva-elegante), transform .3s var(--curva-elegante), visibility .3s; } #reproductor.abierto { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } .reproductor__play { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde-oro-fuerte); background: linear-gradient(135deg, rgba(201, 168, 76, .15), rgba(139, 0, 0, .2)); color: var(--color-oro-claro); font-size: .7rem; cursor: pointer; transition: transform .25s, box-shadow .25s; } .reproductor__play:hover { transform: scale(1.08); box-shadow: 0 0 18px rgba(201, 168, 76, .35); } .reproductor__info { min-width: 0; flex: 1; line-height: 1.15; } .reproductor__cancion { margin: 0; font-family: var(--tipo-texto); font-size: .85rem; color: var(--color-marfil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reproductor__artista { margin: 0; font-family: var(--tipo-detalle); font-size: .62rem; letter-spacing: .09em; color: var(--color-oro-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reproductor__volumen { flex-shrink: 0; display: flex; align-items: center; gap: .45rem; } .reproductor__silencio { flex-shrink: 0; background: none; border: none; padding: 0; line-height: 0; color: var(--color-oro-apagado); cursor: pointer; transition: color .2s; } .reproductor__silencio:hover { color: var(--color-oro); } .reproductor__icono-volumen { width: .9rem; height: .9rem; } .reproductor__deslizador { width: 62px; height: 4px; appearance: none; background: linear-gradient(90deg, var(--color-oro) 0%, var(--color-oro) var(--progreso, 70%), rgba(201, 168, 76, .18) var(--progreso, 70%), rgba(201, 168, 76, .18) 100%); border-radius: 2px; outline: none; cursor: pointer; } .reproductor__deslizador::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--color-oro-brillante), var(--color-oro)); border: 1px solid var(--color-oro-sombra); box-shadow: 0 0 8px rgba(201, 168, 76, .5); transition: transform .18s, box-shadow .18s; } .reproductor__deslizador::-webkit-slider-thumb:hover { transform: rotate(45deg) scale(1.3); box-shadow: 0 0 14px rgba(201, 168, 76, .8); } .reproductor__deslizador::-moz-range-thumb { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--color-oro-brillante), var(--color-oro)); border: 1px solid var(--color-oro-sombra); box-shadow: 0 0 8px rgba(201, 168, 76, .5); } .reproductor__deslizador:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 4px; } #musica-flotante.sonando #boton-musica { color: var(--color-oro-claro); border-color: var(--borde-oro-fuerte); animation: latido-musica 2.6s ease-in-out infinite; } @keyframes latido-musica { 0%, 100% { box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 76, .1); } 50% { box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 18px rgba(201, 168, 76, .45); } } html.animaciones-off #musica-flotante.sonando #boton-musica { animation: none; } .reproductor__aviso { position: absolute; bottom: calc(100% + .75rem); right: 0; padding: .4rem .9rem; white-space: nowrap; background: var(--color-carbon); border: 1px solid var(--borde-oro-fuerte); color: var(--color-oro-claro); font-family: var(--tipo-detalle); font-size: .78rem; letter-spacing: .1em; pointer-events: none; animation: pulso-aviso 2s ease-in-out infinite, desvanecer-aviso 1s 8s forwards; } .reproductor__aviso::after { content: ''; position: absolute; bottom: -.45rem; right: 1.15rem; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--color-oro); } @keyframes pulso-aviso { 0%, 100% { box-shadow: 0 4px 20px rgba(201, 168, 76, .15); } 50% { box-shadow: 0 4px 28px rgba(201, 168, 76, .45); } } @keyframes desvanecer-aviso { to { opacity: 0; visibility: hidden; } } #musica-flotante.sonando .reproductor__aviso { display: none; } @media (max-width: 600px) { #reproductor { right: 0; bottom: calc(100% + .6rem); width: calc(100vw - var(--marco-grosor) * 2 - 2rem); transform: translateY(10px); } #reproductor.abierto { transform: translateY(0); } } @media (pointer: coarse) { #boton-musica { width: 3.2rem; height: 3.2rem; } #reproductor { height: 3.2rem; } .reproductor__play { width: 34px; height: 34px; } } .con-cursor-propio, .con-cursor-propio * { cursor: none !important; } .con-cursor-propio iframe, .con-cursor-propio iframe * { cursor: auto !important; } #cursor-anillo, #cursor-punto { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; } #cursor-anillo.visible, #cursor-punto.visible { opacity: 1; } #cursor-anillo { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(201, 168, 76, .85); border-radius: 50%; box-shadow: 0 0 14px rgba(201, 168, 76, .25), inset 0 0 10px rgba(201, 168, 76, .12); transition: border-color .28s, box-shadow .28s, opacity .3s; } #cursor-anillo::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(201, 168, 76, .35); animation: girar-anillo 9s linear infinite; } @keyframes girar-anillo { to { transform: rotate(360deg); } } #cursor-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--color-oro-claro); border-radius: 50%; box-shadow: 0 0 10px rgba(232, 207, 122, .9); transition: box-shadow .2s, opacity .3s; } #cursor-anillo.sobre-interactivo { border-color: var(--color-oro-brillante); box-shadow: 0 0 26px rgba(201, 168, 76, .55), inset 0 0 14px rgba(201, 168, 76, .3); } #cursor-punto.sobre-interactivo { box-shadow: 0 0 18px rgba(244, 226, 160, 1); } .lluvia-de-petalos { position: fixed; inset: 0; pointer-events: none; overflow: hidden; } .lienzo-de-petalos { position: absolute; inset: 0; pointer-events: none; } .lluvia-de-petalos--fondo { z-index: 1; } .lluvia-de-petalos--medio { z-index: 3; } .lluvia-de-petalos--frente { z-index: 50; } .lluvia-de-petalos--fondo .petalo { opacity: .8; } .petalo { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: contain; background-position: center; will-change: transform; } #penumbra-profunda { position: absolute; inset: 0; z-index: 65; pointer-events: none; background: linear-gradient(var(--tinte-del-velo, transparent), var(--tinte-del-velo, transparent)), linear-gradient( to right, rgba(4, 2, 2, .30) 0, rgba(4, 2, 2, 0) 20%, rgba(4, 2, 2, 0) 80%, rgba(4, 2, 2, .30) 100%), linear-gradient( to bottom, rgba(8, 4, 4, 0) 0, rgba(8, 4, 4, 0) 22vh, rgba(7, 4, 4, .18) 90vh, rgba(5, 3, 3, .32) 170vh, rgba(4, 2, 2, .40) 100%); } @media (prefers-reduced-motion: reduce) { #penumbra-profunda { opacity: .7; } } #lienzo-de-luz { position: fixed; inset: 0; z-index: 66; pointer-events: none; } #apliques { position: absolute; inset: 0; z-index: 57; pointer-events: none; overflow: hidden; } .aplique { position: absolute; } .llama { transform-box: fill-box; transform-origin: 50% 90%; } #luz-de-velas { position: absolute; inset: 0; z-index: 66; pointer-events: none; overflow: hidden; } .luz-de-pieza { position: absolute; pointer-events: none; mix-blend-mode: screen; } .vela { position: absolute; border-radius: 50%; opacity: 0; } .vela--nucleo { background: radial-gradient(circle, rgba(255, 226, 160, .95) 0%, rgba(255, 190, 105, .55) 18%, rgba(232, 150, 70, .22) 42%, transparent 70%); } .vela--derrame { background: radial-gradient(circle, rgba(255, 198, 120, .40) 0%, rgba(236, 160, 82, .26) 22%, rgba(208, 130, 60, .15) 42%, rgba(170, 100, 46, .07) 62%, transparent 80%); } .vela--detras { mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { .vela--nucleo { opacity: .85 !important; } .llama { opacity: 1 !important; transform: none !important; } } #haces-de-luz { position: fixed; inset: 0; z-index: 70; pointer-events: none; mix-blend-mode: screen; overflow: hidden; --banda-de-luz: calc(var(--marco-grosor) * 1.4); -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--banda-de-luz), #000 calc(100% - var(--banda-de-luz)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--banda-de-luz), #000 calc(100% - var(--banda-de-luz)), transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(to right, transparent 0, #000 var(--banda-de-luz), #000 calc(100% - var(--banda-de-luz)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--banda-de-luz), #000 calc(100% - var(--banda-de-luz)), transparent 100%); mask-composite: intersect; } .haz { position: absolute; top: -45%; height: 190%; width: 12vw; background: radial-gradient(ellipse 62% 46% at 50% 24%, rgba(244, 226, 160, .50) 0%, rgba(219, 183, 110, .30) 38%, rgba(201, 168, 76, .10) 62%, transparent 80%); transform-origin: 50% 0; transform: rotate(18deg); opacity: 0; will-change: transform, opacity; } .haz:nth-child(1) { left: 6%; } .haz:nth-child(2) { left: 24%; } .haz:nth-child(3) { left: 45%; } .haz:nth-child(4) { left: 63%; } .haz:nth-child(5) { left: 82%; } @media (prefers-reduced-motion: reduce) { #haces-de-luz { display: none; } } @media (max-width: 700px) { #haces-de-luz { opacity: .55; } } #motas-de-polvo { position: fixed; inset: 0; z-index: 69; pointer-events: none; mix-blend-mode: screen; overflow: hidden; opacity: var(--luz-intensidad); transition: opacity .4s linear; } .mota { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 214, .95) 0%, rgba(244, 226, 160, .55) 42%, transparent 72%); opacity: 0; animation: flotar-mota var(--mota-dur, 26s) linear var(--mota-delay, 0s) infinite; } @keyframes flotar-mota { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: var(--mota-op, .6); } 88% { opacity: var(--mota-op, .6); } 100% { transform: translate(var(--mota-dx, -30px), var(--mota-dy, 90px)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #motas-de-polvo { display: none; } } html.calidad-media #haces-de-luz .haz:nth-child(5) { display: none; } html.calidad-baja #haces-de-luz .haz:nth-child(3), html.calidad-baja #haces-de-luz .haz:nth-child(4), html.calidad-baja #haces-de-luz .haz:nth-child(5) { display: none; } html.calidad-baja .haz, html.calidad-baja .mota { will-change: auto; } #velo-de-revelado { position: fixed; inset: 0; z-index: 71; pointer-events: none; mix-blend-mode: screen; opacity: 0; display: none; background: radial-gradient(ellipse 95% 75% at 50% 40%, rgba(255, 240, 205, .55) 0%, rgba(230, 180, 120, .22) 42%, transparent 72%); } body.revelando #velo-de-revelado { display: block; animation: bano-de-revelado 2.9s var(--curva-elegante) forwards; } @keyframes bano-de-revelado { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #velo-de-revelado { display: none; } } @media (max-width: 900px) { body { font-size: 17px; } .seccion { padding: 4rem 1rem; } .mapa-marco iframe { height: 320px; } } @media (max-width: 600px) { body { font-size: 16px; } .rejilla-doble, .datos-lugar { grid-template-columns: 1fr; } .seccion { padding: 3.5rem .75rem; } .pase__acciones, .mensaje-exito__acciones, .acciones-lugar { flex-direction: column; align-items: stretch; } .pase__cuerpo, .pase__pie, .pase__encabezado { padding-inline: 1.25rem; } } @media (max-width: 380px) { .cuenta-regresiva { gap: .5rem; } .cuenta-regresiva__cartela { min-width: calc(50% - .5rem); } .caja-mensaje { padding: 1.25rem 1rem; } .formulario { padding: 1.5rem 1rem; } } @media (max-height: 620px) { .portada__broche { --ancho-broche: min(92vw, 640px, 80vh); } .portada__desliza { display: none; } } @media (pointer: coarse) { #cursor-anillo, #cursor-punto { display: none !important; } .con-cursor-propio, .con-cursor-propio * { cursor: auto !important; } .lluvia-de-petalos { opacity: .7; } } #boton-qa { flex-shrink: 0; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; background: var(--color-carbon); border: 1px solid var(--borde-oro-tenue); border-radius: 50%; color: var(--color-oro-apagado); box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 76, .1); cursor: pointer; font-family: var(--tipo-titulos); font-size: 1.15rem; line-height: 1; transition: opacity .35s var(--curva-elegante), transform .35s var(--curva-elegante), visibility .35s, color .25s, border-color .25s, box-shadow .25s; } #boton-qa:hover, #boton-qa:focus-visible { color: var(--color-oro); border-color: var(--color-oro-apagado); box-shadow: 0 12px 50px rgba(0, 0, 0, .8), 0 0 25px rgba(201, 168, 76, .25); } #boton-qa[aria-expanded="true"] { color: var(--color-oro-claro); border-color: var(--borde-oro-fuerte); } #boton-qa.qa-oculto { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; } body.sobre-visible #boton-qa { display: none; } #velo-qa { display: none; position: fixed; inset: 0; z-index: 1; background: rgba(6, 3, 2, .72); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--curva-elegante); } #velo-qa.qa-abierto { pointer-events: auto; } #panel-qa { position: absolute; bottom: calc(100% + .65rem); right: 0; z-index: 2; width: min(360px, calc(100vw - var(--marco-grosor) * 2 - 2rem)); max-height: min(60vh, 480px); display: flex; flex-direction: column; overflow: hidden; background: var(--color-carbon); border: 1px solid var(--borde-oro-tenue); box-shadow: 0 12px 50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(201, 168, 76, .1); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .3s var(--curva-elegante), transform .3s var(--curva-elegante), visibility .3s; } #panel-qa.qa-abierto { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .qa__barra-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-shrink: 0; padding: .6rem .85rem; border-bottom: 1px solid var(--borde-oro-tenue); font-family: var(--tipo-detalle); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-oro-texto); } #boton-cerrar-qa { background: none; border: none; cursor: pointer; padding: 0 .2rem; font-size: 1.1rem; line-height: 1; color: var(--color-oro-apagado); transition: color .25s; } #boton-cerrar-qa:hover, #boton-cerrar-qa:focus-visible { color: var(--color-oro-claro); } .qa__lista { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .qa__item + .qa__item { border-top: 1px solid rgba(201, 168, 76, .16); } .qa__pregunta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .8rem .85rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--tipo-titulos); font-size: .82rem; line-height: 1.35; color: var(--color-marfil-apagado); transition: color .25s, background-color .25s; } .qa__pregunta:hover, .qa__pregunta:focus-visible { color: var(--color-oro-claro); background: rgba(201, 168, 76, .06); } .qa__flecha { flex-shrink: 0; font-size: 1.1rem; color: var(--color-oro-apagado); transition: transform .3s var(--curva-elegante); } .qa__item--abierto .qa__flecha { transform: rotate(90deg); } .qa__item--abierto .qa__pregunta { color: var(--color-oro-claro); } .qa__respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--curva-elegante); } .qa__item--abierto .qa__respuesta { grid-template-rows: 1fr; } .qa__texto { overflow: hidden; font-family: var(--tipo-texto); font-size: .95rem; line-height: 1.6; color: var(--color-marfil-apagado); } .qa__item--abierto .qa__texto { padding: 0 .85rem .9rem; } .qa__texto b { color: var(--color-oro-claro); font-weight: 600; } .qa__texto a { color: var(--color-oro); text-decoration: none; border-bottom: 1px solid var(--borde-oro-tenue); transition: color .25s, border-color .25s; } .qa__texto a:hover, .qa__texto a:focus-visible { color: var(--color-oro-claro); border-color: var(--borde-oro-fuerte); } @media (max-width: 600px) { #velo-qa { display: block; } #velo-qa.qa-abierto { opacity: 1; } #panel-qa { position: fixed; inset: auto 0 0 0; width: auto; max-height: 75vh; border-inline: none; border-bottom: none; border-radius: 14px 14px 0 0; transform: translateY(100%); transition: transform .34s var(--curva-elegante), opacity .2s var(--curva-elegante), visibility .34s; } #panel-qa.qa-abierto { transform: translateY(0); } .qa__barra-titulo { padding: .85rem 1rem; } .qa__barra-titulo::before { content: ''; position: absolute; top: .4rem; left: 50%; transform: translateX(-50%); width: 2.2rem; height: 3px; border-radius: 3px; background: var(--borde-oro-tenue); } #panel-qa .qa__barra-titulo { position: relative; } .qa__pregunta { padding: .95rem 1rem; font-size: .88rem; } .qa__item--abierto .qa__texto { padding: 0 1rem 1rem; } body.qa-abierta { overflow: hidden; } } @media (pointer: coarse) { #boton-qa, #volver-arriba { width: 3.2rem; height: 3.2rem; } #boton-qa { font-size: 1.3rem; } } html.animaciones-off #panel-qa, html.animaciones-off #velo-qa, html.animaciones-off .qa__respuesta, html.animaciones-off .qa__flecha, html.animaciones-off #boton-qa { transition: none; } @media (prefers-reduced-motion: reduce) { #panel-qa, #velo-qa, .qa__respuesta, .qa__flecha, #boton-qa { transition: none; } }