/* ==========================================================================
   PAMELA VIAJES EVT — Hoja de estilos única del sitio
   --------------------------------------------------------------------------
   Índice:
     1.  Variables de marca (colores y tipografías)
     2.  Base y utilidades
     3.  Botones
     4.  Barra superior (navegación)
     5.  Portada (hero)
     6.  Franja de datos
     7.  Tarjetas de salidas grupales
     8.  Quiénes somos
     9.  Servicios
     10. Destinos destacados
     11. Preguntas frecuentes
     12. Contacto (datos, mapa y formulario)
     13. Pie de página
     14. Botón flotante de WhatsApp
     15. Página "Salidas grupales"
     16. Responsive (celulares y tablets)

   Si querés cambiar un color de toda la web, tocá una sola vez el bloque 1.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES DE MARCA
   ========================================================================== */
:root {
  --azul:          #006898;  /* azul principal de la marca */
  --azul-medio:    #386890;  /* azul secundario */
  --amarillo:      #F8B018;  /* amarillo de acento */
  --gris:          #989898;  /* gris de marca (textos secundarios) */

  --negro:         #16181a;  /* texto principal */
  --texto:         #3d474d;  /* texto de párrafos */
  --fondo-suave:   #f7fafb;  /* fondo de secciones claras */
  --borde:         #e7eef2;  /* bordes de tarjetas */
  --borde-nav:     #e7ecef;  /* borde de la barra superior */
  /* ---- COLOR DE LOS BOTONES DE CONSULTA ---------------------------------
     Estos tres valores pintan TODOS los botones que llevan a WhatsApp.
     Cambiando estas 3 líneas cambia el color en toda la web de una vez.

     AHORA: amarillo de marca
     PARA VOLVER AL VERDE WHATSAPP, poné estos valores:
       --cta: #25D366;   --cta-hover: #1fbb59;   --cta-texto: #0b2b16;
     ----------------------------------------------------------------------- */
  --cta:        #F8B018;  /* fondo del botón */
  --cta-hover:  #e09c07;  /* fondo al pasar el mouse */
  --cta-texto:  #16181a;  /* color del texto del botón */

  --titulos:       Oswald, "Arial Narrow", sans-serif;  /* títulos y botones */
  --texto-base:    Barlow, system-ui, sans-serif;       /* textos corridos */
  --manuscrita:    Caveat, cursive;                     /* frases manuscritas */

  --alto-nav:      78px;   /* alto de la barra superior fija */
}


/* ==========================================================================
   2. BASE Y UTILIDADES
   ========================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* para que los enlaces #ancla no queden bajo la barra */
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--negro);
  font-family: var(--texto-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--amarillo); }

img { max-width: 100%; }

input, textarea, select, button { font-family: inherit; }

/* Ancho máximo del contenido, centrado */
.contenedor { max-width: 1200px; margin: 0 auto; }

/* Secciones genéricas */
.seccion         { padding: 86px 24px 92px; }
.seccion--clara  { background: var(--fondo-suave); }
.seccion--azul   { background: var(--azul); color: #ffffff; }

/* Encabezados de sección */
.encabezado           { max-width: 760px; margin-bottom: 44px; }
.manuscrita           { font-family: var(--manuscrita); font-size: 30px; color: var(--amarillo); line-height: 1; margin-bottom: 6px; }
.titulo-seccion       { margin: 0 0 14px; font-family: var(--titulos); font-weight: 600; font-size: clamp(30px, 5.2vw, 44px); line-height: 1.08; color: var(--azul); text-transform: uppercase; letter-spacing: 0.01em; }
.seccion--azul .titulo-seccion { color: #ffffff; }
.bajada               { margin: 0; font-size: 19px; line-height: 1.55; color: var(--texto); text-wrap: pretty; }
.seccion--azul .bajada { color: rgba(255,255,255,0.86); }

/* Letra chica (aclaraciones de precios) */
.letra-chica { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris); max-width: 820px; }

/* Texto solo para lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titulos); font-size: 16px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  white-space: nowrap; transition: background 0.18s ease, color 0.18s ease;
}

/* Botón de consulta por WhatsApp (el CTA principal de toda la web).
   Su color se define en el bloque 1, en las variables --cta. */
.btn--wa       { background: var(--cta); color: var(--cta-texto); }
.btn--wa:hover { background: var(--cta-hover); color: var(--cta-texto); }

/* Azul lleno */
.btn--azul       { background: var(--azul); color: #ffffff; font-weight: 500; }
.btn--azul:hover { background: var(--amarillo); color: var(--negro); }

/* Contorno azul sobre fondo claro */
.btn--linea       { background: #ffffff; border: 1.5px solid var(--azul); color: var(--azul); font-weight: 500; }
.btn--linea:hover { background: var(--azul); color: #ffffff; }

/* Contorno blanco sobre foto */
.btn--claro       { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.65); color: #ffffff; font-weight: 500; }
.btn--claro:hover { background: #ffffff; color: var(--azul); }

.btn--grande { font-size: 17px; padding: 17px 30px; box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
.btn--bloque { display: flex; width: 100%; font-size: 15px; padding: 14px 18px; }


/* ==========================================================================
   4. BARRA SUPERIOR (navegación)
   ========================================================================== */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #ffffff;
  border-bottom: 1px solid var(--borde-nav);
  box-shadow: 0 3px 16px rgba(0,104,152,0.10);
}
.barra__interna {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.barra__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.barra__logo img { display: block; width: auto; }
.barra__logo .iso  { height: 48px; }
.barra__logo .word { height: 20px; }

/* Botón hamburguesa (solo se ve en celular) */
.btn-menu {
  display: none; flex-direction: column; gap: 5px;
  background: transparent; border: 0; padding: 12px; cursor: pointer;
}
.btn-menu span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--azul); }

/* Menú de escritorio */
.nav-escritorio { display: flex; align-items: center; gap: 26px; }
.nav-escritorio a {
  font-family: var(--titulos); font-size: 14px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--azul); font-weight: 500; white-space: nowrap;
}
.nav-escritorio a:hover { color: var(--amarillo); }
.nav-escritorio .nav-contacto {
  color: #ffffff; background: var(--azul); padding: 10px 18px; border-radius: 999px;
}
.nav-escritorio .nav-contacto:hover { background: var(--amarillo); color: var(--negro); }

/* Menú desplegable de celular */
.nav-movil {
  display: none; flex-direction: column;
  padding: 8px 20px 22px; border-top: 1px solid var(--borde-nav); gap: 2px;
}
.nav-movil.abierto { display: flex; }
.nav-movil a {
  font-family: var(--titulos); font-size: 17px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--azul); padding: 15px 4px;
  border-bottom: 1px solid #f0f4f6;
}
.nav-movil .nav-contacto {
  margin-top: 14px; text-align: center; color: #ffffff; background: var(--azul);
  border-radius: 999px; border-bottom: 0;
}


/* ==========================================================================
   5. PORTADA (hero)
   ========================================================================== */
.hero {
  position: relative; min-height: 640px; margin-top: var(--alto-nav);
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(1.06) contrast(1.04);
}
.hero__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
      rgba(0,104,152,0.50) 0%,
      rgba(0,60,88,0.42)  30%,
      rgba(0,40,60,0.72)  58%,
      rgba(0,28,42,0.90) 100%);
}
.hero__contenido {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: 120px 24px 80px; width: 100%; pointer-events: none;
}
.hero h1 {
  margin: 0 0 18px; max-width: 860px;
  font-family: var(--titulos); font-weight: 600;
  font-size: clamp(34px, 6.4vw, 60px); line-height: 1.05; letter-spacing: 0.005em;
  color: #ffffff; text-wrap: balance;
}
.hero p {
  margin: 0 0 34px; max-width: 620px; font-size: 20px; line-height: 1.55;
  color: rgba(255,255,255,0.92); text-wrap: pretty;
}
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; pointer-events: auto; }

/* Pastilla amarilla "20 años acompañando viajeros" */
.pastilla {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amarillo); color: var(--negro);
  font-family: var(--titulos); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}


/* ==========================================================================
   6. FRANJA DE DATOS (bajo el hero)
   ========================================================================== */
.franja { background: var(--azul); color: #ffffff; }
.franja__interna {
  max-width: 1200px; margin: 0 auto; padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  align-items: center; justify-content: center; text-align: center;
}
.franja span { font-family: var(--titulos); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.franja .rombo { color: var(--amarillo); letter-spacing: 0; }


/* ==========================================================================
   7. TARJETAS DE SALIDAS GRUPALES
   ========================================================================== */
.grilla-salidas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 26px;
}
.tarjeta {
  background: #ffffff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,104,152,0.10); border: 1px solid var(--borde);
  display: flex; flex-direction: column;
}
/* Cinta "Próxima salida" */
.tarjeta__cinta {
  background: var(--amarillo); color: var(--negro);
  font-family: var(--titulos); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  padding: 10px 18px; text-align: center; white-space: nowrap;
}
.tarjeta__foto { position: relative; height: 214px; }
.tarjeta__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.06) contrast(1.04);
}
.etiqueta {
  position: absolute; top: 14px;
  font-family: var(--titulos); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.etiqueta--grupal  { left: 14px;  background: var(--amarillo); color: var(--negro); }
.etiqueta--premium { right: 14px; background: var(--azul);     color: #ffffff; }

.tarjeta__cuerpo { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.tarjeta__titulo { margin: 0; font-family: var(--titulos); font-weight: 600; font-size: 26px; color: var(--azul); line-height: 1.15; }

.tarjeta__datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; font-size: 15px; color: var(--texto); }
.tarjeta__datos .ancho-total { grid-column: span 2; }
.rotulo {
  font-family: var(--titulos); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 2px;
}
.fecha-salida { font-family: var(--titulos); font-size: 17px; font-weight: 500; color: var(--azul); }
.tarjeta__incluye { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto); }

.tarjeta__pie { margin-top: auto; padding-top: 16px; border-top: 1px solid #eef3f6; }
.precio { font-family: var(--titulos); font-size: 25px; color: var(--negro); font-weight: 600; }
.precio small { font-size: 16px; color: var(--texto); font-weight: 400; }
.precio-aclaracion { font-size: 13px; color: var(--gris); margin-top: 2px; }
.tarjeta__pie .btn { margin-top: 16px; }

.centrado { margin-top: 30px; display: flex; justify-content: center; }


/* ==========================================================================
   8. QUIÉNES SOMOS
   ========================================================================== */
.nosotros {
  /* min(100%, 320px) evita que la columna fuerce 320px en pantallas
     de 320px de ancho y empuje toda la página hacia afuera. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 52px; align-items: center;
}
.nosotros p { margin: 0 0 18px; font-size: 19px; line-height: 1.6; color: var(--texto); text-wrap: pretty; }

.estadisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin-top: 30px; }
.estadistica { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 20px; }
.estadistica b { display: block; font-family: var(--titulos); font-size: 34px; color: var(--azul); font-weight: 600; line-height: 1; }
.estadistica span { display: block; font-size: 14px; color: var(--texto); margin-top: 4px; }

.nosotros__figura { position: relative; }
.nosotros__foto {
  position: relative; height: 460px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,104,152,0.16);
}
.nosotros__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloque de marca que ocupa el lugar de la foto real de Pamela.
   Cuando llegue la foto se reemplaza por <img> (ver comentario en index.html). */
.foto-pendiente {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 40px;
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-medio) 62%, #2b5476 100%);
  text-align: center;
}
.foto-pendiente::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(248,176,24,0.28) 0%, rgba(248,176,24,0) 55%);
  pointer-events: none;
}
.foto-pendiente img { width: 116px; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; }
.foto-pendiente b {
  font-family: var(--titulos); font-size: 20px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ffffff; font-weight: 500;
}
.foto-pendiente span { font-family: var(--manuscrita); font-size: 26px; color: var(--amarillo); line-height: 1.1; }

.cartel-amarillo {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--amarillo); color: var(--negro);
  padding: 16px 22px; border-radius: 16px; max-width: 250px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.cartel-amarillo b {
  display: block; font-family: var(--titulos); font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.cartel-amarillo span { display: block; font-size: 14px; margin-top: 4px; line-height: 1.4; }


/* ==========================================================================
   9. SERVICIOS
   ========================================================================== */
.grilla-servicios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(46%, 205px), 1fr)); gap: 16px;
}
.servicio {
  background: #ffffff; border-radius: 16px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.servicio b { font-family: var(--titulos); font-size: 19px; line-height: 1.2; color: var(--azul); font-weight: 500; }
.servicio span { font-size: 14px; line-height: 1.45; color: var(--texto); margin-top: -4px; }

.servicios__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.servicios__cta em { font-style: normal; color: rgba(255,255,255,0.8); font-size: 16px; }


/* ==========================================================================
   10. DESTINOS DESTACADOS
   ========================================================================== */
.grilla-destinos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.destino {
  position: relative; height: 380px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,104,152,0.12);
}
.destino img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.06) contrast(1.04);
}
.destino__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,40,60,0) 40%, rgba(0,40,60,0.85) 100%);
}
.destino__texto { position: absolute; left: 20px; right: 20px; bottom: 20px; pointer-events: none; }
.destino__texto b {
  display: block; font-family: var(--titulos); font-size: 30px; color: #ffffff;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.destino__texto span { display: block; font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 14px; }
.destino__texto .btn { pointer-events: auto; font-size: 14px; padding: 12px 20px; }


/* ==========================================================================
   11. PREGUNTAS FRECUENTES (acordeón)
   ========================================================================== */
.faq { max-width: 860px; margin: 0 auto; }
.lista-faq { display: flex; flex-direction: column; gap: 14px; }
.item-faq { background: #ffffff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.item-faq__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; padding: 22px 24px; cursor: pointer; text-align: left;
  font-family: var(--titulos); font-size: 21px; color: var(--azul); font-weight: 500; line-height: 1.25;
}
.item-faq__boton .mas {
  color: var(--amarillo); font-size: 26px; line-height: 1;
  transition: transform 0.18s ease; flex-shrink: 0;
}
.item-faq__boton[aria-expanded="true"] .mas { transform: rotate(45deg); }
.item-faq__respuesta { padding: 0 24px 24px; font-size: 17px; line-height: 1.6; color: var(--texto); text-wrap: pretty; }
.item-faq__respuesta[hidden] { display: none; }


/* ==========================================================================
   12. CONTACTO
   ========================================================================== */
.contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 46px; }
.contacto__intro { margin: 0 0 26px; font-size: 19px; line-height: 1.55; color: var(--texto); text-wrap: pretty; }

.datos-contacto { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.dato-contacto { display: flex; gap: 12px; align-items: flex-start; }
.dato-contacto .rombo { color: var(--amarillo); margin-top: 4px; }
.dato-contacto .rotulo { font-size: 12px; letter-spacing: 0.12em; }
.dato-contacto p { margin: 0; font-size: 17px; color: var(--negro); line-height: 1.45; }

/* Mapa de Google embebido */
.mapa { position: relative; height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid var(--borde); background: #eef3f6; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Formulario */
.formulario {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 22px; padding: 32px 30px 34px;
  display: flex; flex-direction: column; justify-content: center;
}
.formulario form { display: flex; flex-direction: column; gap: 16px; }
.formulario__titulo {
  font-family: var(--titulos); font-size: 22px; color: var(--azul);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.campo {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--titulos); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texto);
}
.campo input, .campo textarea {
  font-family: var(--texto-base); font-size: 16px; letter-spacing: normal; text-transform: none;
  color: var(--negro); padding: 13px 15px; border-radius: 11px;
  border: 1px solid #d7e1e7; background: #ffffff;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.formulario .btn { margin-top: 4px; width: 100%; }
.formulario__nota { font-size: 13px; color: var(--gris); line-height: 1.45; }

/* Trampa anti-spam: invisible para las personas, visible para los robots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Avisos de envío correcto / con error
   El aviso ocupa el lugar del formulario, centrado vertical y horizontalmente.
   -------------------------------------------------------------------------- */
.aviso {
  flex-grow: 1; min-height: 340px; padding: 30px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aviso b {
  display: block; font-family: var(--titulos); font-size: 28px;
  color: var(--azul); font-weight: 600; margin-bottom: 10px; line-height: 1.15;
}
.aviso p { margin: 0; max-width: 380px; font-size: 17px; line-height: 1.55; color: var(--texto); }

/* Círculo amarillo con el avioncito adentro */
.aviso__icono {
  width: 92px; height: 92px; border-radius: 999px; margin: 0 0 24px;
  display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #ffc851 0%, var(--amarillo) 55%, #e09c07 100%);
  box-shadow: 0 12px 28px rgba(248,176,24,0.42), inset 0 -2px 6px rgba(0,0,0,0.08);
  animation: aviso-entra 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aviso__icono svg { width: 44px; height: 44px; display: block; margin: 2px 3px 0 0; }

/* Líneas de estela, para que el avión parezca en movimiento */
.aviso__icono .estela { opacity: 0.7; stroke-width: 2.1; }

/* El avión despega apenas aparece el cartel */
@keyframes aviso-entra {
  0%   { transform: scale(0.6) translateY(14px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(0);   opacity: 1; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

/* Versión de error: círculo rojo y sin rebote */
.aviso--error .aviso__icono {
  background: radial-gradient(circle at 32% 28%, #f0705f 0%, #e04b3c 55%, #b8362a 100%);
  box-shadow: 0 12px 28px rgba(224,75,60,0.36);
}
.aviso--error .aviso__icono svg { margin: 0; }
.aviso--error b { color: #b8362a; }

/* Si la persona pidió menos animaciones en su sistema, no se anima nada */
@media (prefers-reduced-motion: reduce) {
  .aviso__icono { animation: none; }
}

[hidden] { display: none !important; }


/* ==========================================================================
   13. PIE DE PÁGINA
   ========================================================================== */
.pie { background: var(--negro); color: rgba(255,255,255,0.78); padding: 56px 24px 34px; }
.pie__grilla {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px; align-items: start;
}
.pie__logo {
  width: 100%; max-width: 280px; height: auto; display: block; margin-bottom: 16px;
  background: #ffffff; border-radius: 10px; padding: 12px 14px;
}
.pie__marca { font-family: var(--titulos); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; }
.pie__legal { font-size: 14px; line-height: 1.5; margin-top: 6px; }
.pie__titulo {
  font-family: var(--titulos); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--amarillo); margin-bottom: 12px;
}
.pie p, .pie__enlaces { font-size: 15px; line-height: 1.6; margin: 0; }
.pie a { color: rgba(255,255,255,0.78); }
.pie a:hover { color: var(--amarillo); }
.pie__enlaces { display: flex; flex-direction: column; gap: 8px; }
.pie__instagram { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
.pie__cierre {
  max-width: 1200px; margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 13px; color: rgba(255,255,255,0.5);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}


/* ==========================================================================
   14. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
/* Solo el ícono redondo de WhatsApp, sin texto.
   Para cambiarlo de tamaño, tocá el 62px de width y height. */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: block; width: 62px; height: 62px;
  border-radius: 999px; background: #ffffff; border: 1px solid var(--borde-nav);
  box-shadow: 0 8px 26px rgba(0,0,0,0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wa-flotante svg { display: block; width: 100%; height: 100%; }
.wa-flotante:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(0,0,0,0.30); }


/* ==========================================================================
   15. PÁGINA "SALIDAS GRUPALES"
   ========================================================================== */
.cabecera-salidas { margin-top: var(--alto-nav); padding: 64px 24px 34px; background: var(--azul); color: #ffffff; }
.cabecera-salidas h1 {
  margin: 0 0 14px; font-family: var(--titulos); font-weight: 600;
  font-size: clamp(32px, 5.6vw, 50px); line-height: 1.06;
  text-transform: uppercase; letter-spacing: 0.01em; max-width: 900px;
}
.cabecera-salidas p { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.88); text-wrap: pretty; }
.volver {
  display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.8);
  font-family: var(--titulos); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 20px; white-space: nowrap;
}
.volver:hover { color: var(--amarillo); }
.cierre-salidas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cierre-salidas em { font-style: normal; font-size: 16px; color: var(--texto); }


/* ==========================================================================
   16. RESPONSIVE — celulares y tablets
   ========================================================================== */
@media (max-width: 900px) {
  .nav-escritorio { display: none; }        /* se oculta el menú de escritorio */
  .btn-menu       { display: flex; }        /* y aparece la hamburguesa */

  .hero            { min-height: 540px; }
  .hero__contenido { padding: 90px 20px 56px; }

  .seccion         { padding: 62px 20px 66px; }
  .encabezado      { margin-bottom: 32px; }

  .nosotros        { gap: 42px; }
  .nosotros__foto  { height: 380px; }
  .cartel-amarillo { left: 0; bottom: -14px; }

  .contacto        { gap: 34px; }
  .formulario      { padding: 26px 20px 28px; }

  .wa-flotante     { right: 14px; bottom: 14px; width: 56px; height: 56px; }
}

@media (max-width: 520px) {
  .barra__logo .iso  { height: 40px; }
  .barra__logo .word { height: 16px; }

  /* Los dos botones de la portada, uno al lado del otro y más chicos.
     El texto se parte en dos renglones si no entra, y los dos botones
     quedan de la misma altura. */
  .hero__botones {
    flex-wrap: nowrap; gap: 10px; align-items: stretch;
  }
  .hero__botones .btn {
    flex: 1 1 0; min-width: 0;
    font-size: 13px; letter-spacing: 0.03em; padding: 13px 10px;
    white-space: normal; line-height: 1.2; text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  }

  .grilla-salidas     { grid-template-columns: 1fr; }
  .grilla-destinos    { grid-template-columns: 1fr; }

  /* Servicios: dos por hilera en celular, para que la sección no obligue
     a bajar tanto. Las tarjetas se achican para que entren cómodas. */
  .grilla-servicios   { grid-template-columns: 1fr 1fr; gap: 12px; }
  .servicio           { padding: 18px 14px; gap: 8px; }
  .servicio svg       { width: 28px; height: 28px; }
  .servicio b         { font-size: 15.5px; line-height: 1.25; }
  .servicio span      { font-size: 13px; line-height: 1.4; margin-top: -2px; }

  .item-faq__boton    { font-size: 18px; padding: 18px 18px; }
  .item-faq__respuesta{ padding: 0 18px 20px; font-size: 16px; }

  /* Ningún botón puede ser más ancho que la pantalla: si el texto no entra,
     se parte en dos renglones en vez de desbordar la página. */
  .btn { max-width: 100%; white-space: normal; text-align: center; }

  /* Franja azul: en celular, dos datos por renglón con el rombo amarillo
     separándolos, igual que en escritorio. Se usa una grilla de 2 columnas
     para que siempre queden dos y dos, sin importar el ancho del teléfono.
     Los rombos sueltos del HTML se esconden y el separador se dibuja con
     ::after sobre el primer dato de cada renglón. */
  .franja__interna {
    display: grid; grid-template-columns: auto auto;
    justify-content: center; align-items: center;
    gap: 9px 0; padding: 16px 14px;
  }
  .franja .rombo { display: none; }
  .franja span {
    display: flex; align-items: center;
    font-size: 11.5px; letter-spacing: 0.06em; white-space: nowrap;
  }
  /* El primer dato de cada renglón se pega al borde derecho de su columna
     y el segundo al borde izquierdo de la suya. Así los dos rombos quedan
     exactamente uno debajo del otro. */
  .franja__interna > span:nth-child(1),
  .franja__interna > span:nth-child(5) { justify-self: end; }
  .franja__interna > span:nth-child(3),
  .franja__interna > span:nth-child(7) { justify-self: start; }

  .franja__interna > span:nth-child(1)::after,
  .franja__interna > span:nth-child(5)::after {
    content: "◆"; color: var(--amarillo);
    font-size: 8px; letter-spacing: 0; margin: 0 13px;
  }

  .pie__cierre        { justify-content: flex-start; }
}

/* Teléfonos angostos (iPhone SE y similares): se achica un poco la franja
   azul para que los dos datos por renglón sigan entrando sin desbordar. */
@media (max-width: 365px) {
  .franja__interna { padding: 15px 8px; }
  .franja span     { font-size: 10px; letter-spacing: 0.04em; }
  .franja__interna > span:nth-child(1)::after,
  .franja__interna > span:nth-child(5)::after { margin: 0 8px; font-size: 7px; }
}