/* ============================================================
   MEYRA — Hero: layout split (panel + imagen), franja inferior
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "panel media"
    "lower lower";
  height: calc(100vh - var(--nav-height, 93px));
  height: calc(100dvh - var(--nav-height, 93px));
  min-height: 540px;
  background: var(--c-coffee-900);
  color: var(--c-cream-50);
  overflow: hidden;
}
.hero__panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 30% 10%, rgba(160,100,40,0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(138,150,81,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 50%, #2e1a0e 0%, #231309 55%, #1a0f07 100%);
}
/* Textura sutil tipo grano de papel (SVG inline vía data URI) */
.hero__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fadeUp .8s ease-out;
  padding: clamp(12px, 3vh, 40px) clamp(8px, 1.2vw, 14px) clamp(8px, 2vh, 20px);
  width: 100%;
  gap: 0;
}
.hero__eyebrow {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.4vw, 29px);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--c-cream-200);
  font-weight: 400;
  margin: 0 0 4px;
}
.hero__logo {
  width: clamp(180px, 21vw, 268px);
  margin: 0 auto 4px;
  filter: invert(1) hue-rotate(180deg);
}
.hero__tagline {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.4vw, 29px);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--c-cream-100);
  margin: 0 0 10px;
}
.hero__divider {
  width: 80px;
  height: 2px;
  background: var(--c-olive-500);
  clip-path: polygon(0 50%, 8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%);
  margin: 0 auto 10px;
}
.hero__intro {
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 1.78;
  color: var(--c-cream-200);
  margin: 0;
  max-width: 74%;
}

/* ── Franja inferior ancho completo: horario + reserva ── */
.hero__lower {
  grid-area: lower;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #5C3A1E;
  border-top: 1px solid rgba(245, 236, 216, 0.15);
  padding: 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.hero__lower-divider {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138,150,81,0.55), transparent);
}

/* ── Horario: centrado en la franja inferior ── */
.hero__schedule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  color: var(--c-cream-50);
}
.hero__schedule-icon { display: none; }
.hero__schedule-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.hero__schedule-label {
  display: block;
  align-self: stretch;
  text-align: center;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #A0BE5A;
  font-weight: 600;
  white-space: nowrap;
}
.hero__schedule-label::before,
.hero__schedule-label::after {
  content: '';
  display: inline-block;
  width: 52px;
  height: 5px;
  vertical-align: middle;
  background: #A0BE5A;
  letter-spacing: 0;
}
.hero__schedule-label::before {
  margin-right: 12px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.hero__schedule-label::after {
  margin-left: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hero__schedule-value {
  font-family: var(--f-sans);
  font-size: clamp(22px, 2.8vw, 34px);
  color: var(--c-cream-50);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.hero__reserve-title {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-style: italic;
  font-weight: 500;
  color: var(--c-cream-50);
  margin: 0;
  letter-spacing: 0.02em;
}
.hero__reserve-sub {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-olive-500);
  margin: 0;
  font-weight: 600;
}
.hero__reserve-btns {
  display: flex;
  margin-top: 5px;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero__reserve-btns .btn {
  padding: 11px 28px;
  font-size: 13px;
}

.hero__media {
  grid-area: media;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: imageFade 1s ease-out;
  display: block;
}
/* Vineta sutil para integrar imagen con el panel oscuro */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 120px 0 120px -120px rgba(26,15,7,0.9);
}

@keyframes imageFade {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Botones CTA dentro del panel izquierdo ── */
.hero__cta-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__cta-row .btn--secondary {
  background: var(--c-cream-200);
  color: var(--c-coffee-900);
  box-shadow: none;
}
.hero__cta-row .btn--secondary:hover {
  background: var(--c-cream-100);
}

/* ── Estado abierto/cerrado en franja inferior ── */
.hero__status {
  font-size: 0.9rem;
  text-align: center;
}
.hero__status--open {
  color: #A0BE5A;
  font-weight: 600;
}
.hero__status--closed {
  color: var(--c-cream-200);
  opacity: 0.85;
}