@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./manrope-latin.woff2') format('woff2'); }
:root { color-scheme: dark; --fondo: #17243f; --texto: #f9f7f2; --acento: #ffc646; --claro: #ffda85; --muted: #bcc8dc; --borde: #e7bd6547; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fondo); }
body { position: relative; min-height: 100svh; display: flex; justify-content: center; padding: max(22px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); color: var(--texto); font-family: 'Manrope', system-ui, sans-serif; background: radial-gradient(ellipse at 50% 0%, #304570a3, transparent 52%), radial-gradient(ellipse at 50% 100%, #0b1529a3, transparent 70%), var(--fondo); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: absolute; inset: 16px; border: 1px solid #ffc64630; border-radius: 2px; 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: 400px; 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: 176px; height: 176px; margin-inline: auto; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 52s linear infinite; pointer-events: none; }
.anillo text { font: 600 10.5px 'Manrope', sans-serif; letter-spacing: 1.5px; fill: var(--claro); }
.logo-disc { position: absolute; inset: 18px; display: grid; place-items: center; border: 1px solid #ffd98140; border-radius: 50%; background: linear-gradient(145deg, #263858, #182641); box-shadow: 0 0 22px #ffc6460d; animation: calor-logo 8s ease-in-out infinite; }
.logo-disc img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orbita { position: absolute; inset: 14px; border: 1px solid #ffd98124; border-radius: 50%; animation: girar 32s linear infinite reverse; pointer-events: none; }
.orbita::after { content: ''; position: absolute; top: 50%; left: -2px; width: 3px; height: 3px; border-radius: 50%; background: var(--claro); box-shadow: 0 0 8px #ffc6468c; }
.intro { margin-top: 9px; }
.intro h1 { color: var(--claro); }
.nombre-chanos { display: block; font: 700 36px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: 2.5px; color: var(--claro); animation: luz-titulo 8s ease-in-out infinite; }
.nombre-local { display: block; margin-top: 5px; font: 700 10.5px/1.5 'Manrope', sans-serif; letter-spacing: 2px; color: var(--texto); }
.sede { display: block; font: 600 10px/1.6 'Manrope', sans-serif; letter-spacing: 2px; color: var(--muted); }
.intro p { margin: 7px 0 5px; color: #efe4ce; font: italic 15px/1.5 Georgia, 'Times New Roman', serif; }
.acciones { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: flex-start; gap: 13px; min-height: 64px; padding: 11px 16px; border: 1px solid var(--borde); border-radius: 8px; background: linear-gradient(120deg, #263858b3, #1b2945d9); color: var(--texto); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.accion-texto { flex: 1; min-width: 0; }
.btn > .icon { color: var(--claro); }
.btn .flecha { width: 15px; height: 15px; opacity: .75; }
.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 #ffda8540; border-radius: 50%; animation: onda 8s 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%, #ffda8514 50%, transparent 65%); transform: translateX(-120%); animation: brillo 8s ease-in-out infinite; pointer-events: none; }
.btn:nth-child(2n)::after { animation-delay: -3.5s; }
.btn-reservar { background: linear-gradient(115deg, #ffe29a, #ffce59 58%, #f4bb3c); border-color: #ffe5a7; color: #17243f; box-shadow: inset 0 1px 0 #fff6, 0 5px 22px #ffc64614; animation: calor-boton 8s ease-in-out infinite; }
.btn-reservar > .icon { color: #17243f; }
.btn-reservar::after { background: linear-gradient(110deg, transparent 35%, #fff4 50%, transparent 65%); animation-duration: 9s; }
.btn-carta, .btn-drinks { border-color: #e8bf6966; }
.btn small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.btn-reservar small { color: #263652; }
.btn-ubicacion { padding-block: 11px; }
.btn-resena { flex-direction: column; justify-content: center; gap: 5px; padding-block: 11px; font-size: 13px; 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: 14px; height: 14px; fill: var(--claro); stroke: var(--claro); stroke-width: .5; animation: estrella 8s 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: 32px; margin-top: 18px; }
.red { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 600; }
.icono { width: 42px; height: 42px; display: grid; place-items: center; color: #e9d6a7; border: 1px solid var(--borde); border-radius: 10px; background: #233452; transition: transform .2s ease, box-shadow .2s ease; }
footer { margin-top: 16px; font-size: 10px; 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 #0003; } .red:hover .icono { transform: translateY(-2px); box-shadow: 0 0 16px #ffc64624; } 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: 24px; } .btn { padding-inline: 12px; gap: 9px; font-size: 13px; } .btn .flecha { width: 12px; height: 12px; } .nombre-local { font-size: 10px; letter-spacing: 1.5px; } .sede { letter-spacing: 1.5px; } .redes { gap: 28px; } .resena-label { gap: 7px; } .btn-resena { font-size: 12px; } }
@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: .45; } 100% { transform: scale(5); opacity: 0; } }
@keyframes estrella { 0%, 65%, 100% { filter: brightness(1); } 80% { filter: brightness(1.2) drop-shadow(0 0 2px #ffc64680); } }
.ambiente { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.luz-velo { position: absolute; inset: -15%; background: radial-gradient(ellipse at 33% 23%, #d6ae4124, transparent 30%), radial-gradient(ellipse at 68% 72%, #52739f30, transparent 40%); animation: luz-ambiente 28s ease-in-out infinite alternate; }
.geometria { position: absolute; top: 38%; width: 220px; height: 220px; fill: none; stroke: var(--acento); stroke-width: .6; opacity: .11; }
.geometria-izquierda { left: calc(50% - 530px); }
.geometria-derecha { right: calc(50% - 530px); transform: rotate(180deg); }
.esquina { position: absolute; width: 27px; height: 27px; fill: none; stroke: #e5dbbc; stroke-width: 1.15; background: var(--fondo); opacity: .65; }
.esquina-superior-izquierda { top: 10px; left: 10px; }
.esquina-superior-derecha { top: 10px; right: 10px; transform: rotate(90deg); }
.esquina-inferior-izquierda { bottom: 10px; left: 10px; transform: rotate(-90deg); }
.esquina-inferior-derecha { bottom: 10px; right: 10px; transform: rotate(180deg); }
@keyframes luz-titulo { 0%, 100% { text-shadow: 0 0 15px #ffc6460d; } 50% { text-shadow: 0 0 20px #ffc64630; } }
@keyframes calor-logo { 0%, 100% { box-shadow: 0 0 22px #ffc6460d; } 50% { box-shadow: 0 0 25px #ffc64620; } }
@keyframes calor-boton { 0%, 100% { box-shadow: inset 0 1px 0 #fff6, 0 5px 20px #ffc64614; } 50% { box-shadow: inset 0 1px 0 #fff6, 0 5px 25px #ffc64624; } }
@keyframes luz-ambiente { from { transform: translate(-5%, -3%) rotate(-3deg); } to { transform: translate(5%, 3%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .logo-disc, .nombre-chanos, .luz-velo, .btn, .estrellas svg { animation: none; }
  .anillo { animation-duration: 80s; }
  .orbita { animation-duration: 100s; }
  .btn::before, .btn::after { animation-duration: 18s; }
  .btn::before { border-color: #ffda8524; }
  .btn::after { background: linear-gradient(110deg, transparent 35%, #ffda850c 50%, transparent 65%); }
  .btn, .icono { transition: none; }
}