/* ********************************************************************************************
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
  ____ _____ _   _ _____ ____      _    _     
 / ___| ____| \ | | ____|  _ \    / \  | |    
| |  _|  _| |  \| |  _| | |_) |  / _ \ | |    
| |_| | |___| |\  | |___|  _ <  / ___ \| |___ 
 \____|_____|_| \_|_____|_| \_\/_/   \_\_____|
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
********************************************************************************************* */

/* =======================================================================================
   🎨 VARIABLES GLOBALES
======================================================================================= */
:root {
  --verde-oliva: #7a8450;
  --beige: #f7f5ef;
  --blanco: #ffffff;
  --texto: #2d2d2d;
  --transicion: 0.3s ease;
  --altura-header: 90px;
}

/* =======================================================================================
   🧱 DOCUMENTO BASE
======================================================================================= */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  color: var(--texto);
  background-color: var(--beige);
  box-sizing: border-box;
}

/* =======================================================================================
   📄 CONTENIDO PRINCIPAL
======================================================================================= */
main {
  flex: 1;
  margin-top: var(--altura-header);
}

/* =======================================================================================
   🧾 SECCIONES GENERALES
======================================================================================= */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  transition:
    opacity var(--transicion),
    transform var(--transicion);
}

/* =======================================================================================
   🖋️ TÍTULOS
======================================================================================= */
h2 {
  font-family: "Playfair Display", serif;
  color: var(--verde-oliva);
  margin-bottom: 20px;
}

/* =======================================================================================
   🌫️ EFECTO FADE
======================================================================================= */
.fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade.visible {
  opacity: 1;
}

/* ********************************************************************************************
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
 _   _ _____    _    ____  _____ ____  
| | | | ____|  / \  |  _ \| ____|  _ \ 
| |_| |  _|   / _ \ | | | |  _| | |_) |
|  _  | |___ / ___ \| |_| | |___|  _ < 
|_| |_|_____/_/   \_\____/|_____|_| \_\
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
********************************************************************************************* */
/* =======================================================================================
   🧭 HEADER FIJO
======================================================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--altura-header);
  background-color: var(--blanco);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

/* =======================================================================================
   🧭 NAVBAR
======================================================================================= */
.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--altura-header);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =======================================================================================
   🔱 LOGO
======================================================================================= */
.logo img {
  height: 60px;
  border-radius: 8px;
}

/* =======================================================================================
   📌 NAVEGACIÓN PRINCIPAL
======================================================================================= */
.nav-links {
  display: flex;
  list-style: none;
  gap: 28px;
}

.nav-links a {
  text-decoration: none;
  color: var(--texto);
  font-weight: 1000;
  transition: color var(--transicion);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--verde-oliva);
}

/* ——— Botón "Reservar" ——— */
.nav-links .nav-reservar {
  background: var(--verde-oliva);
  color: var(--blanco) !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  border: 2px solid var(--verde-oliva);
  transition:
    background-color var(--transicion),
    border-color var(--transicion),
    transform 0.25s ease;
}

.nav-links .nav-reservar:hover {
  background: #687044;
  border-color: #687044;
  transform: translateY(-1px);
}

/* =======================================================================================
   📱 MENÚ MÓVIL
======================================================================================= */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle i {
  font-size: 32px;
  color: var(--texto);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--transicion),
    transform var(--transicion);
}

.menu-toggle:hover i {
  color: var(--verde-oliva);
  transform: translateY(-2px);
}

/* =======================================================================================
   📱 RESPONSIVE — MÓVIL
======================================================================================= */
@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--altura-header);
    right: 16px;
    flex-direction: column;
    background-color: var(--beige);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .nav-links.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

/* =======================================================================================
   🖱️ SCROLLBARS (fix para desktops)
======================================================================================= */
@media (pointer: fine) {
  .header {
    width: calc(100vw - 15px);
  }
}

@media (pointer: coarse) {
  .header {
    width: 100%;
  }
}

/* ********************************************************************************************
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
 ____  ____  _____ ____  _____ _   _ _____  _    ____ ___ ___  _   _ 
|  _ \|  _ \| ____/ ___|| ____| \ | |_   _|/ \  / ___|_ _/ _ \| \ | |
| |_) | |_) |  _| \___ \|  _| |  \| | | | / _ \| |    | | | | |  \| |
|  __/|  _ <| |___ ___) | |___| |\  | | |/ ___ \ |___ | | |_| | |\  |
|_|   |_| \_\_____|____/|_____|_| \_| |_/_/   \_\____|___\___/|_| \_|
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
********************************************************************************************* */
/* ======================================================
   🌿 HERO UNIVERSAL · OPTIMIZADO Y RESPONSIVE
====================================================== */

.presentacion-seccion {
  position: relative;
  width: 100%;
  height: clamp(260px, 38vh, 420px);
  /* Adaptable sin CLS */
  padding-top: var(--altura-header);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  /* Evita glitch en Safari */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
}

/* Oscurecimiento uniforme y accesible */
.presentacion-seccion .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Título principal */
.presentacion-seccion .titulo-seccion {
  position: relative;
  z-index: 2;
  color: var(--blanco);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 3rem);
  /* Responsive real */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  margin: 0;
  animation: fadeInUp 0.8s ease-out;
}

/* Animación */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================
   🌿 RESPONSIVE HERO — MÓVILES Y TABLETS
====================================================== */

/* Ajuste general para móviles */
@media (max-width: 768px) {
  .presentacion-seccion {
    height: clamp(220px, 32vh, 300px);
    /* Más compacto y elegante */
    background-position: center top;
    /* Evita que la imagen se corte en zonas importantes */
  }

  .presentacion-seccion .overlay {
    background: rgba(0, 0, 0, 0.35);
    /* Menos oscuro = más visual */
  }

  .presentacion-seccion .titulo-seccion {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    padding: 0 20px;
    /* evita que toque los bordes */
    line-height: 1.2;
  }
}

/* Para pantallas pequeñas (muy compacto) */
@media (max-width: 480px) {
  .presentacion-seccion {
    height: clamp(200px, 28vh, 260px);
  }

  .presentacion-seccion .titulo-seccion {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

/* ======================================================
   🌿 HERO ESPECÍFICOS (IMÁGENES DIFERENTES)
====================================================== */

.hero-carta {
  background-image: url("assets/imagenes/mesa-con-platos-mediterraneos-restaurante-flor-de-tuna-chiclana.jpg");
}

/* ********************************************************************************************
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
 _____ ___   ___ _____ _____ ____  
|  ___/ _ \ / _ \_   _| ____|  _ \ 
| |_ | | | | | | || | |  _| | |_) |
|  _|| |_| | |_| || | | |___|  _ < 
|_|   \___/ \___/ |_| |_____|_| \_\
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
********************************************************************************************* */

/* =======================================================================
   FOOTER — ESTILOS PRINCIPALES
======================================================================= */

footer {
  background-color: var(--beige);
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  color: var(--texto);
  margin-top: auto;
  width: 100%;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
}

.footer {
  background-color: #1a1a1a;
  color: #f2f2f2;
  padding: 60px 0 35px;
}

/* =======================================================================
   CONTENEDOR GENERAL
======================================================================= */

.footer-container {
  width: min(95%, 1300px);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* =======================================================================
   COLUMNA: MARCA / INFORMACIÓN LOCAL
======================================================================= */

.footer-brand {
  text-align: left;
}

.footer-brand .footer-logo-img {
  width: 140px;
  display: block;
  margin-bottom: 18px;
}

.footer-brand .footer-logo-title {
  color: var(--verde-oliva);
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  margin-bottom: 20px;
  text-align: left;
}

.footer-brand p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
}

.footer-brand i {
  color: var(--verde-oliva);
  font-size: 1.2rem;
  min-width: 22px;
  text-align: center;
}

/* =======================================================================
   COLUMNA GENÉRICA (LEGAL, REDES, ETC.)
======================================================================= */

.footer-col h4 {
  color: var(--verde-oliva);
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  margin-bottom: 22px;
  text-align: left;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.footer-col a {
  color: #eaeaea;
  opacity: 0.75;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer-col a:hover {
  opacity: 1;
}

.footer-col i {
  font-size: 1.2rem;
  color: var(--verde-oliva);
  min-width: 22px;
}

/* =======================================================================
   COLUMNA: REDES SOCIALES
======================================================================= */

.footer-redes h4 {
  text-align: left;
}

.footer-redes li {
  justify-content: flex-start;
}

.footer-redes i {
  min-width: 24px;
}

/* =======================================================================
   LOGOS DE PLATAFORMAS (BODAS, TRIPADVISOR, THEFORK)
======================================================================= */

.platform-badge {
  width: 260px;
  height: 80px;
  background: white;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  margin: 18px auto;
  /* centrado asegurado */
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
}

.platform-badge.bodas {
  padding: 0 !important;
  overflow: hidden;
}

.platform-badge.bodas img,
.platform-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-col:last-child {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =======================================================================
   COPYRIGHT
======================================================================= */

.footer-copy {
  text-align: center;
  opacity: 0.75;
  margin-top: 50px;
  font-size: 0.95rem;
}

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

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 40px;
    text-align: center;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* mejora visual sutil */
  }

  .footer-brand p {
    justify-content: center;
  }

  .footer-col li {
    justify-content: center;
  }

  .footer-col h4,
  .footer-brand .footer-logo-title {
    text-align: center;
  }
}

@media (min-width: 601px) and (max-width: 1150px) {
  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 60px;
  }
}

@media (min-width: 1151px) {
  .footer-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 80px;
  }
}

/* ********************************************************************************************
CARTA_K
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
  ____    _    ____ _____  _    
 / ___|  / \  |  _ \_   _|/ \   
| |     / _ \ | |_) || | / _ \  
| |___ / ___ \|  _ < | |/ ___ \ 
 \____/_/   \_\_| \_\|_/_/   \_\
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
 ============================================================================================
********************************************************************************************* */

.carta {
  text-align: center;
  background-color: var(--blanco);
  padding: 0;
  margin: 0;
}

#footer_contenedor {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#contenedor-presentacion-carta {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-bottom: 25px;
}

#contenedor-carta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 0 auto 25px auto;
  max-width: 1600px;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}

.categorias-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1600px;
  margin: 30px auto 20px auto;
  padding: 0 5px;
}

.categoria-btn {
  background-color: var(--blanco);
  color: var(--texto);
  border: 2px solid var(--verde-oliva);
  padding: 10px 18px;
  border-radius: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.categoria-btn:hover {
  background-color: var(--verde-oliva);
  color: var(--blanco);
  transform: translateY(-2px);
}

.categoria-btn.active {
  background-color: var(--verde-oliva);
  color: var(--blanco);
}

@media (max-width: 660px) {
  .categorias-container {
    flex-direction: column;
    align-items: center;
  }

  .categoria-btn {
    width: 100%;
    max-width: 280px;
  }
}

.carta-contenido {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 5px 65px 50px 65px;
  text-align: left;
  box-sizing: border-box;
}

.carta-contenido .bloque {
  margin-bottom: 50px;
}

.carta-contenido h3 {
  color: var(--verde-oliva);
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  border-bottom: 2px solid var(--verde-oliva);
  display: inline-block;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.carta-contenido ul {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.carta-contenido li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e4e4e4;
}

.carta-contenido li:hover {
  background-color: #fafafa;
}

.carta-contenido .precio {
  color: var(--verde-oliva);
  font-weight: 600;
  white-space: nowrap;
}

.carta-contenido .alergenos {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
}

.carta-contenido .alergenos img {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: contain;
  filter: grayscale(20%) brightness(0.95);
  transition: 0.3s ease;
}

.carta-contenido .alergenos img:hover {
  transform: scale(1.1);
  filter: none;
}

@media (max-width: 900px) {
  .carta-contenido {
    padding: 10px 15px 50px;
  }

  .carta-contenido li {
    flex-direction: column;
    align-items: flex-start;
  }
}

.leyenda-alergenos {
  width: 100%;
  max-width: 1600px;
  margin: 60px auto 0 auto;
  border-top: 2px solid var(--verde-oliva);
  padding-top: 35px;
  text-align: center;
}

.leyenda-alergenos h3 {
  color: var(--verde-oliva);
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  border: none;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.leyenda-alergenos .nota {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

.leyenda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.leyenda-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
}

.leyenda-grid img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: grayscale(20%) brightness(0.95);
  transition:
    transform 0.2s ease,
    filter 0.3s ease;
}

.leyenda-grid img:hover {
  transform: scale(1.1);
  filter: none;
}

.leyenda-grid span {
  color: #333;
  font-weight: 500;
}

@media (max-width: 768px) {
  .leyenda-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
  }

  .leyenda-grid img {
    width: 36px;
    height: 36px;
  }
}

.nota-carta {
  font-size: 1.05rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #555;
  margin: 10px 0 18px 0;
  display: block;
  line-height: 1.4;
}

.carta-pdf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #fafafa 0%, #f1f1f1 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.carta-pdf-box {
  max-width: 600px;
}

.carta-pdf-box .descripcion {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--texto);
  margin-bottom: 25px;
  line-height: 1.6;
}

.btn-ver-carta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--verde-oliva);
  color: var(--blanco);
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(122, 132, 80, 0.3);
}

.btn-ver-carta i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.btn-ver-carta:hover {
  background-color: #6e7745;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(122, 132, 80, 0.35);
}

.btn-ver-carta:hover i {
  transform: rotate(-10deg);
}

#contenedor-carta-pdf {
  margin-bottom: 60px;
}

@media (max-width: 768px) {
  .carta-pdf-container {
    padding: 40px 10px;
  }

  .btn-ver-carta {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
}