/* =========================================================
   0) TOKENS / VARIABLES
   ======================================================= */
:root{
  /* Page palette (light) */
  --bg: #fff;
  --surface: #ffffff;
  --card: #ffffff;
  --muted: #4b5b6b;
  --text: #0b1726;
  --line: #e6ecf2;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);

  /* Brand colors */
  --primary: #0ea5e9;
  --primary-700: #0284c7;
  --accent: #16a34a;
  --danger: #e11d48;

  /* Header (dark) */
  --header-bg: #111827;
  --header-text: #f9fafb;
  --header-line: rgba(255,255,255,.1);

  /* Menu dsplegable Movil */
  --page-gutter: calc((100vw - min(1200px, 92vw)) / 2);
}

/* =========================================================
   1) RESET Y UTILIDADES
   ======================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
}
a{ color:inherit; text-decoration:none }
.container{ width:min(1200px, 92vw); margin-inline:auto }
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem 1rem;
  border-radius:999px; border:1px solid transparent;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-700));
  color:#f0f9ff;
}
.btn.ghost{
  background: #ffffff;
  border:1px solid var(--line);
}

/* =========================================================
   2) HEADER
   ======================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
}

/* --- Layout principal --- */
/* Layout principal */
.header__nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.header__brand{ display:flex; align-items:center }
.header__logo{ height:60px; display:block }

/* Derecha: agrupa todo junto */
.header__actions{
  display:flex; align-items:center;
  gap: 16px;           /* separación compacta entre LANG y el menú */
  margin-left: auto;   /* empuja a la derecha por si cambia justify-content */
}

/* Menú de enlaces a la derecha */
.header__menu{
  display:flex; align-items:center;
  gap: 22px;           /* separaciones entre enlaces y CTA */
}
.header__link{
  color:var(--header-text); font-weight:500; opacity:.9; transition:opacity .2s;
}
.header__link:hover{ opacity:1 }

/* (opcional) ajusta el ancho del widget de idioma para que no abra huecos grandes */
.lang{ flex-shrink: 0; }


/* --- Idioma (solo uno, desktop) --- */
/* ===== Language selector (custom with icon + arrow) ===== */
/* ===== Language selector (custom with icon + arrow) ===== */
.lang{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background:#1f2937;
  border:1px solid #374151;
  border-radius: 8px;
  height: 36px;
  padding: 0 .55rem 0 .45rem;
  color:#f9fafb;
}
.lang__icon{ width:16px; height:16px; opacity:.9; flex-shrink:0 }
.lang__btn{
  display:flex; align-items:center; gap:.45rem;
  height:100%; padding:0 .3rem 0 .1rem;
  background:transparent; border:0; color:inherit; font-weight:700; cursor:pointer;
}
.lang__current{ letter-spacing:.3px }
.lang__arrow{ font-size:.65rem; opacity:.95; transform: translateY(1px) }

/* fallback select oculto */
.lang__native{ position:absolute; inset:0; opacity:0; pointer-events:none }

/* Popover menu */
/* Popover menu centrado */
.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;                          /* empezamos desde el centro */
  transform: translateX(-50%) scale(.98) translateY(-4px); 
  transform-origin: top center;        /* animación desde el centro */
  
  min-width: 160px;                    /* ancho mínimo */
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(2,6,23,.35);
  padding: 6px;
  margin: 0;
  list-style: none;
  
  opacity: 0;
  pointer-events: none;
  transition: transform .16s ease, opacity .16s ease;
  z-index: 60;
}

.lang--open .lang__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1) translateY(0); /* desplegado centrado */
}


/* Items */
.lang__menu li{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem;
  padding:.58rem .72rem;
  border-radius:10px;
  color:#e5e7eb;
  cursor:pointer;
  box-sizing:border-box;    /* evita crecer con sombras/bordes */
  white-space: nowrap;      /* no partir las palabras */
  overflow:hidden;          /* seguridad extra contra desbordes */
}
.lang__menu li span{ font-weight:600 }
.lang__menu li em{
  font-style:normal; opacity:.75; letter-spacing:.2px;
  color:#cbd5e1; flex-shrink:0; margin-left:.75rem;
}

/* hover/focus */
.lang__menu li:hover,
.lang__menu li:focus{
  background:#1e293b;
  outline: none;
}

/* seleccionado (sin outline que empuja el layout) */
.lang__menu li[aria-selected="true"]{
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color:#f0f9ff;
  box-shadow: inset 0 0 0 2px rgba(56,189,248,.9);
}
.lang__menu li[aria-selected="true"] em{ color:#f0f9ff; opacity:1 }















/* --- Burger --- */
/* Botón hamburguesa */
/* --- Burger --- */
.header__burger{
  display:none; background:transparent; border:0; cursor:pointer;
  width: 26px;                   /* un pelín mayor para que se vea bien */
  height: 28px;
  position: relative;
  z-index: 51;                   /* por encima del drawer */
}

/* 3 barras */
.header__burger span,
.header__burger span::before,
.header__burger span::after{
  content:"";
  position:absolute;
  left: 0; right: 0;             /* ancho completo del botón */
  height: 4px;                   /* grosor */
  background: var(--header-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

/* barra central */
.header__burger span{
  top:50%;
  transform: translateY(-50%);
}

/* superior e inferior (relativas al span) */
.header__burger span::before{ top:-9px; }
.header__burger span::after { top:  9px; }

/* ESTADO ABIERTO -> X */
/* Oculta SOLO la barra central, no los pseudo-elementos */
.header__burger.is-open span{
  background: transparent;   /* en vez de opacity:0 */
  /* opcional: box-shadow:none; */
}
            /* ocultar barra central */
.header__burger.is-open span::before{
  top:0; transform: rotate(45deg);
}
.header__burger.is-open span::after{
  top:0; transform: rotate(-45deg);
}

@media (max-width:900px){
  .header__burger{ display:block; }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .header__burger span,
  .header__burger span::before,
  .header__burger span::after{
    transition: none;
  }
}










/* --- Responsive (móvil ≤ 900px) --- */
@media (max-width: 900px){
  /* Mantener visibles el widget de idioma y el botón hamburguesa */
  .header__actions{
    display:flex;                /* NO ocultar el bloque entero */
    align-items:center;
    gap: 24px;                   /* espacio compacto entre idioma y burger */
    margin-left: auto;           /* pegado a la derecha */
  }

  /* Ocultar solo el menú de enlaces; pasará al panel móvil */
  .header__menu{ display:none }

  /* Mostrar el botón hamburguesa */
  .header__burger{
    display:block;
    margin-left: 4px;
  }

  /* Tamaño ligeramente más compacto del selector en móvil */
  .lang{
    height: 34px;
    padding: 0 .5rem 0 .45rem;
  }
}

/* Panel móvil (sin cambios funcionales; ajusto un pelín el padding) */
/* --- Menú móvil (drawer a la derecha, bajo el header) --- */
/* --- Menú móvil (drawer) --- */
.header__mobile{
  position: fixed;
right: 0;
  left: auto;
  bottom: auto;
   height: auto;  
   max-height: calc(100vh - 80px);
    overflow-y: auto;      
  top: 64px;
  width: min(47vw, 250px);   /* más estrecho */
  background: var(--header-bg);
  border-left: 1px solid var(--header-line);
  box-shadow: -18px 0 36px rgba(0,0,0,.25);
  padding: 12px 0;
  z-index: 40;

  transform: translateX(100%);
  transition: transform .25s ease;

   /* --- mejoras visuales --- */
  border-bottom-left-radius: 18px;  /* borde redondeado abajo a la izquierda */
  border-bottom-right-radius: 8px;  /* un toque también en la esquina derecha */
  box-shadow: -8px 8px 24px rgba(0,0,0,.45); /* sombra lateral + inferior */

  padding: 12px 0;
  z-index: 40;

  transform: translateX(100%);
  transition: transform .25s ease, max-height .2s ease;

}

/* Dentro del drawer no queremos el centrado/ancho de .container */
.header__mobile .container{
  width: auto;
  margin: 0;
}



.header__mobile.open{ transform: translateX(0); }
.header__mobile-inner{ padding-inline: 1rem }
.header__mobile-link{
  display:block; padding:.9rem 0;
  color: var(--header-text);
  border-bottom: 1px solid var(--header-line);
}

/* Botón dentro del panel móvil */
.header__mobile-cta {
  display: inline-block;       /* solo ocupa lo que necesita */
  text-align: center;
  margin: 1rem auto 0;         /* centrado */
  font-size: .9rem;            /* más compacto */
  padding: .5rem 1.2rem;       /* menos alto, más estrecho */
  border-radius: 999px;
  width: auto;                 /* evita sobresalir */
  max-width: 90%;              /* por si el texto es largo */
}











/* =========================================================
   3) HERO SECTION
   ======================================================= */
.hero{ padding:56px 0 18px }


.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:32px; align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px;
  background:#e6f6fe; color:#0369a1;
  font-size:.85rem; border:1px solid #bae6fd;
}
.headline{
  font-size: clamp(28px, 5.2vw, 56px);
  line-height:1.02; margin:14px 0;
}
.sub{ font-size: clamp(15px, 2.2vw, 18px); color: var(--muted) }
.hero-card.card{
  background: var(--card); border:1px solid var(--line);
  padding:18px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.badges{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
.badge{
  background:#f3f6fb; border:1px solid var(--line);
  padding:.5rem .7rem; border-radius:999px;
  font-size:.85rem; color:#334155;
}



/* ===== Hero con background ===== */
.hero--bg {
  min-height: 620px; 
  position: relative;
  background: url("images/Private transfer barcelona.webp") center center/cover no-repeat;
  padding: 200px 0; /* espacio arriba/abajo */
  color: #ffffff;
}

.hero--bg .headline {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero--bg .sub {
  color: #f1f5f9;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.hero--bg .hero-card {
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow);
}





@media (max-width: 768px){
  .hero.hero--bg{ padding-bottom: 20px !important; }
}



@media (max-width: 900px){
  .hero{ padding:120px 0 0px }
  .hero-grid{ grid-template-columns:1fr }
}

/* =========================================================
   4) SECTIONS & CARDS
   ======================================================= */
.section{ padding:22px 0 64px }
.card{
  background: var(--card); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-wrap{ padding:18px }

/* =========================================================
   5) FORMULARIOS
   ======================================================= */
form{ display:grid; gap:14px }
.grid-2{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
.grid-3{ display:grid; gap:14px; grid-template-columns: repeat(3,1fr) }
@media (max-width: 800px){
  .grid-2, .grid-3{ grid-template-columns:1fr }
}
label{
  display:block; font-size:.88rem;
  color:#1f2a37; margin-bottom:.35rem;
}
input, select, textarea{
  width:100%; padding:.85rem 1rem;
  background:#ffffff; color:var(--text);
  border:1px solid #d5dde6; border-radius:12px;
  outline:none; transition:border-color .15s ease;
}
input:focus, select:focus, textarea:focus{ border-color: var(--primary) }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.row .hint{ font-size:.85rem; color: var(--muted) }

/* Switch */
.switch{ display:inline-flex; align-items:center; gap:.6rem }
.switch input{
  appearance:none; width:40px; height:24px;
  background:#e6ecf2; border-radius:20px;
  position:relative; outline:none;
  border:1px solid #cbd5e1;
}
.switch input:checked{
  background:linear-gradient(180deg, var(--primary), var(--primary-700));
}
.switch input::after{
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; transition: all .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.switch input:checked::after{ left:18px }

/* Botones formulario */
.actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px }
.error{ color:var(--danger); font-size:.9rem }
.hidden{ display:none !important }

/* =========================================================
   6) FEATURES
   ======================================================= */
.features{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.feature{ padding:18px }
.feature h3{ margin:.2rem 0 }
.feature p{ color:var(--muted) }
@media (max-width: 900px){
  .features{ grid-template-columns:1fr }
}

/* =========================================================
   7) FOOTER
   ======================================================= */
/* Footer */
.footer {
  background-color: #111827;
  min-height: auto;
  color: white;
  padding: 4rem 1.5rem 2rem;
  font-size: 0.95rem;
}

.footer-titulo {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: white;
}


.footer-top {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* 3 columnas iguales */
  align-items: start;
  justify-items: center;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}


/* Columna izquierda: logo + enlaces */


/* Logo */
.logo-footer-left {
  width: 200px;
  height: auto;
  margin-top: -30px;
}

/* Enlaces debajo del logo */
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ centra logo + links */
  margin-top: 25px;
}

/* Centro */



.footer-titulo-centro {
  text-align: center;
  margin: 0 auto;
  display: block;
  width: fit-content;
  font-size: 2rem;
  font-weight: 700;
  color: white;

}



.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  align-items: center;
}



/* Logo alineado a la izquierda */
.footer-left {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ centra logo + links */
  gap: 0rem;
  flex: 1;
}

.footer-center {
  grid-column: 2;
}

/* Contacto */
.footer-contacto-center {
  margin-top: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
}

.footer-contacto-center a {
  color: white;
  text-decoration: none;
}

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


.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
}

.footer-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}




.footer-right {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 150px;
}

.footer-idioma {
  text-align: right;
}

.footer-idioma label {
  color: white;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.footer-idioma select {
  padding: 0.3rem;
  border-radius: 5px;
  border: none;
  font-size: 0.9rem;
}


.footer-links,
.footer-contacto,
.footer-idioma {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a,
.footer-contacto a {
  color: white;
  text-decoration: none;
}

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

.footer-idioma select {
  background-color: #1f2937;
  color: white;
  border: 1px solid #374151;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}

.footer-bottom {
  width: 100%;
  text-align: center;
  margin-top: 0rem;
  font-size: 0.8rem;
  color: #9ca3af;
  display: flex;
  justify-content: center;
}


/* Selector idioma */

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1rem;
}

.custom-language {
  margin-left: auto; /* lo empuja a la derecha */
  margin-right: 1.5rem;
  position: relative;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  margin-right: 1.5rem;
}

#mobile-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#mobile-nav .custom-language {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
}

.lang-trigger {
  background: none;
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  padding: 1rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.lang-menu {
  position: absolute;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%) scaleY(0.95);
  transform-origin: top center;
  background-color: white;
  color: black;
  border-radius: 8px;
  padding: 0rem 0;
  list-style: none;
  min-width: 50px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  overflow: hidden; /* 🔥 Este es el truco para que los bordes se recorten bien */

  /* Para forzar columna vertical */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.lang-menu.show {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  pointer-events: auto;
}

.lang-menu li {
  padding: 0.2rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lang-menu li:hover {
  background-color: #bdbdbd;
}

/* Estilo inicial de la flechita ▼ */
.lang-trigger .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Rotación cuando el menú está abierto */
.lang-menu.show ~ .lang-trigger .arrow {
  transform: rotate(180deg);
}

.lang-trigger.open .arrow {
  transform: rotate(180deg);
}

/* Centrado del texto "Selecciona idioma" con el selector */
.footer-right .language-block {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente el texto y el botón */
  gap: 0.5rem;
}

.footer-right .language-label {
  font-weight: 700;
  font-size: 1rem;
  color: white;
  text-align: center;
}


.language-label {
  margin-top: 1rem; /* ⬅ ajusta según lo que necesites */
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  opacity: 0.95;
  width: 100%;
}


.language-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* Centrado visual del selector de idioma en escritorio */
  @media (min-width: 769px) {
    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  
    .footer-right .language-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin: 0 auto;
      min-width: 120px; /* ⬅ igualamos al ancho del botón */
    }
  
    .footer-right .language-label {
      margin-bottom: 0.4rem;
      font-weight: 600;
      font-size: 0.95rem;
      color: white;

      
    }
    .footer-right .custom-language {
      margin-left: 0 !important;
      margin-right: 0 !important;
      justify-content: center;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: start;
      justify-items: center;
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding-bottom: 2rem;
    }
    
    .footer-top > div {
      position: relative;
      padding: 0 1rem;
    }
    
    /* Separadores verticales solo entre la 1ª y 2ª, y entre la 2ª y 3ª columnas */
    .footer-top > div:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 0;
      right: -60px;
      height: 100%;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.2); /* blanco semitransparente */
    }
    
  }
  
  

@media (max-width: 768px) {
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0rem;
  }

  /* Reordenamos las columnas */
  .footer-center {
    order: 1;
  }

  .footer-left {
    order: 2;
  }

  .footer-right {
    order: 3;
  }

  /* Ajustes visuales */
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo-footer-left {
    margin-top: 0;
    width: 160px;
  }

  .footer-titulo-centro {
    font-size: 1.8rem;
  }

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

  .footer-right .custom-language {
    margin: 0 auto; /* Centrado horizontal */
    justify-content: center;
  }

  .custom-language-header {
    position: relative;
    left: -3.2rem; /* o el valor que te guste */
  }

  .footer-top > div {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .footer-top > div:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 60%; /* Ajusta el ancho del separador */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
  }
}


/* ===== Footer: Payment methods ===== */
.payments{
  margin-top: 1rem;
  text-align: center;
}
.payments__title{
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .95;
  margin-bottom: .6rem;
}
.payments__grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  align-items: center;
}
.payments__grid li{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.payments__grid img{
  height: 33px;           /* controla el alto; el ancho se ajusta solo */
  width: auto;
  display: block;
  opacity: .95;
}
@media (min-width: 769px){
  .payments__grid img{ height: 30px; }
}

/* Si algún logo oscuro no se ve bien en el fondo,
   puedes aplicar blanco forzado solo a ese logo:
   .payments__grid img[alt="Stripe"]{ filter: brightness(0) invert(1); }
*/










/* =========================================================
   8) TOAST
   ======================================================= */
.toast{
  position:fixed; bottom:18px; left:50%;
  transform:translateX(-50%);
  background:#ffffff; border:1px solid var(--line);
  padding:12px 14px; border-radius:10px;
  opacity:0; pointer-events:none;
  box-shadow: var(--shadow);
}
.toast.show{ opacity:1 }








/* Formulario centrado */
/* ===== Trip type tabs (With return / One way) ===== */
.trip-tabs{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px;
  margin-bottom:12px;
  box-shadow: var(--shadow);
}
.trip-tab{
  appearance:none;
  background:transparent;
  border:0;
  padding:.45rem .85rem;
  font-weight:700;
  color:#0b1726;
  opacity:.8;
  border-radius:10px;
  cursor:pointer;
  transition: background .18s ease, opacity .18s ease, color .18s ease;
}
.trip-tab:hover{ opacity:1 }
.trip-tab.is-active{
  background:#e6f6fe;
  color:#0369a1;
  opacity:1;
  box-shadow: inset 0 0 0 1px #bae6fd;
}

/* Ocultar returnFields cuando sea One way */
#returnFields.is-hidden{ display:none !important; }

@media (max-width: 600px){
  .trip-tabs{ width:100%; justify-content:space-between }
  .trip-tab{ flex:1; text-align:center }
}









 /* Formulario Datos Cliente  */
  #formulario-cliente {
    animation: fadeIn 0.3s ease forwards;
  }
  
  #paso-cliente {
    animation: fadeIn 0.3s ease forwards;
  }
  
  #paso-cliente .form-row input,
  #paso-cliente .form-row textarea {
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
  }
  
  #paso-cliente .form-row textarea {
    height: 100px;
    resize: vertical;
    padding-top: 0.6rem;
  }
  
  #btn-volver,
  #btn-confirmar {
    background-color: #000;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.9rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem;
  }
  

  .solicitud-respuesta {
    font-size: 0.95rem;
    color: #000000;
    text-align: center;
    margin-top: 0.4rem;
    margin-bottom: -0.1rem;
    font-weight: 500;
    opacity: 0.9;
  }
  

  #btn-volver:hover,
  #btn-confirmar:hover {
    background-color: #333;
  }

  
  .fade-in {
    animation: fadeInStep 0.4s ease forwards;
  }
  
  .fade-out {
    animation: fadeOutStep 0.4s ease forwards;
  }
  
  @keyframes fadeInStep {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeOutStep {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(20px);
    }
  }
  

  .main-button {
    background-color: black;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .main-button:hover {
    background-color: #222;
  }
  


  /* Menu desplegable Codigo telefonos */
  .telefono-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.5rem;
  }
  
  .telefono-prefix {
    background-color: #000;
    color: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 32px;
  }
  
  .telefono-prefix:hover {
    background-color: #222;
  }
  
  
  .prefix-dropdown {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    visibility: hidden; /* 🆕 ocultamos con visibilidad */
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.3rem;
    background-color: #000;
    border: none;
    border-radius: 12px;
    list-style: none;
    padding: 0.4rem 0;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    width: 260px;
  }
  
  
  .prefix-dropdown.active {
    opacity: 1;
    transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  }  


  .prefix-dropdown li {
    padding: 0.6rem 1rem;
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
    margin: 0.2rem 0.4rem;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
  }
  
  .prefix-dropdown li:hover {
    background-color: #eee;
    transform: translateX(2px);
  }
  
  
  .telefono-wrapper input[type="tel"] {
    flex: 1;
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid #ccc;
  }
  


/* Bordes rojos campos incompletos */
.input-error {
  border: 2px solid #ff4d4d !important;
  background-color: #fff5f5;
}


/* Formulario Contacto */
.error-msg {
  color: #ff4d4d;
  font-size: 0.85rem;
  margin-top: 0.1rem;
  display: block;
  text-align: center;
}




  /* MENÚ DE IDIOMA ANIMADO A LA IZQUIERDA */
  .lang-dropdown {
    position: relative;
  }
  
  .lang-dropdown-button {
    background: none;
    border: none;
    color: white;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
  }
  
  .lang-dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    color: black;
    top: 2.8rem;
    left: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 140px;
    animation: fadeIn 0.3s ease forwards;
  }
  
  .lang-dropdown-menu.active {
    display: block;
  }
  
  .lang-dropdown-menu button {
    background: none;
    border: none;
    color: black;
    width: 100%;
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
  }
  
  .lang-dropdown-menu button:hover {
    background-color: #f0f0f0;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

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

  .hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
    
  }
  
  .hero-text {
    flex: 1;
    text-align: left;
    color: white;
  }
  
 .hero-text h1 {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

.hero-text p {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.95);
}

.hero-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.hero-text h1 {
  display: inline-block;
  text-align: center;
}

.hero-text p {
  display: block;
  margin-top: 0.8rem;
  text-align: center;
}

/* SOLO para el hero con imagen */
.hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  z-index: 0;
}

/* y anulamos cualquier rastro en Services por si el CSS viejo queda en caché */
.services-page .hero::before { display: none !important; }


.hero .hero-grid {
  position: relative;
  z-index: 1; /* asegura que el texto va encima */
}


@media (min-width: 992px) {



  

  /* Texto a la DERECHA */
  .hero-text {
     margin-bottom: 220px;
    margin-left: 90px;         /* lo empuja a la derecha */
    text-align: left;
    max-width: 640px;
  }

  .hero-text .headline {
    line-height: 1.35;         /* aún más aire entre líneas */
    font-size: clamp(2.4rem, 5.2vw, 3rem);
  }


  /* Opcional: coloca el CTA en línea con el subtítulo */
  .hero-cta { margin-top: 14px; }

  /* La booking box mantiene su flujo debajo del texto */
  .hero .booking-box { margin-top: 18px; }
}


/* Codigo Abrir mapa*/
.input-map-wrapper button {
  background-color: #fbbf24;
  color: black;
  font-weight: 600;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  font-size: 0.95rem;
}

.input-map-wrapper button:hover {
  background-color: #fcd34d;
}







/* Menu Hora ida y vuelta*/
.save-btn {
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

.save-btn:hover {
  background-color: #333;
}





/* Menu Fecha ida y vuelta*/
#custom-calendar {
  background: white;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  display: block; /* SIEMPRE visible, la visibilidad la controlamos con opacity */
  visibility: hidden;
}

#custom-calendar.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  visibility: visible;
}


.calendar-modal {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

.calendar-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-weight: bold;
  font-size: 1rem;
  padding: 1rem 0;
}

.calendar-navigation button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: bold;
}

#calendar-title {
  font-weight: bold;
  font-size: 1rem;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0 1rem;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  text-align: center;
  padding: 0 1rem 1rem;
}

.calendar-days span {
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}

.calendar-days span.day:hover {
  background-color: #222;
}

.calendar-days span.empty {
  visibility: hidden;
}

.calendar-save {
  width: 100%;
  padding: 1rem;
  background-color: black;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
  order: 2;
  margin-top: auto;
}

.day.disabled {
  color: #ccc;
  pointer-events: none;
  opacity: 0.6;
}

.day.selected {
  background-color: #222;
  color: white;
  border-radius: 6px;
}



  
  .booking-box {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-family: 'Poppins', sans-serif;
  }
  
  .form-row {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .form-row label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #333;
  }
  
  .form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="number"] {
  height: 42px;
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}

  .form-row.two-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
  }
  
  .form-row.two-columns > div {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
  }

  .form-row.two-columns > div {
    cursor: pointer;
  }
  
  
  .return-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
  }
  
  
  .two-columns {
    display: flex;
    gap: 1rem;
  }
  
  .two-columns > div {
    flex: 1;
  }
  
  #submit-button {
    background-color: #000;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.9rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
  }
  
  #submit-button:hover {
    background-color: #333;
  }

  /* Ajuste + y - pasajeros */
  .passenger-wrapper {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  .passenger-wrapper input[type="number"] {
    flex: 1;
    text-align: center;
    height: 42px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .hero .booking-box label { text-align: center !important; }

  
  .passenger-wrapper button {
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 20px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .passenger-wrapper button:hover {
    background-color: #333;
  }
  
 /* Scroll flechas */
 .picker-list-container {
  overflow-y: auto !important;
  max-height: 150px;
  scroll-behavior: smooth;
}
.scrollable-column {
  overflow-y: auto !important;
  max-height: 150px;
  scroll-behavior: smooth;
}


 /* Botón de añadir/quitar viaje de vuelta */
.toggle-vuelta-btn {
  width: 100%;
  height: 42px;
  font-size: 16px;
  font-weight: bold;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: -1rem;
}

.toggle-vuelta-btn:hover {
  background-color: #333;
}

/* Contenedor de los campos de vuelta */
#vuelta-fields {
  display: none;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0; /* ← No dejamos espacio si está cerrado */
  transition: margin-bottom 0.3s ease;
}

#vuelta-fields.visible {
  margin-bottom: 1.5rem; /* ← Solo se activa cuando está visible */
}

/* Campos internos de fecha y hora vuelta */
#vuelta-fields > div {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
}

/* Input estilo igualado */
#vuelta-fields input[type="text"],
#vuelta-fields input[type="date"] {
  height: 42px;
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}



  /* Seccion: Porque Elegirnos¿? */
  .features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    background-color: #ffffff;
    padding: 1rem;
    text-align: center;
  }
  
  
  .feature .icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #fbbf24; /* amarillo suave */
  }
  
  .feature h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #111827;
  }
  
  .feature p {
    font-size: 0.95rem;
    color: #4b5563;
  }
  .features .section-title {
    grid-column: span 4;
    margin-bottom: 0rem;
  }
  
  .features .section-title h2 {
    font-size: 2rem;
    color: #111827;
    margin-bottom: 0.5rem;
  }
  
  .features .section-title p {
    color: #4b5563;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
  }

  @media (max-width: 768px) {
    .features .section-title {
      text-align: center;
      padding: 0;
    }
  }
  
    
  
  @media (max-width: 600px) {
    .hero h1 {
      font-size: 2rem;
    }
  
    .booking-box {
      padding: 1.2rem;
    }
  
    nav ul {
      flex-direction: column;
      gap: 0.5rem;
    }
  
    .lang-dropdown-menu {
      left: 0;
      right: auto;
    }
  }
  
  nav {
    flex-shrink: 0;
  }
  
  .input-map-wrapper {
    display: flex;
    gap: 0.5rem;
  }
  
  .input-map-wrapper input {
    flex: 1;
  }
  
  .input-map-wrapper button {
    background-color: #FFD700;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
  }
  
  /* Estilos del mapa */
  #mapModal, #mapModalHasta {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  #map, #mapHasta {
    width: 90%;
    height: 70%;
    border-radius: 10px;
    margin: auto;
  }
  
  #closeMap, #closeMapHasta {
    position: relative;
    top: -60px; /* 💥 sube el botón */
    background-color: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: background-color 0.3s ease;
  }
  
  #closeMap:hover, #closeMapHasta:hover {
    background-color: #333;
  }
  

@keyframes fadeInMap {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutMap {
  from { opacity: 1; }
  to { opacity: 0; }
}

.map-fade-in {
  animation: fadeInMap 0.3s ease forwards;
}

.map-fade-out {
  animation: fadeOutMap 0.3s ease forwards;
}





.campo-error {
  border-color: #ff4b5c !important;
  box-shadow: 0 0 0 1px #ff4b5c;
}


  

  .autocomplete-list {
    list-style: none;
    padding: 0;
    margin-top: 0.3rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    position: absolute;
    z-index: 9999;
    width: calc(100% - 2rem);
  }
  
  .autocomplete-list li {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
  }
  
  .autocomplete-list li:hover {
    background-color: #f0f0f0;
  }

  .autocomplete-wrapper {
    position: relative;
  }
  @media (max-width: 768px) {
    .hero-content {
      flex-direction: column;
      align-items: center;
      padding: 0rem;
      gap: 2rem;
    }
  
    .hero-text {
      text-align: center;
      width: 100%;
      margin-top: 50px;
      margin-bottom: 80px;
    }
  
    .hero-text h1 {
      font-size: 2rem;
    }
  
    .hero-text p {
      font-size: 1rem;
    }
  
    .booking-box {
      width: 100%;
      padding: 0.8rem;
      font-size: 0.95rem;
    }
  
    .form-row input,
    .input-map-wrapper button,
    #submit-button {
      font-size: 1rem;
      padding: 0.8rem;
    }
  
    .two-columns {
      flex-direction: column;
      gap: 1rem;
    }
  
    header {
      padding: 0 1rem;
    }
  
    .logo img {
      height: 140px;
    }
  
    nav ul {
      flex-direction: column;
      gap: 0.7rem;
      margin-top: 1rem;
    }
  
    .autocomplete-list {
      width: 100%;
      font-size: 0.9rem;
    }
  
    #map, #mapHasta {
      width: 95%;
      height: 65%;
    }
  }
  
  
  
  
  .dropdown-field {
  position: relative;
}

.dropdown-btn {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dropdown-btn:hover {
  border-color: #999;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: all 0.15s ease;
  z-index: 10;
}

.dropdown-menu li {
  padding: 8px 0;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-menu li:hover {
  background: #f3f3f3;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* Corrige color de texto en el menú desplegable */
.dropdown-menu,
.dropdown-menu li {
  color: #000 !important;     /* texto negro */
  background: #fff !important; /* fondo blanco */
}

/* Menú base */
.dropdown-menu {
  background: #fff !important;
  color: #000 !important;
}

/* Hover naranja translúcido */
.dropdown-menu li:hover {
  background-color: rgba(255, 167, 38, 0.25) !important;
  color: #000 !important;
}

/* Seleccionado igual que los pickers */
.dropdown-menu li.selected {
  background-color: #ffa726 !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
}

/* Transiciones suaves */
.dropdown-menu li {
  transition: background-color 0.2s ease, color 0.2s ease;
}

  
  
  



  /* Menu Fecha Ida y Vuelta */
  @media (max-width: 768px) {
    #custom-calendar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      transform: translateY(100%);
      border-radius: 12px 12px 0 0;
    }
  
    #custom-calendar.active {
      transform: translateY(0);
    }
  
    .calendar-save {
      order: -1;
    }
  
    .calendar-navigation {
      order: 0;
    }
  
    .calendar-weekdays,
    .calendar-days {
      order: 1;
    }
  }
  
  /* Versión PC: aparece centrado con efecto zoom y desplazamiento */
  @media (min-width: 769px) {
    #custom-calendar {
      position: absolute;
      left: 50%;
      top: 100%; /* ajustable si lo quieres más abajo */
      transform: translateX(-50%) scale(0.95) translateY(20px);
      width: max-content;
    }
  
    #custom-calendar.active {
      transform: translateX(-50%) scale(1) translateY(0);
    }
  
    .calendar-save {
      order: 2;
    }
  }


/* ===== Mensaje solicitud enviada*/
/* ===== MODAL ÉXITO ===== */
.success-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.success-modal.show {
  display: flex;
}

.success-modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 26px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: zoomIn 0.25s ease;
}

.success-icon {
  font-size: 46px;
  margin-bottom: 12px;
}

.success-modal-box h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

.success-modal-box p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

.success-modal-box button {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  font-size: 15px;
  cursor: pointer;
}

.success-modal-box button:hover {
  background: #222;
}

@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}





/* ===== Teléfono: que el prefijo tenga la misma altura que el input ===== */
.telefono-wrapper {
  display: flex;
  align-items: center;      /* seguimos centrando verticalmente */
  position: relative;
  gap: 0.5rem;
}

/* Que el botón tenga la MISMA altura y radio que los inputs (42px y 8px) */
.telefono-prefix {
  background-color: #000;
  color: #fff;
  padding: 0 0.8rem;        /* solo padding lateral */
  border-radius: 8px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 42px;             /* <- igual que los otros campos */
}

/* aseguramos que el input de teléfono también usa 42px */
.telefono-wrapper input[type="tel"] {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* ===== Fix color texto dropdown prefijo teléfono ===== */
.prefix-dropdown {
  background: #fff;          /* fondo blanco limpio */
}

.prefix-dropdown li {
  color: #000;               /* texto NEGRO */
  background: #fff;
}

.prefix-dropdown li:hover {
  background: #f2f2f2;       /* gris suave al pasar el ratón */
  color: #000;
}


/* ===== Ajuste de espaciado vertical PASO 2 (igual que Paso 1) ===== */
#paso-cliente .form-row {
  margin-bottom: 12px;   /* antes seguramente estaba en 20–24px */
}

/* Inputs del paso 2 más compactos */
#paso-cliente input,
#paso-cliente textarea {
  padding: 10px 14px;    /* reduce altura interior */
  line-height: 1.2;
}

/* Separación menor entre label y campo */
#paso-cliente label {
  margin-bottom: 4px;
  display: block;
}

/* Botón Send Request más pegado al formulario */
#paso-cliente button#btn-confirmar {
  margin-top: 10px;
}

/* Texto de “we will respond” más cerca */
#paso-cliente .solicitud-respuesta {
  margin-top: 8px;
}























  /* ===== Separadores entre secciones ===== */
.section-separator {
  height: 3px;
  width: 100%;
  background: linear-gradient(to right, transparent, #6f6f6f, transparent);
}










  /* Seccion Q&A */
  /* ===== FAQ Section ===== */


/* Si algún día vuelves a animar el FAQ, que entre desde ARRIBA */
#faq.reveal { transform: translateY(-16px); }
#faq.reveal.is-visible { transform: translateY(0); }



.faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: center;
}

.faq-intro.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align: center          /* <- centrado vertical */
  /* opcional: si quieres centrar también horizontalmente: */
  /* align-items: center; text-align: center; */
}

.faq-intro h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  
}

.faq-intro p {
  font-size: 1rem;
  color: #555;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border-radius: 12px;
  overflow: hidden;
  background: #35d8ba2d;
  border: 1px solid #e0e7f1;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Panel animable (sin display:none) */
.faq-answer{
  overflow: hidden;
  height: 0;
  opacity: 0;
   padding: 0rem 1rem 0rem;   /* ⬅️ padding VERTICAL constante */          /* laterales fijos */
  will-change: height, opacity;
  contain: layout paint;
}

.faq-item.is-open .faq-answer p{
  padding:0rem 0 0rem;
}

/* Relleno vertical del texto cuando está abierto */


/* Flecha */
.arrow{ transition: transform .25s cubic-bezier(.2,0,.2,1); }
.faq-item.is-open .arrow{ transform: rotate(180deg); }






.faq-item{
  border:1px solid #cccccc;
  border-radius: 12px;
  background:#f2feff;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open{
  background:#f2feff;
  box-shadow:0 8px 24px rgba(2,132,199,.12);
}

.faq-question{
  width:100%;
  text-align:left;
  padding:1rem 1.2rem;
  font-weight:600;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.arrow{
  transition:transform .25s cubic-bezier(.2,0,.2,1);
}
.faq-item.is-open .arrow{
  transform:rotate(180deg);
}


/* ===== FAQ: Desktop → 2 columnas, Mobile → 1 columna ===== */
.faq-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "intro list";
}
.faq-intro{ grid-area: intro; }
.faq-list{  grid-area: list; }

/* Mobile: intro arriba, preguntas debajo */
@media (max-width: 900px){
  .faq-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "list";
    gap: 1rem;
    align-items: stretch; /* evita centrados raros en 1 columna */
  }
  .faq-intro.card{
    margin-bottom: .5rem; /* pequeño espacio sobre las preguntas */
  }
}




  

/* ===== Trust / Testimonials ===== */
.trust { padding: 34px 0 28px; }
.trust__head{
  text-align: center;
  display: grid;
  place-items: center;
  gap: 8px;
}
.trust__logo{ height: 82px; width: auto; }
.trust__rating{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 2px;
}
.trust__score{ font-weight: 800; color:#0b1726; }
.trust__note{ margin: 0; color:#64748b; font-size:.95rem; }

.trust__sep{
  margin: 18px 0 22px;
  border: 0; height: 1px; background: var(--line, #e6ecf2);
}

/* Items */
.trust__list{
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 22px; align-items: center; justify-items: center;
}
.trust__item{
  display: inline-flex; align-items: center; gap: 10px;
  color:#334155; font-weight: 500;
}
.trust__icon{ width: 38px; height: 42px; }
.trust__link{ display: inline-flex; align-items: center; gap: 10px; color:#3b82f6; font-weight:600; }

/* Stars (SVG en máscara + medio relleno) */
.stars{ display:inline-flex; gap:6px }
.star{
  width: 18px; height: 18px; display:inline-block; color:#f59e0b;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.5 1.2 6.5L12 17.8 6.1 20.4l1.2-6.5-4.8-4.5 6.6-.9L12 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.5 1.2 6.5L12 17.8 6.1 20.4l1.2-6.5-4.8-4.5 6.6-.9L12 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  border-radius: 0;
}
.star.half{
  background: linear-gradient(90deg, currentColor 50%, #e5e7eb 50%);
}

/* Responsive */
@media (max-width: 900px){
  .trust__list{ grid-template-columns: repeat(2,1fr); row-gap: 16px; }
}
@media (max-width: 520px){
  .trust__logo{ height: 28px }
  .star{ width: 16px; height: 16px }
}













/* Estado inicial */
.reveal { 
  opacity: 0; 
  transform: translateY(22px) scale(.98);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { 
  opacity: 1; 
  transform: none; 
}

/* Stagger para hijos de una lista/grid */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.12s }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.19s }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.26s }

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* ——— Texto: sin movimiento ——— */
.reveal-text {
  opacity: 0;
  transition: opacity .45s ease-out;
  will-change: opacity;
}
.reveal-text.is-visible { opacity: 1; }

/* ——— Imágenes/medios: sutil y nítido ——— */
.reveal-media {
  opacity: 0;
  transform: translateY(14px);         /* movimiento solo visual */
  transition:
    transform .45s cubic-bezier(.2,.65,.3,1),
    opacity   .45s ease-out;
  will-change: transform, opacity;
}
.reveal-media.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger para listas (solo opacidad en textos) */
.reveal-stagger-text > * {
  opacity: 0;
  transition: opacity .45s ease-out;
}
.reveal-stagger-text.is-visible > * { opacity: 1; }
.reveal-stagger-text.is-visible > *:nth-child(1){ transition-delay:.06s }
.reveal-stagger-text.is-visible > *:nth-child(2){ transition-delay:.12s }
.reveal-stagger-text.is-visible > *:nth-child(3){ transition-delay:.18s }
.reveal-stagger-text.is-visible > *:nth-child(4){ transition-delay:.24s }
.reveal-stagger-text.is-visible > *:nth-child(5){ transition-delay:.30s }

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .reveal-text, .reveal-media, .reveal-stagger-text > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}







/* Seccion Actividad */
/* ===== Our Activity (EN – Barcelona) ===== */
.section-our-activity {
  padding: clamp(48px, 6vw, 96px) 16px;
}

.oa-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* slightly wider text column */
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.oa-text { color: #0f172a; }

.oa-eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  margin: 0 0 10px;
}

.oa-title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.oa-paragraph {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: #334155;
  margin: 0 0 14px;
}

.oa-highlight {
  font-weight: 700;
  color: #0f172a;
  margin-top: 10px;
}

.oa-media { position: relative; }

.oa-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow:
    0 10px 16px rgba(15, 23, 42, .06),
    0 2px 6px rgba(15, 23, 42, .04);
  background: #f8fafc;
  object-fit: cover;
}

/* Responsive */
/* Responsive */
@media (max-width: 900px) {
  .oa-container { 
    grid-template-columns: 1fr; 
  }
  .oa-media { 
    order: -1; /* image on top in mobile */
  }
  .oa-text {
    text-align: center;         /* centramos todo el bloque */
  }
  .oa-text p,
  .oa-text h2 {
    margin-left: auto;          /* centramos márgenes */
    margin-right: auto;
  }
}











/* Flota Swiper */


.flota-titulo {
  text-align: center;
  padding: 0rem 1rem 2rem;
  color: rgb(0, 0, 0);
}

.flota-titulo h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.flota-titulo p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 0;
  color: #4b5563;
}

.flota-texto {
  text-align: center;
  max-width: 800px;
  margin: 2rem auto;
  color: #000000;
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 0 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


.flota-swiper {
  background-color: #fff; /* ✅ Fondo blanco explícito */
  padding: 1rem 1rem;
  overflow: hidden;   
}


.swiper-container {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Imagen destacada */
.swiper-slide-active {
  transform: scale(1.05);
  z-index: 2;
}

/* 📱 Versión móvil */
@media (max-width: 768px) {
  .carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    margin: 2rem auto;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
    width: 100%;
  }

  .carousel-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease;
    opacity: 1;
    transform: scale(1);
  }

  .carousel-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    background: black;
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
  }

  .carousel-arrow.left {
    left: 10px;
  }

  .carousel-arrow.right {
    right: 10px;
  }

  .carousel-indicator {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    font-size: 1rem;
  }
}


/* ========== Estilos coverflow escritorio ========== */
@media (min-width: 769px) {
  .flota-swiper .swiper-container {
    max-width: "auto";
    margin: 0 auto;
    overflow: visible;
    padding-bottom: 3rem;
  }

  .flota-swiper .swiper-wrapper {
    align-items: center;
  }

  .flota-swiper .swiper-slide {
    width: 400px;
    transition: transform 0.3s ease;
    transform: scale(0.85);
    opacity: 0.6;
  }

  .flota-swiper .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
  }

  .flota-swiper .swiper-slide img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    object-fit: cover;
    max-height: 500px;
  }
}





/* Corrige posicionamiento de flechas Swiper */
.flota-swiper .swiper-container {
  position: relative;
}



/* Reemplazo completo de flechas Swiper */
/* Reparar visibilidad de flechas Swiper */
/* Aplica SOLO a las flechas del carrusel de flota */
.flota-swiper {
  position: relative;
}

.flota-swiper .swiper-button-next,
.flota-swiper .swiper-button-prev {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6); /* fondo oscuro */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Flechas visuales SOLO en flota-swiper */
.flota-swiper .swiper-button-next::after,
.flota-swiper .swiper-button-prev::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid white;
  border-right: 2px solid white;
}

.flota-swiper .swiper-button-next::after {
  transform: rotate(45deg);
}

.flota-swiper .swiper-button-prev::after {
  transform: rotate(-135deg);
}

.flota-swiper .swiper-button-prev {
  padding-top: 2px; /* mueve la flecha ligeramente hacia abajo */
  padding-left: 5px; /* o ajusta si se ve desplazada lateralmente */
}


.flota-swiper .swiper-button-next {
  padding-top: 2px; /* mueve la flecha ligeramente hacia abajo */
  padding-right: 5px; /* o ajusta si se ve desplazada lateralmente */
}










/* ========== Como Funciona ========== */
/* ===== How it Works (mobile-first) ===== */
.hiw {
  padding: clamp(40px, 7vw, 88px) 16px;
}

.hiw__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.hiw__title {
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 5.2vw, 44px);
  color: #1f2937; /* gray-800 */
  margin: 0 0 clamp(24px, 4vw, 48px);
}

.hiw__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;                 /* mobile spacing */
}

/* Step card */
.hiw__step {
  text-align: center;
  background: #f8fbff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 10px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
}

.hiw__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #eef3ff;
  display: grid;
  place-items: center;
}

.hiw__heading {
  margin: 4px 0 8px;
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 800;
  color: #1e3a8a;           /* blue-900 */
}

.hiw__desc {
  margin: 0;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.6;
  color: #475569;           /* slate-600 */
}

/* Connector between steps (hidden on mobile) */
.hiw__connector { display:none; }

/* ===== Desktop / large ===== */
@media (min-width: 900px) {
  .hiw__steps {
    grid-template-columns: 1fr 80px 1fr 80px 1fr; /* step – conn – step – conn – step */
    align-items: start;
    gap: clamp(20px, 3.6vw, 36px);
  }

  .hiw__step {
    text-align: center;
    padding: 24px 20px;
  }

  .hiw__connector {
    display: block;
    height: 1px;
    align-self: center;
    background: repeating-linear-gradient(
      to right,
      #9aa7bd 0 10px,
      transparent 10px 18px
    );
    position: relative;
    border-radius: 1px;
  }

  /* arrow head */
  .hiw__connector::after {
    content: "";
    position: absolute;
    right: -6px;
    top: -5px;
    width: 12px; height: 12px;
    border-right: 2px solid #9aa7bd;
    border-top: 2px solid #9aa7bd;
    transform: rotate(45deg);
  }
}

/* Subtle entrance (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hiw__step { 
    opacity: 0; 
    transform: translateY(12px);
    animation: hiwIn .6s ease forwards;
  }
  .hiw__step:nth-of-type(1) { animation-delay: .05s; }
  .hiw__step:nth-of-type(3) { animation-delay: .15s; }
  .hiw__step:nth-of-type(5) { animation-delay: .25s; }
  @keyframes hiwIn {
    to { opacity: 1; transform: none; }
  }
}











html, body { height: 100%; }

body{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #111827;   /* color de fondo de página, el que quieres bajo el footer */
}

.page-wrap{
  flex: 1 0 auto;        /* ocupa el espacio disponible */
  background: #fff;      /* tu contenido sigue sobre fondo blanco */
}

.footer{ flex: 0 0 auto; }

/* por si un separador justo antes del footer añadía espacio visual */
.section-separator:last-of-type{ margin: 0; }












/* Icono Whatsapp*/
/* WhatsApp flotante */
@media (min-width: 769px) {
.whatsapp-float {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 999;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}
.whatsapp-float img {
  width: 100px;
  height: 100px;
}
}

@media (max-width: 768px) {
  .whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
  }
  .whatsapp-float:hover {
    transform: scale(1.1);
  }
  .whatsapp-float img {
    width: 100px;
    height: 100px;
  }
  }

/* Modal de confirmación */
.whatsapp-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.whatsapp-modal-content {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.whatsapp-modal-buttons {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.whatsapp-modal-buttons button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
#whatsappYes {
  background-color: #25d366;
  color: white;
}
#whatsappCancel {
  background-color: #e5e7eb;
}


/* Efecto*/
.whatsapp-float::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-color: rgba(37, 211, 102, 0.4);
  border-radius: 50%;
  animation: whatsapp-pulse 2s ease-out infinite;
  z-index: 0; /* ✅ Detrás del contenido */
  transform: scale(1);
  opacity: 0.6;
}


@keyframes whatsapp-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.6;f
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


/* Banner Cookies */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: white;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  z-index: 9999;
}

.cookie-banner p {
  margin: 0;
  color: #333;
}

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

.cookie-banner button {
  background-color: #0e76a8;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

.cookie-banner button:hover {
  background-color: #095c85;
}


.cookie-link {
  color: #4f46e5; /* Azul llamativo */
  text-decoration: underline;
  font-weight: 500;
}
.cookie-link:hover {
  color: #3730a3; /* Azul más oscuro al pasar el ratón */
}















/* ===== Efecto al mostrar el formulario ===== */
.highlight-pulse {
  animation: pulseBox 1.5s ease;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.4);
  border-radius: 12px;
}

@keyframes pulseBox {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.02); opacity: 0.9; }
  100% { transform: scale(1);   opacity: 1; }
}








/* ===== Header siempre visible ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* asegúrate de que quede por encima del contenido */
  background-color: rgba(15, 15, 15, 0.85); /* leve transparencia */
  backdrop-filter: blur(8px); /* difumina el fondo detrás */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Agrega margen superior al contenido para compensar la altura del header */
.header-separator {
  height: 4px;
  background: #ffffff;
}


.header--scrolled {
  background-color: rgba(15, 15, 15, 0.95);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}



@media (max-width: 768px){
  header, .site-header { padding: 0 !important; }
}















































/* ===== SERVICES PAGE ===== */

/* Fondo blanco para toda la página */
body,
main.page-wrap {
  background-color: #fff !important;
}

/* Hero y secciones limpias sin fondo gris */
.hero,
.section-our-activity,
.section-separator {
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Asegura que no haya sombras ni degradados heredados */
.oa-container,
.oa-text,
.oa-media {
  background: transparent !important;
}


/* Solo afecta a la página de servicios */
.services-page,
.services-page .hero,
.services-page .section-our-activity,
.services-page .section-separator {
  background-color: #fff !important;
  box-shadow: none !important;
}




/* ==== SERVICES: centrar hero y dar más aire bajo el header ==== */
:root{
  --header-height: 82px; /* ajusta si tu header es más alto/bajo */
}

.services-page .hero{
  /* más espacio superior respecto al header fijo */
  padding: calc(var(--header-height) + 56px) 0 28px !important;
}

.services-page .hero .container{
  max-width: 940px;   /* ancho de lectura cómodo */
  margin: 0 auto;     /* centra el bloque */
  text-align: center; /* centra textos */
}

.services-page .headline{ 
  margin: 6px auto 12px; 
}

.services-page .sub{
  margin: 0 auto 10px; 
}

.services-page .badges{
  justify-content: center; /* centra las píldoras */
}







/* ==== Hover elegante en imágenes de secciones (Services + Home) ==== */
/* Recorta el zoom dentro de las esquinas redondeadas */
.oa-media{
  position: relative;
  overflow: hidden;
  border-radius: 18px; /* coincide con tu .oa-image */
}

/* Estado base de la imagen */
.oa-image{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s cubic-bezier(.22,1,.36,1),
              filter .4s ease,
              box-shadow .4s ease;
  will-change: transform;
}

/* Efecto al pasar el ratón */
.oa-media:hover .oa-image{
  transform: scale(1.045);
  filter: brightness(1.06) contrast(1.02);
  box-shadow: 0 16px 36px rgba(15,23,42,.22);
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .oa-image{ transition: none; }
}






/* Enlace activo en header (desktop y móvil) */
.header__link[aria-current="page"],
.header__mobile-link[aria-current="page"] {
  color: #00aaff; /* azul principal de tu marca */
  font-weight: 600;
}

/* Opcional: subrayado sutil o borde */
.header__link[aria-current="page"]::after,
.header__mobile-link[aria-current="page"]::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #00aaff;
  margin-top: 3px;
  border-radius: 1px;
}


.headline {
  font-size: 2.6rem;          /* o el mismo valor que uses en Services */
  font-weight: 800;
  color: #0b1c2c;
  text-align: center;
  margin-bottom: 0.6em;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .headline {
    font-size: 1.9rem;
  }
}




/* Centrar la sección de contacto izquierda */
.contact-info {
  text-align: center;
  margin: 0 auto;
}

/* Centrar los badges dentro también */
.contact-info .badges {
  justify-content: center;
}

/* Alinear los iconos y texto en el centro */
.contact-info p,
.contact-info li,
.contact-info a {
  text-align: center;
  margin: 0 auto;
}

















































/* ===== CONTACT PAGE ===== */
.contact-hero {
  padding: 124px 0 16px;
  text-align: center;
}
.contact-hero .sub {
  max-width: 820px;
  margin: 12px auto 0;
}

.contact-wrap {
  padding: 36px 0 72px;
}
.contact-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px;
}

.contact-card h2 {
  margin-bottom: 8px;
}

.contact-info p {
  line-height: 1.6;
  margin: 6px 0;
}
.contact-info .badges {
  margin: 14px 0 10px;
}
.contact-details p {
  margin: 8px 0;
}

.contact-form form {
  display: grid;
  gap: 14px;
}
.contact-form .row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .contact-form .row {
    grid-template-columns: 1fr;
  }
}
.contact-form label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 4px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e3e7ee;   /* borde gris suave */
  background: #f5f7fa;         /* gris claro como los “badges” */
  padding: 12px 14px;
  color: #1a1a1a;              /* texto oscuro legible */
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #009fe3;       /* azul del botón principal */
  background: #ffffff;         /* se aclara al enfocar */
}

.contact-form .help {
  font-size: 0.85rem;
  opacity: 0.7;
}
.contact-form .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}


/* ===== FIX: make contact form clear (no blur) ===== */
.contact-form.contact-card {
  background: #ffffff;            /* fondo sólido */
  backdrop-filter: none;          /* sin desenfoque */
  border: 1px solid #e3e7ee;      /* borde suave */
}

/* Inputs con fondo gris claro */
.contact-form input,
.contact-form textarea {
  background: #f5f7fa;            /* gris igual que badges */
  border: 1px solid #e3e7ee;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

/* Efecto al enfocar */
.contact-form input:focus,
.contact-form textarea:focus {
  background: #ffffff;
  border-color: #009fe3;
}


/* --- Quitar blur SOLO en la tarjeta del formulario --- */
.contact-form {
  background: #ffffff !important;            /* fondo sólido */
  border: 1px solid #e3e7ee;                 /* borde suave */
  backdrop-filter: none !important;          /* quitar blur */
  -webkit-backdrop-filter: none !important;
  filter: none !important;                   /* por si hubiera filter:blur */
  opacity: 1 !important;                     /* por si heredaba opacidad */
}

/* Inputs y textarea con gris suave (igual a los badges) */
.contact-form input,
.contact-form textarea {
  background: #f5f7fa;
  border: 1px solid #e3e7ee;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: #ffffff;
  border-color: #009fe3;
  box-shadow: 0 0 0 3px rgba(0,159,227,.12);
}




















































/* ===========================
   FLEET PAGE – Wider gallery area
   =========================== */

.fleet-grid-wrapper {
  width: 100vw;                 /* ocupa todo el ancho de la ventana */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;           /* saca el bloque del límite del container */
  margin-right: -50vw;
  background: var(--page-bg, #fff); /* mantiene el fondo igual */
  padding: 0 5vw;               /* margen lateral para respirar */
  box-sizing: border-box;
}

.fleet-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.fleet-grid figure {
  flex: 1 1 25%;                /* 4 fotos por fila */
  min-width: 0;
   margin: 0; /* ✅ elimina márgenes por defecto */
  scroll-snap-align: start;
  overflow: hidden;          /* recorta el zoom dentro del marco */
  border-radius: 14px; 
}

.fleet-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display:block;
  border-radius: 0;          /* el radio ya está en figure */
  transform-origin: center;
  will-change: transform;
}

.fleet-img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


/* ===== Fleet: títulos y textos como Services ===== */
.fleet-section{
  padding: clamp(40px, 5vw, 72px) 0;
}

.fleet-section .fleet-head{
  max-width: 980px;
  margin: 0 auto 18px;
  text-align: center;
}

.fleet-section .fleet-eyebrow{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  margin: 0 0 10px;
}

/* h2 dentro de fleet con el mismo look de .oa-title */
.fleet-section .fleet-head .headline{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #0b1c2c;
}

/* subtítulo bajo el título (puedes usar la clase .fleet-sub o el <p> a secas) */
.fleet-section .fleet-head .fleet-sub,
.fleet-section .fleet-head > p{
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: #334155;
  margin: 0 auto 16px;
  max-width: 900px;
}

/* separaciones respecto a la galería */
.fleet-section .fleet-grid-wrapper{
  margin-top: clamp(12px, 2.5vw, 22px);
}

/* pie/caption bajo la galería */
.fleet-caption{
  max-width: 980px;
  margin: 14px auto 0;
  text-align: center;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.6;
}





/* Responsive */
@media (max-width: 980px) {
  .fleet-grid {
    flex-wrap: wrap;
  }
  .fleet-grid figure {
    flex: 1 1 calc(50% - 12px);
  }
  .fleet-img {
    height: 280px;
  }
}

@media (max-width: 640px) {
  .fleet-grid-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0 16px;
  }
  .fleet-grid {
    flex-direction: column;
  }
  .fleet-img {
    height: auto;
  }
}


/* ===== Fleet: móvil centrado ===== */
@media (max-width: 768px){
  .fleet-grid-wrapper{
    /* cancelar el truco de 100vw en móvil */
    position: static;
    left: auto; right: auto;
    width: 100%;
    margin: 0;                 /* sin márgenes negativos */
    padding: 0 16px;           /* respiración lateral */
  }

  .fleet-grid{
    flex-wrap: wrap;           /* apilar/ajustar */
    flex-direction: column;    /* 1 por fila */
    gap: 10px;
    justify-content: center;
    align-items: center;       /* centra el contenido */
    overflow: visible;         /* sin scroll horizontal */
  }

  .fleet-grid figure{
    flex: 0 1 100%;
    max-width: 520px;          /* ancho cómodo centrado */
    margin: 0 auto;            /* centrado */
    overflow: hidden;          /* mantiene el hover dentro */
    border-radius: 14px;
  }

  .fleet-img{
    width: 100%;
    height: auto;              /* foto completa */
    border-radius: 0;          /* ya está en figure */
  }
}

/* Fallback móvil: si el JS no corre, que igualmente se vean */
@media (max-width: 768px){
  .reveal,
  .reveal-text,
  .reveal-media,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}
















































  /* POLICIES PAGE */


/* ===== Policies page ===== */

:root{
  --header-height: 82px; /* ya lo usas; aquí como referencia */
}

.policies-page .policies-hero{
  padding: calc(var(--header-height) + 56px) 0 24px;  /* espacio bajo header fijo */
  background: #fff;
}
.policies-hero__inner{
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

/* Layout: TOC + content */
.policy-wrap { padding: 18px 0 64px; }
.policy-grid{
  display: grid;
  gap: 28px;
  grid-template-columns: 280px 1fr;
  align-items: start;
}
@media (max-width: 980px){
  .policy-grid{ grid-template-columns: 1fr; }
}

/* TOC */
.policy-toc{
  position: sticky;
  top: calc(var(--header-height) + 16px);
  background: #f8fbff;
  border: 1px solid #e6ecf2;
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.policy-toc__title{
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 8px;
  color: #0b1c2c;
}
.policy-toc ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.policy-toc a{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: #334155;
  border: 1px solid transparent;
}
.policy-toc a:hover{ background: #eef6ff; }
.policy-toc a.is-active{
  background: #e6f6fe;
  border-color: #bae6fd;
  color: #0b1c2c;
  font-weight: 700;
}

/* Content blocks */
.policy-content{ min-width: 0; }
.policy-section{
  scroll-margin-top: calc(var(--header-height) + 20px); /* corrige anclas con header fijo */
  margin-bottom: 28px;
}
.policy-section .headline{
  text-align: left;
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 32px);
}
.policy-lead{
  color: #475569;
  margin: 0 0 8px;
}
.policy-list{
  margin: 10px 0 0;
  padding-left: 1.1em;
}
.policy-list li{
  margin: 6px 0;
  line-height: 1.6;
}


/* Policies → centrar botones de contacto también en escritorio */
.policies-page #contact .badges{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px !important;
  flex-wrap: wrap;
  margin: 20px auto 0;
  width: 100%;
}

/* aseguramos que no se limite al ancho del texto */
.policies-page #contact{
  text-align: center;
}




/* ===== Policies TOC: mobile sticky dropdown ===== */
@media (max-width: 900px){
  :root { --header-height: var(--header-height, 72px); }

  .policy-grid { display: block; } /* evita layout de 2 cols en móvil si lo hubiera */

  .policy-toc{
    position: sticky;
    top: calc(var(--header-height) + 6px);
    z-index: 30;
    margin: 0 12px 14px;
  }


  .policies-page .policy-hero{
    padding: calc(var(--header-height, 820px) + 560px) 200px 180px !important;
  }
  .policies-page .policy-hero .headline{
    display:block;            /* evita colapso */
    margin: 8px 0 10px !important;
    text-align:center;
  }

  /* Toggle pill bar */
  .policy-toc__title{
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10.6rem;
    padding: .65rem 1rem;
    border-radius: 999px;
    background: #0f172a;                 /* dark (como el header) */
    color: #fff;
    border: 0;
    box-shadow: 0 8px 22px rgba(2,6,23,.25);
    font-weight: 700;
    letter-spacing: .2px;
  }

 .policy-toc__caret{
  width: 10px; height: 10px; 
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(225deg);
  transition: transform .18s ease;
}

.policy-toc.is-open .policy-toc__caret{
  transform: rotate(45deg);
}


  /* Dropdown panel */
  .policy-toc__panel{
    position: relative;
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid #e6ecf2;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(15,23,42,.16);
    overflow: hidden auto;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }

  .policy-toc.is-open .policy-toc__panel{
    max-height: 75vh;          /* no ocupa demasiada pantalla */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .policy-toc__panel li a{
    display: block;
    margin: 4px 8px;
    padding: 14px 14px;
    border-radius: 12px;
    background: #f7fafc;
    border: 1px solid #e6ecf2;
    color: #1f2937;
    font-weight: 600;
  }

  .policy-toc__panel li a:active{
    background: #eef6ff;
    border-color: #cde7ff;
  }
}




/* En móvil el header es algo más alto → aún más aire */
@media (max-width: 768px){
  .policies-page .policies-hero{
    padding: calc(var(--header-height, 82px) + 60px) 0 18px !important;
  }
  .policies-hero .headline{
    display:block;
    margin: 8px 0 10px;  /* por si algún reset colapsa el margen */
  }
}



/* Desktop: estilo elegante para el título del TOC */
@media (min-width: 901px){
  .policy-toc__title{
    display: inline-block;
    background: #e8f4ff;        /* azul claro similar al resto de badges */
    color: #0b1c2c;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.95rem;
    border: 1px solid #cfe4fa;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  }

  .policy-toc__caret{
    display: none;
  }
}

















/* ===== Hero (mobile fix) ===== */
@media (max-width: 900px){
  :root{ --header-height: 82px; } /* o el alto real del header */

  /* Forzamos el padding del hero con fondo por encima de .hero{} */
  .hero.hero--bg{
    padding: calc(var(--header-height) + 72px) 0 96px !important; /* top para que no lo tape el header y bottom para ver más foto */
    min-height: 640px;
  }

  .hero .hero-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-text{
    text-align: center;
    padding: 0 16px;
    z-index: 1;
  }
  .hero-text .headline{
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
    margin: 6px auto 10px;
    max-width: 18ch;
  }
  .hero-text .sub{
    font-size: clamp(14px, 4vw, 18px);
    margin: 0 auto;
    max-width: 26ch;
  }

  /* Un poco más de “aire” bajo el formulario para que se vea la foto */
  .hero .booking-box{ margin-top: 8px; }
}























/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  font-size: 14px;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 15px 20px;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.3);
}

.cookie-content {
  max-width: 1100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.cookie-banner p {
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

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

.cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-buttons button {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}

#acceptCookies {
  background: #ffa726;
  color: white;
}

#acceptCookies:hover {
  background: #ffb84d;
  transform: scale(1.05);
}

.decline {
  background: #444;
  color: #fff;
}

.decline:hover {
  background: #555;
  transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-buttons {
    justify-content: center;
    width: 100%;
  }

  .cookie-buttons button {
    flex: 1;
    padding: 10px 0;
  }

  .cookie-banner {
    font-size: 13px;
    padding: 15px;
  }
}


/* Fuerza el texto del banner de cookies a blanco */
.cookie-banner,
.cookie-banner p,
.cookie-banner a,
.cookie-banner strong {
  color: #fff !important;
}


.cookie-banner.show { display: flex; }