/*
   Archivo: css/style.css
   Descripción: Estilos CSS globales - Tortutravel
   Autor: Noelia
   Fecha de creación: 11-06-2025
   Última modificación: 29-07-2025
*/

/* ========================
   SCROLL MAS SUAVE
   Configuración de scroll
======================== */
html {
  scroll-behavior: smooth;
}

/* ========================
   RESET BÁSICO
   Elimina márgenes, paddings y ajusta box-model
======================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========================
   ESTILO GLOBAL
   Fuente base, color de texto y altura de línea
======================== */
body {
  font-family: 'Roboto', Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

/* ========================
   CONTENEDOR CENTRAL
   Máximo ancho y centrado automático
======================== */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================
   ANIMACION DE SECCIONES
   Efecto de entrada suave al hacer scroll
======================== */

/* Al inicio todas las secciones ocultas y desplazadas 
section.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}*/

/* Cuando entran en vista 
section.visible {
  opacity: 1;
  transform: translateY(0);
}*/

/* ========================
   1. CABECERA FIJA — TRANSPARENTE AL INICIO
======================== */
.header-transparent {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: transparent;
  /* estado normal: solo 1rem arriba y abajo */
  padding: 1rem 0;
  transition: background 0.3s ease, padding 0.3s ease;
  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================
   2. ESTADO “OPACO” AL SCROLL
======================== */
.header-transparent.scrolled {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* ========================
   3. ESTADO EXPANDIDO (submenú abierto)
   Solo añade espacio inferior para el submenú
======================== */
.header-transparent.expanded {
  padding: 1rem 0 4rem; /* Solo para submenús normales como servicios */
  transition: padding 0.3s;
}
.header-transparent.expanded.lang {
  padding: 1rem 0 5rem; /* Solo para el menú de idiomas (lang) */
  transition: padding 0.3s;
}


/* ========================
   LOGO
   Ajusta tamaño máximo del logo y alinea texto
======================== */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  max-height: 50px;    /* Limita alto del logo */
  width: auto;
  transition: transform 0.3s; /* Efecto zoom al pasar ratón */
}

.logo img:hover {
  transform: scale(1.1); /* Efecto zoom al pasar ratón */ 
  transition: transform 0.3s;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: 0.5rem; /* Espacio entre imagen y texto */
  color:#fff;
  transition: 0.3s;
}

.logo-text span {
 color: rgb(255, 199, 59);
  transition: color 0.3s;
}

.logo-text:hover{
  color: #27ae60;
  transition: 0.3s;
}

.logo-text:hover span {
  transition: 0.3s;
  color: #27ae60;
}


/* ========================
   NAVEGACIÓN
   Lista horizontal de enlaces y colores de hover
======================== */
nav .nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 20;
}

nav .nav-links li {
  margin-left: 1.5rem; /* Separación entre ítems */
  position: relative; /* Para submenús */
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

nav a:hover {
  color: #27ae60;      /* Verde al pasar ratón */
}

/* Submenú */
.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  display: none;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu li a {
  white-space: nowrap;
  padding: 0.2em 1em;
  display: block;
}

/* Icono TripAdvisor alineado correctamente */
.tripadvisor-item {
  display: fixed;
  transition: filter 0.3s;
}

.tripadvisor-item img {
  display: block;
  width: 25px;          /* Ajusta el tamaño del icono */
  height: 25px;         /* Mantiene proporción */
}

/* Hover verde como los demás enlaces */
.tripadvisor-item:hover img {
  filter: brightness(0) invert(54%) sepia(99%) saturate(445%) hue-rotate(86deg) brightness(95%) contrast(80%);
  transition: filter 0.3s;
}

/* ========================
   BOTÓN MENÚ (HAMBURGUESA)
   Solo visible en móvil
======================== */
.nav-toggle {
  display: none;       /* Hidden en desktop */
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
}

.nav-toggle:hover {
  color: #219653; /* Verde más oscuro al pasar ratón */
}

/* ========================
   RESPONSIVE & MENÚ MÓVIL
   Overlay verde translúcido
======================== */
@media (max-width: 768px) {
  /* Menú oculto por defecto */
  nav .nav-links {
    display: none;               /* sigue oculto hasta .show */
    position: fixed;             /* saca el menú del flujo normal */
    inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100vh;               /* cubre toda la altura de la ventana */
    background: rgba(24, 100, 55, 0.85); /* verde translúcido */
    backdrop-filter: blur(4px);
    flex-direction: column;
    justify-content: center;
    align-items: stretch; /* ocupa todo el ancho */
    text-align: center;
    z-index: 1001;               /* debe ser mayor que el header (1000) */
  }

  /* Cuando añadimos la clase .show, simplemente lo mostramos */
  nav .nav-links.show {
    display: flex;
  }

  /* Oculta el ícono solo cuando el menú está abierto */
  .nav-links.show .tripadvisor-item {
    display: none;
  }

  .nav-links {
    flex-direction: column; 
    display: none;  
    width: 100%;  
  }
  .nav-links.open {
    display: flex;  
  }
  .submenu {
    position: static; 
    box-shadow: none; 
  }
  .submenu.open { 
    display: flex;  
    flex-direction: column; 
  }

  .has-submenu .submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height .4s ease, opacity .4s ease, transform .4s ease;
  }

  .has-submenu .submenu.show {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
  }

  /* El botón hamburguesa encima de todo */
  .nav-toggle {
    display: block;
    z-index: 1100; /* para que siempre esté delante del menú si quieres */
  }

  /* Enlaces sin márgenes extra */
  nav .nav-links li {
    margin: 0;
  }

  /* Enlaces como bloque y hover simple */
  nav .nav-links a {
    display: block;
    padding: 1rem 0;                  /* área táctil cómoda */
    font-size: 1.6rem;
    color: #fff;
    transition: background 0.3s ease;
    width: 100%; /* Ocupa todo el ancho */
  }

  /* Fondo translúcido al pasar ratón */
  nav .nav-links a:hover {
    background: rgba(255, 255, 255, 0.2); /* Fondo blanco translúcido al pasar ratón */
  }

  /* Clase que bloquea el scroll del body */
  .no-scroll {
    overflow: hidden;
    height: 100%;
  }

  /* Grids a una columna en móvil */
  .tours-grid,
  .team-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* archivo: style.css – parte 2 */

/* ========================
   2. SECCIÓN HERO
   Vídeo full-screen con overlay de texto y CTA
======================== */
#hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  filter: brightness(0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  top: 40%;
  transform: translateY(-40%);
}

.hero-overlay h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-overlay p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ========================
   3. TOURS DESTACADOS
   Grid de tarjetas con imagen + vídeo hover
======================== */
#featured-tours {
  background: #ffffff;
  padding: 4rem 0;
}

#featured-tours h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.tour-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.625rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  will-change: transform, opacity;
  aspect-ratio: 3/3;
}

.tour-card img,
.tour-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-card:hover {
  transform: scale(1.03);
}

.tour-video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tour-card:hover .tour-video {
  opacity: 1;
}

.tour-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
}

.btn-small {
  margin-top: 0.5rem;
  display: inline-block;
  background: #27ae60;
  color: #ffffff;
  padding: 0.5rem 2rem;
  border-radius: 0.1875rem;
  font-size: 0.9rem;
  transition: transform 0.3s ease, background 0.3s ease;
  text-decoration: none;
}

.btn-small:hover {
  background: #1b6e3f;
  transform: scale(1.08);
}

/* ========================
   4. TRANSPORTE Y APARCAMIENTO
   Fondo con overlay oscuro y texto centrado
======================== */
#transport {
  position: relative;
  background: url('../img/transport.webp') top/cover no-repeat;
  padding: 6rem 2rem;
}

#transport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* Overlay oscuro */
  z-index: 0;
}

.transport-text {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  color: #fff;
  text-align: left;
  max-width: 1210px; /* Limita ancho del texto */
}

.transport-text p {
  margin-top: 1rem;
  margin-bottom: 2rem; /* Espacio extra antes del botón */
}

.btn-cta {
  background: #27ae60;
  color: #fff;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
}

.btn-cta:hover {
  background: #1b6e3f; /* Verde más oscuro al pasar ratón */
  transition: background 0.3s;
}

/* archivo: style.css – parte 3 */

/* ========================
   5. SOBRE NOSOTROS
   Texto + grid de miembros con hover overlay
======================== */
#about-us {
  background: #fff;
  padding: 4rem 0;
}
#about-us .container {
  max-width: 1210px; /* Limita ancho del contenedor */
  margin: 0 auto;

}

#about-us h2 {
  text-align: left;
  margin-bottom: 1rem;
}

#about-us .about-text {
  text-align: justify;
  margin: 0 auto 2rem; /* Espacio entre párrafo y grid */
  max-width: 1210px; /* Limita ancho del párrafo */
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 260px));
  justify-content: center;
  gap: 1.5rem;
}

.team-member {
  position: relative;
  overflow: hidden;
  max-width: 260px;
  margin: 0 auto;
}

.team-member img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.member-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  text-align: center;
  padding: 1rem 0;    
  transform: translateY(100%);
  transition: transform 0.3s;
}

.team-member:hover .member-overlay {
  transform: translateY(0);
}

/* ========================
   6. CONTÁCTANOS
   Reusa fondo + grid de iconos y mapa
======================== */
/* 6. Contáctanos */
#contact-us {
  position: relative;
  background: url('../img/contact.webp') center/cover no-repeat;
  padding: clamp(3rem, 8vw, 6rem) 2rem;
  text-align: center;
  color: #ffffff;
}

#contact-us::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.map-container {
  width: 100%;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.contact-grid.contact-grid-map {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.social-links h2 {
  margin-bottom: 1rem;
}

.social-btn {
  background: rgba(1, 22, 1, 0.7);
  padding: 1rem 2rem;
  min-width: 13.75rem;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #ffffff;
  border-radius: 0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.social-btn:hover {
  color: #27ae60;
}

.social-btn img {
  width: 25px;
  height: 25px;
  margin-bottom: 3px; /* Ajuste de tripadvisor con el contenedor*/
  margin-top: -3px; /* Ajuste de tripadvisor con el contenedor*/
  filter: brightness(0) invert(1);
  margin-right: 0.5rem;
  transition: filter 0.3s ease;
  align-items: center;
  justify-content: center;
  
}

.social-btn:hover img{
  filter: brightness(0) invert(54%) sepia(99%) saturate(400%)
          hue-rotate(86deg) brightness(95%) contrast(80%);
}

/* Botones cuadrados de contact-us */
.contact-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 90px);
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: center;
  align-content: center;
}

.social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  height: 100%;
}

.contact-social-grid {
  justify-items: end;
}

.contact-social-btn {
  font-size: 3rem;
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #fff;
  color: #007b5e;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: background 0.2s, color 0.2s, transform 0.2s ease;
  text-decoration: none;
}
.contact-social-btn img {
  width: 46px;
  height: 46px;
}
.contact-social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.contact-social-btn.whatsapp { background: #25D366; color: #fff; }
.contact-social-btn.whatsapp:hover { background: #fff; color: #25D366; }

.contact-social-btn.tripadvisor { background: #34E0A1; color: #fff; }
.contact-social-btn.tripadvisor:hover { background: #fff; color: #34E0A1; }
.contact-social-btn.tripadvisor img { filter: brightness(0) invert(1); transition: filter 0.2s; }
.contact-social-btn.tripadvisor:hover img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(21%) saturate(749%) hue-rotate(116deg) brightness(101%) contrast(92%);
}

.contact-social-btn.facebook { background: #1877F3; color: #fff; }
.contact-social-btn.facebook:hover { background: #fff; color: #1877F3; }

.contact-social-btn.instagram { background: #E1306C; color: #fff; }
.contact-social-btn.instagram:hover { background: #fff; color: #E1306C; }

.contact-social-btn.youtube { background: #FF0000; color: #fff; }
.contact-social-btn.youtube:hover { background: #fff; color: #FF0000; }

.contact-social-btn.tiktok { background: #000000; color: #fff; }
.contact-social-btn.tiktok:hover { background: #fff; color: #000000; }

.contact-grid.contact-grid-map .map-container {
  height: 100%;
}

@media (max-width: 900px) {
  .contact-grid.contact-grid-map {
    grid-template-columns: 1fr;
  }
  .social-links {
    align-items: center;
    text-align: center;
    justify-self: center;
    max-width: 100%;
    margin: 0 auto;
  }
  .contact-social-grid {
    justify-items: center;
    justify-content: center;
  }
  .map-container {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .contact-social-grid {
    grid-template-columns: repeat(2, 90px);
    gap: 0.6rem;
    justify-content: center;
    align-content: center;
  }
  .contact-social-btn {
    width: 74px;
    height: 74px;
    font-size: 2.6rem;
  }
  .contact-social-btn img {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 400px) {
  .contact-social-grid {
    grid-template-columns: repeat(2, 80px);
    gap: 0.5rem;
    justify-content: center;
    align-content: center;
  }
  .contact-social-btn {
    width: 64px;
    height: 64px;
    font-size: 2.2rem;
  }
  .contact-social-btn img {
    width: 32px;
    height: 32px;
  }
}

/* ========================
   8. BOTÓN WHATSAPP FLOTANTE
   Icono flotante en la esquina inferior derecha
======================== */
/* Icono flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1100;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float i {
  font-size: 32px;
}

/* ========================
   7. FOOTER
   Pie con fondo verde y texto centrado
======================== */
footer {
  background: #0c3920;
  color: #fff;
  text-align: center;
  padding: 2rem 0;
}
footer .footer-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

/* ========================
   8. Menú flotante de idioma
   Botón y lista desplegable animada
======================== */
.lang-float {
  position: fixed;
  right: 30px;
  bottom: 90px; /* Justo encima del botón de WhatsApp */
  z-index: 1200;
  background: rgb(175, 126, 0);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: background 0.3s;
  text-decoration: none;
}
.lang-float:hover {
  background: #614816;
}

.lang-list.custom-dropdown {
  /* Menú desplegable animado */
  position: fixed;
  left: auto;
  right: 20px;
  bottom: 140px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
  min-width: 60px;
  max-width: 90px;
  width: auto;
  background: rgb(175, 126, 0);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.18);
  z-index: 1201;
}
.lang-list.custom-dropdown li {
  list-style: none;
}
.lang-list.custom-dropdown li a {
  color: transparent;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  font-size: 0; /* Oculta el texto y deja solo el ícono */
}
.lang-list.custom-dropdown li a::before {
  content: "";
  display: block;
  width: 26px;
  height: 18px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
}

/* ========================
   Banner de cookies
======================== */
.cookie-banner {
  position: fixed;
  inset: auto 16px 16px 16px;
  background: #0c3920;
  color: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 1300;
  max-width: 640px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.cookie-banner p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cookie-banner a {
  color: #c3f7d4;
  text-decoration: underline;
}

.cookie-banner .cookie-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cookie-banner button {
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.cookie-banner .btn-accept {
  background: #25d366;
  color: #0b2e1c;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.cookie-banner .btn-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.45);
}

.cookie-banner .btn-close {
  background: transparent;
  color: #fff;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-banner .btn-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    transform: none;
  }
  .cookie-banner .cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.lang-list.custom-dropdown li a[data-lang="ES"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23C60A1D%22%20d%3D%22M36%2027c0%202.209-1.791%204-4%204H4c-2.209%200-4-1.791-4-4V9c0-2.209%201.791-4%204-4h28c2.209%200%204%201.791%204%204v18z%22/%3E%3Cpath%20fill%3D%22%23FFC400%22%20d%3D%22M0%2012h36v12H0z%22/%3E%3Cpath%20fill%3D%22%23EA596E%22%20d%3D%22M9%2017v3c0%201.657%201.343%203%203%203s3-1.343%203-3v-3H9z%22/%3E%3Cpath%20fill%3D%22%23F4A2B2%22%20d%3D%22M12%2016h3v3h-3z%22/%3E%3Cpath%20fill%3D%22%23DD2E44%22%20d%3D%22M9%2016h3v3H9z%22/%3E%3Cellipse%20fill%3D%22%23EA596E%22%20cx%3D%2212%22%20cy%3D%2214.5%22%20rx%3D%223%22%20ry%3D%221.5%22/%3E%3Cellipse%20fill%3D%22%23FFAC33%22%20cx%3D%2212%22%20cy%3D%2213.75%22%20rx%3D%223%22%20ry%3D%22.75%22/%3E%3Cpath%20fill%3D%22%2399AAB5%22%20d%3D%22M7%2016h1v7H7zm9%200h1v7h-1z%22/%3E%3Cpath%20fill%3D%22%2366757F%22%20d%3D%22M6%2022h3v1H6zm9%200h3v1h-3zm-8-7h1v1H7zm9%200h1v1h-1z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a[data-lang="EN"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%2300247D%22%20d%3D%22M0%209.059V13h5.628zM4.664%2031H13v-5.837zM23%2025.164V31h8.335zM0%2023v3.941L5.63%2023zM31.337%205H23v5.837zM36%2026.942V23h-5.631zM36%2013V9.059L30.371%2013zM13%205H4.664L13%2010.837z%22/%3E%3Cpath%20fill%3D%22%23CF1B2B%22%20d%3D%22M25.14%2023l9.712%206.801c.471-.479.808-1.082.99-1.749L28.627%2023H25.14zM13%2023h-2.141l-9.711%206.8c.521.53%201.189.909%201.938%201.085L13%2023.943V23zm10-10h2.141l9.711-6.8c-.521-.53-1.188-.909-1.937-1.085L23%2012.057V13zm-12.141%200L1.148%206.2C.677%206.68.34%207.282.157%207.949L7.372%2013h3.487z%22/%3E%3Cpath%20fill%3D%22%23EEE%22%20d%3D%22M36%2021H21v10h2v-5.836L31.335%2031H32c1.117%200%202.126-.461%202.852-1.199L25.14%2023h3.487l7.215%205.052c.093-.337.158-.686.158-1.052v-.058L30.369%2023H36v-2zM0%2021v2h5.63L0%2026.941V27c0%201.091.439%202.078%201.148%202.8l9.711-6.8H13v.943l-9.914%206.941c.294.07.598.116.914.116h.664L13%2025.163V31h2V21H0zM36%209c0-1.091-.439-2.078-1.148-2.8L25.141%2013H23v-.943l9.915-6.942C32.62%205.046%2032.316%205%2032%205h-.663L23%2010.837V5h-2v10h15v-2h-5.629L36%209.059V9zM13%205v5.837L4.664%205H4c-1.118%200-2.126.461-2.852%201.2l9.711%206.8H7.372L.157%207.949C.065%208.286%200%208.634%200%209v.059L5.628%2013H0v2h15V5h-2z%22/%3E%3Cpath%20fill%3D%22%23CF1B2B%22%20d%3D%22M21%2015V5h-6v10H0v6h15v10h6V21h15v-6z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a[data-lang="FR"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23ED2939%22%20d%3D%22M36%2027c0%202.209-1.791%204-4%204h-8V5h8c2.209%200%204%201.791%204%204v18z%22/%3E%3Cpath%20fill%3D%22%23002495%22%20d%3D%22M4%205C1.791%205%200%206.791%200%209v18c0%202.209%201.791%204%204%204h8V5H4z%22/%3E%3Cpath%20fill%3D%22%23EEE%22%20d%3D%22M12%205h12v26H12z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a[data-lang="DE"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23FFCD05%22%20d%3D%22M0%2027c0%202.209%201.791%204%204%204h28c2.209%200%204-1.791%204-4v-4H0v4z%22/%3E%3Cpath%20fill%3D%22%23ED1F24%22%20d%3D%22M0%2014h36v9H0z%22/%3E%3Cpath%20fill%3D%22%23141414%22%20d%3D%22M32%205H4C1.791%205%200%206.791%200%209v5h36V9c0-2.209-1.791-4-4-4z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a[data-lang="IT"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23CE2B37%22%20d%3D%22M36%2027c0%202.209-1.791%204-4%204h-8V5h8c2.209%200%204%201.791%204%204v18z%22/%3E%3Cpath%20fill%3D%22%23009246%22%20d%3D%22M4%205C1.791%205%200%206.791%200%209v18c0%202.209%201.791%204%204%204h8V5H4z%22/%3E%3Cpath%20fill%3D%22%23EEE%22%20d%3D%22M12%205h12v26H12z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a[data-lang="PT"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23060%22%20d%3D%22M36%2027c0%202.209-1.791%204-4%204H4c-2.209%200-4-1.791-4-4V9c0-2.209%201.791-4%204-4h28c2.209%200%204%201.791%204%204v18z%22/%3E%3Cpath%20fill%3D%22%23D52B1E%22%20d%3D%22M32%205H15v26h17c2.209%200%204-1.791%204-4V9c0-2.209-1.791-4-4-4z%22/%3E%3Cpath%20fill%3D%22%23FFCC4D%22%20d%3D%22M15%2010c-4.419%200-8%203.581-8%208%200%204.418%203.581%208%208%208%204.418%200%208-3.582%208-8%200-4.419-3.582-8-8-8zm-6.113%204.594l1.602%201.602-2.46%201.23c.083-1.022.383-1.981.858-2.832zm-.858%203.979l4.4%202.207-2.706%201.804.014.021c-.96-1.097-1.583-2.492-1.708-4.032zM14%2024.92c-.937-.134-1.813-.453-2.592-.92H14v.92zM14%2023h-3.099L14%2020.934V23zm0-3.268l-.607.405L9.118%2018l2.116-1.058L14%2019.707v.025zm0-1.439l-3.543-3.543%203.543.59v2.953zm0-3.992l-4.432-.713c1.084-1.333%202.65-2.253%204.432-2.508v3.221zm7.113.293c.475.851.775%201.81.858%202.833l-2.46-1.23%201.602-1.603zM16%2011.08c1.782.256%203.348%201.175%204.432%202.508L16%2014.301V11.08zm0%204.26l3.543-.591L16%2018.293V15.34zm0%204.367l2.765-2.765L20.882%2018l-4.274%202.137-.608-.405v-.025zm0%205.213V24h2.592c-.779.467-1.655.786-2.592.92zM16%2023v-2.066L19.099%2023H16zm4.264-.395l.014-.021-2.706-1.804%204.4-2.207c-.126%201.54-.749%202.935-1.708%204.032z%22/%3E%3Cpath%20fill%3D%22%23D52B1E%22%20d%3D%22M11%2013v7c0%202.209%201.791%204%204%204s4-1.791%204-4v-7h-8z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M12%2014v6c0%201.656%201.343%203%203%203s3-1.344%203-3v-6h-6z%22/%3E%3Cpath%20fill%3D%22%23829ACD%22%20d%3D%22M13%2017h4v2h-4z%22/%3E%3Cpath%20fill%3D%22%23829ACD%22%20d%3D%22M14%2016h2v4h-2z%22/%3E%3Cpath%20fill%3D%22%23039%22%20d%3D%22M12%2017h1v2h-1zm2%200h2v2h-2zm3%200h1v2h-1zm-3%203h2v2h-2zm0-6h2v2h-2z%22/%3E%3C/svg%3E"); }
.lang-list.custom-dropdown li a:hover {
  background-color: #614816;
  border-radius: 8px;
  width: 100%;
  color: #fff;
}
.lang-list.custom-dropdown.show {
  /* Estado visible */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.lang-list.custom-dropdown.hide {
  /* Estado oculto */
  opacity: 0;
  pointer-events: none;
}

/* ========================
   Responsive menú flotante idioma
======================== */
@media (max-width: 300px) {
  .lang-float {
    right: 16px;
    bottom: 80px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .lang-list.custom-dropdown {
    left: auto;
    right: 16px;
    bottom: 120px;
    min-width: 48px;
    max-width: 70px;
    z-index: 1201;
  }
}

/* ========================
   AVISO DE COOKIES
   Estilo para el link de cookies en el footer
======================== */

.cookies-link {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.5rem;
  transition: color 0.2s;
  text-decoration: none;
}
.cookies-link:hover {
  color: #27ae60;
}