/* ==========================================================================
   Composiciones de página
   ========================================================================== */

/* --- Hero de inicio ------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  color: #fff;
  overflow: hidden;
  background: #2d3a2c;
}
.hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
.hero__parallax { position: absolute; inset: 0; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(12 14 12 / 0.85) 0%, rgb(12 14 12 / 0.35) 40%, transparent 65%),
    linear-gradient(to bottom, rgb(12 14 12 / 0.45), transparent 22%);
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgb(255 255 255 / 0.12) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--margin)) / 4) 100%;
  background-position: var(--margin) 0;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  opacity: 0.6;
}
.hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-bottom: calc(clamp(var(--s-5), 5vh, var(--s-7)) + 56px); /* deja sitio a la insignia de demo */
}
.hero__title { max-width: 13ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1200ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.is-ready .hero__title .line > span,
.no-js .hero__title .line > span,
html[data-motion="off"] .hero__title .line > span { transform: none; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 0.35);
}
.hero__meta p { max-width: 46ch; color: rgb(255 255 255 / 0.86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .btn--ghost { --btn-fg: #fff; border-color: rgb(255 255 255 / 0.6); }
.hero__note { margin-bottom: var(--s-4); }
.hero__note .pending-note { display: inline-block; }
.hero__note .pending-note { color: #fff; background: rgb(168 50 42 / 0.85); padding: 3px 8px; }
.hero .annotated__layer { z-index: 1; }

/* --- Concepto ------------------------------------------------------------- */
.concept__label { grid-column: 1 / -1; margin-bottom: var(--s-5); }
.concept__text { grid-column: 1 / -1; }
.concept__text .t-h2 { max-width: 22ch; }
.concept__text .t-h2 em { color: var(--fg-muted); }
.concept__aside { grid-column: 1 / -1; margin-top: var(--s-7); display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .concept__label { grid-column: 1 / 3; }
  .concept__text { grid-column: 3 / 12; }
  .concept__aside { grid-column: 3 / 13; grid-template-columns: repeat(3, 1fr); }
}
.stat { border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); display: grid; gap: var(--s-2); }
.stat__value { font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1; }
.stat__source { color: var(--fg-faint); font-size: 0.75rem; }

/* --- Índice de unidades (tríptico) --------------------------------------- */
.units-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.triptych { display: grid; gap: var(--gutter); }
.unit-card {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  min-height: 72svh;
  background: var(--ph, #222);
  isolation: isolate;
}
.unit-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1400ms var(--ease-out), filter var(--dur-3);
}
.unit-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 11 10 / 0.85), rgb(10 11 10 / 0.05) 55%);
}
.unit-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.unit-card__num {
  position: absolute;
  top: var(--s-4); left: var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 7.5rem);
  line-height: 1;
  opacity: 0.95;
}
.unit-card__glyph { position: absolute; top: var(--s-5); right: var(--s-5); width: 64px; height: 52px; }
.unit-card__glyph path { stroke: #fff; }
.unit-card__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; }
.unit-card__more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-small);
}
.unit-card__more svg { width: 16px; transition: transform var(--dur-2) var(--ease-out); }
.unit-card:hover .unit-card__img, .unit-card:focus-visible .unit-card__img { transform: scale(1.05); }
.unit-card:hover .unit-card__more svg, .unit-card:focus-visible .unit-card__more svg { transform: translateX(5px); }
.unit-card__tagline {
  color: rgb(255 255 255 / 0.85);
  max-width: 34ch;
  font-size: var(--fs-small);
}

@media (min-width: 960px) {
  .triptych { display: flex; height: 82vh; min-height: 600px; }
  .unit-card {
    flex: 1 1 0;
    min-height: 0;
    transition: flex-grow 900ms var(--ease-out);
  }
  .triptych:hover .unit-card, .triptych:focus-within .unit-card { flex-grow: 0.8; }
  .triptych .unit-card:hover, .triptych .unit-card:focus-visible { flex-grow: 2; }
  .unit-card__tagline {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height var(--dur-3) var(--ease-out), opacity var(--dur-3);
  }
  .unit-card:hover .unit-card__tagline, .unit-card:focus-visible .unit-card__tagline { max-height: 6em; opacity: 1; }
}
/* En pantallas táctiles la frase siempre está visible (sin depender de hover) */
@media (hover: none) { .unit-card__tagline { max-height: none !important; opacity: 1 !important; } }

/* --- Dos líneas ----------------------------------------------------------- */
.lines { display: grid; }
@media (min-width: 900px) { .lines { grid-template-columns: 1fr 1fr; } }
.line-panel { padding: var(--s-9) var(--margin); display: grid; gap: var(--s-5); align-content: start; }
.line-panel[data-theme="night"] { background: var(--bg); color: var(--fg); }
.line-panel[data-theme="casa"] { background: var(--casa-soft); --fg-muted: #3d4a47; --fg-faint: #4b5754; }
.line-panel__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s-4); }
.line-panel__rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.line-panel__rating .stat__value { color: var(--accent); }
.line-panel__units { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Ubicación (diagrama conceptual) -------------------------------------- */
.site-diagram { grid-column: 1 / -1; margin-top: var(--s-6); }
.site-diagram svg { width: 100%; height: auto; overflow: visible; }
.site-diagram .ink { stroke: var(--fg); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-diagram .faint { stroke: var(--rule-strong); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-diagram .route { stroke: var(--signal); fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.site-diagram text { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--fg); }
.site-diagram .dot { fill: var(--signal); }
.diagram-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--fg-muted); }
@media (min-width: 900px) {
  .location__text { grid-column: 1 / 6; }
  .site-diagram { grid-column: 6 / 13; margin-top: 0; }
}
@media (max-width: 640px) { .site-diagram text { font-size: 22px; } }

/* --- Bloque de reserva ---------------------------------------------------- */
.book {
  background: var(--ink);
  color: var(--paper);
  --fg: var(--paper); --fg-muted: #b1ab9f; --rule: rgb(236 231 221 / 0.18); --rule-strong: rgb(236 231 221 / 0.5);
  overflow: hidden;
}
.book__title { max-width: 16ch; }
.book__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-6); margin-top: var(--s-7); }
.book .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); }

/* --- Página de unidad ----------------------------------------------------- */
.unit-hero {
  position: relative;
  min-height: 100svh;
  color: #fff;
  overflow: hidden;
  display: grid;
  align-items: end;
}
.unit-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unit-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 11 10 / 0.82), rgb(10 11 10 / 0.1) 55%, rgb(10 11 10 / 0.35)); }
.unit-hero__content { position: relative; padding-bottom: calc(var(--s-6) + 56px); padding-top: calc(var(--header-h) + var(--s-7)); }
.unit-hero__num { font-family: var(--font-display); font-size: clamp(4.5rem, 2rem + 12vw, 13rem); line-height: 0.8; letter-spacing: -0.04em; }
.unit-hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); border-top: 1px solid rgb(255 255 255 / 0.35); padding-top: var(--s-4); margin-top: var(--s-4); }
.unit-hero__row p { max-width: 40ch; color: rgb(255 255 255 / 0.88); }

body[data-page="unit"] { scroll-padding-top: calc(var(--header-h) + 64px); }
html:has(body[data-page="unit"]) { scroll-padding-top: calc(var(--header-h) + 64px); }
.unit-switch {
  position: sticky;
  top: var(--header-h);
  transition: top var(--dur-2) var(--ease-out);
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
body[data-header-hidden="true"] .unit-switch { top: 0; }
.unit-switch__list { display: flex; overflow-x: auto; scrollbar-width: none; }
.unit-switch__list::-webkit-scrollbar { display: none; }
.unit-switch a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5) 0 0;
  margin-right: var(--s-5);
  text-decoration: none;
  white-space: nowrap;
  color: var(--fg-muted);
  position: relative;
}
.unit-switch a[aria-current="page"] { color: var(--fg); }
.unit-switch a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: var(--s-5); bottom: -1px; height: 2px; background: var(--accent); }
.unit-switch a:hover { color: var(--fg); }

.unit-intro { row-gap: var(--s-7); }
.unit-intro__text { grid-column: 1 / -1; display: grid; gap: var(--s-5); align-content: start; }
.unit-intro__facts { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .unit-intro__text { grid-column: 1 / 7; }
  .unit-intro__facts { grid-column: 8 / 13; }
}
.facts { border-top: 1px solid var(--rule-strong); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--fg-muted); font-size: var(--fs-small); }
.facts dd { grid-column: 1; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.facts .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.facts__note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--fg-faint); }
.facts-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.annot-figure { position: relative; overflow: hidden; background: var(--ph, var(--bg-raised)); aspect-ratio: 3 / 2; max-height: 82vh; width: 100%; }
.annot-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .annot-figure { aspect-ratio: 4 / 5; } }

.unit-split { row-gap: var(--s-7); align-items: start; }
.unit-split > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .unit-split__a { grid-column: 1 / 6; }
  .unit-split__b { grid-column: 7 / 13; }
}
.concept-diagram { border: 1px solid var(--rule); padding: var(--s-5); background: var(--bg-raised); }
.concept-diagram svg { width: 100%; height: auto; }
.concept-diagram .ink { stroke: var(--fg); fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.concept-diagram .faint { stroke: var(--fg-faint); fill: none; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.concept-diagram .accent { stroke: var(--accent); fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.concept-diagram text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--fg-muted); }

.pending-list { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px dashed color-mix(in srgb, var(--signal) 55%, transparent); }
[data-theme="night"] .pending-list { border-color: rgb(240 141 127 / 0.45); }
.pending-list ul { padding-left: 1.1em; color: var(--fg-muted); display: grid; gap: var(--s-2); }

.next-units { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .next-units { grid-template-columns: 1fr 1fr; } }
.next-unit {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-7) var(--margin);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--rule);
  min-height: 280px;
  align-content: end;
}
@media (min-width: 900px) { .next-unit + .next-unit { border-left: 1px solid var(--rule); } }
.next-unit img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease-out);
}
.next-unit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 11 10 / 0.55); opacity: 0; transition: opacity 900ms var(--ease-out); }
.next-unit:hover, .next-unit:focus-visible { color: #fff; }
.next-unit:hover img, .next-unit:focus-visible img { clip-path: inset(0 0 0 0); }
.next-unit:hover::before, .next-unit:focus-visible::before { opacity: 1; }
.next-unit__name { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; }
@media (hover: none) {
  .next-unit { color: #fff; }
  .next-unit img { clip-path: none; }
  .next-unit::before { opacity: 1; }
}

/* Transiciones entre páginas (View Transitions API; sin soporte = navegación normal) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-group(*) { animation-duration: 800ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }