@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: #10110f;
  --marfil: #f4efdf;
  --oro: #cbb584;
  --claro: #e3d0a6;
  --muted: #b5b4a8;
  --borde: #cbb58445;
}
* { 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)) 22px max(24px, env(safe-area-inset-bottom));
  color: var(--marfil); font-family: 'Manrope', system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #39352b60, transparent 50%), var(--fondo);
  -webkit-font-smoothing: antialiased;
}
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.55;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.icon-fill { fill: currentColor; stroke: none; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 3; padding: 12px; background: var(--marfil); color: var(--fondo); }
.skip-link:focus { top: 16px; }

/* The complete original mark floats as one unit. Its lettering is never recreated. */
.intro { position: relative; padding-top: 7px; }
.intro::before {
  content: ''; position: absolute; top: 0; left: 15%; width: 70%; height: 175px;
  background: radial-gradient(ellipse, #cbb5840d, transparent 65%);
  pointer-events: none; animation: luz-logo 10s ease-in-out infinite;
}
.logo-identidad { position: relative; width: 258px; max-width: 85%; margin-inline: auto; }
.logo-identidad img {
  display: block; width: 100%; height: auto; object-fit: contain;
  animation: flotar-logo 8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px #f4efdf12);
}
.intro p { margin: 12px 0 7px; font: italic 16px/1.45 Georgia, 'Times New Roman', serif; color: #e3ddcb; }
.sede { display: block; font-size: 9px; font-weight: 600; line-height: 1.6; letter-spacing: 2.5px; color: var(--muted); }
.sede span { margin-inline: 5px; color: var(--oro); }

.acciones { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 64px; padding: 11px 15px; border: 1px solid var(--borde);
  border-radius: 4px 17px 4px 17px;
  background: linear-gradient(115deg, #24261ff2, #191b17f2);
  color: var(--marfil); 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: 14px; height: 14px; opacity: .7; }
.btn > svg, .btn > span { position: relative; z-index: 1; }
.btn small { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.formato { border: 1px solid #cbb58440; border-radius: 3px; padding: 2px 4px; color: var(--oro); font-size: 8px; font-weight: 600; letter-spacing: .4px; }

/* A soft vein-like wave and a slow light pass echo the botanical mark. */
.btn::before {
  content: ''; position: absolute; width: 130px; height: 58px; right: -105px; top: 12px;
  border: 1px solid #cbb58440; border-radius: 0 100% 0 100%;
  transform: rotate(-35deg); pointer-events: none; animation: onda-hoja 11s ease-out infinite;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(110deg, transparent 35%, #e3d0a612 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none; animation: brillo 10s ease-in-out infinite;
}
.btn:nth-child(2)::after, .btn:nth-child(2)::before { animation-delay: -2.5s; }
.btn:nth-child(3)::after, .btn:nth-child(3)::before { animation-delay: -5s; }
.btn:nth-child(4)::after, .btn:nth-child(4)::before { animation-delay: -7.5s; }
.btn-reservar {
  background: linear-gradient(115deg, #f6f0df, #e8dcc0);
  border-color: #f4efdf; color: #24251e;
  box-shadow: inset 0 1px 0 #fff8, 0 5px 25px #cbb5840d;
}
.btn-reservar > .icon { color: #424736; }
.btn-reservar small { color: #595c4b; }
.btn-reservar::after { background: linear-gradient(110deg, transparent 35%, #fff6 50%, transparent 65%); }
.btn-carta, .btn-drinks { border-color: #cbb58465; }
.btn-ubicacion { background: linear-gradient(115deg, #20221be8, #171915f2); }
.btn-resena { flex-direction: column; justify-content: center; gap: 5px; padding-block: 10px; font-size: 12px; text-align: center; }
.resena-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.google-logo { width: 23px; height: 23px; flex: none; background: #fff; border-radius: 50%; padding: 3px; }
.estrellas { display: flex; gap: 5px; }
.estrellas svg { width: 12px; height: 12px; fill: var(--oro); stroke: var(--oro); stroke-width: .5; animation: estrella 10s ease-in-out infinite; }
.estrellas svg:nth-child(2) { animation-delay: -.2s; }
.estrellas svg:nth-child(3) { animation-delay: -.4s; }
.estrellas svg:nth-child(4) { animation-delay: -.6s; }
.estrellas svg:nth-child(5) { animation-delay: -.8s; }

.redes { display: flex; justify-content: center; gap: 34px; margin-top: 21px; }
.red { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; border-radius: 8px; color: #cbcabe; font-size: 10px; font-weight: 500; }
.icono {
  width: 42px; height: 42px; display: grid; place-items: center; color: var(--claro);
  border: 1px solid var(--borde); border-radius: 50%; background: #1d2019;
  transition: transform .2s ease, box-shadow .2s ease; animation: luz-social 12s ease-in-out infinite;
}
.red:nth-child(2) .icono { animation-delay: -4s; }
.red:nth-child(3) .icono { animation-delay: -8s; }
.red .icon { width: 20px; height: 20px; }
footer { margin-top: 21px; font-size: 10px; color: #919487; }
footer::before { content: ''; display: block; width: 70px; height: 1px; margin: 0 auto 12px; background: linear-gradient(90deg, transparent, #cbb58455, transparent); }
footer a { color: var(--claro); font-weight: 600; text-underline-offset: 3px; }

/* Background ornaments are the real branch extracted from the supplied PDF. */
.ambiente { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.ambiente::after {
  content: ''; position: absolute; inset: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.luz-velo {
  position: absolute; inset: -12%;
  background: radial-gradient(ellipse at 28% 20%, #cbb5840d, transparent 30%), radial-gradient(ellipse at 76% 73%, #8d9c6720, transparent 42%);
  animation: luz-ambiente 24s ease-in-out infinite alternate;
}
.rama { position: absolute; width: 430px; height: auto; opacity: .07; filter: sepia(.75) saturate(.6); }
.rama-izquierda { top: 8%; left: calc(50% - 680px); --giro: -29deg; animation: rama-brisa 22s ease-in-out infinite; }
.rama-derecha { bottom: 7%; right: calc(50% - 685px); --giro: 147deg; animation: rama-brisa 26s -8s ease-in-out infinite reverse; }
.linea-ambiente { position: absolute; top: 23%; bottom: 19%; width: 1px; background: linear-gradient(transparent, #cbb58433, transparent); }
.linea-izquierda { left: calc(50% - 268px); }
.linea-derecha { right: calc(50% - 268px); }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); border-color: var(--claro); box-shadow: 0 6px 22px #0003; }
  .red:hover .icono { transform: translateY(-2px); border-color: var(--claro); }
  footer a:hover { text-decoration: underline; }
}
.btn:active { transform: scale(.985); }
@media (min-width: 700px) { body { align-items: center; padding-block: 30px; } }
@media (max-width: 699px) {
  .rama { width: 340px; opacity: .045; }
  .rama-izquierda { top: 3%; left: -185px; }
  .rama-derecha { bottom: 2%; right: -185px; }
  .linea-ambiente { display: none; }
}
@media (max-width: 359px) {
  body { padding-inline: 17px; }
  .logo-identidad { width: 238px; }
  .btn { gap: 9px; padding-inline: 12px; font-size: 12px; }
  .btn small { font-size: 9px; }
  .btn .icon { width: 20px; height: 20px; }
  .btn .flecha { width: 12px; height: 12px; }
  .formato { padding-inline: 3px; font-size: 7px; }
  .redes { gap: 24px; }
  .intro p { font-size: 15px; }
}
@keyframes flotar-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes luz-logo { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes brillo { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
@keyframes onda-hoja { 0% { transform: translateX(0) rotate(-35deg) scale(.6); opacity: 0; } 25% { opacity: .35; } 100% { transform: translateX(-60px) rotate(-35deg) scale(3.5); opacity: 0; } }
@keyframes estrella { 0%, 65%, 100% { filter: brightness(1); } 80% { filter: brightness(1.25) drop-shadow(0 0 2px #cbb58470); } }
@keyframes luz-social { 0%, 100% { box-shadow: 0 0 0 #cbb58400; } 50% { box-shadow: 0 0 12px #cbb58412; } }
@keyframes luz-ambiente { from { transform: translate(-3%, -2%); } to { transform: translate(3%, 2%); } }
@keyframes rama-brisa { 0%, 100% { transform: translateY(0) rotate(var(--giro)); } 50% { transform: translateY(-12px) rotate(calc(var(--giro) + 2deg)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rama { transform: rotate(var(--giro)); }
  .btn::after, .btn::before { display: none; }
}