/* ============================================================
   Don Lago - base compartida
   Reset, tokens de marca y componentes comunes a las tres
   propuestas. Cada propuesta redefine los tokens y estiliza
   los bloques; esta hoja garantiza coherencia y accesibilidad.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Paleta de marca (muestreada del PDF de Cabalgatas Don Lago) */
  --verde: #215F47;
  --verde-osc: #16402F;
  --verde-claro: #2F7A5C;
  --vino: #5A2A22;
  --vino-osc: #3C1B16;
  --terracota: #D2762F;
  --terracota-claro: #E39A5C;
  --kraft: #9A7A58;
  --kraft-claro: #E7D9C3;
  --crema: #F5EFE3;
  --papel: #FAF5EC;
  --tinta: #2A1F17;
  --gris: #6F6253;
  --linea: #E2D3BB;

  --sans: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;

  --pad: clamp(18px, 5vw, 84px);
  --max: 1320px;
  --radio: 2px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --fondo: var(--papel);
  --texto: var(--tinta);
  --acento: var(--verde);
  --acento-contraste: #fff;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
/* La clase de estilo va en el <img>; display:contents hace que <picture> no
   rompa la participacion del layout (flex/grid/aspect-ratio). */
picture { display: contents; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.06; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--verde); color: #fff; padding: 12px 18px; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Contenedores ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 116px); }
.section--tight { padding-block: clamp(40px, 5vw, 68px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }

.h-sec { font-size: clamp(30px, 4.4vw, 54px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.66; color: var(--gris); max-width: 62ch; }
.on-dark .lead, .lead--light { color: rgba(255, 255, 255, .74); }
.muted { color: var(--gris); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid transparent; border-radius: var(--radio);
  font: 600 15px/1.1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--acento); color: var(--acento-contraste); }
.btn--primary:hover { background: var(--acento-osc); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--wa { background: #25D366; color: #08240F; }
.btn--wa:hover { background: #1eb855; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ---------- Etiquetas y datos ---------- */
.tag {
  display: inline-block; font: 600 11px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acento);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px;
  font-size: 14px; background: rgba(255, 255, 255, .55);
}
.price { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }

/* ---------- Formularios ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span, .label {
  display: block; margin-bottom: 7px;
  font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris);
}
.input, select.input, textarea.input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: var(--radio);
  background: #fff; color: var(--texto);
  transition: border-color .2s, box-shadow .2s;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.input[aria-invalid="true"] { border-color: #B33A2B; }
.field__error { display: none; margin-top: 6px; font-size: 13px; color: #B33A2B; }
.field__error.is-on { display: block; }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: 1.5px solid var(--linea); border-radius: var(--radio);
  background: #fff; cursor: pointer; font-size: 15px;
  transition: border-color .2s, background .2s;
}
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio:hover { border-color: var(--acento); }
.radio:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, #fff); }
.radio:has(input:focus-visible) { outline: 3px solid var(--terracota); outline-offset: 2px; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 18px; border: 1.5px solid var(--linea); border-radius: var(--radio);
  background: #fff; cursor: pointer;
}
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento); cursor: pointer; }
.check--invalid { border-color: #B33A2B; }

/* ---------- Deslinde ---------- */
.waiver { border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, .6); }
.waiver__head { padding: 22px 24px; border-bottom: 1px solid var(--linea); }
.waiver__head h3 { font-size: 20px; }
.waiver__head p { margin: 6px 0 0; font-size: 14px; color: var(--gris); }
.waiver__body { padding: 20px 24px; max-height: 320px; overflow-y: auto; }
.waiver__body p { font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.waiver__body ol { padding-left: 20px; margin: 0; list-style: decimal; }
.waiver__body li { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin-bottom: 10px; }
.waiver__accept { padding: 18px 24px; border-top: 1px solid var(--linea); }

/* ---------- Galería ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: rgba(20, 12, 9, .94); padding: 24px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.lightbox.is-open { display: grid; }
.lightbox { touch-action: pan-y; }
.lightbox__box { max-width: 1100px; width: 100%; }
.lightbox__img { width: 100%; max-height: 76vh; object-fit: contain; margin-inline: auto; touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.lightbox__cap { margin-top: 14px; color: rgba(255,255,255,.82); font-size: 14px; text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 20px;
}
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }

/* ---------- Pie flotante de WhatsApp ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 999px;
  background: #25D366; color: #08240F; text-decoration: none;
  font: 600 15px/1 var(--sans);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  transition: transform .3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); }
.wa-float svg { width: 22px; height: 22px; flex: none; }

/* ---------- Utilidades ---------- */
.nav__side { display: none; }  /* en escritorio el idioma y el CTA viven en .hdr__side */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.grid { display: grid; gap: 26px; }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wa-float { padding: 12px 16px; font-size: 14px; }
}

/* ============================================================
   PROPUESTA A — "Cuaderno de Campo"
   Editorial kraft: papel, bordes rasgados, capítulos numerados.
   Toma la paleta y los recursos del PDF de marca.
   ============================================================ */

.prop-a {
  --fondo: #EDE3CF;
  --papel-card: #F8F1E2;
  --texto: #2A1F17;
  --gris: #6E6152;
  --acento: #215F47;
  --acento-osc: #16402F;
  --acento-contraste: #F8F1E2;
  --vino: #5A2A22;
  --terracota: #C2652A;
  --linea: #D6C4A5;
  --sans: "Karla", "Segoe UI", system-ui, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --radio: 3px;
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.prop-a body {
  background-color: var(--fondo);
  background-image: var(--textura);
  background-size: 180px 180px;
  background-blend-mode: multiply;
}

.prop-a h1, .prop-a h2, .prop-a h3, .prop-a h4 { font-family: var(--serif); }

/* ---------- Header ---------- */
.hdr--a {
  position: sticky; top: 0; z-index: 60;
  background: rgba(237, 227, 207, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.hdr--a.is-scrolled { border-bottom-color: var(--linea); background: rgba(237, 227, 207, .97); }
.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 92px; }
.hdr__brand { display: flex; align-items: center; flex: none; }
.hdr__logo { width: 66px; height: auto; }
.nav { margin-left: auto; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a {
  text-decoration: none; font: 600 14px/1 var(--sans);
  letter-spacing: .04em; padding: 8px 0; position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1.5px; background: var(--terracota); transition: right .3s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { right: 0; }
.hdr__side { display: flex; align-items: center; gap: 14px; }
.lang {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px;
  border: 1.5px solid var(--linea); border-radius: 999px;
  font: 700 12px/1 var(--sans); letter-spacing: .1em; text-decoration: none;
  background: rgba(255,255,255,.5);
}
.lang:hover { border-color: var(--acento); color: var(--acento); }
.burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--texto); margin: 4px auto; transition: transform .3s, opacity .2s; }

/* El tema (Astra) pinta button:hover/focus con su color global (mostaza
   #D09A40) con especificidad 0,1,1, que le gana a los fondos del kit
   (0,1,0). Al quedar el foco en un boton del kit (p. ej. al cerrar el
   menu movil el foco vuelve al burger) aparece un cuadrado amarillo.
   Se re-afirman aqui los valores en reposo con especificidad mayor
   (decision #49). Los :hover de fondo ya los cubren las reglas del kit
   (0,2,0); en hover solo se re-afirma el color de texto. */
body .burger:is(:hover, :focus, :focus-visible, :active) { background: none; }
body .gal-item:is(:hover, :focus, :focus-visible, :active) { background: none; }
body .nav__close:is(:hover, :focus, :focus-visible, :active),
body .drawer__close:is(:hover, :focus, :focus-visible, :active),
body .date-picker__toggle:is(:hover, :focus, :focus-visible, :active),
body .date-picker__nav:is(:hover, :focus, :focus-visible, :active) { background: transparent; color: inherit; }
body .btn--primary:is(:hover, :focus, :focus-visible, :active) { color: var(--acento-contraste); }
body .btn--wa:is(:hover, :focus, :focus-visible, :active) { color: #08240F; }
body .drawer__trigger:is(:hover, :focus, :focus-visible, :active) { color: var(--acento-contraste); border-color: rgba(255, 255, 255, .5); }
body .lightbox__close:is(:hover, :focus, :focus-visible, :active) { color: #fff; border-color: rgba(255, 255, 255, .25); }
body .lightbox__nav:is(:hover, :focus, :focus-visible, :active) { color: #fff; border-color: rgba(255, 255, 255, .25); }
body .lightbox__close:is(:focus, :focus-visible),
body .lightbox__nav:is(:focus, :focus-visible) { background: rgba(255, 255, 255, .1); }
/* En focus (los botones del kit no definen :focus propio) ademas se
   re-afirma el fondo y el borde para que Astra no los pinte de mostaza. */
body .btn--primary:is(:focus, :focus-visible) { background: var(--acento); }
body .btn--wa:is(:focus, :focus-visible) { background: #25D366; }
body .drawer__trigger:is(:focus, :focus-visible) { background: var(--acento); }
body .nav__close:is(:focus, :focus-visible),
body .drawer__close:is(:focus, :focus-visible) { border-color: var(--linea); }
body .date-picker__toggle:is(:focus, :focus-visible) { border-left-color: var(--linea); }
body .date-picker__nav:is(:focus, :focus-visible) { border-color: var(--linea); }

/* ---------- Hero ---------- */
.hero--a { padding-block: clamp(40px, 6vw, 90px) clamp(56px, 8vw, 110px); }
.hero--a .hero__grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(58px, 9.5vw, 148px);
  line-height: .84; letter-spacing: -.035em; font-weight: 400;
  margin-bottom: 22px;
}
.hero__sub {
  display: block; font-style: italic; font-weight: 300;
  font-size: clamp(24px, 3.2vw, 46px); color: var(--terracota);
  letter-spacing: -.01em; margin-top: 6px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 38px; }
.hero__facts {
  display: flex; gap: clamp(20px, 4vw, 52px); flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--linea);
}
.hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.hero__facts strong { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; }
.hero__facts span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

.hero__media { position: relative; }
.hero__video {
  width: 100%; height: clamp(420px, 62vh, 720px); object-fit: cover;
  clip-path: polygon(0 2%, 6% 0, 22% 1.4%, 38% 0, 55% 1.2%, 72% 0, 88% 1.6%, 100% 0,
                     100% 97%, 92% 100%, 74% 98.6%, 56% 100%, 38% 98.4%, 20% 100%, 6% 98.4%, 0 100%);
}
.hero__seal {
  position: absolute; left: -28px; bottom: -30px;
  width: clamp(96px, 12vw, 138px);
  background: var(--papel-card); padding: 12px; border-radius: 50%;
  box-shadow: 0 14px 34px rgba(60, 40, 22, .22);
  transform: rotate(-7deg);
}
.hero__logo { width: 100%; height: auto; }

/* ---------- Secciones ---------- */
.section--paper { background: var(--papel-card); }
.section--paper::before {
  content: ""; display: block; height: 14px; margin-bottom: -14px;
  background-image: var(--textura); background-size: 180px 180px;
  background-color: var(--fondo);
}
.section--dark { background: var(--vino); color: #F6EFE3; }
.section--dark .lead, .section--dark .muted { color: rgba(246, 239, 227, .74); }
.section--dark .eyebrow { color: var(--terracota-claro, #E6A468); }
.h-sec { margin-bottom: 16px; }

/* ---------- Capítulos (circuitos) ---------- */
.chapters { display: grid; gap: clamp(48px, 7vw, 100px); margin-top: clamp(32px, 5vw, 60px); }
.chapter {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  align-items: center; position: relative;
}
.chapter:nth-child(even) .chapter__media { order: 2; }
.chapter__num {
  display: block; margin-bottom: 6px;
  font-family: var(--serif); font-size: clamp(46px, 5.6vw, 78px); line-height: .9;
  color: var(--terracota); opacity: .42; letter-spacing: -.04em; font-weight: 500;
}
.chapter__media { position: relative; }
.chapter__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  clip-path: polygon(0 1.5%, 14% 0, 34% 1.8%, 56% 0, 78% 1.6%, 100% 0,
                     100% 98%, 84% 100%, 62% 98.4%, 40% 100%, 18% 98.6%, 0 100%);
  box-shadow: 0 22px 46px rgba(60, 40, 22, .18);
}
.chapter__tag {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--vino); color: #F6EFE3;
  padding: 8px 16px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border-radius: 2px;
}
/* Zoom de etiqueta al scroll: mientras el bloque cruza el tramo central de
   la pantalla, portada.js agrega .tag-zoom y la etiqueta crece levemente;
   al salir del tramo vuelve a la normalidad. Sin JS o con reduced-motion
   queda como siempre (clase nunca aplicada). */
.chapter__tag, .lodge__tag { transition: transform .55s var(--ease); }
.chapter__tag.tag-zoom, .lodge__tag.tag-zoom { transform: scale(1.12); }
.chapter__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; margin-bottom: 8px; }
.chapter__level {
  font: 600 15px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento); margin: 0 0 16px;
}
.chapter__desc { color: var(--gris); margin-bottom: 20px; max-width: 56ch; }
.chapter__inc { display: grid; gap: 8px; margin-bottom: 26px; }
.chapter__inc li { position: relative; padding-left: 24px; font-size: 15px; color: var(--gris); }
.chapter__inc li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 8px; height: 8px; border: 1.5px solid var(--terracota); border-radius: 50%;
}
.chapter__foot {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--linea);
}
.chapter__data { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.chapter__dur { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.chapter__price { font-size: 34px; color: var(--vino); }
.chapter__ppn { font-size: 13px; color: var(--gris); }

/* ---------- Galería en tira ---------- */
.gal { display: grid; gap: 14px; margin-top: 30px; }
.gal--film {
  grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px; scrollbar-width: thin;
}
.gal--film .gal-item { scroll-snap-align: start; }
.gal-item {
  border: 0; padding: 0; cursor: zoom-in; background: none;
  border-radius: 3px; overflow: hidden; display: block; width: 100%;
}
.gal-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal-item:hover .gal-item__img { transform: scale(1.05); }
.gal-video { margin: 26px 0 0; }
.gal-video__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.gal-video figcaption { margin-top: 10px; font-size: 14px; color: var(--gris); }

/* ---------- Sobre nosotros ---------- */
/* Plan 12/11 (dec. #55): presentacion y hospedaje apilados tambien en
   escritorio (nada de 2 columnas); el hospedaje toma el ancho del wrap
   para lucir sus fotos. En pantallas angostas ya colapsaba a 1 columna. */
.about-grid { display: grid; gap: clamp(30px, 5vw, 70px); align-items: start; }
.about { max-width: 880px; }
.about__side--card, .about__side {
  background: var(--papel-card); border: 1px solid var(--linea);
  padding: clamp(24px, 3vw, 38px); border-radius: var(--radio);
}
.section:not(.section--paper) .about__side { background: rgba(255,255,255,.55); }
.values { display: grid; gap: 16px; margin-top: 26px; }
.values li { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid var(--terracota); }
.values strong { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.values span { font-size: 14.5px; color: var(--gris); }
@media (min-width: 861px) {
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }

/* ---------- Alojamiento ---------- */
/* El marco tierra del catalogo (#9C4720, muestreado de la etiqueta "Habitacion
   para tres personas") encierra el bloque entero de hospedaje: titulo, lead,
   galeria + servicios + condiciones (dec. #57: el h2 .h-sec y la lead viven
   dentro del cartel, padding interno ampliado). Las fotos van en mosaico de 2
   (dec. #56): una ancha y la otra un poco mas angosta, misma altura, como el
   mosaico de los circuitos en escritorio. Efecto ajado: sepia suave y vineta
   calida. */
.lodge {
  display: grid; gap: 18px; margin-top: 0;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--papel-card);
  border: 3px solid #9C4720; border-radius: 4px;
  box-shadow: 0 12px 26px rgba(42, 31, 23, .16);
}
/* Titulo y lead dentro del cartel: el grid gap regula los respiros,
   los margenes propios quedan en cero. */
.lodge .h-sec { margin-bottom: 0; }
.lodge .lead { margin: 0; }
/* Mosaico de 3 fotos (sesion 22): quincho-picada ancha arriba (plano
   horizontal del atardecer) y habitacion-camas + rincon-mate lado a lado
   abajo. Derivados nuevos a 480/768/1200 desde fuentes del cliente
   (3120x4160): se sube el tope de --lodge-w de 806 a 820px. En movil se
   apilan a ancho completo. Cada foto lleva su .lodge__tag adentro. */
.lodge__gallery {
  --lodge-w: 820px;
  position: relative;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  max-width: var(--lodge-w); margin-inline: auto;
}
.lodge__gallery picture {
  display: block; position: relative; overflow: hidden;
  min-width: 0;
  border-radius: 2px; box-shadow: 0 10px 22px rgba(42, 31, 23, .18);
}
.lodge__gallery picture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 0 18px rgba(90, 42, 34, .38);
}
.lodge__photo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.12);
}
/* Etiqueta de cada foto: pill vino, familia .chapter__tag (mayusculas
   espaciadas). Anclada abajo a la derecha de su propia foto (picture es el
   ancestro posicionado). */
.lodge__tag {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  max-width: calc(100% - 20px);
  background: var(--vino); color: #F6EFE3;
  padding: 8px 16px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border-radius: 2px;
}
@media (max-width: 560px) {
  .lodge { gap: 16px; }
  .lodge__photo { aspect-ratio: 4 / 3; height: auto; }
}
@media (min-width: 561px) {
  .lodge__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1.35fr 1fr; aspect-ratio: 1.45; }
  .lodge__gallery picture:first-child { grid-column: 1 / -1; }
  .lodge__gallery picture { min-height: 0; }
}
/* En tablet la columna pasa a ancho completo: se acota el panel para que la
   foto grande no crezca mas alla de sus derivados (tope 752px de fuente). */
@media (min-width: 561px) and (max-width: 1000px) {
  .lodge { max-width: 620px; margin-inline: auto; }
}
.lodge__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) {
  .lodge__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lodge__list { grid-template-columns: 1fr; }
}
.lodge__list li {
  padding: 12px 14px; background: rgba(33, 95, 71, .07);
  border-left: 2px solid var(--acento); font-size: 14.5px;
}
.lodge__conds { display: grid; gap: 7px; }
.lodge__conds li { font-size: 14px; color: var(--gris); padding-left: 18px; position: relative; }
.lodge__conds li::before { content: "—"; position: absolute; left: 0; color: var(--terracota); }

/* ---------- Condiciones ---------- */
.conds-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.conds { display: grid; gap: 2px; margin-top: 24px; }
.conds li { padding: 16px 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 3px; }
.conds strong { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.conds span { font-size: 14.5px; color: var(--gris); }
.reqs-box { background: var(--acento); color: var(--acento-contraste); padding: clamp(24px, 3vw, 36px); border-radius: var(--radio); }
.reqs-box h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 16px; }
.reqs { display: grid; gap: 10px; margin-bottom: 24px; }
.reqs li { padding-left: 26px; position: relative; font-size: 15.5px; }
.reqs li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .7;
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--serif); font-size: 19px; font-weight: 500; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 300 26px/1 var(--serif); color: var(--terracota); transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding-bottom: 20px; }
.faq__answer p { margin: 0; color: var(--gris); max-width: 62ch; }

/* ---------- Testimonios ---------- */
.tms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 26px; }
.tm {
  margin: 0; padding: 28px; background: var(--papel-card);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.section--dark .tm { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.tm blockquote { margin: 0 0 16px; font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1.5; }
.tm figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tm figcaption span { color: var(--gris); }

/* ---------- Ubicación ---------- */
.loc { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: stretch; }
.loc__info h3 { font-size: 19px; margin: 22px 0 6px; }
.loc__info p { color: var(--gris); }
.loc__map { border-radius: var(--radio); overflow: hidden; min-height: 340px; border: 1px solid var(--linea); }
.loc__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Formulario ---------- */
.book-wrap { margin-top: 34px; }
.book { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.book__fields { background: var(--papel-card); border: 1px solid var(--linea); padding: clamp(22px, 3vw, 36px); border-radius: var(--radio); }
.book__aside { display: grid; gap: 22px; position: sticky; top: 100px; }
.field--radio { border: 0; padding: 0; margin: 0 0 16px; }
.field--radio .label { padding: 0; }
.riders { display: grid; gap: 14px; }
.rider { border: 1px dashed var(--linea); padding: 16px; border-radius: var(--radio); background: rgba(255,255,255,.55); }
.rider__head { margin-bottom: 12px; }
.rider__name { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.summary { background: var(--vino); color: #F6EFE3; padding: clamp(22px, 3vw, 32px); border-radius: var(--radio); }
.summary__title { font-size: 22px; margin-bottom: 16px; color: #F6EFE3; }
.summary__list { display: grid; gap: 0; margin: 0 0 22px; }
.summary__list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(246,239,227,.18); }
.summary__list dt { font-size: 14.5px; color: rgba(246,239,227,.78); }
.summary__list dd { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; text-align: right; }
.summary__total dd { font-size: 26px; color: #F0C27A; }
.book__submit { width: 100%; }
.book__note { margin: 12px 0 0; font-size: 13px; color: rgba(246,239,227,.66); }

/* ---------- Pie ---------- */
.ftr { background: #22150F; color: #EFE5D4; padding-block: clamp(48px, 6vw, 80px) 28px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: clamp(24px, 4vw, 50px); }
.ftr__logo { width: 98px; margin-bottom: 16px; }
.ftr__tag { font-family: var(--serif); font-style: italic; font-size: 20px; color: #E0B478; margin: 0 0 10px; }
.ftr__addr { font-size: 14.5px; color: rgba(239,229,212,.66); }
.ftr__col h3 { font-size: 15px; font-family: var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #E0B478; margin-bottom: 14px; }
.ftr__col p { font-size: 15px; margin-bottom: 8px; }
.ftr__col a { text-decoration: none; color: rgba(239,229,212,.84); }
.ftr__col a:hover { color: #fff; text-decoration: underline; }
.ftr__wa { font-weight: 700; }
.ftr__legal { margin-top: 20px; font-size: 13px; color: rgba(239,229,212,.5); }

/* ---------- Responsive ---------- */
/* Los capítulos entran sin animación: la entrada atada al scroll
   (dl-reveal, y antes will-reveal) generaba parpadeo y se retiró
   (decision #40). */

@media (max-width: 1000px) {
  .hero--a .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__video { height: clamp(300px, 52vw, 460px); }
  .hero__seal { left: auto; right: -6px; bottom: -22px; width: 92px; }
  .chapter, .about-grid, .conds-grid, .faq-grid, .loc, .book { grid-template-columns: 1fr; }
  .chapter:nth-child(even) .chapter__media { order: 0; }
  .book__aside { position: static; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav {
    /* display:none en vez de translate: un drawer fuera de pantalla igual
       expande el ancho del documento y desalinea los elementos fijos. */
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(340px, 86vw); max-width: 86vw;
    background: var(--papel-card); border-left: 1px solid var(--linea);
    padding: 96px 30px 30px;
    overflow-y: auto; margin-left: 0; box-shadow: -20px 0 50px rgba(60,40,22,.18);
    z-index: 70;
  }
  .nav.is-open { display: block; animation: drawer-in .3s var(--ease); }
  @keyframes drawer-in { from { opacity: 0; transform: translateX(22px); }
                         to { opacity: 1; transform: none; } }
  .nav__links { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav__links a { font-size: 19px; padding: 12px 0; border-bottom: 1px solid var(--linea); width: 100%; }
  .nav__links a::after { display: none; }
  .nav__side { margin-top: 20px; display: flex; gap: 12px; align-items: center; }
  .hdr__cta { display: none; }
  .burger { display: block; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .hdr__in { position: relative; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 620px) {
  .ftr__grid { grid-template-columns: 1fr; }
  .hero__facts { gap: 22px; }
  .hero__facts strong { font-size: 24px; }
}




/* ============================================================
   PROPUESTA D — "Cuaderno de Campo" + hero cinematográfico + drawer

   Se apoya en a.css (que se carga antes): aporta
   - el hero a pantalla completa con el video 16:9
   - el video limpio, sin velo ni filtros
   - el drawer de reserva con el formulario completo
   - el boton fijo de reservar
   ============================================================ */

.prop-d {
  --fondo: #F1EEE7;
  --papel-card: #F8F6F0;
  --texto: #2A1F17;
  --gris: #6E6152;
  --acento: #215F47;
  --acento-osc: #16402F;
  --acento-contraste: #F8F6F0;
  --vino: #5A2A22;
  --terracota: #C2652A;
  --linea: #D7CCB8;
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  --sans: "Karla", "Segoe UI", system-ui, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --radio: 3px;
}

body.prop-d {
  background-color: var(--fondo);
  background-image: var(--textura);
  background-size: 180px 180px;
  background-blend-mode: multiply;
}
.prop-d a,
.prop-d a:hover,
.prop-d a:focus,
.prop-d a:active {
  text-decoration: none !important;
}
.prop-d .nav__links a::after { display: none; }
.prop-d h1, .prop-d h2, .prop-d h3, .prop-d h4 { font-weight: 650; }

/* Encabezado translucido sobre papel mineral claro. */
.hdr--a { background: rgba(241, 238, 231, .95); }
.hdr--a.is-scrolled { background: rgba(241, 238, 231, .98); }
.hdr--d .hdr__brand { gap: 12px; text-decoration: none; }
.hdr--d .hdr__logo { width: 78px; height: auto; }
.hdr--d .hdr__brandcopy { display: grid; gap: 4px; }
.hdr--d .hdr__wordmark {
  color: var(--vino); font: 600 24px/1 var(--serif); letter-spacing: .02em;
}
.hdr--d .hdr__descriptor,
.ftr--d .ftr__descriptor {
  color: var(--gris);
  font: 600 10px/1.2 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* Tarjeta lateral de hospedaje con acabado de papel claro. */
.prop-d .about__side { background: var(--papel-card); }
.hdr--d .nav__close { display: none; }
.prop-d main section[id],
.prop-d main article[id] { scroll-margin-top: 104px; }

/* ---------- Hero a pantalla completa ---------- */
.hero--d {
  position: relative;
  min-height: calc(100svh - 92px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: clamp(24px, 4vh, 42px) clamp(34px, 5vh, 60px);
  background: var(--vino);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__media { position: absolute; inset: 0; }
.hero__media .hero__video {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: none; filter: none;
}

/* El video conserva su luz y nitidez: sin velo ni filtros encima. */
.hero__veil { display: none; }
.hero__dtext { position: relative; z-index: 2; }

.hero--d .hero__dtext {
  text-shadow: 0 2px 12px rgba(24, 12, 8, .72);
  width: min(100%, 1120px);
}

/* Marca de agua del logo sobre el video: opacidad .7 pedida por el
   cliente, tamano grande y sombra propia para despegarla del fondo.
   Queda encima del boton fijo de reservar (que vive en la esquina
   misma), sin pisarlo. */
.hero--d .hero__wm {
  position: absolute; right: clamp(18px, 4vw, 64px);
  bottom: clamp(120px, 15vh, 200px); z-index: 2;
  width: clamp(96px, 12.5vw, 164px); height: auto;
  opacity: .7;
  filter: drop-shadow(0 4px 12px rgba(24, 12, 8, .55));
}

/* El sello rotado de la esquina superior se retira en escritorio: la
   marca de agua es el unico logo sobre el video. */
.hero--d .hero__seal { display: none; }
.hero--d .hero__logo { width: 100%; height: auto; }

.hero--d .hero__title {
  color: #F7F0E2;
  font-size: clamp(58px, 7vw, 104px);
  line-height: .9;
  margin-bottom: clamp(10px, 1.5vh, 18px);
}
.hero--d .hero__sub {
  color: #FFF8ED;
  font-size: clamp(22px, 2.45vw, 35px);
  margin-top: 8px;
}
.hero--d .hero__dtext .lead {
  max-width: 62ch;
  margin-bottom: 0;
  color: rgba(247, 240, 226, .88);
  font-size: clamp(17px, 1.25vw, 19px);
}
.hero--d .hero__cta { gap: 12px; margin: 20px 0 22px; }
.hero--d .hero__cta .btn { max-width: 100%; white-space: normal; }
.hero--d .btn--ghost { color: #F7F0E2; border-color: rgba(247, 240, 226, .5); }
.hero--d .btn--ghost:hover { border-color: #F7F0E2; background: rgba(247, 240, 226, .1); }
.hero--d .hero__facts {
  gap: clamp(18px, 3.2vw, 44px);
  padding-top: 18px;
  border-top-color: rgba(247, 240, 226, .36);
}
.hero--d .hero__facts span { color: rgba(247, 240, 226, .86); }
.hero--d .hero__facts strong { color: #F7F0E2; font-size: clamp(24px, 2vw, 30px); }

.prop-d [data-open-booking]:not(.drawer__trigger),
.prop-d [data-book-circuit] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.prop-d .drawer__trigger { isolation: isolate; overflow: hidden; }
.prop-d [data-open-booking]::after,
.prop-d [data-book-circuit]::after,
.prop-d .drawer__trigger::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 34%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .36), transparent);
  transform: translateX(-150%) skewX(-18deg);
  animation: reserve-shine 10s linear infinite;
}
.prop-d [data-open-booking] > *,
.prop-d [data-book-circuit] > *,
.prop-d .drawer__trigger > * { position: relative; z-index: 2; }
@keyframes reserve-shine {
  0%, 87% { opacity: 0; transform: translateX(-150%) skewX(-18deg); }
  89% { opacity: .8; transform: translateX(-150%) skewX(-18deg); }
  93%, 94% { opacity: .8; transform: translateX(380%) skewX(-18deg); }
  98% { opacity: .8; transform: translateX(-150%) skewX(-18deg); }
  100% { opacity: 0; transform: translateX(-150%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .prop-d [data-open-booking]::after,
  .prop-d [data-book-circuit]::after,
  .prop-d .drawer__trigger::after { animation: none; }
}

/* La travesía de varias noches lleva la luz del papel a una noche de vino.
   El fundido es corto (0.35 s): menos frames de repintado = sin parpadeo.
   Las imágenes se sostienen en su propia capa para que el fundido no las
   reblanqueeza (decisión #37). */
#circuitos.section--paper {
  background-color: var(--papel-card);
  color: var(--texto);
  transition: background-color .35s ease;
}
/* El backface-visibility + translateZ(0) que forzaba capa GPU en estas
   imágenes se eliminó (decision #40): subía fotos de hasta 1920px a capas del
   compositor que Chrome re-rasterizaba durante el scroll (parpadeo). */
#circuitos.is-night {
  --papel-card: #30221D;
  --texto: #F3EBDD;
  --gris: #D1C2B2;
  --linea: rgba(243, 235, 221, .24);
  background-color: var(--papel-card);
}
#circuitos.is-night > .wrap:first-child,
#circuitos.is-night .chapter__body {
  --papel-card: #FFFCF6;
  --texto: #2A1F17;
  --gris: #554638;
  --linea: #D7CCB8;
  position: relative;
  isolation: isolate;
  color: #2A1F17;
  background-color: #FFFCF6;
}
#circuitos.is-night > .wrap:first-child::before,
#circuitos.is-night .chapter__body::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 3px;
  background: #FFFCF6;
  box-shadow: 0 14px 34px rgba(18, 12, 9, .24);
}
#circuitos.section--paper::before {
  transition: background-color .35s ease;
}
#circuitos.is-night.section--paper::before { background-color: var(--vino); }
#circuitos.is-night .chapter__level { color: #215F47; }
#circuitos.is-night .chapter__price { color: #5A2A22; }
/* Travesía (circuito 5): sol junto a "3 días" y luna junto a "2 noches".
   Dorados para que sobresalgan cuando la sección pasa a modo noche.
   Caen desde arriba al activarse el anillo (misma clase is-animated); el
   estado oculto base replica el del anillo: sin JS, el reduce de motion
   los deja visibles (decisión #63). */
.chapter__orb-word { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chapter__orb {
  width: 15px; height: 15px; flex: none;
  color: #C2922E;
  opacity: 0;
  transform: translateY(-10px);
  transition: color .35s ease, filter .35s ease;
}
.chapter__duration.is-animated .chapter__orb {
  animation: orb-drop .7s cubic-bezier(.2, .8, .3, 1.25) both;
}
.chapter__duration.is-animated .chapter__orb--luna { animation-delay: .18s; }
@keyframes orb-drop {
  0% { opacity: 0; transform: translateY(-10px); }
  62% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
#circuitos.is-night .chapter__orb {
  color: #E9C983;
  filter: drop-shadow(0 0 4px rgba(233, 201, 131, .35));
}
@media (prefers-reduced-motion: reduce) {
  #circuitos.section--paper, #circuitos.section--paper::before, .chapter__orb {
    transition: none;
  }
  .chapter__orb { opacity: 1; transform: none; animation: none; }
}

/* ---------- Iconos distintivos ---------- */
/* SVG inline (tools/iconos.py): vuelven terracota y van a la izquierda
   de cada item, reemplazando el viniculum/punto que trae a.css. */
.ico { flex: none; width: 20px; height: 20px; color: var(--terracota); }

.prop-d .chapter__inc li::before,
.prop-d .lodge__conds li::before,
.prop-d .reqs li::before { content: none; }

.prop-d .chapter__inc li,
.prop-d .lodge__list li,
.prop-d .lodge__conds li,
.prop-d .reqs li { padding-left: 0; }

.prop-d .chapter__inc li,
.prop-d .lodge__conds li,
.prop-d .reqs li { display: flex; align-items: flex-start; gap: 9px; }
.prop-d .chapter__inc li .ico,
.prop-d .reqs li .ico,
.prop-d .lodge__conds li .ico { margin-top: 3px; }

.prop-d .lodge__list li { display: flex; align-items: center; gap: 9px; }

/* Condiciones: el icono ocupa la columna izquierda y cruza las dos filas
   (titulo + descripcion) que antes eran columnas apiladas. */
.prop-d .conds li {
  display: grid; grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px;
}
.prop-d .conds li .ico { grid-row: 1 / 3; margin-top: 4px; }

/* Datos del hero: el icono encima del dato, con el color claro del
   bloque sobre video. */
.hero__facts .ico { width: 17px; height: 17px; margin-bottom: 2px; color: #E9A265; }

/* ---------- Parrafos mas legibles (mobile-first) ---------- */
/* Base 18px y parrafos con mas aire: D no hereda los tamanos chicos de
   a.css (14-15.5px), que se leian con esfuerzo en pantalla chica. */
body.prop-d { font-size: 18px; line-height: 1.7; }
.prop-d .lead { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.62; }
.prop-d .chapter__desc { font-size: clamp(19px, 1.45vw, 21px); line-height: 1.65; }
.prop-d .chapter__inc li { font-size: 16.5px; line-height: 1.55; }
.prop-d .lodge__list li { font-size: 16px; line-height: 1.5; }
.prop-d .lodge__conds li { font-size: 16px; line-height: 1.55; }
.prop-d .conds span { font-size: 16.5px; line-height: 1.55; }
.prop-d .values span { font-size: 16px; line-height: 1.5; }
.prop-d .faq__answer p { font-size: 17.5px; line-height: 1.6; }

/* El anillo muestra la duración de cada circuito. */
.chapter__data { align-items: center; }

/* Pie de cada circuito: datos a la izquierda, botón bien apoyado a la
   derecha (grid, no flex: se quitó el desalineado que generaban los
   saltos de línea cuando el precio o la duración pasaban a segunda fila).
   En móvil el botón ocupa todo el ancho debajo de los datos. */
.prop-d .chapter__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px 28px;
}
.prop-d .chapter__foot .btn {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
}
@media (max-width: 640px) {
  .prop-d .chapter__foot { grid-template-columns: 1fr; }
  .prop-d .chapter__foot .btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }
}
.prop-d .chapter__mosaic {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  aspect-ratio: 1.2;
}
.prop-d .chapter__tile {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 3px;
  /* Sombra por tile (no filter en el mosaico completo: el filter promocionaba
     las fotos grandes a capas que Chrome re-rasterizaba al hacer scroll,
     causando saltos en las imagenes — misma causa que la decision #40). */
  box-shadow: 0 12px 17px rgba(42, 31, 23, .16);
}
.prop-d .chapter__tile--main { grid-row: 1 / span 2; }
.prop-d .chapter__mosaic[data-count="2"] .chapter__tile:not(.chapter__tile--main) {
  grid-row: 1 / span 2;
}
#circuito-travesia .chapter__mosaic {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 1.65;
}
#circuito-travesia .chapter__tile--main,
#circuito-travesia .chapter__tile:not(.chapter__tile--main) { grid-row: 1; }
#circuito-travesia .chapter__tile:not(.chapter__tile--main) .chapter__img {
  object-position: 72% center;
}
.prop-d .chapter__inc li.chapter__inc--lodging {
  padding: 10px 12px;
  border-left: 2px solid var(--terracota);
  border-radius: 2px;
  background: rgba(210, 118, 47, .09);
  color: var(--texto);
  font-weight: 600;
}
.prop-d .chapter__tile picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prop-d .chapter__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  clip-path: none;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: none;
}
.prop-d .chapter__tag { z-index: 2; left: -12px; }
.prop-d .lodge__gallery { margin: 20px 0; margin-inline: auto; }
.prop-d .lodge__photo { border-radius: 1px; box-shadow: none; }
.prop-d .gal--mosaic {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(125px, 14vw, 200px);
  grid-auto-flow: dense;
  overflow: visible;
  padding: 0;
}
.prop-d .gal--mosaic .gal-item {
  min-width: 0;
  height: 100%;
  box-shadow: 0 10px 24px rgba(12, 8, 6, .2);
}
.prop-d .gal--mosaic .gal-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.prop-d .gal--mosaic .gal-item picture { display: block; width: 100%; height: 100%; }
.prop-d .gal--mosaic .gal-item__img { display: block; }
.prop-d .gal--mosaic .gal-item:nth-child(12) .gal-item__img { object-position: center top; }
.prop-d .gallery-feature {
  height: clamp(240px, 31vw, 410px);
  margin: 30px 0 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(12, 8, 6, .22);
}
.prop-d .gallery-feature__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.prop-d .date-picker { position: relative; }
.prop-d .date-picker__input { padding-right: 52px; }
.prop-d .date-picker__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 48px;
  height: 100%;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--linea);
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: var(--acento);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.prop-d .date-picker__toggle:hover,
.prop-d .date-picker.is-open .date-picker__toggle {
  background: rgba(33, 95, 71, .08);
  color: var(--vino);
}
.prop-d .date-picker__toggle svg { width: 20px; height: 20px; }
.prop-d .date-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 25;
  width: min(320px, calc(100vw - 56px));
  padding: 14px;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--papel-card);
  box-shadow: 0 16px 38px rgba(42, 31, 23, .2);
}
.prop-d .date-picker__panel[hidden] { display: none; }
.prop-d .date-picker__head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  text-align: center;
}
.prop-d .date-picker__month {
  color: var(--texto);
  font: 600 16px/1.2 var(--serif);
}
.prop-d .date-picker__nav {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  font: 300 25px/1 var(--sans);
  cursor: pointer;
}
.prop-d .date-picker__nav:hover:not(:disabled) {
  border-color: var(--acento);
  color: var(--acento);
}
.prop-d .date-picker__nav:disabled { opacity: .35; cursor: default; }
.prop-d .date-picker__weekdays,
.prop-d .date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  text-align: center;
}
.prop-d .date-picker__weekdays {
  margin-bottom: 4px;
  color: var(--gris);
  font: 600 11px/1 var(--sans);
  text-transform: uppercase;
}
.prop-d .date-picker__weekdays span { padding: 7px 0; }
.prop-d .date-picker__day {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}
.prop-d .date-picker__day:hover:not(:disabled),
.prop-d .date-picker__day:focus-visible {
  border-color: var(--acento);
  outline: none;
}
.prop-d .date-picker__day.is-outside { color: #A99D8E; }
.prop-d .date-picker__day.is-today { border-color: var(--terracota); }
.prop-d .date-picker__day.is-selected {
  border-color: var(--acento);
  background: var(--acento);
  color: #fff;
}
.prop-d .date-picker__day:disabled {
  color: #B7AEA2;
  cursor: not-allowed;
}
.prop-d .date-picker__day.is-selected:disabled { color: #fff; }
.chapter__duration { display: inline-flex; align-items: center; gap: 9px; }
.chapter__ring {
  width: 44px; height: 44px; flex: none;
  transform: rotate(-90deg);
  scale: 1;
  transition: scale .22s ease-out;
  view-timeline-name: --ring-view;
  view-timeline-axis: block;
}
.chapter__ring.is-scroll-active { scale: 1.065; }
.chapter__ring-track,
.chapter__ring-fill {
  fill: none; stroke-width: 3;
}
.chapter__ring-track {
  stroke: color-mix(in srgb, var(--acento) 18%, transparent);
  stroke-width: 3.5;
}
.chapter__ring-ticks {
  fill: none; stroke: color-mix(in srgb, var(--terracota) 48%, transparent);
  stroke-width: 1.4; stroke-dasharray: 1 5.2; stroke-linecap: round;
}
.chapter__ring-fill {
  stroke: var(--terracota); stroke-linecap: round;
  stroke-dasharray: 131.95; stroke-dashoffset: 131.95;
  filter: drop-shadow(0 0 2px rgba(194, 101, 42, .5));
}
.chapter__ring-core {
  fill: var(--acento);
}
.chapter__ring-hands {
  fill: none; stroke: var(--acento); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 26px 26px;
}
.chapter__ring-end {
  fill: var(--papel-card); stroke: var(--terracota); stroke-width: 1.5;
  transform: rotate(0deg);
  transform-origin: 26px 26px; transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
  .chapter__ring-fill { stroke-dashoffset: var(--ring-offset, 131.95); }
  .chapter__ring-end { transform: rotate(var(--ring-angle, 0deg)); }
}
.chapter__ring.is-animated .chapter__ring-fill {
  animation: ring-enter-fill .9s cubic-bezier(.2, .8, .2, 1) both;
}
.chapter__ring.is-animated .chapter__ring-hands {
  animation: ring-enter-hands .9s cubic-bezier(.2, .8, .2, 1) both;
}
.chapter__ring.is-animated .chapter__ring-end {
  animation: ring-enter-end .9s cubic-bezier(.2, .8, .2, 1) both;
}
@supports (animation-timeline: --ring-view) and (animation-range: entry 0% exit 100%) {
  .chapter__ring.is-animated {
    animation: ring-scroll-zoom 1s linear both;
    animation-timeline: --ring-view;
    animation-range: entry 0% exit 100%;
  }
}
@keyframes ring-scroll-zoom {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}
@keyframes ring-enter-fill {
  from { stroke-dashoffset: 131.95; }
  to { stroke-dashoffset: var(--ring-offset, 131.95); }
}
@keyframes ring-enter-hands {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ring-enter-end {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--ring-angle, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .chapter__ring-fill,
  .chapter__ring-hands,
  .chapter__ring-end { animation: none; }
  .chapter__ring-hands { transform: none; }
  .chapter__ring { transition: none; }
}
#circuitos.is-night .chapter__ring-hands { stroke: #215F47; }
#circuitos.is-night .chapter__ring-core { fill: #215F47; }
#circuitos.is-night .chapter__ring-end { fill: #F8F6F0; }
.prop-d :focus-visible {
  outline: 3px solid #D2762F;
  outline-offset: 3px;
}

/* Caja verde "Que llevar": los items ganan cuerpo y aceptan dos lineas. */
.prop-d .reqs li { font-size: 17px; line-height: 1.6; }
.prop-d .reqs li .ico { margin-top: 1px; }
/* Iconos de los requisitos en dorado claro: el terracota se pierde sobre el verde. */
.prop-d .reqs-box .reqs li .ico { color: #E9C983; }
.prop-d .conds-grid { align-items: start; }
.prop-d .reqs-box {
  position: relative;
  align-self: center;
  margin-top: 0;
  padding: clamp(28px, 3.4vw, 46px);
  border: 2px solid #B98A3E;
  border-top: 4px solid #B98A3E;
  box-shadow: 0 16px 38px rgba(20, 42, 31, .22), 0 0 0 5px rgba(185, 138, 62, .14);
}
/* Filete dorado debajo del titulo "Requisitos", a todo el ancho de la caja. */
.prop-d .reqs-box h3 {
  position: relative;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 18px;
}
.prop-d .reqs-box h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-1 * clamp(14px, 2vw, 24px));
  right: calc(-1 * clamp(14px, 2vw, 24px));
  height: 1px;
  background: rgba(185, 138, 62, .5);
  pointer-events: none;
}
.prop-d .reqs-box__seal {
  position: absolute;
  top: 28px;
  right: 20px;
  width: clamp(58px, 6.5vw, 78px);
  height: auto;
  opacity: .95;
  transform: rotate(6deg);
  pointer-events: none;
}
.prop-d .reqs-box .btn--primary {
  border: 1px solid rgba(248, 246, 240, .78);
  background: transparent;
  color: var(--acento-contraste);
  box-shadow: none;
}
.prop-d .reqs-box .btn--primary:hover {
  border-color: #F8F6F0;
  background: rgba(248, 246, 240, .12);
  color: #F8F6F0;
}
/* ---------- Boton fijo de reservar ---------- */
.drawer__trigger {
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 95;
  width: max-content; margin-inline: auto;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--radio); cursor: pointer;
  background: var(--acento); color: var(--acento-contraste);
  font: 600 15px/1.1 var(--sans);
  box-shadow: 0 8px 18px rgba(18, 12, 9, .28), 0 2px 5px rgba(18, 12, 9, .2),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .3s var(--ease), background .25s, color .25s;
}
.drawer__trigger:hover,
.drawer__trigger:active {
  transform: translateY(-3px); background: var(--vino);
}
.drawer__trigger.is-night:hover,
.drawer__trigger.is-night:active {
  background: #F2D19A; color: #30221D;
}
.drawer__trigger .ico { width: 20px; height: 20px; color: currentColor; }
.btn .ico { width: 19px; height: 19px; color: currentColor; }
/* Cuando la llamada final a la accion ya esta en pantalla, el boton fijo
   se retira para no tapar el contenido ni duplicar el CTA. */
.drawer__trigger {
  transition: transform .3s var(--ease), background .25s, opacity .3s, visibility .3s;
}
.drawer__trigger.is-hidden {
  opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
}
/* En escritorio (>= 861px) el CTA vive en el menu sticky (.hdr__side):
   el boton fijo queda solo para pantallas angostas, donde no hay CTA fijo. */
@media (min-width: 861px) {
  .drawer__trigger { display: none; }
}
.prop-d a.ast-scroll-to-top-right,
.prop-d a.ast-scroll-to-top-left {
  right: 18px;
  bottom: 86px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-contraste);
  box-shadow: 0 8px 22px rgba(33, 60, 45, .28);
  line-height: 46px;
  text-align: center;
  transition: background-color .25s, transform .25s;
}
.prop-d a.ast-scroll-to-top-right:hover,
.prop-d a.ast-scroll-to-top-left:hover {
  background: var(--vino);
  color: #F8F6F0;
  transform: translateY(-2px);
}

/* ---------- Drawer de reserva ---------- */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(30, 16, 11, .68);
  opacity: 0; transition: opacity .35s;
  backdrop-filter: blur(2px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(620px, 100%); overflow-y: auto;
  background: var(--papel-card);
  border-left: 1px solid var(--linea);
  padding: clamp(22px, 3vw, 38px);
  transform: translateX(100%); transition: transform .42s var(--ease);
  box-shadow: -24px 0 60px rgba(60, 40, 22, .22);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.drawer__head h2 { font-size: clamp(26px, 3vw, 34px); }
.drawer__close {
  width: 42px; height: 42px; flex: none;
  border: 1.5px solid var(--linea); background: none; color: var(--texto);
  border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1;
  transition: border-color .25s, color .25s;
}
.drawer__close:hover { border-color: var(--acento); color: var(--acento); }
.drawer .lead { margin-bottom: 18px; }

/* El formulario usa los estilos claros de la propuesta A, en una sola
   columna: el panel del drawer es angosto para dos columnas. */
.drawer .book { display: grid; gap: 20px; grid-template-columns: 1fr; }
.drawer .book__fields {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(18px, 2.4vw, 28px);
}
.prop-d .field input[data-date-format="dmy"] { font-variant-numeric: tabular-nums; }
.drawer .book__aside { display: grid; gap: 18px; }
.drawer .summary {
  background: var(--vino); color: #F6EFE3;
  padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radio);
}
.drawer .summary__title { font-size: 21px; margin-bottom: 14px; color: #F6EFE3; }
.drawer .summary__list { display: grid; margin: 0 0 20px; }
.drawer .summary__list > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid rgba(246, 239, 227, .18);
}
.drawer .summary__list dt { font-size: 14px; color: rgba(246, 239, 227, .78); }
.drawer .summary__list dd { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; text-align: right; }
.drawer .summary__total dd { font-size: 25px; color: #F0C27A; }
.drawer .book__submit { width: 100%; }
.drawer .book__note { margin: 10px 0 0; font-size: 12.5px; color: rgba(246, 239, 227, .66); }
.drawer .waiver { background: rgba(255, 255, 255, .6); }
.drawer .check { background: #fff; }

/* ---------- Cierre con la llamada a la accion ---------- */
.closing__in {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.prop-d .closing { position: relative; overflow: hidden; }
.prop-d .closing__in { position: relative; z-index: 1; }
.prop-d .closing__mark {
  position: absolute;
  right: clamp(32px, 8vw, 120px);
  top: 50%;
  width: clamp(220px, 25vw, 340px);
  opacity: .14;
  transform: translateY(-50%);
  pointer-events: none;
}
.ftr--d .ftr__brandline { display: flex; align-items: center; gap: 16px; }
.ftr--d .ftr__logo { width: 88px; height: auto; flex: none; margin: 0; }
.ftr--d .ftr__brandcopy { display: grid; gap: 5px; }
.ftr--d .ftr__wordmark { color: #EFE5D4; font: 600 25px/1 var(--serif); }
.ftr--d .ftr__descriptor { color: #E0B478; }
.ftr--d .ftr__tag { margin-top: 20px; }
.ftr--d .ftr__credit {
  padding: 14px var(--pad) 16px;
  border-top: 1px solid rgba(239, 229, 212, .16);
  color: rgba(239, 229, 212, .68);
  font: 500 13px/1.4 var(--sans);
  text-align: center;
}
.ftr--d .ftr__credit a {
  color: #EBC989;
  text-decoration: underline !important; /* `.prop-d a` quita el subrayado: acá lo restaura */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* El numeral de capítulo es decorativo, pero axe mide igual: terracota
   pleno pasa el mínimo de texto grande (3.74:1 sobre papel). */
.prop-d .chapter__num { opacity: 1; }
/* Targets táctiles: enlaces del nav y píldora de idioma a 40px. */
.prop-d .nav__links a { padding: 13px 0; }
.hdr--d .lang { min-width: 40px; height: 40px; }
.closing .h-sec { color: #F6EFE3; }
.closing .lead { color: rgba(246, 239, 227, .76); margin: 0; }
.closing__btn { min-height: 58px; padding: 0 34px; font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .closing__in { grid-template-columns: 1fr; }
  .closing__btn { justify-self: start; }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .hdr--d .hdr__in { position: relative; gap: 14px; }
  .hdr--d .hdr__side { margin-left: auto; gap: 12px; }
  .hdr--d .hdr__cta { display: none; }
  .hdr--d .burger { display: block; flex: none; }
  .hdr--d .nav {
    display: none;
    position: fixed;
    top: 0; right: auto; bottom: 0; left: 0;
    width: min(360px, 88vw); max-width: 88vw;
    height: 100vh; height: 100dvh;
    margin-left: 0; padding: 86px 24px 24px;
    overflow-y: auto; z-index: 70;
    border-left: 0; border-right: 1px solid var(--linea);
    background: var(--papel-card);
    box-shadow: 20px 0 50px rgba(60, 40, 22, .2);
  }
  .hdr--d .nav.is-open { display: block; animation: d-compact-menu-in .32s var(--ease); }
  @keyframes d-compact-menu-in {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: none; }
  }
  .hdr--d .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  }
  .hdr--d .nav__links a {
    width: 100%; padding: 9px 0;
    color: var(--texto); font: 600 17px/1.2 var(--sans);
    letter-spacing: .015em; border-bottom: 1px solid rgba(154, 122, 88, .22);
  }
  .hdr--d .nav__links a::after { display: none; }
  .hdr--d .nav__close {
    position: absolute; top: 18px; right: 20px;
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--linea); border-radius: 50%;
    background: transparent; color: var(--texto);
    font: 300 30px/1 var(--sans); cursor: pointer;
  }
  .hdr--d .nav__side {
    display: flex; align-items: center; gap: 12px;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--linea);
  }
  .hdr--d .nav__side .btn { flex: 1; }
  body.nav-open { overflow: hidden; }
  body.nav-open::before {
    content: "";
    position: fixed; inset: 0; z-index: 59;
    background: rgba(31, 24, 18, .42);
    backdrop-filter: blur(3px);
    animation: d-compact-menu-scrim .24s ease-out;
  }
  @keyframes d-compact-menu-scrim {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Menú alineado a la derecha (decisión #37: con el selector de idioma,
   que también vive al final del header). */
@media (max-width: 860px) {
  .hdr--d .hdr__side { margin-left: auto; }
  .hdr--d .nav {
    right: 0; left: auto;
    width: min(360px, 88vw); max-width: 88vw;
    height: 100vh; height: 100dvh;
    padding: 86px 24px 24px;
    border-right: 0; border-left: 1px solid var(--linea);
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(60, 40, 22, .2);
  }
  body.nav-open { overflow: hidden; }
  .hdr--d .nav.is-open { animation: d-menu-in .32s var(--ease); }
  @keyframes d-menu-in {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: none; }
  }
  body.nav-open::before {
    content: "";
    position: fixed; inset: 0; z-index: 59;
    background: rgba(31, 24, 18, .42);
    backdrop-filter: blur(3px);
    animation: d-menu-scrim .24s ease-out;
  }
  @keyframes d-menu-scrim {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .hdr--d .nav__links { gap: 2px; }
  .hdr--d .nav__close {
    position: absolute; top: 18px; right: 20px;
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--linea); border-radius: 50%;
    background: transparent; color: var(--texto);
    font: 300 30px/1 var(--sans); cursor: pointer;
    transition: color .2s, border-color .2s, transform .2s;
  }
  .hdr--d .nav__close:hover {
    color: var(--acento); border-color: var(--acento); transform: rotate(90deg);
  }
  .hdr--d .nav__links a {
    padding: 9px 0;
    color: var(--texto);
    font: 600 17px/1.2 var(--sans);
    letter-spacing: .015em;
    border-bottom-color: rgba(154, 122, 88, .22);
  }
  .hdr--d .nav__links a:active { color: var(--acento); }
  .hdr--d .nav__side {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--linea);
  }
  .hdr--d .nav__side .btn { flex: 1; }
  .hdr--d .hdr__logo { width: 68px; }
  .hdr--d .hdr__wordmark { font-size: 21px; }
  .hdr--d .hdr__descriptor { font-size: 10px; letter-spacing: .13em; }

  .hero--d {
    min-height: 0;
    display: block;
    padding: 0 0 clamp(30px, 5vh, 52px);
    background: var(--fondo);
  }
  .hero__bg {
    position: relative; inset: auto;
    padding: clamp(16px, 4.5vw, 28px) clamp(14px, 4.5vw, 28px) 0;
  }
  .hero--d .hero__media {
    position: relative; inset: auto;
    border: 1px solid var(--linea);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(30, 16, 11, .22);
    background: var(--vino);
  }
  .hero--d .hero__video {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .hero--d .hero__wm {
    right: 12px; bottom: 12px;
    width: clamp(72px, 19vw, 96px); opacity: .7;
  }

  /* El video ocupa todo el ancho para ganar presencia sin tapar la imagen. */
  .hero__bg { padding: 0; }
  .hero--d .hero__media {
    border: 0; border-radius: 0; box-shadow: none;
  }
  /* La marca ya esta en el encabezado; el video vertical queda despejado. */
  .hero__dtext {
    margin-top: 0;
    padding-top: clamp(24px, 5.5vw, 40px);
  }
  .hero--d .hero__dtext { text-shadow: none; }
  .hero--d .hero__title {
    color: var(--texto);
    font-size: clamp(44px, 12vw, 64px);
    line-height: .92;
  }
  .hero--d .hero__sub {
    color: #A6532A;
    font-size: clamp(20px, 5.6vw, 27px);
  }
  .hero--d .hero__dtext .lead { color: #4E4237; font-size: 18px; line-height: 1.6; }
  .prop-d .chapter__mosaic { display: block; aspect-ratio: 4 / 3; }
  #circuito-travesia .chapter__mosaic { aspect-ratio: 4 / 3; }
  .prop-d .chapter__tile:not(.chapter__tile--main) { display: none; }
  .prop-d .chapter__tile--main,
  .prop-d .chapter__tile--main picture { width: 100%; height: 100%; }
  .prop-d .chapter__tag { left: -8px; bottom: 12px; }
  .prop-d .lodge__photo { box-shadow: none; }
  .prop-d .closing__mark {
    right: 14px; top: 50%; bottom: auto;
    width: clamp(140px, 37vw, 190px); opacity: .1;
    transform: translateY(-50%);
  }
  .hero--d .btn--ghost { color: var(--texto); border-color: rgba(42, 31, 23, .45); }
  .hero--d .btn--ghost:hover { border-color: var(--texto); background: rgba(42, 31, 23, .06); }
  .hero--d .hero__facts { border-top-color: var(--linea); }
  .hero--d .hero__facts strong { color: var(--texto); font-size: 26px; }
  .hero--d .hero__facts span {
    color: #55493C;
    font-size: 14px;
    letter-spacing: .09em;
  }
  .hero--d .hero__facts .ico { color: var(--terracota); }
  /* Iconos de las listas: igual tamaño en móvil, sin desbandar. */
  .prop-d .conds li { grid-template-columns: 18px 1fr; }
  .drawer__panel { width: 100%; border-left: 0; }
  .prop-d .gal--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(118px, 35vw, 178px);
    gap: 9px;
  }
  .prop-d .gal--mosaic .gal-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .prop-d .gallery-feature { height: 250px; margin-top: 22px; }
}
@media (max-width: 620px) {
  .drawer__trigger {
    left: 18px; right: 18px; width: auto; margin-inline: 0;
    justify-content: center; transform: none;
  }
  .drawer__trigger:hover,
  .drawer__trigger:active { transform: translateY(-3px); }
  .drawer__trigger.is-hidden { transform: translateY(14px); }
  .prop-d .gallery-feature { height: 220px; }
  .prop-d a.ast-scroll-to-top-right,
  .prop-d a.ast-scroll-to-top-left { bottom: 82px; right: 18px; }
}


/* ============================================================
   Scroll y pulido (decision #39) - CSS-only, sin scroll-jacking.
   Todo anima opacity/transform/object-position (compositor).
   ============================================================ */
html { scrollbar-gutter: stable; }
.drawer, .hdr--d .nav { overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Mejora progresiva: animaciones atadas al scroll solo en navegadores
   con scroll-driven animations y sin reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Barra de progreso fina en el borde inferior del header. */
    .hdr--a::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: var(--terracota);
      transform-origin: 0 50%;
      animation: dl-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes dl-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* Parallax y reveal sobre fotos/capítulos eliminados (decision #40): las
       animaciones atadas a view() sobre imágenes grandes en capas del
       compositor parpadeaban al scrollear. Los capítulos se ven siempre. */
  }
}

/* Galeria movil: carrusel nativo con scroll-snap (21 fotos en una tira). */
@media (max-width: 860px) {
  .prop-d .gal--mosaic {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .prop-d .gal--mosaic::-webkit-scrollbar { display: none; }
  .prop-d .gal--mosaic .gal-item {
    flex: 0 0 82%;
    height: auto;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
  }
  .prop-d .gal--mosaic .gal-item picture { height: 100%; }
}


/* Contraste AA en el cuadro verde (axe): el h3 heredaba la tinta oscura. */
.prop-d .reqs-box h3 { color: var(--acento-contraste); }
/* Legal del footer: 4.43 -> 5.9 sobre el vino oscuro. */
.prop-d .ftr__legal { color: rgba(239, 229, 212, .62); }


        /* ===== Overrides WP / Astra (portada) ===== */
        /* El header y el footer son propios del tema hijo: Astra no pinta
           los suyos. Defensa extra: el H1 real vive en el hero del contenido,
           no en el título de página de Astra. */
        .entry-header, article.page .entry-header { display: none !important; }
        header.site-header, #colophon, footer.site-footer, .ast-footer, .ast-main-header-wrap,
.ast-sticky-header-wrapper, .ast-above-header, .astra-hb-main-header-bar,
.ast-below-header, .ast-header-break-point header.site-header { display: none !important; }
.ast-single-post .entry-header,
.ast-single-post .entry-title,
.ast-single-post .post-thumb { display: none; }
/* Neutralizar TODOS los wrappers contendores y paddings de Astra */
#primary, #main, .ast-container, article, article.ast-article-single,
.ast-article-single .entry-content, .ast-single-post .entry-content,
.ast-separate-container .ast-article-single, .ast-remove-padding--container {
  padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  max-width: none !important; width: 100%; border: 0; background: transparent;
}
.ast-container { max-width: none !important; }
.ast-single-post .entry-content, .ast-single-post .ast-article-single,
.ast-separate-container .ast-article-single {
  margin: 0; padding: 0; max-width: none; border: 0; background: transparent;
}
body { margin: 0; padding: 0; }

/* En la travesía nocturna, las tarjetas conservan el fondo y el contraste del entorno. */
#circuitos.is-night > .wrap:first-child,
#circuitos.is-night .chapter__body {
  --papel-card: #30221D;
  --texto: #FFFFFF;
  --gris: #F3EBDD;
  --linea: rgba(243, 235, 221, .32);
  color: #FFFFFF;
  background-color: transparent;
}
#circuitos.is-night .chapter__body {
  border-radius: 4px;
}
#circuitos.is-night > .wrap:first-child::before,
#circuitos.is-night .chapter__body::before {
  content: "";
}
#circuitos.is-night .chapter__body::before {
  inset: -18px;
  border: 1px solid rgba(243, 235, 221, .42);
  background: rgba(255, 255, 255, .06);
}
#circuitos.is-night .chapter__body .chapter__num,
#circuitos.is-night .chapter__body .chapter__title,
#circuitos.is-night .chapter__body .chapter__level,
#circuitos.is-night .chapter__body .chapter__desc,
#circuitos.is-night .chapter__body .chapter__inc li,
#circuitos.is-night .chapter__body .chapter__dur,
#circuitos.is-night .chapter__body .chapter__price,
#circuitos.is-night .chapter__body .chapter__ppn {
  color: #FFFFFF;
}
#circuitos.is-night .chapter__body .chapter__inc li.chapter__inc--lodging {
  border-left-color: rgba(243, 235, 221, .72);
  background: rgba(255, 255, 255, .08);
}

/* ---------- Footer: selector de idioma con banderitas (sesion 8, revision Jens: mas discreto) ---------- */
.ftr__langs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ftr__langs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: rgba(239, 229, 212, .58);
  font: 500 12px/1 var(--sans);
  letter-spacing: .08em;
  transition: color .15s ease;
}
.ftr__langs a:hover,
.ftr__langs a:focus-visible {
  color: #EFE5D4;
}
/* Idioma actual: sin borde ni acento, solo se distingue por mas presencia */
.ftr__langs a[aria-current="true"] {
  color: #EFE5D4;
  cursor: default;
}
.ftr__langs svg {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(239, 229, 212, .22);
  flex: none;
}

/* ---------- Descripciones largas: párrafos + "Leer más" ---------- */
/* Pegar al final de portada.css (después de los overrides de Astra).
   Aplica a los circuitos 3, 4 y 5 (<details class="chapter__more">). */
.prop-d .chapter__desc p { margin: 0 0 .85em; }
.prop-d .chapter__desc p:last-child { margin-bottom: 0; }

.prop-d .chapter__more summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-right: 4px;
  font: 600 15px/1 var(--sans); letter-spacing: .04em;
  color: var(--acento);
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.prop-d .chapter__more summary::-webkit-details-marker { display: none; }
.prop-d .chapter__more summary::after {
  content: "+"; font: 300 26px/1 var(--serif); color: var(--terracota);
  transition: transform .3s var(--ease);
}
.prop-d .chapter__more[open] summary::after { transform: rotate(45deg); }
.prop-d .chapter__more[open] summary { margin-bottom: .25rem; }
.prop-d .chapter__more-close { display: none; }
.prop-d .chapter__more[open] .chapter__more-open { display: none; }
.prop-d .chapter__more[open] .chapter__more-close { display: inline; }

/* Travesía nocturna (circuito 5 en modo is-night) */
#circuitos.is-night .chapter__more summary,
#circuitos.is-night .chapter__more summary::after { color: #E9C983; }