/* Érase un Hotel: base. Tipografía, reset, utilidades y respaldos de los módulos.
   Todo color, tipo y espacio sale de tokens.css. Botones y secciones: components.css. */

/* Tipografía servida desde la propia web (Fontshare ITF, uso comercial y autoalojado permitidos).
   Solo los pesos que existen: Cabinet 500/700/800 y Satoshi 400/500/700. Sin 600 a propósito. */
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cabinet-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cabinet-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2"); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satoshi-400.woff2") format("woff2"); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/satoshi-500.woff2") format("woff2"); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/satoshi-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--negro);
  scroll-padding-top: var(--header-h);
  overflow-x: clip;
  /* Sin cursivas ni negritas falsas: si un peso no existe, cae en el más cercano real. */
  font-synthesis: none;
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.is-locked, html.is-locked body { overflow: hidden; }
::selection { background: var(--blanco); color: var(--negro); }

/* Carruseles horizontales: vendor/lenis.css les pone overscroll-behavior: contain en los dos ejes y
   el gesto vertical del dedo no llega a la página. Contenemos solo el eje X. */
html.lenis [data-lenis-prevent-horizontal] { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }

img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
address { font-style: normal; }
p { margin: 0; text-wrap: pretty; }
small { font-size: var(--t-xs); }
strong, b { font-weight: 700; }

/* Titulares: Cabinet Grotesk, frase normal, cerrados y apretados. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-sub);
  text-wrap: balance;
}
/* Sin cursivas de adorno: un <em> dentro de un titular se lee igual que el resto. */
h1 em, h2 em, h3 em { font-style: normal; }

/* Fotos: filtro negro en reposo; recuperan color al pasar el ratón (o con .is-on, al centrarse). */
.foto { filter: var(--foto-filtro); transition: filter var(--d-foto) var(--ease-out); }
.foto:hover, .is-on > .foto, .foto.is-on { filter: var(--foto-filtro-activa); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ico--fill { fill: currentColor; stroke: none; width: 1.15em; height: 1.15em; }

/* Foco visible: blanco sobre negro, negro sobre las superficies blancas. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; border-radius: var(--r-field); }
/* Superficies blancas (barra, calendario, hojas): data-surface="paper" o .on-paper pone los controles
   nativos en claro y el foco en negro. */
[data-surface="paper"], .on-paper { color-scheme: light; }
[data-surface="paper"] :focus-visible, .on-paper :focus-visible { outline-color: var(--papel-tinta); }
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: fixed; z-index: calc(var(--z-menu) + 1); top: 12px; left: 12px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--blanco); color: var(--negro); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; transform: translateY(-160%); transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; outline-color: var(--blanco); outline-offset: 3px; }
.linklike { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* ---------- Raíces de módulo ---------- */
/* Cada sección trae su contenido real en el HTML (respaldo) con el mismo alto que el módulo montado,
   así que no hace falta reservar sitio: montar un módulo no mueve la página. */
.mod { position: relative; }
.mod--reserva:empty { display: contents; }

/* ---------- Respaldo de la galería (si su módulo no carga): la misma tira, sin visor ---------- */
.gallery-grid {
  --alto: clamp(320px, 70vh, 860px);
  display: flex; gap: clamp(10px, 1.1vw, 16px);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-grid li { flex: none; height: var(--alto); scroll-snap-align: start; }
.gallery-grid img { width: auto; max-width: none; height: 100%; object-fit: cover; background: var(--capa); filter: var(--foto-filtro); }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .gallery-grid { --alto: min(clamp(220px, 60vh, 640px), calc(86vw / 1.25)); gap: 10px; }
  .gallery-grid img { max-width: 86vw; }
}
/* Con JS, hasta que se monta: el hueco de la barra del contador y las flechas (la tira no crece al montar). */
html.js .mod--galeria:not([data-module-state="ready"], [data-module-state="failed"]) .gallery-grid { margin-bottom: calc(var(--s-5) + 46px); }
@media not all and (hover: hover) and (pointer: fine) {
  html.js .mod--galeria:not([data-module-state="ready"], [data-module-state="failed"]) .gallery-grid { margin-bottom: 34px; }
}