/* Brief del 2 de octubre de 2026 (correo «cambios web»): logotipo nuevo, títulos con 20% más de
   separación entre letras y 15% menos de tamaño, fichas de habitación, calendario y mapa de líneas. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logotipo */
.brand-logo{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--clay);line-height:0}
.brand-logo svg{height:52px;width:auto;display:block}
.brand-logo small{display:block!important;font:600 8px/1 var(--sans);letter-spacing:.38em;line-height:1;color:currentColor}
.site-footer .brand-logo{color:var(--cream);align-items:flex-start}
.site-footer .brand-logo svg{height:76px}
.hero-logo{margin:0;line-height:0;font-size:0!important}
.hero-logo svg{width:clamp(130px,17.7vw,254px);height:auto;color:#fff;display:block}
/* El logo bajó al 59% (correo del 2 oct, 22:34). El bloque del hero nunca sube sobre los botones 01/02 de arriba. */
.attentive-hero .hero-inner{padding-top:max(95px,8vh)}
.attentive-hero{min-height:max(660px,calc(100svh - 112px))}
.hero-only-eight{letter-spacing:.42em!important}
.favicon-symbol{color:var(--clay)}

/* Títulos: +20% de separación (tracking 0.2em) y −15% de tamaño */
.editorial-intro h1{font-size:clamp(31px,3.83vw,60px);letter-spacing:.2em;line-height:1.22}
.room-hero h1{font-size:clamp(40px,5.1vw,68px);letter-spacing:.2em}
.prose h1{font-size:41px;letter-spacing:.2em}
.section-heading h2,.intro-text h2,.location-grid h2,.faq-grid h2,.privilege-copy h2,.architecture-essay h2,.open-call h2,.press-kit h2{font-size:clamp(27px,3.1vw,45px);letter-spacing:.2em;line-height:1.25}
.closing h2{font-size:clamp(29px,4.08vw,56px);letter-spacing:.2em;line-height:1.25}
.stay-card h2{font-size:31px;letter-spacing:.2em}
.home-editorial-links h2{font-size:29px;letter-spacing:.2em}
.room-sheet h3,.room-cards article h3{letter-spacing:.2em}
.room-card h3{font-size:21px;letter-spacing:.2em}
@media(max-width:900px){.editorial-intro h1{font-size:34px}}
@media(max-width:760px){
  .section-heading h2,.intro-text h2,.location-grid h2,.faq-grid h2,.privilege-copy h2,.architecture-essay h2,.open-call h2,.press-kit h2{font-size:26px;letter-spacing:.14em}
  .closing h2{font-size:26px;letter-spacing:.14em}
  .room-hero h1{font-size:40px;letter-spacing:.14em}
  .prose h1{font-size:29px;letter-spacing:.14em}
  .brand-logo svg{height:40px}
}
@media(max-width:600px){
  .editorial-intro h1{font-size:clamp(25px,7.6vw,40px);letter-spacing:.14em}
  .stay-card h2{font-size:27px;letter-spacing:.14em}
  .home-editorial-links h2{font-size:25px;letter-spacing:.14em}
}

/* Ficha de habitación */
.room-meaning{font-size:16px;line-height:1.65;color:var(--muted);margin:10px 0 18px;max-width:560px}
.room-sheet-line{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin:0 0 18px}
.room-sheet-label{margin:0 0 10px}
.room-sheet-specs{list-style:none;padding:0;margin:0 0 16px;border-top:1px solid var(--line)}
.room-sheet-specs li{display:grid;grid-template-columns:minmax(180px,.9fr) 1.1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.room-sheet-specs strong{font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.04em}
.room-sheet-specs span{color:var(--muted)}
.room-sheet-extras{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 20px}
.room-sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-top:4px}
.room-sheet-actions .button{padding-inline:22px}
.room-cards .room-sheet{padding:30px 0;border-top:1px solid var(--line)}
@media(max-width:600px){.room-sheet-specs li{grid-template-columns:1fr;gap:4px}}

/* Calendario de disponibilidad */
.availability-calendar{margin-top:34px;padding:28px;background:var(--cream);border:1px solid var(--line)}
.calendar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.calendar-head .eyebrow{margin:0 0 6px}
.calendar-hint{font-size:14px;color:var(--muted);margin:0;max-width:520px}
.calendar-head label{display:flex;flex-direction:column;font-size:10px;letter-spacing:1px;text-transform:uppercase;gap:6px}
.calendar-head select{font-size:15px;padding:8px 10px;border:1px solid var(--line);background:#fff;color:var(--ink);min-width:260px;max-width:100%}
.calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 10px}
.calendar-nav button{width:42px;height:42px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;cursor:pointer}
.calendar-nav button:disabled{opacity:.35;cursor:default}
.calendar-nav span{font-size:13px;color:var(--muted);text-align:center;flex:1}
.calendar-months{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.calendar-month h3{font-family:var(--serif);font-size:14px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;font-weight:600}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calendar-weekday{font-size:11px;text-align:center;color:var(--muted);padding-bottom:4px;text-transform:uppercase}
.calendar-grid button{aspect-ratio:1;border:0;font:500 14px var(--sans);cursor:pointer;background:transparent;color:var(--ink);min-height:36px}
.calendar-grid button.free{background:#fff;box-shadow:inset 0 0 0 1px var(--color-olive,#62654D);color:var(--color-olive,#62654D)}
.calendar-grid button.free:hover{background:var(--color-olive,#62654D);color:#fff}
.calendar-grid button.busy{color:#a39791;text-decoration:line-through;background:#efe9e4}
.calendar-grid button.past,.calendar-grid button.unknown{color:#c9c0ba;cursor:default}
.calendar-grid button.picked{background:var(--color-mauve,#B88E8E);color:#fff;box-shadow:none;text-decoration:none}
.calendar-grid button.picked.edge{background:var(--color-terracotta,#8D5B5B)}
.calendar-grid button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.calendar-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12px;color:var(--muted);margin:18px 0 0}
.calendar-legend span{display:inline-block;width:14px;height:14px;margin-right:-10px;vertical-align:middle}
.calendar-legend .free{background:#fff;box-shadow:inset 0 0 0 1px var(--color-olive,#62654D)}
.calendar-legend .busy{background:#efe9e4}
.calendar-legend .pick{background:var(--color-terracotta,#8D5B5B)}
@media(max-width:760px){.availability-calendar{padding:18px}.calendar-months{grid-template-columns:1fr}.calendar-head select{min-width:0;width:100%}}

/* The Privilege of Context */
.privilege{background:var(--color-sand,#C6A690);color:var(--ink)}
.privilege-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.privilege-lead{font-size:20px;line-height:1.6;margin:26px 0 18px}
.privilege-copy p:not(.eyebrow){max-width:560px}
/* minmax(0,1fr) y min-height:0: sin ellos la altura intrínseca de las fotos estira las filas y la grande no ocupa sus dos filas. */
.privilege-photos{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:560px}
.privilege-photos img{width:100%;height:100%;min-height:0;object-fit:cover}
.privilege-photos img:first-child{grid-row:1/3}
@media(max-width:900px){.privilege-grid{grid-template-columns:1fr;gap:34px}.privilege-photos{height:420px}}

/* Mapa minimalista de líneas */
.line-map{margin:0;background:var(--color-offwhite,#F9F9F6);border:1px solid var(--line);padding:18px 18px 10px}
.line-map-svg{width:100%;height:auto;display:block;color:var(--color-terracotta,#8D5B5B)}
.line-map-svg .map-avenue{color:var(--color-olive,#62654D)}
.line-map-svg .map-pin{color:var(--color-terracotta,#8D5B5B)}
.map-label{font-family:var(--serif);font-size:13px;letter-spacing:.18em;fill:var(--color-text-dark,#332B2B)}
.map-strong{font-weight:600;fill:var(--color-terracotta,#8D5B5B)}
.map-soft{font-size:11px;fill:#7b6e69}
.line-map figcaption{font-size:11px;color:var(--muted);margin-top:6px}
.location .address a{color:inherit;text-decoration:underline;text-underline-offset:4px}

/* Pie de página como manifiesto de ubicación */
.footer-manifesto p:not(.eyebrow){font-family:var(--serif);font-size:17px;line-height:1.5;margin:8px 0 12px}
.footer-manifesto a{font-size:13px;opacity:.85}
.room-cards:has(>.room-sheet){grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px}
.room-cards>article.room-sheet p.eyebrow{font-size:10px}
.room-cards>article.room-sheet p.room-sheet-line{font-size:13px}
.room-cards>article.room-sheet p.room-meaning{font-size:16px}
.room-cards>article.room-sheet p.room-sheet-extras{font-size:13px}
.room-cards>article.room-sheet .text-link{margin-top:0}
@media(max-width:760px){.room-cards:has(>.room-sheet){grid-template-columns:1fr}}
.calendar-grid button{aspect-ratio:auto;height:44px;min-height:0}
.calendar-months{max-width:980px;margin-inline:auto}
.quick-logo{display:flex;flex-direction:column;gap:4px;color:var(--cream)}
.quick-logo{align-items:flex-start}
.quick-logo svg{width:46px;height:auto;display:block}

.room-floor{font-family:var(--serif);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-olive,#62654D);margin:0 0 8px}
.room-cards>article.room-sheet p.room-floor{font-size:11px}

/* Fotografías editoriales — 3 de octubre de 2026 */
/* Hero con dirección de arte: <picture> con foto horizontal y su gemela vertical. El foco de cada una
   llega como variable en el style del <img> (site.js lo actualiza al cambiar de diapositiva). */
.hero>picture{position:absolute;inset:0;display:block}
.hero>picture>img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
@media(orientation:portrait){.hero>picture>img{object-position:var(--focus-portrait,var(--focus,50% 50%))}}
/* Botones 01/02 del hero. La barra de reserva es fija (71 px de alto en escritorio, 117 px hasta 900 px,
   152 px en teléfono) y, como el hero mide al menos 660 px, los tapaba al cargar la página: en teléfonos,
   en tabletas y en laptops de 720 px de alto nadie veía la segunda foto. En pantallas anchas siguen abajo
   a la derecha, pero nunca bajan de 16 px por encima de la barra en la primera pantalla (el encabezado es
   sticky, así que esa pantalla mide 100svh − encabezado − barra). En teléfono el texto del hero ocupa todo
   el ancho y no queda hueco junto a él: los botones suben al margen superior que el bloque del hero
   nunca ocupa (padding-top de al menos 95 px). Ahí no llegaba el degradado inferior, así que en teléfono
   el velo del hero gana una franja oscura arriba (los rótulos XIQUÉ / ONLY EIGHT y OAXACA, MX que
   también la usaban se quitaron el 4 oct 2026). En pantallas anchas los botones caen
   sobre el sofá claro o la bruma, así que llevan un halo oscuro difuso detrás y el inactivo baja menos
   de opacidad. */
.attentive-hero{--hero-header:142px;--hero-bar:71px;--hero-slides-bottom:100px}
.attentive-hero .hero-slides{bottom:auto;top:max(56px,min(calc(100% - var(--hero-slides-bottom) - 44px),calc(100svh - var(--hero-header) - var(--hero-bar) - 60px)))}
.attentive-hero .hero-slides:before{content:'';position:absolute;inset:-16px -26px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#241f1b8c,#241f1b4d 55%,transparent)}
.attentive-hero .hero-slides button{opacity:.78;text-shadow:0 1px 6px #241f1bb3}
.attentive-hero .hero-slides button[aria-pressed=true]{opacity:1}
@media(max-width:900px){.attentive-hero{--hero-header:106px;--hero-bar:117px}}
@media(max-width:760px){.attentive-hero{--hero-slides-bottom:80px}}
@media(max-width:600px){
  .attentive-hero:after{background:linear-gradient(180deg,#241f1bb3,#241f1b73 13%,transparent 30%),linear-gradient(90deg,#241f1b8c,transparent 95%),linear-gradient(0deg,#241f1b66,transparent 50%)}
  .attentive-hero .hero-slides{top:42px;right:23px}
  .attentive-hero .hero-slides:before{content:none}
  .attentive-hero .hero-slides button{min-width:44px}
}

/* Fila de fotos de la categoría (Pacific Terrace, Grand Signature); cada foto abre el visor. */
.category-strip{margin-top:55px}
.category-strip>.eyebrow{color:var(--clay);margin-bottom:18px}
.photo-strip{display:grid;grid-template-columns:repeat(var(--tiles,3),minmax(0,1fr));gap:18px}
.photo-strip>a{position:relative;display:block;overflow:hidden;background:var(--sand);cursor:zoom-in}
.photo-strip img{aspect-ratio:8/5;height:auto;object-fit:cover}
.photo-strip>a:hover img{transform:scale(1.03)}
/* La flecha del círculo es un SVG de línea, no el glifo U+2197 (iOS lo pinta como emoji azul). */
.photo-strip>a:after{content:'';position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5 12 4M5.5 3.75h6.75V10.5' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat var(--olive)}
@media(max-width:760px){.category-strip{margin-top:40px}.photo-strip{grid-template-columns:1fr;gap:14px}}

/* Submenús del menú principal (correo del 3 oct 2026): Press ▸ The Architecture, Studies ▸ Express Residences */
.nav-group{position:relative;display:flex;align-items:center;gap:2px;align-self:stretch}
.nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.nav-sub-toggle svg{width:11px;height:11px;transition:transform .2s}
.nav-sub-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.nav-sub-toggle:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.nav-sub{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:210px;padding:8px 0;background:var(--cream);border:1px solid var(--line);box-shadow:0 12px 24px #332b2b14;z-index:60}
.nav-sub a{display:block;padding:11px 20px;white-space:nowrap}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub,.nav-group.open .nav-sub{display:block}
@media(max-width:900px){
  .nav-group{display:block;align-self:auto}
  .nav-sub-toggle{display:none}
  .nav-sub{display:block;position:static;transform:none;min-width:0;padding:0 0 6px 16px;background:none;border:0;box-shadow:none}
  .nav-sub a{padding:9px 0;font-size:11px;opacity:.85}
  .nav-sub a:before{content:'— '}
}
/* En tablet/celular la barra de reserva no lleva marca (el logo le quitaba espacio a las fechas). */
@media(max-width:900px){.quick-book .quick-logo{display:none}}
/* Miniaturas de la categoría bajo cada habitación en /estancia */
.stay-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.stay-thumbs a{display:block;overflow:hidden}
.stay-card .stay-thumbs img{width:100%;height:90px;object-fit:cover;transition:transform .4s}
.stay-thumbs a:hover img{transform:scale(1.04)}
@media(max-width:600px){.stay-card .stay-thumbs img{height:64px}}
.attentive-hero:after{background:linear-gradient(180deg,#1721197a,transparent 24%),linear-gradient(90deg,#172119a8,#17211918 90%),linear-gradient(0deg,#17211966,transparent 60%)}

/* Selector de llegada y salida en una sola ventana (correo del 4 oct 2026; lo arma calendar.js). Los campos de fecha
   nativos pasan a ser botones que abren la misma ventana: primero la llegada, luego la salida, con el rango resaltado. */
.date-trigger{display:block;width:100%;min-height:26px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;letter-spacing:0;text-transform:none;text-align:left;cursor:pointer}
.date-trigger .date-value.empty{opacity:.55}
.booking-form .date-trigger{color:var(--ink)}
.quick-book label .date-trigger{margin:0;padding:0;border:0;background:transparent;color:#fff;font-size:15px;min-height:30px}
.quick-book label .date-trigger:hover{background:transparent}
.quick-book label .date-trigger:focus-visible{outline-color:var(--cream)}
.range-pop{position:absolute;z-index:70;width:min(720px,calc(100vw - 24px));padding:18px 22px 18px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px #332b2b33}
.range-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.range-head .eyebrow{margin:0;color:var(--clay)}
.range-close{width:44px;height:44px;margin:-8px -10px -8px 0;border:0;background:none;color:var(--ink);font-size:28px;line-height:1}
.range-summary{margin:0;min-height:24px;font-size:14px;font-weight:600}
.range-pop .calendar-nav{margin:6px 0 12px}
.range-pop .calendar-months{max-width:none;gap:28px}
.range-pop .calendar-grid button{height:40px}
.range-pop .calendar-grid button.unknown{color:var(--ink);cursor:pointer}
.range-pop .calendar-grid button.free:not(.picked),.range-pop .calendar-grid button.unknown:not(.picked){background:transparent;box-shadow:none;color:var(--ink)}
.range-pop .calendar-grid button.free:not(.picked):hover,.range-pop .calendar-grid button.unknown:not(.picked):hover{background:#ece4de;color:var(--ink)}
.range-pop .calendar-grid button.picked:hover{background:var(--color-mauve,#B88E8E);color:#fff}
.range-pop .calendar-grid button.picked.edge:hover{background:var(--color-terracotta,#8D5B5B)}
.range-pop .calendar-legend .free{background:transparent;box-shadow:inset 0 0 0 1px #cfc6bf}
.range-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 22px;margin-top:12px}
.range-foot .text-link{min-height:44px;padding:0;background:none;border-width:0 0 1px;border-style:solid;color:var(--ink);font-size:13px}
.range-foot .calendar-legend{margin:0}
.range-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:65;background:#1d1a1766}
.range-pop.sheet{position:fixed;top:auto;right:0;bottom:0;left:0;width:auto;max-height:92vh;max-height:92svh;overflow:auto;overscroll-behavior:contain;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0}
.calendar-grid button.preview:not(.picked){background:#ecdcd9;color:var(--ink)}
.calendar-grid button.busy.out-ok{background:#fff;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--color-mauve,#B88E8E)}
@media(max-width:760px){.range-pop .calendar-months{grid-template-columns:1fr}}
@media(max-width:600px){.quick-book label .date-trigger{font-size:13px;min-height:26px}}

/* Mapa de líneas en pantallas angostas: el esquema escala con el ancho, así que los rótulos se agrandan en
   unidades del dibujo para seguir leyéndose (test_browser.py comprueba que no se corten ni se encimen). */
@media(max-width:600px){.line-map{padding:12px 10px 8px}.map-label{font-size:16px;letter-spacing:.08em}.map-soft{font-size:14px}}