:root { color-scheme: dark; --fondo: #082a4c; --texto: #fffaf0; --acento: #eabf27; --claro: #ffd85a; --rojo: #e70112; --negro: #0b0c0c; --muted: #c3cfdf; --borde: #fffaf05c; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fondo); }
body { min-height: 100svh; display: flex; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom)); color: var(--texto); font-family: 'Manrope', system-ui, sans-serif; background: var(--fondo); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; z-index: 2; inset: 12px; border: 1px solid #eabf2740; border-radius: 24px; box-shadow: inset 0 0 0 4px var(--fondo), inset 0 0 0 5px #e7011238; pointer-events: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--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; }
.icon-fill { fill: currentColor; stroke: none; }
.skip-link { position: absolute; left: 24px; top: -100px; z-index: 3; padding: 12px; background: var(--acento); color: var(--fondo); }
.skip-link:focus { top: 20px; }
.marca { position: relative; width: min(258px, 70vw); aspect-ratio: 1; margin: -6px auto 0; }
.marca-logo { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(transparent, #000 4.5%, #000 95.5%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(transparent, #000 4.5%, #000 95.5%, transparent); mask-composite: intersect; animation: flotar 7s ease-in-out infinite; }
.destellos { position: absolute; inset: 0; pointer-events: none; }
.destello { position: absolute; width: 16px; height: 16px; fill: var(--acento); filter: drop-shadow(0 0 6px #eabf2799); opacity: .2; transform: scale(.55); animation: titilar 4.8s ease-in-out infinite; }
.d-uno { top: 4%; left: 47%; width: 13px; height: 13px; }
.d-dos { top: 30%; left: -9%; animation-delay: -1.2s; }
.d-tres { top: 20%; right: -8%; width: 12px; height: 12px; animation-delay: -2.6s; }
.d-cuatro { bottom: 9%; left: -4%; width: 12px; height: 12px; animation-delay: -3.5s; }
.d-cinco { bottom: 14%; right: -6%; animation-delay: -.5s; }
.intro { margin-top: 2px; }
.intro h1 { color: var(--texto); }
.nombre-local { display: flex; align-items: center; justify-content: center; gap: 9px; font: 800 12px/1.5 'Manrope', sans-serif; letter-spacing: 4px; color: var(--acento); animation: texto-entrada .65s .2s ease-out backwards; }
.mini-destello { width: 10px; height: 10px; fill: var(--acento); }
.nombre-cristina { display: block; margin-top: -2px; font: 700 clamp(38px, 11vw, 44px)/1.1 'Fredoka', 'Manrope', sans-serif; letter-spacing: 1.5px; color: var(--texto); text-shadow: 0 3px 0 var(--rojo), 0 5px 0 var(--negro); animation: texto-entrada .65s .28s ease-out backwards, luz-nombre 6s 1.5s ease-in-out infinite; }
.intro p { margin: 10px 0 20px; color: var(--muted); font-size: 15px; line-height: 1.5; animation: texto-entrada .65s .36s ease-out backwards; }
.acciones { display: flex; flex-direction: column; gap: 14px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 13px 16px; border: 1.5px solid var(--borde); border-radius: 15px; background: linear-gradient(130deg, #13273f, #0b0c0c); color: var(--texto); font-size: 15px; font-weight: 800; line-height: 1.4; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn > svg, .btn > span { position: relative; z-index: 1; }
.btn > .icon { color: var(--acento); }
.btn::before { content: ''; position: absolute; width: 90px; height: 90px; right: -65px; bottom: -65px; border: 1px solid #eabf2770; border-radius: 50%; animation: onda 6s ease-out infinite; pointer-events: none; }
.btn:nth-child(2n)::before { animation-delay: -3s; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, transparent 35%, #fff4cc22 50%, transparent 65%); transform: translateX(-120%); animation: brillo 6s ease-in-out infinite; pointer-events: none; }
.btn:nth-child(2n)::after { animation-delay: -3.5s; }
.btn-reservar { min-height: 62px; background: linear-gradient(180deg, #ff2f3b, var(--rojo) 55%, #b4000d); border: 2px solid var(--acento); color: #fff; box-shadow: inset 0 1px 0 #fff5, 0 0 0 3px var(--negro), 0 0 0 5px var(--texto), 0 10px 26px #e7011238; animation: calor-boton 5s ease-in-out infinite; }
.btn-reservar > .icon { color: #fff; }
.btn-reservar::before { border-color: #ffd85a66; }
.btn-reservar::after { background: linear-gradient(110deg, transparent 35%, #fff6 50%, transparent 65%); animation-duration: 5.5s; }
.btn small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.btn-reservar small { color: #ffe3e5; }
.btn-carta { padding-block: 10px; text-align: left; border-color: #eabf2780; background: linear-gradient(130deg, #173a63, #0b0c0c); }
.btn-ubicacion { padding-block: 10px; text-align: left; }
.btn small + small { margin-top: 0; }
.btn-resena { flex-direction: column; gap: 9px; padding-block: 14px; color: var(--texto); }
.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(--acento); stroke: var(--acento); 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: .12s, 1.7s; }
.estrellas svg:nth-child(3) { animation-delay: .24s, 1.9s; }
.estrellas svg:nth-child(4) { animation-delay: .36s, 2.1s; }
.estrellas svg:nth-child(5) { animation-delay: .48s, 2.3s; }
.redes { display: flex; justify-content: center; gap: 29px; margin-top: 22px; }
.red { display: flex; flex-direction: column; align-items: center; gap: 7px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.icono { width: 46px; height: 46px; display: grid; place-items: center; color: var(--acento); border: 1.5px solid var(--borde); border-radius: 50%; background: #0b0c0c66; transition: transform .2s ease, box-shadow .2s ease; animation: luz-red 7s ease-in-out infinite; }
.red:nth-child(2) .icono { animation-delay: -2.3s; }
.red:nth-child(3) .icono { animation-delay: -4.6s; }
footer { margin-top: 22px; font-size: 12px; color: var(--muted); }
footer a { color: var(--claro); font-weight: 700; text-underline-offset: 3px; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); border-color: var(--acento); box-shadow: 0 8px 24px #0005; } .btn-reservar:hover { box-shadow: inset 0 1px 0 #fff5, 0 0 0 3px var(--negro), 0 0 0 5px var(--texto), 0 12px 30px #e7011255; } .red:hover .icono { transform: translateY(-3px); box-shadow: 0 0 20px #eabf2740; } footer a:hover { text-decoration: underline; } }
.btn:active { transform: scale(.98); }
@media (min-width: 700px) { body { align-items: center; padding-block: 36px; } .marca { width: 232px; } }
@media (max-width: 359px) { body { padding-inline: 20px; } .btn { padding-inline: 12px; gap: 8px; font-size: 14px; } .nombre-local { letter-spacing: 3px; } .redes { gap: 21px; } .resena-label { gap: 7px; } .d-dos, .d-cuatro { left: -5%; } .d-tres, .d-cinco { right: -4%; } }
@keyframes girar { to { transform: rotate(360deg); } }
@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%, 70%, 90%, 100% { filter: brightness(1); } 80% { filter: brightness(1.4) drop-shadow(0 0 4px #eabf27); } }
.ambiente { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.ambiente::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: repeating-conic-gradient(#e7011218 0 25%, transparent 0 50%) 0 0 / 30px 30px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.vapor { position: absolute; bottom: -60px; width: 120px; height: 220px; border-radius: 50%; background: radial-gradient(ellipse at center, #fffaf01c, transparent 68%); filter: blur(10px); animation: vapor-subir 16s ease-in-out infinite; }
.vapor-uno { left: calc(50% - 230px); }
.vapor-dos { left: calc(50% + 110px); animation-delay: -6s; animation-duration: 19s; }
.vapor-tres { left: calc(50% - 60px); animation-delay: -11s; animation-duration: 22s; }
.chispa { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 8px #eabf27aa; animation: chispa-subir 13s ease-in-out infinite; }
.chispa-uno { left: calc(50% - 172px); bottom: 18%; }
.chispa-dos { left: calc(50% + 160px); bottom: 40%; background: var(--rojo); box-shadow: 0 0 8px #e70112aa; animation-delay: -4.5s; }
.chispa-tres { left: calc(50% - 120px); bottom: 62%; background: var(--texto); box-shadow: 0 0 8px #fffaf088; animation-delay: -8.5s; }
@keyframes flotar { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes titilar { 0%, 100% { opacity: .15; transform: scale(.5) rotate(0deg); } 45%, 60% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes luz-nombre { 0%, 100% { filter: drop-shadow(0 0 0 #eabf2700); } 50% { filter: drop-shadow(0 0 12px #eabf2745); } }
@keyframes calor-boton { 0%, 100% { box-shadow: inset 0 1px 0 #fff5, 0 0 0 3px var(--negro), 0 0 0 5px var(--texto), 0 8px 20px #e7011228; } 50% { box-shadow: inset 0 1px 0 #fff5, 0 0 0 3px var(--negro), 0 0 0 5px var(--texto), 0 8px 30px #e7011255; } }
@keyframes encender-estrella { from { filter: brightness(.5); } to { filter: brightness(1); } }
@keyframes luz-red { 0%, 70%, 100% { border-color: var(--borde); box-shadow: none; } 85% { border-color: #eabf27b0; box-shadow: 0 0 14px #eabf2738; } }
@keyframes texto-entrada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vapor-subir { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 25% { opacity: 1; } 80% { opacity: 0; transform: translate(18px, -420px) scale(1.25); } 100% { opacity: 0; transform: translate(18px, -420px) scale(1.25); } }
@keyframes chispa-subir { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .7; } 85% { opacity: 0; transform: translate(14px, -90px); } }
@media (prefers-reduced-motion: reduce) {
  .marca-logo, .vapor, .chispa, .nombre-cristina { animation: none; }
  .vapor, .chispa { display: none; }
  .nombre-local, .intro p { animation-duration: .45s; }
  .destello { animation-duration: 12s; }
  .btn-reservar { animation: none; }
  .btn::before { animation-duration: 12s; }
  .btn::after { animation-duration: 12s; }
  .estrellas svg { animation: encender-estrella .6s ease-out both; }
  .btn, .icono { transition: none; }
}