/* Érase un Hotel: tokens de diseño. Fuente única de color, tipo y espacio.
   v3: negro y blanco, sin acento, con formas redondeadas (botones en píldora, fotos y tarjetas con radio)
   y superficies grafito y papel para que no todo sea negro.
   Nadie escribe colores a mano: se usan estos nombres. */
:root {
  /* ---------- Color sobre negro (todo el sitio) ---------- */
  --negro: #000000;                    /* fondo de todo, sin teñir */
  --blanco: #FFFFFF;
  --gris: rgba(255, 255, 255, 0.66);   /* texto secundario sobre negro (AA en texto pequeño) */
  --gris-2: rgba(255, 255, 255, 0.5);  /* solo texto de 15 px o más, o decorativo */
  --linea: rgba(255, 255, 255, 0.16);  /* filetes */
  --capa: rgba(255, 255, 255, 0.06);   /* superficies elevadas sobre negro */
  --grafito: #151515;                  /* tarjetas sobre negro: no todo es negro */
  --grafito-2: #1E1E1E;                /* tarjeta al pasar el ratón, iconos */
  --linea-suave: rgba(255, 255, 255, 0.09);

  /* ---------- Superficies blancas (barra de reserva, calendario, hojas) ---------- */
  --papel: #FFFFFF;
  --papel-tinta: #000000;
  --papel-gris: #5C5C5C;               /* 6,7:1 sobre blanco */
  --papel-linea: #E6E6E6;

  /* ---------- Filtro negro de vídeo y fotos ---------- */
  --velo: rgba(0, 0, 0, 0.26);         /* velo del vídeo y de las fotos (v2 tenía 40 %: se veía demasiado oscuro) */
  --velo-pie: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 55%); /* para leer la letra abajo */
  /* El morado de la decoración (cortinas, sillones, cabeceros, toldo) no debe gritar: desaturado fuerte. */
  --foto-filtro: brightness(0.9) saturate(0.6);          /* reposo */
  --foto-filtro-activa: brightness(1) saturate(0.8);     /* al pasar el ratón o al centrarse */
  --d-foto: 700ms;                     /* transición del filtro de foto */

  /* ---------- Tipografía ---------- */
  /* Cabinet Grotesk: 500, 700 y 800. Satoshi: 400, 500 y 700. No hay 600: usar 500 o 700. */
  --f-display: 'Cabinet Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Satoshi', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Escala cuarta justa (1.333) sobre 17 px */
  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-md: 1.0625rem;   /* 17 cuerpo */
  --t-lg: 1.3125rem;   /* 21 */
  --t-xl: 1.75rem;     /* 28 */
  --t-2xl: 2.3125rem;  /* 37 */
  --t-3xl: clamp(2.2rem, 4.2vw, 3.125rem);   /* 50 */
  --t-4xl: clamp(2.5rem, 5.6vw, 4.1875rem);  /* 67 */
  --t-5xl: clamp(2.8rem, 7.2vw, 5.5625rem);  /* 89 */
  --t-6xl: clamp(3.2rem, 9vw, 8.5rem);       /* 136: el hero */
  --t-hero: var(--t-6xl);
  --lh-tight: 0.95;    /* titulares grandes */
  --lh-head: 1.05;     /* titulares medianos */
  --lh-body: 1.55;
  /* Tracking negativo: más cerrado cuanto más grande */
  --tr-hero: -0.035em;
  --tr-head: -0.03em;
  --tr-sub: -0.02em;

  /* ---------- Espacio (base 8) ---------- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  /* Margen lateral. En horizontal con muesca, nunca menos que la zona segura del lado más ocupado. */
  --gutter-base: clamp(16px, 4.4vw, 64px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gutter: max(var(--gutter-base), var(--safe-l), var(--safe-r));
  --max: 1320px;
  --measure: 34rem;          /* ~70 caracteres */

  /* ---------- Forma: redondeada y moderna ---------- */
  --r-pill: 999px;     /* botones, barra de reserva, chips */
  --r-sheet: 28px;     /* diálogo de reserva, menú, hojas */
  --r-panel: 36px;     /* secciones claras que flotan sobre el negro */
  --r-card: 24px;      /* tarjetas */
  --r-field: 14px;     /* campos y botones pequeños cuadrados */
  --r-foto: 22px;      /* fotos */

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms; --d-med: 420ms; --d-slow: 900ms;

  /* ---------- Capas ---------- */
  --z-stage: 0; --z-plate: 10; --z-section: 20; --z-header: 60; --z-bar: 70; --z-sheet: 80; --z-menu: 90;

  /* ---------- Alturas seguras en móvil ---------- */
  --vh-stage: 100lvh;
  --vh-screen: 100svh;
  --header-h: 76px;
  --bar-h: 64px;
}
@media (max-width: 760px) {
  :root { --header-h: 60px; }
}
/* En táctil «centrada» es casi siempre «la que miras»: la foto activa no vuelve a color pleno. */
@media (hover: none) {
  :root { --foto-filtro-activa: brightness(0.97) saturate(0.72); }
}
/* Móvil en horizontal (poca altura y dedo): cabecera compacta. */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --header-h: 56px; }
}