/* Evita saltos por barras de direcciones móviles (usa la unidad dvh si existe) */
html, body { min-height: 100dvh; }

/* Que el hero ocupe exactamente el alto disponible calculado */
.hero {
  /* se setea por JS, pero dejamos un fallback */
  min-height: calc(100vh - 120px - 80px); /* fallback por si falla el JS */
  display: grid;
  place-items: center;       /* centra vertical y horizontal */
  padding: clamp(12px, 2vh, 24px) 0;
}

/* El splash parte de esta base; JS lo ajusta cuando falta espacio */
.hero-splash {
  width: clamp(280px, 42vw, 560px);
  max-width: 100%;
}

/* Si querés ir a “cero scroll” pase lo que pase, podés forzarlo.
   OJO: si el menú colapsado es MUY alto, podría cortar contenido. */
/* body { overflow-y: hidden; }*/

:root{
  --ui-scale: 1;        /* la ajusta JS */
  --ui-scale-clamp: 1;  /* opcional si querés usar el valor limitado */
}

/* Título y subtítulo con escala dinámica + clamp por viewport */
.hero-title{
  /* entre 2.8rem y 6rem, con preferido guiado por vw y escala */
  font-size: clamp(2.8rem, calc(6.5vw * var(--ui-scale)), 6rem);
  line-height: 1;
}
.hero-subtitle{
  font-size: clamp(1rem, calc(2.2vw * var(--ui-scale)), 1.6rem);
}

/* Botones: tipografía + paddings + bordes escalan */
.hero .splash-btn{
  font-size: clamp(.95rem, calc(1rem * var(--ui-scale)), 1.125rem);
  padding: calc(.72rem * var(--ui-scale)) calc(1.35rem * var(--ui-scale));
  border-radius: calc(1.5rem * var(--ui-scale));
  box-shadow: 0 0 calc(18px * var(--ui-scale)) rgba(0,174,217,.35);
  min-width: clamp(220px, calc(28vw * var(--ui-scale)), 360px);
}

/* Separación entre botones también escala */
.hero-actions{
  gap: calc(16px * var(--ui-scale));
}

/* Cuando el layout está muy justo, comprimimos un poquito el interlineado */
body.compact .hero-title{ line-height: .98; }
body.compact .hero-subtitle{ line-height: 1.05; }

/* Fallback (si por algún motivo no corre el JS) */
.hero{
  min-height: calc(100vh - 120px - 80px);
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vh, 24px) 0;
}