/* Hero / banner (#inicio .hero) — réplica del banner ya publicado por el cliente: logo centrado sobre negro + botones Reserva/Carta */

.hero {
  position: relative;
  overflow: visible; /* los cócteles del botón Carta sobresalen del propio botón */
  padding-block: 0; /* pisa el padding-block genérico de `section` en base.css — el espaciado real lo controla .hero-inner */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  text-align: center;
  /* En móvil, sin min-height propio: forzar el hero a casi toda la pantalla dejaba un hueco
     negro vacío y desangelado entre el botón Carta y el separador de Bienvenidos. El hero mide
     lo que ocupa su contenido (logo + botones + aire), y el separador llega justo debajo. */
}
.hero-smoke {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 16rem; /* responsive: ancho fluido + alto fijo por breakpoint, ver media query más abajo */
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: screen; /* el fondo negro de la imagen se funde con el negro del banner; solo se ve el humo claro */
  pointer-events: none;
  /* sin esto, object-fit:cover corta el humo en seco justo en el borde inferior de la caja;
     con la máscara se desvanece hacia el negro en vez de cortarse de golpe */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.hero-inner {
  position: relative;
  z-index: 1; /* por encima de .hero-smoke */
  width: 100%; /* sin esto, el flex column se ajusta al ancho del contenido y .hero-actions no llega a envolver en móvil (se recorta por overflow) */
  padding-top: var(--space-7); /* aire en móvil sobre el logo, para que no quede pegado al borde superior */
  padding-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8); /* separación entre el logo y los botones Reserva/Carta */
}
.hero-logo {
  position: relative; /* ancla el halo radial de ::before al centro del logo */
  width: 100%; /* mismo motivo que en .hero-inner/.hero-actions: sin ancho definido, el % del <img> no tiene contra qué resolverse y no se limita al viewport */
  margin: 0;
  line-height: 0;
}
/* halo radial oscuro detrás del logo: el drop-shadow por sí solo no basta cuando el humo
   pasa justo por detrás con mix-blend-mode:screen (queda muy claro ahí) — esto oscurece
   la zona completa del emblema antes de que el filter recorte el contorno */
.hero-logo::before {
  content: "";
  position: absolute;
  inset: -15% -5%;
  z-index: -1;
  background: radial-gradient(ellipse 55% 65% at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
  pointer-events: none;
}
.hero-logo img {
  /* calculado directamente contra el viewport (no como % de un ancestro flex) para evitar que el ancho quede indefinido y la imagen se recorte en móvil */
  width: min(calc(100vw - 3rem), 40rem);
  height: auto;
  margin-inline: auto; /* la imagen es display:block (reset global) — sin esto no hay text-align que la centre, queda pegada a la izquierda */
  /* halo oscuro pegado a la silueta del logo (no un degradado suelto): sin esto "THE GARRISON" pierde contraste
     contra el humo claro de .hero-smoke, sobre todo en la mitad inferior del emblema.
     Reforzado (antes: 0.9/0.85/0.7 de opacidad) porque el humo seguía comiéndose el trazo fino de las letras. */
  filter:
    drop-shadow(0 0 3px rgba(0, 0, 0, 1))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 16px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 30px rgba(0, 0, 0, 0.8));
}
.hero-actions {
  width: 100%; /* sin esto, align-items:center del padre deja que este flex row crezca a su max-content y no llegue a envolver en móvil */
  display: flex;
  flex-direction: column; /* Reserva y Carta apiladas en móvil */
  align-items: center;
  justify-content: center;
  gap: var(--space-7); /* espacio entre los dos botones, incluido el de abajo en móvil */
}

/* Base común para ambos botones (Gris original) */
.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 3.2em;
  background: rgba(255, 255, 255, 0.1); /* Gris translúcido de antes */
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.hero-btn:hover, .hero-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}


/* =========================================
   FORMA 1: Botón RESERVA (Hijo directo)
   ========================================= */
.hero-actions > .hero-btn {
  /* Forma basada en tu imagen: esquinas opuestas redondeadas creando un efecto dinámico/inclinado */
  border-radius: 24px 6px 24px 6px;
  /* Borde base sutil para que la animación destaque */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Animación: Barra blanca recorriendo el borde de Reserva */
.hero-actions > .hero-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* Grosor de la línea blanca */
  background: linear-gradient(90deg, transparent, #ffffff, transparent) no-repeat;
  background-size: 50% 100%;
  
  /* Máscara CSS para vaciar el centro y que el efecto SOLO ocurra en el borde */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  animation: border-sweep 3s ease-in-out infinite;
  pointer-events: none; /* Evita que interfiera con los clics */
}

@keyframes border-sweep {
  0% { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}


/* =========================================
   FORMA 2: Botón CARTA (Dentro del wrap)
   ========================================= */
.hero-btn-wrap .hero-btn {
  /* Mantiene la forma antigua de banner con las puntas (diferenciándolo del de reservas) */
  clip-path: polygon(0 0, 100% 0, 91% 50%, 100% 100%, 0 100%, 9% 50%);
}


.hero-btn-wrap {
  position: relative;
  display: inline-flex;
}
.hero-btn-coctel {
  position: absolute;
  width: 4rem;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  z-index: 2;
}
.hero-btn-coctel--2 { right: -0.6rem; bottom: -1.6rem; }

/* Escritorio (mobile-first: overrides siempre al final del archivo, nunca antes de la regla base
   con la misma especificidad — si no, la regla base que viene después en el código gana igual). */
@media (min-width: 900px) {
  .hero {
    /* min-height propio para que la entrada respire: en vez de apretar logo+botones+foto+insignia
       en el primer golpe de vista, el hero ocupa su propia pantalla y el resto llega al hacer scroll */
    min-height: 92vh;
  }
  .hero-inner {
    padding-top: var(--space-3); /* en escritorio ya centra verticalmente por min-height+flex, no hace falta el aire extra de móvil */
    gap: var(--space-7); /* separación original: en escritorio Reserva/Carta van en fila, no hace falta tanto aire vertical como en móvil */
  }
  .hero-actions {
    flex-direction: row; /* Reserva y Carta lado a lado en escritorio */
  }
  .hero-smoke {
    height: 40rem; /* más recorrido en escritorio antes de que empiece a desvanecer */
  }
}