/* ====== Base */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-image: url("images/textura-papel.jpg");
  background-repeat: repeat;
  color: #222;
}

/* Contenedor */
.container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ====== Tipografías y colores del proyecto */
.parrafo-verde{
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 22pt;
  color: #313928;
}

.parrafo-blanco{
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 22pt;
  color: #ffffff;
}

.h2-blanco{
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 52px;
  line-height: 38pt;
  color: #ffffff;
}

.h2-verde{
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 52px;
  line-height: 42pt;
  color: #313928;
}
/* ====== Cabecera */
.cabecera-principal {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.5s ease;
  padding-top: 30px; /* mantiene la separación original */
}

/* Cabecera visible al hacer scroll */
.cabecera-principal.visible {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100px; /* ✅ altura total igual a la versión tablas */
  background-color: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transform: translateY(0);
  opacity: 1;
  padding-top: 0; /* quitamos el margen extra al fijarse */
  display: flex;
  align-items: center; /* centra verticalmente el logo reducido */
}

/* Oculta durante el scroll inicial */
.cabecera-principal.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Logo */
.cabecera-principal .logo {
  height: 140px;
  transition: height 0.4s ease;
}

/* Logo reducido dentro del header fijo */
.cabecera-principal.visible .logo {
  height: 60px !important; /* proporcional dentro de los 100px */
}

/* Distribución de elementos */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 80px;
  padding-right: 80px;
  width: 100%;
}

/* Navegación y redes */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.link-cabecera {
  text-decoration: none;
  color: #313928;
  transition: color 0.3s ease;
}
.link-cabecera:hover { color: #7a8b5b; }

.header-social {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 32px;
}
.header-social img {
  height: 28px;
  width: auto;
  transition: transform 0.2s ease;
}
.header-social img:hover { transform: scale(1.15); }


/* Toggle menú (móvil) */
.nav-toggle { display:none; background:transparent; border:0; padding:8px; margin-left: 8px; }
.hamburger { width:22px; height:2px; background:#313928; display:block; position:relative; }
.hamburger::before, .hamburger::after {
  content:"";
  width:22px;
  height:2px;
  background:#313928;
  position:absolute;
  left:0;
}
.hamburger::before { top:-6px; }
.hamburger::after { top:6px; }


/* ====== Hero / Carrusel */
.hero { position: relative; }

.banner-carrusel {
  position: relative;
  height: 950px;
  width: 100%;
  overflow: hidden;
}

/* ====== Centrado vertical de los textos del carrusel ====== */
.banner-carrusel .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-carrusel .slide.active {
  opacity: 1;
}

/* Animación suave y centrado del texto */
.banner-carrusel .texto-banner {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform: translateY(13%);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease, max-width 0.4s ease;
  position: relative;
  z-index: 5;
}

/* Cuando el slide está activo, se muestra con fade */
.banner-carrusel .slide.active .texto-banner {
  opacity: 1;
  transform: translateY(13%);
}

/* Botones prev/next */
.banner-carrusel .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background-color: rgba(49,57,40,0.7); color: #fff;
  font-size: 24px; border: none; width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; z-index: 10; transition: background-color 0.3s ease;
}
.banner-carrusel .nav-btn:hover { background-color: rgba(49,57,40,1); }
.banner-carrusel .prev { left: 20px; } .banner-carrusel .next { right: 20px; }

/* Bullets */
.banner-carrusel .bullets {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 10;
}
.banner-carrusel .bullets button {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background-color: rgba(255,255,255,0.5); cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.banner-carrusel .bullets button.active { background-color: #ffffff; }
.banner-carrusel .bullets button:hover { transform: scale(1.2); }

/* ====== Sección #menu - platillo camarones ====== */

/* ====== Ajuste real de la imagen en #menu ====== */
#menu .container {
  max-width: none;          /* Quita el límite de 1340px */
  padding: 0;               /* Elimina el padding lateral */
}

#menu .grid-2 {
  grid-template-columns: 60% 40%; /* Ajusta proporción para destacar la imagen */
  align-items: center;
}

#menu .menu-image {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-start; /* Pega la imagen al borde izquierdo */
  align-items: center;
}

#menu .img-camarones {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: left center; /* Asegura que se mantenga pegada */
  transform: scale(1); 
  transition: transform 0.3s ease;
}

/* Escalado responsivo */
@media (max-width: 1599px) {
  #menu .img-camarones { transform: scale(1); }
}
@media (max-width: 1439px) {
  #menu .img-camarones { transform: scale(1); }
}
@media (max-width: 1023px) {
  #menu .img-camarones {
    transform: scale(1);
    object-position: center center;
  }
}

/* ====== Reordenar la sección #menu en vista tablet/móvil ====== */
@media (max-width: 1024px) {
  #menu .grid-2 {
    grid-template-columns: 1fr; /* una sola columna */
  }

  #menu .menu-image {
    order: 1; /* la imagen va primero */
    justify-content: flex-start; /* mantiene la carga hacia la izquierda */
  }

  #menu .menu-content {
    order: 2; /* el texto y botones van después */
    text-align: center; /* centra el contenido si lo prefieres */
    padding: 40px 20px;
  }

  /* Asegura que la imagen se mantenga visualmente bien */
  #menu .img-camarones {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: left center;
    transform: scale(1); /* mantiene tamaño sin recorte */
  }
}

/* ====== Corrección botones centrados en la sección #sucursales ====== */
@media (max-width: 1024px) {
  #sucursales .location-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* centra todo el contenido */
  }

  #sucursales .boton-descarga-dark {
    width: 240px; /* mantiene el ancho original */
    justify-content: flex-start; /* ícono y texto alineados a la izquierda */
    padding-left: 20px; /* mantiene espaciado del ícono */
  }
}

/* ====== Corrección botones centrados en la sección #menu ====== */
@media (max-width: 1024px) {
  #menu .btns-stack {
    align-items: center; /* centra los botones desde que carga */
  }

  #menu .boton-descarga {
    width: 380px; /* mantiene el ancho original */
    justify-content: flex-start; /* conserva icono + texto alineados a la izquierda dentro del botón */
    padding-left: 40px; /* mantiene espaciado correcto */
  }
}

#menu {
  overflow: hidden; /* evita scroll horizontal causado por el grid o imagen */
}

body {
  overflow-x: hidden; /* red de seguridad global para evitar la "burbuja" */
}

/* ====== Ajustes sección #sucursales ====== */
#sucursales .title-center {
  text-align: center; /* centra el título horizontalmente */
}

#sucursales .title-center img {
  display: inline-block;
  margin: 0 auto; /* asegura el centrado del elemento */
}

/* Tarjetas sin fondo */
#sucursales .location-card {
  background: transparent; /* elimina el fondo blanco */
  box-shadow: none; /* elimina la sombra */
  border: none; /* elimina cualquier borde residual */
  padding: 22px;
  text-align: center;
}

/* ====== Ajustes sección #facturación ====== */
#facturacion .image-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

#facturacion .image-col img {
  width: 100%;
  height: auto;
  transform: scale(1.3);
  transition: transform 0.3s ease;
}

/* Escalado responsivo */
@media (max-width: 1599px) {
  #facturacion .image-col img { width: 95%; }
}
@media (max-width: 1439px) {
  #facturacion .image-col img { width: 88%; }
}
@media (max-width: 1023px) {
  #facturacion .image-col img { width: 78%; }
}
@media (max-width: 768px) {
  #facturacion .image-col img { width: 72%; }
}



/* ====== Secciones */
.section { padding: 80px 0; }
.section-menu { background-image: url("images/textura-menu.jpg"); background-repeat: repeat; }
.locations { background: transparent; }
.billing { background-color:#e5e3e0; }
.contact { background: transparent; }

.section-icon { display:block; margin-bottom: 12px; }

.grid-2 {
  display:grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
}
.img-fluid { width: 100%; height: auto; display:block; }

.btns-stack { display:flex; flex-direction: column; gap: 20px; }
.btns-two { display:flex; gap: 20px; flex-wrap: wrap; }

/* Location cards */
.locations-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}
.location-card {
  background: rgba(255,255,255,0.9);
  padding:22px; border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05); text-align:center;
}

/* ====== Botones proyecto (respetando tus estilos) */
.boton-descarga {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  padding-left: 40px;
  width: 380px; height: 70px;
  background-color: #ffffff; color: #303928;
  border: none; border-radius: 9999px;
  text-decoration: none;
  font-family: "DM Serif Display", serif;
  font-size: 22px; font-style: italic;
  gap: 25px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}
.boton-descarga:hover { box-shadow: 0px 8px 20px rgba(0,0,0,1); transform: translateY(-10px); }
.boton-descarga .icono-boton { width: 38px; height: 38px; }

.boton-descarga-dark {
  display: inline-flex; align-items: center; justify-content: left;
  padding-left: 20px; width: 240px; height: 70px;
  background-color: #313928; color: #ffffff;
  border: none; border-radius: 9999px; text-decoration: none;
  font-family: "DM Serif Display", serif; font-size: 22px; font-style: italic;
  gap: 18px; transition: all 0.2s ease;
}
.boton-descarga-dark:hover { transform: translateY(-10px); }
.boton-descarga-dark .icono-boton { width: 49px; height: 47px; }

/* ====== Contacto */
.contact-wrap {
  display:grid; grid-template-columns: 1fr 1fr;
  min-height: 800px;
}
.contact-image {
  background-position: right center; background-repeat: no-repeat; background-size: cover;
}
.contact-panel {
  background-color:#e5e3e0; display:flex; align-items:center; justify-content:center;
}
.contact-form {
  display:flex; flex-direction: column; align-items: center; gap: 20px; margin-top:14px;
}
.contact-form input,
.contact-form textarea {
  width: 500px; height: 60px; padding: 10px;
  border: 1px solid #ccc; border-radius: 5px;
  background-color: #ffffff; color:#000000; font-size: 16px;
}
.contact-form textarea { height: 160px; resize: vertical; }
.contact-form ::placeholder { color:#b0b0b0; }
.contact-submit { width: 360px; height: 80px; }

/* ====== Redes sociales */
.redes-sociales,
.redes-sociales-blanco {
  display:flex; justify-content: flex-end; align-items: center; gap: 40px;
}
.redes-sociales img { height:28px; width:auto; }
.redes-sociales-blanco img {
  height: 28px; width:auto; filter: brightness(0) invert(1);
  transition: transform 0.2s ease;
}
.redes-sociales-blanco img:hover { transform: scale(1.15); }

/* ====== Footer */
.site-footer {
  background:#313928; color:#fff; padding:28px 0;
}
.footer-inner {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; align-items:center;
}
.footer-col img { display:block; }

/* ====== Ajuste de imágenes de texto en el carrusel ====== */
.banner-carrusel .texto-banner {
  max-width: 90%;  /* ✅ escalar proporcionalmente */
  height: auto;
  transition: transform 1s ease, opacity 1s ease, max-width 0.4s ease;
}

/* ====== Reglas responsive ====== */

/* ====== Responsivo: mantiene el centrado y escalado ====== */
@media (max-width: 1599px) {
  .banner-carrusel .texto-banner { max-width: 85%; }
}
@media (max-width: 1439px) {
  .banner-carrusel .texto-banner { max-width: 80%; }
}
@media (max-width: 1023px) {
  .banner-carrusel .texto-banner { max-width: 75%; }
}
@media (max-width: 768px) {
  .banner-carrusel .texto-banner { max-width: 70%; }
}
/* ============================= */
/* ======= RESPONSIVE CSS ======= */
/* ============================= */

/* 1600 - 2048px: sin cambios (vista base) */

/* 1440 - 1599px: escalar imágenes/elementos manteniendo estructura */
@media (max-width: 1599px) and (min-width: 1440px) {
  .banner-carrusel { height: 900px; }
  .banner-carrusel .slide { height: 900px; }
  .texto-banner { max-width: 95%; }
  .cabecera-principal .logo { height: 130px; }
}

/* <= 1280px: pequeños ajustes */
@media (max-width: 1280px) {
  .container { max-width: 1200px; }
  .banner-carrusel { height: 820px; }
  .banner-carrusel .slide { height: 820px; }
}

/* <= 1024px: Tablet */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .locations-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-image { min-height: 320px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  .primary-nav { display:none; position:absolute; right:16px; top:100%; background:rgba(255,255,255,0.95); backdrop-filter: blur(6px); padding:12px; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,0.15); }
  .primary-nav.open { display:flex; flex-direction: column; gap:10px; }
  .nav-toggle { display:block; }

  .banner-carrusel { height: 700px; }
  .banner-carrusel .slide { height: 700px; }
  .texto-banner { max-width: 92%; }

  .contact-form input, .contact-form textarea { width: 100%; }
}

/* <= 768px: Móvil */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .cabecera-principal .logo { height: 100px; }
  .banner-carrusel { height: 520px; }
  .banner-carrusel .slide { height: 520px; }
  .texto-banner { max-width: 94%; }

  .btns-two { flex-direction: column; }
  .boton-descarga, .boton-descarga-dark { width: 100%; justify-content: center; padding-left: 0; }

  .footer-inner { grid-template-columns: 1fr; text-align:center; gap: 12px; }
  .redes-sociales, .redes-sociales-blanco { justify-content: center; }
}

/* ====== Responsive: centrado en vista de una sola columna ====== */
@media (max-width: 1024px) {
  #facturacion .grid-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #facturacion .content-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #facturacion .btns-two {
    justify-content: center;
  }

  #facturacion .boton-descarga-dark {
    width: 240px; /* mantiene su tamaño original */
    justify-content: flex-start; /* ícono y texto alineados a la izquierda */
    padding-left: 20px;
  }

  #facturacion .image-col {
    order: 2; /* fuerza que la imagen vaya debajo */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }

  #facturacion .content-col {
    order: 1; /* asegura que el texto quede arriba */
  }
}
/* ====== Ajuste de márgenes para texto largo en #facturación ====== */
@media (max-width: 1024px) {
  #facturacion .content-col p {
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
  }
}

/* ====== Ajuste de formulario de contacto ====== */
#contacto .contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* separación entre inputs */
}

/* Campos de texto */
#contacto .contact-form input,
#contacto .contact-form textarea {
  width: 540px;
  height: 60px;
  border-radius: 35px; /* bordes redondeados */
  border: 1px solid #ccc;
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
  padding: 0 25px;
  box-sizing: border-box;
  font-family: "DM Serif Display", serif;
  font-style: italic;
}

/* Placeholder */
#contacto .contact-form ::placeholder {
  color: #b0b0b0;
}

/* Campo de comentarios */
#contacto .contact-form textarea {
  height: 60px;
  resize: none;
  padding-top: 12px;
}

/* Contenedor del reCAPTCHA y botón */
#contacto .form-actions {
  display: flex;
  flex-direction: row-reverse; /* invierte el orden visual */
  align-items: center;
  justify-content: center;
  gap: 40px; /* separación entre recaptcha y botón */
  margin-top: 50px;
}

/* Botón de envío */
#contacto .contact-submit {
  width: 180px;
  height: 60px;
  border-radius: 9999px; /* totalmente circular */
  font-size: 20px;
  font-family: "DM Serif Display", serif;
  font-style: italic;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ centra el texto dentro del botón */
  text-align: center;
}

/* Responsivo */
@media (max-width: 768px) {
  #contacto .form-actions {
    flex-direction: column; /* en móvil, apilados */
    gap: 20px;
    margin-top: 40px;
  }

  #contacto .form-actions {
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
  }

  #contacto .contact-submit {
    width: 280px;
    height: 70px;
  }
}

/* ====== Ajustes de alineación para sección de contacto ====== */
#contacto .contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 800px;
}

/* Imagen alineada a la izquierda */
#contacto .contact-image {
  background-position: left center; /* ✅ imagen cargada a la izquierda */
  background-repeat: no-repeat;
  background-size: cover;
}

/* Panel de texto alineado a la izquierda */
#contacto .contact-panel {
  background-color: #e5e3e0;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ✅ alinea a la izquierda */
  padding-left: 80px; /* margen cómodo hacia la izquierda */
}

/* Contenido del texto */
#contacto .contact-panel .container {
  max-width: 560px;
  margin: 0;
  padding: 0;
  text-align: left; /* ✅ alinea texto y formulario a la izquierda */
}

/* Versión responsive: centrado cuando se apila */
@media (max-width: 1024px) {
  #contacto .contact-wrap {
    grid-template-columns: 1fr;
  }

  #contacto .contact-panel {
    justify-content: center; /* centra texto y formulario */
    padding-left: 0;
  }

  #contacto .contact-panel .container {
    text-align: center;
  }
}
/* ====== Ajustes móviles para sección de contacto ====== */
@media (max-width: 768px) {
  /* Centrar imagen del título */
  #contacto .section-icon {
    display: block;
    margin: 0 auto 30px auto; /* centrada y con separación inferior */
  }

  /* Aumentar altura del panel */
  #contacto .contact-panel {
    min-height: calc(800px + 60px); /* ✅ crece el alto en 120px */
    padding-bottom: 20px; /* espacio extra para respirar visualmente */
  }
}

/* ====== Ajuste de footer en resoluciones menores a 1024px ====== */
@media (max-width: 1024px) {
  .site-footer {
    text-align: center;
  }

  .footer-inner {
    display: flex;
    flex-direction: column; /* ✅ ordena los elementos verticalmente */
    align-items: center;   /* ✅ centra horizontalmente */
    justify-content: center;
    gap: 30px;             /* ✅ espacio vertical entre cada bloque */
  }

  .footer-col {
    text-align: center;
    width: 100%;
  }

  .footer-col img {
    margin: 0 auto; /* centra el logo */
  }

  .redes-sociales-blanco {
    justify-content: center; /* centra los íconos de redes sociales */
    gap: 40px;               /* mantiene la separación original entre íconos */
  }
}

/* ====== Eliminar espacio entre sección de contacto y footer ====== */
#contacto {
  padding-bottom: 0 !important; /* quita el padding inferior de la sección */
  margin-bottom: 0 !important;  /* asegura que no haya separación extra */
}

.site-footer {
  margin-top: 0 !important;     /* evita margen superior en el footer */
}

/* ====== Sección "Somos Old School" ====== */
.oldschool {
  background: transparent; /* sin fondo */
  padding-bottom: 20px;         /* altura aproximada de 280px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.oldschool-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oldschool-logo img {
  width: 298px;
  height: auto;
  max-width: 100%;
}

/* ====== Ajuste para evitar pérdida del menú entre 1280 – 1439 px ====== */
@media (max-width: 1439px) and (min-width: 1025px) {
  .header-inner {
    padding-left: 60px;
    padding-right: 60px;
  }

  .primary-nav {
    gap: 20px; /* reduce separación entre botones */
  }

  .header-social {
    gap: 14px;
    margin-left: 20px;
  }

  .cabecera-principal .logo {
    height: 120px; /* ajusta ligeramente el logo */
  }
}
/* ====== Redes sociales solo visibles dentro del menú móvil ====== */

/* En escritorio (mayor a 1024px): oculta las del menú desplegable */
@media (min-width: 1025px) {
  .header-social-mobile {
    display: none !important;
  }
}

/* En móvil (hasta 1024px): oculta las redes del header y muestra las del menú */
@media (max-width: 1024px) {
  /* Oculta las redes del header principal */
  .header-social {
    display: none !important;
  }

  /* Menú móvil: estructura */
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 50px 0 60px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 999;
  }

  .primary-nav.open {
    display: flex;
  }

  /* Estilo de los enlaces */
  .link-cabecera {
    font-size: 24px;
    color: #313928;
  }

  /* Redes dentro del menú móvil */
  .header-social-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    margin-top: 25px;
  }

  .header-social-mobile img {
    height: 34px;
    width: auto;
    filter: brightness(0);
    transition: transform 0.2s ease;
  }

  .header-social-mobile img:hover {
    transform: scale(1.15);
  }
}

/* ====== Correcciones de posición del ícono hamburguesa ====== */

/* Entre 1440px y 1025px — Ajustamos el padding para que no se desborde */
@media (max-width: 1440px) and (min-width: 1025px) {
  .header-inner {
    padding-left: 60px;
    padding-right: 120px;
  }

  .nav-toggle {
    display: block;
    position: relative;
    right: 0;
    margin-left: 20px;
  }

  .hamburger,
  .hamburger::before,
  .hamburger::after {
    background: #313928;
  }
}

/* <= 1024px — Aseguramos visibilidad y margen correcto del ícono */
@media (max-width: 1024px) {
  .header-inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
    margin-right: 140px;
    position: relative;
    z-index: 1001; /* para estar sobre el fondo blur del header */
  }

  .hamburger,
  .hamburger::before,
  .hamburger::after {
    background: #313928;
  }
}

/* <= 768px — Le damos un poco más de aire al borde derecho */
@media (max-width: 768px) {
  .header-inner {
    padding-left: 24px;
    padding-right: 100px;
  }

  .nav-toggle {
    margin-right: 60px;
  }
}
/* ====== Lightbox Aviso de Privacidad ====== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.lightbox-overlay.active {
  display: flex;
  animation: fadeIn 0.4s ease;
}

.lightbox-content {
  background: #ffffff;
  border-radius: 12px;
  max-width: 75%;
  padding: 50px 60px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  overflow-y: auto;
  max-height: 80vh;
}

#cerrar-aviso {
  width: 240px;           /* tamaño fijo, no crece en móvil */
  height: 70px;
  border-radius: 9999px;  /* bordes totalmente redondos */
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ centra el texto */
  margin: 40px auto 0 auto; /* centrado horizontal */
  text-align: center;
  font-size: 20px;
  font-family: "DM Serif Display", serif;
  font-style: italic;
  cursor: pointer;
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Responsivo */
@media (max-width: 1024px) {
  .lightbox-content {
    max-width: 90%;
    padding: 40px;
  }
}
@media (max-width: 768px) {
  .lightbox-content {
    max-width: 95%;
    padding: 30px 20px;
  }
}

/* ====== Lightbox Somos Old School ====== */
.oldschool-overlay {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.oldschool-overlay.active {
  display: flex;
}

/* Contenedor principal con la imagen de fondo */
.oldschool-content {
  background: rgba(49, 57, 40, 0.85) url("images/background-old-school.jpg") center center / cover no-repeat;
  border-radius: 16px;
  padding: 60px 70px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  max-width: 60%;
  max-height: 80vh;
  overflow-y: auto;
  animation: zoom-bg-oldschool 20s ease-in-out infinite alternate;
}

@keyframes zoom-bg-oldschool {
  0% { background-size: 100%; }
  100% { background-size: 110%; }
}

/* Responsivo */
@media (max-width: 1024px) {
  .oldschool-content {
    max-width: 90%;
    padding: 40px 50px;
  }
}

@media (max-width: 768px) {
  .oldschool-content {
    max-width: 95%;
    padding: 30px 25px;
  }
}

.oldschool-text-container {
  max-width: 60%;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 1024px) {
  .oldschool-text-container {
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .oldschool-text-container {
    max-width: 90%;
  }
}
.oldschool-overlay.active {
  animation: zoom-bg-oldschool 20s ease-in-out infinite alternate;
}
/* ====== Botón Cerrar del Lightbox "Somos Old School" ====== */
#cerrar-oldschool {
  width: 240px;
  height: 70px;
  border-radius: 9999px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* ✅ cursor tipo mano */
  margin: 40px auto 0 auto; /* centrado con margen superior */
}

#cerrar-oldschool:hover {
  transform: translateY(-4px);
}
/* ====== Escala de títulos en móviles ====== */
@media (max-width: 768px) {
  #menu img[alt="Título Menú"],
  #sucursales img[alt="Sucursales"],
  #facturacion img[alt="Facturación"],
  #contacto img[alt="Contacto"] {
    max-width: 80%;
    height: auto;
  }
}
/* ====== Ajuste de formulario en móviles ====== */
@media (max-width: 768px) {
  #contacto .contact-form input,
  #contacto .contact-form textarea {
    width: 90%; /* ✅ reduce el ancho para evitar overflow */
    max-width: 420px;
  }
}
@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  body { overflow-x: hidden; }
}
/* ====== Ajuste de botones grandes en móviles ====== */
@media (max-width: 768px) {

  /* Menú Chapalita / Forum */
  #menu .boton-descarga {
    width: 90%;
    max-width: 340px;
    justify-content: flex-start;
    padding-left: 30px;
    box-sizing: border-box;
  }

  /* Aviso de Privacidad */
  .footer-col .parrafo-blanco {
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Enlace del footer */
  .footer-col a {
    display: inline-block;
    max-width: 90%;
    text-align: center;
  }

  /* Evita que el footer o botones rompan el layout */
  body, html {
    overflow-x: hidden !important;
  }
}
/* ====== Corrección de overflow lateral en el carrusel ====== */
.banner-carrusel,
.banner-carrusel .slide {
  overflow: hidden;
  width: 100vw;       /* fuerza al viewport width */
  max-width: 100%;
  margin: 0 auto;
}

.banner-carrusel .texto-banner {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: translateY(13%);
  box-sizing: border-box;
}

.banner-carrusel .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(49,57,40,0.7);
  color: #fff;
  font-size: 24px;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.banner-carrusel .prev { left: 10px; }   /* antes estaba en 20px */
.banner-carrusel .next { right: 10px; }  /* reduce margen para no generar overflow */

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
}

/* ====== Cabecera móvil siempre fija y con fondo ====== */
@media (max-width: 1024px) {
  .cabecera-principal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* misma altura que versión scroll */
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transform: translateY(0);
    opacity: 1;
  }

  .cabecera-principal .logo {
    height: 60px !important; /* mantiene tamaño pequeño */
  }

  .header-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}