:root{
  --bg:#232323;
  --bg-2:#1b1b1b;
  --text:#f3f3f3;
  --muted:#cfcfcf;
  --accent:#e63946;      /* rojo coherente con tu sitio */
  --stroke:rgba(255,255,255,0.10);
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

/* Reset breve */
*{box-sizing:border-box}
html,body{height:100%; scroll-behavior:smooth;}
body{margin:0;font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--text); background:var(--bg-2); padding: 80px 0;}

/* Navbar */
.navbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  background:#2b2b2b; padding:14px 28px; border-bottom:1px solid var(--stroke);
}

.navbar .logo img {
  height: 42px;       /* Ajusta según el tamaño de tu navbar */
  width: auto;
  display: block;
}

.navbar .logo{font-weight:700}
.navbar nav{display:flex; gap:18px}
.navbar nav a{color:#fff; text-decoration:none; position:relative; padding:4px 0; transition:.25s}
.navbar nav a::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:100%; height:2px;
  background:var(--accent); transform:translateX(-50%) scaleX(0); transform-origin:center; transition:.25s;
}
.navbar nav a:hover{color:var(--accent)}
.navbar nav a:hover::after{transform:translateX(-50%) scaleX(1)}
.btn-contacto{background:var(--accent); color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none}



/* ===== HAMBURGUESA: icono visible + animación fiable ===== */
.hamburger{
  display:none;                /* se muestra en mobile (ver media query) */
  width:44px; height:44px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:#2b2b2b;
  padding:0;                   /* evita descentrados */
  outline:0;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  gap:6px;                     /* espacio vertical entre líneas (con column via grid) */
}

.hamburger span{
  width:22px; height:2px;
  background:#fff !important;  /* fuerza color por si había overrides */
  border-radius:2px;
  display:block;
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}

/* Organización vertical sin sorpresas */
.hamburger{ 
  display:none; 
}
@media (max-width: 960px){
  .hamburger{ display:flex; flex-direction:column; }
}






/* ================== Navbar (Fijo) ================== */
.navbar{
  position: fixed; top:0; left:0; right:0;
  z-index: 3000;
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:#2b2b2b; padding:15px 40px;
  border-bottom:1px solid var(--stroke);
}
.navbar .logo{font-weight:800}

/* Navegación desktop */
.navbar nav{ position: static; transform:none; padding:0; height:auto; background:transparent; border:0; z-index:auto; }
.navbar ul{list-style:none; display:flex; gap:20px}
.navbar a{color:#fff; text-decoration:none}
.navbar ul li a{
  position:relative; padding:5px 0; transition:color .3s ease;
}
.navbar ul li a::after{
  content:""; position:absolute; left:50%; bottom:-4px; width:100%; height:2px; background:var(--accent);
  transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform .3s ease;
}
.navbar ul li a:hover{color:var(--accent)}
.navbar ul li a:hover::after{transform:translateX(-50%) scaleX(1)}

/* CTA Contacto */
.btn-contacto{
  background:var(--accent); padding:10px 20px; border-radius:8px; text-decoration:none; color:#fff; margin-left:20px;
  transition:background .3s ease;
}
.btn-contacto:hover{background:#c12734}

/* ================== Hamburguesa ================== */
.hamburger{
  display:none; width:42px; height:42px;
  border:1px solid var(--stroke); border-radius:10px; background:#2b2b2b;
  align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.hamburger span{ display:block; width:20px; height:2px; background:#fff; transition:.25s ease; transform-origin:center; }
.hamburger.is-active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* CTA de contacto dentro del panel (oculto en desktop) */
.navbar .menu-contacto .btn-contacto{ display:none; width:100%; text-align:center; margin-top:10px; }

/* ================== Overlay (base) ================== */
.menu-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;            /* debajo del panel (3002) y encima del contenido */
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s step-end;
}
body.menu-open .menu-overlay{
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ================== Mobile (≤ 960px) ================== */
@media (max-width: 960px){
  .hamburger{ display:flex; }
  .btn-contacto-desktop{ display:none; }     /* ocultar CTA fuera del panel */
  .navbar{ padding:12px 16px; }

  /* Panel off-canvas */
  .navbar nav{
    position: fixed; top:0; right:0;
    height:100vh; width:78vw; max-width:360px;
    background:#1f1f1f; border-left:1px solid var(--stroke);
    transform: translateX(100%); transition: transform .3s ease;
    padding:80px 20px 24px; z-index:3002;  /* por encima del header y overlay */
  }
  body.menu-open .navbar nav{ transform: translateX(0); }

  .navbar nav ul{ display:flex; flex-direction:column; gap:18px; }
  .navbar nav a{ font-size:1.05rem; display:block; padding:12px 4px; }

  /* CTA dentro del panel */
  .navbar .menu-contacto .btn-contacto{ display:inline-block; width:50%; }
  
  /* Evitar scroll del body con panel abierto */
  body.menu-open{ overflow:hidden; }
}






/* Estado activo = “X” */
.hamburger.is-active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* HERO pequeño */
.hero-sm{
  position:relative; height:55vh; min-height:360px; display:flex; align-items:center;
  background: center/cover no-repeat var(--hero, url('images/hero-fallback.jpg')); 
}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));}
.hero-content{position:relative; z-index:1; max-width:850px; margin-left:70px; }
.hero-content .kicker{font-size:2rem; opacity:.9; margin:0 0 6px}
.hero-content h1{font-size:3.2rem; line-height:1.1; margin:0 0 14px; font-weight:800}
.hero-content .lead{color:#e6e6e6; font-size:1.05rem; margin:0 0 18px; max-width:800px}

.btn-primario{
  background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  padding:12px 24px; border-radius:10px; display:inline-block; transition:.3s ease; box-shadow:var(--shadow);
}
.btn-primario:hover{transform:translateY(-3px); filter:saturate(110%)}

.btn-ghost{
  display:inline-block; text-decoration:none; color:#fff; padding:12px 24px; border-radius:12px;
  border:1px solid rgba(255,255,255,.35); transition:.3s ease;
}
.btn-ghost:hover{border-color:#fff; transform:translateY(-2px)}

/* Contenedor secciones */
.wrap{max-width:1200px; margin:0 auto; padding:56px 24px}

/* Itinerario + facts */
.itinerario-header{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px}
.itinerario-header h2{
  font-size:3rem; font-weight:900; color:#bdbdbd; letter-spacing:1px; margin:0;
}
.quick-facts{display:flex; gap:22px; list-style:none; margin:8px 0 0; padding:0}
.quick-facts li{
  display:flex; gap:12px; align-items:flex-start; background:#2a2a2a; border:1px solid var(--stroke);
  padding:14px 16px; border-radius:12px; min-width:240px;
}
.quick-facts .ico{font-size:1.25rem; margin-top:2px}

/* Steps */
.steps-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:38px; margin-top:28px;
}
.step{
  background:#222; border:1px solid var(--stroke); border-radius:16px; padding:26px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:.3s ease;
}
.step:hover{transform:translateY(-6px)}
.step .num{font-size:56px; font-weight:900; color:var(--accent); line-height:1; margin-bottom:10px}
.step h3{font-size:1.1rem; margin:0 0 6px}
.step p{color:#d3d3d3; margin:0}

/* Incluye / No incluye */
.include-wrap{
  max-width:1200px; margin:0 auto; padding:40px 24px 70px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
}
.include{
  display:flex; gap:16px; align-items:flex-start; background:#2a2a2a; border:1px solid var(--stroke);
  padding:22px; border-radius:16px;
}
.badge{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; font-size:1.8rem; font-weight:800}
.badge.ok{background:#1c7f41}
.badge.no{background:#8a1f26}
.include h4{margin:0 0 8px; font-size:1.2rem}
.include ul{margin:0; padding-left:18px; color:#e0e0e0}

/* CTA */
.cta{
  background:#2b2b2b; padding:70px 20px; text-align:center; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
}
.cta h3{font-size:1.8rem; margin:0 0 22px}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

.footer {
  background: #111;
  padding: 80px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* para que en mobile se acomode */
  color: #fff;
}

.footer a {
  color: var(--accent);
  text-decoration: none;
    
}

.footer a:hover {
  text-decoration: underline;
}

.footer-left p {
  margin: 5px 0;
  font-size: 0.95rem;
    font-weight: 100;
}

.footer-right {
  display: flex;
  align-items: center;
}

.footer-logo {
  height: 100px;   /* ajusta según tu logo */
  width: auto;
  margin-left: 20px;
}

/* WhatsApp flotante */
.whatsapp-float{
  position:fixed; bottom:20px; right:20px; width:55px; height:55px; z-index:999;
  background:#25D366; border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; transition:.3s;
}
.whatsapp-float img{width:28px; height:28px}
.whatsapp-float:hover{transform:scale(1.08)}

/* Responsive */
@media (max-width:1100px){
  .steps-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:880px){
  .itinerario-header{flex-direction:column; align-items:flex-start}
  .quick-facts{flex-wrap:wrap}
}
@media (max-width:640px){
  .hero-content{margin-left:24px}
  .hero-content h1{font-size:2.4rem}
  .steps-grid{grid-template-columns:1fr}
  .include-wrap{grid-template-columns:1fr}
  .whatsapp-float{width:45px; height:45px; bottom:14px; right:14px}
  .whatsapp-float img{width:22px; height:22px}
}

.gallery {
  margin: 3rem auto;
}

.gallery h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

#caption {
  margin-top: 15px;
  text-align: center;
  color: #ccc;
  font-size: 16px;
}


/* ===== Botón moderno de idioma ===== */
.lang-switcher {
  margin-left: 20px;
  position: relative;
}

.lang-switcher select {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 50px;
  padding: 8px 32px 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .3s ease;
  outline: none;
  box-shadow: var(--shadow);
}

.lang-switcher select:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(230,57,70,.6);
  transform: translateY(-2px);
}

/* Icono flecha personalizado */
.lang-switcher::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--muted);
  pointer-events: none;
}


/* =========================
   FOOTER GOANDES (estilo minimal premium)
========================= */
.goa-footer{
  background: #f6efe7;              /* crema suave como el ejemplo */
  color: #1b1b1b;
  padding: 70px 24px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.goa-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
}

.goa-footer__top{
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
}

.goa-footer__logo{
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

.goa-footer__tagline{
  margin: 0;
  color: rgba(0,0,0,.70);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 720px;
}

.goa-footer__divider{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 28px 0;
}

.goa-footer__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.35fr;
  gap: 28px;
}

.goa-footer__title{
  margin: 0 0 12px;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.78);
}

.goa-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.goa-footer__list a{
  color: rgba(0,0,0,.72);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

.goa-footer__list a:hover{
  color: #000;
  opacity: .9;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.goa-footer__muted{
  color: rgba(0,0,0,.60);
}

.goa-footer__col--wide{
  padding-left: 10px;
}

.goa-footer__form{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.goa-footer__form input{
  width: 100%;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
  padding: 12px 14px;
  border-radius: 14px;
  outline: none;
  font-size: .95rem;
}

.goa-footer__form input:focus{
  border-color: rgba(230,57,70,.45);
  box-shadow: 0 0 0 4px rgba(230,57,70,.12);
}

.goa-footer__form button{
  border: 0;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 14px;
  background: #e63946;
  color: #fff;
  font-weight: 700;
  transition: transform .2s ease, filter .2s ease;
}

.goa-footer__form button:hover{
  transform: translateY(-1px);
  filter: brightness(.95);
}

/* Redes */
.goa-footer__social{
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.goa-footer__social a{
  text-decoration: none;
  color: rgba(0,0,0,.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.45);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.goa-footer__social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.22);
}

.goa-ico{
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Bottom */
.goa-footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.goa-footer__bottom small{
  color: rgba(0,0,0,.60);
}

.goa-footer__bottomlinks{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.goa-footer__bottomlinks a{
  color: rgba(0,0,0,.70);
  text-decoration: none;
  font-size: .95rem;
}

.goa-footer__bottomlinks a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Accesibilidad */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 900px){
  .goa-footer__top{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .goa-footer__logo{ width: 180px; }
  .goa-footer__grid{
    grid-template-columns: 1fr 1fr;
  }
  .goa-footer__col--wide{
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

@media (max-width: 520px){
  .goa-footer{
    padding: 54px 16px;
  }
  .goa-footer__grid{
    grid-template-columns: 1fr;
  }
  .goa-footer__form{
    grid-template-columns: 1fr;
  }
  .goa-footer__form button{
    width: 100%;
  }
}