:root { color-scheme: dark; --fondo: #0d0c0b; --texto: #faf2e9; --acento: #d29158; --claro: #f5c48c; --muted: #c4b8ab; --borde: #bd7c465e; }
* { 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: radial-gradient(ellipse at 50% 6%, #6e381d42, transparent 47%), radial-gradient(ellipse at 50% 95%, #52241626, transparent 60%), var(--fondo); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 12px; border: 1px solid #da955d36; border-radius: 24px; box-shadow: inset 0 0 0 4px var(--fondo), inset 0 0 0 5px #da955d16; 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; }
.medallon { position: relative; width: 182px; height: 182px; margin-inline: auto; animation: entrar-medallon .9s cubic-bezier(.2,.8,.2,1) both; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 34s linear infinite; pointer-events: none; }
.anillo text { font: 700 12px 'Manrope', sans-serif; letter-spacing: 2px; fill: var(--acento); }
.logo-disc { position: absolute; inset: 27px; display: grid; place-items: center; border: 1px solid var(--acento); border-radius: 50%; background: linear-gradient(#0d0c0b75, #0d0c0b99), url('./brasas.webp') center / cover; box-shadow: 0 0 0 4px var(--fondo), 0 0 0 5px #da955d40, 0 12px 30px #0006; animation: calor-logo 6s ease-in-out infinite; }
.logo-disc img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px #000); }
.orbita { position: absolute; inset: 21px; border: 1px solid #d2915840; border-radius: 50%; animation: girar 22s linear infinite reverse; pointer-events: none; }
.orbita::after { content: ''; position: absolute; top: 50%; left: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--claro); box-shadow: 0 0 10px #ed9a55; }
.intro { margin-top: 8px; }
.intro h1 { color: var(--claro); }
.nombre-humo { display: block; font: 400 clamp(44px, 13vw, 52px)/1.25 'Rye', Georgia, serif; letter-spacing: 3px; color: #e3ad74; --metal-titulo: linear-gradient(0deg, #855338 0%, #b77b4e 22%, #f8d3a1 48%, #c38b5c 74%, #f6d4ad 100%); -webkit-text-stroke: .5px #ebc5a09c; filter: drop-shadow(0 2px 0 #3b2518) drop-shadow(0 0 12px #d3783625); animation: luz-brasa 6s 1.8s ease-in-out infinite; }
.nombre-humo .letra { display: inline-block; background-image: var(--metal-titulo); background-size: 100% 220%; background-position: 0 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: letra-entrada .65s calc(.08s + var(--letra) * .085s) cubic-bezier(.2,.8,.2,1) both; }
.nombre-local { display: block; margin-top: 2px; font: 800 14px/1.5 'Manrope', sans-serif; letter-spacing: 2.7px; color: var(--texto); animation: texto-entrada .65s .28s ease-out backwards; }
.sede { display: block; margin-top: 5px; font: 600 12px/1.5 'Manrope', sans-serif; letter-spacing: 1.4px; color: var(--muted); animation: texto-entrada .65s .36s ease-out backwards; }
.intro p { margin: 10px 0 18px; color: var(--muted); font-size: 16px; line-height: 1.5; animation: texto-entrada .65s .44s ease-out backwards; }
.acciones { display: flex; flex-direction: column; gap: 10px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 13px 16px; border: 1px solid var(--borde); border-radius: 15px; background: linear-gradient(130deg, #33241b, #1c1612); color: var(--claro); 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::before { content: ''; position: absolute; width: 90px; height: 90px; right: -65px; bottom: -65px; border: 1px solid #eda36670; 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%, #ffdbac24 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 { background: linear-gradient(180deg, #f5d1a0, #d6a068 60%, #ac7044); border-color: #e7b37f; color: #29170b; box-shadow: inset 0 1px 0 #fff6, 0 7px 25px #eda36628; animation: calor-boton 5s ease-in-out infinite; }
.btn-reservar::after { background: linear-gradient(110deg, transparent 35%, #fff7 50%, transparent 65%); animation-duration: 5.5s; }
.btn-restaurante { border-color: #b77b4e99; background: linear-gradient(115deg, #51342277, #251d16); }
.btn small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.btn-ubicacion { padding-block: 10px; }
.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(--claro); stroke: var(--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; }
.estrellas svg:nth-child(3) { animation-delay: .3s; }
.estrellas svg:nth-child(4) { animation-delay: .45s; }
.estrellas svg:nth-child(5) { animation-delay: .6s; }
.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(--claro); border: 1px solid var(--borde); border-radius: 50%; background: #eda3660b; 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(--claro); box-shadow: 0 8px 24px #0005; } .red:hover .icono { transform: translateY(-3px); box-shadow: 0 0 20px #eda36630; } footer a:hover { text-decoration: underline; } }
.btn:active { transform: scale(.98); }
@media (min-width: 700px) { body { align-items: center; padding-block: 36px; } }
@media (max-width: 359px) { body { padding-inline: 20px; } .btn { padding-inline: 12px; gap: 8px; font-size: 14px; } .nombre-local { letter-spacing: 1.7px; } .sede { letter-spacing: .7px; } .redes { gap: 21px; } .resena-label { gap: 7px; } }
@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%, 65%, 100% { filter: brightness(1); } 80% { filter: brightness(1.5) drop-shadow(0 0 3px #ffae56); } }
.ambiente { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.humo-velo { position: absolute; inset: -12%; background: url('./humo-textura.webp') center bottom / cover no-repeat; opacity: .22; mix-blend-mode: screen; animation: humo-suave 24s ease-in-out infinite alternate; }
.humo-velo::after { content: ''; position: absolute; inset: 0; background: inherit; opacity: .45; animation: humo-cruzado 32s -16s ease-in-out infinite alternate; }
.brasa { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #dc995c; box-shadow: 0 0 9px #d97d36; animation: brasa-subir 13s ease-in-out infinite; }
.brasa-uno { left: calc(50% - 170px); bottom: 16%; }
.brasa-dos { left: calc(50% + 155px); bottom: 38%; animation-delay: -4s; }
.brasa-tres { left: calc(50% - 110px); bottom: 65%; animation-delay: -8s; }
@keyframes entrar-medallon { from { transform: scale(.9) rotate(-10deg); } to { transform: none; } }
@keyframes luz-brasa { 0%, 100% { filter: drop-shadow(0 2px 0 #3b2518) drop-shadow(0 0 8px #d378361c); } 50% { filter: drop-shadow(0 2px 0 #3b2518) drop-shadow(0 0 18px #df87384d); } }
@keyframes calor-logo { 0%, 100% { box-shadow: 0 0 0 4px var(--fondo), 0 0 0 5px #da955d40, 0 10px 25px #0006; } 50% { box-shadow: 0 0 0 4px var(--fondo), 0 0 0 5px #da955d70, 0 0 25px #df79362e; } }
@keyframes calor-boton { 0%, 100% { box-shadow: inset 0 1px 0 #fff6, 0 5px 18px #d2915825; } 50% { box-shadow: inset 0 1px 0 #fff6, 0 5px 26px #d2915845; } }
@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: #d29158a0; box-shadow: 0 0 14px #d291582e; } }
@keyframes letra-entrada { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes texto-entrada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes humo-suave { from { transform: translate(-3%, 7%) scale(1.04); } to { transform: translate(3%, -6%) scale(1.08); } }
@keyframes humo-cruzado { from { transform: translate(7%, 3%) scale(1.06); } to { transform: translate(-6%, -5%) scale(1.08); } }
@keyframes brasa-subir { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .6; } 85% { opacity: 0; transform: translate(16px, -85px); } }
@media (prefers-reduced-motion: reduce) {
  .medallon, .brasa { animation: none; }
  .nombre-humo .letra, .nombre-local, .sede, .intro p { animation-duration: .45s; }
  .humo-velo { opacity: .18; animation-duration: 36s; }
  .humo-velo::after { animation-duration: 46s; }
  .brasa { display: none; }
  .anillo { animation-duration: 80s; }
  .orbita { animation-duration: 65s; }
  .btn::before { animation-duration: 12s; }
  .btn::after { animation-duration: 12s; }
  .btn, .icono { transition: none; }
}