/* ============================================================
     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;
    --turquoise: #03cea4;
    --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; }
  .btn-primary { background: #25D366; color: #fff; }
  /* Boton rojo generico (no-WhatsApp): para CTAs como "Ver todos los
     tours", separado del verde que se reserva solo para botones de
     WhatsApp — pedido de la clienta 2026-10-17. */
  .btn-red { background: var(--red); color: #fff; }
  .btn-red:hover { background: var(--red-dark); }
  .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: 32px; font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; 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-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
    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%; }

  /* SUBMENU DE CATEGORIAS bajo "Tours" en el menu mobile: desplegable (oculto
     hasta tocar la flecha) y las categorias van una debajo de otra, sin
     pildoras ni fondo, separadas por una linea fina — pedido de la clienta
     2026-10-17. Selectores mas especificos que ".mobile-nav ul" /
     ".mobile-nav ul li a" (los del menu principal) para que no les gane la
     cascada a este submenu. */
  .mobile-nav li.has-subnav { position: relative; }
  .mobile-nav .subnav-toggle {
    position: absolute; top: 2px; right: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--blue-dark);
  }
  .mobile-nav .subnav-toggle svg { transition: transform .2s ease; }
  .mobile-nav li.has-subnav.is-open .subnav-toggle svg { transform: rotate(180deg); }
  .mobile-nav .mobile-subnav {
    display: none;
    flex-direction: column;
    padding: 2px 6px 10px 4px;
  }
  .mobile-nav li.has-subnav.is-open .mobile-subnav { display: flex; }
  .mobile-nav .mobile-subnav li {
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav .mobile-subnav li:last-child { border-bottom: none; }
  .mobile-nav .mobile-subnav li a {
    display: block;
    font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; font-weight: 600; color: var(--muted);
    padding: 11px 4px; border-bottom: none;
  }
  .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.
       Aclarado (2026-10-13, pedido de la clienta) para que los paisajes
       se vean con sus colores reales — el texto-shadow de abajo compensa
       la legibilidad que se pierde al bajar la opacidad. */
    background:
      linear-gradient(90deg, rgba(6,42,102,.74) 0%, rgba(6,42,102,.48) 32%, rgba(6,42,102,.16) 62%, rgba(6,42,102,0) 85%),
      linear-gradient(0deg, rgba(6,42,102,.38) 0%, rgba(6,42,102,0) 35%);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
  }
  .hero-content { max-width: 620px; }
  .hero .eyebrow { color: var(--turquoise); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
  .hero h1 { font-size: 52px; line-height: 1.08; margin-bottom: 20px; text-shadow: 0 3px 16px rgba(0,0,0,.4); }
  .hero p { font-size: 17px; color: #dde5f4; margin-bottom: 34px; max-width: 480px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* HERO CENTRADO: estilo tipo banner de viaje (referencia de la clienta,
     2026-10-17) — todo el contenido del hero centrado en vez de alineado a
     la izquierda, para que la foto y los tours sean los protagonistas y el
     texto quede como una franja angosta sobre el centro de la imagen. */
  .hero .wrap { display: flex; flex-direction: column; align-items: center; }
  .hero-content.center { max-width: 860px; text-align: center; margin: 0 auto; }
  .hero-content.center .eyebrow { justify-content: center; }
  .hero-content.center h1 { text-wrap: balance; }
  .hero-actions.center { justify-content: center; }

  /* FLECHAS DEL HERO: mismo circulo blanco que el carrusel de cada tour
     (.tour-slide-btn), pero un poco mas grandes para que se vean bien en un
     banner de pantalla completa. */
  .hero-slide-btn { width: 46px; height: 46px; }
  .hero-slide-btn.prev { left: 18px; }
  .hero-slide-btn.next { right: 18px; }
  .hero-slide-dots.tour-slide-dots { bottom: 22px; }

  /* HEADER SUPERPUESTO SOBRE LA FOTO (solo inicio): el menu queda flotando
     arriba de la imagen en vez de en una franja azul solida, como en la
     referencia que paso la clienta. Al hacer scroll pasa a fondo solido
     (clase .scrolled, via assets/main.js) para que se siga leyendo bien
     sobre el resto de la pagina. En las demas paginas el header sigue
     igual que antes (franja azul fija). */
  body.is-home header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 85;
    background: transparent; border-bottom: none;
    transition: background .25s ease, border-color .25s ease;
  }
  body.is-home header.scrolled {
    position: fixed;
    background: var(--blue-dark);
    border-bottom: 1px solid #0a2e5c;
  }

  /* 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, .page-hero h2 { font-size: 34px; margin-bottom: 8px; color: #fff; }
  .page-hero p { color: #dbe4f5; font-size: 15px; max-width: 520px; margin: 0 auto; }
  /* has-photo usa foto de fondo: aca el texto necesita mas sombra porque el
     degrade azul encima de la foto es mas suave (ver .page-hero.has-photo). */
  .page-hero.has-photo .eyebrow,
  .page-hero.has-photo h1,
  .page-hero.has-photo h2,
  .page-hero.has-photo p { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  /* 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;
    /* Aclarado (2026-10-13, pedido de la clienta) para que la foto se note
       mas — el text-shadow de arriba compensa la legibilidad. */
    background-image:
      linear-gradient(180deg, rgba(4,16,38,.5) 0%, rgba(6,42,102,.38) 45%, rgba(4,16,38,.58) 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. Antes eran "glass" (fondo transparente) y se
     perdian sobre la foto — ahora van solidos en blanco con sombra para que
     siempre se destaquen, sea cual sea la foto de fondo (pedido de la
     clienta 2026-10-17, "el filtro tiene que ser mas visible"). */
  .page-hero .filters { justify-content: center; margin: 30px 0 0; }
  .page-hero .filters button {
    background: #fff;
    border-color: #fff;
    color: var(--blue-dark);
    box-shadow: 0 6px 16px rgba(4,16,38,.25);
  }
  .page-hero .filters button.active { background: var(--red); color: #fff; border-color: var(--red); }

  /* 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; }
  /* Variante de una sola foto (ej. foto de los dueños en "Quienes somos"):
     ocupa todo el bloque en vez del collage de 3. */
  .about-photos.single-photo { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .about-photos.single-photo .ph-main { grid-column: 1; grid-row: 1; object-position: center 35%; }
  .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; }
  /* Etiqueta de categoria sobre la foto: radio moderado (no pildora 999px)
     y max-width para que, cuando el texto es largo ("COSTA · MONTAÑA") y
     pasa a 2 lineas, se vea como un chip prolijo en vez de una forma rara. */
  .tour-tag {
    position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px);
    background: #a9d4f7; color: #06224d; padding: 6px 13px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    line-height: 1.45; text-align: center;
  }
  .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;
  }
  /* 3 lineas maximo (antes el texto podia ser muy largo y la card quedaba
     pesada; ahora el detalle completo vive en tour.html). */
  .tour-body p { font-size: 14px; color: var(--muted); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .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); }

  /* CARDS DE TOUR — REDISEÑO MINIMAL/REDONDEADO (catalogo de tours.html y
     "Tours relacionados" de tour.html; el teaser de inicio sigue aparte con
     .featured-grid, por eso :not(.featured-grid) aca). Pedido de la clienta
     2026-10-17, inspirado en una referencia de sitio de viajes: foto
     protagonista con esquinas bien redondeadas, sin placa solida ni borde,
     sin la descripcion (ya vive en la ficha de cada tour). El padding del
     cuerpo es generoso a proposito para que el titulo y el link nunca
     toquen el borde redondeado de la card ni se corten. */
  .tour-grid:not(.featured-grid) .tour-card {
    border: none;
    border-radius: 26px;
    box-shadow: 0 14px 34px rgba(6,42,102,.14);
  }
  .tour-grid:not(.featured-grid) .tour-card:hover {
    box-shadow: 0 20px 44px rgba(6,42,102,.2);
  }
  .tour-grid:not(.featured-grid) .tour-img { height: 230px; border-radius: 26px; }
  .tour-grid:not(.featured-grid) .tour-tag {
    background: rgba(255,255,255,.94); color: var(--blue-dark); border-radius: 999px;
  }
  .tour-grid:not(.featured-grid) .tour-body { padding: 18px 20px 22px; }
  .tour-grid:not(.featured-grid) .tour-body h3 {
    background: none; color: var(--blue-dark);
    margin: 0 0 8px; padding: 0;
    border-radius: 0; font-size: 17px; font-weight: 800;
    text-transform: none; letter-spacing: 0;
  }
  .tour-grid:not(.featured-grid) .tour-body p { display: none; }
  .tour-grid:not(.featured-grid) .tour-meta { margin-bottom: 12px; color: var(--muted); font-size: 12.5px; }
  .tour-grid:not(.featured-grid) .tour-meta span { background: none; padding: 0; }
  .tour-grid:not(.featured-grid) .tour-body .more-link { color: var(--red); font-weight: 700; margin-top: 0; }

  /* HERO CON FOTO + CATALOGO SUPERPUESTO (solo tours.html, via la clase
     .tours-catalog-hero — asi no afecta el hero con foto de nosotros.html
     que comparte .page-hero.has-photo). La primera fila de cards "flota"
     sobre el borde inferior de la foto en vez de que la seccion blanca
     empiece de golpe. Mas alto que el .page-hero.has-photo normal porque
     tiene que dejar lugar para el titulo + los filtros + el solape. */
  .page-hero.has-photo.tours-catalog-hero { padding: 150px 0 230px; min-height: 0; }
  .tours-catalog-hero + #tours { margin-top: -170px; position: relative; z-index: 4; }
  /* Los ajustes para mobile (tipografia y padding mas chicos) viven en el
     bloque RESPONSIVE / MOBILE mas abajo (@media max-width:860px y 520px),
     junto con el resto de los ajustes de .page-hero, para no repetir la
     misma media query dos veces en el archivo. */

  /* MISMA FRANJA FOTO + SOLAPE, PERO PARA LA SECCION "TOURS Y DESTINOS" DE
     INICIO (home-tours-hero) — mas baja que la de tours.html porque el
     home ya tiene su propio banner grande arriba, esta es solo una franja
     chica para el titulo de la seccion. "Replica el diseño de la seccion
     tours, mantén esa misma línea" — pedido de la clienta 2026-10-17. */
      .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; }

  /* PAGINA DE DETALLE DE TOUR (tour.html?t=slug) — armada por JS a partir
     de assets/tours-data.js. Mobile-first: en celular la foto va arriba y
     la info abajo en una sola columna; desde 860px se parte en 2 columnas. */
  .tour-breadcrumb { background: var(--cream); border-bottom: 1px solid var(--line); }
  .tour-breadcrumb .wrap { display: flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 13px; color: var(--muted); }
  .tour-breadcrumb a { color: var(--blue); font-weight: 700; }
  .tour-breadcrumb a:hover { text-decoration: underline; }
  .tour-breadcrumb span[aria-hidden] { color: var(--line); }
  #breadcrumbCurrent { color: var(--blue-dark); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .tour-detail { padding: 44px 0 70px; }
  .tour-detail-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }

  /* Mas vertical que antes (era 4/3, formato horizontal): la mayoria de las
     fotos que carga la clienta son verticales (sacadas con el celular), y
     con un contenedor horizontal el "cover" les recortaba mucho arriba y
     abajo. Pedido de la clienta 2026-10-17. */
  .tour-slideshow {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: var(--cream); aspect-ratio: 3 / 4;
  }
  .tour-slideshow-track { position: relative; width: 100%; height: 100%; }
  .tour-slide {
    position: absolute; inset: 0; opacity: 0;
    background-size: cover; background-position: center;
    transition: opacity .45s ease;
  }
  .tour-slide.is-active { opacity: 1; }
  .tour-slide-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.92); color: var(--blue-dark);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3; box-shadow: 0 6px 16px rgba(6,42,102,.18);
    transition: background .2s ease, transform .2s ease;
  }
  .tour-slide-btn:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
  .tour-slide-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .tour-slide-btn.prev { left: 12px; }
  .tour-slide-btn.next { right: 12px; }
  .tour-slide-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
  .tour-slide-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.55); transition: background .2s ease, transform .2s ease; }
  .tour-slide-dot:hover { background: rgba(255,255,255,.8); }
  .tour-slide-dot.is-active { background: #fff; transform: scale(1.3); }
  .tour-slide-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .tour-detail-info { display: flex; flex-direction: column; gap: 4px; }
  .tour-detail-tag {
    display: inline-flex; align-self: flex-start;
    background: #a9d4f7; color: #06224d; padding: 5px 14px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 10px;
  }
  .tour-detail-info h1 { font-size: 26px; color: var(--blue-dark); line-height: 1.2; margin-bottom: 8px; }
  .tour-detail-duration { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 14px; }
  .tour-detail-desc { font-size: 15.5px; color: #3a3f4a; line-height: 1.65; margin-bottom: 8px; white-space: pre-line; }

  /* "LO ESENCIAL": franja de datos rapidos debajo de la foto/titulo, estilo
     "at a glance" (referencia: paginas de tour de agencias como Turistik).
     Mobile-first: lista de 1 columna en celular (icono + texto en la misma
     fila, un dato debajo del otro — la grilla de 2 columnas quedaba
     desordenada y el texto se cortaba feo, pedido de la clienta 2026-10-14),
     fila completa de 5 desde 740px. */
  .tour-essentials {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--cream); border-radius: var(--radius);
    padding: 20px; margin: 30px 0;
  }
  .tour-ess-item { display: flex; align-items: center; gap: 12px; }
  .tour-ess-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(6,42,102,.1);
  }
  .tour-ess-label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
  .tour-ess-value { display: block; font-size: 13.5px; color: var(--blue-dark); font-weight: 700; line-height: 1.3; margin-top: 2px; }

  /* CONTENIDO EN DETALLE: itinerario (timeline) + tarjetas laterales
     (no incluye / importante / para tener en cuenta). 1 columna en mobile,
     2 columnas desde 860px (ver media query). */
  .tour-detail-content { padding-top: 10px; padding-bottom: 20px; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }

  .tour-detail-subtitle { margin: 10px 0 2px; }
  .tour-detail-subtitle[hidden] { display: none; }
  .tour-itin-block h2 { font-size: 20px; color: var(--blue-dark); margin-bottom: 22px; }

  .tour-timeline { list-style: none; position: relative; padding-left: 26px; }
  .tour-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
  .tour-timeline-step { position: relative; padding-bottom: 20px; }
  .tour-timeline-step:last-child { padding-bottom: 0; }
  .tour-timeline-step::before {
    content: ""; position: absolute; left: -26px; top: 4px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--turquoise);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
  }
  .tour-timeline-step p { font-size: 14.5px; color: #3a3f4a; line-height: 1.6; white-space: pre-line; }

  /* "Para tener en cuenta" (tour.itinerary.extra): tarjeta destacada debajo
     del timeline, en la misma columna — llena el espacio que quedaba vacio
     ahi cuando el recorrido tiene pocos pasos, y la columna lateral
     (No incluye / Importante) queda mas corta y pareja. */
  .tour-itin-extra {
    margin-top: 24px; text-align: left;
    background: #eefaf3; border: 1px solid #cdeedd; border-radius: var(--radius);
    padding: 18px 20px;
  }
  .tour-itin-extra[hidden] { display: none; }
  .tour-itin-extra h3 { font-size: 14px; color: var(--blue-dark); margin-bottom: 6px; }
  .tour-itin-extra p { font-size: 13.5px; color: #3a3f4a; line-height: 1.6; white-space: pre-line; margin: 0; }

  .tour-itin-side { display: flex; flex-direction: column; gap: 14px; }
  /* El atributo "hidden" por si solo alcanza en elementos sin "display" propio,
     pero ".tour-itin-side" define display:flex (misma especificidad que la regla
     [hidden] del navegador) y gana por venir despues: sin esto, quedaba "oculto"
     pero seguia ocupando su columna en el grid, vacio. */
  .tour-itin-side[hidden], .tour-itin-block[hidden] { display: none; }
  .tour-side-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
  .tour-side-card h3 { font-size: 14px; color: var(--blue-dark); margin-bottom: 6px; }
  .tour-side-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; white-space: pre-line; }
  .tour-side-noincluye { border-left: 3px solid var(--red); }
  .tour-side-importante { border-left: 3px solid var(--blue); }
  .tour-side-importante p { font-style: italic; }

  /* NOTA bajo el timeline y las tarjetas laterales (ej. "Almuerzo" en
     Algarrobo): mas liviana que una tarjeta de .tour-itin-side. En escritorio
     ocupa el ancho completo del bloque (las 2 columnas), como una franja
     horizontal — ver regla que le da grid-column:1/-1 en el media query de
     860px mas abajo. */
  .tour-itin-note {
    margin-top: 20px; padding: 12px 16px; background: var(--cream);
    border-radius: var(--radius); border-left: 3px solid #e8a33d;
    display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px;
  }
  .tour-itin-note[hidden] { display: none; }
  .tour-itin-note h4 { font-size: 13px; color: var(--blue-dark); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; flex: 0 0 auto; }
  .tour-itin-note p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }

  /* ELIGE TU EXPERIENCIA: alternativas de visita de un mismo tour (ej. Sibaris /
     Founders en Viña Undurraga), cuando el tour las define (tour.experiencias).
     Oculta por completo si el tour no las tiene — ver renderExperiencias en
     tour-detail.js. Misma tarjeta "cream" que el resto del sitio. */
  .tour-experiencias-wrap { padding-bottom: 36px; }
  .tour-experiencias-wrap[hidden] { display: none; }
  .tour-experiencias-wrap h2 { font-size: 20px; color: var(--red); margin-bottom: 8px; text-align: center; }
  .tour-experiencias-intro { font-size: 14px; color: var(--muted); margin-bottom: 28px; text-align: center; }
  .tour-experiencias-intro[hidden] { display: none; }
  .tour-experiencias { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .experiencia-card {
    background: var(--cream); border-radius: var(--radius);
    padding: 22px 24px; border-top: 3px solid var(--red);
  }
  .experiencia-card h3 {
    font-size: 15px; color: var(--blue-dark); font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
  }
  .experiencia-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

  /* COMPLEMENTA TU EXPERIENCIA: lugares con los que se puede combinar la
     visita (ej. Viña Emiliana / Casas del Bosque / Casa Museo Isla Negra en
     Algarrobo), cada uno con su propia foto — distinto de "Elige tu
     experiencia" (alternativas excluyentes dentro del mismo tour): aca son
     adicionales opcionales, por eso se muestran como tarjetas con imagen en
     vez de texto solo. Vuelto a este diseño (foto arriba + texto abajo, en
     grilla) despues de probar un esquema de lista con borde — la clienta
     confirmo 2026-10-17 que esta version (la original) era la que queria.
     Oculta por completo si el tour no define tour.complementos — ver
     renderComplementos en tour-detail.js. */
  .tour-complementos-wrap { padding-bottom: 36px; }
  .tour-complementos-wrap[hidden] { display: none; }
  .tour-complementos-wrap h2 { font-size: 20px; color: var(--red); margin-bottom: 8px; text-align: center; }
  .tour-complementos-intro { font-size: 14px; color: var(--muted); margin-bottom: 28px; text-align: center; }
  .tour-complementos-intro[hidden] { display: none; }
  .tour-complementos-outro { font-size: 13.5px; color: var(--muted); font-style: italic; margin-top: 18px; text-align: center; }
  .tour-complementos-outro[hidden] { display: none; }
  .tour-complementos { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .complemento-card {
    background: var(--cream); border-radius: var(--radius); overflow: hidden;
  }
  .complemento-card-img {
    height: 160px; background-size: cover; background-position: center;
  }
  .complemento-card-img-empty {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  }
  .complemento-card-body { padding: 16px 20px 20px; }
  .complemento-card-body h3 {
    font-size: 15px; color: var(--blue-dark); font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
  }
  .complemento-card-body p { font-size: 14px; color: var(--muted); line-height: 1.6; }
  .complemento-card-body p:empty { display: none; }

  .tour-itin-generic { padding-top: 10px; padding-bottom: 20px; }
  .tour-itin-generic p { font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 640px; }

  /* TOURS RELACIONADOS (al final de cada ficha de tour): reusa .tour-grid / .tour-card. */
  .tour-related { background: var(--cream); padding: 50px 0 60px; }
  .tour-related .section-head { margin-bottom: 30px; }
  .tour-related .tour-grid { grid-template-columns: repeat(3, 1fr); }

  .tour-cta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 22px; margin-top: 24px;
  }
  .tour-cta-wa { width: auto; }
  .tour-back-link {
    display: inline-flex; align-self: center;
    font-size: 14px; font-weight: 700; color: var(--blue);
    transition: transform .2s ease;
  }
  .tour-back-link:hover { text-decoration: underline; transform: translateX(-3px); }
  .tour-back-link:focus-visible, .tour-breadcrumb a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  .tour-not-found { padding: 110px 0; text-align: center; }
  .tour-not-found h1 { font-size: 26px; color: var(--blue-dark); margin-bottom: 12px; }
  .tour-not-found p { color: var(--muted); font-size: 15px; margin-bottom: 24px; max-width: 460px; margin-left: auto; margin-right: auto; }

  @media (min-width: 740px) {
    .tour-essentials { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; row-gap: 18px; column-gap: 28px; align-items: center; }
    .tour-ess-item { align-items: center; flex: 0 1 auto; }
    .tour-ess-item:first-child { flex-basis: 270px; max-width: 270px; }
  }

  @media (min-width: 860px) {
    .tour-detail { padding: 56px 0 90px; }
    .tour-detail-grid { grid-template-columns: 1.05fr 1fr; gap: 48px; }
    /* Un poco menos alta que en mobile (4/5 dejaba demasiado espacio vacio
       debajo del texto, que en desktop suele ser mas corto que la foto) —
       sigue siendo mas vertical que el 5/4 original. Pedido de la clienta
       2026-10-17. */
    .tour-slideshow { aspect-ratio: 1 / 1; }
    /* Antes esto centraba el texto verticalmente dentro del alto de la foto
       (justify-content:center), pero eso hacia que el bloque arrancara en
       una linea distinta segun lo larga que fuera la descripcion de cada
       tour (en unos arrancaba mas arriba, en otros mas abajo) — se veia
       desparejo al pasar de un tour a otro. Ahora arranca siempre pegado
       arriba, a la misma altura que la foto, en todos los tours por igual
       (pedido de la clienta 2026-10-17). */
    .tour-detail-info { align-self: stretch; justify-content: flex-start; }
    .tour-detail-info h1 { font-size: 30px; }
    /* "width:auto" no alcanzaba: .tour-detail-info es un flex column y por
       defecto estira (align-items:stretch) a sus hijos al ancho completo,
       asi que el boton quedaba enorme. align-self lo saca de ese estirado
       y lo deja del ancho de su propio texto. */
    .tour-cta-wa { width: auto; align-self: flex-start; }
    /* row-gap mas chico que el column-gap: el espacio entre el timeline/
       tarjetas y la nota de abajo (ej. "Almuerzo") no necesita ser tan grande
       como el espacio horizontal entre las 2 columnas — pedido de la clienta
       2026-10-17, para que no quede un hueco vacio antes de la nota. */
    .tour-detail-content { grid-template-columns: 1.3fr 1fr; column-gap: 56px; row-gap: 20px; }
    .tour-experiencias { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .tour-complementos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    /* Nota (ej. "Almuerzo") a todo lo ancho del bloque de 2 columnas, como
       franja horizontal compacta debajo del timeline y de las tarjetas
       laterales (pedido de la clienta 2026-10-17: no quería "No incluye"/
       "Importante" en columnas una al lado de otra, y la nota mas compacta
       pero sin dejar huecos vacios en la estructura). */
    .tour-itin-note { grid-column: 1 / -1; margin-top: 0; }
  }

  @media (max-width: 860px) {
    .tour-related .tour-grid { grid-template-columns: 1fr; }
  }
  @media (min-width: 861px) and (max-width: 980px) {
    .tour-related .tour-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* TOURS DESTACADOS (solo index.html, clase "featured-grid" ademas de
     "tour-grid"), 2026-10-13: se saca el degrade azul sobre la foto que
     tenia antes esta seccion (la clienta ya no lo quiere — dice que "apaga"
     las fotos) y se usa la misma tarjeta limpia de tours.html/tour.html
     (foto arriba a color real, cuerpo blanco abajo). La foto pasa a ser la
     protagonista: la tarjeta ya no repite descripcion ni duracion (eso ya
     vive en la pagina propia de cada tour), solo foto + categoria + titulo,
     asi que la foto puede ocupar mucho mas alto. Toda la tarjeta es un link.
     6 tarjetas (antes 4) en 3 columnas x 2 filas parejas en escritorio —
     pedido de la clienta 2026-10-14, queda mas lindo que 4 en una sola fila.
     En mobile es una grilla fija de 2 columnas (ver breakpoint 860px). */
  .tour-grid.featured-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  /* Mismo estilo minimal/redondeado que el catalogo de tours.html (ver
     ".tour-grid:not(.featured-grid)" mas arriba) — sin placa solida, con
     esquinas grandes y sombra en vez de borde. Pedido de la clienta
     2026-10-17, "replica el diseño de la sección tours, mantén esa misma
     línea". */
  .featured-grid .tour-card {
    display: block;
    border: none;
    border-radius: 26px;
    box-shadow: 0 14px 34px rgba(6,42,102,.14);
  }
  .featured-grid .tour-card:hover { box-shadow: 0 20px 44px rgba(6,42,102,.2); }
  .featured-grid .tour-tag { background: rgba(255,255,255,.94); color: var(--blue-dark); border-radius: 999px; }
  /* Pequeño zoom suave de la foto al pasar el mouse — detalle "pro" que
     distingue esta seccion del resto sin agregar ningun filtro de color.
     El zoom queda recortado por el overflow:hidden que ya tiene .tour-card.
     Alto reducido de 400px a 260px (2026-10-17, pedido de la clienta): con
     3 columnas la tarjeta quedaba muy alargada/vertical; asi la foto queda
     mas horizontal sin perder protagonismo. */
  .featured-grid .tour-img { height: 260px; border-radius: 26px; transition: transform .5s ease; }
  .featured-grid .tour-card:hover .tour-img { transform: scale(1.06); }
  /* Cuerpo mas chico (solo titulo + link), ya no hace falta el alto extra
     que usaban la descripcion y la duracion. Titulo en texto normal (sin
     placa) para que la foto se note todavia mas. */
  .featured-grid .tour-body { padding: 16px 16px 18px; }
  .featured-grid .tour-body h3 {
    background: none; color: var(--blue-dark);
    margin: 0 0 6px; padding: 0;
    border-radius: 0; font-size: 16px; font-weight: 800;
    text-transform: none; letter-spacing: 0;
  }
  .featured-grid .tour-body .more-link { font-size: 13px; color: var(--red); font-weight: 700; }
  .featured-grid .tour-card:hover .more-link { text-decoration: underline; }
  .featured-grid .tour-card:hover .more-link::after { transform: translateX(4px); }

  /* 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 { display: flex; justify-content: center; min-height: 60px; margin-bottom: 10px; }
  .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); }
  .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,.35), rgba(6,42,102,.68)), url('images/bandera-chile.jpg') center 62%/cover no-repeat;
    color: #fff;
    text-align: center;
  }
  .cta-final h2 { font-size: 36px; margin-bottom: 16px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
  .cta-final p { color: #dde5f4; max-width: 480px; margin: 0 auto 32px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

  .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: achicada (2026-10-13, pedido de la clienta —
     ocupaba mucho espacio y tapaba contenido al hacer scroll). */
  .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: 8px 16px;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  }
  .mobile-cta-bar .btn { width: 100%; padding: 10px 16px; font-size: 14px; }

  /* ============================================================
     ===== 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; }

    /* PAGE-HERO (banner de titulo de nosotros.html/tours.html) en mobile:
       el h1 quedaba muy grande y se apilaba en 4 lineas, haciendo el banner
       altisimo — pedido de la clienta 2026-10-17, "muy amplio para ser un
       banner". Se achica tipografia y se recorta bastante el padding. */
    .page-hero { padding: 90px 0 36px; }
    .page-hero h1, .page-hero h2 { font-size: 26px; line-height: 1.2; }
    .page-hero p { font-size: 13.5px; }
    .page-hero .filters { margin-top: 20px; }
    .page-hero.has-photo.tours-catalog-hero { padding: 110px 0 90px; }
    .tours-catalog-hero + #tours { margin-top: -50px; }
            .hero-content { display: flex; flex-direction: column; }
    .hero-stats { order: 2; }
    /* Orden visual en mobile: titulo, insignia Tripadvisor compacta (ver
       .hero-badge mas abajo) y recien despues los botones — pedido de la
       clienta 2026-10-14 para que el banner no quede tan extenso. Ya viene
       asi en el orden del HTML (los botones son hermanos de .hero-content,
       despues de la insignia), asi que aca solo se ajusta el estilo en fila
       y el espacio arriba. */
    .hero-actions {
      flex-direction: row;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: 10px;
      margin-top: 22px;
    }
    .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,.58) 0%,
        rgba(6,42,102,.42) 30%,
        rgba(6,42,102,.48) 65%,
        rgba(4,16,38,.62) 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: version compacta de una sola fila
       (icono + "Excelente" + cantidad de viajeros), sin la cinta "¡Bravo!",
       el texto largo ni los puntos — para que el banner no quede tan alto
       antes de los botones. Pedido de la clienta 2026-10-14. */
    .hero-badge { width: 100%; margin-top: 18px; box-shadow: none; }
    .hero-badge-ribbon { display: none; }
    .hero-badge-body {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
    }
    .hero-badge-owl { width: 30px; margin: 0; flex-shrink: 0; }
    .hero-badge-body p.hero-badge-text { display: none; }
    .hero-badge-body p.hero-badge-text:last-of-type {
      display: inline; font-size: 11px; margin: 0;
    }
    .hero-badge-rating {
      display: inline; font-size: 14px; margin: 0; white-space: nowrap;
    }
    .hero-badge-dots, .hero-badge-source { display: 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; }

    /* TOURS DESTACADOS en mobile: grilla fija de 2 columnas (misma
       distribucion que turistik.com, referencia que paso la clienta
       2026-10-14) en vez del carrusel horizontal que tenia antes — se ven
       varias tarjetas de una, solo con el scroll vertical normal de la
       pagina, sin deslizar de lado. */
    .tour-grid.featured-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .tour-grid.featured-grid .tour-img { height: 150px; border-radius: 20px; }
    .featured-grid .tour-card { border-radius: 20px; }
    .featured-grid .tour-body { padding: 10px 10px 14px; }
    .featured-grid .tour-body h3 {
      margin: 0 0 4px; padding: 0; font-size: 13px; line-height: 1.3;
    }
    .featured-grid .tour-body .more-link { font-size: 12px; }

    /* 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; }

    /* BARRA FIJA DE WHATSAPP EN MOBILE: solo en las paginas de tours
       (tours.html y tour.html, body.show-mobile-cta) — en el resto de las
       paginas (inicio, nosotros, testimonios, contacto) se saca porque no
       tiene sentido cotizar ahi; pedido de la clienta 2026-10-17. */
    body.show-mobile-cta { padding-bottom: 58px; }
    body.show-mobile-cta .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; }
    /* Mismo criterio en tour.html: el boton "Cotizar este tour por WhatsApp"
       de la ficha repetia el mismo CTA que ya queda fijo abajo (barra
       mobile-cta-bar) — pedido de la clienta 2026-10-14. Se oculta aca y
       queda activo solo el de abajo (que ya recibe el mismo mensaje
       personalizado con el nombre del tour, ver assets/tour-detail.js). */
    .tour-cta-wa { display: none; }
  }

  @media (max-width: 520px) {
    .hero h1 { font-size: 27px; }
    .page-hero { padding: 80px 0 30px; }
    .page-hero h1, .page-hero h2 { font-size: 23px; }
    .page-hero.has-photo.tours-catalog-hero { padding: 100px 0 70px; }
    .tours-catalog-hero + #tours { margin-top: -40px; }
    .page-hero.has-photo.home-tours-hero { padding: 60px 0 60px; }
    .home-tours-hero + #tours { margin-top: -30px; }
    .preinfo-grid { grid-template-columns: 1fr; }
    /* FOOTER EN MOBILE: todo centrado (logo, insignia Tripadvisor, redes
       sociales y las 3 columnas de links) en vez de alineado a la
       izquierda — pedido de la clienta 2026-10-17. */
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-grid > div { display: flex; flex-direction: column; align-items: center; }
    .footer-ta-badge { justify-content: center; }
    .footer-social { justify-content: center; }
    .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; }


/* ============================================================
   TOURS DESTACADOS — CARRUSEL EN ABANICO (index.html, #tours.rf-section)
   Fondo con foto + degrade azul (igual que .page-hero.has-photo), tarjetas
   blancas apiladas: la central grande, las laterales mas chicas y detras.
   Posicion/escala de cada tarjeta la calcula main.js (transform inline).
   ============================================================ */
.rf-section { position: relative; overflow: hidden; padding: 80px 0 90px;
  background-image: linear-gradient(180deg, rgba(4,16,38,.62) 0%, rgba(6,42,102,.5) 50%, rgba(4,16,38,.72) 100%), var(--rf-photo);
  background-size: cover; background-position: center 35%; }
.rf-wrap { position: relative; z-index: 2; }
.rf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.rf-head .eyebrow { color: #fff; opacity: .9; }
.rf-head h2 { color: #fff; font-size: 34px; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.rf-arrows { display: flex; gap: 12px; }
.rf-arrows button { width: 54px; height: 54px; border-radius: 50%; border: none; background: #fff; color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 26px rgba(6,42,102,.35); transition: background .2s, color .2s, transform .2s; }
.rf-arrows button:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.rf-stage { position: relative; height: 420px; margin: 10px 0 0; touch-action: pan-y; user-select: none; }
.rf-card { position: absolute; left: 50%; top: 50%; width: 300px; margin: -180px 0 0 -150px; background: #fff;
  border-radius: 26px; padding: 12px 12px 22px; box-shadow: 0 18px 40px rgba(6,42,102,.32); color: var(--blue-dark);
  display: block; transition: transform .6s cubic-bezier(.22,.9,.3,1), opacity .5s ease, filter .5s ease;
  will-change: transform; -webkit-user-drag: none; }
.rf-card.is-hidden { opacity: 0; pointer-events: none; }
.rf-photo { height: 200px; border-radius: 20px; background-size: cover; background-repeat: no-repeat; position: relative; }
.rf-tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--blue-dark); font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.rf-body { padding: 16px 10px 0; }
.rf-body h3 { font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--blue-dark); margin: 0 0 6px; line-height: 1.2; }
.rf-loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.rf-loc svg { color: var(--red); flex-shrink: 0; }
.rf-label { font-weight: 800; font-size: 12.5px; color: var(--blue-dark); margin-bottom: 4px; }
.rf-body p { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 0; min-height: 34px; }
.rf-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 26px; }
.rf-dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.45); transition: all .3s; cursor: pointer; }
.rf-dots i.on { width: 26px; background: var(--red); }
@media (max-width: 860px) {
  .rf-section { padding: 60px 0 70px; }
  .rf-head { flex-direction: column; align-items: flex-start; }
  .rf-head h2 { font-size: 26px; }
  .rf-arrows { width: 100%; justify-content: center; }
  .rf-card { width: 270px; margin-left: -135px; }
}


/* ============================================================
   GALERIA — MOSAICO HORIZONTAL (index.html, .gm-section)
   Escritorio: 4 bloques de 3 columnas a todo el ancho; cada bloque = 1 foto alta
   (2 filas) + 2 fotos anchas apiladas. Celular: tira compacta deslizable.
   ============================================================ */
.gm-section { padding: 70px 0 0; overflow: hidden; }
.gm-head { margin-bottom: 30px; }
.gm-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 215px; gap: 6px; }
.gm-t { margin: 0; position: relative; overflow: hidden; min-height: 0; }
.gm-ph { position: absolute; inset: 0; background-image: var(--gm-img); background-size: cover; background-position: var(--gm-pos);
  transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.gm-t:hover .gm-ph { transform: scale(1.06); }
.gm-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(4,16,38,.72)); pointer-events: none; }
.gm-t figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; color: #fff;
  font: 800 15px 'Montserrat', sans-serif; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.gm-t figcaption svg { color: var(--red); }
/* bloque 1: alta arriba */ .gm-1 { grid-column: 1 / 4; grid-row: 1 / 3; } .gm-2 { grid-column: 1 / 4; grid-row: 3; } .gm-3 { grid-column: 1 / 4; grid-row: 4; }
/* bloque 2: alta abajo */ .gm-4 { grid-column: 4 / 7; grid-row: 1; } .gm-5 { grid-column: 4 / 7; grid-row: 2; } .gm-6 { grid-column: 4 / 7; grid-row: 3 / 5; }
/* bloque 3: alta arriba */ .gm-7 { grid-column: 7 / 10; grid-row: 1 / 3; } .gm-8 { grid-column: 7 / 10; grid-row: 3; } .gm-9 { grid-column: 7 / 10; grid-row: 4; }
/* bloque 4: alta abajo */ .gm-10 { grid-column: 10 / 13; grid-row: 1; } .gm-11 { grid-column: 10 / 13; grid-row: 2; } .gm-12 { grid-column: 10 / 13; grid-row: 3 / 5; }
.gm-morewrap { display: none; }
@media (max-width: 860px) {
  .gm-section { padding: 50px 0 40px; }
  .gm-head { margin-bottom: 20px; }
  .gm-collapse { position: relative; overflow: hidden; max-height: 640px; transition: max-height .6s ease; }
  .gm-collapse::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--blue-dark)); transition: opacity .3s; }
  .gm-section.is-open .gm-collapse::after { opacity: 0; }
  .gm-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 5px; grid-auto-flow: dense; padding: 0 5px; }
  .gm-t { grid-column: auto !important; grid-row: auto !important; border-radius: 14px; }
  .gm-t.gm-t { grid-row: span 3 !important; }
  .gm-t.gm-w { grid-column: 1 / 3 !important; grid-row: span 2 !important; }
  .gm-grid > .gm-t:nth-child(5), .gm-grid > .gm-t:nth-child(6), .gm-grid > .gm-t:nth-child(n+9) { display: none; }
  .gm-t figcaption { font-size: 12.5px; left: 12px; bottom: 12px; }
  .gm-morewrap { display: flex; justify-content: center; margin-top: 18px; position: relative; z-index: 2; }
  .gm-more { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--blue-dark); border: none; border-radius: 999px;
    padding: 14px 26px; font: 700 15px 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
  .gm-m2 { display: none; }
  .gm-section.is-open .gm-m1 { display: none; }
  .gm-section.is-open .gm-m2 { display: inline; }
  .gm-more svg { transition: transform .3s; }
  .gm-section.is-open .gm-more svg { transform: rotate(180deg); }
}


/* ============================================================
   HERO RENOVADO (index.html) — 2026-10-19, pedido de la clienta
   Foto de fondo mas limpia, texto alineado a la izquierda con el
   mismo titular de siempre, eyebrow tipo pastilla e insignia de
   Tripadvisor como chip blanco. Sobrescribe reglas anteriores del hero.
   ============================================================ */
.hero { min-height: 700px; }
.hero .wrap { display: block; padding-top: 130px; padding-bottom: 90px; }
.hero-content.center { text-align: left; margin: 0; max-width: 700px; }
.hero-content.center .eyebrow { justify-content: flex-start; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: #fff; text-shadow: none;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.hero h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.06; margin: 20px 0 6px; text-wrap: balance; }
.hero-actions.center { justify-content: flex-start; margin-top: 30px; }
.hero-slideshow-overlay {
  background:
    linear-gradient(90deg, rgba(4,16,38,.88) 0%, rgba(6,42,102,.7) 38%, rgba(6,42,102,.18) 78%, rgba(6,42,102,.05) 100%),
    linear-gradient(0deg, rgba(4,16,38,.5) 0%, rgba(4,16,38,0) 38%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 12px; width: auto; border-radius: 16px; overflow: visible;
  background: #fff; border: none; padding: 10px 18px 10px 10px; color: var(--blue-dark);
  box-shadow: 0 14px 34px rgba(0,0,0,.28); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-badge .hero-badge-owl { width: 42px; height: 42px; margin: 0; filter: none; flex-shrink: 0; }
.hero-badge-info { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hero-badge .hero-badge-rating { display: block; font-size: 15px; margin: 0; color: var(--blue-dark); text-shadow: none; white-space: nowrap; }
.hero-badge .hero-badge-text { display: block; font-size: 12.5px; color: #4b5b7a; text-shadow: none; margin: 0; line-height: 1.25; }
.hero-badge .hero-badge-dots { display: flex; gap: 3px; margin: 3px 0 0; }
.hero-badge .hero-badge-dots span { width: 7px; height: 7px; background: #00aa6c; }
@media (min-width: 861px) {
  .hero-badge { position: absolute; top: 112px; right: 0; margin-top: 0; }
  .hero-slide-btn.next { right: 18px; } 
}
@media (max-width: 860px) {
  .hero .wrap { padding-top: 100px; padding-bottom: 70px; }
  .hero h1 { font-size: 33px; margin-bottom: 4px; }
  .hero-content.center { max-width: none; }
  .hero-actions.center { margin-top: 0; justify-content: flex-start; }
  .hero-badge { width: auto; margin-top: 20px; margin-bottom: 18px; padding: 9px 16px 9px 9px; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
  .hero-badge .hero-badge-owl { width: 34px; height: 34px; }
  .hero-badge .hero-badge-text { display: block; }
  .hero-badge .hero-badge-dots { display: flex; }
  .hero-slideshow-overlay {
    background: linear-gradient(180deg, rgba(4,16,38,.6) 0%, rgba(6,42,102,.55) 45%, rgba(4,16,38,.9) 100%);
  }
}
@media (max-width: 860px) {
  .hero .eyebrow { font-size: 10px; letter-spacing: .1em; padding: 8px 13px; gap: 8px; max-width: 100%; white-space: nowrap; }
  .hero-slide-btn { top: auto; bottom: 14px; width: 38px; height: 38px; transform: none; }
  .hero-slide-btn.prev { left: auto; right: 62px; }
  .hero-slide-btn.next { right: 16px; }
  .hero-slide-dots.tour-slide-dots { left: 20px; right: auto; transform: none; bottom: 28px; }
}
/* HERO móvil: ajustes para pantallas angostas (≈300–390px) — 2026-10-19 */
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-left: 18px; padding-right: 18px; padding-top: 96px; padding-bottom: 76px; }
  .hero .eyebrow { white-space: normal; font-size: 10px; line-height: 1.35; letter-spacing: .09em; border-radius: 14px; padding: 8px 12px; max-width: 100%; align-items: flex-start; }
  .hero .eyebrow::before { margin-top: 3px; }
  .hero h1 { font-size: clamp(28px, 8.4vw, 36px); line-height: 1.1; margin: 16px 0 0; text-wrap: balance; }
  .hero-badge { margin: 20px 0 14px; }
  .hero-actions.center { gap: 10px; flex-wrap: nowrap; }
  .hero-actions .btn { flex: 1 1 0; text-align: center; padding: 13px 10px; font-size: 14px; white-space: nowrap; }
}
/* HERO móvil v3 (2026-10-19): más aire, contenido al centro, tarjeta Tripadvisor alargada,
   botones abajo, puntos al centro y flechas a los lados. */
@media (max-width: 860px) {
  .hero { min-height: 640px; }
  .hero .wrap { display: flex; flex-direction: column; min-height: 640px; padding-top: 96px; padding-bottom: 84px; }
  .hero-content.center { margin-top: auto; }
  .hero h1 { font-size: clamp(30px, 8.8vw, 38px); margin-top: 18px; }
  .hero-badge { width: 100%; margin: 26px 0 0; padding: 10px 16px 10px 10px; border-radius: 14px; gap: 12px; }
  .hero-badge .hero-badge-owl { width: 36px; height: 36px; }
  .hero-badge-info { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 10px; flex: 1; }
  .hero-badge .hero-badge-rating { font-size: 15px; }
  .hero-badge .hero-badge-text { font-size: 12.5px; }
  .hero-badge .hero-badge-dots { margin: 0 0 0 auto; }
  .hero-actions.center { margin-top: auto; padding-top: 34px; }
  .hero-slide-btn { top: 50%; bottom: auto; transform: translateY(-50%); width: 40px; height: 40px; }
  .hero-slide-btn.prev { left: 10px; right: auto; }
  .hero-slide-btn.next { right: 10px; left: auto; }
  .hero-slide-dots.tour-slide-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 26px; }
}
@media (max-width: 860px) {
  .hero-actions.center { justify-content: center; padding-left: 52px; padding-right: 52px; }
  .hero-actions .btn { flex: 1 1 0; max-width: 160px; }
  .hero-slide-btn { top: auto; bottom: 94px; transform: none; width: 40px; height: 40px; }
}
/* HERO móvil v4 (2026-10-19): sin pastilla superior, texto más arriba y con más interlineado,
   botones compactos bajo la tarjeta, flechas a la altura de los puntos. */
@media (max-width: 860px) {
  .hero { min-height: 600px; }
  .hero .wrap { min-height: 600px; justify-content: flex-start; padding-top: 118px; padding-bottom: 90px; }
  .hero .eyebrow { display: none; }
  .hero-content.center { margin-top: 0; }
  .hero h1 { margin-top: 0; line-height: 1.22; font-size: clamp(29px, 8.4vw, 36px); }
  .hero-badge { margin: 24px 0 0; }
  .hero-actions.center { margin-top: 18px; padding: 0; justify-content: flex-start; gap: 10px; }
  .hero-actions .btn { flex: 0 0 auto; max-width: none; padding: 12px 22px; font-size: 14px; }
  .hero-slide-btn { top: auto; bottom: 22px; width: 40px; height: 40px; }
  .hero-slide-dots.tour-slide-dots { bottom: 38px; }
}
@media (max-width: 860px) { .hero .wrap { align-items: stretch; } }
/* HERO móvil v5 (2026-10-19): todo centrado, botones más abajo y parejos. */
@media (max-width: 860px) {
  .hero .wrap { justify-content: center; align-items: stretch; padding-top: 100px; padding-bottom: 110px; }
  .hero-content.center { text-align: center; }
  .hero h1 { line-height: 1.22; }
  .hero-badge { margin: 26px auto 0; width: 100%; max-width: 330px; }
  .hero-actions.center { justify-content: center; margin-top: 36px; gap: 12px; }
  .hero-actions .btn { flex: 1 1 0; max-width: 150px; padding: 14px 10px; text-align: center; }
}
/* HERO móvil v6 (2026-10-19): tarjeta Tripadvisor ajustada al contenido y centrada,
   botones abajo (sobre las flechas y puntos). */
@media (max-width: 860px) {
  .hero .wrap { justify-content: flex-start; padding-top: 112px; padding-bottom: 96px; }
  .hero-content.center { margin-top: 10px; }
  .hero-badge { width: auto; max-width: 100%; align-self: center; margin: 26px 0 0; padding: 8px 16px 8px 8px; gap: 10px; border-radius: 999px; }
  .hero-badge .hero-badge-owl { width: 32px; height: 32px; }
  .hero-badge-info { flex: 0 1 auto; flex-wrap: nowrap; gap: 8px; }
  .hero-badge .hero-badge-rating { font-size: 14px; }
  .hero-badge .hero-badge-text { font-size: 12px; white-space: nowrap; }
  .hero-badge .hero-badge-dots { margin: 0 0 0 2px; gap: 2px; }
  .hero-badge .hero-badge-dots span { width: 6px; height: 6px; }
  .hero-actions.center { margin-top: auto; padding-top: 24px; }
}
/* HERO (2026-10-19): todo centrado también en escritorio y "descubrir Santiago" en rojo. */
.hero h1 .hl { color: #ff4d58; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-content.center { text-align: center; margin: 0 auto; max-width: 860px; }
.hero-content.center .eyebrow { justify-content: center; }
.hero-actions.center { justify-content: center; }
@media (min-width: 861px) {
  .hero-badge { position: static; margin-top: 30px; order: 3; }
  .hero-actions.center { order: 2; }
}
.hero h1 .hl { white-space: nowrap; }
/* HERO móvil (2026-10-19): menos alto, sin espacio de sobra y tarjeta Tripadvisor que no se corta en pantallas angostas. */
@media (max-width: 860px) {
  .hero, .hero .wrap { min-height: 540px; }
  .hero .wrap { padding-top: 108px; padding-bottom: 92px; }
  .hero-badge { padding-right: 14px; }
  .hero-badge-info { min-width: 0; }
  .hero-actions.center { padding-top: 20px; }
}
@media (max-width: 360px) {
  .hero-badge .hero-badge-dots { display: none; }
  .hero-badge .hero-badge-text { font-size: 11.5px; }
}
/* HERO móvil final (2026-10-19): márgenes laterales, título que no toca los bordes,
   grupo centrado verticalmente y botones de buen tamaño. */
@media (max-width: 860px) {
  .hero, .hero .wrap { min-height: 560px; }
  .hero .wrap { justify-content: center; padding: 104px 26px 96px; }
  .hero-content.center { margin-top: 0; }
  .hero h1 { font-size: clamp(25px, 7.4vw, 34px); line-height: 1.22; }
  .hero h1 .hl { white-space: normal; }
  .hero-badge { margin-top: 24px; }
  .hero-actions.center { margin-top: 28px; padding: 0; width: 100%; max-width: 340px; align-self: center; gap: 12px; flex-wrap: nowrap; }
  .hero-actions .btn { flex: 1 1 0; max-width: none; min-height: 48px; padding: 13px 8px; font-size: 15px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
}
/* HERO móvil jerarquía (2026-10-19): título protagonista, tarjeta Tripadvisor secundaria, botones compactos. */
@media (max-width: 860px) {
  .hero h1 { font-size: clamp(30px, 9.4vw, 40px); line-height: 1.18; text-wrap: balance; }
  .hero h1 .hl { white-space: normal; }
  .hero-badge { margin-top: 20px; padding: 6px 13px 6px 6px; gap: 8px; }
  .hero-badge .hero-badge-owl { width: 26px; height: 26px; }
  .hero-badge .hero-badge-rating { font-size: 12.5px; }
  .hero-badge .hero-badge-text { font-size: 11px; }
  .hero-badge .hero-badge-dots span { width: 5px; height: 5px; }
  .hero-actions.center { margin-top: 20px; max-width: 280px; gap: 10px; }
  .hero-actions .btn { min-height: 40px; padding: 9px 6px; font-size: 13.5px; }
}
@media (max-width: 860px) { .hero-badge { margin-top: 46px; } .hero-actions.center { margin-top: 24px; } }
/* FOOTER móvil (2026-10-19): logo + insignia Tripadvisor + redes van al final, después de las columnas de enlaces. */
@media (max-width: 860px) {
  .footer-grid > div:first-child { order: 5; grid-column: 1 / -1; }
}
/* TOURS (catálogo y relacionados): mismas cards que el carrusel del inicio — 2026-10-19 */
.tour-grid .tour-card.rf-card {
  position: static; width: auto; margin: 0; display: block; overflow: visible;
  background: #fff; border: none; border-radius: 26px; padding: 12px 12px 22px;
  box-shadow: 0 14px 34px rgba(6,42,102,.14); color: var(--blue-dark);
  transition: box-shadow .25s ease, transform .25s ease;
}
.tour-grid .tour-card.rf-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(6,42,102,.22); }
.tour-grid .tour-card.rf-card .rf-photo { height: 210px; }
.tour-grid .tour-card.rf-card .rf-body p { min-height: 34px; }
@media (max-width: 860px) {
  .tour-grid .tour-card.rf-card .rf-photo { height: 190px; }
}
/* CONTACTO (contacto.html): bloque centrado con franja de fotos — 2026-10-19 */
.ct-section { padding: 80px 0 90px; }
.ct-wrap { max-width: 1100px; text-align: center; }
.ct-wrap .eyebrow { justify-content: center; }
.ct-wrap h2 { font-size: 34px; color: var(--blue-dark); margin: 8px 0 14px; }
.ct-lead { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
.btn-wa-lg { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; border-radius: 999px; padding: 16px 32px;
  font: 700 16px 'Mulish', sans-serif; text-decoration: none; box-shadow: 0 12px 28px rgba(37,211,102,.35); transition: transform .2s ease, box-shadow .2s ease; }
.btn-wa-lg:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,.45); }
.ct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.ct-card { background: #fff; border-radius: 22px; padding: 28px 22px; box-shadow: 0 14px 34px rgba(6,42,102,.12); border: 1px solid #eef1f8; }
.ct-ic { width: 54px; height: 54px; border-radius: 16px; background: #eef3fd; color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ct-card h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--blue-dark); margin-bottom: 6px; }
.ct-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.ct-card a { color: inherit; text-decoration: none; }
.ct-photos { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.3fr 1fr; gap: 12px; height: 300px; margin-top: 60px; margin-bottom: 40px; }
.ct-ph { border-radius: 22px; background-size: cover; background-repeat: no-repeat; box-shadow: 0 14px 30px rgba(6,42,102,.18); }
.ct-ph:nth-child(even) { margin-top: 34px; margin-bottom: -34px; }
@media (max-width: 860px) {
  .ct-section { padding: 56px 0 60px; }
  .ct-wrap { padding: 0 18px; }
  .ct-wrap h2 { font-size: 27px; }
  .ct-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .ct-photos { grid-template-columns: 1fr 1fr; height: auto; grid-auto-rows: 150px; margin-top: 32px; margin-bottom: 0; }
  .ct-ph:nth-child(even) { margin: 0; }
  .ct-ph:nth-child(5) { display: none; }
}
/* CONTACTO: enlaces de las tarjetas + "Reservar es muy simple" — 2026-10-19 */
.ct-link { display: inline-block; margin-top: 14px; font-weight: 800; font-size: 13.5px; color: var(--red); text-decoration: none; }
.ct-link::after { content: " →"; transition: margin-left .2s ease; }
.ct-link:hover { text-decoration: underline; }
.ct-steps { margin-top: 64px; }
.ct-steps-title { font-family: 'Montserrat', sans-serif; font-size: 24px; color: var(--blue-dark); margin-bottom: 28px; }
.ct-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.ct-step { padding: 0 14px; }
.ct-num { width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; font: 800 18px 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 8px 18px rgba(211,35,47,.3); }
.ct-step h4 { font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--blue-dark); margin-bottom: 6px; }
.ct-step p { font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 260px; margin: 0 auto; }
@media (min-width: 861px) {
  .ct-steps-row::before { content: ""; position: absolute; top: 23px; left: 17%; right: 17%; border-top: 2px dashed #cdd6ea; z-index: 0; }
  .ct-num { position: relative; z-index: 1; }
}
@media (max-width: 860px) {
  .ct-card { display: grid; grid-template-columns: 54px 1fr; column-gap: 16px; text-align: left; padding: 18px 18px; align-items: center; }
  .ct-card .ct-ic { grid-row: 1 / span 4; margin: 0; width: 48px; height: 48px; }
  .ct-card h3 { margin-bottom: 2px; }
  .ct-link { margin-top: 6px; }
  .ct-cards { gap: 12px; margin-top: 28px; }
  .ct-steps { margin-top: 40px; }
  .ct-steps-title { font-size: 21px; margin-bottom: 20px; }
  .ct-steps-row { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .ct-step { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 0; align-items: center; }
  .ct-num { grid-row: 1 / span 2; margin: 0; }
  .ct-step p { margin: 0; max-width: none; }
}
.ct-card .ct-link { color: var(--red); }

/* BOTONES DE WHATSAPP (2026-10-19, pedido de la clienta): todo botón verde (.btn-primary) lleva el estilo píldora con el
   logo real de WhatsApp, y el botón flotante usa el mismo logo en vez del globo genérico. */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(37,211,102,.32); transition: transform .2s ease, box-shadow .2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,.42); }
.btn-primary::before { content: ""; width: 1.3em; height: 1.3em; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.header-cta.btn-primary { box-shadow: 0 6px 16px rgba(37,211,102,.28); gap: 8px; }
.whatsapp-float .wa-glyph { width: 32px; height: 32px; display: block; }
.whatsapp-float { font-size: 0; }
.btn-wa-lg svg { flex-shrink: 0; }



/* Contacto: banner corto con fotos de viajeros (2026-10-19) */
.hero.ct-short,.hero.ct-short .wrap{min-height:400px}
.hero.ct-short .wrap{padding:96px 24px 70px;justify-content:center}
.hero.ct-short h1{font-size:clamp(28px,4.6vw,46px);line-height:1.15;margin:0 0 12px}
.hero.ct-short p{font-size:17px;color:#fff;margin:0;max-width:520px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero.ct-short h1{text-shadow:0 3px 18px rgba(0,0,0,.55)}
.hero.ct-short .hero-slideshow-overlay{background:linear-gradient(180deg,rgba(4,16,38,.35),rgba(6,42,102,.42) 55%,rgba(4,16,38,.5))}
@media(max-width:700px){.hero.ct-short,.hero.ct-short .wrap{min-height:380px}.hero.ct-short p{font-size:15px}}
.hero.ct-short .wrap{pointer-events:none}
.hero.ct-short .hero-content{text-align:center;display:flex;flex-direction:column;align-items:center}.hero.ct-short p{margin:0 auto;text-align:center}
@media(min-width:1200px){.hero.ct-short,.hero.ct-short .wrap{min-height:clamp(400px,26vw,520px)}}

/* Carrusel de tours (inicio): flechas a los lados, tarjetas de atrás apagadas, overlay al pasar el mouse (2026-10-19) */
.rf-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s,filter .4s,box-shadow .3s}
.rf-card.is-hidden{opacity:0!important}
.rf-card.is-active{box-shadow:0 26px 60px rgba(0,0,0,.45)}
.rf-card:not(.is-active){cursor:pointer}
.rf-card:not(.is-active):hover{filter:brightness(.95) saturate(1)!important;opacity:.92!important}
.rf-photo{overflow:hidden}
.rf-photo::after{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(180deg,rgba(6,42,102,.15),rgba(6,42,102,.72));opacity:0;transition:opacity .3s;pointer-events:none}
.rf-photo::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;z-index:3;opacity:0;transform:scale(.7);transition:all .3s;pointer-events:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062a66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/24px no-repeat;box-shadow:0 8px 20px rgba(0,0,0,.35)}
@media(hover:hover){.rf-card:hover .rf-photo::after{opacity:1}}
@media(hover:hover){.rf-card.is-active:hover .rf-photo::before{opacity:1;transform:scale(1)}}
@media(hover:hover){.rf-card:not(.is-active):hover .rf-photo::after{opacity:.35}}
.rf-card.is-active:hover{box-shadow:0 30px 64px rgba(0,0,0,.5)}
.tour-grid .tour-card.rf-card .rf-photo::before{opacity:0}
.tour-grid .tour-card.rf-card:hover .rf-photo::before{opacity:1;transform:scale(1)}
#rfPrev,#rfNext{position:absolute;top:50%;margin-top:-27px;width:54px;height:54px;border-radius:50%;border:none;background:#fff;color:var(--blue-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.4);transition:all .2s;z-index:60}
#rfPrev:hover,#rfNext:hover{background:var(--red);color:#fff;transform:scale(1.08)}
#rfPrev{left:calc(50% - 235px)}#rfNext{right:calc(50% - 235px)}
@media(max-width:860px){#rfPrev{left:6px}#rfNext{right:6px}#rfPrev,#rfNext{width:44px;height:44px;margin-top:-22px}}

/* Banner del inicio: fotos de Santiago, velo suave, titulo en 2 renglones sin rojo (2026-10-25) */
.hero-slideshow-overlay{background:radial-gradient(ellipse 60% 70% at 50% 48%,rgba(6,34,86,.46) 0%,rgba(6,34,86,.22) 60%,rgba(6,34,86,.05) 100%),linear-gradient(180deg,rgba(6,34,86,.22) 0%,rgba(6,34,86,0) 28%,rgba(6,34,86,0) 70%,rgba(6,34,86,.30) 100%)}
@media(max-width:860px){.hero-slideshow-overlay{background:linear-gradient(180deg,rgba(6,34,86,.34) 0%,rgba(6,34,86,.30) 50%,rgba(6,34,86,.40) 100%)}}
.hero h1{text-shadow:0 3px 18px rgba(0,0,0,.55)}
.hero h1 .hl{color:inherit;white-space:normal}
.hero h1 > span:nth-child(3){display:block}
.hero h1{text-wrap:balance}
.hero .hero-content.center h1 > span{display:inline}
.hero .hero-content.center h1 > span:nth-child(3){display:block}
.hero.ct-short .hero-slideshow-overlay{background:linear-gradient(180deg,rgba(4,16,38,.35),rgba(6,42,102,.42) 55%,rgba(4,16,38,.5))}

/* Galeria del inicio: fondo claro en vez de azul oscuro (pedido de la clienta, 2026-10-25) */
.gallery.gm-section { background: var(--cream); color: var(--blue-dark); padding-bottom: 60px; }
.gallery.gm-section .gm-head h2 { color: var(--blue-dark); }
@media (max-width: 860px) {
  .gallery.gm-section { padding-bottom: 40px; }
  .gm-collapse::after { background: linear-gradient(180deg, rgba(245,247,250,0), var(--cream)); }
  .gm-more { background: var(--blue); color: #fff; box-shadow: 0 10px 26px rgba(10,61,145,.25); }
}

/* Carrusel: sin flecha/overlay al tocar en celular */
@media(hover:none),(max-width:860px){#rfStage .rf-card .rf-photo::before{opacity:0!important}}

/* Carrusel del inicio: sin flecha central al pasar el mouse (solo el overlay suave) (2026-10-25) */
#rfStage .rf-card .rf-photo::before,#rfStage .rf-card:hover .rf-photo::before,#rfStage .rf-card.is-active:hover .rf-photo::before{opacity:0!important;display:none!important}

/* Subtitulos en azul claro en vez de rojo (pedido, 2026-10-25). Botones y acentos pequeños siguen en rojo. */
:root{--blue-light:#2f80d8}
.eyebrow{color:var(--blue-light)}
.hero .eyebrow{color:var(--turquoise)}
.rf-head .eyebrow{color:#fff}
.page-hero .eyebrow{color:#9fcdff}
.tour-detail-duration{color:var(--blue-light)}
.tour-experiencias-wrap h2,.tour-complementos-wrap h2{color:var(--blue-light)}

/* Sin flecha central sobre la foto de las tarjetas de tours (catalogo, relacionados e inicio) (2026-10-25) */
.rf-photo::before,.tour-grid .tour-card.rf-card .rf-photo::before,.tour-grid .tour-card.rf-card:hover .rf-photo::before,.rf-card:hover .rf-photo::before,.rf-card.is-active:hover .rf-photo::before{opacity:0!important;display:none!important}

/* ============================================================
   GALERIA — CARRUSEL DESLIZABLE (index.html y testimonios.html)
   Reemplaza el mosaico .gm-*. Fotos en assets/images/galeria/. Pedido de la clienta (punto 4).
   ============================================================ */
.gm-section { padding: 70px 0 60px; }
.gcar { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.gcar-viewport { position: relative; }
.gcar-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 18px; }
.gcar-track::-webkit-scrollbar { display: none; }
.gcar-item { margin: 0; flex: 0 0 calc((100% - 3 * 14px) / 4); aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden;
  scroll-snap-align: start; background: #dfe8f6; }
.gcar-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.gcar-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #fff; color: var(--blue-dark); display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 6px 18px rgba(4,16,38,.25); transition: opacity .2s; }
.gcar-btn:disabled { opacity: 0; pointer-events: none; }
.gcar-prev { left: 10px; } .gcar-next { right: 10px; }
.gcar-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.gcar-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c3cfe6; cursor: pointer; transition: all .2s; }
.gcar-dots button.on { background: var(--blue-light); width: 24px; border-radius: 6px; }
@media (max-width: 1000px) { .gcar-item { flex-basis: calc((100% - 2 * 12px) / 3); } .gcar-track { gap: 12px; } }
@media (max-width: 700px) {
  .gm-section { padding: 50px 0 40px; }
  .gcar { padding: 0 16px; }
  .gcar-track { gap: 10px; }
  .gcar-item { flex-basis: 74%; }
  .gcar-btn { width: 38px; height: 38px; }
}

/* Recuadro "¿Buscas una experiencia diferente?" bajo la galería (punto 7) */
.gcar-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 34px; padding: 28px 34px;
  background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(10,61,145,.10); border: 1px solid #dbe6f6; }
.gcar-cta h3 { margin: 0 0 8px; font-size: 24px; color: var(--blue-dark); }
.gcar-cta p { margin: 0 0 4px; color: #4a5a78; line-height: 1.55; }
.gcar-cta .btn { flex: none; white-space: nowrap; }
@media (max-width: 700px) { .gcar-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; gap: 18px; } .gcar-cta h3 { font-size: 21px; } }
.gcar-count { font-weight: 700; font-size: 14px; color: var(--blue-light); letter-spacing: .04em; }

/* Punto 5: banderas con color pleno (sin opacidad); la activa se marca con un aro. Pedido de la clienta. */
.lang-switch span, .lang-switch span.active { opacity: 1 !important; }
.lang-switch span .lang-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.35); transition: box-shadow .15s, transform .15s; }
.lang-switch span.active .lang-flag { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.25); }
.lang-switch span:hover .lang-flag { transform: translateY(-1px); }
#langSwitchMobile span .lang-flag { box-shadow: 0 0 0 1px rgba(6,42,102,.2); }
#langSwitchMobile span.active .lang-flag { box-shadow: 0 0 0 2px var(--blue-dark), 0 2px 8px rgba(6,42,102,.25); }

/* Sin barra fija de WhatsApp en la version mobile (pedido de la clienta) */
@media (max-width: 860px) {
  body.show-mobile-cta { padding-bottom: 0 !important; }
  body.show-mobile-cta .mobile-cta-bar, .mobile-cta-bar { display: none !important; }
}

/* Version mobile: un solo ícono flotante de WhatsApp, discreto, que abre el chat directo (pedido de la clienta) */
@media (max-width: 860px) {
  .whatsapp-float { display: flex !important; width: 50px; height: 50px; bottom: 16px; right: 14px; box-shadow: 0 6px 16px rgba(37,211,102,.38); }
  .whatsapp-float .wa-glyph { width: 28px; height: 28px; }
}

/* "Lugares que podemos conocer" (City Tour): lista aparte de lo incluido */
.tour-itin-lugares { margin-top: 26px; padding: 22px 24px; background: #fff; border: 1px solid #dbe6f6; border-radius: 16px; }
.tour-itin-lugares h3 { margin: 0 0 8px; font-size: 18px; color: var(--blue-dark); }
.tour-itin-lugares p { margin: 0 0 14px; color: #4a5a78; line-height: 1.55; font-size: 15px; }
.tour-itin-lugares ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-itin-lugares li { padding: 8px 14px; border-radius: 999px; background: #eef4fd; color: var(--blue-dark); font-size: 14px; font-weight: 600; }

/* Cierre con foto de fondo (testimonios.html) */
.cta-photo{position:relative;padding:90px 0;text-align:center;color:#fff;overflow:hidden}
.cta-photo-bg{position:absolute;inset:0;background-size:cover;background-position:center 60%}
.cta-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,38,.55),rgba(6,42,102,.6));z-index:1}
.cta-photo .wrap{position:relative;z-index:2}
.cta-photo h2{color:#fff;font-size:clamp(26px,4vw,40px);margin:0 0 12px;text-shadow:0 3px 16px rgba(0,0,0,.5)}
.cta-photo p{max-width:520px;margin:0 auto 26px;color:#fff;font-size:17px}

/* Reseñas Tripadvisor (diseño de ejemplo) */
.rv-top{display:flex;width:fit-content;max-width:100%;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:#f4f8fe;border:1px solid #dbe6f6;border-radius:999px;padding:10px 22px;margin:0 auto 34px}
.rv-top img{width:34px;height:34px}.rv-top b{color:var(--blue-dark,#0a3d91);font-size:17px}.rv-top span:last-child{color:#4a5a78;font-size:14px}
.rv-dots{display:inline-flex;gap:3px;vertical-align:middle}.rv-dots i{width:11px;height:11px;border-radius:50%;background:#00aa6c;display:block}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:0 auto;padding:0 24px}
.rv-card{background:#fff;border:1px solid #dbe6f6;border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(10,61,145,.08);display:flex;flex-direction:column;gap:12px;text-align:left}
.rv-head{display:flex;align-items:center;gap:12px}
.rv-av{width:46px;height:46px;border-radius:50%;background:#dbe6f6;color:var(--blue-dark,#0a3d91);font-weight:800;display:grid;place-items:center;flex:none}
.rv-head strong{display:block;color:var(--blue-dark,#0a3d91)}.rv-head small{color:#6a7690}
.rv-ta{margin-left:auto;width:26px;height:26px}
.rv-card h3{margin:0;font-size:18px;color:var(--blue-dark,#0a3d91)}
.rv-card p{margin:0;color:#4a5a78;line-height:1.6;font-size:15px}
.rv-foot{margin-top:auto;font-size:13px;color:#6a7690;border-top:1px solid #eef2f9;padding-top:12px}
.rv-linkwrap{text-align:center;margin:34px 0 0}.rv-link{color:var(--blue-dark,#0a3d91);font-weight:700}
@media(max-width:860px){.rv-grid{grid-template-columns:1fr;padding:0 16px}}
/* Reseñas reales cargadas por la API de TripAdvisor (assets/main.js, seccion 2b) */
.rv-dots i.off{background:transparent;box-shadow:inset 0 0 0 1.5px #00aa6c}
img.rv-av{object-fit:cover;padding:0}
.rv-more{color:var(--blue-dark,#0a3d91);font-weight:700}
.rv-more::after{content:" →"}
.rv-more:hover{color:#2f80d8}
/* Tarjeta final "305 opiniones — Ver todas" (tarjetas fijas del HTML) */
.rv-card.rv-cta{align-items:center;justify-content:center;text-align:center;gap:6px;background:linear-gradient(135deg,var(--blue-dark,#062a66),var(--blue,#0a3d91));border-color:transparent;color:#fff}
.rv-cta img{width:52px;height:52px;margin-bottom:6px}
.rv-cta strong{font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;font-size:42px;font-weight:800;line-height:1}
.rv-cta span{font-size:15px;color:#dbe4f5}
.rv-cta em{font-style:normal;font-weight:700;font-size:14px;color:#ff9d9d;margin-top:12px}

/* Contacto: acentos en azul, misma línea del resto del sitio */
.ct-ic{background:#e6f0fd;color:var(--blue)}
.ct-card .ct-link{color:var(--blue)!important}
.ct-num{background:var(--blue)!important;box-shadow:0 8px 18px rgba(10,61,145,.25)!important}

/* Iconos: fondo azul (mismo azul de los subtítulos) */
.tour-ess-icon,.ct-ic,.preinfo-card .icon{background:#2f80d8!important;color:#fff!important}
.tour-ess-icon svg,.ct-ic svg,.preinfo-card .icon svg{color:#fff}

/* Botones en celular: una sola línea, centrados, nunca desbordan */
@media (max-width: 860px){
  .btn,.btn-wa-lg{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-align:center;white-space:nowrap;max-width:100%;box-sizing:border-box;line-height:1.2}
  .btn-primary,.btn-wa-lg{font-size:15px;padding:14px 22px;min-height:50px;width:auto;min-width:min(260px,calc(100vw - 40px))}
  .btn svg,.btn-wa-lg svg{flex:none;width:20px;height:20px}
  .gcar-cta .btn,.cta-final .btn,.cta-photo .btn,.ct-section .btn-wa-lg{width:min(320px,calc(100vw - 40px))}
}
@media (max-width: 360px){
  .btn-primary,.btn-wa-lg{font-size:14px;padding:13px 16px}
}

/* Tours: hover más notorio (elevación + sombra azul marcada) */
@media (hover:hover){
  .tour-grid .tour-card.rf-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  .tour-grid .tour-card.rf-card:hover{transform:translateY(-10px) scale(1.025);box-shadow:0 34px 70px rgba(10,61,145,.38),0 10px 24px rgba(10,61,145,.22)}
}
@media (hover:hover){
  .tour-grid .tour-card.rf-card:hover{opacity:1!important;filter:none!important;background:#fff}
}
@media (max-width: 860px){
  .gcar-cta .btn{width:100%!important;max-width:100%;min-width:0!important;flex:none;white-space:normal;box-sizing:border-box;padding-left:14px;padding-right:14px}
}
@media (max-width: 860px){ .gcar-cta .btn{white-space:nowrap;font-size:14.5px;padding-left:10px;padding-right:10px;gap:8px} }
@media (max-width: 340px){ .gcar-cta .btn{font-size:13.5px} }

/* ===== Interacciones: hover (escritorio) + toque (celular) en todo lo clickeable ===== */
a,button,.btn,.tour-card,.gcar-item,.why-us-card,.preinfo-card,.rv-card,.ct-card,.tour-side-card,.filters button,.lang-switch span{-webkit-tap-highlight-color:rgba(47,128,216,.18)}
.btn,.btn-wa-lg,.section-cta-link,.rv-link,.filters button,.gcar-btn,.lang-switch span,.footer-social a,.social-mini a,.whatsapp-float{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,filter .25s ease}

/* Botones */
@media (hover:hover){
  .btn:hover,.btn-wa-lg:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 14px 30px rgba(10,61,145,.28)}
  .btn-primary:hover,.btn-wa-lg:hover{box-shadow:0 16px 32px rgba(37,211,102,.5)}
  .section-cta-link:hover,.rv-link:hover{color:#2f80d8;letter-spacing:.2px}
  .filters button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,61,145,.22)}
  .lang-switch span:hover{transform:scale(1.15)}
  .footer-social a:hover,.social-mini a:hover{transform:translateY(-3px);background:#2f80d8;color:#fff;border-color:#2f80d8}
  .whatsapp-float:hover{transform:scale(1.1);box-shadow:0 14px 30px rgba(37,211,102,.55)}
  .gcar-btn:hover{transform:scale(1.1);background:#2f80d8;color:#fff}
  .desktop-nav a:not(.btn):hover{color:#8fc3ff}
  .footer-grid a:hover{color:#8fc3ff;padding-left:4px}
  .footer-grid a{transition:color .2s,padding .2s}
}

/* Tarjetas con elevación + sombra azul */
.gcar-item,.why-us-card,.preinfo-card,.rv-card,.ct-card,.tour-side-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
@media (hover:hover){
  .why-us-card:hover,.preinfo-card:hover,.rv-card:hover,.ct-card:hover,.tour-side-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,61,145,.24)}
}

/* Fotos de la galería: overlay azul + zoom */
.gcar-item{position:relative;overflow:hidden}
.gcar-item img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gcar-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,128,216,0) 40%,rgba(10,61,145,.55));opacity:0;transition:opacity .35s ease;pointer-events:none}
@media (hover:hover){
  .gcar-item:hover img{transform:scale(1.07)}
  .gcar-item:hover::after{opacity:1}
}

/* Tarjetas de tours: overlay azul sobre la foto al pasar el cursor */
.tour-grid .rf-card .rf-photo{position:relative;overflow:hidden}
.tour-grid .rf-card .rf-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,128,216,0),rgba(10,61,145,.45));opacity:0;transition:opacity .35s ease;pointer-events:none}
@media (hover:hover){.tour-grid .rf-card:hover .rf-photo::after{opacity:1!important}}

/* Celular / táctil: respuesta al toque */
@media (hover:none),(max-width:860px){
  .btn:active,.btn-wa-lg:active,.section-cta-link:active,.filters button:active,.lang-switch span:active,.whatsapp-float:active{transform:scale(.96);filter:brightness(.95)}
  .tour-grid .tour-card:active,.why-us-card:active,.preinfo-card:active,.rv-card:active,.ct-card:active,.tour-side-card:active{transform:scale(.98);box-shadow:0 14px 30px rgba(10,61,145,.2)}
  .gcar-item:active img{transform:scale(1.04)}
  .gcar-item:active::after,.tour-grid .rf-card:active .rf-photo::after{opacity:1!important}
  .mobile-nav a:active{background:#e6f0fd;color:#0a3d91}
}

/* Foco con teclado */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid #2f80d8;outline-offset:3px;border-radius:12px}

/* Menú: hover/activo en azul, sin subrayado */
nav.desktop-nav a:hover,nav.desktop-nav a.active{color:#6db3ff}
nav.desktop-nav a::after,nav.desktop-nav a:hover::after,nav.desktop-nav a.active::after{display:none!important;content:none!important}

/* Sello Tripadvisor en celular: ordenado en 2 columnas */
@media (max-width:700px){
  .rv-top{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;align-items:center;justify-items:start;text-align:left;border-radius:20px;padding:14px 20px;width:calc(100% - 32px);max-width:340px;margin:0 auto 26px}
  .rv-top img{grid-row:1 / span 3;grid-column:1;width:46px;height:46px}
  .rv-top b{grid-column:2;font-size:18px;line-height:1.2}
  .rv-top .rv-dots{grid-column:2}
  .rv-top span:last-child{grid-column:2;font-size:13.5px}
}
.why-us-card .icon{background:#2f80d8!important;color:#fff!important;box-shadow:0 8px 18px rgba(47,128,216,.35)}

/* Menú celular: página activa en azul claro */
.mobile-nav ul li a.active,.mobile-nav ul li a:hover,.mobile-nav .mobile-subnav li a.active{color:#2f80d8!important}

/* Flechas de la galería: sin movimiento, solo cambio de color */
.gcar-btn,.gcar-btn:hover,.gcar-btn:active,.gcar-btn:focus{transform:translateY(-50%)!important;filter:none!important}
@media (hover:hover){.gcar-btn:hover{background:#2f80d8;color:#fff}}

/* Hero inicio en celular: título grande centrado + un solo botón ancho */
@media (max-width:860px){
  .hero-actions .btn{width:min(100%,340px);min-height:54px;font-size:16px}
  .hero-actions .btn-text-full{display:inline!important}
  .hero-actions .btn-text-short{display:none!important}
  .hero-actions{justify-content:center}
}

/* Botones rojos -> azul */
.btn-red,.page-hero .filters button.active,.filters button.active{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.btn-red:hover{background:#2f80d8!important}
.rf-arrows button:hover,#rfPrev:hover,#rfNext:hover{background:#2f80d8!important;color:#fff!important}
.rf-dots i.on{background:#2f80d8!important}

/* Botones azul claro (base) -> azul oscuro al pasar el cursor */
.btn-red,.page-hero .filters button.active,.filters button.active{background:#2f80d8!important;border-color:#2f80d8!important;color:#fff!important}
.btn-red:hover{background:#0a3d91!important}
.rf-arrows button:hover,#rfPrev:hover,#rfNext:hover{background:#2f80d8!important}

/* Hero inicio: botones tipo "pill" en mayúsculas (azul + contorno blanco) */
.hero-actions .btn{border-radius:999px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.hero-actions .btn-red{background:#2f80d8!important;border:2px solid #2f80d8!important;color:#fff!important}
.hero-actions .btn-red:hover{background:#0a3d91!important;border-color:#0a3d91!important}
.hero-actions .btn-outline-white{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff}
.hero-actions .btn-outline-white:hover{background:#fff;color:#0a3d91;border-color:#fff}
@media (max-width:860px){
  .hero-actions{display:flex;gap:10px;flex-wrap:nowrap;justify-content:center}
  .hero-actions .btn{width:auto!important;flex:1 1 0;min-width:0!important;padding:13px 12px;font-size:13.5px;min-height:50px}
  .hero-actions .btn-text-full{display:none!important}
  .hero-actions .btn-text-short{display:inline!important}
}

/* Botones del hero: letra más pequeña y más compactos */
.hero-actions .btn{font-size:12.5px;letter-spacing:.5px;padding:10px 22px;min-height:40px}
@media (max-width:860px){
  .hero-actions{gap:8px}
  .hero-actions .btn{flex:0 0 auto;font-size:12px;padding:9px 18px;min-height:38px}
}

/* Hero inicio en celular: más compacto y sin flechas */
@media (max-width:860px){
  .hero-slide-btn{display:none!important}
  .hero,.hero .wrap{min-height:0!important}
  .hero .wrap{padding-top:92px!important;padding-bottom:58px!important}
  .hero h1{font-size:30px!important;line-height:1.15!important;margin-bottom:16px}
  .hero-actions.center{margin-top:6px}
  .hero-slide-dots{bottom:18px!important}
}
@media (max-width:860px){ .hero{min-height:370px!important;display:flex;align-items:center} .hero .wrap{padding-top:84px!important;padding-bottom:50px!important;width:100%} }
@media (max-width:860px){ .hero{min-height:470px!important} .hero .wrap{padding-top:96px!important;padding-bottom:70px!important} .hero h1{font-size:32px!important} }

/* "Agenda tu próxima experiencia": sin filtro azul sobre la foto */
.cta-final{background:url('images/bandera-chile.jpg') center 62%/cover no-repeat!important}
.cta-final h2{text-shadow:0 2px 14px rgba(0,0,0,.65)}
.cta-final p{text-shadow:0 2px 12px rgba(0,0,0,.6);color:#fff}
.cta-final p{font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 14px rgba(0,0,0,.75)}
/* Tarjeta "¿Buscas una experiencia diferente?": en tablet queda en fila, el botón no se estira */
@media (min-width:701px) and (max-width:860px){
  .gcar-cta{flex-direction:row;align-items:center;gap:24px}
  .gcar-cta > div{flex:1 1 auto;min-width:0}
  .gcar-cta .btn{width:auto!important;flex:none!important;min-width:0!important;white-space:nowrap}
}