/* =============================================================================
   WINE SPOT — Página de reservaciones
   ============================================================================= */

:root {
  --wine:      #7d1024;
  --wine-deep: #5a0b1a;
  --text:      #fff;
  --text-dim:  rgba(255, 255, 255, .72);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Fondo de marca: mismos tonos que la pieza impresa, sin archivo de imagen. */
  background-color: var(--wine-deep);
  background-image:
    radial-gradient(70% 55% at 22% 18%, rgba(168, 34, 58, .95) 0%, transparent 62%),
    radial-gradient(65% 50% at 82% 30%, rgba(122, 14, 34, .9) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 100%, rgba(58, 6, 16, .85) 0%, transparent 70%),
    linear-gradient(165deg, var(--wine) 0%, var(--wine-deep) 100%);
  background-attachment: fixed;
}

@media (max-width: 720px) {
  body { background-attachment: scroll; }
}

a { color: inherit; }
:where(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- estructura ------------------------------------------------------ */

.page {
  width: min(100% - 2rem, 480px);
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 3.5rem) 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: clamp(150px, 38vw, 200px);
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
}

.title {
  margin: 1.5rem 0 1.75rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.title__en { color: rgba(255, 255, 255, .5); }

/* ---------- widget de OpenTable --------------------------------------------- */

.widget {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  min-height: 480px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.ot-iframe {
  display: block;
  width: 100%;
  /* El contenido de OpenTable es un bloque fijo (~260 px + relleno) pegado a la
     izquierda de su iframe. Ajustando el iframe a esa medida y centrándolo, el
     widget queda centrado en la tarjeta. Medido sobre el widget ya publicado. */
  max-width: 280px;
  margin-inline: auto;
  min-height: 480px;
  border: 0;
  opacity: 0;
  transition: opacity .3s ease;
  position: relative;
  z-index: 2;
}
.widget.is-loaded .ot-iframe { opacity: 1; }
.widget.is-loaded .widget__skeleton { display: none; }

.widget__skeleton {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding: 2rem;
}
.widget__skeleton span {
  display: block; height: 2.75rem; border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.widget__skeleton span:nth-child(2) { width: 70%; }
.widget__skeleton span:nth-child(3) { width: 45%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .widget__skeleton span { animation: none; }
  .ot-iframe { transition: none; }
}

/* ---------- textos de apoyo -------------------------------------------------- */

.helper {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: var(--text-dim);
}
.helper a {
  color: #fff;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  font-size: .8rem;
  color: var(--text-dim);
}
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }