/* ============================================================
   Casa San Blas — page layout, built on the Casona components
   ============================================================ */

/* ── Bilingual switching ────────────────────────── */
html[lang="es"] [data-l="en"], html[lang="en"] [data-l="es"] { display: none !important; }
[hidden] { display: none !important; }

/* ── Textile ornament ───────────────────────────────
   One woven band, drawn from the diamond (chakana-derived) motif that runs
   along the bed runners in the house. Replaces the kit's roman numerals,
   coordinates and gold inset frames. */
:root {
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M11 1.5 L20.5 7 L11 12.5 L1.5 7 Z' fill='none' stroke='%236E2B33' stroke-width='1.1'/%3E%3Ccircle cx='11' cy='7' r='1.5' fill='%2386693A'/%3E%3C/svg%3E");
  --band-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M11 1.5 L20.5 7 L11 12.5 L1.5 7 Z' fill='none' stroke='%23D8BC8A' stroke-width='1.1'/%3E%3Ccircle cx='11' cy='7' r='1.5' fill='%23D8BC8A'/%3E%3C/svg%3E");
}
.band { display: block; height: 14px; width: 110px; margin: 0 auto; background: var(--band) repeat-x center; }
.band--left { margin: 0; }
.band--wide { width: 100%; max-width: 100%; }
.section--inverse .band, .hero .band, .phero .band, .offer .band, .band--inverse { background-image: var(--band-inverse); }
.cs-heading .band { margin-bottom: 4px; }
.cs-heading:not(.cs-heading--center) .band { margin-left: 0; }

/* ── Layout primitives ──────────────────────────── */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 880px; }
.section { padding: var(--section-pad-y) 0; }
.section--tight { padding: var(--space-9) 0; }
.section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.section--tint { background: var(--surface-tint); }
.section--hairline { border-top: 1px solid var(--border-hairline); }
.stack { display: flex; flex-direction: column; }
.stack-3 { gap: var(--space-3); } .stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); }
.stack-7 { gap: var(--space-7); } .stack-8 { gap: var(--space-8); }
.stack-9 { gap: var(--space-9); }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.section--inverse .muted { color: var(--text-inverse-muted); }
.prose { max-width: var(--prose-max); }
.prose p { margin: 0 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.lead { font-family: var(--font-accent); font-style: italic; font-size: var(--text-lead); line-height: var(--leading-lead); }
.meta-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.rule { height: 1px; background: var(--border-hairline); border: 0; margin: 0; }
.section--inverse .rule { background: var(--border-hairline-inverse); }

/* ── Header ─────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); }
.hdr__logo { display: block; flex: 0 0 auto; line-height: 0; }
.hdr__logo img { display: block; width: auto; height: 52px; }
.langsw { display: flex; gap: 10px; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.langsw button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-muted); }
.langsw button:hover { color: var(--accent-wine); }
.langsw button[aria-pressed="true"] { color: var(--accent-wine); }
.hdr__accolade { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.nav-link { font-size: var(--text-label); letter-spacing: 0.2em; text-transform: uppercase; position: relative; white-space: nowrap; }
.nav-link--active { color: var(--accent-wine); }
.nav-link--active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 4px); width: 5px; height: 5px; background: var(--accent-wine); rotate: 45deg; }
.hdr__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--text-primary); }
.hdr__burger span { display: block; width: 22px; height: 1px; background: currentColor; margin: 5px 0; }
@media (max-width: 1180px) { .hdr__nav { display: none; } .hdr__burger { display: block; } }

/* Full-screen menu */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--surface-inverse); color: var(--text-inverse); display: none; flex-direction: column; padding: 24px; overflow-y: auto; }
.menu[data-open="true"] { display: flex; }
.menu__close { align-self: flex-end; background: none; border: 0; color: var(--text-inverse); font-size: 26px; line-height: 1; cursor: pointer; padding: 8px 12px; }
.menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; }
.menu__list a { font-family: var(--font-display); font-size: clamp(28px, 6vw, 46px); color: var(--text-inverse); line-height: 1.25; }
.menu__list a:hover { color: var(--accent-gold-inverse); }
.menu__foot { display: flex; flex-direction: column; gap: 16px; align-items: center; padding-bottom: 12px; }
.menu .langsw button { color: var(--text-inverse-muted); }
.menu .langsw button:hover, .menu .langsw button[aria-pressed="true"] { color: var(--accent-gold-inverse); }

/* ── Hero ───────────────────────────────────────── */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; flex-direction: column; color: var(--text-inverse); background: var(--espresso); overflow: hidden; }
.hero__slides { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--ease-drift); z-index: 0; }
.hero__slide[data-on="true"] { opacity: 1; }
.hero__slide picture, .phero picture { display: block; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* One scrim. Light at the top so the photograph reads; darker at the foot where the text sits. */
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(rgba(23,18,14,0.22), rgba(23,18,14,0.08) 35%, rgba(23,18,14,0.30) 62%, rgba(23,18,14,0.70)); }
.hero__body { position: relative; z-index: 2; isolation: isolate; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(36px, 5vw, 56px); text-align: center; }
.hero__mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* A soft pool of shade behind the text only, so the rest of the photograph stays bright */
.hero__mid::before, .phero__in::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1200px, 140%); height: 175%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(23,18,14,0.72), rgba(23,18,14,0.55) 40%, rgba(23,18,14,0.22) 62%, rgba(23,18,14,0) 76%); z-index: -1; pointer-events: none; }
.hero__mid > *, .phero__in > * { position: relative; }
.hero__eyebrow, .phero .cs-eyebrow { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-gold-inverse); text-shadow: 0 1px 12px rgba(23,18,14,0.9), 0 0 2px rgba(23,18,14,0.8); }
.hero__title { margin: 0; font-weight: 400; line-height: 1.02; font-family: var(--font-display); font-size: clamp(34px, 6.2vw, 88px); color: #F1EADD; max-width: 16ch; text-wrap: balance; }
.hero__title em { font-family: var(--font-accent); font-style: italic; color: var(--accent-gold-inverse); }
.hero__sub { margin: 0; font-size: clamp(15px, 1.5vw + 9px, var(--text-lead)); font-family: var(--font-accent); font-style: italic; line-height: 1.5; color: #EFE7D9; }
.hero__rots { position: relative; min-height: 3.2em; }
.hero__rot { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hero__bot { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(241,234,221,0.82); }
.hero__bot .sep { color: var(--accent-gold-inverse); font-size: 8px; }
.hero__title, .hero__sub { text-shadow: 0 1px 24px rgba(23,18,14,0.5); }
/* Phones: the text steps aside so each photo shows alone for a moment (site.js sets data-text-off) */
@media (max-width: 700px) {
  /* Fade in slowly with a soft ease-in, fade out quickly */
  .hero__mid { transition: opacity 4600ms cubic-bezier(0.4, 0, 0.6, 1); }
  .hero[data-text-off="true"] .hero__mid { opacity: 0; transition: opacity 600ms var(--ease-drift); }
}
.hero__dots { position: absolute; z-index: 4; top: 22px; right: 26px; display: flex; gap: 9px; }
.hero__dots button { width: 6px; height: 6px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(241,234,221,0.4); transition: background var(--duration-fast) var(--ease-drift); }
.hero__dots button[aria-current="true"] { background: var(--accent-gold-inverse); }

/* Booking bar pulled up over the hero's bottom edge */
.bookbar { position: relative; z-index: 5; margin-top: -34px; padding: 0 24px; }
.bookbar__in { max-width: 1000px; margin: 0 auto; background: var(--surface-raised); box-shadow: 0 18px 48px rgba(23,18,14,0.18); }
.bookbar .cs-booking .cs-field { border-top: 0; border-bottom: 0; }
.bookbar .cs-booking > :first-child { border-left: 0; }
.bookbar .cs-booking-summary { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-hairline); background: var(--surface-raised); }

/* Awards strip */
.awards { padding: 40px 24px 8px; }
.awards__in { max-width: var(--content-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.awards__i { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 150px; }
.awards__k { font-family: var(--font-display); font-size: 19px; line-height: 1.15; }
.awards__v { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* Page hero (interior pages) */
.phero { position: relative; color: var(--text-inverse); background: var(--espresso); overflow: hidden; }
.phero picture { position: absolute; inset: 0; }
.phero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; background: linear-gradient(rgba(23,18,14,0.28), rgba(23,18,14,0.16) 40%, rgba(23,18,14,0.62)); }
.phero__in { position: relative; z-index: 2; isolation: isolate; padding: clamp(80px, 12vw, 150px) 24px clamp(56px, 8vw, 96px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-lg); line-height: var(--leading-display); margin: 0; text-wrap: balance; }
.phero__title em { font-family: var(--font-accent); font-style: italic; color: var(--accent-gold-inverse); }
.phero__lead { font-family: var(--font-accent); font-style: italic; font-size: var(--text-lead); line-height: var(--leading-lead); max-width: 52ch; margin: 0; color: #EFE7D9; }
.phero__title, .phero__lead { text-shadow: 0 1px 22px rgba(23,18,14,0.5); }

/* ── Editorial split (text + photo) ─────────────── */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 4; }
.split__media--wide img { aspect-ratio: 4 / 3; }

/* ── Figure with capsule caption ────────────────── */
.fig { position: relative; overflow: hidden; }
.fig img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fig--archive img { filter: sepia(0.18) contrast(0.96); }   /* only for old photographs */
.fig--4x3 img { aspect-ratio: 4 / 3; }
.fig--3x4 img { aspect-ratio: 3 / 4; }
.fig--1x1 img { aspect-ratio: 1 / 1; }
.fig--16x9 img { aspect-ratio: 16 / 9; }
.fig--studio { background: var(--surface-raised); border: 1px solid var(--border-hairline); padding: 14px; }
.fig--studio img { object-fit: contain; }

/* ── Photo grids ────────────────────────────────── */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid--gutter-lg { gap: var(--space-7); }

/* Room families on the home page */
.families { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.family { display: flex; flex-direction: column; gap: 14px; }
.family__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.family__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-drift); }
.family:hover .family__media img { transform: scale(1.04); }
.family__k { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-gold); }
.family__t { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: 1.15; margin: 0; }
.family__d { margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: 1.7; }
.family__names { font-family: var(--font-accent); font-style: italic; font-size: 15px; color: var(--accent-wine); }

/* Chapter index on the home page */
.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-6); }
.chapter { display: flex; flex-direction: column; gap: 12px; }
.chapter__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-drift); }
.chapter:hover .chapter__media img { transform: scale(1.045); }
.chapter__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0; }
.chapter__body { color: var(--text-muted); font-size: var(--text-small); line-height: 1.7; margin: 0; }
.chapter__more { margin-top: auto; padding-top: 6px; }

/* ── Timeline (Historia) ────────────────────────── */
.tl { max-width: 900px; margin: 0 auto; width: 100%; }
.tl__row { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: 40px 0; border-top: 1px solid var(--border-hairline); }
.tl__y { font-family: var(--font-accent); font-size: clamp(34px, 5vw, 56px); line-height: 1; color: var(--accent-wine); font-variant-numeric: tabular-nums; }
.tl__t { font-family: var(--font-display); font-size: 24px; }
.tl__d { margin: 0; color: var(--text-muted); max-width: 54ch; }

/* ── Numbered service columns ───────────────────── */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-hairline); }
.section--inverse .cols3 { border-top-color: var(--border-hairline-inverse); }
.cols3 > * { padding: 40px 32px 8px; display: flex; flex-direction: column; gap: 14px; }
.cols3 > * + * { border-left: 1px solid var(--border-hairline); }
.section--inverse .cols3 > * + * { border-left-color: var(--border-hairline-inverse); }
.col__n { width: 44px; height: 14px; background: var(--band) repeat-x center; }
.section--inverse .col__n { background-image: var(--band-inverse); }
.col__t { font-family: var(--font-display); font-size: 26px; }
.col__d { margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: 1.75; }
.section--inverse .col__d { color: var(--text-inverse-muted); }

/* ── Amenity lists ──────────────────────────────── */
.amen { border: 1px solid var(--border-hairline); background: var(--surface-raised); padding: clamp(28px, 4vw, 44px); }
.section--inverse .amen { border-color: var(--border-hairline-inverse); background: rgba(241,234,221,0.04); }
.amen__t { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-wine); margin: 0 0 22px; }
.section--inverse .amen__t { color: var(--accent-gold-inverse); }
.amen ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.amen li { break-inside: avoid; padding: 7px 0 7px 20px; position: relative; font-size: var(--text-small); line-height: 1.6; }
.amen li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--accent-gold); }
.section--inverse .amen li::before { border-color: var(--accent-gold-inverse); }

/* ── Room detail ────────────────────────────────── */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); }
.cs-room { gap: 14px; }
.cs-room__foot { margin-top: auto; }
.cs-room__media .cs-room__badge { position: absolute; top: 0; left: 0; background: rgba(23,18,14,0.8); color: var(--accent-gold-inverse); font-family: var(--font-accent); font-style: italic; font-size: 13px; padding: 5px 13px; }
.cs-room__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-room__no { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); font-family: var(--font-sans); font-style: normal; font-variant-numeric: tabular-nums; }
.cs-room__mean { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: 19px; color: var(--accent-wine); line-height: 1.3; }
.cs-room__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-room__thumbs picture { display: block; }
.cs-room__thumbs img { display: block; width: 100%; height: 74px; object-fit: cover; opacity: 0.92; transition: opacity var(--duration-fast) var(--ease-drift); }
.cs-room__thumbs img:hover { opacity: 1; }
.room-note { font-size: 12px; color: var(--text-muted); font-style: italic; font-family: var(--font-accent); }

/* ── Direct-booking band ────────────────────────── */
.offer { background: var(--accent-wine); color: var(--text-inverse); }
.offer__in { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: 22px 24px; }
.offer__lead { justify-self: start; text-align: left; }
.offer__deal { justify-self: stretch; justify-content: flex-end; }
.offer .offer__cta { justify-self: center; }
.offer__lead p, .offer__deal p { margin: 0; font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; letter-spacing: 0.01em; }
.offer__lead strong { font-weight: 400; }
.offer__deal { display: flex; align-items: center; gap: 0; text-align: left; }
.offer__deal p:not(.offer__k) { max-width: 19ch; text-align: right; text-wrap: balance; }
.offer__deal .offer__k { font-size: clamp(23px, 2vw, 29px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; transform: rotate(-18deg); transform-origin: center; white-space: nowrap; padding: 6px 0 8px 0; }
.offer .offer__cta { min-width: 0; padding: 9px 16px; border: 2px solid currentColor; border-radius: 0; font-size: clamp(12px, 1vw, 14px); font-weight: 700; line-height: 1.55; letter-spacing: 0.04em; text-transform: uppercase; }
.offer .offer__cta:hover { background: var(--text-inverse); color: var(--accent-wine); border-color: var(--text-inverse); }
.offer .offer__cta:focus-visible { outline: 3px solid var(--text-inverse); outline-offset: 6px; }
@media (max-width: 900px) {
  .offer__in { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding-block: 28px; }
  .offer__lead, .offer__deal { justify-self: center; text-align: center; }
  .offer__deal { flex-direction: column; gap: 10px; }
  .offer__deal p:not(.offer__k) { max-width: 19ch; }
  .offer__deal .offer__k { transform: rotate(-8deg); padding: 0; }
  .offer__cta { grid-row: 3; }
}

/* ── Voces ──────────────────────────────────────── */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.review { margin: 0; background: var(--surface-raised); border: 1px solid var(--border-hairline); padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.review__t { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin: 0; }
.review__q { margin: 0; font-size: 15px; line-height: 1.7; flex: 1; }
.review__q::before { content: "\201C"; font-family: var(--font-accent); color: var(--accent-gold); font-size: 30px; line-height: 0; vertical-align: -0.35em; margin-right: 3px; }
.review__a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border-hairline); padding-top: 12px; }
.review__a strong { font-weight: var(--weight-strong); color: var(--text-primary); }
.review__stars { color: var(--accent-gold); letter-spacing: 0.05em; font-size: 12px; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--espresso); display: block; }
.vid img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity var(--duration-fast) var(--ease-drift), transform var(--duration-slow) var(--ease-drift); }
.vid:hover img { opacity: 0.95; transform: scale(1.03); }
.vid__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-inverse); pointer-events: none; }
.vid__play span { width: 62px; height: 62px; border: 1px solid rgba(216,188,138,0.7); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(23,18,14,0.5); }

/* ── Map ────────────────────────────────────────── */
/* Mapa: the illustrated map is its own page under assets/map/, embedded here */
.mapa { width: 100%; border: 1px solid var(--border-hairline); background: #f5efe2; }
.mapa__frame { display: block; width: 100%; height: min(80vh, 760px); min-height: 520px; border: 0; }
/* One line under the map, in the house red, telling the visitor to click a destination. */
.mapa__hint { margin: 16px 0 0; text-align: center; color: var(--accent-wine); font-family: var(--font-accent); font-style: italic; font-size: 18px; line-height: 1.4; }
@media (max-width: 700px) { .mapa__frame { height: 78vh; min-height: 460px; } }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--space-4) var(--space-6); }
.legend__i { display: flex; gap: 12px; align-items: baseline; font-size: var(--text-small); }
.legend__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; transform: translateY(1px); }

/* ── Social links ───────────────────────────────── */
/* Conversemos: the social networks as a row of round icons with the name
   and handle under each one. */
.follow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-7); }
.follow__item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; text-align: center; text-decoration: none; color: var(--text-primary); }
.follow__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); border: 1px solid var(--border-hairline-strong); display: grid; place-items: center; color: var(--accent-wine); transition: background var(--duration-fast) var(--ease-drift), color var(--duration-fast) var(--ease-drift), border-color var(--duration-fast) var(--ease-drift); }
.follow__icon svg { width: 26px; height: 26px; fill: currentColor; }
.follow__item:hover .follow__icon { background: var(--accent-wine); border-color: var(--accent-wine); color: var(--text-inverse); }
.follow__name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; margin-top: 4px; }
.follow__handle { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.posts__more { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ── Footer ─────────────────────────────────────── */
.ftr { background: var(--surface-inverse); color: var(--text-inverse); padding: var(--space-7) 24px var(--space-6); }
.ftr__in { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); text-align: center; align-items: center; }
.ftr__name { font-family: var(--font-display); font-size: 34px; }
.ftr__sub { font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--text-inverse-muted); margin-top: 6px; }
/* Nine nav links stacked in one column made the footer taller than it needed
   to be, so the nav gets the widest track and runs them in three. */
.ftr__cols { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: var(--space-6) var(--space-7); width: 100%; text-align: left; border-top: 1px solid var(--border-hairline-inverse); padding-top: var(--space-6); }
.ftr__navlist { columns: 165px 3; column-gap: var(--space-5); }
.ftr__navlist a { break-inside: avoid; }
.ftr__h { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-gold-inverse); margin: 0 0 14px; }
.ftr__cols a, .ftr__cols p { color: var(--text-inverse-muted); font-size: var(--text-small); margin: 0 0 7px; display: block; }
.ftr__cols a:hover { color: var(--text-inverse); }
.ftr__legal { border-top: 1px solid var(--border-hairline-inverse); width: 100%; padding-top: var(--space-5); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-inverse-muted); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }

/* WhatsApp float */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 52px; height: 52px; border-radius: 999px; background: var(--accent-wine); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(23,18,14,0.28); transition: background var(--duration-fast) var(--ease-drift); }
.wa:hover { background: var(--accent-wine-hover); color: var(--text-inverse); }
.wa svg { width: 25px; height: 25px; fill: currentColor; }

/* ── Lightbox ───────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(23,18,14,0.94); display: none; align-items: center; justify-content: center; padding: 32px; }
.lb[data-open="true"] { display: flex; }
.lb img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lb__x, .lb__p, .lb__n { position: absolute; background: none; border: 0; color: var(--text-inverse); cursor: pointer; font-size: 26px; padding: 14px 18px; line-height: 1; }
.lb__x { top: 10px; right: 14px; }
.lb__p { left: 6px; top: 50%; transform: translateY(-50%); }
.lb__n { right: 6px; top: 50%; transform: translateY(-50%); }
.lb__cap { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--text-inverse-muted); font-family: var(--font-accent); font-style: italic; font-size: 14px; text-align: center; padding: 0 40px; }
.zoomable { cursor: zoom-in; }

/* ── Long-form editorial prose ──────────────────── */
.prose--long { max-width: 64ch; }
.prose--long h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.25; margin: 2em 0 0.7em; color: var(--text-primary); }
.prose--long h3:first-child { margin-top: 0; }
.section--inverse .prose--long h3 { color: var(--text-inverse); }
.prose--long p { margin: 0 0 1.15em; color: var(--text-primary); }
.section--inverse .prose--long p { color: var(--text-inverse); }
.prose--long p.dropcap::first-letter { font-family: var(--font-accent); font-size: 3.4em; line-height: 0.86; float: left; padding: 0.06em 0.12em 0 0; color: var(--accent-wine); }
.section--inverse .prose--long p.dropcap::first-letter { color: var(--accent-gold-inverse); }
.prose--long .signature { font-family: var(--font-accent); font-style: italic; font-size: 17px; color: var(--text-primary); margin-top: 1.6em; }
.prose--long .signature::before { content: "\2014 "; color: var(--accent-gold); }
.section--inverse .prose--long .signature { color: var(--text-inverse); }
/* Reads as one paragraph: no rules, no gaps, only the numeral set off in wine. */
.rich-list { list-style: none; margin: 0 0 1.15em; padding: 0; counter-reset: ri; }
.rich-list li { position: relative; padding: 0 0 0 1.6em; }
.rich-list li::before { content: counter(ri) "."; counter-increment: ri; position: absolute; left: 0; top: 0; color: var(--accent-wine); }

/* ── Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide { transition: none; }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1040px) {
  .rooms, .grid-4, .chapters { grid-template-columns: repeat(2, 1fr); }
  .cols3 { grid-template-columns: 1fr; }
  .cols3 > * + * { border-left: 0; border-top: 1px solid var(--border-hairline); }
  .section--inverse .cols3 > * + * { border-top-color: var(--border-hairline-inverse); }
  .families, .reviews { grid-template-columns: 1fr 1fr; }
}
/* Three nav columns stop fitting alongside the contact block before the
   footer drops to a single track. */
@media (max-width: 1100px) { .ftr__navlist { columns: 165px 2; } }
@media (max-width: 940px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .tl__row { grid-template-columns: 1fr; gap: 12px; }
  .ftr__cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .ftr__navlist { columns: 2; }
  .cs-booking { flex-direction: column; }
  .cs-booking .cs-field { border-left: 1px solid var(--border-hairline) !important; border-right: 1px solid var(--border-hairline); border-top: 1px solid var(--border-hairline); }
  .cs-booking__submit { padding: 20px; }
  .bookbar { margin-top: 0; padding: 0; }
  .bookbar__in { box-shadow: none; }
}
@media (max-width: 700px) {
  .grid-3, .grid-4, .chapters, .rooms, .families, .reviews { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .amen ul { columns: 1; }
  .hero { min-height: 78vh; }
  /* Narrow screens crop hard. Each slide picks its crop centre with --focus,
     in percentages only: a percentage always keeps the photo covering the
     frame, where a fixed pixel nudge could open a gap onto the slide below. */
  .hero__slide img { object-position: var(--focus, 50% 50%); }
  .hero__body { gap: 22px; }
  .hero__bot { gap: 10px 18px; }
  .hero__dots { top: 16px; right: 18px; }
}

/* ── Strict-spec components (Componentes permanentes + Hospedarse/Voces) ── */
/* Utility bar: same wine as the offer aside, so the two bookend the page. */
/* The bar tucks away on the way down and drops back on the way up (site.js).
   grid-template-rows 1fr → 0fr animates to the bar's own height, no magic number. */
.hdr__bar { background: var(--accent-wine); color: var(--text-inverse); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; transition: grid-template-rows var(--duration-fast) var(--ease-drift); }
.hdr[data-tucked="true"] .hdr__bar { grid-template-rows: minmax(0, 0fr); }
@media (prefers-reduced-motion: reduce) { .hdr__bar { transition: none; } }
.hdr__bar-in { min-height: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.hdr__bar-right { display: flex; align-items: center; gap: 20px; }
.hdr__wa { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.08em; color: var(--text-inverse); white-space: nowrap; }
.hdr__wa:hover { color: var(--accent-gold-inverse); }
.hdr__wa svg { width: 14px; height: 14px; fill: currentColor; }
.hdr__soc { display: flex; gap: 14px; }
.soc { display: inline-flex; color: var(--text-inverse-muted); }
.soc:hover { color: var(--accent-gold-inverse); }
.soc svg { width: 15px; height: 15px; fill: currentColor; }
.hdr__bar .langsw button { color: var(--text-inverse-muted); }
.hdr__bar .langsw button:hover, .hdr__bar .langsw button[aria-pressed="true"] { color: var(--accent-gold-inverse); }
.langsw span { color: var(--border-hairline-inverse); }

/* Row two: logo and the whole nav on one line. */
.hdr__top { max-width: 1440px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hdr__nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 22px; }
.hero__sub p { margin: 0; }
.hero__sub p + p { margin-top: 6px; }
.chapter__body p { margin: 0; }
.chapter__body p + p { margin-top: 8px; }
/* ── Room scroller ────────────────────────────────
   One card per room, every photo of that room inside it, and a wine band
   under the photos that ties them together. The track scrolls sideways with
   no native scrollbar: .rail__bar is a thumb that fades in while the track
   moves and fades out again a moment later. */
.rail { position: relative; --rail-img: clamp(200px, 32vh, 320px); }
.rail__track {
  display: flex; gap: var(--space-5); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; padding: 4px 0 6px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rail__card {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: min(520px, 86vw); max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
}
.rail__shots { display: flex; justify-content: center; gap: 12px; padding: 12px; }
.rail__shot { margin: 0; }
.rail__shot picture { display: block; }
/* Every photo gets the same 4:3 box, whatever the shot's own ratio, so the
   cards keep one rhythm across the rail. */
.rail__shot img {
  display: block; width: calc(var(--rail-img) * 4 / 3); height: var(--rail-img);
  object-fit: cover; object-position: var(--focus, 50% 50%); cursor: zoom-in;
}

/* width:0 + min-width:100% keeps the band out of the card's intrinsic width,
   so a card is only ever as wide as its photos and the caption wraps instead. */
.rail__band {
  width: 0; min-width: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--space-5); row-gap: 2px; padding: 9px 16px 11px;
  background: var(--accent-wine); color: var(--text-inverse);
}
.rail__name { font-family: var(--font-display); font-size: 25px; line-height: 1.1; letter-spacing: 0.04em; }
.rail__mean { font-family: var(--font-accent); font-style: italic; font-size: 17px; }
.rail__name, .rail__mean { min-width: 0; }
.rail__side { margin-left: auto; display: flex; align-items: baseline; gap: 12px; text-align: right; }
/* The Spanish translation under each Quechua name reads in capitals, at its own size. */
.rail__mean [data-l="es"] { text-transform: uppercase; }
/* A room photo the client has not chosen yet: same box as a shot, kit stripes. */
.rail__ph { width: calc(var(--rail-img) * 4 / 3); height: var(--rail-img); font-family: var(--font-accent); font-style: italic; font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); }
.rail__cat { font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-gold-inverse); }
.rail__meta { font-size: var(--text-small); color: var(--text-inverse-muted); }

/* The arrows sit under the rail, at the right end of the scroll bar, so they
   never cover a photo. A disabled arrow stays in place but fades. */
.rail__nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; }
.rail__arrow {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  cursor: pointer; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-primary); font-size: 20px; line-height: 1;
  transition: background var(--duration-fast) var(--ease-drift), border-color var(--duration-fast) var(--ease-drift), opacity var(--duration-fast) var(--ease-drift);
}
.rail__arrow:hover { background: var(--accent-wine); border-color: var(--accent-wine); color: var(--text-inverse); }
.rail__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rail__arrow[disabled] { opacity: 0.3; pointer-events: none; }

.rail__bar { height: 5px; margin-top: 4px; position: relative; }
.rail__bar span {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  border-radius: var(--radius-pill); background: rgba(33, 27, 22, 0.42);
  opacity: 0; transition: opacity var(--duration-slow) var(--ease-drift);
}
.rail.is-scrolling .rail__bar span { opacity: 1; transition-duration: var(--duration-fast); }
.rail__note { margin: 0 auto 0 0; font-size: var(--text-small); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .rail__bar span { transition: none; } }
/* ── Deck (stacked photo carousel) ────────────────
   One card at a time, the rest peeling off to both sides: smaller, tilted,
   faded, and each one z-index step further back. --k is the signed distance
   from the front card and --a its absolute value, both written by site.js;
   every offset here reads off those two numbers, so the whole fan is one
   transform and the browser can animate it on the compositor.

   --deck-ar is the stage ratio and --deck-card-w the card's share of the
   stage width, so a card's own ratio is --deck-ar × --deck-card-w. Pick the
   pair per deck to land near the photos' ratio: whatever is left over shows
   as parchment around the photo, which the scanned pages and the review
   screenshots both sit on happily. */
.deck { position: relative; width: 100%; margin-inline: auto; max-width: var(--deck-max, 900px); overflow-x: clip; }
.deck__stage { position: relative; width: 100%; aspect-ratio: var(--deck-ar); touch-action: pan-y; cursor: grab; user-select: none; }
.deck[data-drag="true"] .deck__stage { cursor: grabbing; }
.deck__cards { position: absolute; inset: 0; transform: translateX(var(--drag, 0px)); transition: transform var(--duration-fast) var(--ease-drift); }
.deck[data-drag="true"] .deck__cards { transition: none; }

.deck__card {
  --k: 0; --a: 0;
  position: absolute; top: 0; left: 50%; margin: 0;
  width: var(--deck-card-w, 66%); height: 100%;
  overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  box-shadow: 0 14px 34px rgba(33, 27, 22, 0.18);
  transform:
    translateX(calc(-50% + var(--k) * 18%))
    translateY(calc(var(--a) * -2%))
    rotate(calc(var(--k) * 2.4deg))
    scale(calc(1 - var(--a) * 0.08));
  opacity: calc(1 - var(--a) * 0.34);
  z-index: calc(10 - var(--a));
  transition: transform var(--duration-slow) var(--ease-drift), opacity var(--duration-slow) var(--ease-drift);
}
.deck__card[data-far="true"] { opacity: 0; pointer-events: none; }
.deck__card picture { display: contents; }
.deck__card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.deck__card[data-on="true"] img { cursor: zoom-in; }
.deck__card:not([data-on="true"]) { cursor: pointer; }

.deck__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text-primary); font-size: 22px; line-height: 1; box-shadow: 0 4px 14px rgba(33, 27, 22, 0.14); transition: background var(--duration-fast) var(--ease-drift), border-color var(--duration-fast) var(--ease-drift); }
.deck__arrow:hover { background: var(--surface-page); border-color: var(--accent-gold); }
.deck__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.deck__arrow--prev { left: 0; }
.deck__arrow--next { right: 0; }
/* The two decks on Voces. --deck-ar × --deck-card-w is the card's own ratio,
   so the narrow-screen pair below changes both together to keep it. */
.deck--reviews { --deck-max: 920px; --deck-ar: 2 / 1; --deck-card-w: 62%; }
.deck--pages { --deck-max: 600px; --deck-ar: 19 / 20; --deck-card-w: 66%; }

.deck__count { margin: var(--space-4) 0 0; text-align: center; font-family: var(--font-accent); font-size: var(--text-label); letter-spacing: var(--tracking-wide); color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  .deck__card, .deck__cards { transition: none; }
}
@media (max-width: 700px) {
  /* A wider card and a tighter fan win back the room on a narrow screen. The
     card keeps its ratio because the stage ratio moves with it; the outer
     cards run past the edge and are clipped there, which is the point. */
  .deck--reviews { --deck-ar: 13 / 9; --deck-card-w: 86%; }
  .deck--pages { --deck-ar: 8 / 11; --deck-card-w: 86%; }
  .deck__card { transform: translateX(calc(-50% + var(--k) * 13%)) translateY(calc(var(--a) * -2%)) rotate(calc(var(--k) * 2deg)) scale(calc(1 - var(--a) * 0.09)); }
  .deck__arrow { width: 36px; height: 36px; font-size: 18px; }
}
@media (max-width: 1180px) { .hdr .hdr__nav { display: none; } }
@media (max-width: 1300px) { .hdr__nav { gap: 16px; } .nav-link { letter-spacing: 0.14em; } }
@media (max-width: 860px) { .hdr__logo img { height: 40px; } .hdr__top { padding: 8px 18px; } .hdr__bar-in { padding: 5px 18px; } }
@media (max-width: 480px) { .hdr__wa span { display: none; } .hdr__bar-right { gap: 14px; } .hdr__soc { gap: 12px; } }
.mapa { position: relative; z-index: 0; isolation: isolate; }

/* ── Photos at their own ratio ──────────────────── */
.fig img { aspect-ratio: auto; height: auto; width: 100%; object-fit: unset; }
.row { display: grid; gap: var(--space-5); align-items: start; }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-1 { justify-items: center; }
.row-1.row--p .fig { max-width: 420px; width: 100%; }
.row-1.row--l .fig { max-width: 760px; width: 100%; }
.row-2.row--p { max-width: 720px; margin: 0 auto; width: 100%; }
.row-2.row--doc { max-width: 900px; }
.row--doc .fig { background: #fff; border: 1px solid var(--border-hairline); }
.embed { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 900px; margin: 0 auto; background: var(--espresso); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.split--p { grid-template-columns: 1.15fr 0.85fr; }
.split--l { grid-template-columns: 1fr 1fr; }
.split--w { grid-template-columns: 1fr; }
.split--p .split__media, .split--l .split__media { position: sticky; top: 120px; align-self: start; }
.split__media .fig img { aspect-ratio: auto; }
/* Masajes and Desayuno carry a few lines of text, so their photos are held
   a step smaller than the other splits: the portrait beside the copy tops
   out at 510px and the rows underneath stay a little inside the wrap. On a
   phone the images take the full width like everywhere else. */
.split--compact { grid-template-columns: 1fr 1fr; }
.split--compact .split__media .fig { max-width: 510px; width: 100%; margin-inline: auto; }
.row--compact { max-width: 1080px; margin-inline: auto; width: 100%; }
.row-1.row--p.row--compact .fig { max-width: 510px; }
/* Cusco: the portrait of Carlos Milla sits at 70% of its column. */
.split--milla .split__media .fig { width: 70%; margin-inline: auto; }

/* ── Banner (shared page opener) ────────────────── */
.banner { position: relative; height: clamp(300px, 46vh, 540px); display: flex; align-items: flex-end; justify-content: center; text-align: center; color: var(--text-inverse); background: var(--espresso); overflow: hidden; }
.banner__img, .banner__img picture { position: absolute; inset: 0; display: block; }
.banner__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; }
.banner__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(23,18,14,0.10), rgba(23,18,14,0.55) 100%); }
.banner__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px clamp(28px, 5vh, 52px); }
/* Voces: a group portrait needs the room; the standard height cuts it at the eyes */
.banner--tall { height: clamp(360px, 70vh, 720px); }
.banner__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; color: #F1EADD; text-shadow: 0 1px 24px rgba(23,18,14,0.6); text-wrap: balance; }

/* Voces: platform buttons, and the thank-you letter typeset beside the staff photo */
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.split--letter { grid-template-columns: 0.8fr 1.2fr; align-items: stretch; }
/* the photo takes the letter's height: absolute inside the stretched figure so
   its own size never sets the row, cover crops whatever does not fit */
.split--letter .fig { max-width: 420px; width: 100%; min-height: 0; }
.split--letter .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.letter { background: var(--surface-raised); border: 1px solid var(--border-hairline); padding: clamp(24px, 3.4vw, 44px); font-size: 15px; line-height: 1.75; color: var(--text-primary); }
.letter p { margin: 0 0 1.1em; }
.letter p:last-child { margin-bottom: 0; }
.letter__from { font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.8em !important; }
.letter__sign { font-family: var(--font-accent); font-style: italic; font-size: 17px; margin-top: 1.6em; }
.otros__video { display: block; width: 100%; max-width: 380px; margin: 0 auto; background: #000; }
/* The testimonial video takes the first of three columns; its label and
   transcript take the other two, the transcript set in two text columns.
   Under 700px everything stacks and the transcript is one column. */
.testi { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: clamp(28px, 4vw, 56px); }
.testi__video { max-width: 300px; margin: 0 auto; }
.testi__side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.testi__label { flex: none; }
.testi__text { column-count: 2; column-gap: clamp(24px, 3vw, 40px); background: var(--surface-raised); border: 1px solid var(--border-hairline); padding: clamp(20px, 2.6vw, 32px); font-size: 15px; line-height: 1.65; }
.testi__text p { margin: 0 0 0.45em; }
.testi__text p:last-child { margin-bottom: 0; }
.testi__text strong { font-weight: var(--weight-strong); color: var(--accent-wine); }
@media (max-width: 700px) {
  .testi { grid-template-columns: 1fr; }
  .testi__label { text-align: center; }
  .testi__text { column-count: 1; }
}

/* home cards: 3:2 matches most of the chosen photos */
.chapter__media { aspect-ratio: 3 / 2; }

@media (max-width: 940px) {
  .split--p, .split--l, .split--letter { grid-template-columns: 1fr; }
  .split--letter .fig img { position: static; height: auto; object-fit: unset; }
  .split--p .split__media, .split--l .split__media { position: static; }
  .split--p .split__media .fig { max-width: 420px; }
  .split--compact .split__media .fig { max-width: 510px; }
}
@media (max-width: 700px) {
  .linkrow { flex-direction: column; text-align: center; padding: 18px 20px; }
  .linkrow__btns { justify-content: center; }
  .row-3 { grid-template-columns: repeat(2, 1fr); }
  .row-3.row--l, .row-2.row--l { grid-template-columns: 1fr; }
  .row-2.row--p { max-width: none; }
  .banner { height: clamp(240px, 38vh, 360px); max-height: 200px; }
  /* On a phone a card is one screen wide and its photos wrap into two
     columns, so the caption never runs off the side. */
  .rail__card { min-width: 0; width: 86vw; align-self: start; }
  .rail__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .rail__shot:last-child:nth-child(odd) { grid-column: span 2; }
  /* A third photo would leave an odd row, so it waits for the wide screen. */
  .rail__shot--desk { display: none; }
  .rail__shot--desk ~ .rail__shot:last-child { grid-column: auto; }
  .rail__ph { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .rail__shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .rail__arrow { width: 34px; height: 34px; font-size: 17px; }
  .rail__band { flex-direction: column; align-items: flex-start; row-gap: 1px; padding: 8px 12px 10px; }
  .rail__side { margin-left: 0; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
}

/* ── Slider (photo carousel beside a heading) ─────
   The incoming slide is raised above the stack and faded in on top. The slide
   it covers is only faded out once that fade has finished, out of sight
   underneath, so the frame never dips towards its own background mid-move.
   The frame keeps one 3:4 ratio for every photo, so the odd landscape shot
   needs a --focus of its own to keep its subject in view. */
.slider { position: relative; max-width: 440px; margin-inline: auto; }
.slider__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-tint); isolation: isolate; touch-action: pan-y; overscroll-behavior-x: contain; user-select: none; -webkit-user-select: none; cursor: grab; }
.slider__frame:active { cursor: grabbing; }
.slider__frame img { -webkit-user-drag: none; }
.slider__slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; transition: opacity 900ms var(--ease-drift); }
.slider__slide[data-on="true"] { opacity: 1; }
.slider__slide picture { display: block; height: 100%; }
.slider__slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus, 50% 50%); aspect-ratio: auto; }

/* Arrows are hidden on every cross-fade slider; the dots and auto-advance remain. */
.slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; display: none; place-items: center; padding: 0; cursor: pointer; border: 1px solid rgba(241,234,221,0.5); border-radius: var(--radius-pill); background: rgba(23,18,14,0.4); color: var(--text-inverse); font-size: 20px; line-height: 1; transition: background var(--duration-fast) var(--ease-drift), border-color var(--duration-fast) var(--ease-drift); }
.slider__arrow:hover { background: rgba(23,18,14,0.68); border-color: var(--accent-gold-inverse); }
.slider__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.slider__arrow--prev { left: 12px; }
.slider__arrow--next { right: 12px; }

.slider__dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 9px; }
.slider__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer; background: rgba(241,234,221,0.45); box-shadow: 0 0 6px rgba(23,18,14,0.5); transition: background var(--duration-fast) var(--ease-drift); }
.slider__dots button[aria-current="true"] { background: var(--accent-gold-inverse); }
.slider__dots button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* A landscape slider: fills its column at 3:2. A portrait photo inside it
   sits centred on a dark ground instead of being cropped. */
.slider--wide { max-width: none; }
.slider--wide .slider__frame { aspect-ratio: 3 / 2; }
.slider__slide--fit { background: var(--surface-inverse); }
.slider__slide--fit img { object-fit: contain; }

/* A tall photo the reel should crop, not letterbox: the quipu painting sits
   in the top half of its shot, so the frame is pinned near the top. */
.slider__slide--crop img { object-fit: cover; }

/* ── Vivelo: reels ────────────────────────────────
   One short text beside one wide slider. The text column is held to about
   half the usual measure so the paragraphs stack a few lines deep and the
   reel takes the rest of the row. .reel--flip puts the reel on the left. */
.reel { display: grid; grid-template-columns: minmax(230px, 34ch) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.reel--flip { grid-template-columns: minmax(0, 1fr) minmax(230px, 34ch); }
.reel--flip > :first-child { order: 2; }
.reel .prose--long { max-width: none; }
/* Four outbound links under the Textiles reel. They point outside the hotel,
   so they sit apart from the slider in a framed parchment strip: label and a
   small "external" note on the left, the links as pills on the right. */
.linkrow {
  max-width: 880px; margin: var(--space-7) auto 0; padding: 20px 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  column-gap: var(--space-6); row-gap: 14px;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
}
.linkrow__head { display: flex; flex-direction: column; gap: 4px; }
.linkrow__note { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: var(--text-small); color: var(--text-muted); }
.linkrow__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.linkrow__btns .cs-btn { border-radius: var(--radius-pill); }
.linkrow__btns .cs-btn::after { content: "\2197"; font-size: 0.85em; margin-left: 6px; }
/* a grid item with auto side margins shrinks to fit: the slider's slides are
   absolute, so it would collapse to nothing without an explicit width */
.reel > .slider { width: 100%; margin-inline: 0; }

@media (prefers-reduced-motion: reduce) { .slider__slide { transition: none; } }
@media (max-width: 940px) {
  /* stacked under the heading: a shorter frame keeps the section from running long */
  .slider__frame { aspect-ratio: 4 / 5; }
  .slider--wide .slider__frame { aspect-ratio: 3 / 2; }
  .reel, .reel--flip { grid-template-columns: 1fr; }
  .reel--flip > :first-child { order: 0; }
  .reel .prose--long { max-width: 64ch; }
}
@media (max-width: 700px) {
  .slider__arrow { width: 34px; height: 34px; font-size: 17px; }
  .slider__arrow--prev { left: 8px; }
  .slider__arrow--next { right: 8px; }
}

/* ── Historia: passages ───────────────────────────
   One paragraph, one photograph, one caption. The text column keeps the
   64ch measure; the photo sits beside it, top-aligned and never sticky, so
   each picture stays with the lines it illustrates. Under 940px the photo
   drops below its paragraph. */
.story { max-width: 1080px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-8); }
.story__part { display: flex; flex-direction: column; gap: var(--space-7); }
.story__h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: var(--tracking-display); margin: 0; display: flex; flex-direction: column; gap: 12px; }
.story__h3 .band { width: 66px; margin: 0; }
.story__part + .story__part { margin-top: var(--space-6); }
.passage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* A passage with no photo: one column, the prose keeps its 64ch cap. */
.passage--text { grid-template-columns: minmax(0, 1fr); }
.passage__text { min-width: 0; }
.passage__text .prose--long { max-width: 64ch; }
.prose--long h4 { font-family: var(--font-sans); font-weight: var(--weight-strong); font-size: 18px; line-height: 1.4; margin: 1.6em 0 0.55em; color: var(--text-primary); }
/* A passage that opens with a subtitle: the photo lines up with the first paragraph, not the subtitle. 18px x 1.4 line + 0.55em gap. */
.passage--sub .passage__figs { margin-top: calc(18px * 1.4 + 0.55 * 18px); }
.prose--long h4:first-child { margin-top: 0; }
.passage__figs { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.passage__fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.passage__fig picture { display: block; }
.passage__fig img { display: block; width: 100%; height: auto; }
.passage__fig figcaption { font-family: var(--font-accent); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--text-muted); padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.passage__fig figcaption::before { content: ""; display: block; width: 44px; height: 14px; margin-bottom: 6px; background: var(--band) repeat-x left center; }
/* Filosofia: three short statements beside one slider. Plain .split, so the
   media column is never sticky. */
.filo { align-items: center; }
.filo .split__media { position: static; }
/* A photo the client has not chosen yet: the kit's striped placeholder at 4:3. */
.passage__ph { aspect-ratio: 4 / 3; width: 100%; font-family: var(--font-accent); font-style: italic; font-size: 14px; letter-spacing: 0.04em; background: repeating-linear-gradient(-45deg, #DCD2BF 0 10px, #E9E1D1 10px 20px); color: var(--text-muted); }
.passage__ph span { display: block; }
/* Portrait shots run narrower so they stay in step with a short paragraph; the
   short statements in Filosofia sit at mid-height beside their photo instead. */
.passage__fig--portrait { max-width: 310px; }
.passage--center { align-items: center; }
.prose--long p a { color: var(--accent-wine); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-frame-gold); }
/* A clipping from another website: framed on parchment so it reads as a quotation, not as our photograph */
.passage__fig--clip picture { background: var(--surface-raised); border: 1px solid var(--border-hairline); padding: 12px; }
@media (max-width: 940px) {
  .passage { grid-template-columns: 1fr; gap: var(--space-5); }
  .passage__figs { max-width: 480px; }
  .passage--sub .passage__figs { margin-top: 0; }
  .story__part + .story__part { margin-top: var(--space-4); }
}

/* A heading that breaks at its colon: the lead-in sits on its own line, smaller. */
.cs-heading__pre { display: block; font-size: 0.62em; letter-spacing: 0.02em; margin-bottom: 0.2em; }
/* Servicios: the lists stack on the left, their photos loop on the right. */
.split--serv { align-items: start; }
.split--serv .split__media { align-self: start; }
.amen__t--next { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-hairline); }

/* ── Blog ─────────────────────────────────────────
   The index is a grid of cards in the Home chapter pattern, three across.
   An article is one centred column: eyebrow, band and title, the cover at
   the column's width, then the text with its photos in the flow. The old
   blog's photos are small (480 to 676px), so the column is held to 720px
   and a photo never renders wider than it was stored. */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); }
.post-card { display: flex; flex-direction: column; gap: 12px; }
.post-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; display: block; }
.post-card__media picture { display: block; height: 100%; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-drift); }
.post-card:hover .post-card__media img { transform: scale(1.045); }
.post-card__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0; }
.post-card__body { color: var(--text-muted); font-size: var(--text-small); line-height: 1.7; margin: 0; }
.post-card__more { margin-top: auto; padding-top: 6px; }

.wrap--post { max-width: 720px; }
.post__head { padding: var(--space-8) 0 var(--space-7); }
.post__crumb { display: inline-block; }
.post__crumb:hover { color: var(--accent-wine); }
.post__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-md); line-height: 1.08; letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.post { padding-bottom: var(--section-pad-y); }
.post__cover { margin: 0; }
.post__cover picture, .post__fig picture { display: block; }
.post__cover img, .post__fig img { display: block; width: 100%; height: auto; }
.post__body .prose--long { max-width: none; }
.post__body h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 1.8em 0 0.6em; color: var(--text-primary); }
.post__body h3 { font-family: var(--font-sans); font-weight: var(--weight-strong); font-size: 18px; line-height: 1.4; margin: 1.6em 0 0.55em; color: var(--text-primary); }
.post__body h2:first-child, .post__body h3:first-child { margin-top: 0; }
.post__body strong { font-weight: var(--weight-strong); }
.post__body ul { list-style: none; margin: 0 0 1.15em; padding: 0; }
.post__body ul li { position: relative; padding: 4px 0 4px 22px; }
.post__body ul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--accent-gold); }
.post__body blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--border-frame-gold); font-family: var(--font-accent); font-style: italic; font-size: 18px; }
.post__fig { margin: var(--space-6) 0; }
.post__fig .zoomable { cursor: zoom-in; }
/* A photo the old blog lost: the site's striped placeholder, at 3:2 */
.post__ph, .post-card__ph { aspect-ratio: 3 / 2; width: 100%; font-family: var(--font-accent); font-style: italic; font-size: 14px; letter-spacing: 0.04em; background: repeating-linear-gradient(-45deg, #DCD2BF 0 10px, #E9E1D1 10px 20px); color: var(--text-muted); }
.post-card__media .post-card__ph { height: 100%; }

.post__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); border-top: 1px solid var(--border-hairline); padding-top: var(--space-6); }
.post__nav-link { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.post__nav-link--next { text-align: right; }
.post__nav-k { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.post__nav-t { font-family: var(--font-accent); font-style: italic; font-size: 16px; line-height: 1.35; }
.post__nav-link:hover .post__nav-t { color: var(--accent-wine); }

@media (max-width: 1040px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .posts { grid-template-columns: 1fr; }
  .post__nav { grid-template-columns: 1fr 1fr; }
  .post__nav-back { grid-column: 1 / -1; justify-self: center; order: 3; }
}