@font-face { font-family: 'Manrope'; src: url('./manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { color-scheme: dark; --fondo: #0c0b09; --texto: #f5f0e6; --acento: #cba750; --claro: #f2d77c; --muted: #bbb3a4; --borde: #cba75045; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fondo); }
body { min-height: 100svh; display: flex; justify-content: center; padding: max(18px, 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% 5%, #31533b24, transparent 52%), radial-gradient(ellipse at 50% 100%, #7d5a170e, transparent 55%), var(--fondo); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 12px; border: 1px solid #cba75024; border-radius: 20px; 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: 432px; 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: 100%; max-width: 390px; margin-inline: auto; }
.marca h1 { line-height: 0; }
.logo-flotante { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 9px #d9af291a); animation: flotar-logo 7s ease-in-out infinite; }
.halo-logo { position: absolute; inset: 15% 13% 10%; border-radius: 50%; background: radial-gradient(ellipse, #d5b35219, transparent 68%); filter: blur(22px); animation: respirar-luz 10s ease-in-out infinite; pointer-events: none; }
.intro { margin-top: 0; }
.sede { display: block; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: 2.7px; color: var(--acento); }
.sede span { padding-inline: 6px; }
.intro p { margin: 9px 0 13px; color: var(--texto); font-size: 15px; font-weight: 400; line-height: 1.5; }
.firma { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 20px; color: var(--acento); font-size: 10px; }
.firma span { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, #cba75066); }
.firma span:last-child { transform: rotate(180deg); }
.acciones { display: flex; flex-direction: column; gap: 12px; }
.acciones-contacto { margin-top: 12px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 13px; min-height: 74px; padding: 16px 19px; border: 1px solid var(--borde); border-radius: 14px; background: linear-gradient(120deg, #1a241b, #121510 72%); color: var(--texto); font-size: 15px; font-weight: 700; 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: 70px; height: 70px; right: -50px; bottom: -50px; border: 1px solid #e3c66745; border-radius: 50%; animation: onda 9s ease-out infinite; pointer-events: none; }
.btn:nth-child(2n)::before { animation-delay: -4s; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, transparent 35%, #f2d77c16 50%, transparent 65%); transform: translateX(-120%); animation: brillo 9s ease-in-out infinite; pointer-events: none; }
.btn:nth-child(2n)::after { animation-delay: -4.5s; }
.btn-carta { min-height: 90px; background: linear-gradient(115deg, #f4df95, #dcc06b 55%, #bc9544); border-color: #e7cf83; color: #211a0c; box-shadow: inset 0 1px 0 #fff7, 0 5px 23px #cba75018; animation: calor-boton 7s ease-in-out infinite; }
.btn-carta::after { background: linear-gradient(110deg, transparent 35%, #fff5 50%, transparent 65%); animation-duration: 8s; }
.carta-titulo { display: block; font: 400 25px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: .1px; }
.pdf-tag { margin-left: auto; padding: 4px 6px; border: 1px solid #211a0c2b; border-radius: 4px; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.btn-reservar { border-color: #cba75066; background: linear-gradient(120deg, #242b1c, #15190f); }
.boton-icono { display: grid; place-items: center; width: 37px; height: 37px; flex: none; color: var(--claro); border: 1px solid #cba75030; border-radius: 10px; background: #cba7500a; }
.btn-carta .boton-icono { width: 42px; height: 42px; color: inherit; border-color: #211a0c24; background: #211a0c06; }
.accion-texto { text-align: left; }
.btn small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.btn-carta small { margin-top: 6px; color: #3b301a; }
.flecha { width: 17px; height: 17px; margin-left: auto; color: var(--acento); }
.btn-carta .flecha { margin-left: 0; color: inherit; }
.btn-resena { flex-direction: column; justify-content: center; gap: 10px; padding-block: 13px; font-size: 14px; }
.resena-label { display: flex; align-items: center; justify-content: center; gap: 12px; }
.google-logo { width: 29px; height: 29px; flex: none; background: #fff; border-radius: 50%; padding: 4px; }
.estrellas { display: flex; gap: 5px; }
.estrellas svg { width: 15px; height: 15px; fill: var(--claro); stroke: var(--claro); stroke-width: .5; animation: estrella 8s ease-in-out infinite; }
.estrellas svg:nth-child(2) { animation-delay: -.25s; }
.estrellas svg:nth-child(3) { animation-delay: -.5s; }
.estrellas svg:nth-child(4) { animation-delay: -.75s; }
.estrellas svg:nth-child(5) { animation-delay: -1s; }
.redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.red { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60px; border: 1px solid #cba75055; border-radius: 12px; color: var(--texto); background: linear-gradient(115deg, #1d2b20, #151b14); font-size: 13px; font-weight: 700; }
.icono { width: 27px; height: 27px; display: grid; place-items: center; color: var(--claro); border-radius: 8px; transition: transform .2s ease, box-shadow .2s ease; animation: luz-red 10s ease-in-out infinite; }
.icono .icon { width: 20px; height: 20px; }
.red:nth-child(2) .icono { animation-delay: -5s; }
.ubicacion { margin-top: 22px; }
.direccion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 4px; border-radius: 8px; color: var(--acento); font-size: 11px; font-weight: 600; }
.direccion .icon { width: 17px; height: 17px; }
.direccion small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }
footer { margin-top: 18px; font-size: 10px; color: #aba394; }
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 { border-color: #cba75070; } .red:hover .icono { transform: translateY(-2px); box-shadow: 0 0 20px #cba75020; } footer a:hover { text-decoration: underline; } }
.btn:active { transform: scale(.98); }
@media (min-width: 700px) { body { align-items: center; padding-block: 30px; } }
@media (max-width: 359px) { body { padding-inline: 22px; } .btn { padding-inline: 13px; gap: 10px; font-size: 13px; } .boton-icono { width: 32px; height: 32px; } .sede { letter-spacing: 2px; } .intro p { font-size: 13px; } .redes { gap: 10px; } .red { gap: 5px; font-size: 12px; } .resena-label { gap: 9px; } .resena-label .accion-texto { max-width: 185px; } .flecha { width: 15px; height: 15px; } .direccion small { max-width: 230px; } }
@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.25) drop-shadow(0 0 3px #e9ce70); } }
.ambiente { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.luz-ambiente { position: absolute; inset: -15%; background: radial-gradient(ellipse at 30% 25%, #44714a17, transparent 40%), radial-gradient(ellipse at 75% 70%, #e7c45a0e, transparent 38%); animation: luz-lenta 22s ease-in-out infinite alternate; }
.curvas { position: absolute; top: 8%; width: clamp(130px, 23vw, 360px); height: 82%; fill: none; stroke: #cba750; stroke-width: .8; opacity: .16; filter: drop-shadow(0 0 6px #d2ae4940); animation: curvas-lentas 19s ease-in-out infinite alternate; }
.curvas path + path { stroke-width: .35; opacity: .55; }
.curvas .trazo { stroke: #f2d77c; stroke-width: 1.6; opacity: .85; stroke-dasharray: 60 1000; animation: recorrer-curva 18s linear infinite; }
.curvas-derecha .trazo { animation-delay: -9s; }
.curvas-izquierda { right: calc(50% + 245px); }
.curvas-derecha { left: calc(50% + 245px); scale: -1 1; animation-delay: -9.5s; }
.destello { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e2c269; box-shadow: 0 0 10px #e2c26970; animation: destello-suave 11s ease-in-out infinite; }
.destello-uno { left: calc(50% - 187px); top: 16%; }
.destello-dos { left: calc(50% + 170px); top: 36%; animation-delay: -4s; }
.destello-tres { left: calc(50% - 159px); top: 72%; animation-delay: -8s; }
@media (max-width: 699px) { .curvas { top: 3%; height: 65%; opacity: .1; width: 145px; } .curvas-izquierda { right: calc(50% + 75px); } .curvas-derecha { left: calc(50% + 75px); } .destello-uno { left: 8%; } .destello-dos { left: 91%; } .destello-tres { left: 6%; } }
@keyframes flotar-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes respirar-luz { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes calor-boton { 0%, 100% { box-shadow: inset 0 1px 0 #fff5, 0 5px 18px #cba75018; } 50% { box-shadow: inset 0 1px 0 #fff5, 0 5px 26px #cba7502a; } }
@keyframes luz-red { 0%, 70%, 100% { filter: brightness(1); } 85% { filter: brightness(1.2) drop-shadow(0 0 5px #e2c26940); } }
@keyframes luz-lenta { from { transform: translate(-3%, 2%); } to { transform: translate(3%, -2%); } }
@keyframes curvas-lentas { from { transform: translateY(0); } to { transform: translateY(-18px); } }
@keyframes recorrer-curva { from { stroke-dashoffset: 1060; } to { stroke-dashoffset: 0; } }
@keyframes destello-suave { 0%, 100% { opacity: .1; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .destello, .trazo, .btn::before, .btn::after { display: none; }
  .halo-logo { opacity: .55; }
  .btn:hover, .btn:active, .red:hover .icono { transform: none; }
}