/* ============================= */
/* VARIABLES */
/* ============================= */
:root{
  --fondo: linear-gradient(180deg,#022c43,#014f86,#0277bd);
  --texto:#f8fafc;
  --card:#0a1f33;
}

/* ============================= */
/* BODY */
/* ============================= */
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:"Segoe UI",Arial,sans-serif;
  padding:40px 20px;
  margin:0;
}

/* ============================= */
/* HEADER */
/* ============================= */
header{
  text-align:center;
  margin-top:40px;
  margin-bottom:60px;
  padding-top:20px;
}

/* CONTENIDO DEL TÍTULO */
.header-contenido{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.header-contenido h1{
  font-size:4rem;
  font-weight:800;
  margin:0 16px;
  letter-spacing:1px;
  line-height:1;
}

/* ICONOS */
.icono-flag,
.icono-logo{
  width:70px;
  height:auto;
  display:block;
}



/* ============================= */
/* PESTAÑAS SUPERIORES */
/* ============================= */
#menu-pestanas{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:50px;
}

.pestana{
  padding:14px 26px;
  border-radius:16px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.35);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* EFECTO AL SELECCIONAR */
.pestana.activa{
  transform: scale(1.12) translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  animation: pestañaActiva .45s ease;
}


.pestana:nth-child(1){background:#0d9488;}
.pestana:nth-child(2){background:#9333ea;}
.pestana:nth-child(3){background:#f59e0b;}
.pestana:nth-child(4){background:#ef4444;}
.pestana:nth-child(5){background:#2563eb;}
.pestana:nth-child(6){background:#10b981;}
.pestana:nth-child(7){background:#9333ea;}
/* ============================= */
/* SECCIONES */
/* ============================= */
.seccion{
  display:none;
  animation:fadeUp .6s ease both;
}

.seccion.activa{
  display:block;
}

/* ============================= */
/* GALERÍA ROTATIVA PRO */
/* ============================= */
#galeria-rotativa{
  width:100%;
  overflow:hidden;
  margin:40px auto;
  position:relative;
}

.slider-track{
  display:flex;
  width:calc(250px * 8);
  animation:scroll-horizontal 25s linear infinite;
}

.slider-track IMG{
  width:250px;
  height:160px;
  object-fit:cover;
  border-radius:16px;
  margin-right:20px;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
  flex-shrink:0;
}

/* ANIMACIÓN CONTINUA */
@keyframes scroll-horizontal{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(calc(-250px * 4 - 80px));
  }
}





/* ============================= */
/* FILTROS DE LUGARES */
/* ============================= */
#filtros{
  display:flex;
  justify-content:center;
  gap:25px;
  margin:40px auto 65px;
  flex-wrap:wrap;
}

/* QUITAMOS estilo nativo */
#filtros select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  padding:16px 26px;
  font-size:1.15rem;
  font-weight:600;
  border-radius:18px;
  border:none;

  color:#ffffff;
  min-width:210px;
  text-align:center;
  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,0,0,.45);
  transition:.3s;

  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:20px;

  background-image:url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

#filtros select:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 35px rgba(0,0,0,.55);
}

#filtros select:focus{
  outline:none;
}

/* COLORES REALES (ESTO ES LO QUE FALTABA ANTES) */
#filtro-provincia{
  background:linear-gradient(135deg,#00c6ff,#0072ff) !important;
}

#filtro-categoria{
  background:linear-gradient(135deg,#9b5cff,#5f2cff) !important;
}

#filtro-accesibilidad{
  background:linear-gradient(135deg,#00e6a8,#00b894) !important;
  color:#00352c;
}

#filtros option{
  background:#0b1f2a;
  color:#fff;
}

/* ============================= */
/* LISTA DE LUGARES */
/* ============================= */
#lugares-lista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  justify-items:center;
}

/* TARJETA */
.tarjeta{
  background:var(--card);
  padding:18px;
  border-radius:18px;
  max-width:350px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  transition:.3s;
}

.tarjeta:hover{
  transform:translateY(-8px);
}

.tarjeta IMG{
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:12px;
}

/* ============================= */
/* MAPA */
/* ============================= */
#mapa-cr{
  height:320px;
  border-radius:24px;
  border:4px solid rgba(255,255,255,.4);
  margin:40px 0 60px;
  box-shadow:0 25px 50px rgba(0,0,0,.6);
}

/* ============================= */
/* REDES */
/* ============================= */
#redes{
  text-align:center;
  margin:50px 0 20px;
}

.redes-contenedor{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.red-icon{
  padding:12px 22px;
  border-radius:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.red-icon:hover{
  transform:translateY(-4px);
}

.red-icon.instagram{background:#e1306c;}
.red-icon.tiktok{background:#000;}
.red-icon.facebook{background:#1877f2;}

/* ============================= */
/* FOOTER */
/* ============================= */
footer{
  text-align:center;
  padding:20px;
  margin-top:60px;
  border-top:2px solid #38bdf8;
}

/* ============================= */
/* MODAL */
/* ============================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.modal-contenido{
  background:var(--card);
  padding:30px;
  border-radius:20px;
  max-width:500px;
  width:90%;
}

.oculto{
  display:none !important;
}

/* ============================= */
/* ANIMACIÓN */
/* ============================= */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
/* ============================= */
/* FORMULARIO REPORTAR LUGAR */
/* ============================= */

#seccion-formulario h2{
  font-size: 2.4rem;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 800;
}

#form-lugar{
  max-width: 650px;
  margin: 0 auto;
}

#form-lugar input,
#form-lugar select,
#form-lugar textarea{
  font-size: 1.25rem;          /* LETRA GRANDE */
  padding: 18px 20px;
  border-radius: 16px;
  background: #122540;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  margin-bottom: 18px;
}

#form-lugar textarea{
  min-height: 150px;
}

#form-lugar button{
  width: 100%;
  padding: 18px;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg,#38bdf8,#22d3ee);
  color: #002233;
  transition: transform .3s, box-shadow .3s;
}

#form-lugar button:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(56,189,248,.6);
}
/* ============================= */
/* TRANSPORTE – TARJETAS PREMIUM */
/* ============================= */

.tarjetas-transporte{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 30px;
  margin-top: 40px;
}

/* Tarjeta base */
.tarjeta-transporte{
  padding: 24px;
  border-radius: 20px;
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: transform .3s, box-shadow .3s;
}

.tarjeta-transporte:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 55px rgba(0,0,0,.6);
}

/* TÍTULO */
.tarjeta-transporte h3{
  font-size: 1.6rem;
  margin-bottom: 12px;
  font-weight: 800;
}

/* TEXTO */
.tarjeta-transporte p{
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* ÍCONOS */
.tarjeta-transporte i{
  margin-right: 8px;
  font-size: 1.3rem;
}

/* ============================= */
/* COLORES POR TARJETA */
/* ============================= */

/* Azul transporte */
.tarjeta-transporte.azul{
  background: linear-gradient(135deg,#9f0ada,#38bdf8);
}
.tarjeta-transporte.azul i{ color:#dbeafe; }

/* Verde accesible */
.tarjeta-transporte.verde{
  background: linear-gradient(135deg,#7006b6,#4ade80);
}
.tarjeta-transporte.verde i{ color:#dcfce7; }

/* Morado servicios */
.tarjeta-transporte.morado{
  background: linear-gradient(135deg,#7c3aed,#c084fc);
}
.tarjeta-transporte.morado i{ color:#f3e8ff; }

/* Naranja alerta */
.tarjeta-transporte.naranja{
  background: linear-gradient(135deg,#f97316,#fb923c);
}
.tarjeta-transporte.naranja i{ color:#ffedd5; }

.btn-transporte{
  display:inline-block;
  margin-top:12px;
  padding:12px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.4);
  transition:.3s;
}

.btn-transporte:hover{
  background:#fff;
  color:#022c43;
}
/* ICONOS DE TRANSPORTE COLOREADOS */
.tarjeta-transporte i.fa-bus{
  color:#3894d7; /* celeste */
}

.tarjeta-transporte i.fa-wheelchair{
  color:#eec944; /* verde accesibilidad */
}

.tarjeta-transporte i.fa-map-marker-alt{
  color:#16f94b; /* naranja ubicación */
}

.tarjeta-transporte i.fa-phone{
  color:#ece5f4; /* morado contacto */
}

.tarjeta-transporte i.fa-instagram{
  color:#e1306c; /* instagram */
}

.tarjeta-transporte i.fa-info-circle{
  color:#e90e0e; /* info */
}

.tarjeta-transporte i.fa-check-circle{
  color:#302dbb; /* check verde */
}

/* Separación ligera icono-texto */
.tarjeta-transporte i{
  margin-right:8px;
  font-size:1.1em;
}

.tarjeta-transporte i{
  text-shadow:0 0 6px rgba(255,255,255,.3);
}
/* ===== BOTONES YOUTUBE / Podcast (solo sección podcast) ===== */

.podcast-botones{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:25px;
  flex-wrap:wrap;
}

.podcast-botones a{
  text-decoration:none;
  padding:14px 26px;
  border-radius:30px;
  font-weight:600;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .25s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* YouTube */
.btn-youtube{
  background:#ff0000;
  color:#fff;
}

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

/* Spotify */
.btn-spotify{
  background:#1db954;
  color:#fff;
  cursor:default;
  opacity:.85;
}

.btn-spotify:hover{
  transform:translateY(-3px);
}
/* ===== VIDEO YOUTUBE – TAMAÑO PROFESIONAL REAL ===== */

#seccion-video{
  margin-top:0;        /* elimina el campo vacío */
  padding-top:0;
}

#seccion-video h2{
  margin-bottom:18px;  /* control fino del espacio */
}

.video-wrapper{
  max-width:880px;     /* tamaño mediano-profesional */
  margin:0 auto 25px;  /* sin espacio arriba */
  aspect-ratio:16 / 9;
}

.video-wrapper iframe{
  width:100%;
  height:100%;
  display:block;
  border-radius:14px;
}

/* ============================= */
/* CURSOS Y DEPORTES – ESTILO REVISTA */
/* ============================= */

.cursos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:30px;
  margin-top:35px;
  justify-items:center;
}

.curso-card{
  background:#000;
  border-radius:18px;
  padding:14px;
  max-width:320px;
  box-shadow:0 18px 35px rgba(0,0,0,.55);
}

.curso-card IMG{
  width:100%;
  display:block;
  border-radius:14px;
}


/* ============================= */
/* PESTAÑAS DE CATEGORÍAS (MINI) */
/* ============================= */

#menu-categorias{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:35px auto 45px;
}

/* versión pequeña */
#menu-categorias .pestana{
  padding:8px 14px;          /* más pequeñas */
  font-size:0.85rem;         /* letra más chica */
  border-radius:12px;
  font-weight:700;
  transform:none;
}

/* activa sin agrandarse */
#menu-categorias .pestana.activa{
  transform:scale(1.05);     /* leve */
  box-shadow:0 10px 25px rgba(0,0,0,.45);
}
/* ============================= */
/* COLORES INDIVIDUALES CATEGORÍAS */
/* ============================= */


#menu-categorias .pestana[data-categoria="Restaurantes"]{
  background:linear-gradient(135deg,#f97316,#fb923c);
}

#menu-categorias .pestana[data-categoria="Cafeterías"]{
  background:linear-gradient(135deg,#a855f7,#7c3aed);
}

#menu-categorias .pestana[data-categoria="Playas"]{
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

#menu-categorias .pestana[data-categoria="Actividades"]{
  background:linear-gradient(135deg,#ec4899,#f472b6);
}

#menu-categorias .pestana[data-categoria="Cines"]{
  background:linear-gradient(135deg,#954ec4,#933dba);
}

#menu-categorias .pestana[data-categoria="Mall"]{
  background:linear-gradient(135deg,#889736,#adde4a);
}

#menu-categorias .pestana[data-categoria="Supermercados"]{
  background:linear-gradient(135deg,#38c0a9,#268084);
  color:#ffffff;   /* ← blanco como las demás */
}


#menu-categorias .pestana[data-categoria="Hospitales"]{
  background:linear-gradient(135deg,#e20808,#e30606);
}

#menu-categorias .pestana[data-categoria="Parques"]{
  background:linear-gradient(135deg,#3db910,#3cd334);
}

#menu-categorias .pestana[data-categoria="Instituciones Publicas"]{
  background:linear-gradient(135deg,#4f4de0,#1052ae);
}

#menu-categorias .pestana[data-categoria="Volcanes"]{
  background:linear-gradient(135deg,#f9d715d2,#deac17);
}

#menu-categorias .pestana[data-categoria="Hoteles"]{
  background:linear-gradient(135deg,#15f5f9d2,#deac17);
}
/* ============================= */
/* SECCIÓN INICIO - PRESENTACIÓN */
/* ============================= */
#seccion-inicio {
  font-size: 18px;      /* tamaño de texto base */
  line-height: 1.6;     /* separación entre líneas */
  padding: 30px 20px;
  max-width: 900px;
  margin: 0 auto;
  color: #ffffff;       /* si el fondo es oscuro */
}

#seccion-inicio h2 {
  font-size: 32px;      /* título principal más grande */
  margin-bottom: 20px;
  text-align: center;
}

#seccion-inicio h3 {
  font-size: 24px;      /* subtítulos más grandes */
  margin-top: 20px;
  margin-bottom: 10px;
}

#seccion-inicio p {
  font-size: 18px;
  margin-bottom: 15px;
}

#seccion-inicio .mensaje-final {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
}
/* FOOTER - ICONOS DE REDES */
.footer-redes {
  display: flex;
  justify-content: center;
  gap: 30px; /* espacio entre los íconos */
  margin-bottom: 20px;
}

.footer-redes a {
  font-size: 32px; /* íconos más grandes */
  color: #ffffff;  /* color base */
  transition: transform 0.3s, color 0.3s;
}

/* Diferentes colores para cada red */
.footer-redes a.instagram { color: #E4405F; }
.footer-redes a.tiktok     { color: #000000; }
.footer-redes a.facebook   { color: #1877F2; }
.footer-redes a.youtube    { color: #FF0000; }

/* Efecto hover */
.footer-redes a:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
}
/* ======================== */
/* TARJETAS DE LUGARES / PLAYAS */
/* ======================== */

.lugar-card {
  background: #1f2937; /* fondo oscuro */
  color: #f0f0f0;
  border-radius: 16px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lugar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.6);
}

.lugar-card h3 {
  font-size: 1.4rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lugar-card h3 .icono-accesible {
  width: 24px;
  height: 24px;
}

.lugar-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.lugar-card button {
  align-self: start;
  padding: 10px 18px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.lugar-card button:hover {
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  transform: scale(1.05);
}
.lugar-card {
  background: #1f2937; /* fondo oscuro */
  color: #f0f0f0;
  border-radius: 16px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 4px solid transparent; /* se reemplaza según disponibilidad */
}

.lugar-card.completo {
  border-color: #28a745; /* verde */
  box-shadow: 0 8px 20px rgba(40,167,69,0.5);
}

.lugar-card.parcial {
  border-color: #ffc107; /* amarillo */
  box-shadow: 0 8px 20px rgba(255,193,7,0.5);
}

.lugar-card.suspendido {
  border-color: #dc3545; /* rojo */
  box-shadow: 0 8px 20px rgba(220,53,69,0.5);
}

.lugar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.6);
}

.lugar-card h3 {
  font-size: 1.4rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lugar-card h3 .icono-accesible {
  width: 24px;
  height: 24px;
}

.lugar-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.lugar-card button {
  align-self: start;
  padding: 10px 18px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.lugar-card button:hover {
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  transform: scale(1.05);
}
/* Modal más llamativo */
#ficha-modal .modal-contenido {
  background: #0d6efd;       /* azul brillante */
  border: 3px solid #ffc107; /* borde amarillo llamativo */
  border-radius: 15px;
  padding: 20px;
  max-width: 500px;
  color: #fff;               /* texto blanco para resaltar */
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-align: center;
}

/* Encabezado del lugar */
#contenido-ficha h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #ffeb3b; /* amarillo para destacar */
}

/* Descripción */
#contenido-ficha p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* Botones de Google Maps y Waze */
#contenido-ficha a {
  display: inline-block;
  margin: 5px 10px;
  padding: 10px 20px;
  background: #ffc107;  /* amarillo llamativo */
  color: #000;          /* negro para contraste */
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  transition: transform 0.2s, background 0.2s;
}

#contenido-ficha a:hover {
  transform: scale(1.1);
  background: #ffca28; /* un tono más claro al pasar mouse */
}

/* Cerrar botón */
#ficha-modal .cerrar {
  background: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  padding: 5px 12px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
/* ============================= */
/* IMÁGENES UNIFORMES EN TARJETAS DE PLAYAS */
.lugar-card IMG {
  width: 100%;       /* ancho completo de la tarjeta */
  height: 180px;     /* altura fija para todas las tarjetas */
  object-fit: cover; /* recorta la imagen sin deformarla */
  border-radius: 14px;
  margin-bottom: 12px;
}


/* =========================
   TARJETA RESTAURANTE
   ========================= */

   .tarjeta-restaurante {
    background: #0f172a;
    border: 2px solid #00e5ff;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 18px;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0,229,255,0.25);
  }
  
  .tarjeta-restaurante IMG {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  
  .tarjeta-restaurante h3 {
    margin: 8px 0 4px;
    color: #00e5ff;
  }
  
  .tarjeta-restaurante .provincia {
    font-size: 0.9rem;
    opacity: 0.9;
  }
  
  .tarjeta-restaurante .accesibilidad {
    margin-top: 6px;
    font-weight: bold;
  }
  
  .tarjeta-restaurante a {
    display: inline-block;
    margin-top: 10px;
    color: #00e5ff;
    text-decoration: none;
  }
  

  .alerta-ley {
    margin-top: 10px;
    padding: 10px;
    background: #3b0d0d;
    color: #ffb3b3;
    border-left: 4px solid #ff3b3b;
    border-radius: 6px;
    font-size: 14px;
  }
  


  /* =========================
   TARJETA footer podcast
   ========================= */
  .footer{
    background: #000;
    padding: 40px 20px;
    text-align: center;
  }
  
  /* BOTÓN */
  .btn-podcast{
    display: inline-block;
    margin-bottom: 20px;
  }
  
  .btn-podcast IMG{
    width: 200px;
    border-radius: 20px;
    background: linear-gradient(135deg, #24a4c7, #2a1db8);
    padding: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse 2.3s infinite;
  }
  
  /* HOVER */
  .btn-podcast IMG:hover{
    transform: scale(1.1);
    box-shadow: 0 0 35px rgba(30,215,96,0.9);
  }
  
  /* TEXTO */
  .footer-text{
    color: #aaa;
    font-size: 14px;
    margin-top: 10px;
  }
  
  /* ANIMACIÓN */
  @keyframes pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.06); }
    100%{ transform: scale(1); }
  }
  
  .footer{
    background: #000;
    padding: 50px 20px;
    text-align: center;
  }
  
  /* BOTÓN */
  .btn-podcast{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #1db954, #00ffcc);
    color: #000;
    font-weight: 200;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 0 25px rgba(30,215,96,0.6);
    animation: pulse 2.4s infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* ICONO */
  .icon-play{
    font-size: 20px;
  }
  
  /* HOVER */
  .btn-podcast:hover{
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(30,215,96,1);
  }
  
  /* TEXTO DERECHOS */
  .footer-text{
    margin-top: 25px;
    color: #aaa;
    font-size: 14px;
  }
  
  /* ANIMACIÓN */
  @keyframes pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.06); }
    100%{ transform: scale(1); }
  }
  

  button,
.btn,
a.btn{
  position: relative;
  transition: 
    transform .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s ease,
    filter .25s ease;
}

button:hover,
.btn:hover,
a.btn:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 26px rgba(0, 255, 200, 0.55);
  filter: brightness(1.12);
}
button::after,
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.4) 10%, transparent 10%);
  transform: scale(0);
  opacity: 0;
  transition: transform .5s, opacity .8s;
}

button:active::after,
.btn:active::after{
  transform: scale(2.5);
  opacity: 0;
}

@keyframes neonPulse{
  0%{ box-shadow: 0 0 14px rgba(0,255,200,.4); }
  50%{ box-shadow: 0 0 28px rgba(0,255,200,.85); }
  100%{ box-shadow: 0 0 14px rgba(0,255,200,.4); }
}

button:hover,
.btn:hover{
  animation: neonPulse 1.8s infinite;
}
/* ===== EFECTOS PREMIUM GLOBALES ===== */

button,
.btn,
a.btn{
  position: relative;
  transition:
    transform .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s ease,
    filter .25s ease;
}

button:hover,
.btn:hover,
a.btn:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 26px rgba(0,255,200,.55);
  filter: brightness(1.12);
}

/* RIPPLE */
button::after,
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.35) 10%, transparent 10%);
  transform:scale(0);
  opacity:0;
}

button:active::after,
.btn:active::after{
  transform:scale(2.5);
  opacity:0;
  transition:transform .5s, opacity .8s;
}
.btn-podcast{
  position: relative;
  transition:
    transform .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s ease,
    filter .25s ease;
}

.btn-podcast:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 26px rgba(0,255,200,.55);
  filter: brightness(1.12);
}
/* ============================= */
/* EFECTO GLOBAL HOVER – TODOS LOS BOTONES */
/* ============================= */

/* enlaces que parecen botones */
a,
button,
.pestana,
.red-icon,
.btn,
.btn-podcast{
  transition:
    transform .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s ease,
    filter .25s ease;
}
/* ===== SOLO dentro de LUGARES: evita que el contenido se monte sobre las pestañas ===== */
#seccion-lugares #menu-categorias{
  position: sticky;      /* se mantiene arriba cuando scrolleas */
  top: 0;
  z-index: 50;
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(2,44,67,.75);   /* mismo look del fondo, pero para que tape lo de abajo */
  backdrop-filter: blur(6px);
}

/* Empuja cualquier contenido que venga después del menú (incluyendo volcanes) */
#seccion-lugares #descripcion-categoria,
#seccion-lugares #lugares-lista{
  position: relative;
  z-index: 1;
  margin-top: 18px;
}
#seccion-lugares{
  padding-top: 10px;
}
/* ===== VOLCANES: controles de fotos arriba (no sobre letras) ===== */

/* La tarjeta como referencia para posicionar */
#seccion-lugares .lugar-card{
  position: relative;
}

/* Asegura que la imagen sea un bloque completo */
#seccion-lugares .lugar-card img{
  display: block;
}

/* Si tus controles tienen clases típicas (dots / tabs / controles / prev/next) */
#seccion-lugares .lugar-card :is(
  .foto-tabs,
  .pestanas-fotos,
  .carousel-tabs,
  .carousel-controls,
  .slider-controls,
  .dots,
  .swiper-pagination,
  .swiper-button-next,
  .swiper-button-prev,
  .prev,
  .next
){
  position: absolute !important;
  top: 10px !important;      /* <-- arriba */
  bottom: auto !important;
  left: 10px;
  right: 10px;
  z-index: 20;
}

/* Empuja el contenido de texto para que no quede debajo de controles */
#seccion-lugares .lugar-card :is(h3, p, .texto, .descripcion){
  position: relative;
  z-index: 1;
}
/* ===== VOLCANES: quitar fondo azul de la pestaña ===== */
#seccion-lugares #menu-categorias{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* ===== SOLO VOLCANES: quitar efecto barra azul ===== */

/* Cuando está seleccionada la categoría Volcanes */
#seccion-lugares #menu-categorias{
  position: static !important;   /* elimina sticky */
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Asegura que el contenido quede debajo */
#seccion-lugares #descripcion-categoria,
#seccion-lugares #lugares-lista{
  margin-top: 25px;
}
/* ===== VOLCANES: flechas limpias sobre la imagen ===== */

/* El contenedor de la tarjeta */
#seccion-lugares .lugar-card{
  position: relative;
  overflow: hidden;
}

/* Contenedor del botón / flecha (barra azul) */
#seccion-lugares .lugar-card .foto-tabs,
#seccion-lugares .lugar-card .carousel-controls,
#seccion-lugares .lugar-card .slider-controls{
  background: none !important;   /* ❌ quita barra azul */
  padding: 0 !important;
  box-shadow: none !important;
}

/* Flechas */
#seccion-lugares .lugar-card .prev,
#seccion-lugares .lugar-card .next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);  /* fondo sutil */
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

/* Posición izquierda / derecha */
#seccion-lugares .lugar-card .prev{ left: 10px; }
#seccion-lugares .lugar-card .next{ right: 10px; }

/* Hover elegante */
#seccion-lugares .lugar-card .prev:hover,
#seccion-lugares .lugar-card .next:hover{
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(1.1);
}
/* ===== VOLCANES: flechas centradas verticalmente en los lados ===== */

#seccion-lugares .lugar-card{
  position: relative;
  overflow: hidden;
}

/* Flechas */
#seccion-lugares .lugar-card .prev,
#seccion-lugares .lugar-card .next{
  position: absolute;
  top: 50%;                          /* centro vertical */
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);      /* fondo discreto */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

/* Izquierda / derecha */
#seccion-lugares .lugar-card .prev{
  left: 10px;
}

#seccion-lugares .lugar-card .next{
  right: 10px;
}

/* Hover elegante */
#seccion-lugares .lugar-card .prev:hover,
#seccion-lugares .lugar-card .next:hover{
  background: rgba(0,0,0,0.75);
  transform: translateY(-50%) scale(1.15);
}

@media (max-width: 768px){

  .header-contenido{
    flex-wrap: wrap;        /* 🔥 permite bajar elementos */
    gap: 8px;
  }

  .header-contenido h1{
    width: 100%;            /* 🔥 fuerza el título a su línea */
    font-size: 1.8rem;
    text-align: center;
  }

  .icono-flag,
  .icono-logo{
    width: 35px;
  }

}

@media (max-width: 768px){

  /* Oculta los primeros (los de arriba) */
  .header-contenido img:nth-child(1),
  .header-contenido img:nth-child(2){
    display: none;
  }

}

/* Oculta temporalmente el botón de podcast */
.btn-podcast {
  display: none !important;
}