/* Archivo CSS actualizado */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
color: #333; 
line-height: 1.6;
background: #fff;
}

/* HEADER */
header {
position: fixed;
width: 100%;
top: 0;
background: #fb8a06;
box-shadow: 0 2px 5px #053768;
z-index: 100;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
}
.logo {
width: 100px;
height: 100px;
object-fit: contain;
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 500;
}

/* HAMBURGER */
.hamburger {
display: none;
background: transparent;
border: none;
font-size: 1.6rem;
color: #fff;
cursor: pointer;
}

/* HERO */
.fondo {
background: url("https://cdn.pixabay.com/photo/2018/02/12/22/28/airplane-3149285_1280.jpg") center/cover no-repeat;
min-height: 100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
padding-top:120px;
position:relative;
}
.fondo::after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}
.fondo-content {
position:relative;
z-index:2;
}

/* MOBILE */
@media (max-width: 768px) {
@media (max-width: 768px) {

header .container {
display: flex;
align-items: center;
justify-content: space-between; /* logo izquierda / botón derecha */
padding: 0.5rem 1rem; /* HEADER MÁS PEQUEÑO */
height: 120px; /* Altura reducida */
}

.logo {
width: 55px;
height: 55px;
order: 1;
margin-right: auto; /* obliga a ir a la izquierda */
}

.hamburger {
display: flex;
order: 2;
background: none;
border: none;
color: #053768;
cursor: pointer;
margin-left: auto;
margin-top: -100%;
}

nav {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 75%;
max-width: 320px;
background: #fb8a06;
padding: 2.5rem 1.25rem;
transition: right 0.25s ease;
z-index: 120;
}

nav.open {
right: 0;
}
}

nav ul {
flex-direction:column;
gap:1.5rem;
}
nav ul li a {
color:white;
font-size:1.2rem;
}
}

/* Very small screens */
@media (max-width:420px){
.logo {
width:60px;
height:60px;
}
.hamburger {
font-size:1.4rem;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: #333;
line-height: 1.6;
background: #fff;
}
/* HEADER */
header {
position: fixed;
width: 100%;
top: 0;
background: #fb8a06;
box-shadow: 0 2px 5px #fb8a06;
z-index: 1000;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 500;
}
nav a:hover {
color: #e13a0d;
}
/* HERO */
.fondo {
background: url("https://cdn.pixabay.com/photo/2018/02/12/22/28/airplane-3149285_1280.jpg") center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.fondo::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.fondo-content {
position: relative;
z-index: 2;
max-width: 600px;
padding: 2rem;
}
.fondo h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.fondo p {
margin-bottom: 2rem;
}
.btn {
background: #023e8a;
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 30px;
text-decoration: none;
transition: background 0.3s;
}
.btn:hover {
background: #023e8a;
}
/* DESTINOS */
.destinos {
padding: 5rem 2rem;
text-align: center;
}
.destinos h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.destinos .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card h3 {
padding: 1rem;
}
/* SERVICIOS */
.servicios {
background: #f8f9fa;
padding: 5rem 2rem;
text-align: center;
}
.servicios h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.servicios .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.servicio {
background: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* FOOTER */
footer {
background: #023e8a;
color: #fff;
text-align: center;
padding: 2rem 1rem;
}
.footer-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.socials {
list-style: none;
display: flex;
justify-content: center;
gap: 1rem;
margin: 1rem 0;
}
.socials img {
width: 24px;
filter: invert(1);
transition: transform 0.3s;
}
.socials img:hover {
transform: scale(1.2);
}
.copy {
font-size: 0.9rem;
opacity: 0.8;
color: white;
}
/* RESPONSIVE */
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
nav ul {
flex-direction: column;
gap: 1rem;
}
.hero h2 {
font-size: 2rem;
}
}
.reservas {
padding: 4rem 2rem;
background: #ffffff;
text-align: center;
}
.reservas form {
max-width: 600px;
margin: 0 auto;
background: #f8f9fa;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.reservas label {
display: block;
margin-top: 1rem;
text-align: left;
font-weight: 500;
}
.reservas input,
.reservas select {
width: 100%;
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 10px;
margin-top: 0.3rem;
}
.reservas button {
margin-top: 1.5rem;
width: 100%;
}
.modal {
display: none;
position: fixed;
z-index: 200;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: #fff;
padding: 2rem;
border-radius: 15px;
text-align: center;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
position: relative;
}
.cerrar {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
cursor: pointer;
}
.opciones-pago {
display: flex;
justify-content: space-around;
margin: 1.5rem 0;
}
.pago-btn {
background: #023e8a;
color: white;
border: none;
border-radius: 10px;
padding: 0.8rem 1rem;
cursor: pointer;
transition: background 0.3s;
}
.pago-btn:hover {
background: #fb8a06;
}
.info-pago p {
margin-top: 1rem;
}
/* ESPAÑA */
.pais-hero-españa {
background: url("https://images.unsplash.com/photo-1599484205751-0fc4e23e1cd7?fm=jpg&q=60&w=1600") center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}
.pais-hero-españa::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.pais-hero-content {
position: relative;
z-index: 2;
animation: fadeIn 2s ease;
}
.section {
padding: 4rem 2rem;
max-width: 1000px;
margin: auto;
animation: fadeIn 1.5s ease;
}
.section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #023e8a;
}
.section p {
margin-bottom: 2rem;
line-height: 1.7;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.gallery img {
width: 100%;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-volver {
display: inline-block;
background: #0077b6;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
transition: 0.3s;
}
.btn-volver:hover {
background: #023e8a;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* RUMANIA */
.pais-hero-rumania {
background: url("https://images.unsplash.com/photo-1534371020656-6b85825f2b1a?fm=jpg&q=60&w=1600") center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}
.pais-hero-rumania::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.pais-hero-content {
position: relative;
z-index: 2;
animation: fadeIn 2s ease;
}
.section {
padding: 4rem 2rem;
max-width: 1000px;
margin: auto;
animation: fadeIn 1.5s ease;
}
.section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #023e8a;
}
.section p {
margin-bottom: 2rem;
line-height: 1.7;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.gallery img {
width: 100%;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-volver {
display: inline-block;
background: #0077b6;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
transition: 0.3s;
}
.btn-volver:hover {
background: #023e8a;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ISRAEL */
.pais-hero-israel {
background: url("https://images.unsplash.com/photo-1614517453351-6c1522fc7a56?fm=jpg&q=60&w=1600") center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}
.pais-hero-israel::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.pais-hero-content {
position: relative;
z-index: 2;
animation: fadeIn 2s ease;
}
.section {
padding: 4rem 2rem;
max-width: 1000px;
margin: auto;
animation: fadeIn 1.5s ease;
}
.section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #023e8a;
}
.section p {
margin-bottom: 2rem;
line-height: 1.7;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.gallery img {
width: 100%;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-volver {
display: inline-block;
background: #0077b6;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
transition: 0.3s;
}
.btn-volver:hover {
background: #023e8a;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* EGIPTO */
.pais-hero-egipto {
background: url("https://images.unsplash.com/photo-1553913861-c0fddf2619ee?fm=jpg&q=60&w=1600") center/cover no-repeat;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.pais-hero-egipto::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.pais-hero-content {
position: relative;
z-index: 2;
animation: fadeIn 2s ease;
}
.section {
padding: 4rem 2rem;
max-width: 1000px;
margin: auto;
animation: fadeIn 1.5s ease;
}
.section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #023e8a;
}
.section p {
margin-bottom: 2rem;
line-height: 1.7;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.gallery img {
width: 100%;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-volver {
display: inline-block;
background: #0077b6;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
transition: 0.3s;
}
.btn-volver:hover {
background: #023e8a;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
main {
max-width: 600px;
margin: 4rem auto;
background: #fff;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
}
h1 {
color: #3457D5;
margin-bottom: 1rem;
}
.metodos {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.btn {
background: #3457D5;
color: #fff;
border: none;
border-radius: 10px;
padding: 1rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: #1e3ea8;
}
.info {
margin-top: 2rem;
font-size: 1rem;
color: #333;
}
.btn-index {
display: inline-block;
margin-top: 3rem;
padding: 0.75rem 1.5rem;
}
.btn.btn-index {
margin-top: 3rem !important;
}
.ofertas-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin: 2rem 0;
justify-content: center;
}
.oferta {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 1rem;
backdrop-filter: blur(5px);
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: transform 0.3s, background 0.3s;
}
.oferta:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
}
.oferta h4 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: #ffd166;
}
.oferta p {
font-size: 0.9rem;
margin: 0;
}
@media (max-width: 768px) {
.ofertas-hero {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
}


/* ----------------------------- */
/*      MENÚ DESPLEGABLE HOVER   */
/* ----------------------------- */

/* contenedor principal Destinos */
.dropdown-click {
  position: relative;
}

/* enlace del botón principal */
.dropbtn-click {
  color: #333 !important;
  padding: 0px 15px;
  display: block;
  cursor: pointer;
}

/* caja que contiene todos los tipos de viaje */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 25px;
  right: 0;
  background: #fb8a06;
  min-width: 230px;
  border-radius: 8px;
  padding: 8px 0;
  z-index: 999;
}

/* Mostrar menú al pasar encima */
.dropdown-click:hover > .dropdown-menu {
  display: block;
}

/* ----------------------------- */
/*      SUBMENÚS                 */
/* ----------------------------- */

.sub-dropdown-click {
  position: relative;
}

.subbtn-click {
  display: block;
  width: 100%;
  padding: 20px 15px;
  color: white !important;
  cursor: pointer;
}

.subbtn-click:hover {
  background: rgba(255,255,255,0.15);
}

/* submenú desplegable */
.sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: rgba(0,0,0,0.15);
  min-width: 210px;
  border-radius: 6px;
  padding: 8px 0;
}

/* Mostrar submenú al pasar encima */
.sub-dropdown-click:hover > .sub-menu {
  display: block;
}

/* enlaces dentro del submenú */
.sub-menu li a {
  padding: 10px 15px;
  color: white !important;
  display: block;
}

.sub-menu li a:hover {
  background: black;
}

/* ----------------------------- */
/*      RESPONSIVE MÓVIL         */
/* ----------------------------- */

@media (max-width: 768px) {

  /* los menús ya no deben ser absolutos */
  .dropdown-menu,
  .sub-menu {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 0;
    background: #fb8a06;
  }

  /* evitar los hover en móvil */
  .dropdown-click:hover > .dropdown-menu,
  .sub-dropdown-click:hover > .sub-menu {
    display: none;
  }
}


/* ----------------------------- */
/*     MARAMUREȘ – ESTILO NUEVO */
/* ----------------------------- */

.pais-hero-maramures {
  background: url("https://www.shutterstock.com/image-photo/aerial-view-baia-mare-city-600nw-2118919007.jpg")
  center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.pais-hero-maramures::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
}

.hero-title {
  font-size: 3rem;
  font-weight: 500;
}

.hero-subtitle {
  font-size: 1.3rem;
  font-weight: 300;
}

.big-title {
  font-size: 2.4rem;
  text-align: center;
  color: #023e8a;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.day-title {
  font-size: 1.9rem;
  color: #fb8a06;
  font-weight: 600;
  margin-bottom: 1rem;
}

.big-paragraph {
  font-size: 1.15rem;
  line-height: 1.8;
}

.day-img {
  width: 100%;
  border-radius: 15px;
  margin: 1rem 0 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.day-section {
  margin-bottom: 3rem;
  animation: fadeIn 1.3s ease;
}

/* SECCIÓN DE FECHAS Y PRECIOS */
.fechas-precio {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 2rem;
}

.fechas-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
}

.lista-fechas {
  list-style: none;
  padding: 0;
  font-size: 1.2rem;
  line-height: 2;
}

.precio-box {
  background: #023e8a;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  color: white;
  text-align: center;
  min-width: 260px;
}

.precio-final {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

.incluye-texto {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ---------------------------------------- */
/*     MARAMUREȘ — TEXTOS MÁS GRANDES       */
/* ---------------------------------------- */

/* Títulos generales */
.section h2,
.big-title {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #012b68 !important;
    text-align: center;
    letter-spacing: 1px;
}

/* Textos del hero */
.pais-hero-maramures h1 {
    font-size: 4rem !important;
    font-weight: 800 !important;
}

.pais-hero-maramures p {
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    margin-top: 1rem;
}

/* Títulos de los días */
.day-section h2 {
    font-size: 2.7rem !important;
    font-weight: 700 !important;
    color: #012b68 !important;
    text-align: left;
    margin-bottom: 1.3rem;
}

/* Párrafos de los días */
.day-section p {
    font-size: 1.45rem !important;
    line-height: 2rem !important;
    color: #333 !important;
    font-weight: 400 !important;
}

/* Introducción */
.intro-maramures p {
    font-size: 1.5rem !important;
    line-height: 2.2rem !important;
}

/* Galería – mejora visual */
.gallery img {
    border-radius: 15px;
    transition: transform 0.3s;
}
.gallery img:hover {
    transform: scale(1.03);
}

/* FECHAS Y PRECIOS */
.lista-fechas li {
    font-size: 1.5rem !important;
    font-weight: 600;
}

.precio-box h3 {
    font-size: 2rem !important;
    font-weight: 600;
}

.precio-final {
    font-size: 3rem !important;
    font-weight: 800 !important;
}

.incluye-texto {
    font-size: 1.3rem !important;
}

/* Botón volver */
.btn-volver {
    font-size: 1.4rem !important;
    padding: 1rem 2.2rem !important;
}

/* Móvil — que siga viéndose grande y limpio */
@media (max-width: 768px) {

    .section h2,
    .big-title {
        font-size: 2.3rem !important;
    }

    .pais-hero-maramures h1 {
        font-size: 2.8rem !important;
    }

    .pais-hero-maramures p {
        font-size: 1.4rem !important;
    }

    .day-section h2 {
        font-size: 2.1rem !important;
    }

    .day-section p {
        font-size: 1.25rem !important;
        line-height: 2rem !important;
    }

    .precio-final {
        font-size: 2.4rem !important;
    }
}
.ofertas-hero a.oferta {
    text-decoration: none !important;
    color: white !important;
    display: block;
}
/* ----------------------------- */
/*     ISRAEL & IORDANIA         */
/* ----------------------------- */

.pais-hero-israel {
    background: url("https://media.istockphoto.com/id/1051505002/es/foto/la-puesta-de-sol-de-jordania-amman-sobre-ruinas-romanas.jpg?s=612x612&w=0&k=20&c=UoEtdhIfvSOUcZXX2c-JNpWNvSuJi-aUH_v9wj7-MEM=")
    center/cover no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

.pais-hero-israel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
}

.pais-hero-israel .pais-hero-content {
    position: relative;
    z-index: 2;
}

.pais-hero-israel h1 {
    font-size: 4rem;
    font-weight: 800;
}

.pais-hero-israel p {
    font-size: 1.7rem;
}

/* títulos */
.day-section h2 {
    font-size: 2.4rem;
    color: #fb8a06;
    margin-bottom: 1rem;
}

.day-section p {
    font-size: 1.3rem;
    line-height: 2rem;
}

.big-title {
    font-size: 2.8rem;
    color: #023e8a;
}

/* galería */
.gallery img {
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: .3s;
}
.gallery img:hover {
    transform: scale(1.03);
}

/* ====================== */
/* WHATSAPP + BANDERAS    */
/* ====================== */

.whatsapp-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 999999;
}

.whatsapp-btn {
  position: relative; /* necesario para colocar la bandera */
  display: inline-block;
}

.whatsapp-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.whatsapp-icon:hover {
  transform: scale(1.12);
}

.flag-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

@media(max-width: 768px){
  .whatsapp-icon {
    width: 35px;
    height: 35px;
  }
  .flag-icon {
    width: 16px;
    height: 16px;
    top: -4px;
    right: -4px;
  }
}
@media(max-width: 768px){
  .whatsapp-icon {
    width: 35px;
    height: 35px;
  }
  .flag-icon {
    width: 16px;
    height: 16px;
    top: -4px;
    right: -4px;
  }
}

/* ----------------------------- */
/*   COSTA CANTÁBRICA – ESTILO   */
/* ----------------------------- */

.pais-hero-costa {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.pais-hero-costa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
}

.pais-hero-costa .pais-hero-content {
  position: relative;
  z-index: 2;
  animation: fadeIn 2s ease;
}

/* Títulos principales */
.big-title {
  font-size: 2.8rem;
  color: #023e8a;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Imágenes diarias */
.day-img {
  width: 100%;
  border-radius: 15px;
  margin: 1rem 0 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Párrafos del itinerario */
.day-section p {
  font-size: 1.35rem;
  line-height: 2rem;
  color: #333;
}

/* Caja de precios */
.precio-box {
  background: #023e8a;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  color: white;
  text-align: center;
  min-width: 260px;
}

.precio-final {
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0.5rem 0;
}

.incluye-texto {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* =============================== */
/* ANIMACIÓN PARA ICONOS WHATSAPP  */
/* =============================== */

/* Animación suave de “rebote” */
@keyframes whatsappBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  60%  { transform: translateY(0); }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Aplicar animación periódica a los botones */
.whatsapp-btn {
  animation: whatsappBounce 2.2s ease-in-out infinite;
}

/* Efecto cuando el usuario pasa el mouse */
.whatsapp-btn:hover .whatsapp-icon {
  transform: scale(1.2) !important;
}

/* ============================ */
/*  MEJORAS VISUALES DEL MENÚ   */
/* ============================ */

nav ul li a {
  font-size: 1.15rem !important;   /* Un poquito más grande */
  font-weight: 600 !important;     /* Más marcadas */
  letter-spacing: 0.5px;           /* Separación elegante */
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Línea animada debajo */
nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #012b68;             /* Color elegante (azul oscuro) */
  transition: width 0.3s ease;
}

/* Al pasar el mouse */
nav ul li a:hover {
  color: #012b68 !important;       /* Color destacado */
  transform: scale(1.07);          /* Ligero aumento */
}

nav ul li a:hover::after {
  width: 100%;
}

/* Mejoras en móvil */
@media (max-width: 768px) {
  nav ul li a {
    font-size: 1.3rem !important;
    padding: 10px 0;
  }
}


/* ================================ */
/*  HERO TEXT – MÁS LLAMATIVO       */
/* ================================ */

.fondo-content h2 {
  font-size: 3rem !important;         /* Más grande */
  font-weight: 800 !important;        /* Más poderoso */
  text-transform: uppercase;          /* Estilo más fuerte */
  letter-spacing: 2px;                /* Más aire entre letras */
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.45); /* Sombra suave */
  animation: fadeSlideDown 1.4s ease;
}

/* Subtítulo debajo */
.fondo-content p {
  font-size: 1.45rem !important;
  font-weight: 400;
  color: #f1f1f1;
  max-width: 700px;
  margin: 1rem auto 0 auto;
  line-height: 1.8rem;
  text-shadow: 0 3px 8px rgba(0,0,0,0.4);
  animation: fadeSlideUp 1.4s ease;
}

/* Animaciones suaves */
@keyframes fadeSlideDown {
  0% { opacity: 0; transform: translateY(-25px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(25px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mejora en móvil */
@media (max-width: 768px) {
  .fondo-content h2 {
    font-size: 2.2rem !important;
    letter-spacing: 1px;
  }

  .fondo-content p {
    font-size: 1.2rem !important;
  }
}





/* ----- BADGE SORTEO (junto al logo) ----- */
.sorteo-badge {
  background: linear-gradient(90deg, #ffdd57, #ff7a18);
  border: none;
  color: #1b1b1b;
  margin-left: -700px;
  font-weight: 700;
  padding: 30px 35px;
  border-radius: 22px;
  cursor: pointer;  /* 🔥 antes era 12px. Ahora queda pegado al logo */
  box-shadow: 0 10px 125px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: sorteoFloat 3s ease-in-out infinite, sorteoPulse 3s ease-in-out infinite;
}


/* texto opcional más pequeño para no romper layout */
.sorteo-badge .sorteo-text {
  white-space: nowrap;
  font-size: 1.5rem;
}

/* animación de llamar la atención (flotar + pulso) */
@keyframes sorteoFloat {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-6px) scale(1.02); }
  70%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0); }
}
@keyframes sorteoPulse {
  0% { box-shadow: 0 6px 18px rgba(255,122,24,0.18); }
  50% { box-shadow: 0 10px 30px rgba(255,122,24,0.28); }
  100% { box-shadow: 0 6px 18px rgba(255,122,24,0.18); }
}

.sorteo-badge {
  animation: sorteoFloat 3s ease-in-out infinite, sorteoPulse 3s ease-in-out infinite;
}

/* pequeño efecto hover */
.sorteo-badge:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25);
}

/* Ajustes responsive: en pantallas muy pequeñas mover más cerca del logo o esconder texto */
@media (max-width:420px) {
  .sorteo-badge { padding:6px 8px; }
  .sorteo-badge .sorteo-text { display:none; } /* solo icono */
}

/* ----- MODAL SORTEO (uso de clases ya existentes .modal .modal-content, pero se ajusta) ----- */
.sorteo-modal-content {
  max-width: 460px;
  width: 92%;
  padding: 1.25rem 1.4rem;
  border-radius: 14px;
  text-align: left;
}
.sorteo-modal-content h3 { margin-bottom:6px; color:#023e8a; }
.sorteo-modal-content p { margin-bottom:10px; color:#333; }

.sorteo-modal-content label {
  display:block;
  margin-top:8px;
  font-weight:600;
  font-size:0.95rem;
}
.sorteo-modal-content input[type="email"],
.sorteo-modal-content input[type="tel"] {
  width:100%;
  padding:0.6rem;
  margin-top:6px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:0.95rem;
}

/* reuse .cerrar style but ensure good size */
.sorteo-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
}

/* success */
#sorteoSuccess h4 { color: #0a8a3a; margin-bottom:6px; }

/* Asegurar z-index por encima de header */
#sorteoModal { z-index: 99999; }

/* ----- SORTEO: prefijo + teléfono (select bonito) ----- */
.sorteo-phone-row{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

/* wrapper para dibujar la flecha */
.sorteo-prefix-wrap{
  position: relative;
  flex: 0 0 180px;
  max-width: 200px;
}

#sorteoPrefix{
  width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 0.75rem; /* espacio para la flecha */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #333;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Flecha */
.sorteo-prefix-wrap::after{
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #053768;
  font-size: 0.95rem;
}

/* En la fila teléfono, el input debe ocupar el resto (no 100% fijo) */
.sorteo-phone-row input[type="tel"]{
  flex: 1;
  width: auto;
  min-width: 0;
}

/* Foco consistente con tu azul */
#sorteoPrefix:focus{
  outline: none;
  border-color: #023e8a;
  box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.15);
}

/* Móvil: si no cabe, que baje a otra línea */
@media (max-width: 420px){
  .sorteo-phone-row{ flex-wrap: wrap; }
  .sorteo-prefix-wrap{ flex: 1 1 160px; max-width: none; }
  .sorteo-phone-row input[type="tel"]{ flex: 1 1 220px; }
}


/* =========================================================
   MOBILE OVERRIDES — PÉGALO AL FINAL DEL ARCHIVO CSS
   (corrige layout en móvil: header, badge sorteo, nav, grids)
   ========================================================= */

/* Evita “saltos” por header fixed al navegar con anclas */
html { scroll-padding-top: 140px; }

/* ----------- TABLET/MÓVIL ----------- */
@media (max-width: 768px) {

  /* HEADER: 2 filas (logo+burger arriba, badge sorteo abajo) */
  header { z-index: 1000; }
  header .container{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    height: auto;               /* quita alturas fijas */
    align-items: center;
  }

  .logo{
    width: 56px;
    height: 56px;
    margin: 0;
    order: 1;
  }

  /* Badge sorteo: elimina el margin-left negativo y lo hace “pill” */
  .sorteo-badge{
    order: 3;
    width: 100%;
    margin: 0;                 /* IMPORTANTÍSIMO: mata el -700px */
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .sorteo-badge .sorteo-text{
    font-size: 1rem;
  }

  /* Hamburger: sin hacks de margin-top negativos */
  .hamburger{
    display: inline-flex;
    order: 2;
    margin: 0;
    font-size: 1.9rem;
    color: #053768;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 10px;
  }

  /* NAV: off-canvas */
  nav#mainNav{
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(82vw, 340px);
    background: #fb8a06;
    padding: 84px 18px 18px;   /* espacio arriba por header */
    transition: right 0.25s ease;
    z-index: 1200;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,0.25);
  }
  nav#mainNav.open{ right: 0; }

  nav ul{
    flex-direction: column;
    gap: 12px;
  }
  nav ul li a{
    color: #fff !important;
    font-size: 1.15rem !important;
    padding: 10px 6px;
  }

  /* Desplegables en móvil: SIN hover; se abren por clase .open (JS) */
  .dropdown-menu,
  .sub-menu{
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    border-radius: 12px;
    padding: 8px 0;
    background: rgba(0,0,0,0.10);
    display: none;             /* cerrado por defecto */
  }

  .dropdown-click.open > .dropdown-menu{ display: block; }
  .sub-dropdown-click.open > .sub-menu{ display: block; }

  /* Botones de desplegable (se ven como items clicables) */
  .dropbtn-click,
  .subbtn-click{
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px;
  }

  /* HERO: evita que quede tapado por header */
  .fondo{
    min-height: 100svh;
    padding-top: 170px;        /* header + badge */
    padding-left: 16px;
    padding-right: 16px;
  }
  .fondo-content{
    max-width: 720px;
    padding: 0;
  }
  .fondo-content h2{
    font-size: 2.1rem !important;
    letter-spacing: 1px !important;
  }
  .fondo-content p{
    font-size: 1.15rem !important;
    line-height: 1.7rem !important;
  }

  /* Ofertas hero: 2 columnas en móvil */
  .ofertas-hero{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
  }
  .oferta{
    padding: 12px;
  }
  .oferta h4{
    font-size: 1rem;
  }
  .oferta p{
    font-size: 0.9rem;
  }

  /* Destinos/Servicios: 1 columna limpia */
  .destinos, .servicios{
    padding: 3.2rem 1.1rem;
  }
  .destinos .grid,
  .servicios .grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .card img{ height: 180px; }

  /* Footer: iconos y textos más compactos */
  footer{
    padding: 1.6rem 1rem;
  }
  .socials{
    gap: 14px;
  }
  .copy{
    font-size: 0.95rem;
    line-height: 1.4rem;
  }

  /* WhatsApp flotante: más pequeño y sin molestar */
  .whatsapp-container{
    bottom: 14px;
    right: 14px;
    gap: 8px;
  }
  .whatsapp-icon{
    width: 36px;
    height: 36px;
  }
  .flag-icon{
    width: 16px;
    height: 16px;
    top: -4px;
    right: -4px;
  }

  /* Modal: que se centre bien cuando lo muestres con display:flex */
  .modal{
    padding: 18px;
  }
  .modal-content{
    width: 100%;
    max-width: 420px;
  }

  /* Teléfono sorteo: que no se rompa */
  .sorteo-phone-row{ flex-wrap: wrap; }
  .sorteo-prefix-wrap{ flex: 1 1 160px; max-width: none; }
  .sorteo-phone-row input[type="tel"]{ flex: 1 1 220px; }
}

/* ----------- MÓVILES PEQUEÑOS ----------- */
@media (max-width: 420px) {

  html { scroll-padding-top: 155px; }

  .sorteo-badge{
    padding: 9px 10px;
  }
  .sorteo-badge .sorteo-text{
    display: none; /* deja solo el icono + “Gran Sorteo” si quieres */
  }

  .fondo{
    padding-top: 175px;
  }

  .ofertas-hero{
    grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
  }

  nav#mainNav{
    width: 88vw;
    padding-top: 78px;
  }
}
/* FIX LOGO EN MÓVIL: forzar layout del header */
@media (max-width: 768px){

  header{ height:auto !important; }

  header .container{
    display:flex !important;
    flex-direction: row !important;     /* evita columna */
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height:auto !important;
    padding: 10px 14px !important;
  }

  .logo{
    position: static !important;
    display:block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    order: 1 !important;
  }

  .hamburger{
    margin-top: 0 !important;           /* mata el -100% */
    order: 2 !important;
  }

  .sorteo-badge{
    margin-left: 0 !important;          /* mata el -700px */
    order: 3 !important;
    width: 100% !important;             /* segunda fila */
  }
}

/* Mostrar texto del botón de sorteo también en móviles pequeños */
@media (max-width: 420px){
  .sorteo-badge .sorteo-text{
    display: inline !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
  }

  .sorteo-badge{
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
}

/* ===========================
   AJUSTE HERO EN MÓVIL
   (sube el texto y ordena espacios)
   =========================== */
@media (max-width: 768px){

  /* Header un poco más compacto (opcional, pero ayuda) */
  header .container{
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .sorteo-badge{
    padding: 8px 10px !important;
  }

  /* HERO: en móvil NO lo centres verticalmente; arráncalo arriba */
  .fondo{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 135px !important;   /* baja este número si aún ves hueco */
    min-height: 100svh !important;
  }

  /* Sube un poco más el contenido */
  .fondo-content{
    margin-top: 12px !important;
    padding-bottom: 22px !important; /* deja aire al final del hero */
  }

  /* Ajuste de separación ofertas + botón */
  .ofertas-hero{
    margin: 14px 0 16px !important;
  }
  .btn{
    margin-top: 10px !important;
  }
}

/* móviles muy pequeños */
@media (max-width: 420px){
  .fondo{
    padding-top: 145px !important;
  }
  .fondo-content{
    margin-top: 10px !important;
  }
}