/* ==========================================================================
   TURISMO Y TRASLADOS JLJ — hoja de estilos
   Mobile-first. Sin frameworks ni dependencias externas (excepto Google Fonts).
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  /* Paleta: naturaleza + agua + turismo, sin abusar del verde */
  --forest: #163C2C;      /* verde natural profundo — texto, header */
  --forest-soft: #1F5C3E; /* verde medio — acentos sobre fondo oscuro */
  --river: #0E4B63;       /* azul profundo — agua, cataratas */
  --river-soft: #14647F;
  --cream: #FBF7EE;       /* fondo principal */
  --cream-alt: #F2ECDC;   /* fondo de sección alterna */
  --lime: #A9DE3B;        /* verde lima brillante — acento / CTA */
  --lime-dark: #8FC523;
  --ink: #16211B;         /* texto principal */
  --ink-soft: #4B5A52;    /* texto secundario */
  --white: #FFFFFF;
  --line: rgba(22, 33, 27, 0.1);

  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(22, 33, 27, 0.08);
  --shadow-md: 0 10px 30px rgba(14, 41, 33, 0.12);

  --container-w: 1180px;
  --transition: 180ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--font-heading); color: var(--forest); line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-soft); }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

.icon { width: 1.1em; height: 1.1em; fill: none; flex-shrink: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest);
  color: var(--white);
  padding: 0.8em 1.2em;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--river-soft);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.9em 1.6em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  /* Los botones con texto más largo (ej. "Hablar con José Luis por WhatsApp")
     pueden no entrar en una sola línea en celulares angostos. En vez de
     "nowrap" (que hacía que el botón se recortara contra el borde de la
     pantalla), se permite pasar a una segunda línea, centrada, sin romper
     el look de píldora en los botones cortos que ya entran en una línea. */
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-large { padding: 1.05em 1.9em; font-size: 1.02rem; }
.btn-small { padding: 0.55em 1.1em; font-size: 0.88rem; }

.btn-accent {
  background: var(--lime);
  color: var(--forest);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: var(--lime-dark); box-shadow: var(--shadow-md); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}
.btn-whatsapp:hover { background: #1EBE59; }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.65);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

/* ---------- Placeholder de fotografía ----------
   Composición prolija (no gris genérico): degradé bosque/río + textura de
   olas sutil + una etiqueta clara indicando qué foto va en ese lugar. */
.photo-placeholder {
  position: relative;
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(169, 222, 59, 0.18), transparent 55%),
    linear-gradient(135deg, var(--river) 0%, var(--forest) 100%);
  overflow: hidden;
  isolation: isolate;
}
.photo-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 40 Q60 10 120 40 T240 40' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='2'/%3E%3Cpath d='M0 90 Q60 60 120 90 T240 90' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='2'/%3E%3Cpath d='M0 140 Q60 110 120 140 T240 140' fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='2'/%3E%3Cpath d='M0 190 Q60 160 120 190 T240 190' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  z-index: 0;
}
.placeholder-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  border: 1.5px dashed rgba(255,255,255,0.55);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(11, 27, 22, 0.25);
  backdrop-filter: blur(2px);
  text-align: center;
  z-index: 1;
  white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--forest), var(--river));
  flex-shrink: 0;
}
.brand-mark .icon { width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; white-space: nowrap; }
.brand-kicker {
  display: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3em;
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  color: var(--forest);
}
.brand-name-accent { color: var(--lime-dark); }

.main-nav ul {
  display: flex;
  gap: 1.9rem;
}
.main-nav a {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  position: relative;
  padding: 0.2em 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--lime-dark);
  transition: right var(--transition);
}
.main-nav a:hover::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-whatsapp { display: none; }
.header-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: var(--forest);
  transition: color var(--transition), background var(--transition);
}
.header-instagram:hover { color: var(--river); background: var(--cream-alt); }
.header-instagram .icon { width: 1.4em; height: 1.4em; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: var(--forest);
}
.nav-toggle .icon { width: 1.4em; height: 1.4em; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.main-nav {
  position: fixed;
  inset: 0 0 auto 0;
  top: 68px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.main-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.main-nav ul {
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 1.25rem 1.25rem;
}
.main-nav ul li a {
  display: block;
  padding: 0.9em 0.2em;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero-media .placeholder-tag {
  top: 1.5rem;
  left: auto;
  right: 1.5rem;
  bottom: auto;
  transform: none;
  font-size: 0.78rem;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11,27,22,0.15) 0%, rgba(11,27,22,0.35) 55%, rgba(9,20,16,0.82) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 6rem;
  padding-bottom: 3.5rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 0.9em;
}
/* Bordeado blanco en el eyebrow del hero: sobre la foto de las Cataratas
   el verde lima se mezcla con el agua/verde de la selva, así que se le
   suma un contorno blanco (text-stroke + text-shadow de respaldo) para
   que resalte mejor. */
.hero .eyebrow {
  font-size: 1rem;
  -webkit-text-stroke: 0.6px var(--white);
  paint-order: stroke fill;
  text-shadow:
    0 0 1px var(--white),
    0 0 1px var(--white),
    0 1px 2px rgba(9,20,16,0.35);
}
.hero h1 { color: var(--white); margin-bottom: 0.25em; }
.hero-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.6em;
}
.hero-sub {
  max-width: 46ch;
  color: rgba(255,255,255,0.88);
  font-size: 1.02rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

/* ---------- Secciones genéricas ---------- */
.section { padding: 5rem 0; }
.section-alt { background: var(--cream-alt); }
.section-tagline {
  font-weight: 700;
  color: var(--river-soft);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.4em;
}
.section-lead {
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 2.6rem;
}

/* ---------- Secciones con foto de fondo ----------
   Cada sección de contenido (Destinos, Videos, Servicios, Flota, Por qué
   elegirnos, Opiniones) usa una foto real de Iguazú/Foz do Iguaçu como
   fondo en vez del blanco/crema liso, para que ninguna pantalla quede sin
   una imagen llamativa detrás. Un degradé oscuro fijo (::before) garantiza
   que el texto blanco y las tarjetas se sigan leyendo bien encima; la foto
   en sí cambia por sección (background-image, más abajo) usando fotos ya
   verificadas como reales en el sitio, distintas de la del hero. */
.section-photo {
  position: relative;
  color: var(--white);
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(9,20,16,0.86) 0%, rgba(10,32,26,0.89) 55%, rgba(9,20,16,0.93) 100%);
}
.section-photo > .container { position: relative; z-index: 1; }
.section-photo h2 { color: var(--white); }
.section-photo .section-tagline { color: var(--lime); }
.section-photo .section-lead { color: rgba(255,255,255,0.86); }
.section-photo .destinations-subhead { color: rgba(255,255,255,0.92); }
.section-photo .video-link-title { color: var(--white); }

/* Foto real por sección (ver README para la fuente de cada una) */
#destinos.section-photo   { background-image: url("../img/cataratas-argentina-2.jpg"); background-position: center 32%; }
#videos.section-photo     { background-image: url("../img/itaipu.jpg"); background-position: center 62%; }
#servicios.section-photo  { background-image: url("../img/aeropuerto-iguazu.jpg"); background-position: center 38%; }
#flota.section-photo      { background-image: url("../img/minas-wanda.jpg"); background-position: center; }
#nosotros.section-photo   { background-image: url("../img/cataratas-brasil.jpg"); background-position: center 58%; }
#opiniones.section-photo  { background-image: url("../img/ruinas-san-ignacio.jpg"); background-position: center 42%; }

/* ---------- Servicios ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.6rem;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,75,99,0.1), rgba(169,222,59,0.18));
  color: var(--river);
  margin-bottom: 1rem;
}
.service-icon .icon { width: 1.6em; height: 1.6em; }
.service-card h3 { margin-bottom: 0.35em; }
.service-card p { margin: 0 0 1.1rem; font-size: 0.95rem; }
.service-cta { margin-top: auto; }

/* ---------- Destinos ---------- */
.destinations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.destination-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-sm);
}
.destination-card--photo { background: var(--forest); }
.destination-card[data-destination] { cursor: pointer; }
.destination-card[data-destination]:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.destination-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.55em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.01em;
}
.destination-more .icon { width: 1em; height: 1em; transition: transform var(--transition); }
.destination-card[data-destination]:hover .destination-more .icon,
.destination-card[data-destination]:focus-visible .destination-more .icon {
  transform: translateX(3px);
}
.destination-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 500ms ease;
}
.destination-card--photo:hover .destination-photo { transform: scale(1.04); }
.destination-card .placeholder-tag { font-size: 0.76rem; top: 42%; }
.destination-info {
  position: relative;
  z-index: 1;
  padding: 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(9,20,16,0.78));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.destination-flag { font-size: 1.3rem; }
.destination-info h3 { color: var(--white); margin: 0.3em 0 0.15em; }
.destination-info p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.92rem; }

.destinations-subhead {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--forest);
  margin: 0 0 1.1rem;
}

.destinations-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: rgba(169, 222, 59, 0.14);
  border: 1px solid rgba(169, 222, 59, 0.4);
  color: var(--lime);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.destinations-featured-label .icon { width: 1em; height: 1em; }
.destinations-grid--secondary { margin-bottom: 0; }
.destination-card--sm { min-height: 190px; }
.destination-card--sm .destination-info { padding: 1.1rem; }
.destination-card--sm h3 { font-size: 1rem; }
.destination-card--sm p { font-size: 0.86rem; }

/* ---------- Videos (YouTube, contenido externo real) ---------- */
.video-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.video-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.video-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--forest);
  box-shadow: var(--shadow-sm);
}
.video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.video-link-card:hover .video-thumb img,
.video-link-card:focus-visible .video-thumb img { transform: scale(1.04); }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(9,20,16,0.18);
  transition: background var(--transition);
}
.video-link-card:hover .video-play,
.video-link-card:focus-visible .video-play { background: rgba(9,20,16,0.32); }
.video-play .icon { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.video-link-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--forest);
  line-height: 1.3;
}

/* Los videos que no se muestran de entrada quedan con [hidden] hasta que
   se despliegan con el botón "Ver más videos" — no se eliminó ninguno.
   ".video-link-card" ya define "display:flex", que por especificidad podía
   ganarle al [hidden] del navegador y mostrar la tarjeta igual: esta regla
   fuerza que [hidden] gane siempre. */
.video-link-card--more[hidden] { display: none; }
.video-toggle {
  display: flex;
  margin: 2rem auto 0;
}
.video-toggle .icon { transform: rotate(-90deg); transition: transform var(--transition); }
.video-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* ---------- Flota y conductor ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.fleet-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fleet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.fleet-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.fleet-carousel { background: var(--cream-alt); }
.fleet-carousel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}
.fleet-carousel-photo.is-active { opacity: 1; }
.fleet-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.fleet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(22, 60, 44, 0.15);
  transition: background var(--transition), transform var(--transition);
}
.fleet-dot.is-active { background: var(--lime); transform: scale(1.25); }

.fleet-media--driver {
  aspect-ratio: 1 / 1;
  background: var(--white);
}
.fleet-media--driver img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.driver-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.placeholder-icon {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  color: rgba(22, 60, 44, 0.18);
  z-index: 0;
}
.driver-photo .placeholder-tag {
  top: auto;
  bottom: 1rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.photo-placeholder--light {
  background: linear-gradient(160deg, #FFFFFF 0%, var(--cream-alt) 100%);
}
.photo-placeholder--light::before { opacity: 0.5; filter: invert(1) brightness(0.75); }
.placeholder-tag--dark {
  color: var(--forest);
  border-color: rgba(22, 60, 44, 0.35);
  background: rgba(255, 255, 255, 0.75);
}

.fleet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  background: var(--cream-alt);
  color: var(--forest);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.7em;
}
.fleet-badge .icon { color: var(--river-soft); width: 1.1em; height: 1.1em; }
.fleet-info h3 { margin-bottom: 0.3em; }
.fleet-info p { margin: 0; font-size: 0.94rem; }
.fleet-whatsapp { margin-top: 1rem; }

/* ---------- Por qué elegirnos ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}
.trust-grid li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  padding: 0.9em 1.1em;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.trust-grid .icon { width: 1.5em; height: 1.5em; color: var(--lime); }

/* ---------- Opiniones ---------- */
.reviews-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.reviews-empty {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reviews-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: var(--lime);
  margin-bottom: 0.4rem;
}
.reviews-empty-icon .icon { width: 1.6em; height: 1.6em; }
.reviews-empty h3 { margin-bottom: 0.2em; color: var(--white); }
.reviews-empty p { margin: 0; font-size: 0.94rem; max-width: 32ch; color: rgba(255,255,255,0.82); }
/* Sin este override, [hidden] pierde contra ".reviews-empty { display: flex }"
   por tener la misma especificidad CSS (mismo problema que ya se dio con los
   videos "ocultos" en la tercera etapa): el atributo quedaría puesto pero sin
   efecto visual, y el estado vacío se seguiría viendo aunque ya haya reseñas. */
.reviews-empty[hidden] { display: none; }

/* Reseñas ya aprobadas (cargadas dinámicamente desde Firebase, si está
   configurado — ver README). Ocupa el mismo lugar que .reviews-empty:
   se muestra una u otra, nunca las dos a la vez. */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 30rem;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.reviews-list[hidden] { display: none; }
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.4rem;
}
.review-card-stars { display: flex; gap: 0.15em; color: rgba(22, 33, 27, 0.18); margin-bottom: 0.5em; }
.review-card-stars .icon { width: 1em; height: 1em; }
.review-card-stars .icon.is-filled { color: var(--lime-dark); }
.review-card-text { color: var(--ink); font-size: 0.94rem; margin: 0 0 0.6em; }
.review-card-name { margin: 0; font-weight: 700; color: var(--forest); font-size: 0.9rem; }

.review-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.9rem 1.7rem;
}
.review-form h3 { margin-bottom: 1.1rem; }
.review-form-field { margin-bottom: 1.2rem; }
.review-form-label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--forest);
  margin-bottom: 0.5em;
}
.review-form-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.review-form-input::placeholder { color: var(--ink-soft); opacity: 0.65; }
.review-form-input:focus {
  outline: none;
  border-color: var(--river-soft);
  box-shadow: 0 0 0 3px rgba(14,75,99,0.12);
}

.star-rating { display: inline-flex; gap: 0.3em; }
.star-btn {
  width: 2.1em;
  height: 2.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--line);
  border-radius: var(--radius-sm);
  transition: color var(--transition), transform var(--transition);
}
.star-btn .icon { width: 1.5em; height: 1.5em; }
.star-btn:hover,
.star-btn:focus-visible { color: var(--lime-dark); transform: scale(1.08); }
.star-btn.is-filled { color: var(--lime-dark); }

.review-form-error {
  color: #B3261E;
  font-size: 0.88rem;
  font-weight: 600;
  margin: -0.4rem 0 1rem;
}
.review-form-submit { width: 100%; margin-top: 0.2rem; }
.review-form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  text-align: center;
}

@media (min-width: 860px) {
  .reviews-layout { grid-template-columns: 0.85fr 1.15fr; }
}

/* ---------- CTA final ---------- */
/* Foto real de las Cataratas, lado brasileño, vista panorámica con pasarela y arcoíris
   (Wikimedia Commons, CC — misma foto ya usada en la galería de "Cataratas del Iguazú — Brasil"),
   distinta de la foto del hero, con un degradé oscuro encima para que el texto blanco se lea bien. */
.cta-band {
  background:
    linear-gradient(135deg, rgba(9,20,16,0.86) 0%, rgba(14,75,99,0.82) 100%),
    url("../img/cataratas-brasil-2.jpg") center 38% / cover no-repeat;
  color: var(--white);
  padding: 4.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='250' cy='40' r='140' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2'/%3E%3Ccircle cx='30' cy='280' r='110' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2'/%3E%3C/svg%3E");
  background-size: cover;
}
.cta-inner { position: relative; z-index: 1; max-width: 640px; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.85); margin-bottom: 1.8rem; }

/* Variante más compacta para el CTA intermedio (después de Destinos): mismo
   componente, menos padding, y otra foto real (Triple Frontera) para que no
   se repita la del CTA final. */
.cta-band--mid {
  padding: 3.2rem 0;
  background:
    linear-gradient(135deg, rgba(9,20,16,0.87) 0%, rgba(14,75,99,0.82) 100%),
    url("../img/triple-frontera-2.jpg") center 45% / cover no-repeat;
}

/* ---------- Datos curiosos: franja de estadísticas (sección Destinos) ---------- */
.fun-facts-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin: 1.6rem 0 2.4rem;
}
.fun-fact {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fun-fact-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--lime);
  line-height: 1.15;
  margin-bottom: 0.25em;
}
.fun-fact-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.4;
}

/* ---------- Dato curioso / útil, reutilizable en secciones con foto de fondo ---------- */
.fact-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  max-width: 640px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fact-callout .icon { width: 1.5em; height: 1.5em; flex-shrink: 0; color: var(--lime); margin-top: 0.1em; }
.fact-callout-text { margin: 0; font-size: 0.94rem; line-height: 1.55; color: rgba(255,255,255,0.88); }
.fact-callout-text strong { color: var(--white); }
.fact-callout--top { margin: 1.6rem 0 2.2rem; }
.fact-callout--bottom { margin-top: 2.5rem; }

/* ---------- Dato útil: fauna en Cataratas (sección Destinos) ---------- */
.wildlife-tip {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--cream-alt);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.5rem;
  max-width: 640px;
  box-shadow: var(--shadow-md);
}
.wildlife-tip-photo {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  object-position: 42% 30%;
  box-shadow: var(--shadow-sm);
  transform: scaleX(-1);
}
.wildlife-tip-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--forest);
  text-align: left;
}
.wildlife-tip-text strong { color: var(--forest); }
@media (max-width: 639px) {
  .wildlife-tip { flex-direction: column; text-align: center; padding: 1.3rem 1.2rem; }
  .wildlife-tip-text { text-align: center; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest);
  color: rgba(255,255,255,0.85);
  padding-top: 3rem;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-name { font-family: var(--font-heading); font-weight: 700; color: var(--white); margin: 0; }
.footer-location {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  margin: 0.2em 0 0;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.footer-links a { font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.82); }
.footer-links a:hover { color: var(--lime); }
.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  color: var(--white);
  background: rgba(37, 211, 102, 0.16);
  border: 1px solid rgba(37, 211, 102, 0.4);
  padding: 0.7em 1.2em;
  border-radius: var(--radius-pill);
  width: fit-content;
}
.footer-whatsapp:hover { background: rgba(37, 211, 102, 0.28); }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.footer-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.footer-instagram:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.footer-instagram .icon { width: 1.3em; height: 1.3em; }
.footer-bottom { padding: 1.4rem 0; }
.footer-bottom p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
@media (max-width: 639px) {
  /* Deja espacio para que el botón flotante de WhatsApp no tape el texto */
  .footer-bottom p { padding-right: 4.2rem; }
}

/* ---------- Botón flotante WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 150;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(11, 27, 22, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(11, 27, 22, 0.42); }
.whatsapp-float .icon { width: 1.7em; height: 1.7em; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 860px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .destinations-grid { grid-template-columns: repeat(3, 1fr); }
  .destinations-grid--primary { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .video-links-grid { grid-template-columns: repeat(3, 1fr); }
}

/* El menú horizontal de escritorio recién aparece a partir de 1040px: a los
   6 enlaces + marca + botones de contacto no les entra el espacio antes de
   ese ancho sin comprimirse (era la causa de que "Por qué elegirnos" y el
   nombre de marca se partieran en varias líneas en pantallas de ~860-1180px). */
@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .header-whatsapp { display: inline-flex; }
  .main-nav {
    position: static;
    inset: auto;
    background: none;
    box-shadow: none;
    border: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav ul { flex-direction: row; padding: 0; gap: 1.9rem; }
  .main-nav ul li { flex-shrink: 0; }
  .main-nav ul li a { padding: 0.2em 0; border-bottom: none; white-space: nowrap; }
}

@media (min-width: 1220px) {
  .brand-kicker { display: block; }
  .main-nav ul { gap: 2.4rem; }
}

@media (min-width: 1100px) {
  .services-grid { grid-template-columns: repeat(5, 1fr); }
  .destinations-grid--primary { grid-template-columns: repeat(5, 1fr); }
  .destinations-grid--secondary { grid-template-columns: repeat(4, 1fr); }
  .fleet-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .video-links-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1039px) {
  .header-inner { position: relative; z-index: 101; }
}

/* ==========================================================================
   Animaciones al hacer scroll (reveal)
   Minimalista: fundido + leve desplazamiento hacia arriba, una sola vez.
   Visible por defecto (sin JS o si el navegador no soporta IntersectionObserver,
   ver fallback en main.js); solo se oculta para animar cuando .js está presente.
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Modal de destino: info ampliada, carrusel de fotos y distancia.
   Un solo modal reutilizado por las 7 tarjetas de "Destinos y excursiones".
   ========================================================================== */
.dest-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.dest-modal[hidden] { display: none; }
.dest-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 16, 0.68);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.dest-modal.is-open .dest-modal-backdrop { opacity: 1; }

.dest-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.16, 0.84, 0.44, 1), opacity 220ms ease;
}
.dest-modal.is-open .dest-modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.dest-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(9, 20, 16, 0.45);
  color: var(--white);
  backdrop-filter: blur(2px);
  transition: background var(--transition);
}
.dest-modal-close:hover { background: rgba(9, 20, 16, 0.7); }
.dest-modal-close .icon { width: 1.1em; height: 1.1em; }

.dest-modal-carousel {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--forest);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.dest-modal-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dest-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(9, 20, 16, 0.45);
  color: var(--white);
  transition: background var(--transition);
}
.dest-carousel-btn:hover { background: rgba(9, 20, 16, 0.7); }
.dest-carousel-btn[hidden] { display: none; }
.dest-carousel-btn .icon { width: 1.3em; height: 1.3em; }
.dest-carousel-prev { left: 0.75rem; }
.dest-carousel-next { right: 0.75rem; }
.dest-carousel-next .icon { transform: scaleX(-1); }

.dest-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.dest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background var(--transition), transform var(--transition);
}
.dest-dot.is-active { background: var(--lime); transform: scale(1.25); }

.dest-modal-body { padding: 1.6rem 1.75rem 1.9rem; }
.dest-modal-flag { font-size: 1.4rem; display: block; margin-bottom: 0.2em; }
.dest-modal-body h3 {
  font-size: 1.3rem;
  color: var(--forest);
  margin: 0 0 0.5em;
}
.dest-modal-distance {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--river);
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 0.9em;
}
.dest-modal-distance .icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.dest-modal-desc {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 1.4em;
}
.dest-modal-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  background: var(--cream-alt);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.4em;
}
.dest-modal-fact .icon { width: 1.2em; height: 1.2em; flex-shrink: 0; color: var(--lime-dark); margin-top: 0.1em; }
.dest-modal-fact strong { color: var(--forest); }
#dest-modal-whatsapp { width: 100%; justify-content: center; }
.dest-modal-price-note {
  margin: 0.7em 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

@media (min-width: 640px) {
  .dest-modal-carousel { aspect-ratio: 16 / 9; }
}