:root { color-scheme: dark; --fondo: #0b1a1c; --jade: #17363a; --texto: #f8f0e1; --oro: #e2b25e; --oro-claro: #f7d996; --rojo: #d3242a; --rojo-oscuro: #7c0d12; --muted: #c6bda9; --borde: #e2b25e55; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fondo); }
body { min-height: 100svh; display: flex; justify-content: center; padding: max(26px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom)); color: var(--texto); font-family: 'Manrope', system-ui, sans-serif; background: radial-gradient(ellipse at 50% 4%, #2a575c 0%, #17363a55 38%, transparent 62%), radial-gradient(ellipse at 50% 100%, #3d0f1230, transparent 55%), linear-gradient(180deg, #10272a, var(--fondo) 70%); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 12px; border: 1px solid #e2b25e4d; border-radius: 22px; box-shadow: inset 0 0 0 4px #0b1a1c00, inset 0 0 0 5px #e2b25e1c; pointer-events: none; z-index: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 4px; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip-link { position: absolute; left: 24px; top: -100px; z-index: 3; padding: 12px; background: var(--oro); color: var(--fondo); }
.skip-link:focus { top: 20px; }

/* Medallón y logo animado con identidad */
.medallon { position: relative; width: 190px; height: 190px; margin-inline: auto; animation: entrar-medallon 1s cubic-bezier(.2,.8,.2,1) both; }
.halo { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, #f0a64a3d 0%, #d3242a1f 45%, transparent 70%); filter: blur(6px); animation: halo 5.5s ease-in-out infinite; pointer-events: none; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 40s linear infinite; pointer-events: none; }
.anillo text { font: 700 11.5px 'Manrope', 'Noto Serif TC', sans-serif; letter-spacing: 1.6px; fill: var(--oro); }
.orbita { position: absolute; inset: 20px; border: 1px solid #e2b25e45; border-radius: 50%; animation: girar 24s linear infinite reverse; pointer-events: none; }
.orbita::after { content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff6d8, #f2b04a 60%, #d3242a); box-shadow: 0 0 12px #f2a443; }
.logo-disc { position: absolute; inset: 29px; border-radius: 50%; cursor: pointer; animation: flotar 6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.logo-disc img { display: block; width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 8px 14px #0009) drop-shadow(0 0 1px #f7d99680); animation: aura-logo 5.5s ease-in-out infinite; }
.destello { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.destello::before { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, #fff3d455 48%, #ffffff8a 50%, #fff3d455 52%, transparent 62%); transform: translateX(-75%); animation: destello 7s 1.2s ease-in-out infinite; mix-blend-mode: soft-light; }
.destello::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 38%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(ellipse at 50% 100%, #ffc96b40, transparent 70%); animation: escamas 4.5s ease-in-out infinite; mix-blend-mode: screen; }

/* Nombre */
.intro { margin-top: 10px; }
.nombre-chifa { display: block; font: 700 12px/1.4 'Manrope', sans-serif; letter-spacing: 6px; color: var(--oro); text-indent: 6px; animation: texto-entrada .7s .15s ease-out backwards; }
.nombre-fung { display: block; margin-top: 2px; font: 400 clamp(40px, 12vw, 48px)/1.15 'Marcellus', Georgia, serif; letter-spacing: 1px; white-space: nowrap; --metal: linear-gradient(0deg, #9a6a2c 0%, #d6a352 25%, #fbe3a8 50%, #d9a554 75%, #fff0c8 100%); filter: drop-shadow(0 2px 0 #3a2408) drop-shadow(0 0 10px #e2b25e22); animation: luz-nombre 6s 2s ease-in-out infinite; }
.nombre-fung .letra { display: inline-block; background-image: var(--metal); background-size: 100% 220%; background-position: 0 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--oro-claro); animation: letra-entrada .7s calc(.1s + var(--letra) * .07s) cubic-bezier(.2,.8,.2,1) both; }
.intro p { margin: 6px 0 4px; color: var(--texto); font: 400 italic 17px/1.45 'Marcellus', Georgia, serif; animation: texto-entrada .7s .5s ease-out backwards; }
.sede { display: block; margin-bottom: 18px; font: 600 11.5px/1.5 'Manrope', sans-serif; letter-spacing: 2.2px; color: var(--muted); animation: texto-entrada .7s .6s ease-out backwards; }
.sede::before, .sede::after { content: ''; display: inline-block; width: 22px; height: 1px; margin: 0 10px 4px; background: linear-gradient(90deg, transparent, var(--oro)); vertical-align: middle; }
.sede::after { background: linear-gradient(90deg, var(--oro), transparent); }

/* Botones */
.acciones { display: flex; flex-direction: column; gap: 11px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 13px; min-height: 58px; padding: 12px 16px 12px 18px; border: 1px solid var(--borde); border-radius: 16px; background: linear-gradient(130deg, #1d3d41, #10272a); color: var(--oro-claro); font-size: 15.5px; font-weight: 800; line-height: 1.35; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn > svg, .btn > span { position: relative; z-index: 1; }
.accion-texto { flex: 1; }
.btn small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.flecha { width: 18px; height: 18px; opacity: .7; }
.btn::before { content: ''; position: absolute; width: 96px; height: 96px; right: -68px; bottom: -68px; border: 1px solid #f7d99670; border-radius: 50%; animation: onda 6.5s ease-out infinite; pointer-events: none; }
.btn:nth-child(2n)::before { animation-delay: -3.2s; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, transparent 35%, #ffe2a626 50%, transparent 65%); transform: translateX(-120%); animation: brillo 6.5s ease-in-out infinite; pointer-events: none; }
.btn:nth-child(2n)::after { animation-delay: -3.6s; }
.btn-carta { border-color: #f2c76c; background: radial-gradient(ellipse at 18% 0%, #ff6a4a55, transparent 55%), linear-gradient(160deg, #e0342f, #b5141b 55%, #7c0d12); color: #fff7e6; box-shadow: inset 0 1px 0 #ffd9a066, inset 0 0 0 3px #7c0d1200, 0 8px 26px #d3242a40; animation: calor-boton 5s ease-in-out infinite; }
.btn-carta small { color: #ffe3b8; }
.btn-carta .flecha { opacity: .9; }
.btn-carta::after { background: linear-gradient(110deg, transparent 35%, #ffe7b066 50%, transparent 65%); animation-duration: 5.5s; }
.btn-carta::before { border-color: #ffd58a99; }
.btn-resena { flex-direction: column; gap: 9px; padding-block: 14px; color: var(--texto); text-align: center; }
.resena-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.google-logo { width: 25px; height: 25px; flex: none; background: #fff; border-radius: 50%; padding: 3px; }
.estrellas { display: flex; gap: 5px; }
.estrellas svg { width: 18px; height: 18px; fill: var(--oro-claro); stroke: var(--oro-claro); stroke-width: .5; animation: encender-estrella .6s ease-out both, estrella 5s 1.5s ease-in-out infinite; }
.estrellas svg:nth-child(2) { animation-delay: .15s, 1.65s; }
.estrellas svg:nth-child(3) { animation-delay: .3s, 1.8s; }
.estrellas svg:nth-child(4) { animation-delay: .45s, 1.95s; }
.estrellas svg:nth-child(5) { animation-delay: .6s, 2.1s; }
.lema { margin-top: 20px; font: 400 italic 15px/1.5 'Marcellus', Georgia, serif; color: var(--muted); letter-spacing: .3px; }
.lema span { margin: 0 8px; font-size: 9px; color: var(--rojo); vertical-align: 2px; }
footer { margin-top: 14px; font-size: 12px; color: var(--muted); }
footer a { color: var(--oro-claro); font-weight: 700; text-underline-offset: 3px; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); border-color: var(--oro-claro); box-shadow: 0 10px 26px #0006; } footer a:hover { text-decoration: underline; } }
.btn:active { transform: scale(.98); }

/* Ambiente */
.ambiente { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.luz-jade { position: absolute; left: 50%; top: -30%; width: 140vmax; height: 90vmax; margin-left: -70vmax; background: radial-gradient(ellipse at center, #2f6a6f33, transparent 60%); animation: respirar 14s ease-in-out infinite alternate; }
.nubes { position: absolute; width: min(380px, 70vw); height: auto; fill: none; stroke: var(--oro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
.nubes-arriba { top: 8%; left: -6%; animation: nube-deriva 30s ease-in-out infinite alternate; }
.dragon-fondo { position: absolute; left: 50%; bottom: -2%; width: min(640px, 150vw); height: auto; margin-left: max(-320px, -75vw); opacity: .2; -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent); mask-image: linear-gradient(0deg, #000 55%, transparent); animation: dragon-respira 16s ease-in-out infinite alternate; }
.brasa { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f6c766; box-shadow: 0 0 9px #f08a2c; animation: brasa-subir 13s ease-in-out infinite; }
.brasa-uno { left: calc(50% - 175px); bottom: 18%; }
.brasa-dos { left: calc(50% + 158px); bottom: 40%; animation-delay: -4s; }
.brasa-tres { left: calc(50% - 120px); bottom: 66%; animation-delay: -8s; }
.brasa-cuatro { left: calc(50% + 120px); bottom: 10%; animation-delay: -10.5s; }
.sellos { position: absolute; z-index: 6; pointer-events: none; top: 12px; right: max(22px, calc(50% - 300px)); display: flex; gap: 7px; animation: texto-entrada 1s .8s ease-out backwards; }
.sello { writing-mode: vertical-rl; font: 700 12px/1 'Noto Serif TC', 'Songti TC', serif; letter-spacing: 5px; padding: 8px 4px; }
.sello-rojo { order: 2; background: var(--rojo); color: #fff2e0; box-shadow: 0 6px 14px #0006; }
.sello-oro { margin-top: 0; border: 1px solid #e2b25e99; border-top: 0; color: var(--oro-claro); }

/* Capa del dragón */
.dragon-capa { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: none; }
.dragon-capa.activa { display: block; }
html.dragon-fuego .nombre-fung { filter: drop-shadow(0 2px 0 #3a2408) drop-shadow(0 0 22px #ff9a3c88); transition: filter .4s ease; }
html.dragon-vuelta .logo-disc img { animation: retorno 1.6s ease-out both; }

@media (min-width: 700px) { body { align-items: center; padding-block: 40px; } }
@media (max-width: 359px) { body { padding-inline: 20px; } .medallon { width: 176px; height: 176px; } .btn { padding-inline: 13px; gap: 10px; font-size: 14.5px; } .btn small { font-size: 12px; } .sede { letter-spacing: 1.4px; } .sede::before, .sede::after { width: 14px; margin-inline: 6px; } .sellos { right: 16px; } .sello { font-size: 10.5px; letter-spacing: 4px; } }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aura-logo { 0%, 100% { filter: drop-shadow(0 8px 14px #0009) drop-shadow(0 0 1px #f7d99680); } 50% { filter: drop-shadow(0 12px 16px #0008) drop-shadow(0 0 12px #f2b04a66); } }
@keyframes halo { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes destello { 0%, 62% { transform: translateX(-75%); } 88%, 100% { transform: translateX(75%); } }
@keyframes escamas { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes retorno { 0% { filter: drop-shadow(0 0 30px #ffcf6b) brightness(1.35); } 100% { filter: drop-shadow(0 8px 14px #0009) drop-shadow(0 0 1px #f7d99680) brightness(1); } }
@keyframes brillo { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes onda { 0% { transform: scale(.5); opacity: 0; } 30% { opacity: .7; } 100% { transform: scale(5); opacity: 0; } }
@keyframes estrella { 0%, 65%, 100% { filter: brightness(1); } 80% { filter: brightness(1.45) drop-shadow(0 0 3px #ffbf5a); } }
@keyframes entrar-medallon { from { transform: scale(.88) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes luz-nombre { 0%, 100% { filter: drop-shadow(0 2px 0 #3a2408) drop-shadow(0 0 8px #e2b25e1a); } 50% { filter: drop-shadow(0 2px 0 #3a2408) drop-shadow(0 0 18px #f2b04a4d); } }
@keyframes calor-boton { 0%, 100% { box-shadow: inset 0 1px 0 #ffd9a066, 0 6px 20px #d3242a30; } 50% { box-shadow: inset 0 1px 0 #ffd9a066, 0 8px 30px #e2493a55; } }
@keyframes encender-estrella { from { filter: brightness(.5); } to { filter: brightness(1); } }
@keyframes letra-entrada { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes texto-entrada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes respirar { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes nube-deriva { from { transform: translateX(-12px) translateY(4px); } to { transform: translateX(22px) translateY(-6px); } }
@keyframes dragon-respira { from { opacity: .15; transform: translateY(6px); } to { opacity: .26; transform: translateY(-4px); } }
@keyframes brasa-subir { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .7; } 85% { opacity: 0; transform: translate(16px, -90px); } }

@media (prefers-reduced-motion: reduce) {
  .medallon, .brasa, .logo-disc, .halo, .destello::before, .destello::after { animation: none; }
  .brasa { display: none; }
  .nombre-fung, .nombre-fung .letra, .nombre-chifa, .sede, .intro p, .sellos, .estrellas svg { animation: none; }
  .anillo { animation-duration: 90s; }
  .orbita { animation-duration: 70s; }
  .nubes-arriba { animation-duration: 70s; }
  .dragon-fondo { animation: none; }
  .btn::before, .btn::after { animation-duration: 13s; }
  .btn, .logo-disc { transition: none; }
}