/* =========================================================================
   MayaSky — demo de rediseño (Itadaki.io)
   Implementa DESIGN.md. CSS plano, cero dependencias en runtime.
   ========================================================================= */

/* --- 1. Tokens --------------------------------------------------------- */
:root {
  --ms-ink: #231914;
  --ms-ink-2: #6B5544;
  --ms-brand: #77502D;
  --ms-brand-deep: #633E1B;
  --ms-sand: #D2AC85;
  --ms-sand-line: #B08A5E;
  --ms-sand-50: #F4EDE4;
  --ms-surface: #FFFFFF;
  --ms-jade: #0E7C66;
  --ms-jade-deep: #0A5F4E;
  --ms-hairline: #E8DCCD;
  --ms-hairline-2: #EFE5D8;

  --ms-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --ms-font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ms-text-xs: 0.75rem;
  --ms-text-sm: 0.875rem;
  --ms-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --ms-text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --ms-text-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --ms-text-2xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --ms-text-3xl: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
  --ms-text-4xl: clamp(2.25rem, 1.7rem + 2.1vw, 3.25rem);

  --ms-1: 4px;  --ms-2: 8px;  --ms-3: 12px; --ms-4: 16px; --ms-5: 20px;
  --ms-6: 24px; --ms-8: 32px; --ms-10: 40px; --ms-12: 48px; --ms-16: 64px;
  --ms-20: 80px; --ms-24: 96px; --ms-32: 128px;

  --ms-gutter: clamp(16px, 4vw, 32px);
  --ms-w-prose: 68ch;
  --ms-w-content: 1140px;
  --ms-w-wide: 1320px;

  --ms-r-xs: 2px; --ms-r-sm: 6px; --ms-r-md: 12px; --ms-r-lg: 20px; --ms-r-pill: 999px;

  --ms-shadow-sm: 0 1px 2px rgba(35,25,20,.06), 0 2px 6px rgba(35,25,20,.05);
  --ms-shadow-md: 0 4px 10px rgba(35,25,20,.09), 0 12px 28px rgba(35,25,20,.08);
  --ms-shadow-lg: 0 10px 24px rgba(35,25,20,.12), 0 28px 60px rgba(35,25,20,.10);

  --ms-ease: cubic-bezier(.2,.8,.25,1);
  --ms-ease-inout: cubic-bezier(.4,0,.2,1);
  --ms-t-fast: 140ms; --ms-t: 200ms; --ms-t-slow: 320ms;

  --ms-banda: 32px;     /* alto de la banda de demo */
  --ms-header: 72px;
}

/* --- 2. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ms-banda) + var(--ms-header) + 16px);
}
body {
  margin: 0;
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-base);
  line-height: 1.62;
  color: var(--ms-ink);
  background: var(--ms-surface);
  padding-top: var(--ms-banda);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--ms-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--ms-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

/* Un solo foco en todo el sitio. */
:focus-visible {
  outline: 2px solid var(--ms-jade);
  outline-offset: 2px;
  border-radius: var(--ms-r-xs);
}
.sobre-oscuro :focus-visible, .ms-hero :focus-visible {
  box-shadow: 0 0 0 4px #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    transform: none !important;
  }
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--ms-4); top: calc(var(--ms-banda) + 4px);
  transform: translateY(-200%); background: var(--ms-jade); color: #fff;
  padding: var(--ms-3) var(--ms-5); border-radius: var(--ms-r-sm); z-index: 120;
  text-decoration: none; font-weight: 600;
}
.saltar:focus { transform: translateY(0); }

/* --- 3. Layout base ---------------------------------------------------- */
.ms-contenido { width: min(100% - var(--ms-gutter) * 2, var(--ms-w-content)); margin-inline: auto; }
.ms-ancho     { width: min(100% - var(--ms-gutter) * 2, var(--ms-w-wide)); margin-inline: auto; }
.ms-seccion   { padding-block: clamp(var(--ms-16), 9vw, var(--ms-32)); }
.ms-seccion--arena { background: var(--ms-sand-50); }
.ms-seccion--oscura { background: var(--ms-ink); color: var(--ms-sand-50); }
.ms-grid-min0 > * { min-width: 0; }

.ms-eyebrow {
  font-size: var(--ms-text-xs); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--ms-ink-2); margin: 0;
}
.ms-hairline-jade {
  width: 24px; height: 2px; background: var(--ms-jade); border: 0; margin: 0 0 var(--ms-4);
}
.ms-lead { font-size: var(--ms-text-lg); color: var(--ms-ink-2); max-width: 48ch; }
.ms-prosa { max-width: var(--ms-w-prose); color: var(--ms-ink-2); }
.ms-titulo-seccion { font-size: var(--ms-text-2xl); color: var(--ms-brand-deep); line-height: 1.18; }
.ms-seccion--oscura .ms-titulo-seccion { color: var(--ms-sand-50); }

.ms-cabecera-seccion {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--ms-4); margin-bottom: var(--ms-10);
}

/* --- 4. Tratamiento de foto (una sola clase, DESIGN.md §2) ------------- */
.ms-foto { position: relative; overflow: hidden; background: #C9B49A; }
.ms-foto > img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) contrast(1.06) brightness(.98) sepia(.10);
}
/* Velo de marca: hermana 70 fotos de 2017 bajo un mismo café. */
.ms-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #77502D; mix-blend-mode: multiply; opacity: .10;
}
/* Grano: le da coartada de intención al ruido HDR y al reescalado. */
.ms-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ms-foto--vineta { box-shadow: inset 0 0 120px 40px rgba(35,25,20,.35); }
.ms-foto--duotono > img { filter: saturate(0) contrast(1.15) sepia(.55) brightness(.85); transition: filter var(--ms-t-slow) var(--ms-ease); }

/* --- 5. Banda de demo -------------------------------------------------- */
.ms-banda {
  position: fixed; inset: 0 0 auto 0; height: var(--ms-banda); z-index: 100;
  background: var(--ms-ink); border-bottom: 1px solid #3A2A22;
  display: flex; align-items: center;
}
.ms-banda__inner {
  width: min(100% - var(--ms-gutter) * 2, var(--ms-w-wide)); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: var(--ms-3);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-sand);
}
.ms-banda__sep { color: rgba(210,172,133,.45); }
.ms-banda__marca { color: var(--ms-sand-50); }
.ms-banda__link { margin-left: auto; color: var(--ms-sand); text-decoration: none; }
.ms-banda__link:hover { text-decoration: underline; }

/* --- 6. Header --------------------------------------------------------- */
.ms-header {
  position: sticky; top: var(--ms-banda); z-index: 90;
  background: var(--ms-surface); border-bottom: 1px solid var(--ms-hairline);
}
.ms-header__inner {
  height: var(--ms-header); display: flex; align-items: center; gap: var(--ms-6);
}
/* El logo NO se achica nunca. Sin flex:none el enlace se comprime al angostar
   la ventana y el max-width:100% del reset global le baja el alto con él: el
   logo iba encogiendo de a poco en vez de mantenerse. El que cede es el menú. */
.ms-header__logo { flex: none; }
.ms-header__logo img { height: 42px; width: auto; max-width: none; }
.ms-nav { display: flex; gap: var(--ms-6); margin-left: auto; min-width: 0; flex-shrink: 1; }
.ms-nav a { white-space: nowrap; }
.ms-nav a {
  font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-ink-2);
  text-decoration: none; padding-block: var(--ms-2); position: relative;
}
.ms-nav a:hover { color: var(--ms-brand); }
.ms-nav a[aria-current="page"] { color: var(--ms-brand); }
.ms-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ms-jade);
}

/* Selector de idioma: los tres visibles, no un desplegable. Van junto al CTA y
   no dentro de la nav — no son secciones del sitio sino vistas de la misma
   página. Con tres códigos de dos letras entran incluso a 400px, donde la nav
   se oculta pero el idioma no puede ocultarse. */
.ms-idiomas { display: flex; align-items: center; gap: var(--ms-1); flex: none; }
.ms-idiomas a {
  font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-ink-2);
  text-decoration: none; padding: var(--ms-1) var(--ms-2) 2px;
  border-radius: var(--ms-r-sm) var(--ms-r-sm) 0 0; border-bottom: 2px solid transparent;
  transition: color var(--ms-t) var(--ms-ease), background var(--ms-t) var(--ms-ease);
}
.ms-idiomas abbr { text-decoration: none; border: 0; font-variant: inherit; }
.ms-idiomas a:hover { color: var(--ms-brand); background: var(--ms-sand-50); }
/* El idioma activo no se distingue solo por color: lleva peso y subrayado. */
.ms-idiomas a[aria-current="true"] {
  color: var(--ms-brand-deep); font-weight: 700; border-bottom-color: var(--ms-jade);
}
.ms-idiomas a[aria-current="true"]:hover { background: none; }
.ms-idiomas__sep { color: var(--ms-sand-line); font-size: var(--ms-text-sm); }

/* Estado sin productos. Lo ve el cliente en la vista previa: tiene que leerse
   como «acá va su catálogo», no como error. */
.ms-proximo {
  display: grid; justify-items: center; text-align: center; gap: var(--ms-4);
  background: var(--ms-sand-50); border: 1px dashed var(--ms-sand-line);
  border-radius: var(--ms-r-lg); padding: clamp(40px, 7vw, 72px) var(--ms-6);
}
.ms-proximo > svg { color: var(--ms-brand); opacity: .55; }
.ms-proximo__titulo {
  font-size: var(--ms-text-2xl); color: var(--ms-brand-deep); line-height: 1.18;
  max-width: 28ch; hyphens: none; text-wrap: balance;
}
.ms-proximo__texto { color: var(--ms-ink-2); max-width: 56ch; }

/* --- 7. Botones -------------------------------------------------------- */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-2);
  height: 48px; padding: 0 var(--ms-6); border-radius: var(--ms-r-pill);
  font-weight: 600; font-size: var(--ms-text-base); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--ms-t) var(--ms-ease), box-shadow var(--ms-t) var(--ms-ease),
              transform var(--ms-t) var(--ms-ease), color var(--ms-t) var(--ms-ease);
}
.ms-btn--primario { background: var(--ms-jade); color: #fff; box-shadow: var(--ms-shadow-sm); }
.ms-btn--primario:hover { background: var(--ms-jade-deep); box-shadow: var(--ms-shadow-md); transform: translateY(-1px); }
.ms-btn--primario:active { transform: translateY(0); box-shadow: var(--ms-shadow-sm); }
.ms-btn--primario:focus-visible { outline-offset: 3px; }
.ms-btn--fantasma { border-color: var(--ms-sand); color: var(--ms-sand-50); background: transparent; }
.ms-btn--fantasma:hover { background: rgba(244,237,228,.12); }
.ms-btn--compacto { height: 40px; padding: 0 var(--ms-5); font-size: var(--ms-text-sm); flex: none; }
.ms-btn--ancho { width: 100%; }
.ms-link-terciario { color: var(--ms-brand); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--ms-2); }
.ms-link-terciario:hover { text-decoration: underline; }
.ms-link-terciario svg { transition: transform var(--ms-t) var(--ms-ease); }
.ms-link-terciario:hover svg { transform: translateX(4px); }

/* --- 8. Hero ----------------------------------------------------------- */
.ms-hero { margin-top: var(--ms-10); }
.ms-hero__lienzo {
  display: grid; grid-template-columns: 48% 52%; min-height: 560px;
  border-radius: var(--ms-r-lg); overflow: hidden; background: var(--ms-ink);
}
.ms-hero__placa {
  padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column;
  justify-content: center; gap: var(--ms-5); color: var(--ms-sand-50);
}
.ms-hero__eyebrow { color: var(--ms-sand); font-size: var(--ms-text-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.ms-hero__titulo { font-size: var(--ms-text-4xl); line-height: 1.06; color: var(--ms-sand-50); }
.ms-hero__lead { font-size: var(--ms-text-lg); color: #D8C9B8; max-width: 48ch; }
.ms-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--ms-3); margin-top: var(--ms-2); }
.ms-hero__foto { position: relative; }
.ms-hero__foto > img { height: 100%; object-position: center 40%; }

/* Hero bajo (ficha y catálogo) */
.ms-herobajo {
  position: relative; border-radius: var(--ms-r-lg); overflow: hidden;
  margin-top: var(--ms-8); background: var(--ms-ink);
}
.ms-herobajo--foto { height: clamp(280px, 34vw, 360px); }
.ms-herobajo--placa { min-height: 200px; display: flex; align-items: center; }
.ms-herobajo__capa {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(35,25,20,.88) 0%, rgba(35,25,20,.32) 55%, rgba(35,25,20,0) 100%);
}
.ms-herobajo__texto {
  position: relative; z-index: 4; padding: var(--ms-8);
  display: flex; flex-direction: column; gap: var(--ms-3); margin-top: auto;
}
.ms-herobajo--foto .ms-herobajo__texto { position: absolute; inset: auto 0 0 0; }
.ms-herobajo__titulo { font-size: var(--ms-text-3xl); color: #fff; line-height: 1.06; }
.ms-herobajo__meta { display: flex; flex-wrap: wrap; gap: var(--ms-3); color: var(--ms-sand); font-size: var(--ms-text-sm); }
.ms-herobajo__meta li { display: flex; align-items: center; gap: var(--ms-2); }
.ms-miga { font-size: var(--ms-text-xs); color: var(--ms-sand); letter-spacing: .06em; }
.ms-miga a { color: var(--ms-sand); }

/* --- 9. TourCard ------------------------------------------------------- */
.ms-grid-tours {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: var(--ms-6); row-gap: var(--ms-8);
}
.ms-grid-tours > * { min-width: 0; }
.ms-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--ms-surface); border: 1px solid var(--ms-hairline);
  border-radius: var(--ms-r-md); overflow: hidden; box-shadow: var(--ms-shadow-sm);
  transition: box-shadow var(--ms-t) var(--ms-ease), border-color var(--ms-t) var(--ms-ease),
              transform var(--ms-t) var(--ms-ease);
}
.ms-card:hover { box-shadow: var(--ms-shadow-md); border-color: var(--ms-sand-line); transform: translateY(-2px); }
.ms-card:active { transform: translateY(0); box-shadow: var(--ms-shadow-sm); }
.ms-card:has(:focus-visible) { outline: 2px solid var(--ms-jade); outline-offset: 2px; transform: none; }
.ms-card__foto { aspect-ratio: 16 / 9; position: relative; }
.ms-card__foto > img { transition: transform var(--ms-t-slow) var(--ms-ease); }
.ms-card:hover .ms-card__foto > img { transform: scale(1.04); }
.ms-card__destino {
  position: absolute; left: var(--ms-3); bottom: var(--ms-3); z-index: 3;
  background: rgba(35,25,20,.78); backdrop-filter: blur(6px);
  color: var(--ms-sand); font-size: var(--ms-text-xs); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; padding: 4px 10px; border-radius: var(--ms-r-pill);
}
.ms-card__cuerpo { padding: var(--ms-5); display: flex; flex-direction: column; gap: var(--ms-3); flex: 1; }
.ms-card__titulo { font-size: var(--ms-text-xl); color: var(--ms-brand-deep); line-height: 1.18; }
.ms-card__titulo a { color: inherit; text-decoration: none; }
.ms-card__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.ms-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--ms-4);
  border-top: 1px solid var(--ms-hairline-2); padding-top: var(--ms-3);
  font-size: var(--ms-text-sm); color: var(--ms-ink-2); margin-top: auto;
}
.ms-card__meta li { display: flex; align-items: center; gap: var(--ms-2); }
.ms-card__meta svg { flex: none; color: var(--ms-brand); }
.ms-card__cta { margin-top: var(--ms-3); }

/* Chips de días de salida: nunca solo color — el inactivo baja opacidad y lleva aria-label. */
.ms-dias { display: flex; gap: var(--ms-1); }
.ms-dias li {
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: var(--ms-text-xs); font-weight: 600; border-radius: var(--ms-r-xs);
  background: var(--ms-sand-50); color: var(--ms-brand);
}
.ms-dias li[data-activo="no"] { color: #C9BBA9; background: transparent; opacity: .55; }

/* --- 10. FilterBar ----------------------------------------------------- */
.ms-filtros {
  position: sticky; top: calc(var(--ms-banda) + var(--ms-header)); z-index: 80;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ms-hairline); padding-block: var(--ms-4);
}
.ms-filtros__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ms-6); }
.ms-filtros fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ms-filtros__label {
  display: block; font-size: var(--ms-text-xs); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; color: var(--ms-ink-2); margin-bottom: var(--ms-2);
}
.ms-chips { display: flex; gap: var(--ms-2); flex-wrap: wrap; }
.ms-chip { position: relative; }
.ms-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ms-chip span {
  display: inline-flex; align-items: center; gap: var(--ms-2); height: 36px; padding: 0 14px;
  border-radius: var(--ms-r-pill); border: 1px solid var(--ms-sand-line);
  background: var(--ms-surface); font-size: var(--ms-text-sm); font-weight: 600;
  color: var(--ms-brand); white-space: nowrap;
  transition: background var(--ms-t) var(--ms-ease), border-color var(--ms-t) var(--ms-ease), color var(--ms-t) var(--ms-ease);
}
.ms-chip span svg { display: none; }
.ms-chip input:hover + span { background: var(--ms-sand-50); border-color: var(--ms-brand); }
.ms-chip input:checked + span { background: var(--ms-ink); border-color: var(--ms-ink); color: var(--ms-sand); }
.ms-chip input:checked + span svg { display: block; }
.ms-chip input:focus-visible + span { outline: 2px solid var(--ms-jade); outline-offset: 2px; }
.ms-filtros__estado { margin-left: auto; display: flex; align-items: center; gap: var(--ms-4); font-size: var(--ms-text-sm); color: var(--ms-ink-2); }
.ms-filtros__estado b { color: var(--ms-brand-deep); font-weight: 600; }
.ms-vacio { text-align: center; padding-block: var(--ms-24); color: var(--ms-ink-2); display: grid; gap: var(--ms-4); justify-items: center; }

/* --- 11. ItineraryDay -------------------------------------------------- */
.ms-itinerario { position: relative; }
.ms-itinerario__dia { position: relative; padding-left: 64px; padding-bottom: var(--ms-10); }
.ms-itinerario__dia::before {
  content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--ms-hairline);
}
.ms-itinerario__dia:last-child::before { display: none; }
.ms-itinerario__nodo {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ms-sand-50);
  border: 1px solid var(--ms-sand-line); font-family: var(--ms-font-display);
  font-weight: 700; font-size: var(--ms-text-lg); color: var(--ms-brand-deep);
}
.ms-itinerario__dia[data-extremo] .ms-itinerario__nodo { background: var(--ms-ink); color: var(--ms-sand); border-color: var(--ms-ink); }
.ms-itinerario__titulo { font-size: var(--ms-text-xl); color: var(--ms-brand-deep); line-height: 1.18; margin-block: var(--ms-1) var(--ms-3); }
.ms-itinerario__texto { color: var(--ms-ink-2); max-width: var(--ms-w-prose); }

/* --- 12. Ficha: cuerpo en dos columnas --------------------------------- */
.ms-ficha { display: grid; grid-template-columns: 1fr 360px; gap: var(--ms-16); align-items: start; }
.ms-ficha > * { min-width: 0; }
.ms-panel {
  position: sticky; top: calc(var(--ms-banda) + var(--ms-header) + 16px);
  background: var(--ms-sand-50); border: 1px solid var(--ms-hairline);
  border-radius: var(--ms-r-md); padding: var(--ms-6); display: grid; gap: var(--ms-4);
}
.ms-panel dl { display: grid; gap: var(--ms-3); margin: 0; }
.ms-panel dt { font-size: var(--ms-text-xs); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--ms-ink-2); }
.ms-panel dd { margin: 0; font-weight: 600; color: var(--ms-brand-deep); }
.ms-panel hr { border: 0; border-top: 1px solid var(--ms-hairline); margin: 0; }
.ms-incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ms-3) var(--ms-8); }
.ms-incluye li { display: flex; gap: var(--ms-3); align-items: flex-start; color: var(--ms-ink-2); }
.ms-incluye svg { flex: none; margin-top: 4px; color: var(--ms-jade); }
.ms-galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--ms-3); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--ms-2); }
.ms-galeria > * { scroll-snap-align: start; }
.ms-galeria button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--ms-r-sm); overflow: hidden; }
.ms-galeria .ms-foto { aspect-ratio: 3 / 2; border-radius: var(--ms-r-sm); }
dialog.ms-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1140px, 92vw); }
dialog.ms-lightbox::backdrop { background: rgba(35,25,20,.94); }
dialog.ms-lightbox img { border-radius: var(--ms-r-md); }
dialog.ms-lightbox button { position: absolute; top: var(--ms-3); right: var(--ms-3); background: rgba(35,25,20,.7); color: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }

/* --- 13. Segmentos ----------------------------------------------------- */
.ms-segmentos { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ms-6); }
.ms-segmentos > li { grid-column: span 3; min-width: 0; }
.ms-segmentos > li:nth-child(-n+3) { grid-column: span 4; }
.ms-segmento { display: grid; gap: var(--ms-3); }
.ms-segmento .ms-foto { aspect-ratio: 4 / 3; border-radius: var(--ms-r-md); }
.ms-segmento:hover .ms-foto--duotono > img { filter: saturate(.86) contrast(1.06) brightness(.98) sepia(.10); }
.ms-segmento__nombre { font-family: var(--ms-font-display); font-weight: 700; font-size: var(--ms-text-lg); color: var(--ms-sand-50); display: flex; align-items: center; gap: var(--ms-2); }
.ms-segmento__nombre svg { color: var(--ms-sand); flex: none; }
.ms-segmento__texto { color: #C6B29A; font-size: var(--ms-text-sm); }

/* --- 14. Valor --------------------------------------------------------- */
.ms-valor { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ms-8); }
.ms-valor > * { min-width: 0; }
.ms-valor__item { display: grid; gap: var(--ms-3); justify-items: start; }
.ms-valor__icono { width: 56px; height: 56px; border-radius: 50%; background: var(--ms-surface); display: grid; place-items: center; color: var(--ms-jade); box-shadow: var(--ms-shadow-sm); }
.ms-valor__titulo { font-size: var(--ms-text-lg); color: var(--ms-brand-deep); }
.ms-valor__texto { color: var(--ms-ink-2); max-width: 42ch; font-size: var(--ms-text-sm); }

/* --- 15. Cierre y footer ----------------------------------------------- */
.ms-cierre { position: relative; border-radius: var(--ms-r-lg); overflow: hidden; }
.ms-cierre__fotos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ms-cierre__capa { position: absolute; inset: 0; background: rgba(35,25,20,.88); z-index: 3; }
.ms-cierre__texto { position: relative; z-index: 4; padding: clamp(40px, 7vw, 80px); display: grid; gap: var(--ms-4); justify-items: center; text-align: center; color: var(--ms-sand-50); }
.ms-cierre__titulo { font-size: var(--ms-text-2xl); color: var(--ms-sand-50); }

.ms-footer { background: var(--ms-ink); color: var(--ms-sand); padding-block: var(--ms-20) var(--ms-8); margin-top: var(--ms-24); }
.ms-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--ms-10); }
.ms-footer__cols > * { min-width: 0; }
.ms-footer h3 { font-size: var(--ms-text-sm); text-transform: uppercase; letter-spacing: .14em; color: var(--ms-sand-50); font-family: var(--ms-font-sans); font-weight: 600; margin-bottom: var(--ms-4); }
.ms-footer a { color: var(--ms-sand); text-decoration: none; }
.ms-footer a:hover { text-decoration: underline; color: var(--ms-sand-50); }
.ms-footer li + li { margin-top: var(--ms-2); }
.ms-footer__paises { font-size: var(--ms-text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-sand); margin-top: var(--ms-4); }
.ms-footer__logo { height: 48px; width: auto; max-width: none; }
.ms-footer__legal { margin-top: var(--ms-12); padding-top: var(--ms-6); border-top: 1px solid rgba(210,172,133,.2); font-size: var(--ms-text-xs); color: #A89078; display: flex; flex-wrap: wrap; gap: var(--ms-4); justify-content: space-between; }
.ms-sucursal { font-size: var(--ms-text-sm); }
.ms-sucursal b { color: var(--ms-sand-50); font-weight: 600; display: block; }

/* --- 16. Responsive ---------------------------------------------------- */
@media (max-width: 1139px) {
  .ms-hero__lienzo { border-radius: var(--ms-r-lg); }
}
@media (max-width: 899px) {
  .ms-hero__lienzo { grid-template-columns: 1fr; min-height: 0; }
  .ms-hero__foto { aspect-ratio: 16 / 10; max-height: 320px; order: -1; }
  .ms-ficha { grid-template-columns: 1fr; gap: var(--ms-10); }
  .ms-panel { position: static; }
  .ms-panel--movil { position: fixed; inset: auto 0 0 0; z-index: 95; border-radius: 0; border-left: 0; border-right: 0; padding: var(--ms-3) var(--ms-4) calc(var(--ms-3) + env(safe-area-inset-bottom)); background: var(--ms-surface); box-shadow: var(--ms-shadow-lg); }
  .ms-segmentos > li, .ms-segmentos > li:nth-child(-n+3) { grid-column: span 6; }
  .ms-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  :root { --ms-banda: 28px; }
  .ms-banda__inner { font-size: 10px; }
  .ms-banda__link { display: none; }
  .ms-grid-tours { grid-template-columns: 1fr; }
  .ms-segmentos > li, .ms-segmentos > li:nth-child(-n+3) { grid-column: span 12; }
  .ms-footer__cols { grid-template-columns: 1fr; gap: var(--ms-8); }
  .ms-itinerario__dia { padding-left: 48px; }
  .ms-itinerario__nodo { width: 32px; height: 32px; font-size: var(--ms-text-base); }
  .ms-itinerario__dia::before { left: 15px; top: 32px; }
  .ms-filtros__inner { flex-direction: column; align-items: stretch; gap: var(--ms-4); }
  .ms-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: var(--ms-1); }
  .ms-chips::-webkit-scrollbar { display: none; }
  .ms-chip { scroll-snap-align: start; }
  .ms-filtros__estado { margin-left: 0; }
  .ms-nav { display: none; }
  .ms-header__inner { gap: var(--ms-3); }
  .ms-header__logo img { height: 34px; }
  .ms-idiomas { margin-left: auto; }
  .ms-idiomas a { padding-inline: 5px; font-size: var(--ms-text-xs); }
  .ms-idiomas__sep { display: none; }
  .ms-btn--compacto { height: 38px; padding: 0 var(--ms-4); font-size: var(--ms-text-xs); }
  .ms-herobajo__texto { padding: var(--ms-5); }
}

/* Aviso de contenido pendiente. Se usa en la única ficha que el sitio actual
   nunca tradujo: mejor decirlo que dejar español crudo en la versión inglesa. */
.ms-aviso {
  display: flex; align-items: flex-start; gap: var(--ms-3);
  background: var(--ms-sand-50); border: 1px solid var(--ms-sand-line);
  border-radius: var(--ms-r-sm); padding: var(--ms-4) var(--ms-5);
  color: var(--ms-ink-2); font-size: var(--ms-text-sm);
  margin-bottom: var(--ms-8);
}
.ms-aviso svg { flex: none; color: var(--ms-brand); margin-top: 2px; }

/* Qué incluye / no incluye. El icono nunca es la única señal: cada lista va
   bajo su propio encabezado, para que no dependa de distinguir ✓ de ✕. */
.ms-subtitulo {
  font-family: var(--ms-font-sans); font-size: var(--ms-text-sm);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--ms-ink-2); margin: var(--ms-10) 0 var(--ms-4);
}
.ms-incluye li.ms-no svg { color: var(--ms-ink-2); opacity: .7; }
.ms-nota-cond { margin-top: var(--ms-6); font-size: var(--ms-text-sm); color: var(--ms-ink-2); font-style: italic; }