/*!
Theme Name: Lolas Website Landing
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shaken-spirit
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Lola's is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

/* ----- Background video ----- */
.video-background {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* ----- General container ----- */
.front-container {
  position: relative;
  width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  overflow: visible;
}

/* ===============================
   HEADER TOP
================================ */

.header-top {
  display: flex;
  justify-content: space-between; /* redes izquierda / menú derecha */
  align-items: center;

  padding: 10px 70px 0 70px; /* top right bottom left */
  position: relative;
  z-index: 20;
}

/* ===============================
   SOCIAL ICONS
================================ */

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;
  background: #ffffff;
  backdrop-filter: blur(4px);

  color: #3B85FF;
  font-size: 14px;

  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: white;
  color: #1e73be;
  transform: translateY(-3px);
}

.social-icons a {
  text-decoration: none !important; /* quita la rayita */
  border: none;
}

.social-icons a:hover {
  text-decoration: none !important;
}

.mobile-social {
  display: none;
}

/* ===============================
   HERO CENTER SECTION
================================ */

.hero-center {
  position: absolute;
  top: 30%; /* ajusta si lo quieres más arriba */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  animation: fadeInUp 1.2s ease both;
}

.hero-logo {
  width: 700px;   /* más equilibrado */
  max-width: 85%;
  margin-bottom: -70px;
}

.hero-title {
  font-family: 'Montserrat', serif; /* elegante */
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: -15px;
}


.hero-subtitle {
  font-family: 'Montserrat', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 5px;
  font-style: italic;
  opacity: 0.9;
}

/* ===============================
   TOP BUTTONS – UPDATED STYLE
================================ */

.top-buttons {
  display: flex;
  gap: 18px; /* más espacio entre botones */
  animation: fadeIn 1s ease both;
}

.top-buttons a {
  position: relative;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Montserrat', serif;
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 🎁 BUY GIFT CARD */
.top-buttons a.btn-gift {
  background: #ffffff;
  color: #0073e6;
}

.btn-gift::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 130px;
  padding-top: -100px;
  width: 50px;
  height: 50px;
  background: url('./images/orange.png') no-repeat center/contain;
}

/* 📞 CONTACT */
.btn-contact {
  background: #ff7a00;
}

.btn-contact::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 88px;
  padding-top: -100px;
  width: 50px;
  height: 50px;
  background: url('./images/blue.png') no-repeat center/contain;
}

/* 👥 JOIN */
.btn-join {
  background: #0073e6;
}

.btn-join::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 140px;
  padding-top: -100px;
  width: 30px;
  height: 30px;
  background: url('./images/butterfly.png') no-repeat center/contain;
}

/* Hover */
.top-buttons a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ===============================
   CONTACT SIDE PANEL
================================ */

/* PANEL */
.contact-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  height: 100vh;
  background: #ff7a00;
  color: white;
  z-index: 9999;
  transition: right 0.4s ease;
  padding: 40px 30px;
  overflow-y: auto;
}

.contact-panel.active {
  right: 0;
}

/* CLOSE */
.close-panel {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
}

/* ===============================
   TOP SECTION
================================ */

.contact-top {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;
}

/* LEFT TEXT */
.contact-left {
  flex: 2;
}

/* RIGHT LOGO */
.contact-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.3);
}

/* BLOCKS */
.contact-block {
  margin-bottom: 14px;
}

.contact-block h3 {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.contact-block p {
  margin: 2px 0;
  font-size: 14px;
  opacity: 0.95;
}

/* MAP FULL WIDTH */
.contact-map iframe {
  width: 100%;
  height: 280px;
  border: none;
}

/* LOGO */
.contact-logo img {
  max-width: 100px;
  height: auto;
  transition: 0.3s ease;
}

.contact-logo img:hover {
  transform: scale(1.05);
}


/* ===============================
   TOP CORNER DECORATIONS
================================ */

.corner-decoration {
  position: absolute;
  width: 250px; /* ajustable */
  z-index: 5;
  pointer-events: none; /* no bloquea clicks */
}

.corner-left {
  top: -40px;   /* más pegado arriba */
  left: -80px;  /* más hacia la izquierda */
}

.corner-right {
  top: -40px;
  right: 0;
}

/* ===============================
   BOTTOM SECTION
================================ */

.bottom-section {
  position: absolute;
  bottom: 190px; /* controla aquí la altura */
  left: 48%;
  transform: translateX(-50%);
  z-index: 10;
}

.bottom-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* un poco menos separación */
  flex-wrap: nowrap; 
}

/* HOPATCONG */
.location-item.hopatcong a {
  background: #ffffffe1;
  color: #3B85FF;
}

.location-item.hopatcong i {
  background: #48b9ffe5;
  color: white; /* color icono */
}

.hopatcong .location-card {
  background: #ff2200cc;
}

.location-item.hopatcong a {
  position: relative;
}

.location-item.hopatcong a::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  background: url('./images/taco.png') no-repeat center/contain;
  pointer-events: none;
}

/* ROCKAWAY */
.location-item.rockaway a {
  background: #ff6105de;
  color: white;
}

.location-item.rockaway i {
  background: #FF543A;
}

.rockaway i {
  background: #cc6200;
}

.rockaway .location-card {
  background: #ff610593;
}

.location-item.rockaway a {
  position: relative;
}

.location-item.rockaway a::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: url('./images/dish.png') no-repeat center/contain;
  pointer-events: none;
}

/* ELIZABETH */
.location-item.elizabeth a {
  background: #48b9ffd8;
  color: white;
}

.location-item.elizabeth i {
  background: #3B85FF;
}

.elizabeth .location-card {
  background: #3b86ff91;
}

/* Contenedor individual */
.location-item {
  position: relative;
  text-align: center;
}

.location-item.elizabeth a {
  position: relative;
}

.location-item.elizabeth a::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  background: url('./images/pupusas.png') no-repeat center/contain;
  pointer-events: none;
}

@keyframes floatIcon {
  0% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-6px); }
  100% { transform: translateY(-50%) translateY(0); }
}

.location-item a::after {
  animation: floatIcon 3s ease-in-out infinite;
}

/* Botón principal */
/* Botón estilo card dividido */
.location-item a {
  display: flex;
  align-items: center;
  overflow: visible;

  width: 280px;   /* más ancho */
  height: 50px;   /* más alto */

  font-size: 20px;   /* más grande */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: white;
  font-family: 'Montserrat', serif; /* elegante */
  background: #2f74b5;
  text-decoration: none;

  transition: 0.3s ease;
}

/* Franja izquierda */
.location-item i {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 70px;   /* más ancho */
  height: 50px;  /* igual que el botón */

  font-size: 35px;

  background: #a01e1e;
}

/* Texto del botón */
.location-item a span {
  flex: 1;
  text-align: center;
}

.location-item a:hover i {
  animation: bounceIcon 0.4s ease;
}

@keyframes bounceIcon {
  0% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  60% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ===============================
   SUBMENU ORDEER/RESERVE
================================ */

/* Contenedor general */
.location-submenu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -80px;

  display: flex;
  gap: 14px;

  z-index: 20;

  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Botones */
.submenu-btn {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s ease;
}

/* Order */
.order-btn {
  background: #ff7b00c7;
  color: white;
}

.order-btn:hover {
  background: #e66d00;
  transform: translateY(-3px);
}

/* Reservation */
.reserve-btn {
  background: #3b86ffb0;
  color: white;
}

.reserve-btn:hover {
  background: #3b86ffb0;
  transform: translateY(-3px);
}

@media (min-width: 769px){
/* Tarjetita oculta */
.location-card {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;

  overflow: hidden;

  padding: 8px;
  font-size: 13px;
  line-height: 1.4;

  background: #1e73be7f;
  color: white;
  border-radius: 4px;

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* Hover → aparece la tarjeta */
.location-item:hover .location-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px);
}
}

.location-card a.continue-btn {
  display: none;
}

/* Oculta submenu cuando Elizabeth esté en hover */
.bottom-section:has(.location-item.elizabeth:hover) .location-submenu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===============================
   ORDER MODAL
================================ */

.order-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10000;
}

.order-modal.active {
  opacity: 1;
  visibility: visible;
}

.order-modal-content {
  width: 85%;
  max-width: 320px;

  background: white;
  border-radius: 18px;
  padding: 25px 20px;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;

  transform: scale(0.9);
  transition: 0.3s ease;
}

.order-modal.active .order-modal-content {
  transform: scale(1);
}

.order-modal-content h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}

/* Botones */
.order-location-btn {
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  transition: 0.2s ease;
}

/* Colores por location */
.order-location-btn.hop {
  background: #48B9FF;
}

.order-location-btn.eli {
  background: #0073e6;
}

.order-location-btn.rock {
  background: #ff7a00;
}

.order-location-btn:active {
  transform: scale(0.97);
}

/* Botón cerrar */
.order-close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

/* ===============================
   ANIMATIONS
================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ===============================
   FEATURES ICONS
================================ */

.features-section {
  position: absolute;
  bottom: 140px; /* controla altura */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.features-wrapper {
  display: flex;
  justify-content: center;
  gap: 120px;
}

.feature-item {
  position: relative;
  text-align: center;
  cursor: pointer;
}

.feature-item img {
  width: 70px;
  transition: transform 0.3s ease;
}

/* Hover animation */
.feature-item:hover img {
  transform: scale(1.15);
}

/* ===============================
   MODERN FOOTER
================================ */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  padding: 8px 0; /* más delgado */
  font-size: 13px;
  text-align: center;

  color: white;
  font-family: 'Montserrat', serif; /* elegante */
  background: #3b86ffb0; /* semi-transparente */
  backdrop-filter: blur(6px); /* efecto glass */
  -webkit-backdrop-filter: blur(6px);

  z-index: 1000;
  overflow: hidden;
}

/* Patrón decorativo */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: 
    url('./images/patterns2.png'),
    url('./images/patterns2.png'),
    url('./images/pattern3.png');

  background-size: 
    150px,
    95px,
    60px;

  background-repeat: repeat;

  opacity: 0.5;

  animation: patternRainMulti 30s linear infinite;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url('./images/pattern1.png');
  background-size: 40px;
  background-repeat: repeat;

  opacity: 0.05;
  filter: blur(1px);

  animation: patternRainAlt 40s linear infinite;
}

@keyframes patternRainMulti {
  0% {
    background-position: 
      0 0,
      120px -300px,
      -200px -500px;
  }

  100% {
    background-position: 
      0 700px,
      220px 500px,
      -300px 300px;
  }
}

@keyframes patternRainAlt {
  0% {
    background-position: 50px -200px;
  }
  100% {
    background-position: -150px 600px;
  }
}

/* Texto centrado */
.footer-content {
  position: relative; /* para que quede sobre el pattern */
  z-index: 2;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
}

.site-footer a:hover {
  opacity: 0.7;
}

/* ===============================
   ORDER MODAL
================================ */

.order-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10000;
}

.order-modal.active {
  opacity: 1;
  visibility: visible;
}

.order-modal-content {
  width: 85%;
  max-width: 320px;

  background: white;
  border-radius: 18px;
  padding: 25px 20px;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;

  transform: scale(0.9);
  transition: 0.3s ease;
}

.order-modal.active .order-modal-content {
  transform: scale(1);
}

.order-modal-content h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}

/* Botones */
.order-location-btn {
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  transition: 0.2s ease;
}

/* Colores por location */
.order-location-btn.hop {
  background: #48B9FF;
}

.order-location-btn.eli {
  background: #0073e6;
}

.order-location-btn.rock {
  background: #ff7a00;
}

.order-location-btn:active {
  transform: scale(0.97);
}

/* Botón cerrar */
.order-close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
}

/* ===============================
   RESERVE MODAL
================================ */

.reserve-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10000;
}

.reserve-modal.active {
  opacity: 1;
  visibility: visible;
}

.reserve-modal-content {
  width: 85%;
  max-width: 320px;

  background: white;
  border-radius: 18px;
  padding: 25px 20px;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;

  transform: scale(0.9);
  transition: 0.3s ease;
}

.reserve-modal.active .reserve-modal-content {
  transform: scale(1);
}

.reserve-modal-content h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}

.reserve-location-btn {
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  transition: 0.2s ease;
}

/* Colores */
.reserve-location-btn.hop {
  background: #48B9FF;
}

.reserve-location-btn.eli {
  background: #0073e6;
}

.reserve-location-btn.rock {
  background: #ff7a00;
}

.reserve-location-btn:hover {
  transform: translateY(-2px);
}

/* Close */
.reserve-close {
  position: absolute;
  top: 12px;
  right: 14px;

  background: none;
  border: none;

  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

/* ===============================
   HAMBURGER
================================ */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 3px;
  transition: 0.3s;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* Ocultar mobile action bar en desktop */
.mobile-action-bar {
  display: none;
}


/* =============================================================================================================================================== */


/* ===============================
   MOBILE RESPONSIVE
================================ */

@media (max-width: 768px) {

html, body {
  height: 100dvh;
  overflow: hidden;
}


.front-container {
  min-height: 100dvh; /* más estable que height */
  display: flex;
  flex-direction: column;
  padding: 20px;
}


  /* HEADER */
.header-top {
  padding: 10px 20px;
}

.social-icons {
  gap: 10px;
}

.social-icons a {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.social-icons {
  display: none;
}

.mobile-social {
  margin-top: 280px;
  display: flex;
  gap: 20px;
}

.mobile-social a {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;


  color: white;
  font-size: 16px;

  transition: 0.3s ease;
}

.mobile-social a:hover {
  color: #ffffff;
}

  /* HERO */
.hero-center {
  flex-grow: 1;  /* importante */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* ahora sí centrado vertical real */
  text-align: center;
}

.hero-logo {
  width: 280px;     /* prueba 260–300 */
  max-width: none;  /*  elimina límite */
  margin-bottom: 10px;
}

.hero-title {
  font-size: 26px;
  letter-spacing: 1px;
}

.hero-subtitle {
  font-size: 14px;
  letter-spacing: 2px;
}

/* MENU */
.menu-toggle {
  display: flex;
}

.top-buttons {
  position: fixed;
  top: 0;
  right: -100%;
  width: 75%;
  height: 100%;
  background: rgba(0, 87, 179, 0.97);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  transition: right 0.4s ease;
}

.top-buttons.active {
  right: 0;
}

.top-buttons a {
  position: relative;
  padding: 14px 20px;
  width: 100%;
  max-width: 260px;
  text-align: center;
}

/* 🎁 BUY GIFT CARD MOBILE */
.top-buttons a.btn-gift::after {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
}

/* 📞 CONTACT MOBILE */
.top-buttons a.btn-contact::after {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
}

/* 👥 JOIN MOBILE */
.top-buttons a.btn-join::after {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
}

.corner-decoration {
  width: 70px;
}

  /* LOCATION BUTTONS */
.bottom-section {
  position: static !important;  /* rompe el absolute del desktop */
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  margin-top: auto;
  padding-bottom: 190px;
  display: flex;
  justify-content: center;
}

.bottom-buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.location-item {
  width: 100%;
}

.location-item a {
  width: 100%;
  max-width: 320px;
  height: 48px;
  font-size: 16px;
}

.location-item i {
  width: 60px;
  height: 48px;
  font-size: 20px;
}

/* ===============================
   MOBILE SPLIT ACTION BAR PRO
================================ */

.mobile-action-bar {
  position: fixed;
  bottom: 40px; /* más arriba del footer */
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 250px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 9999;
}

/* Cada mitad */
.mobile-action-item {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  color: white;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s ease;
}

/* 🟠 Order */
.mobile-action-item.order {
  background: #ff6105cb; /* color sólido */
}

/* 🔵 Reserve */
.mobile-action-item.reserve {
  background: #3b86ffce; /* color sólido */
}

/* Línea divisoria sutil */
.mobile-action-item + .mobile-action-item {
  border-left: 1px solid rgba(255,255,255,0.25);
}

.mobile-action-item i {
  font-size: 18px;
}

/* Touch feedback */
.mobile-action-item:active {
  transform: scale(0.97);
  filter: brightness(1.1);
}

/* ===============================
   MOBILE LOCATION MODAL
================================ */

.location-overlay {
  position: fixed;   /* esto es lo importante */
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10000;
}

.location-overlay.active {
  opacity: 1;
  visibility: visible;
}

.location-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);

  width: 85%;
  max-width: 320px;

  padding: 20px;
  border-radius: 12px;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10001; /* encima del overlay */
}

.location-item.active .location-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.location-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 10000 !important;
}

.bottom-section,
.bottom-buttons,
.location-item {
  position: static !important;
  z-index: auto !important;
}

.location-card {
  position: fixed !important;
  z-index: 10001 !important;
}

.location-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 10000 !important;
}

.location-card a.continue-btn {
  all: unset;               /* rompe herencia visual */
  cursor: pointer;

  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;

  background: #ffffff;
  color: #3b86ffb0;
  text-decoration: none;

  position: relative;
}

.location-card a.continue-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 0%;
  height: 1px;

  background: white;
  transition: width 0.3s ease;
}

.location-card a.continue-btn:hover::after {
  width: 100%;
}

/* Panel ocupa toda la pantalla */
  .contact-panel {
    width: 100%;
    right: -100%;
    padding: 30px 20px;
  }

  .contact-panel.active {
    right: 0;
  }

  /* Top section ahora vertical */
  .contact-top {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }

  /* Logo arriba */
  .contact-right {
    order: -1; /* mueve el logo arriba */
    border-left: none; /* quitamos línea vertical */
    padding-left: 0;
    justify-content: center;
  }

  .contact-logo img {
    max-width: 90px;
  }

  /* Texto full width */
  .contact-left {
    width: 100%;
  }

  /* Bloques un poco más compactos */
  .contact-block {
    margin-bottom: 12px;
  }

  .contact-block h3 {
    font-size: 16px;
  }

  .contact-block p {
    font-size: 13px;
  }

  /* Mapa más pequeño para móvil */
  .contact-map iframe {
    height: 220px;
  }

  /* Close button un poco más grande para touch */
  .close-panel {
    font-size: 30px;
    top: 15px;
    right: 20px;
  }

/* ===============================
   DECORATIVE CORNERS MOBILE
================================ */

.corner-left {
  top: -10px;
  left: -20px;
  width: 90px;
}

.corner-right {
  top: -10px;
  right: -20px;
  width: 90px;
}

/* Botón cerrar */
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;

  background: none;
  border: none;
  color: white;

  font-size: 22px;
  font-weight: bold;

  cursor: pointer;
}

/* ===============================
   RESERVE MODAL
================================ */

.reserve-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;

  z-index: 10000;
}

.reserve-modal.active {
  opacity: 1;
  visibility: visible;
}

.reserve-modal-content {
  width: 85%;
  max-width: 320px;

  background: white;
  border-radius: 18px;
  padding: 25px 20px;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;

  transform: scale(0.9);
  transition: 0.3s ease;
}

.reserve-modal.active .reserve-modal-content {
  transform: scale(1);
}

.reserve-location-btn {
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: white;
  transition: 0.2s ease;
}

/* Colores */
.reserve-location-btn.hop {
  background: #48B9FF;
}

.reserve-location-btn.eli {
  background: #0073e6;
}

.reserve-location-btn.rock {
  background: #ff7a00;
}

.reserve-location-btn:hover {
  transform: translateY(-2px);
}

/* Close */
.reserve-close {
  position: absolute;
  top: 12px;
  right: 14px;

  background: none;
  border: none;

  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

/* Ocultar action bar cuando menú está abierto */
.mobile-action-bar.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
  transition: 0.3s ease;
}

/* ===============================
   FEATURE ICONS MOBILE FIX
================================ */

.features-section {
  position: relative;
  width: 100%;
  margin-top: 180px;
  display: flex;
  justify-content: center;
  padding-right: 35px;
}

.features-wrapper {
  width: 100%;
  max-width: 260px; /* más compacto */

  display: flex;
  justify-content: center; /* centrados */
  align-items: center;
  gap: 18px; /* controla el espacio entre ellos */
}

/* Cada icono ocupa el mismo espacio */
.feature-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icono más pequeño */
.feature-item img {
  width: 38px;   /* tamaño ideal */
  height: auto;
  transition: transform 0.25s ease;
}

/* Efecto touch */
.feature-item:active img {
  transform: scale(1.15);
}

/* Texto */
.feature-text {
  margin-top: -20px;
  font-size: 7px;
  text-align: center;
  opacity: 1;
  font-weight: bold;
  max-width: 85px;          /* controla el ancho del texto */
  line-height: 1.2;         /* espacio entre líneas */
  word-break: break-word;   /* permite dividir bonito */
}

  /* FOOTER */
.site-footer {
  font-size: 11px;
  padding: 6px 10px;
}
/* Ocultar botón cerrar del menú cuando contact panel está activo */
.contact-panel.active ~ .menu-toggle,
.contact-panel.active ~ .modal-close {
  display: none !important;
}

body.contact-open .menu-toggle,
  body.contact-open .modal-close {
    opacity: 0;
    pointer-events: none;
  }

}

/* Desktop: ocultar botón cerrar */
@media (min-width: 769px) {
  .location-card .modal-close {
    display: none;
  }
}

/* =============================================================================================================================================== */

/* =====================================
   TABLET (769px – 1024px)
   Basado en Mobile First
===================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  html, body {
    height: 100vh;
    overflow: hidden;
  }

  .front-container {
    height: 100vh;
    padding: 25px 40px;
    justify-content: space-between;
  }

  /* ================= HEADER ================= */

  .header-top {
    padding: 10px 60px 0 60px; /* más aire */
  }

  .social-icons {
    display: flex;
    gap: 12px;
  }

  .mobile-social {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  /* ================= TOP BUTTONS ================= */

  .top-buttons {
    position: static;
    flex-direction: row;
    height: auto;
    width: auto;
    background: transparent;
    justify-content: flex-end; /* los manda a la derecha */
    gap: 16px;
    margin-right: 30px; /* 🔥 separación del borde */
  }

  .top-buttons a {
    padding: 8px 16px;
    font-size: 12px;
    max-width: none;
  }

  .btn-gift::after,
  .btn-contact::after,
  .btn-join::after {
    width: 28px;
    height: 28px;
    right: -18px;
  }

  /* ================= HERO ================= */

  .hero-center {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-logo {
    width: 480px;
    margin-bottom: -30px;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 16px;
    letter-spacing: 3px;
  }

  /* ================= LOCATIONS ================= */

  .bottom-section {
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 0;
  }

  .bottom-buttons {
    flex-direction: row;
    gap: 30px; /* menos espacio */
  }

  .location-item a {
    width: 210px; /* 🔥 más pequeños */
    height: 42px;
    font-size: 15px;
  }

  .location-item i {
    width: 50px;
    height: 42px;
    font-size: 20px;
  }

  /* Reducir imágenes decorativas */
  .location-item.hopatcong a::after {
    width: 35px;
    height: 35px;
    right: -15px;
  }

  .location-item.rockaway a::after {
    width: 40px;
    height: 40px;
    right: -18px;
  }

  .location-item.elizabeth a::after {
    width: 50px;
    height: 50px;
    right: -20px;
  }

  /* ================= FEATURES ================= */

  .features-section {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }

  .features-wrapper {
    max-width: none;
    gap: 70px;
  }

  .feature-item img {
    width: 55px;
  }

  .feature-text {
    font-size: 9px;
    margin-top: 6px;
  }

  /* ================= CONTACT PANEL ================= */

  .contact-panel {
    width: 420px;
  }

  /* ================= ACTION BAR ================= */

  .mobile-action-bar {
    display: none !important;
  }

  /* ================= FOOTER ================= */

  .site-footer {
    font-size: 12px;
    padding: 6px 0;
  }

}