/* ============================================================
     VH CHILE TOUR — assets/style.css
     Hoja de estilos compartida por las 5 paginas del sitio.

     COLORES DE MARCA: cambialos aca abajo en :root y se actualizan
     en todo el sitio automaticamente (botones, titulos, iconos, etc).
     ============================================================ */
  :root {
    --blue: #0a3d91;
    --blue-dark: #062a66;
    --blue-2: #14509c;
    --red: #d1272e;
    --red-dark: #a81f24;
    --cream: #f5f7fa;
    --muted: #6b7280;
    --line: #e3e7ee;
    --radius: 14px;
    --maxw: 1180px;
    font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; }
  body {
    color: #1a1d24;
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  section { padding: 90px 0; }
  /* Titulos en Montserrat ExtraBold, oracion normal (sin mayusculas:
     la clienta probo mayusculas en todo el sitio y le parecio muy
     agresivo en el hero, 2026-10-12). */
  h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  }
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
    cursor: pointer;
    border: none;
  }
  .btn:hover { transform: translateY(-2px); }
  /* Texto corto del boton "Ver tours disponibles" para mobile (ver mas abajo
     en el media query 860px): en escritorio se muestra el texto completo. */
  .btn-text-short { display: none; }
  /* Boton verde de WhatsApp: texto verde oscuro (pedido de la clienta, 2026-10-12) */
  .btn-primary { background: #25D366; color: #0b3d20; font-weight: 800; }
  .btn-red { background: var(--red); color: #fff; }
  .btn-blue { background: var(--blue); color: #fff; }
  .btn-outline { border: 1.5px solid var(--blue); color: var(--blue); background: transparent; }
  .btn-outline-white { border: 1.5px solid #fff; color: #fff; background: transparent; }

  /* HEADER */
  /* BARRA SUPERIOR (topbar): franja fina arriba del header, con tagline, ubicacion/email y redes. Se oculta en mobile para no restar espacio. */
  .topbar { background: var(--blue-dark); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .topbar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 8px 0; font-size: 12px; color: #cfe0f7;
  }
  .topbar-tagline { font-style: italic; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-info { display: flex; gap: 20px; flex-wrap: wrap; }
  .topbar-info span { white-space: nowrap; }
  .topbar-social { display: flex; gap: 14px; flex-shrink: 0; align-items: center; }
  .topbar-social a { color: #cfe0f7; display: flex; align-items: center; transition: opacity .2s ease; }
  .topbar-social a:hover { opacity: .7; }
  /* Iconos SVG de redes sociales (reemplazan el texto "IG/FB/TA"); el color sigue
     el color del link padre via currentColor, asi que cambia solo ahi. */
  .social-icon { display: block; }

  header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--blue-dark);
    border-bottom: 1px solid #0a2e5c;
  }
  header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .logo { display: flex; align-items: center; }
  .logo img { height: 34px; width: auto; display: block; }
  nav.desktop-nav ul { display: flex; gap: 34px; font-size: 14px; font-weight: 600; color: #fff; }
  nav.desktop-nav a:hover { color: #ff9d9d; }
  .header-right { display: flex; align-items: center; gap: 16px; }
  .lang-switch { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #93a8d1; }
  .lang-switch span.active { color: #fff; }
  .lang-switch span { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; opacity: .6; transition: opacity .15s, transform .15s; }
  .lang-switch span:hover { opacity: 1; transform: translateY(-1px); }
  .lang-switch span.active { opacity: 1; }
  .lang-flag { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.3); display: block; }
  #langSwitchMobile { color: var(--muted); }
  #langSwitchMobile span.active { color: var(--blue-dark); }
  #langSwitchMobile .lang-flag { box-shadow: 0 0 0 1px rgba(6,42,102,.15); }
  .social-mini { display: flex; gap: 10px; }
  .social-mini a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #2c4a80; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
  .header-cta { display: inline-flex; }

  .burger {
    display: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid #2c4a80;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }
  .burger span { width: 18px; height: 2px; background: #fff; display: block; }

  .mobile-nav {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    background: #fff;
    z-index: 79;
    padding: 30px 24px;
    overflow-y: auto;
  }
  .mobile-nav.open { display: block; }
  .mobile-nav ul { display: grid; gap: 4px; margin-bottom: 30px; }
  .mobile-nav ul li a {
    display: block;
    padding: 16px 6px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    color: var(--blue-dark);
  }
  .mobile-nav .header-cta { width: 100%; }
  .mobile-nav .btn { width: 100%; }
  .mobile-nav .social-mini { margin-top: 24px; justify-content: center; }
  .mobile-nav .social-mini a { color: var(--blue-dark); border-color: var(--line); }

  /* HERO */
  .hero {
    padding: 0;
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
  }
  .hero .wrap { position: relative; z-index: 2; padding-top: 60px; padding-bottom: 60px; width: 100%; }

  /* SLIDESHOW DE FONDO DEL HERO: cada .hero-slide es una foto; solo una
     tiene la clase "is-active" a la vez y assets/main.js las va alternando
     con un fundido cada 6 segundos. El degradé azul (hero-slideshow-overlay)
     va siempre arriba de las fotos para que el texto blanco se siga leyendo bien. */
  .hero-slideshow { position: absolute; inset: 0; z-index: 0; }
  .hero-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.4s ease;
  }
  .hero-slide.is-active { opacity: 1; }
  .hero-slideshow-overlay {
    position: absolute; inset: 0;
    /* Degrade direccional: oscuro del lado del texto (izquierda/abajo) y
       bien transparente hacia la derecha, para que se note mas la foto. */
    background:
      linear-gradient(90deg, rgba(6,42,102,.9) 0%, rgba(6,42,102,.68) 32%, rgba(6,42,102,.28) 62%, rgba(6,42,102,.08) 85%),
      linear-gradient(0deg, rgba(6,42,102,.55) 0%, rgba(6,42,102,0) 35%);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
  }
  .hero-content { max-width: 620px; }
  .hero .eyebrow { color: #ff8f8f; }
  .hero h1 { font-size: 52px; line-height: 1.08; margin-bottom: 20px; }
  .hero p { font-size: 17px; color: #dde5f4; margin-bottom: 34px; max-width: 480px; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* ESTADISTICAS DEL HERO: numero grande (con degrade blanco->rojo) + etiqueta
     chica arriba en mayusculas, separadas por una linea vertical fina. */
  .hero-stats { display: flex; margin-top: 56px; flex-wrap: wrap; }
  .hero-stats div { padding-right: 32px; margin-right: 32px; border-right: 1px solid rgba(255,255,255,.22); }
  .hero-stats div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  .hero-stats div strong {
    display: block; font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 8px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff, #ff9d9d);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-stats div span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #b9c6e3; font-weight: 600; }

  /* INSIGNIA TRIPADVISOR (solo index.html): tarjeta "vidrio" oscura que se
     integra con el fondo del hero (estilo aprobado por la clienta primero
     en mobile, 2026-10-12, y replicado aqui a escritorio). En mobile queda
     en el flujo normal, debajo de los botones del hero; en escritorio
     (≥861px) flota sobre la foto, arriba a la derecha. */
  .hero-badge {
    display: block; width: 220px; border-radius: 14px; overflow: hidden;
    margin-top: 28px;
    text-decoration: none; color: inherit; cursor: pointer;
    background: rgba(6,20,48,.55);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .hero-badge:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,0,0,.4); }
  .hero-badge-ribbon {
    background: none; color: #6ee7a8;
    text-align: left; font-weight: 800; font-size: 12px; letter-spacing: .3px; padding: 12px 16px 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
  .hero-badge-body { padding: 8px 16px 16px; text-align: left; }
  .hero-badge-owl { width: 44px; height: auto; display: block; margin: 0 0 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
  .hero-badge-body p.hero-badge-text { font-size: 11px; color: #e4ebfa; line-height: 1.4; max-width: none; margin-bottom: 0; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
  .hero-badge-rating { display: block; font-size: 16px; color: #fff; margin: 2px 0 4px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
  .hero-badge-dots { display: flex; justify-content: flex-start; gap: 3px; margin: 8px 0 6px; }
  .hero-badge-dots span { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a8; display: inline-block; }
  .hero-badge-source { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #c3cfe6; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
  @media (min-width: 861px) {
    .hero-badge { position: absolute; top: 112px; right: 0; z-index: 3; margin-top: 0; }
  }

  /* PAGE-HERO: banner compacto usado en nosotros/tours/testimonios/contacto
     para mantener la misma identidad visual que el hero grande del inicio
     (mismo degradé azul, misma tipografia) pero mas bajo, ya que esas
     paginas no necesitan un hero de pantalla completa. */
  .page-hero {
    padding: 100px 0 52px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    color: #fff;
    text-align: center;
  }
  .page-hero .eyebrow { color: #ff9d9d; }
  .page-hero h1 { font-size: 34px; margin-bottom: 8px; }
  .page-hero p { color: #dbe4f5; font-size: 15px; max-width: 520px; margin: 0 auto; }
  /* PAGE-HERO CON FOTO DE FONDO (tours.html): mismo degrade azul de siempre
     pero superpuesto sobre una foto, en vez de ser un color plano. La foto
     se define inline en el HTML via background-image, aca solo se agrega el
     degrade oscuro encima para que el texto blanco se siga leyendo bien. */
  .page-hero.has-photo {
    padding: 170px 0 110px;
    min-height: 420px;
    display: flex;
    align-items: center;
    background-blend-mode: normal;
    background-image:
      linear-gradient(180deg, rgba(4,16,38,.72) 0%, rgba(6,42,102,.6) 45%, rgba(4,16,38,.82) 100%),
      var(--page-hero-photo);
    background-size: cover;
    background-position: center;
  }
  /* Filtro de categorias integrado al hero (en vez del bloque blanco de abajo):
     mismos botones-pildora, pero version "glass" para que se note sobre la foto. */
  .page-hero .filters { justify-content: center; margin: 30px 0 0; }
  .page-hero .filters button {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.35);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .page-hero .filters button.active { background: #fff; color: var(--blue-dark); border-color: #fff; }

  /* SECTION HEAD */
  .section-head { max-width: 620px; margin-bottom: 46px; }
  .section-head h2 { font-size: 34px; margin-bottom: 14px; color: var(--blue-dark); }
  .section-head p { color: var(--muted); font-size: 16px; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

  /* NOSOTROS */
  .about { background: var(--cream); }
  .about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
  .about h2 { color: var(--blue-dark); font-size: 32px; margin-bottom: 18px; }
  /* COLLAGE DE FOTOS "quienes somos": 2 fotos chicas apiladas a la izquierda
     + 1 foto alta a la derecha (mismo patron visual que una galeria de
     revista). Alto total fijo para que el collage no quede desproporcionado
     respecto al bloque de texto de al lado. */
  .about-photos {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    height: 460px;
  }
  .about-photos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius); display: block; }
  .about-photos .ph-1 { grid-column: 1; grid-row: 1; }
  .about-photos .ph-2 { grid-column: 1; grid-row: 2; }
  .about-photos .ph-3 { grid-column: 2; grid-row: 1 / span 2; }
  .about-content .btn { margin-top: 8px; }
  /* Checklist + stat de "por que viajar con nosotros": antes vivian apretados
     en la misma columna de texto de arriba; ahora es su propia seccion. */
  .why-us { background: #fff; }
  .why-us-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .why-us-card {
    background: var(--cream); border-radius: var(--radius); padding: 30px 26px;
    text-align: center;
  }
  .why-us-card .icon {
    width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
    background: #fff; color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(10,61,145,0.1);
  }
  .why-us-card h3 { font-size: 16px; color: var(--blue-dark); margin-bottom: 8px; }
  .why-us-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }
  .why-us-stat {
    margin: 46px auto 0; text-align: center; max-width: 280px;
    padding-top: 30px; border-top: 1px solid var(--line);
  }
  .why-us-stat strong { display: block; font-size: 40px; font-weight: 800; color: var(--blue); line-height: 1; }
  .why-us-stat span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

  /* TOURS */
  .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
  .filters button {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
  }
  .filters button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
  /* TARJETAS DE TOUR (catalogo en tours.html y teaser en index.html) */
  .tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
  /* Las cards de una misma fila quedan todas con la misma altura (el grid ya
     las estira parejo) y adentro van en columna para que "Mas informacion"
     quede siempre pegado abajo, sin importar si la descripcion es mas larga
     o si la card tiene el acordeon de itinerario: asi las 3 quedan alineadas
     a la misma altura en vez de quedar el boton salteado entre cards. */
  .tour-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .tour-card:hover { box-shadow: 0 20px 40px rgba(10,61,145,0.12); transform: translateY(-4px); }
  .tour-img { height: 190px; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
  .tour-tag {
    position: absolute; top: 14px; left: 14px;
    background: #a9d4f7; color: #06224d; padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  }
  .tour-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
  /* Titulo de la card: "placa" azul oscuro con esquinas superiores redondeadas,
     superpuesta sobre el borde inferior de la foto (estilo revista de viajes). */
  .tour-body h3 {
    background: var(--blue-dark); color: #fff;
    margin: -42px -22px 16px; padding: 16px 22px;
    border-radius: 18px 18px 0 0;
    font-size: 17px; position: relative; z-index: 2;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase; letter-spacing: .3px; font-weight: 800;
  }
  .tour-body p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
  .tour-meta { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
  /* "Mas informacion" de cada card: texto rojo clickeable, sin fondo de boton
     (distinto de la etiqueta celeste de categoria de arriba). */
  .tour-body .more-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--red); font-weight: 700; font-size: 14px;
    background: none; border: none; padding: 0; cursor: pointer; text-decoration: none;
    margin-top: auto;
  }
  .tour-body .more-link::after { content: "→"; transition: transform .2s ease; }
  .tour-body .more-link:hover { text-decoration: underline; }
  .tour-body .more-link:hover::after { transform: translateX(4px); }
  .tour-itinerary { margin-bottom: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
  .tour-itinerary summary {
    cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blue);
    list-style: none; display: flex; align-items: center; gap: 6px;
  }
  .tour-itinerary summary::-webkit-details-marker { display: none; }
  .tour-itinerary summary::after { content: "+"; font-size: 15px; color: var(--red); margin-left: auto; }
  .tour-itinerary[open] summary::after { content: "–"; }
  .tour-itinerary p, .tour-itinerary li { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
  .tour-itinerary ul { margin: 6px 0 0 18px; list-style: disc; }
  .tour-itinerary ul li { margin-top: 4px; }
  .tour-itinerary strong { color: var(--blue-dark); }
  .tours-more { text-align: center; margin-top: 40px; }

  /* GRID ASIMETRICO DE TOURS DESTACADOS (solo index.html, clase "featured-grid"
     ademas de "tour-grid"): la 1ra tarjeta queda grande a la izquierda y las
     otras 3 quedan chicas (horizontales) a la derecha. Solo aplica en escritorio;
     en mobile/tablet usa el grid normal de .tour-grid (ver breakpoints responsive). */
  @media (min-width: 981px) {
    .featured-grid { grid-template-columns: 1.4fr 1fr; grid-auto-rows: 1fr; gap: 24px; }

    /* Las 4 tarjetas (grande y chicas) usan el mismo estilo "portada": la
       foto ocupa TODO el fondo de la tarjeta, con un degradé azul oscuro
       abajo y el texto superpuesto encima — igual a la referencia. */
    .featured-grid .tour-card { position: relative; }
    .featured-grid .tour-card .tour-img { position: absolute; inset: 0; height: 100%; }
    /* Oscurecido general y suave de la foto (solo para que se note menos "plana",
       no es el responsable de la legibilidad del texto). */
    .featured-grid .tour-card .tour-img::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(6,42,102,.08) 0%, rgba(6,42,102,.08) 55%, rgba(6,42,102,.3) 100%);
    }
    /* El fondo oscuro detras del texto va en .tour-body, no en la foto: asi el
       degrade se ajusta siempre a la altura real del texto (1 o 2 lineas de
       titulo) y nunca queda corto ni se pisa con la foto detras. */
    .featured-grid .tour-card .tour-body {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      background: linear-gradient(180deg, rgba(6,42,102,0) 0%, rgba(6,42,102,.82) 38%, rgba(6,42,102,.97) 100%);
      padding-top: 36px;
    }
    /* En las cards de portada el titulo va directo sobre la foto (ya tiene
       degrade propio), asi que se resetea la "placa" azul de las cards normales. */
    .featured-grid .tour-card .tour-body h3 { background: none; color: #fff; margin: 0 0 8px; padding: 0; border-radius: 0; line-height: 1.25; }
    .featured-grid .tour-card .tour-body p { color: #dde5f4; }
    .featured-grid .tour-card .tour-meta { margin-bottom: 14px; }
    .featured-grid .tour-card .tour-meta span { color: #c3cfe6; }
    /* Sobre la foto oscura el link "Mas informacion" va en rojo clarito (mas legible que el rojo oscuro sobre el degrade azul). */
    .featured-grid .tour-card .tour-body .more-link { color: #ff6b6b; }

    /* Tarjeta grande (la 1ra): ocupa las 3 filas de la columna izquierda */
    .featured-grid .tour-card:first-child { grid-column: 1; grid-row: 1 / span 3; }
    .featured-grid .tour-card:first-child .tour-body { padding: 28px; padding-top: 46px; }
    .featured-grid .tour-card:first-child .tour-body h3 { font-size: 22px; }

    /* Tarjetas chicas (2da a 4ta): una por fila en la columna derecha, mismo
       estilo pero compacto (sin descripcion, texto y boton mas chicos). Un poco
       mas de alto minimo para que un titulo de 2 lineas no quede apretado. */
    .featured-grid .tour-card:nth-child(n+2) { min-height: 172px; }
    .featured-grid .tour-card:nth-child(n+2) .tour-body { padding: 16px 18px; padding-top: 34px; }
    .featured-grid .tour-card:nth-child(n+2) .tour-body h3 { font-size: 15px; margin-bottom: 6px; }
    .featured-grid .tour-card:nth-child(n+2) .tour-body p { display: none; }
    .featured-grid .tour-card:nth-child(n+2) .tour-meta { margin-bottom: 10px; font-size: 11px; }
    .featured-grid .tour-card:nth-child(n+2) .tour-body .more-link { font-size: 12px; }
  }

  /* GALERIA */
  /* GALERIA DE FOTOS (index.html): cambiar imagenes en el HTML, atributo style="background-image:url('assets/images/...')" */
  .gallery { background: var(--blue-dark); color: #fff; }
  .gallery .section-head h2, .gallery .section-head p { color: #fff; }
  .gallery .section-head p { color: #c3cfe6; }
  /* GALERIA — patron de columnas alternadas (opcion "D"): 1 foto alta,
     2 apiladas, 1 foto alta, 2 apiladas. Pensado para 6 fotos exactas;
     si se agregan/sacan fotos, revisar que el patron 1-2-1-2 se mantenga. */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 170px);
    grid-auto-flow: column;
    gap: 14px;
  }
  .gallery-grid div {
    border-radius: 10px;
    background-size: cover;
    background-position: center;
  }
  .gallery-grid div:nth-child(1) { grid-row: span 2; }
  .gallery-grid div:nth-child(4) { grid-row: span 2; }

  /* TESTIMONIOS */
  .ta-widget-wrap { max-width: 980px; margin: 0 auto 10px; min-height: 60px; }

  /* WIDGET DE TRIPADVISOR ADAPTADO A LA MARCA (testimonios.html).
     TripAdvisor inyecta su propio HTML (#CDSWIDSSP y clases .widSSP...) y
     su propia hoja de estilos (verde, 240px de ancho, letra Trip Sans).
     Aca se pisa todo eso para que se vea como el resto del sitio: panel
     azul oscuro a la izquierda (logo, nombre y ranking) y las reseñas
     como citas a la derecha. Todos los selectores empiezan con
     .ta-widget-wrap para ganarle en especificidad al CSS de TripAdvisor
     (que se carga despues). Si TripAdvisor cambia su HTML, revisar aca. */
  .ta-widget-wrap #CDSWIDSSP,
  .ta-widget-wrap #CDSWIDSSP * { font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif !important; }
  .ta-widget-wrap #CDSWIDSSP {
    width: 100% !important;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 20px 40px rgba(10,61,145,0.12);
    color: #1a1d24;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "brand reviews"
      "name  reviews"
      "rank  reviews"
      ".     links";
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  /* Fondo azul de la columna izquierda (pseudo-elemento que ocupa toda la columna) */
  .ta-widget-wrap #CDSWIDSSP .widSSPData::before {
    content: ""; grid-column: 1; grid-row: 1 / -1;
    background: linear-gradient(160deg, var(--blue-dark), var(--blue));
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData dl { padding: 0; }

  /* Logo de TripAdvisor en una pastilla blanca sobre el azul (asi el buho se ve con sus colores reales) */
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPBranding { grid-area: brand; margin: 0; padding: 32px 32px 0; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPBranding dt { width: auto; height: auto; margin: 0; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPBranding dt a {
    display: inline-flex; background: #fff; border-radius: 999px; padding: 8px 16px; text-decoration: none;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPBranding dt img,
  .ta-widget-wrap #CDSWIDSSP .widSSPData.cx_brand_refresh .widSSPBranding dt img {
    width: 118px; height: auto; background: transparent;
  }

  /* Nombre "VH Chile Tour" */
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPComponent:not(.widSSPOptional) { grid-area: name; padding: 22px 32px 0; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPSummary a { text-decoration: none; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPH18 {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 800; font-size: 26px; line-height: 1.15; color: #fff; letter-spacing: -0.01em;
  }

  /* Ranking ("N.º32 de 977 — Visitas guiadas en Santiago") */
  .ta-widget-wrap #CDSWIDSSP .widSSPData > .widSSPWrap { grid-area: rank; padding: 26px 32px 32px; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation { margin: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx { margin: 0; width: auto; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx .widSSPPopIdxData {
    font-size: 14px; color: #c3cfe6; line-height: 1.4;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx .widSSPPopIdxData .widSSPPopIdxData {
    display: block; margin-bottom: 6px;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff, #ff9d9d);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx sup { font-size: 60%; vertical-align: super; }

  /* Titulitos ("Clasificacion en Tripadvisor", "Opiniones recientes...") con el estilo .eyebrow */
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPH11,
  .ta-widget-wrap #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPH11,
  .ta-widget-wrap #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPReviews .widSSPH11 {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    color: var(--red); padding: 0 0 14px;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPInformation .widSSPH11 { color: #ff9d9d; padding-bottom: 10px; }

  /* Reseñas: cada frase es una cita con borde rojo (mismo estilo que .testi-card) */
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPComponent.widSSPOptional { grid-area: reviews; padding: 32px 36px 0; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPOneReview .widSSPBullet {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0;
  }
  .ta-widget-wrap #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPOneReview .widSSPBullet li {
    margin: 0; padding: 14px 18px;
    background: var(--cream); border-radius: 10px; border-left: 3px solid var(--red);
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPOneReview .widSSPBullet li span.widSSPQuote {
    font-size: 15px; font-style: italic; line-height: 1.45; color: #333;
  }

  /* Links "Lee opiniones" / "Escribe una opinion" como botones del sitio */
  .ta-widget-wrap #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPAll {
    grid-area: links; width: auto; margin: 0; padding: 24px 36px 32px;
    display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 2;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll .widSSPReadReview,
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll .widSSPWriteReview { float: none; padding: 0; border: none; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:link,
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:visited,
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:hover {
    display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: .3px; line-height: 1;
    text-decoration: none; border: 1.5px solid var(--blue);
    transition: transform .15s ease;
  }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll .widSSPReadReview a { background: var(--blue); color: #fff; }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll .widSSPWriteReview a { background: transparent; color: var(--blue); }
  .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:hover { transform: translateY(-2px); }
  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .testi-card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 28px;
    border-top: 3px solid var(--red);
  }
  .testi-stars { color: var(--red); font-size: 14px; margin-bottom: 14px; }
  .testi-card p { font-size: 15px; color: #333; margin-bottom: 20px; }
  .testi-user { display: flex; align-items: center; gap: 12px; }
  .testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .testi-user strong { font-size: 14px; display: block; color: var(--blue-dark); }
  .testi-user span { font-size: 12px; color: var(--muted); }
  /* RESEÑAS COMPLETAS DE TRIPADVISOR (las arma assets/main.js con la API).
     Usan la misma tarjeta .testi-card de arriba + estos detalles. */
  .ta-review { display: flex; flex-direction: column; }
  .ta-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .ta-review-owl { width: 22px; height: 22px; opacity: .9; }
  .ta-bubbles { display: flex; gap: 3px; }
  .ta-bubbles span {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid #00aa6c; background: transparent;
  }
  .ta-bubbles span.on { background: #00aa6c; }
  .ta-bubbles span.half { background: linear-gradient(90deg, #00aa6c 50%, transparent 50%); }
  .ta-review-title { font-size: 16px; color: var(--blue-dark); margin-bottom: 8px; line-height: 1.3; }
  .testi-card .ta-review-text { font-size: 14.5px; color: #333; margin-bottom: 10px; line-height: 1.6; }
  .ta-review-more { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 18px; }
  .ta-review-more::after { content: " →"; }
  .ta-review-more:hover { text-decoration: underline; }
  .ta-review .testi-user { margin-top: auto; padding-top: 6px; }
  img.testi-avatar { object-fit: cover; }
  /* Tarjeta final "305 opiniones — Ver todas en Tripadvisor" (link al perfil) */
  .ta-review-cta {
    align-items: center; justify-content: center; text-align: center; gap: 4px;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue)); color: #fff;
  }
  .ta-review-cta img { width: 48px; height: 48px; margin-bottom: 10px; }
  .ta-review-cta strong { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 40px; font-weight: 800; line-height: 1; }
  .ta-review-cta span { font-size: 14px; color: #dbe4f5; }
  .ta-review-cta em { font-style: normal; font-weight: 700; font-size: 14px; color: #ff9d9d; margin-top: 14px; }
  .ta-review-cta em::after { content: " →"; }
  .ta-review-cta:hover { box-shadow: 0 20px 40px rgba(10,61,145,0.2); transform: translateY(-4px); }

  /* Resumen arriba de las reseñas (solo testimonios.html) */
  .ta-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-bottom: 30px; padding: 24px 28px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--blue-dark), var(--blue)); color: #fff;
  }
  .ta-summary-score { display: flex; align-items: center; gap: 16px; }
  .ta-summary-score img { width: 44px; height: 44px; flex-shrink: 0; }
  .ta-summary-rating { display: flex; align-items: center; gap: 10px; }
  .ta-summary-rating strong { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 28px; font-weight: 800; line-height: 1; }
  .ta-summary .ta-bubbles span { border-color: #6ee7a8; }
  .ta-summary .ta-bubbles span.on { background: #6ee7a8; }
  .ta-summary .ta-bubbles span.half { background: linear-gradient(90deg, #6ee7a8 50%, transparent 50%); }
  .ta-summary-count { font-size: 14px; color: #dbe4f5; margin-top: 4px; }
  .ta-summary-ranking { font-size: 13px; color: #9fb2d6; }
  .ta-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .ta-summary .btn-blue { background: #fff; color: var(--blue-dark); }
  .ta-summary .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }

  .trust-badges { display: flex; gap: 30px; justify-content: center; margin-top: 60px; flex-wrap: wrap; }
  .trust-badges div { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }

  /* INFO PRE-VIAJE: 6 tarjetas con icono (2 filas x 3 columnas en escritorio).
     Reemplaza la lista numerada anterior, que se veia muy basica. */
  .preinfo { background: var(--cream); }
  .preinfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .preinfo-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
  .preinfo-card .icon {
    width: 44px; height: 44px; margin-bottom: 16px; border-radius: 10px;
    background: var(--cream); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
  }
  .preinfo-card h3 { font-size: 15px; margin-bottom: 8px; color: var(--blue-dark); }
  .preinfo-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

  /* FAQ */
  .faq-list { display: grid; gap: 12px; max-width: 760px; }
  .faq-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .faq-item summary {
    padding: 20px 22px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--blue-dark);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; font-size: 20px; color: var(--red); font-weight: 400; }
  .faq-item[open] summary::after { content: "–"; }
  .faq-item p { padding: 0 22px 20px; color: var(--muted); font-size: 14px; }

  /* CTA FINAL */
  .cta-final {
    background: linear-gradient(180deg, rgba(6,42,102,.5), rgba(6,42,102,.85)), url('images/bandera-chile.jpg') center 62%/cover no-repeat;
    color: #fff;
    text-align: center;
  }
  .cta-final h2 { font-size: 36px; margin-bottom: 16px; }
  .cta-final p { color: #dde5f4; max-width: 480px; margin: 0 auto 32px; }

  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  .contact-form { display: grid; gap: 16px; }
  .contact-form input, .contact-form select, .contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 14px;
    font-family: inherit;
  }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--blue);
  }
  .contact-info { display: grid; gap: 22px; align-content: start; }
  .contact-info .item { display: flex; gap: 14px; }
  .contact-info .icon-box {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--cream); display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
  }
  .contact-info h3 { font-size: 14px; margin-bottom: 4px; color: var(--blue-dark); }
  .contact-info p { font-size: 14px; color: var(--muted); }
  .map-placeholder {
    margin-top: 10px; height: 160px; border-radius: var(--radius);
    background: var(--cream); display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 13px; border: 1px dashed var(--line); text-align: center; padding: 10px;
  }

  /* FOOTER */
  footer { background: var(--blue-dark); color: #c3cfe6; padding: 70px 0 30px; }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
  .footer-grid h4 { color: #fff; font-size: 14px; margin-bottom: 16px; }
  .footer-grid ul li { margin-bottom: 10px; font-size: 14px; }
  .footer-grid ul li a:hover { color: #fff; }
  .footer-logo { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 14px; }
  .footer-logo span { color: #ff8f8f; }
  /* INSIGNIA TRIPADVISOR horizontal del footer: icono + texto en linea, alineada con el logo. */
  .footer-ta-badge {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: #fff;
  }
  .footer-ta-badge img { flex-shrink: 0; }
  .footer-ta-text { display: flex; flex-direction: column; line-height: 1.3; }
  .footer-ta-text strong { font-size: 14px; font-weight: 800; color: #fff; }
  .footer-ta-text span { font-size: 12px; color: #9fb2d6; }
  .footer-social { display: flex; gap: 12px; margin-top: 18px; }
  .footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2c4a80; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .footer-bottom {
    border-top: 1px solid #223e6e;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8ea0c4;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* BOTON FLOTANTE DE WHATSAPP (esquina inferior) y barra fija mobile: el link real se edita en el HTML, no aca */
  .whatsapp-float {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(37,211,102,0.4);
    z-index: 70;
  }

  /* MOBILE STICKY CTA BAR */
  .mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 65;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  }
  .mobile-cta-bar .btn { width: 100%; }

  /* ============================================================
     ===== RESPONSIVE / MOBILE =====
     El sitio es 100% adaptable a celular gracias a estos 3 bloques.
     Si algo se ve mal en una pantalla chica, el ajuste va aca:
       - 980px: tablets (pasa de 3 a 2 columnas en tours/testimonios)
       - 860px: mobile (oculta menu desktop, muestra el burger y la
         barra fija de WhatsApp abajo)
       - 520px: celulares chicos (ajustes finos de tamaño de letra)
     ============================================================ */
  @media (max-width: 980px) {
    .tour-grid { grid-template-columns: repeat(2, 1fr); }
    .preinfo-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { gap: 40px; }
  }

  @media (max-width: 860px) {
    section { padding: 60px 0; }
    .wrap { padding: 0 20px; }

    /* Barra superior: se oculta en mobile para no quitarle espacio al header */
    .topbar { display: none; }

    /* En mobile se oculta el menu de escritorio y aparece el boton burger (ver assets/main.js) */
    nav.desktop-nav { display: none; }
    .header-right .social-mini,
    .header-right .header-cta { display: none; }
    .header-right .lang-switch { gap: 6px; margin-right: 4px; }
    .header-right .lang-switch .lang-flag { width: 20px; height: 14px; }
    .burger { display: flex; }

    .hero { min-height: 0; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 15px; }
    /* Orden visual en mobile: titulo, numeros (13+/8+) y recien despues los
       botones, mas chicos y en fila. El orden en el HTML no cambia (en
       escritorio los botones siguen antes de los numeros); esto solo
       reacomoda visualmente con flex + order. */
    .hero-content { display: flex; flex-direction: column; }
    .hero-stats { order: 2; }
    .hero-actions {
      order: 3;
      flex-direction: row;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: 10px;
      margin-top: 28px;
    }
    .hero-actions .btn { width: auto; flex: 1 1 0; padding: 11px 14px; font-size: 13px; }
    /* En mobile el boton rojo usa el texto corto "Ver tours" en vez de
       "Ver tours disponibles": con el texto largo + el boton "Contactar"
       al lado, el texto se cortaba en 2 lineas y quedaba con margenes feos. */
    .btn-text-full { display: none; }
    .btn-text-short { display: inline; }

    /* El degrade de .hero-slideshow-overlay esta pensado para desktop (texto
       solo en la mitad izquierda, se aclara hacia la derecha). En mobile el
       texto ocupa todo el ancho y cae sobre zonas claras de la foto (cielo,
       arena, rocas), asi que aca se reemplaza por un oscurecido parejo de
       arriba a abajo para que todo el contenido se siga leyendo bien sin
       importar que foto este activa en el slideshow. */
    .hero-slideshow-overlay {
      background: linear-gradient(180deg,
        rgba(4,16,38,.78) 0%,
        rgba(6,42,102,.62) 30%,
        rgba(6,42,102,.68) 65%,
        rgba(4,16,38,.85) 100%);
    }

    /* En mobile se arman 2 columnas en grid (sin lineas divisorias, que quedan
       cortadas feo al hacer wrap en flex) con mas espacio entre filas. */
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 40px; }
    .hero-stats div { padding-right: 0; margin-right: 0; border-right: none; }
    .hero-stats div strong { font-size: 24px; }

    /* Insignia TripAdvisor en mobile: ocupa todo el ancho (estilo vidrio
       base ya aplicado en la regla general de .hero-badge). */
    .hero-badge { width: 100%; box-shadow: none; }

    .section-head h2 { font-size: 26px; }

    .about-grid { grid-template-columns: 1fr; }
    .about-photos { order: -1; height: 320px; grid-template-columns: 1fr 1.1fr; }
    .why-us-grid { grid-template-columns: 1fr; gap: 16px; }

    .tour-grid { grid-template-columns: 1fr; }
    .preinfo-grid { grid-template-columns: 1fr 1fr; }
    .testi-grid { grid-template-columns: 1fr; }

    /* Widget TripAdvisor en mobile: una sola columna; el panel azul queda
       arriba (logo, nombre, ranking) y las reseñas + botones debajo. */
    .ta-widget-wrap #CDSWIDSSP .widSSPData {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: "brand" "name" "rank" "reviews" "links";
    }
    .ta-widget-wrap #CDSWIDSSP .widSSPData::before { grid-row: 1 / 4; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPBranding { padding: 26px 22px 0; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPComponent:not(.widSSPOptional) { padding: 18px 22px 0; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData > .widSSPWrap { padding: 20px 22px 26px; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPH18 { font-size: 22px; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPComponent.widSSPOptional { padding: 26px 22px 0; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPOneReview .widSSPBullet { grid-template-columns: 1fr; gap: 10px; }
    .ta-widget-wrap #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPAll { padding: 20px 22px 26px; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll ul { flex: 1 1 100%; }
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:link,
    .ta-widget-wrap #CDSWIDSSP .widSSPData .widSSPAll a:visited { width: 100%; justify-content: center; }

    /* Mobile: se simplifica a 2 columnas parejas (el patron alto/apilado
       solo se usa en desktop, en pantallas chicas queda mas prolijo parejo). */
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: none;
      grid-auto-rows: 150px;
      grid-auto-flow: row;
    }
    .gallery-grid div:nth-child(1), .gallery-grid div:nth-child(4) { grid-row: span 1; }

    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .cta-final h2 { font-size: 26px; }

    body { padding-bottom: 74px; }
    .mobile-cta-bar { display: block; }
    /* La burbuja flotante es para escritorio; en mobile ya existe la barra
       fija de arriba, asi que mostrar las dos a la vez es redundante y la
       burbuja terminaba tapando texto al hacer scroll (insignia, titulos). */
    .whatsapp-float { display: none; }
  }

  @media (max-width: 520px) {
    .hero h1 { font-size: 27px; }
    .preinfo-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .filters { gap: 8px; }
    .filters button { padding: 8px 14px; font-size: 12px; }
  }

/* Multi-page nav active state */
nav.desktop-nav a.active { color: #ff9d9d; }
.mobile-nav ul li a.active { color: var(--red); }
section.about-teaser { padding: 70px 0; background: #f7f9fc; }
.about-teaser .section-head p { color: var(--muted); }
.section-cta-link {
  display: inline-block; margin-top: 22px; color: var(--blue);
  font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.section-cta-link:hover { border-color: var(--blue); }
.about-teaser .section-cta-link { margin-top: 20px; }

/* Preinfo as list (real content: 6 points) */
.preinfo-sub { font-size: 17px; color: var(--blue-dark); font-weight: 600; margin-bottom: 14px; }
.preinfo-intro { color: var(--muted); font-size: 15px; margin-bottom: 30px; max-width: 700px; }
.preinfo-list { display: grid; gap: 18px; max-width: 800px; }
.preinfo-item { display: flex; gap: 16px; align-items: flex-start; }
.preinfo-item .num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.preinfo-item p { font-size: 15px; color: #333; }
.preinfo-item p strong { color: var(--blue-dark); }
.preinfo-closing {
  margin-top: 34px; padding: 18px 22px; background: var(--cream); border-left: 3px solid var(--red);
  border-radius: 8px; font-size: 15px; color: var(--blue-dark); font-weight: 600; max-width: 800px;
}

/* About real content */
.about-lead { font-size: 15px; color: #333; margin-bottom: 16px; line-height: 1.7; }
.about-closing { font-style: italic; color: var(--blue-dark); font-weight: 600; margin-top: 16px; }

/* ============================================================
   ===== ANIMACIONES =====
   Para agregar una animacion de "aparecer al hacer scroll" a un
   elemento nuevo, solo agregale la clase "reveal" en el HTML
   (assets/main.js se encarga de activarla cuando el elemento
   entra en pantalla). Si queres que varios elementos aparezcan
   uno despues del otro (efecto cascada), agregales ademas
   data-reveal-group="nombre-del-grupo" con el mismo nombre.
   Todo esto se desactiva automaticamente si la persona tiene
   activada la opcion "reducir movimiento" en su sistema.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Entrada del hero principal (index.html) al cargar la pagina */
  .hero-content { animation: heroIn .8s cubic-bezier(.16,.8,.3,1) both; }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Logo: pequeño "pop" al cargar */
  .logo img { animation: logoIn .6s ease both; }
  @keyframes logoIn {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Insignia de Tripadvisor: entra con una pequeña caida + fade */
  .hero-badge { animation: heroBadgeIn .7s .3s cubic-bezier(.16,.8,.3,1) both; }
  @keyframes heroBadgeIn {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}

/* Micro-interacciones (siempre activas, son sutiles y no marean) */
.tour-card, .testi-card, .gallery-grid div, .faq-item, .contact-info .item {
  transition: box-shadow .25s ease, transform .25s ease;
}
.gallery-grid div { overflow: hidden; }
.gallery-grid div { transform: scale(1); }
.gallery-grid div:hover { transform: scale(1.035); box-shadow: inset 0 0 0 999px rgba(10,61,145,0.08); }
.contact-info .item:hover { transform: translateX(4px); }
.contact-info .item .icon-box { transition: transform .25s ease; }
.contact-info .item:hover .icon-box { transform: scale(1.12) rotate(-4deg); }
.social-mini a, .footer-social a { transition: transform .2s ease, opacity .2s ease; }
.social-mini a:hover, .footer-social a:hover { transform: translateY(-2px); opacity: .85; }
.whatsapp-float { transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform: scale(1.08); }
.burger span { transition: transform .25s ease, opacity .25s ease; }
nav.desktop-nav a { position: relative; transition: color .2s ease; }
nav.desktop-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: #ff9d9d; transition: right .25s ease;
}
nav.desktop-nav a:hover::after, nav.desktop-nav a.active::after { right: 0; }