/* =========================
   FUENTES / TOKENS GLOBALES
   ========================= */
:root {
  /* 🎨 Marca principal */
  --brand: #9a9662;

  /* 🌿 Paleta unificada */
  --oliva-base:   #94905E;   /* Oliva elegante */
  --oliva-prof:   #6B705C;   /* Oliva profundo */
  --crema:        #F5F5EB;   /* Crema suave */
  --arena:        #C2B280;   /* Arena dorada */
  --carbon:       #4A4A4A;   /* Gris carbón */
  --blanco-roto:  #FAFAFA;   /* Blanco roto */
  --bosque:       #556B5C;   /* Verde bosque apagado */

  /* ✍️ Fuentes del sitio (compatibles con SitioSimple) */
  --heading-font: var(--ss-heading-font, 'Amaranth','Montserrat',system-ui,sans-serif);
  --body-font:    var(--ss-body-font, 'Montserrat',system-ui,sans-serif);

  /* 📐 Variables layout SSX */
  --ssx-max: 1200px;
  --ssx-gap: 28px;
  --ssx-radius: 16px;
  --ssx-shadow: 0 10px 24px rgba(0,0,0,.08);

  /* 🎯 Colores auxiliares SSX */
  --c-text:   #1f2937;
  --c-muted:  #6b7280;
  --c-bg:     #ffffff;
  --c-soft:   #f5f7fb;
  --c-brand:  #0ea5e9;   /* primario */
  --c-brand-600: #0284c7;
}
/* ===============================
   Botones "EXPLORAR MÁS" (cards)
   =============================== */
/* Base .svc-btn (centralizada y reutilizable) */
.svc-btn{
  display:inline-block;
  padding:10px 18px;
  border:1.5px solid rgba(255,255,255,.95);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  border-radius:8px;
  backdrop-filter:blur(2px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease,
    letter-spacing .2s ease,
    color .25s ease;
}
/* Brillo diagonal sutil solo cuando el botón está dentro de .svc-card */
.svc-card .svc-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #f5f5eb 0%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform .6s ease;
  pointer-events: none;
}
/* Hover + Focus (usa color de marca) */
.svc-card .svc-btn:hover,
.svc-card .svc-btn:focus-visible{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.18) inset;
  transform: translateY(-2px);
  letter-spacing: .02em;
  outline: none;
}
.svc-card .svc-btn:hover::after,
.svc-card .svc-btn:focus-visible::after{
  transform: translateX(120%) skewX(-18deg);
}
/* Click */
.svc-card .svc-btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.25) inset;
}
/* =========================
   MENÚ TOP con subrayado
   ========================= */
/* Estilos base del menú */
@media (min-width: 992px) {
  .menu-item {
    position: relative;
    display: inline-block;
    padding: 0 12px;
    font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94905E; /* Oliva elegante */
    text-decoration: none;
    transition: color .25s ease;
  }
/* Subrayado doble animado para .menu-item */
.menu-item:hover { 
  color: var(--arena); /* #C2B280 */
}
.menu-item::before,
.menu-item::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--oliva-base), var(--arena), var(--bosque));
  transform: scaleX(0);
  transition: transform .4s ease-out;
}
/* línea inferior (after) */
.menu-item::after{
  bottom: -6px;
  transform-origin: right;
}
/* línea superior (before) */
.menu-item::before{
  top: -6px;
  transform-origin: left;
}
/* activar ambas en hover */
.menu-item:hover::before,
.menu-item:hover::after{
  transform: scaleX(1);
}
/* Mobile: mantenemos simple, sin underline fancy */
@media (max-width: 991px) {
  .menu-item {
    display: block;
    padding: 12px;
    color: #FAFAFA; /* Blanco roto sobre fondo oscuro */
    border-bottom: 1px solid rgba(107, 112, 92, 0.2); /* Oliva profundo sutil */
  }
}
}
/* =========================
   FOOTER (asegurar visibilidad)
   ========================= */
/* footer { display: block; visibility: visible; opacity: 1; }
.footer-top, .footer-contacts, .contact-row, .datos-contacto { display: block; }
@media (min-width: 768px){ .contact-row { display: flex; } } */

/* =========================
   DROPDOWN con fondo/overlay
   ========================= */
a.dropdown-item{
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color .3s ease;
  border-radius: 0;
}
a.dropdown-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -2;
  pointer-events: none;
}
a.dropdown-item::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.65));
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
  pointer-events: none;
}
a.dropdown-item:hover{ color: #F5F5EB; }
a.dropdown-item:hover::before, a.dropdown-item:hover::after{ opacity: 1; }

/* Imágenes por ítem */
a.dropdown-item[href="/destinos-en-peru"]::before{
  background-image: url('https://ss-static-001.esmsv.com/r/content/host2/0f9a703e0154affc2f31e633c768a5b2//editor/bandera-peru-1.webp');
}
a.dropdown-item[href="/destinos-en-argentina"]::before{
  background-image: url('https://ss-static-001.esmsv.com/r/content/host2/0f9a703e0154affc2f31e633c768a5b2//editor/bandera-argentina-1.webp');
}
a.dropdown-item[href="/otros-servicios"]::before{
  background-image: url('https://ss-static-001.esmsv.com/r/content/host2/0f9a703e0154affc2f31e633c768a5b2//editor/otros-servicios-1.webp');
}

/* =====================================
   Botón con “serpiente” conic-gradient
   ===================================== */
@property --p { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

a.btn.btn-primary{
  position: relative;
  z-index: 0;
  overflow: visible;
  --snake-color: var(--oliva-base);
  --b: 2px;
  --dur: 1.5s;
  --start: 0deg;
  color: var(--crema);
  text-decoration: none;
}
a.btn.btn-primary::before{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--b));
  border-radius: inherit;
  padding: var(--b);
  pointer-events: none;
  z-index: 0;
  --p: 0deg;
  background:
    conic-gradient(from var(--start),
      var(--snake-color) 0deg var(--p),
      transparent var(--p) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: --p var(--dur) linear, filter .25s ease;
}
a.btn.btn-primary:hover::before{
  --p: 360deg;
  filter: drop-shadow(0 0 6px rgba(148,144,94,.55));
}

/* =========================
   BLOQUES “QUIÉNES SOMOS”
   ========================= */
[data-ss-rich-paragraph="true"] .qs-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
[data-ss-rich-paragraph="true"] .qs-hero{
  position:relative; isolation:isolate;
  padding:clamp(48px,6vw,72px) 0;
  color:var(--crema);
  background:var(--carbon);
}
[data-ss-rich-paragraph="true"] .qs-hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.65)),
    var(--hero-bg);
  background-size:cover,cover;
  background-position:center,center;
}
[data-ss-rich-paragraph="true"] .qs-header h2{
  font-family:var(--heading-font); font-weight:700; letter-spacing:.5px;
  margin:0 0 10px; font-size:clamp(28px,4vw,40px)
}
[data-ss-rich-paragraph="true"] .qs-lead{ font:600 16px/1.6 var(--body-font); color:var(--crema); margin:0 0 8px }
[data-ss-rich-paragraph="true"] .qs-sub{ font:500 15px/1.6 var(--body-font); color:rgba(245,245,235,.85); margin:0 0 26px }

/* TEAM */
[data-ss-rich-paragraph="true"] .qs-team{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px)
}
[data-ss-rich-paragraph="true"] .qs-card{
  background:#1f2220; border:1px solid rgba(148,144,94,.6);
  border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
[data-ss-rich-paragraph="true"] .qs-card:hover{
  transform:translateY(-4px); border-color:var(--oliva-base);
  box-shadow:0 16px 34px rgba(0,0,0,.35)
}
[data-ss-rich-paragraph="true"] .qs-photo{aspect-ratio:1/1;background:#222}
[data-ss-rich-paragraph="true"] .qs-photo img{width:100%;height:100%;object-fit:cover;display:block}
[data-ss-rich-paragraph="true"] .qs-body{padding:18px 18px 20px;color:var(--crema)}
[data-ss-rich-paragraph="true"] .qs-body h3{
  font-family:var(--heading-font); font-weight:700; margin:0 0 8px;
  font-size:clamp(18px,2.4vw,22px); color:var(--crema); text-shadow:0 1px 0 rgba(0,0,0,.35)
}
[data-ss-rich-paragraph="true"] .qs-body p{margin:0;font:400 14.5px/1.75 var(--body-font);color:rgba(245,245,235,.92)}
[data-ss-rich-paragraph="true"] .qs-body em{font-style:normal;color:var(--arena)}

/* DIFERENCIA */
[data-ss-rich-paragraph="true"] .qs-diff{background:var(--crema);padding:clamp(40px,6vw,64px) 0}
[data-ss-rich-paragraph="true"] .qs-diff-title{
  font-family:var(--heading-font); color:var(--carbon); text-align:center;
  font-weight:800; letter-spacing:2px; margin:0 0 28px
}
[data-ss-rich-paragraph="true"] .qs-diff-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px
}
[data-ss-rich-paragraph="true"] .qs-diff-card{
  background:var(--blanco-roto);
  border:1px solid rgba(148,144,94,.45);
  border-radius:10px; padding:26px 22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
[data-ss-rich-paragraph="true"] .qs-diff-card:hover{
  transform:translateY(-3px); border-color:var(--oliva-base);
  box-shadow:0 12px 26px rgba(0,0,0,.10)
}
[data-ss-rich-paragraph="true"] .qs-icon{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
[data-ss-rich-paragraph="true"] .qs-icon img{max-height:64px}
[data-ss-rich-paragraph="true"] .qs-diff-card h3{
  font-family:var(--heading-font); color:var(--oliva-prof); font-size:20px; margin:6px 0 10px
}
[data-ss-rich-paragraph="true"] .qs-diff-card p{color:var(--carbon); font:400 14.5px/1.8 var(--body-font); margin:0}

/* Responsive de QS */
@media (max-width:1024px){
  [data-ss-rich-paragraph="true"] .qs-team{grid-template-columns:1fr 1fr}
  [data-ss-rich-paragraph="true"] .qs-diff-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  [data-ss-rich-paragraph="true"] .qs-team,
  [data-ss-rich-paragraph="true"] .qs-diff-grid{grid-template-columns:1fr}
  [data-ss-rich-paragraph="true"] .qs-body{padding:16px}
}

/* Mobile fine-tuning (≤600px) */
@media (max-width: 600px){
  [data-ss-rich-paragraph="true"] .qs-wrap{ padding-inline:16px }
  [data-ss-rich-paragraph="true"] .qs-header h2{ font-size:26px; line-height:1.15; margin-bottom:10px }
  [data-ss-rich-paragraph="true"] .qs-lead{ font-weight:600; font-size:15.5px; line-height:1.55 }
  [data-ss-rich-paragraph="true"] .qs-sub{ font-size:14.5px; line-height:1.55; margin-bottom:20px }
  [data-ss-rich-paragraph="true"] .qs-team{ gap:16px }
  [data-ss-rich-paragraph="true"] .qs-photo{ aspect-ratio:auto; max-height:360px; overflow:hidden }
  [data-ss-rich-paragraph="true"] .qs-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block }
  [data-ss-rich-paragraph="true"] .qs-body{ padding:14px 14px 16px }
  [data-ss-rich-paragraph="true"] .qs-body h3{ font-size:19px; margin-bottom:6px }
  [data-ss-rich-paragraph="true"] .qs-body p{ font-size:14px; line-height:1.6 }
  [data-ss-rich-paragraph="true"] .qs-diff{ padding-top:28px; padding-bottom:40px }
  [data-ss-rich-paragraph="true"] .qs-diff-title{ font-size:20px; letter-spacing:1.2px; margin-bottom:16px }
  [data-ss-rich-paragraph="true"] .qs-diff-grid{ gap:14px }
  [data-ss-rich-paragraph="true"] .qs-diff-card{ padding:18px 16px }
  [data-ss-rich-paragraph="true"] .qs-diff-card h3{ font-size:18px; margin:4px 0 6px }
  [data-ss-rich-paragraph="true"] .qs-diff-card p{ font-size:14px; line-height:1.6 }
  [data-ss-rich-paragraph="true"] .qs-hero{ padding-block:36px }
}

/* =========================
   SECCIÓN DESTINOS (grid)
   ========================= */
.svc-section{
  position: relative;
  padding: clamp(36px, 4vw, 56px) 0;
  background:
    radial-gradient(150% 100% at 0% 0%, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #94905E 0%, #556B5C 100%);
}
.svc-section::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)), var(--bg);
  background-size: cover; background-position: center;
  mix-blend-mode: multiply;
}
.svc-wrap{
  max-width: 1200px; margin: 0 auto; padding: 0 20px; position:relative; z-index:1;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(32px, 4vw, 64px);
}
.svc-title{
  color:#F5F5EB; text-align:left; align-self:center; max-width:360px;
}
.svc-title h2{
  font-family: var(--heading-font);
  font-weight: 800; line-height: 1.05; letter-spacing: .5px;
  font-size: clamp(34px, 4.2vw, 52px);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  margin: 0;
}
.svc-grid{ display:grid; grid-template-columns: repeat(3, minmax(320px, 1fr)); gap: clamp(16px, 2vw, 28px) }
.svc-card{
  position:relative; height: 620px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(250,250,250,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.30);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.36);
  border-color: rgba(250,250,250,.35);
}
.svc-card > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: contrast(.95) brightness(.88);
  transform: scale(1); transition: transform .8s ease;
}
.svc-card:hover > img{ transform: scale(1.04); }
.svc-grad{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%);
}
.svc-badge{
  position:absolute; top:16px; right:16px;
  font-size:.8rem; color:#fff; letter-spacing:.08em; opacity:.95;
  padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.35);
  border:1px solid rgba(148,144,94,.65); font-weight:700;
}
.svc-body{ position:absolute; left:18px; right:18px; bottom:18px; color:#fff; }
.svc-body p{ margin:0 0 4px; font-size:.9rem; opacity:.95; letter-spacing:.08em; color:#F5F5EB; }
.svc-body h3{
  margin:0 0 12px; font-size:1.45rem; font-weight:800; color:#F5F5EB;
  font-family: var(--heading-font);
}
@media (max-width: 1199.98px){ .svc-card{ height:560px } }
@media (max-width: 991.98px){
  .svc-wrap{ grid-template-columns: 1fr; align-items: start; gap: 24px }
  .svc-title{ max-width: none; text-align: center; margin-bottom: 4px }
  .svc-grid{ grid-template-columns: repeat(2, minmax(280px,1fr)) }
  .svc-card{ height:520px }
}
@media (max-width: 575.98px){
  .svc-grid{ grid-template-columns: 1fr }
  .svc-card{ height:440px }
  .svc-title h2{ font-size: 34px }
}

/* Títulos “pd-title” (usa Amaranth) */
h1.pd-title,
#peru-destinos .pd-title,
#argentina-destinos .pd-title,
#otros-servicios .pd-title{
  font-family:'Amaranth', var(--heading-font);
  font-weight:800; letter-spacing:.5px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: clamp(28px, 4.6vw, 48px);
  margin: 0 0 18px;
}

/* =========================================
   DESTINOS EN PERÚ (panel + carrusel limpio)
   ========================================= */
#peru-destinos{
  --oliva-elegante: var(--oliva-base);
  --oliva-profundo: var(--oliva-prof);
  --crema-suave: var(--crema);
  --arena-dorada: var(--arena);
  --gris-carbon: var(--carbon);
  --blanco-roto: var(--blanco-roto);
  --verde-bosque: var(--bosque);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --shadow-elev: 0 14px 30px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%);
  --overlay-strong: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.8) 100%);
}
.peru-destinos{
  background: var(--gris-carbon);
  padding: 48px 18px 80px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #fff;
}
.peru-destinos .pd-container{ max-width: 1200px; margin: 0 auto; }
.peru-destinos .pd-title{ text-align:center; font-size:clamp(28px,4.6vw,48px); font-weight:800; margin:0 0 18px; color:#fff }
.peru-destinos .pd-sub{ text-align:center; max-width:760px; margin:0 auto 28px; color:#e8e8e8; font-size:clamp(14px,2vw,18px) }

/* Panel (details transparente) */
.peru-destinos .city-panel{ background: transparent; border: 0; box-shadow: none; overflow: visible; margin: 22px 0 30px }
.peru-destinos .city-panel[open] .btn-toggle svg{ transform: rotate(180deg) }

/* Header */
.peru-destinos .city-header{
  list-style:none; cursor:pointer;
  position:relative; min-height:96px; padding:22px;
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  color:#fff; background-position:center; background-size:cover; border-radius:22px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 28px rgba(0,0,0,.24);
  isolation:isolate; overflow:hidden;
}
.peru-destinos .city-header::-webkit-details-marker{ display:none }
.peru-destinos .city-header::marker{ content:"" }
.peru-destinos .city-header::after{
  content:""; position:absolute; inset:0; background: var(--overlay-strong);
  pointer-events:none; z-index:0; border-radius: inherit;
}
.peru-destinos .city-name{
  position:relative; z-index:1;
  font-size:clamp(20px,3.2vw,28px); font-weight:800; text-shadow:0 2px 14px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:10px;
}
.peru-destinos .city-name .badge{
  display:inline-block; font-size:12px; letter-spacing:.8px; padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter: blur(3px);
}
.peru-destinos .city-actions{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px }
.peru-destinos .btn{
  appearance:none; border:none; border-radius:999px; padding:10px 16px;
  font-weight:700; font-size:14px; white-space:nowrap; line-height:1; user-select:none;
}
.peru-destinos .btn-about{ background: rgba(250,250,250,.9); color: var(--gris-carbon); border:1px solid rgba(255,255,255,.6) }
.peru-destinos .btn-about:hover{ background:#fff }
.peru-destinos .btn-toggle{ display:inline-flex; align-items:center; gap:8px; background: var(--oliva-elegante); color:#fff; box-shadow: 0 6px 18px rgba(148,144,94,.32) }
.peru-destinos .btn-toggle svg{ width:18px; height:18px; transition: transform .25s ease }

/* Body */
.peru-destinos .city-body{ display:none; margin-top:14px; padding:0; background:transparent; border:0 }
.peru-destinos .city-panel[open] .city-body{ display:block }

/* Carrusel */
.peru-destinos .excursions-wrap{ padding:0 }
.peru-destinos .excursions-carousel{ position: relative }
.peru-destinos .exc-viewport{
  position:relative; overflow:hidden;
  padding: 8px 0 12px; margin: -8px 0 -12px;
  transform: translateZ(0);
}
.peru-destinos .exc-track{
  --gap:16px; --cols:4;
  display:flex; gap:var(--gap);
  will-change:transform; transition: transform .45s ease;
  padding:0;
}
.peru-destinos .exc-card{
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .1px);
  position: relative; height: 360px;
  border-radius: 18px; overflow: hidden;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  box-shadow: var(--shadow-elev); display:flex; align-items:flex-end; color:#fff; isolation:isolate;
}
.peru-destinos .exc-card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%);
  z-index: 0; pointer-events: none; border-radius: inherit;
}
.peru-destinos .exc-content{ width:100%; padding:16px; display:grid; gap:10px; position:relative; z-index:1 }
.peru-destinos .exc-title{
  font-size:1.25rem; font-weight:800; color:#F5F5EB;
  font-family: var(--heading-font); margin:0 0 8px; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Reusa botón global */
#peru-destinos .svc-card .svc-btn{ /* (hereda de .svc-btn) */ }

/* Paginación */
.peru-destinos .exc-dots{
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding: 12px 0 0; z-index:2;
}
.peru-destinos .exc-dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.7);
  cursor:pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.peru-destinos .exc-dot[aria-current="true"]{
  background:var(--oliva-base); box-shadow:0 0 0 2px rgba(255,255,255,.35);
  transform: scale(1.12);
}

/* Flechas */
.peru-destinos .exc-nav-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: var(--oliva-base); color:#fff; border:1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  cursor:pointer; transition: filter .2s ease, transform .2s ease; z-index:3;
}
.peru-destinos .exc-nav-btn:hover{ filter:brightness(1.06); transform:translateY(-50%) scale(1.05) }
.peru-destinos .exc-nav-prev{ left:-6px }
.peru-destinos .exc-nav-next{ right:-6px }
.peru-destinos .exc-nav-btn[disabled]{ opacity:.45; cursor:default; filter:grayscale(40%) }

@media (max-width: 959.98px){ .peru-destinos .exc-track{ --cols:2 } }
@media (max-width: 639.98px){ .peru-destinos .exc-track{ --cols:1 } }

/* =========================================
   DESTINOS EN ARGENTINA (alineado a Perú)
   ========================================= */
#argentina-destinos{
  --oliva-elegante: var(--oliva-base);
  --oliva-profundo: var(--oliva-prof);
  --crema-suave: var(--crema);
  --arena-dorada: var(--arena);
  --gris-carbon: var(--carbon);
  --blanco-roto: var(--blanco-roto);
  --verde-bosque: var(--bosque);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --shadow-elev: 0 14px 30px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12);
  --overlay-strong: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.75) 100%);
}
.arg-destinos{
  background: var(--gris-carbon);
  padding: 48px 18px 80px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #fff;
}
.arg-destinos .pd-container{ max-width:1200px; margin:0 auto }
.arg-destinos .pd-title{ text-align:center; font-size:clamp(28px,4.6vw,48px); font-weight:800; margin:0 0 18px; color:#fff }
.arg-destinos .pd-sub{ text-align:center; max-width:760px; margin:0 auto 28px; color:#e8e8e8; font-size:clamp(14px,2vw,18px) }

.arg-destinos .city-panel{ background: transparent; border:0; box-shadow:none; overflow:visible; margin:18px 0 28px }
.arg-destinos .city-panel[open] .btn-toggle svg{ transform: rotate(180deg) }
.arg-destinos .city-header{
  list-style:none; cursor:pointer; position:relative; min-height:96px; padding:22px;
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  color:#fff; background-position:center; background-size:cover; border-radius:22px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 28px rgba(0,0,0,.24);
  isolation:isolate; overflow:hidden;
}
.arg-destinos .city-header::-webkit-details-marker{ display:none }
.arg-destinos .city-header::marker{ content:"" }
.arg-destinos .city-header::after{
  content:""; position:absolute; inset:0; background: var(--overlay-strong);
  pointer-events:none; z-index:0; border-radius:inherit;
}
.arg-destinos .city-name{
  position:relative; z-index:1; font-size:clamp(20px,3.2vw,28px); font-weight:800;
  text-shadow:0 2px 14px rgba(0,0,0,.45); display:flex; align-items:center; gap:10px;
}
.arg-destinos .city-name .badge{
  display:inline-block; font-size:12px; letter-spacing:.8px; padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter: blur(3px);
}
.arg-destinos .city-actions{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px }
.arg-destinos .btn{
  appearance:none; border:none; border-radius:999px; padding:10px 16px;
  font-weight:700; font-size:14px; white-space:nowrap; line-height:1; user-select:none;
}
.arg-destinos .btn-about{ background: rgba(250,250,250,.9); color: var(--gris-carbon); border:1px solid rgba(255,255,255,.6) }
.arg-destinos .btn-about:hover{ background:#fff }
.arg-destinos .btn-toggle{ display:inline-flex; align-items:center; gap:8px; background: var(--oliva-elegante); color:#fff; box-shadow: 0 6px 18px rgba(148,144,94,.32) }
.arg-destinos .btn-toggle svg{ width:18px; height:18px; transition: transform .25s ease }

.arg-destinos .city-body{ overflow:hidden; background: linear-gradient(180deg, #FAFAFA 0%, #F5F5EB 100%); border-top:1px solid rgba(0,0,0,.06); max-height:0; transition:max-height .45s ease }
.arg-destinos .city-panel[open] .city-body{ max-height:1200px }

.arg-destinos .excursions-wrap{ padding:18px }
.arg-destinos .excursions-grid{ display:grid; gap:16px; grid-template-columns: repeat(1, minmax(0,1fr)) }
@media (min-width: 640px){ .arg-destinos .excursions-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 960px){ .arg-destinos .excursions-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) } }

.arg-destinos .exc-card{
  position:relative; height:230px; border-radius: 18px; overflow:hidden;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  box-shadow: var(--shadow-elev); display:flex; align-items:flex-end; color:#fff; isolation:isolate; text-decoration:none;
}
.arg-destinos .exc-card::before{ content:""; position:absolute; inset:0; background: var(--overlay); pointer-events:none; z-index:0; }
.arg-destinos .exc-content{ width:100%; padding:16px; display:grid; gap:10px; position:relative; z-index:1; }
.arg-destinos .exc-title{
  font-family: var(--heading-font); font-weight:800; font-size:1.25rem; color:#F5F5EB; margin:0 0 8px; text-shadow:0 1px 0 rgba(0,0,0,.35)
}

/* Match visual de .svc-card */
#argentina-destinos .exc-card.svc-card{
  border:1px solid rgba(250,250,250,.22);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:360px;
}
#argentina-destinos .exc-card.svc-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.36);
  border-color: rgba(250,250,250,.35);
}
@media (max-width: 991.98px){ #argentina-destinos .exc-card.svc-card{ height:320px } }
@media (max-width: 575.98px){ #argentina-destinos .exc-card.svc-card{ height:280px } }

/* =========================================
   OTROS SERVICIOS (alineado a Destinos)
   ========================================= */
#otros-servicios{
  --oliva-base:var(--oliva-base);
  --oliva-prof:var(--oliva-prof);
  --crema:var(--crema);
  --carbon:var(--carbon);
  --radius:16px;
  --shadow: 0 16px 36px rgba(0,0,0,.30);
}
.otros-servicios{
  background:
    linear-gradient(180deg, rgba(148,144,94,.55) 0%, rgba(148,144,94,.15) 100%),
    #6B705C;
  color:#fff; padding:48px 18px 80px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.otros-servicios .os-container{ max-width:1200px; margin:0 auto }
.otros-servicios .pd-title{ text-align:center; font-weight:800; color:#fff; font-size:clamp(28px,4.6vw,48px); margin:0 0 18px }
.otros-servicios .pd-sub{ text-align:center; max-width:760px; margin:0 auto 28px; color:rgba(245,245,235,.9); font-size:clamp(14px,2vw,18px) }
.otros-servicios .os-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px,1fr)); gap: clamp(16px, 2vw, 28px) }

.otros-servicios .svc-card.os-card{
  position:relative; height:520px; border-radius:var(--radius);
  overflow:hidden; border:1px solid rgba(250,250,250,.22);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration:none;
}
.otros-servicios .svc-card.os-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.36);
  border-color: rgba(250,250,250,.35);
}
.otros-servicios .svc-card.os-card > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: contrast(.95) brightness(.88);
  transform: scale(1); transition: transform .8s ease;
}
.otros-servicios .svc-card.os-card:hover > img{ transform: scale(1.04) }
.otros-servicios .svc-grad{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%);
}
.otros-servicios .svc-badge{
  position:absolute; top:16px; right:16px;
  font-size:.8rem; color:#fff; letter-spacing:.08em;
  padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.35);
  border:1px solid rgba(148,144,94,.65); font-weight:700;
}
.otros-servicios .svc-body{ position:absolute; left:18px; right:18px; bottom:18px; color:#fff }
.otros-servicios .svc-body p{ margin:0 0 4px; font-size:.9rem; opacity:.95; letter-spacing:.08em; color:var(--crema) }
.otros-servicios .svc-body h3{
  margin:0 0 12px; font-size:1.45rem; font-weight:800; color:var(--crema);
  font-family: var(--heading-font);
}
/* Reducir 15% la altura de las tarjetas SOLO en la vista "Otros Servicios" */
#otros-servicios-app .svc-card{ height:442px; }        /* 520 × 0.85 */
@media (max-width:991.98px){
  #otros-servicios-app .svc-card{ height:408px; }      /* 480 × 0.85 */
}
@media (max-width:575.98px){
  #otros-servicios-app .svc-card{ height:357px; }      /* 420 × 0.85 */
}


/* =========================================
   COMPONENTE “Detalle de Excursión” (ssx-)
   ========================================= */
.ssx-excursion{
  --brand-oliva: var(--oliva-base);
  --brand-oliva-profundo: var(--oliva-prof);
  --brand-crema: var(--crema);
  --brand-arena: var(--arena);
  --brand-carbon: var(--carbon);
  --brand-blanco: var(--blanco-roto);
  --brand-bosque: var(--bosque);

  --color-bg: var(--brand-crema);
  --color-surface: var(--brand-blanco);
  --color-text: var(--brand-carbon);
  --color-primary: var(--brand-oliva);
  --color-accent: var(--brand-oliva-profundo);
  --color-muted: #E6E6DC;
  --color-success: var(--brand-bosque);
  --color-danger: #B24E4E;

  --font-base: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-1: clamp(1.10rem, 1.2vw + .55rem, 1.45rem);
  --fs-2: clamp(1.35rem, 1.6vw + .65rem, 1.90rem);
  --fs-3: clamp(.94rem, .4vw + .8rem, 1.05rem);

  --maxw: 1140px;
  --radii: 14px;
  --radii-lg: 18px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.08);
  --shadow:    0 10px 26px rgba(0,0,0,.10);
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem;

  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.55;
  background: transparent;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 24px);
  overflow-x: clip; /* evita barras por sombras internas */
}
.ssx-excursion, .ssx-excursion *{ box-sizing:border-box }
.ssx-excursion img{ display:block; max-width:100%; height:auto }

.ssx-excursion__title{ font-size: var(--fs-2); margin:0 0 var(--space-2); color:var(--brand-carbon) }
.ssx-excursion__subtitle{ font-size: var(--fs-1); margin:0 0 var(--space-2); color:var(--brand-carbon) }
.ssx-excursion__text{ font-size: var(--fs-3); color: var(--brand-carbon) }
.ssx-excursion__section {
    margin-block-start: 0;
    margin-block-end: var(--space-4);
}
.ssx-excursion__hero{ margin: 0 0 var(--space-4) }
.ssx-excursion__hero-img{
  width:100%; aspect-ratio: 28/4 !important; object-fit: cover;
  border-radius: 0; box-shadow: var(--shadow)
}
@media (min-width: 768px){ .ssx-excursion__hero-img{ aspect-ratio: 16/6 } }

.ssx-excursion__grid{ display:grid; gap: var(--space-4) }
@media (min-width:768px){ .ssx-excursion__grid{ grid-template-columns: 1fr .33fr; align-items:start } }
@media (min-width:1024px){ .ssx-excursion__grid{ grid-template-columns: minmax(0,1fr) 360px } }
@media (min-width:1440px){ .ssx-excursion__grid{ grid-template-columns: minmax(0,1fr) 400px } }

.ssx-excursion__section--intro{
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: var(--radii-lg);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--shadow-sm);
}

.ssx-excursion__card{
  background: color-mix(in srgb, var(--brand-blanco) 85%, var(--brand-crema) 15%);
  border: 1px solid var(--color-muted);
  border-radius: var(--radii-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.ssx-excursion__card-title{ margin:0 0 var(--space-2); color: var(--brand-carbon) }

.ssx-excursion__form{ display:grid; gap: var(--space-2) }
.ssx-excursion__label{ font-weight:600; font-size:.95rem; color:var(--brand-carbon) }
.ssx-excursion__input, .ssx-excursion__textarea{
  width:100%; padding:.85rem 1rem; font-size:.98rem;
  border-radius: 12px; border:1px solid var(--color-muted); background:#fff;
}
.ssx-excursion__input:focus, .ssx-excursion__textarea:focus{
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-color: var(--color-primary);
}
.ssx-excursion__btn{ border:0; padding:.9rem 1.1rem; border-radius:12px; cursor:pointer; font-weight:800; text-transform:uppercase; letter-spacing:.02em }
.ssx-excursion__btn--primary{ background: var(--color-accent); color:#fff; box-shadow: var(--shadow-sm) }
.ssx-excursion__btn--primary:hover{ filter: brightness(1.05) }

.ssx-excursion__carousel{
  display:grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: var(--space-2); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom: var(--space-1);
}
@media (min-width:768px){ .ssx-excursion__carousel{ grid-auto-columns: 50% } }
@media (min-width:1200px){ .ssx-excursion__carousel{ grid-auto-columns: 33.333% } }
.ssx-excursion__carousel::-webkit-scrollbar{ height:8px }
.ssx-excursion__carousel::-webkit-scrollbar-thumb{ background:#c7cabb; border-radius:8px }
.ssx-excursion__carousel-item{ scroll-snap-align:start; border-radius: var(--radii-lg); overflow:hidden; box-shadow: var(--shadow) }
.ssx-excursion__carousel-item img{ width:100%; height:100%; aspect-ratio:16/9; object-fit:cover }
.ssx-excursion__carousel-nav{ display:flex; gap: var(--space-2); justify-content:flex-end; margin-top: var(--space-2) }
.ssx-excursion__arrow{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; background: var(--brand-carbon); color:#fff; text-decoration:none; font-size:1.4rem; box-shadow: var(--shadow-sm) }

.ssx-excursion__itinerary{ display:grid; gap: var(--space-3) }
.ssx-excursion__day{
  display:grid; grid-template-columns: 64px 1fr; gap: var(--space-2);
  background: var(--color-primary); color:#fff; border-radius: var(--radii-lg); box-shadow: var(--shadow); overflow:hidden;
}
.ssx-excursion__day-badge{
  background: color-mix(in srgb, var(--color-primary) 82%, black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; font-weight:800;
}
.ssx-excursion__day-badge span{ font-size:.82rem; opacity:.9; letter-spacing:.06em; text-transform:uppercase }
.ssx-excursion__day-badge strong{ font-size:1.35rem; line-height:1 }
.ssx-excursion__day-content{ padding: var(--space-3) }
.ssx-excursion__day-title{ margin:0 0 .35rem }

.ssx-excursion__features{ display:grid; gap: var(--space-3) }
@media (min-width:768px){ .ssx-excursion__features{ grid-template-columns: 1fr 1fr } }
.ssx-excursion__features-col{
  background: var(--color-surface); border:1px solid var(--color-muted); border-radius: var(--radii-lg);
  padding: var(--space-3); box-shadow: var(--shadow-sm);
}
.ssx-excursion__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.ssx-excursion__list-item{ display:flex; align-items:center; gap:.6rem }
.ssx-excursion__icon{ width:18px; height:18px; fill: var(--color-success); flex:0 0 auto }
.ssx-excursion__list-item--no .ssx-excursion__icon{ fill: var(--color-danger) }

.ssx-excursion__related{ margin-top: var(--space-5) }
.ssx-excursion__related-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding: var(--space-2) .25rem var(--space-1);
}
@media (min-width:768px){  .ssx-excursion__related-track{ grid-auto-columns: 50% } }
@media (min-width:1024px){ .ssx-excursion__related-track{ grid-auto-columns: 33% } }
.ssx-excursion__related-card{
  position:relative; height: clamp(340px, 42vw, 480px);
  border-radius: 20px; overflow:hidden; box-shadow: var(--shadow);
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 8%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%), var(--bg) center/cover no-repeat;
  scroll-snap-align: start;
}
.ssx-excursion__badge{
  position:absolute; top:14px; right:14px;
  background: rgba(74,74,74,.85); color:#fff; font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem;
  padding:.4rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.ssx-excursion__related-content{
  position:absolute; inset:auto 0 0 0; padding: 1.1rem 1.2rem 1.25rem; display:grid; gap:.55rem;
}
.ssx-excursion__kicker{ color: rgba(255,255,255,.88); text-transform: uppercase; letter-spacing:.12em; font-weight:700; font-size:.8rem }
.ssx-excursion__related-title{
  margin:0; color:#fff; font-weight:800; font-size: clamp(1.05rem, 1.2vw + .7rem, 1.55rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.ssx-excursion__cta{
  margin-top:.4rem; display:inline-block; text-decoration:none; color:#fff; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding:.65rem .9rem;
  border-radius:12px; border:2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.05); box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ssx-excursion__cta:hover{ background: rgba(255,255,255,.12) }
.ssx-excursion__related-nav{ display:flex; gap: var(--space-2); justify-content:flex-end; margin-top: var(--space-2) }
.ssx-excursion__related-nav .ssx-excursion__arrow{ background: var(--brand-carbon); color:#fff }

/* Full-bleed opcional */
@media (min-width: 1024px){
  .ssx-excursion{
    --edge-padding: clamp(16px, 3vw, 40px);
    width: 100vw; max-width: 100vw;
    margin-left: 50%; transform: translateX(-50%);
    padding-inline: var(--edge-padding);
  }
  .ssx-excursion[data-boxed="true"]{
    width:auto; max-width: var(--maxw);
    transform:none; margin-inline:auto;
    padding-inline: clamp(16px, 2.5vw, 24px);
  }
}
/* ====== DESTINOS (Perú + Argentina) — carrusel horizontal unificado ====== */

/* 0) Fondo oscuro coherente y body sin “cajas” */
#peru-destinos .peru-destinos,
#argentina-destinos .arg-destinos{ background:#4A4A4A; color:#fff; }
#peru-destinos .city-panel,
#argentina-destinos .city-panel{ background:transparent; border:0; box-shadow:none; overflow:visible; margin:22px 0 30px; }
#peru-destinos .city-body,
#argentina-destinos .city-body{ display:none; margin-top:14px; padding:0; background:transparent; border:0; }
#peru-destinos .city-panel[open] .city-body,
#argentina-destinos .city-panel[open] .city-body{ display:block; }

/* 1) Cabecera igual en ambos */
#peru-destinos .city-header,
#argentina-destinos .city-header{
  position:relative; min-height:96px; padding:22px;
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  color:#fff; background-position:center; background-size:cover; border-radius:22px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 28px rgba(0,0,0,.24);
  overflow:hidden; isolation:isolate;
}
#peru-destinos .city-header::after,
#argentina-destinos .city-header::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.8) 100%);
  pointer-events:none; border-radius:inherit;
}

/* 2) CONTENEDOR SCROLLER — usa SIEMPRE .excursions-grid o .exc-track */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{ padding:0; }

#peru-destinos :is(.excursions-grid, .exc-track),
#argentina-destinos :is(.excursions-grid, .exc-track){
  --gap:16px;
  --cols:4;                                /* 4 por vista (desktop) */
  display:grid;
  grid-auto-flow: column;                   /* UNA sola fila */
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;            /* snap opcional */
  padding: 8px 0 12px;                      /* colchón p/ sombras */
  margin: -8px 0 -12px;
  /* Cancelá cualquier grid-template-columns viejo */
  grid-template-columns: none;
}
@media (max-width: 959.98px){
  #peru-destinos :is(.excursions-grid, .exc-track),
  #argentina-destinos :is(.excursions-grid, .exc-track){ --cols:2; }
}
@media (max-width: 639.98px){
  #peru-destinos :is(.excursions-grid, .exc-track),
  #argentina-destinos :is(.excursions-grid, .exc-track){ --cols:1; }
}

/* 3) TARJETA — misma proporción/look que tus cards grandes */
#peru-destinos .exc-card,
#argentina-destinos .exc-card{
  position:relative;
  aspect-ratio: 3 / 4;                      /* NO alargadas */
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(250,250,250,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.30);
  background:#222 center/cover no-repeat;   /* fallback si no hay img */
  color:#fff; display:flex; align-items:flex-end; text-decoration:none; isolation:isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  scroll-snap-align: start;
  min-width: 0;                              /* evita saltos en iOS */
}
#peru-destinos .exc-card::before,
#argentina-destinos .exc-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%);
  pointer-events:none; z-index:0;
}
#peru-destinos .exc-card:hover,
#argentina-destinos .exc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0,0,0,.36);
  border-color: rgba(250,250,250,.35);
}
#peru-destinos .exc-content,
#argentina-destinos .exc-content{ position:relative; z-index:1; width:100%; padding:16px; display:grid; gap:10px; }
#peru-destinos .exc-title,
#argentina-destinos .exc-title{
  font-family: var(--ss-heading-font,'Amaranth','Montserrat',system-ui,sans-serif);
  font-weight:800; font-size:1.25rem; color:#F5F5EB; margin:0 0 8px; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* 4) Ocultar restos del slider viejo (si existieran) */
#peru-destinos .exc-dots, #peru-destinos .exc-nav-btn,
#argentina-destinos .exc-dots, #argentina-destinos .exc-nav-btn{ display:none; }
/* ===== Carrusel (Perú + Argentina): sin scrollbar + flechas ===== */

/* El contenedor que scrollea */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{ position: relative; }

#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track),
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track){
  /* ocultar scrollbar en todos los navegadores */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
  overscroll-behavior-x: contain;
}
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::-webkit-scrollbar,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::-webkit-scrollbar{
  display:none; height:0;
}

/* Flechas (mismo estilo para ambos) */
.exc-nav-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  display:flex !important; align-items:center; justify-content:center;
  background: var(--oliva-base); color:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  cursor:pointer; transition: filter .2s ease, transform .2s ease;
  z-index: 5;
}
.exc-nav-btn:hover{ filter: brightness(1.06); transform: translateY(-50%) scale(1.05); }
.exc-nav-btn[disabled]{ opacity:.45; cursor: default; filter: grayscale(40%); }
.exc-nav-btn svg{ width:18px; height:18px; display:block; }

/* Posición: pegadas al carrusel (ligeramente “afuera”) */
.exc-nav-prev{ left:-6px; }
.exc-nav-next{ right:-6px; }

/* Fades laterales sutiles para sugerir continuidad */
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track),
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track){ position: relative; }
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before,
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after{
  content:""; position:absolute; top:0; bottom:0; width:36px; pointer-events:none; z-index:4;
}
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before{
  left:0;  background: linear-gradient(to right, rgba(74,74,74,.85), rgba(74,74,74,0));
}
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after{
  right:0; background: linear-gradient(to left,  rgba(74,74,74,.85), rgba(74,74,74,0));
}

/* Por si quedó alguna regla vieja ocultando flechas, la pisamos: */
#peru-destinos .exc-nav-btn,
#argentina-destinos .exc-nav-btn{ display:flex !important; }
/* === FIX: quitar difuminados laterales y asegurar flechas visibles === */

/* nada de fades a los lados */
#peru-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::before,
#peru-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::after,
#argentina-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::before,
#argentina-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::after{
  content: none !important;
  background: none !important;
  width: 0 !important;
}

/* no escondas las flechas, sólo los dots */
#peru-destinos .exc-dots,
#argentina-destinos .exc-dots{ display:none !important; }

#peru-destinos .exc-nav-btn,
#argentina-destinos .exc-nav-btn{
  display:flex !important;
}

/* aseguro que el contenedor de flechas no recorte nada */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{ position:relative; overflow:visible; }

/* por si algún ancestor tiene overflow oculto */
#peru-destinos .city-body,
#argentina-destinos .city-body{ overflow:visible !important; }
/* Quitar fades laterales */
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before,
#peru-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::before,
#argentina-destinos :is(.exc-viewport, .excursions-grid, .exc-track)::after{
  content: none !important; background: none !important;
}

/* Nunca ocultar flechas (solo ocultamos los dots) */
#peru-destinos .exc-dots, #argentina-destinos .exc-dots{ display:none !important; }
#peru-destinos .exc-nav-btn, #argentina-destinos .exc-nav-btn{ display:flex !important; }
/* que el wrap no recorte nada */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{
  position: relative;
  overflow: visible;
}

/* flechas fuera del carrusel */
#peru-destinos .exc-nav-prev,
#argentina-destinos .exc-nav-prev{ left: -24px; }   /* antes: -6px */
#peru-destinos .exc-nav-next,
#argentina-destinos .exc-nav-next{ right: -24px; }  /* antes: -6px */

/* tamaño/posición un poco más contenida en mobile */
@media (max-width: 680px){
  .exc-nav-btn{ width: 36px; height: 36px; }
  #peru-destinos .exc-nav-prev,
  #argentina-destinos .exc-nav-prev{ left: -18px; }
  #peru-destinos .exc-nav-next,
  #argentina-destinos .exc-nav-next{ right: -18px; }
}
/* === PARCHE CARRUSEL: flechas afuera + sin fades + sombras visibles === */

/* 1) Canaletas laterales para que las flechas NO pisen las tarjetas */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{
  position: relative;
  padding-inline: 40px !important;   /* espacio para las flechas */
  overflow: visible !important;       /* que nada se recorte */
}

/* 2) Flechas dentro de la canaleta */
#peru-destinos .excursions-wrap .exc-nav-btn,
#argentina-destinos .excursions-wrap .exc-nav-btn{
  z-index: 10 !important;             /* por encima de cualquier overlay */
  width: 40px; height: 40px; border-radius: 999px;
}

/* posición precisa (no pisan las cards) */
#peru-destinos .excursions-wrap .exc-nav-prev,
#argentina-destinos .excursions-wrap .exc-nav-prev{ left: -20px !important; }
#peru-destinos .excursions-wrap .exc-nav-next,
#argentina-destinos .excursions-wrap .exc-nav-next{ right: -20px !important; }

@media (max-width: 680px){
  #peru-destinos .excursions-wrap,
  #argentina-destinos .excursions-wrap{ padding-inline: 28px !important; }

  #peru-destinos .excursions-wrap .exc-nav-prev,
  #argentina-destinos .excursions-wrap .exc-nav-prev{ left: 6px !important; }
  #peru-destinos .excursions-wrap .exc-nav-next,
  #argentina-destinos .excursions-wrap .exc-nav-next{ right: 6px !important; }
}

/* 3) Quitar definitivamente los fades laterales (causaban el “detalle negro”) */
#peru-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::before,
#peru-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::after,
#argentina-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::before,
#argentina-destinos :is(.exc-viewport,.excursions-grid,.exc-track)::after{
  content: none !important;
  display: none !important;
}

/* 4) Dejar que las sombras respiren (no recortar vertical) */
#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  overflow-y: visible !important;        /* antes estaba hidden */
  padding-block: 14px !important;        /* colchón para sombras */
  margin-block: -14px !important;        /* mantiene el alto visual */
}

/* (opcional) Suavizar un toque la sombra de cada tarjeta para que se funda mejor */
#peru-destinos .exc-card,
#argentina-destinos .exc-card{
  box-shadow: 0 18px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12) !important;
}
.exc-nav-btn svg,
.exc-nav-btn svg * { fill: none; }
#peru-destinos .exc-card,
#argentina-destinos .exc-card{
  box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
}
/* === Limpieza del intento anterior (por si quedó cacheado) === */
#peru-destinos .excursions-wrap::after,
#argentina-destinos .excursions-wrap::after{
  content: none !important;
}

/* === Desvanecido real: se aplica como máscara al contenedor === */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{
  position: relative;
  overflow: visible;              /* no recorta flechas/sombras laterales */
  /* Ajustá estos cortes si querés más o menos fade al final */
  --fade-hard: 82%;               /* hasta acá se ve 100% */
  --fade-soft: 92%;               /* desde acá empieza a suavizar */
  /* Safari/WebKit */
  -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--fade-hard),
      rgba(0,0,0,.75) var(--fade-soft),
      rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  /* Estándar (Firefox/Chromium) */
  mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--fade-hard),
      rgba(0,0,0,.75) var(--fade-soft),
      rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Por si alguna regla vieja le mete fondo a la “city-body” */
#peru-destinos .city-body,
#argentina-destinos .city-body{
  background: transparent !important;
  border: 0 !important;
}
/* Quitar cualquier máscara previa en el wrap (para no cortar flechas) */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{
  -webkit-mask: none !important;
  mask: none !important;
  position: relative;
  overflow: visible; /* que no recorte las flechas */
}

/* Suavizado del “corte” sólo sobre el área que scrollea (no afecta flechas) */
#peru-destinos :is(.excursions-grid, .exc-track),
#argentina-destinos :is(.excursions-grid, .exc-track){
  /* podés ajustar estos dos valores para más/menos fade */
  --fade-hard: 86%;  /* hasta acá se ve 100% */
  --fade-soft: 96%;  /* desde acá se desvanece */

  /* un pelín más de colchón abajo ayuda al fade */
  padding-bottom: 18px;

  /* máscara: visible arriba, se desvanece al final */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--fade-hard),
    rgba(0,0,0,.75) var(--fade-soft),
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--fade-hard),
    rgba(0,0,0,.75) var(--fade-soft),
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Asegurar flechas por encima del scroller en el apilado */
.exc-nav-btn{ z-index: 5; }
/* Anti-borde para el fade del scroller */
#peru-destinos :is(.excursions-grid, .exc-track),
#argentina-destinos :is(.excursions-grid, .exc-track){
  /* tus valores de fade */
  --fade-hard: 88%;
  --fade-soft: 96%;

  /* pequeño colchón */
  padding-bottom: 18px;

  /* máscara: la agrandamos y la bajamos 3px para evitar el “cuadrito” */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--fade-hard),
    rgba(0,0,0,.72) var(--fade-soft),
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% calc(100% + 6px); /* <- más alta que el contenedor */
  -webkit-mask-position: 0 -3px;            /* <- desplazada 3px hacia abajo */

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 var(--fade-hard),
    rgba(0,0,0,.72) var(--fade-soft),
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% calc(100% + 6px);
  mask-position: 0 -3px;
}
#peru-destinos .excursions-wrap::after,
#argentina-destinos .excursions-wrap::after{
  content:"";
  position:absolute;
  left:20px; right:20px; bottom:-4px; height:22px;
  pointer-events:none; z-index:4;
  background:
    radial-gradient(60px 18px at right bottom, rgba(0,0,0,.18), transparent 70%),
    radial-gradient(60px 18px at  left bottom, rgba(0,0,0,.18), transparent 70%);
}
/* PARCHE: enterrar un poco más la máscara y dar 1px de “bleed” */
#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  /* la máscara se hace 8px más alta y se desplaza 8px hacia arriba */
  -webkit-mask-size: 100% calc(100% + 8px);
          mask-size: 100% calc(100% + 8px);
  -webkit-mask-position: 0 -8px;
          mask-position: 0 -8px;

  /* bleed para evitar cualquier borde por redondeo */
  padding-bottom: 1px;
  margin-bottom: -1px;
}

/* remate suave: un fade de 12px al color de fondo, dentro del wrap */
#peru-destinos .excursions-wrap::after,
#argentina-destinos .excursions-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:12px;
  pointer-events:none;
  background: linear-gradient(to bottom,
              rgba(74,74,74,0) 0%,
              rgba(74,74,74,1) 100%);
  z-index:2;  /* por encima de las cards; las flechas quedan fuera del wrap */
}
/* ========== RESET: sin máscaras ni overlays en el carrusel ========== */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap,
#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent !important;
}

#peru-destinos .excursions-wrap::before,
#peru-destinos .excursions-wrap::after,
#argentina-destinos .excursions-wrap::before,
#argentina-destinos .excursions-wrap::after{
  content: none !important;
}

/* ========== Sombra de las tarjetas más suave (evita “mancha” plana) ========== */
#peru-destinos .exc-card,
#argentina-destinos .exc-card{
  box-shadow: 0 16px 32px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.14) !important;
}

/* ========== Colchón inferior para que las sombras respiren ========== */
#peru-destinos .city-body,
#argentina-destinos .city-body{
  position: relative;
  overflow: visible !important;
  padding-bottom: 18px;           /* crea “piso” para la sombra */
}

#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  overflow: visible !important;
  padding-bottom: 18px !important;  /* mismo colchón en el scroller */
  margin-bottom: 0 !important;      /* sin márgenes negativos */
}

/* ========== Desvanecido MUY sutil bajo las cards (no afecta cerrado) ========== */
#peru-destinos .city-panel[open] .city-body::after,
#argentina-destinos .city-panel[open] .city-body::after{
  content: "";
  position: absolute;
  left: 24px; right: 24px;      /* no pega contra los bordes redondeados */
  bottom: -10px;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(74,74,74,0));
  border-radius: 18px;
  filter: blur(2px);
  z-index: 0;                   /* flechas y cards quedan arriba */
}
/* 0) Limpieza total de overlays/máscaras que rompieron el layout */
#peru-destinos .city-body::after,
#argentina-destinos .city-body::after,
#peru-destinos .excursions-wrap::before,
#peru-destinos .excursions-wrap::after,
#argentina-destinos .excursions-wrap::before,
#argentina-destinos .excursions-wrap::after{
  content: none !important;
  display: none !important;
}

/* 1) Sin máscaras en el scroller */
#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  -webkit-mask: none !important;
  mask: none !important;
}

/* 2) Dejá respirar las sombras (evita la línea dura abajo) */
#peru-destinos .city-panel[open] .city-body,
#argentina-destinos .city-panel[open] .city-body{
  padding-bottom: 18px;         /* podés subir a 22px si querés más aire */
  overflow: visible !important;
}
#peru-destinos :is(.excursions-grid,.exc-track),
#argentina-destinos :is(.excursions-grid,.exc-track){
  overflow: visible !important;
  padding-bottom: 18px !important;
  margin-bottom: 0 !important;
}

/* 3) Gradiente del card un poco más claro abajo (menos “mancha”) */
#peru-destinos .exc-card::before,
#argentina-destinos .exc-card::before{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.14) 0%,
    rgba(0,0,0,.38) 58%,
    rgba(0,0,0,.62) 100%
  ) !important;
}

/* 4) Flechas fuera y sin recortes (como lo tenías bien) */
#peru-destinos .excursions-wrap,
#argentina-destinos .excursions-wrap{
  padding-inline: 40px;
  overflow: visible !important;
}
#peru-destinos .exc-nav-prev, #argentina-destinos .exc-nav-prev{ left:-20px; }
#peru-destinos .exc-nav-next, #argentina-destinos .exc-nav-next{ right:-20px; }
/* Carrusel: recortar en X (vuelve el efecto de “ventana”) 
   y dejar visible en Y (sombras intactas) */
#peru-destinos :is(.excursions-grid, .exc-track),
#argentina-destinos :is(.excursions-grid, .exc-track){
  overflow-x: auto !important;   /* <- oculta la 5ª tarjeta hasta scrollear */
  overflow-y: visible !important; /* <- no corta sombras */
  scrollbar-width: none;          /* oculta scrollbar (Firefox) */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
#peru-destinos :is(.excursions-grid, .exc-track)::-webkit-scrollbar,
#argentina-destinos :is(.excursions-grid, .exc-track)::-webkit-scrollbar{
  display: none; height: 0;
}
/* =========================================================
   🌎 CSS PERSONALIZADO – PLANTILLA EXCURSIÓN / DETALLE TOUR
   (identificador: ssx-*)
   ========================================================= */
/* ---------- CONTENEDOR ---------- */
.ssx-container{
  max-width:var(--ssx-max);
  margin: clamp(20px,4vw,40px) auto;
  padding-inline:16px;
  display:grid;
  grid-template-columns: 1.7fr minmax(280px, 0.9fr);
  gap: var(--ssx-gap);
}
@media (max-width: 980px){
  .ssx-container{grid-template-columns:1fr}
}

/* ---------- MAIN ---------- */
.ssx-main .ssx-block{
  background:var(--c-bg);
  border-radius:var(--ssx-radius);
  padding:24px;
  box-shadow:var(--ssx-shadow);
  border: 1px solid rgba(107, 112, 92, 0.35);
}
.ssx-block + .ssx-block{margin-top: var(--ssx-gap)}
.ssx-title{font-size:clamp(26px,3vw,36px);margin:0 0 10px}
.ssx-subtitle{font-size:clamp(20px,2.4vw,24px);margin:0 0 12px}
.ssx-subsubtitle{font-size:clamp(18px,2.4vw,20px);margin:0 0 12px}
.ssx-text{color:var(--c-muted);margin:0}

/* Subtítulo (IR) */
.ssx-subtitle-ir{
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 0 0 12px;
  color: #556B5C; /* verde grisáceo */
}

/* Sub-subtítulo (IR) */
.ssx-subsubtitle-ir{
  font-size: clamp(18px, 2.4vw, 20px);
  margin: 0 0 12px;
  color: #C2B280; /* arena/dorado suave */
}

/* ---------- GALERÍA ---------- */
.ssx-gallery{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(260px, 1fr);
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.ssx-gallery__item{
  border-radius:12px;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow: var(--ssx-shadow);
}
.ssx-gallery__item img{height:260px;object-fit:cover;width:100%}
@media (min-width:900px){
  .ssx-gallery__item img{height:320px}
}

/* ---------- CIRCUITOS ---------- */
.ssx-circuit{
  display:block;
  width:100%;
  max-width:100%;
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--ssx-shadow);
  background:#fff; /* fondo neutro */
  box-sizing:border-box;
  margin-top:14px; /* separación del texto superior */
  border: none;
}

.ssx-circuit__media{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:auto;
  padding:8px;
}

.ssx-circuit__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  max-width:100%;
  border-radius:10px;
}
/* ---------- IMPORTANT BOX (sin borde, fondo #f2f2f0) ---------- */
.ssx-important{
  position: relative;
  margin: 14px 0 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f2f2f0;           /* nuevo fondo */
  color: #747b88;                /* texto */
  box-shadow: var(--ssx-shadow, 0 1px 4px rgba(0,0,0,.06));
}

/* Título */
.ssx-important__title{
  margin: 0 0 8px 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: #94915d;                /* color del título */
}

/* Lista de ítems */
.ssx-important__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.ssx-important__list li{
  position: relative;
  padding-left: 18px;
  color: #747b88;
}

.ssx-important__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #6b705c;          /* color del ítem */
}

/* ---------- ITINERARIO ---------- */
.ssx-itinerary .ssx-day{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:flex-start;padding:16px;border-radius:12px;background:#6b705c17;}
.ssx-itinerary .ssx-day + .ssx-day{margin-top:12px}
.ssx-day__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:14px;background:#fff;box-shadow:var(--ssx-shadow);font-weight:700}
.ssx-day__badge span{font-size:12px;color:var(--c-muted)}
.ssx-day__badge strong{font-size:20px}
.ssx-day__title{margin:.1rem 0 .4rem}

/* ---------- INCLUYE / NO INCLUYE ---------- */
.ssx-features{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.ssx-features{grid-template-columns:1fr}}
.ssx-list{list-style:none;margin:0;padding:0}
.ssx-list__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--ssx-shadow)}
.ssx-list__item + .ssx-list__item{margin-top:8px}
.ssx-list__item--no{background:#fff3f3}
.ssx-icon{width:16px;height:16px;flex:0 0 16px;fill:#10b981}
.ssx-list__item--no .ssx-icon{fill:#ef4444}

/* ---------- SIDEBAR ---------- */
.ssx-sidebar{position:relative}
@media (min-width:981px){
  .ssx-sidebar{position:sticky;top:24px;height:max-content}
}
.ssx-card{background:var(--c-bg);border-radius:var(--ssx-radius);box-shadow:var(--ssx-shadow);padding:20px;border: 1px solid rgba(107, 112, 92, 0.35);}
.ssx-card__title{margin:0 0 12px;font-size:20px}
.ssx-excursion__form-group{display:grid;gap:6px;margin-bottom:12px}
.ssx-excursion__label{font-size:.9rem;color:var(--c-muted)}
.ssx-excursion__input,.ssx-excursion__textarea{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;font:inherit;background:#fff}
.ssx-excursion__input[readonly]{background:#f9fafb;color:#6b7280}
.ssx-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:600}
.ssx-btn--primary{background:var(--c-brand);color:#fff}
.ssx-btn--primary:hover{background:var(--c-brand-600)}

/* ---------- RELACIONADAS ---------- */
.ssx-related{max-width:var(--ssx-max);margin:40px auto 60px;padding-inline:16px}
.ssx-related__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px}
.ssx-related__card{position:relative;min-height:240px;border-radius:16px;overflow:hidden;color:#fff;scroll-snap-align:start;background:#111 center/cover no-repeat;box-shadow:var(--ssx-shadow);background-image:var(--bg)}
.ssx-badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);backdrop-filter:saturate(1.2) blur(4px);padding:6px 10px;border-radius:999px;font-size:.75rem}
.ssx-related__content{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ssx-kicker{opacity:.85}
.ssx-cta{display:inline-block;padding:8px 12px;border-radius:10px;background:#ffffff;color:#111;font-weight:600}
.ssx-cta:hover{filter:brightness(.95)}

/* =========================================================
   🔚 FIN CSS PERSONALIZADO – PLANTILLA EXCURSIÓN / DETALLE
   ========================================================= */
/* =========================================================
   🔧 OVERRIDES – PLANTILLA EXCURSIÓN (ajustes puntuales)
   ========================================================= */

/* 1) Reducir espacio entre el HERO y el primer bloque */
.ssx-page .ssx-container{
  margin-top: 12px !important;                 /* antes: clamp(20px,4vw,40px) */
}

/* Si hay márgenes heredados en <main> del theme, anularlos aquí */
.ssx-page main,
.ssx-page .ssx-main{
  margin: 0 !important;
  padding: 0 !important;
}
/* Asegurar que el primer bloque no agregue margen extra */
.ssx-page .ssx-main .ssx-block:first-child,
.ssx-page .ssx-intro,
.ssx-page .ssx-title{
  margin-top: 0 !important;
}

/* 2) Quitar “doble gutter” lateral bajo el HERO (full-bleed limpio) */
@media (min-width: 981px){
  .ssx-page .ssx-container{
    padding-inline: 0 !important;              /* elimina el padding lateral */
  }
}
/* mantener un pequeño padding en móviles para que no “pegue” a los bordes */
@media (max-width: 980px){
  .ssx-page .ssx-container{
    padding-inline: 12px !important;
  }
}

/* 3) Sidebar/formulario un poco más ancho en desktop */
@media (min-width: 981px){
  .ssx-page .ssx-container{
    /* antes: 1.7fr / minmax(280px, 0.9fr) */
    grid-template-columns: 1.55fr minmax(330px, 1fr) !important;
  }
  /* un pelín más de confort interno */
  .ssx-page .ssx-card{
    padding: 22px 22px 20px !important;
  }
}

/* =========================================================
   🔚 FIN OVERRIDES – PLANTILLA EXCURSIÓN
   ========================================================= */
   /* =========================================================
   FIX DEFINITIVO – eliminar gutter del container Bootstrap
   SOLO para esta plantilla (.ssx-edge-fix)
   ========================================================= */

/* A) cuando la plantilla está dentro de un .container / *container* */
@media (min-width: 981px){
  .container > .ssx-edge-fix,
  .container-fluid > .ssx-edge-fix,
  .container-xl > .ssx-edge-fix,
  .container-lg > .ssx-edge-fix,
  .container-md > .ssx-edge-fix,
  .container-sm > .ssx-edge-fix,
  [class*="container"] > .ssx-edge-fix {
    /* compensa el padding del container solo a la izquierda */
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem)) !important;  /* ≈ -12px por defecto */
    /* no tocamos el lado derecho para no desalinear el sidebar */
  }
}

/* B) cuando SitioSimple envuelve con wrappers propios (por atributo) */
@media (min-width: 981px){
  [data-ss-rich-paragraph] > .ssx-edge-fix,
  [data-ss-padding] > .ssx-edge-fix {
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem)) !important;
  }
}

/* C) por si el wrapper añade padding “duro” en px (plan B) */
@media (min-width: 981px){
  .ssx-edge-fix { 
    /* si aún ves 2-4px, subí este fallback:  -14px, -16px, -18px */
    margin-left: max(calc(-0.5 * var(--bs-gutter-x, 1.5rem)), -16px) !important;
  }
}

/* mantener nuestro grid sin padding lateral adicional */
@media (min-width: 981px){
  .ssx-edge-fix .ssx-container { padding-left: 0 !important; }
}
/* ====== LAYOUT DESKTOP: 2 columnas (contenido + sidebar) ====== */
@media (min-width: 981px) {
  .ssx-page .ssx-page .ssx-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important; /* contenido | sidebar */
    gap: 32px !important;
    grid-template-areas: "main aside" !important;

    /* centrado y márgenes laterales */
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
    box-sizing: border-box;
  }
  .ssx-page .ssx-page .ssx-container > .ssx-main    { grid-area: main  !important; }
  .ssx-page .ssx-page .ssx-container > .ssx-sidebar { grid-area: aside !important; position: static !important; }
  /* por si el tema dibuja columnas/pseudo-elementos laterales */
  .ssx-page .ssx-page .ssx-container::before,
  .ssx-page .ssx-page .ssx-container::after { content: none !important; display: none !important; }
}

/* ====== LAYOUT MOBILE/TABLET: apilar y NO ocultar el sidebar ====== */
@media (max-width: 980px) {
  .ssx-page .ssx-page .ssx-container {
    display: block !important;    /* cancelar grid del tema */
    max-width: 100%;
    padding-inline: 12px;
  }
  .ssx-page .ssx-page .ssx-sidebar {
    display: block !important;     /* algunos temas lo ponen display:none */
    position: static !important;   /* evitar fixed/sticky fuera de pantalla */
    transform: none !important;
    width: auto !important;
    margin-top: 24px;
  }
}
@media (min-width: 981px) {
  .ssx-page .ssx-page .ssx-container {
    max-width: 1600px;                 /* ajustá según gusto */
    padding-inline: 12px;              /* margen fino */
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 24px !important;
  }
}
/* Banner tipo hero (no full-screen) */
.ssx-hero{
  position: relative;
  overflow: hidden;
  height: clamp(240px, 42svh, 560px);
}
@supports (height: 42dvh){
  .ssx-hero{ height: clamp(240px, 42dvh, 560px); }
}

/* Imagen a cubrir todo el banner */
.ssx-hero__media{
  position: absolute;
  inset: 0;
}
.ssx-hero__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Overlay “polarizado” (más notorio y siempre encima) */
.ssx-hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  /* sin el '*/' suelto */
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.62) 100%);
  /* si querés aún más efecto, subí los .38/.62 */
  pointer-events: none;
  z-index: 1;            /* por encima de la imagen */
}
/* oscurecé un poco la foto para que el overlay rinda mejor */
.ssx-hero__media img{
  filter: brightness(.92) contrast(1.03);
}

/* overlay polarizado más visible + viñeta suave */
.ssx-hero__media::after{
  background:
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.52) 100%);
}

/* Título 100% centrado (deja SOLO esta regla) */
.ssx-hero__title{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1;

  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding-inline: 16px;
  z-index: 2;  /* por encima del overlay */
}
  #tour-desc[readonly] {
  background-color: #f2f2f2;   /* gris clarito */
  color: #6c757d;              /* gris más suave */
  border: 1px solid #e0e0e0;   /* borde sutil */
  cursor: not-allowed;         /* muestra que no es editable */
  pointer-events: none;        /* bloquea clicks y foco */
  user-select: none;           /* evita seleccionar/copiar */
}
/* ================================
   Excursiones Relacionadas: CTA
   ================================ */
.ssx-related .ssx-related__card .ssx-cta{
  /* estado normal: sólo borde, sin fondo */
  background: transparent !important;
  border: 1.8px solid rgba(255,255,255,.95) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;

  /* micro‑interacciones */
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .2s ease,
    letter-spacing .2s ease;
}

/* hover/focus: botón lleno (como tu ejemplo) */
.ssx-related .ssx-related__card .ssx-cta:hover,
.ssx-related .ssx-related__card .ssx-cta:focus-visible{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: none;
}

/* click */
.ssx-related .ssx-related__card .ssx-cta:active{
  transform: translateY(0);
}
.ssx-btn--primary {
    position: relative;
    z-index: 0;
    background: var(--oliva-prof, #6B705C); /* color base */
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.ssx-btn--primary:before {
    content: '';
    background: linear-gradient(
        45deg,
        var(--oliva-base, #94905E),
        var(--arena, #C2B280),
        var(--bosque, #556B5C),
        var(--carbon, #4A4A4A),
        var(--oliva-prof, #6B705C)
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(6px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 18s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 12px;
}

.ssx-btn--primary:hover:before {
    opacity: 1;
}

.ssx-btn--primary:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--oliva-prof, #6B705C); /* mismo color base */
    left: 0;
    top: 0;
    border-radius: 12px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
.footer-custom-text-color {
  color: #FAFAFA; /* Blanco roto */
}

.footer-custom-text-color a {
  color: #C2B280; /* Arena dorada */
  text-decoration: none;
}

.footer-custom-text-color a:hover {
  color: #94905E; /* Oliva elegante */
}
/* Mantiene tu color de texto del footer */
.footer-custom-text-color { color:#FAFAFA; }
.footer-custom-text-color a { color:#C2B280; text-decoration:none; }
.footer-custom-text-color a:hover { color:#94905E; }

/* Más “aire” y ancho cómodo */
.footer-spacious { padding-top: clamp(32px, 4vw, 56px); }
.container-xxl { max-width: 1320px; }

/* Listado de contacto con buen leading */
.footer-list li{
  margin-bottom: .4rem;
  line-height: 1.8;
  opacity: .95;
  font-size: 0.98rem;
}

/* Iconos de redes con look limpio */
.footer-social{
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: rgba(250,250,250,.12);
  color: #FAFAFA;
  border: 1px solid rgba(250,250,250,.28);
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(250,250,250,.2);
  filter: brightness(1.08);
}

/* Breakpoints: separaciones más grandes en desktop */
@media (min-width: 992px){
  .footer-list li{ margin-bottom: .5rem; font-size: 1rem; }
}

/* En mobile, columnas apiladas con buen espacio vertical */
@media (max-width: 575.98px){
  .footer-spacious { padding-top: 28px; }
  .footer-logo img { max-height: 72px; }
}
/* LOGO más grande y alineado */
.footer-clean .f-logo img {
  max-height: 120px;   /* antes 82px, ahora más grande */
  margin: 0 auto 12px 0; /* alineado a la izquierda dentro de su columna */
  display: block;
}

/* Columna de contacto alineada a la izquierda */
.footer-clean .f-col:nth-child(2) {
  text-align: left;
}
.footer-clean .f-col:nth-child(2) .f-list {
  justify-items: start; /* ítems alineados a la izquierda */
}

/* Columna de redes sociales centrada */
.footer-clean .f-col:nth-child(3) {
  text-align: center; /* centra título e íconos */
}
.footer-clean .f-col:nth-child(3) .f-socials {
  justify-content: center; /* centra la fila de íconos */
}
/* ---- LOGO ---- */
.footer-clean .f-logo img {
  max-height: 120px;     /* Logo más grande */
  display: block;
  margin: 0 auto 12px 0; /* alineado a la izquierda */
}

/* ---- CONTACTANOS ---- */
.footer-clean .f-col:nth-child(2) {
  text-align: left;     /* alinear todo el texto a la izquierda */
}
.footer-clean .f-col:nth-child(2) .f-list {
  display: flex;
  flex-direction: column; /* ítems en columna */
  align-items: flex-start; /* icono + texto alineados a la izquierda */
  gap: 8px; /* espacio uniforme entre ítems */
}
.footer-clean .f-col:nth-child(2) .f-list li {
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre ícono y texto */
}

/* ---- SIGUENOS ---- */
.footer-clean .f-col:nth-child(3) {
  text-align: center;
}
.footer-clean .f-col:nth-child(3) .f-socials {
  justify-content: center; /* íconos centrados */
  gap: 12px;
}
/* ==== Footer 3 columnas – sin columnas fantasma ==== */
.footer-grid{
  display:grid;
  grid-template-columns: minmax(180px, 4fr) minmax(20px, 3fr) minmax(200px, 4fr);
  align-items:center;
  gap:clamp(50px,5vw,120px) !important;
  width:100%;
}

/* Col 1: logo centrado y responsivo */
.footer-col--logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-logo img {
    width: clamp(160px, 22vw, 380px) !important;
    max-height: clamp(56px, 8vw, 110px) !important;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Título de columna (mismo look en contacto/redes) */
.footer-h6{
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.5px;
  text-align:center; /* título centrado como pediste */
}

/* Col 2: contacto – datos alineados a la izquierda (desktop) */
.footer-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  text-align:left;                /* ← izquierda */
}
.footer-contact li{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.5;
}
.footer-contact i{ opacity:.95; }
.footer-contact span{ display:inline-block; }

/* Col 3: redes – centrado */
.footer-col--social{ text-align:center; }
.footer-socials{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.footer-social{
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.08);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* Copy */
.footer-copy{
  text-align:center;
  margin-top: clamp(20px, 5vw, 36px);
  padding-top: 14px;
}

/* ==== Responsivo ==== */
/* Tablet: ocupa ancho completo, apila columnas y centra contenidos */
@media (max-width: 991.98px){
  .footer-grid{
    grid-template-columns: 1fr;  /* apilado */
    gap:22px;
  }
  .footer-col--logo{ justify-content:center; }
  .footer-contact{ text-align:center; }         /* más legible en móvil */
  .footer-contact li{ justify-content:center; }
  .footer-logo img{
    width: clamp(180px, 40vw, 260px);
    max-height: 72px;
  }
}
/* Mobile chico: ajustes finos */
@media (max-width: 575.98px){
  .footer-logo img{ width: clamp(180px, 50vw, 240px); max-height:64px; }
  .footer-social{ width:42px; height:42px; }
}
/* =========================================================
   🔧 PARCHE HERO + CONTENEDOR (desktop/móvil)
   ========================================================= */

/* HERO fluido (alto adaptable, sin deformar imagen) */
/* .ssx-hero__media{
  height: clamp(260px, 36vh, 520px) !important;
  max-height: 60vh !important;
  overflow: hidden !important;
} */
.ssx-hero__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Desktop chico: entre 981px y 1440px */
@media (min-width:981px) and (max-width:1440px){
  .ssx-edge-fix{ margin-left: 0 !important; }

  .ssx-page .ssx-page .ssx-container{
    max-width: 1200px !important;         /* ancho cómodo en 1366px */
    margin-inline: auto !important;
    padding-inline: clamp(16px, 3vw, 28px) !important;
    grid-template-columns: minmax(0,1fr) 360px !important;
    gap: 24px !important;
  }
}

/* Pantallas muy anchas (≥1441px): full-bleed */
@media (min-width:1441px){
  .ssx-page .ssx-page .ssx-container{
    max-width: 1600px !important;
    padding-inline: 12px !important;
  }
}

/* Refinamientos tipográficos */
.ssx-title,
.ssx-subtitle{
  word-wrap: break-word !important;
  hyphens: auto !important;
}
/* Contenedor del módulo */
.vm-embed{
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 12px;
}
.vm-frame{
  width: 100%;
  height: 420px;          /* alto inicial, luego se ajusta por JS */
  border: 0;
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
/* Contenedor del módulo embebido */
#modulo-ver-mas {
  max-width: var(--ssx-max, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Ajustes finos dentro del módulo */
#modulo-ver-mas .ssx-related { margin-block: 28px 0; }
#modulo-ver-mas .ssx-title { margin-top: 0; }
/* Tipografía global: usar sólo Oswald (con system-ui de backup) */
/* :root{
  --heading-font: 'Oswald', system-ui, sans-serif !important;
  --body-font:    'Oswald', system-ui, sans-serif !important;
}
body, .svc-title h2, h1, h2, h3, h4, h5, h6,
.menu-item, .svc-btn, .ir-btn { font-family: var(--heading-font) !important; } */
/* Fondo oscuro consistente y sin “sub-fondo”/caja */
.ir-darkpage{ background:#121212 !important; }
.svc-section{ background:transparent !important; padding: clamp(40px,4.5vw,70px) 0 !important; }
.svc-section::before{ content:none !important; }

/* Layout del hub: título a la izquierda, grilla a la derecha (centradas) */
.svc-wrap,.svc-shell{ 
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns: minmax(280px, 0.9fr) 1fr; gap:clamp(28px,4vw,52px);
  align-items:center;
}
.svc-head{ align-self:center; }
.svc-head h2{ 
  margin:0; line-height:1.05; text-align:left; 
  font-weight:800; letter-spacing:.5px; color:#FAFAFA;
  font-size: clamp(36px, 5vw, 64px);
}

/* Cards más anchas y centradas visualmente */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

/* Contenido al pie de la tarjeta (título + botón) */
.svc-card{ position:relative; overflow:hidden; border-radius:18px; height: 620px; }
.svc-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.82) 100%) !important; }
.svc-body{ position:absolute; left:18px; right:18px; bottom:18px; color:#fff; }
.svc-tag{ display:inline-block; font-size:.78rem; opacity:.95; letter-spacing:.08em; margin-bottom:6px }
.svc-body h3{ margin:0 0 12px !important; font-size: clamp(18px, 2.3vw, 22px) !important; }

/* “Pill” superior discreta */
.svc-pill, .svc-badge{
  position:absolute; top:14px; right:14px;
  font-size:.78rem; padding:6px 10px; border-radius:999px;
  color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(148,144,94,.65);
}

/* Responsivo hub */
@media (max-width: 1199.98px){
  .svc-card{ height:560px; }
}
@media (max-width: 991.98px){
  .svc-wrap,.svc-shell{ grid-template-columns:1fr; gap:24px; }
  .svc-head h2{ text-align:center; }
  .svc-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
  .svc-card{ height:520px; }
}
@media (max-width:575.98px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-card{ height:440px; }
}
/* Centrar dos tarjetas (y que respiren) */
.otros-servicios .os-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.otros-servicios .os-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(340px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  justify-content:center;         /* centra el conjunto */
  align-items: stretch;
}
.otros-servicios .svc-card.os-card{ height:520px; }

@media (max-width:991.98px){
  .otros-servicios .os-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
  .otros-servicios .svc-card.os-card{ height:480px; }
}
@media (max-width:575.98px){
  .otros-servicios .os-grid{ grid-template-columns: 1fr; }
  .otros-servicios .svc-card.os-card{ height:420px; }
}
/* Menú móvil: panel oscuro + links legibles */
@media (max-width: 991px){
  .navbar-collapse,
  .navbar-collapse.show,
  .dropdown-menu{
    background:#0f0f10 !important;
    color:#FAFAFA !important;
    border:0 !important;
  }
  .navbar-nav .nav-link,
  .menu-item,
  .dropdown-item{
    color:#FAFAFA !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .dropdown-item:hover{ background:rgba(255,255,255,.06) !important; }
}
/* Botón CTA consistente */
.ir-btn.ir-btn-cta,
.svc-btn{
  display:inline-block;
  border:1.8px solid rgba(255,255,255,.95);
  padding:10px 18px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff; text-decoration:none;
  border-radius:10px;
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.ir-btn.ir-btn-cta:hover,
.svc-btn:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-1px); }
/* =========================
   1) EXPLORA NUESTROS SERVICIOS
   - Título más a la izquierda
   - Tarjetas un poco más anchas
   ========================= */
.ir-mount .svc-shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
  display: grid;
  grid-template-columns: .42fr 1fr;   /* + espacio al título a la izquierda */
  align-items: center;
  gap: clamp(28px,6vw,86px);
}
.ir-mount .svc-head{
  justify-self: start;
  transform: translateX(-2.5vw);      /* mueve el bloque de título un poco a la izquierda */
}
.ir-mount .svc-head h2{
  margin: 0;
  line-height: .95;
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 92px);
  text-align: left;
}
.ir-mount .svc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));  /* + ancho de cards */
  gap: clamp(16px, 2.2vw, 28px);
}

/* cards un toque más altas en desktop */
@media (min-width: 1200px){
  .ir-mount .svc-card{ height: 640px; }
}

/* tablet/móvil: layout en 1 columna como ya venías usando */
@media (max-width: 991.98px){
  .ir-mount .svc-shell{ grid-template-columns: 1fr; gap: 22px; }
  .ir-mount .svc-head{ transform: none; text-align:center; }
  .ir-mount .svc-grid{ grid-template-columns: repeat(2, minmax(280px,1fr)); }
}
@media (max-width: 575.98px){
  .ir-mount .svc-grid{ grid-template-columns: 1fr; }
}

/* =========================
   2) OTROS SERVICIOS (centrar 2 cards)
   ========================= */
.otros-servicios .os-container{ max-width: 1240px; margin: 0 auto; }
.otros-servicios .os-grid{
  grid-template-columns: repeat(2, minmax(340px, 520px)); /* solo 2 */
  justify-content: center;   /* centra el conjunto */
  justify-items: stretch;
  gap: clamp(18px, 2.4vw, 32px);
}
@media (max-width: 991.98px){
  .otros-servicios .os-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 575.98px){
  .otros-servicios .os-grid{ grid-template-columns: 1fr; }
}

/* Bajar los títulos/botones al pie de la imagen (coherente con Servicios) */
.otros-servicios .svc-body{ bottom: 18px; }
.otros-servicios .svc-body h3{ margin: 0 0 12px; }

/* =========================
   4) Menú mobile blanco en páginas oscuras (fix)
   ========================= */
.ir-darkpage .navbar-collapse,
.ir-darkpage .dropdown-menu{
  background: #ffffff !important;           /* fondo claro como en home */
  color: #2b2b2b !important;
}
.ir-darkpage .navbar-collapse .nav-link,
.ir-darkpage .dropdown-item{
  color: #2b2b2b !important;                /* que no “desaparezcan” */
}
.ir-darkpage .dropdown-item:hover{ color: #000 !important; }
/* ====== HUB SERVICIOS – CENTRADO REAL EN PANTALLA ====== */
/* contenedor centrado y con columnas balanceadas */
.ir-mount .svc-shell{
  /* ancho cómodo y centrado */
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3.6vw, 40px);

  display: grid;
  /* título (col 1) + grid (col 2) sin sesgo a la derecha */
  grid-template-columns: minmax(320px, 480px) minmax(720px, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 86px);

  /* asegura centrado si el contenido interno no ocupa 100% */
  justify-content: center;
}

/* quitamos el corrimiento hacia la izquierda del título */
.ir-mount .svc-head{
  transform: none !important;
  justify-self: start;   /* título queda pegado a su columna */
}

/* tarjetas un poco más anchas, pero sin desbordar y centradas en su columna */
.ir-mount .svc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  justify-content: center;     /* centra el conjunto de 3 cards */
  align-items: stretch;
}

/* ajuste de alto en desktop grande (opcional) */
@media (min-width: 1200px){
  .ir-mount .svc-card{ height: 640px; }
}

/* responsivo: el layout cae a 1 columna y queda centrado */
@media (max-width: 991.98px){
  .ir-mount .svc-shell{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ir-mount .svc-head{ justify-self: center; text-align: center; }
  .ir-mount .svc-grid{ grid-template-columns: repeat(2, minmax(280px,1fr)); }
}
@media (max-width: 575.98px){
  .ir-mount .svc-grid{ grid-template-columns: 1fr; }
}
/* ================================
   SERVICIOS (hero): layout estable
   ================================ */

/* Contenedor centrado y 2 columnas: Título | Cards */
.svc-section .svc-shell{
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr; /* título a la izq */
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

/* Título pegado a la izquierda */
.svc-section .svc-head{
  justify-self: start;
  margin-left: clamp(8px, 3vw, 40px);
}

/* 3 cards más anchas y centradas dentro de su columna */
.svc-section .svc-grid{
  display: grid !important;                     /* pisamos cualquier fix previo */
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  justify-items: stretch;
  justify-content: center;                       /* centra el conjunto */
}

/* Responsivo */
@media (max-width: 1100px){
  .svc-section .svc-shell{ grid-template-columns: 1fr; }
  .svc-section .svc-head{ margin-left: 0; text-align: center; }
  .svc-section .svc-grid{
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    justify-content: center;
  }
}
@media (max-width: 640px){
  .svc-section .svc-grid{ grid-template-columns: 1fr; }
}

/* ================================
   OTROS SERVICIOS: centrar 2 cards
   ================================ */
.otros-servicios .os-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 420px));
  gap: clamp(16px, 2vw, 28px);
  justify-content: center;     /* ← centradas en pantalla */
}
@media (max-width: 991.98px){
  .otros-servicios .os-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   MENÚ MOBILE invisible en páginas oscuras
   ========================================= */
.ir-darkpage .navbar-collapse,
.ir-darkpage .dropdown-menu{
  background: #F5F5EB !important;
}
.ir-darkpage .navbar-collapse .nav-link,
.ir-darkpage .dropdown-menu .dropdown-item{
  color: #4A4A4A !important;
}
.ir-darkpage .dropdown-menu .dropdown-item:hover{
  background: rgba(0,0,0,.06);
  color: #111 !important;
}

/* =========================================
   Footer no se superpone al hacer scroll
   ========================================= */
/* footer{ position: relative; z-index: 1; }
.ir-footer-show footer{ position: relative !important; }
.ir-mount{ position: relative; z-index: 2; } */
/* Ajuste fino: separar cards del título hero */
.svc-section .svc-grid{
  margin-left: clamp(40px, 8vw, 160px); /* empuja el conjunto de tarjetas */
}
@media (max-width: 768px){
  .svc-section .svc-grid{
    margin-left: 0;   /* en mobile centrado */
  }
}
/* === OTROS SERVICIOS: centrar 2 cards sin romper el grid === */
/* Volver a GRID (por si quedó el intento con flex) */
#otros-servicios .os-grid,
#otros-servicios-app .os-grid,
#otros-servicios-app .svc-grid {
  display: grid !important;
  gap: clamp(16px, 2vw, 28px);
  /* columnas “elásticas” centradas: entre 340 y 420px */
  grid-template-columns: repeat(auto-fit, minmax(340px, 420px));
  justify-content: center; /* centra las columnas dentro del contenedor */
}

/* Asegurar que la card no se achique raro */
#otros-servicios .svc-card.os-card {
  width: auto;
  min-width: 340px;   /* coincide con el min de la columna */
}

/* Breakpoints coherentes */
@media (max-width: 991.98px){
  #otros-servicios .os-grid,
  #otros-servicios-app .os-grid,
  #otros-servicios-app .svc-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content: center;
  }
}
@media (max-width: 575.98px){
  #otros-servicios .os-grid,
  #otros-servicios-app .os-grid,
  #otros-servicios-app .svc-grid {
    grid-template-columns: 1fr; /* apila en móvil */
  }
}
/* =========================================================
   🎯 OPTIMIZACIÓN SMALL-DESKTOP (1366×768 aprox.)
   ========================================================= */
@media (max-width: 1400px) and (max-height: 820px){

  /* ——— HUB “Servicios” (hero con 3 tarjetas) ——— */
  .svc-section .svc-shell{
    gap: 36px;                            /* menos aire */
    grid-template-columns: minmax(260px,380px) 1fr;
  }
  .svc-section .svc-head h2{ font-size: clamp(34px,4.2vw,52px); }
  .svc-section .svc-grid{
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 18px;
  }
  .svc-section .svc-card{ height: 540px; } /* antes 620 */

  /* ——— “Otros Servicios” (2 tarjetas centradas) ——— */
  .otros-servicios .os-grid{
    grid-template-columns: repeat(2, minmax(300px, 420px)) !important;
    gap: 20px !important;
    justify-content: center;
  }
  .otros-servicios .svc-card.os-card{ height: 460px; } /* antes 520 */

  /* ——— Listas de ciudades (Perú / Argentina) ——— */
  #peru-destinos .city-header,
  #argentina-destinos .city-header{
    min-height: 84px;                     /* era 96 */
    padding: 18px;
  }
  /* carruseles internos un poco más compactos */
  #peru-destinos .exc-card.svc-card{ height: 300px; }
  #argentina-destinos .exc-card.svc-card{ height: 300px; }
  .exc-nav-btn{ width: 36px; height: 36px; }

  /* ——— Tipos generales un toque más chicos ——— */
  .pd-title{ font-size: clamp(26px,4vw,40px); }
}
:root{ --menu-height: 0px; } /* se completa por JS */

.ir-screen{ /* alto visible menos la barra del menú de SitioSimple */
  min-height: calc(100svh - var(--menu-height, 0px));
  display:flex; flex-direction:column; justify-content:center;
  padding: 80px 20px; /* ajustá a gusto */
}
@supports (min-height: 100dvh){
  .ir-screen{ min-height: calc(100dvh - var(--menu-height, 0px)); }
}

/* fondo cover con overlay (como el ejemplo de SitioSimple) */
.ir-hero-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Pill pequeña para "CIUDAD" en Destinos */
.city-badge{
  display:inline-block;
  font-size:12px;            /* chica */
  letter-spacing:.08em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--borde);
  opacity:.9;
  line-height:1;
  vertical-align:middle;
  margin-left:10px;
  text-transform:uppercase;
}
/* Layout de 2 columnas (contenido + sidebar) */
.ssx-layout{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* ajustá 360px si querés */
  gap: 24px;
  align-items: start;      /* clave para que el aside no “estire” la fila */
}

/* Evitar que algún contenedor corte el sticky */
.ssx-section,
.ssx-layout{
  overflow: visible;
}

/* Altura del header fijo (si lo tenés) */
:root{ --header-h: 72px; } /* ajustá a la altura real del header */
/* Espaciado dentro de la sección introductoria */
.ssx-intro .ssx-subtitle {
  margin-top: 1rem;         /* separa el título del bloque anterior (mínimo) */
  margin-bottom: 0.5rem;    /* separa el título de su lista */
}

/* Aumenta el aire entre el <ul> y el siguiente título */
.ssx-intro .ssx-list {
  margin-top: 0.75rem;
  margin-bottom: 1.75rem;   /* <-- clave para que "Antes de viajar" y "Qué harás" no queden pegados */
}

/* Un poco más de aire en pantallas medias/grandes */
@media (min-width: 768px) {
  .ssx-intro .ssx-list {
    margin-bottom: 2rem;
  }
}
/* =========================================================
   SOLO MOBILE (≤ 767px)
   Aplica SOLO a: #servicios-hub-app y #otros-servicios-app
   – stack vertical
   – cards a ancho full
   – altura garantizada con aspect-ratio (aunque falle la img)
   – oculta línea vertical del tema
   – no toca Desktop ni Destinos
   ========================================================= */
@media (max-width: 767px){

  /* Grid → columna + sin “línea” fantasma */
  html body #servicios-hub-app .svc-grid,
  html body #otros-servicios-app .svc-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 8px 16px 28px !important;
    max-width: 100% !important;      /* sobreescribe inline en Otros Servicios */
    margin-inline: 0 !important;
    position: relative;
  }
  html body #servicios-hub-app .svc-grid::before,
  html body #otros-servicios-app .svc-grid::before{ display:none !important; }

  /* Tarjeta full-width con altura propia (aunque la imagen no cargue) */
  html body #servicios-hub-app .svc-card,
  html body #otros-servicios-app .svc-card{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #0f0f0f;
    aspect-ratio: 3 / 4;             /* PORTRAIT por defecto */
    min-height: 280px;               /* safety net si el navegador ignora aspect-ratio */
  }

  /* Imagen ocupa la tarjeta completa */
  html body #servicios-hub-app .svc-card img,
  html body #otros-servicios-app .svc-card img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Landscape móvil: más ancha */
  @media (orientation: landscape){
    html body #servicios-hub-app .svc-card,
    html body #otros-servicios-app .svc-card{
      aspect-ratio: 16 / 9;
      min-height: 220px;
    }
  }

  /* Contenido y CTA legibles y minimal */
  html body #servicios-hub-app .svc-card .svc-body,
  html body #otros-servicios-app .svc-card .svc-body{
    position: absolute;              /* respeta tu overlay si ya lo tenías */
    left: 0; right: 0; bottom: 0;
    padding: 14px 14px 16px !important;
  }
  html body #servicios-hub-app .svc-card h3,
  html body #otros-servicios-app .svc-card h3{
    font-size: 1.1rem !important;
    margin: .2rem 0 .5rem !important;
  }
  html body #servicios-hub-app .svc-card .ir-btn-cta,
  html body #otros-servicios-app .svc-card .ir-btn-cta{
    width: 100% !important;
    text-align: center !important;
  }

  /* Chips más discretos */
  html body #servicios-hub-app .svc-card .svc-pill{
    top: 8px; left: 8px; font-size: .72rem !important;
  }
  html body #servicios-hub-app .svc-card .svc-tag,
  html body #otros-servicios-app .svc-card .svc-tag{
    font-size: .75rem !important;
  }

  /* Título (opcional) */
  html body #servicios-hub-app .svc-head{ padding: 12px 16px 0 !important; }
  /* si lo querés centrado en mobile: */
  /* html body #servicios-hub-app .svc-head, html body #servicios-hub-app .svc-head h2{ text-align:center !important; } */
}
/* ===== Arreglo línea gris en "Explora nuestros servicios" — SOLO MOBILE ===== */
@media (max-width: 767px){
  /* Asegura layout en una sola columna */
  html body #servicios-hub-app .svc-shell{ display:block !important; }

  /* Apaga cualquier línea/pseudo-elemento decorativo del tema */
  html body #servicios-hub-app .svc-section,
  html body #servicios-hub-app .svc-shell,
  html body #servicios-hub-app .svc-grid{
    background: transparent !important;
    border: 0 !important;
  }
  html body #servicios-hub-app .svc-section::before,
  html body #servicios-hub-app .svc-section::after,
  html body #servicios-hub-app .svc-shell::before,
  html body #servicios-hub-app .svc-shell::after,
  html body #servicios-hub-app .svc-grid::before,
  html body #servicios-hub-app .svc-grid::after{
    content: none !important;
    display: none !important;
  }
}
/* ===============================================
   Arreglo "Explora nuestros servicios" (MOBILE)
   =============================================== */
@media (max-width: 767px){

  /* El shell NO debe ser grilla de 2 columnas en mobile */
  html body #servicios-hub-app .svc-section,
  html body #servicios-hub-app .svc-shell{
    display:block !important;
    grid-template-columns: none !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* El contenedor de cards debe ocupar todo el ancho */
  html body #servicios-hub-app .svc-grid{
    display:flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 8px 16px 28px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* Tarjeta más “compacta” (evita el look alargado) */
  html body #servicios-hub-app .svc-card{
    width:100% !important;
    max-width:100% !important;
    border-radius:18px !important;
    overflow:hidden !important;
    position:relative !important;
    background:#0f0f0f;
    aspect-ratio: 4 / 5;   /* antes 3/4: esto baja un poco la altura */
    min-height: 280px;
  }

  /* Imagen llena la tarjeta */
  html body #servicios-hub-app .svc-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* En landscape de móvil, hacela más ancha y baja */
  @media (orientation: landscape){
    html body #servicios-hub-app .svc-card{
      aspect-ratio: 16 / 10;
      min-height: 220px;
    }
  }
}
/* Divider estético reutilizable */
.ssx-divider{
  position:relative; display:flex; align-items:center; gap:.75rem;
}
.ssx-divider::before,
.ssx-divider::after{
  content:""; flex:1 1 auto; height:1px;
  background: linear-gradient(90deg, transparent 0, var(--d-col,#e6e8ea) 20%, var(--d-accent,#6b705c) 50%, var(--d-col,#e6e8ea) 80%, transparent 100%);
  opacity:.55;
}
/* Caja con borde 1px como las demás secciones */
.ssx-box {
  border: 1px solid #E6E8EA;
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Margen entre bloques internos dentro de la caja */
.ssx-box > .ssx-block { 
  padding-top: 0;
  margin-top: 18px;
}
.ssx-box > .ssx-block:first-child { margin-top: 0; }

/* Ajuste suave del artículo Día dentro de la caja */
.ssx-box .ssx-day {
  border: 1px solid #eef1f3;
  background: #fafbfc;
  border-radius: 12px;
}

/* Respeta responsivo */
@media (max-width: 640px){
  .ssx-box{ padding: 18px; border-radius: 12px; }
}

  /* Escalas de espacio */
  :root{
    --gap-xs: 10px;
    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 32px;
  }

  /* 1) Espacio entre bloques principales (galería → itinerario → incluye…) */
  .ssx-block + .ssx-block{
    margin-top: var(--gap-lg);
  }

  /* 2) Padding interno en bloques con borde (evita título pegado al borde) */
  .ssx-itinerary,
  .ssx-features{
    padding-top: var(--gap-md) !important;
    padding-bottom: var(--gap-md) !important;
  }

  /* 3) Títulos con separación superior e inferior */
  .ssx-subtitle,
  .ssx-title{
    margin-top: var(--gap-sm) !important;   /* evita “pegado” arriba */
    margin-bottom: var(--gap-sm) !important;
  }

  /* 4) Tarjetas de día dentro del itinerario: separación entre ellas */
  .ssx-itinerary .ssx-day + .ssx-day{
    margin-top: var(--gap-md);
  }

  /* 5) Grilla y gaps en “Incluye / No incluye” */
  .ssx-features{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-lg);
    row-gap: var(--gap-md);
  }
  .ssx-features__col .ssx-list{
    display: grid;
    row-gap: var(--gap-sm);
  }

  /* 6) “Píldora” / divider: que respire */
  .ssx-divider{
    margin: var(--gap-lg) 0 var(--gap-md) !important;
  }

  /* 7) Espacio bajo la galería para que no “toque” el borde siguiente */
  .ssx-gallery{
    margin-bottom: var(--gap-md);
  }

  /* 8) Mobile: apilar columnas e incrementar respiración general */
  @media (max-width: 768px){
    .ssx-block + .ssx-block{ margin-top: var(--gap-md); }
    .ssx-features{ grid-template-columns: 1fr; row-gap: var(--gap-lg); }
    .ssx-subtitle, .ssx-title{
      margin-top: var(--gap-md) !important;
      margin-bottom: var(--gap-sm) !important;
    }
  }

  /* 9) (Opcional pero útil) Evita colapso de márgenes en cualquier bloque */
  .ssx-block{ display: flow-root; }

/* === RUTA AYMARÁ – separación ENTRE contenedores, no dentro === */

/* 1) Quitar/neutralizar el padding-top extra dentro de los bloques con borde */
.ssx-itinerary,
.ssx-features{
  padding-top: 0 !important;     /* evita el hueco sobre el “Full Day…” */
}

/* 2) Crear gap EXTERNO entre secciones (entre bordes redondeados) */
.ssx-main .ssx-block + .ssx-block{
  margin-top: 32px;               /* desktop */
}

/* Evita colapso de márgenes para que el gap se vea sí o sí */
.ssx-block{ display: flow-root; }

/* 3) Responsive: el gap entre contenedores en mobile */
@media (max-width: 768px){
  .ssx-main .ssx-block + .ssx-block{
    margin-top: 24px;             /* mobile */
  }
}

/* (Opcional) si algún editor inyecta margen superior en el PRIMER bloque,
   se lo bajamos un toque para que no quede pegado al borde de la tarjeta/grilla */
.ssx-main .ssx-block:first-child{
  margin-top: 12px;
}

/* === GAP ENTRE CONTENEDORES EN .ssx-main (robusto) === */

/* 1) Intento principal: margen entre hermanos directos con más especificidad */
.ssx-main > section.ssx-block + section.ssx-block,
.ssx-main > .ssx-block + .ssx-block {
  margin-top: 32px !important;            /* desktop */
}

@media (max-width: 768px){
  .ssx-main > section.ssx-block + section.ssx-block,
  .ssx-main > .ssx-block + .ssx-block {
    margin-top: 24px !important;          /* mobile */
  }
}

/* 2) Plan B infalible: spacer fuera del borde del bloque (no colapsa) */
.ssx-main > .ssx-block{
  position: relative;
}
.ssx-main > .ssx-block:not(:last-child)::after{
  content: "";
  display: block;
  height: 32px;                           /* desktop */
}
@media (max-width: 768px){
  .ssx-main > .ssx-block:not(:last-child)::after{
    height: 24px;                          /* mobile */
  }
}

/* 3) Sin padding-top interno para que el hueco NO quede sobre “Full Day…” */
.ssx-itinerary,
.ssx-features{
  padding-top: 0 !important;
}

/* 4) Evitar colapso de márgenes dentro del bloque */
.ssx-block{ display: flow-root; }
/* ===== GAP ENTRE CONTENEDORES (también cuando hay .ssx-box) ===== */
:root{
  --gap-xs:10px; --gap-sm:16px; --gap-md:24px; --gap-lg:32px;
}

/* Entre bloques normales */
.ssx-main > .ssx-block + .ssx-block{ margin-top: var(--gap-lg) !important; }

/* Entre .ssx-block y .ssx-box, y entre .ssx-box consecutivos */
.ssx-main > .ssx-block + .ssx-box,
.ssx-main > .ssx-box + .ssx-block,
.ssx-main > .ssx-box + .ssx-box{
  margin-top: var(--gap-lg) !important;
}

/* Evita colapso de márgenes */
.ssx-block, .ssx-box{ display: flow-root; }

/* Mobile: respira un poco menos */
@media (max-width: 768px){
  .ssx-main > .ssx-block + .ssx-block,
  .ssx-main > .ssx-block + .ssx-box,
  .ssx-main > .ssx-box + .ssx-block,
  .ssx-main > .ssx-box + .ssx-box{
    margin-top: var(--gap-md) !important;
  }
}

/* ===== “Incluye / No incluye” en 2 columnas (robusto) ===== */
/* Forzamos GRID con más especificidad y !important para vencer estilos del tema */
.ssx-main .ssx-features{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: var(--gap-lg);
  row-gap: var(--gap-md);
}

/* Los hijos no deben tener anchos fijos y deben permitir encogerse dentro del grid */
.ssx-main .ssx-features__col{ min-width: 0; }

/* Listas con separación vertical consistente */
.ssx-main .ssx-features__col .ssx-list{
  display: grid;
  row-gap: var(--gap-sm);
}

/* Mobile: apilar columnas, conservar buen espacio vertical */
@media (max-width: 768px){
  .ssx-main .ssx-features{
    grid-template-columns: 1fr !important;
    row-gap: var(--gap-lg);
  }
}

/* ===== Títulos: mantener el “aire” arriba/abajo ===== */
.ssx-main .ssx-title,
.ssx-main .ssx-subtitle{
  margin-top: var(--gap-sm) !important;
  margin-bottom: var(--gap-sm) !important;
}

/* ===== Evitar hueco interno encima del chip “Full Day …” ===== */
.ssx-main .ssx-itinerary,
.ssx-main .ssx-features{
  padding-top: 0 !important;
  padding-bottom: var(--gap-md) !important;
}

/* Añade un margen inferior a la galería para que no toque el siguiente borde */
.ssx-main .ssx-gallery{ margin-bottom: var(--gap-md); }