/* ══════════════════════════════════════════════════════════════════════════
   Habita360 · presentación de la vertical
   ══════════════════════════════════════════════════════════════════════════
   Solo maquetación sobre los componentes de marca del Design OS (ds/).
   Todo valor es var(--ct-*); lo que falta está en FALTAN-TOKENS.md.
   ══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; scroll-padding-top: var(--ct-espacio-11); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Portada ───────────────────────────────────────────────────────────── */
.hb-portada__rejilla { display: grid; align-items: center; gap: var(--ct-espacio-7); }
.hb-portada__texto { display: grid; justify-items: start; gap: var(--ct-espacio-interfaz-5); }
.hb-portada h1 { font-size: var(--ct-tipo-web-h1-tamano); letter-spacing: var(--ct-tipo-web-h1-tracking); line-height: var(--ct-tipo-web-h1-interlinea); text-wrap: balance; }
.hb-portada .ct-entradilla { margin: 0; max-width: 56ch; }
.hb-portada .ct-botones { margin-top: var(--ct-espacio-interfaz-3); }
.hb-portada__captura {
  display: block;
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-hoja);
  background: var(--ct-superficie);
  box-shadow: var(--ct-sombra-elevada);
  overflow: hidden;
  transition: transform var(--ct-dur-base) var(--ct-curva-entrada);
}
.hb-portada__captura img { display: block; width: 100%; height: auto; }
.hb-portada__captura:focus-visible { outline: var(--ct-foco-grosor) solid var(--ct-foco); outline-offset: var(--ct-foco-separacion); }
@media (hover: hover) { .hb-portada__captura:hover { transform: translateY(calc(var(--ct-dist-s) * -1)); } }
@media (min-width: 1024px) {
  .hb-portada__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ct-espacio-8); }
}

/* ── Qué es ────────────────────────────────────────────────────────────── */
.hb-icono {
  display: grid;
  place-items: center;
  width: var(--ct-toque-minimo);
  height: var(--ct-toque-minimo);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-primario-suave);
  color: var(--ct-primario-texto);
}
.hb-sino { display: grid; gap: var(--ct-espacio-interfaz-5); margin-top: var(--ct-espacio-7); }
.hb-sino__columna {
  display: grid;
  align-content: start;
  gap: var(--ct-espacio-interfaz-4);
  padding: var(--ct-espacio-interfaz-6);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-tarjeta);
  background: var(--ct-fondo-suave);
}
.hb-sino h3 { font-size: var(--ct-tipo-titulo-3-tamano); }
.hb-marcas { display: grid; gap: var(--ct-espacio-interfaz-3); margin: 0; padding: 0; list-style: none; }
.hb-marcas li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--ct-espacio-interfaz-4); }
.hb-marcas .ct-icono { margin-top: var(--ct-espacio-interfaz-1); }
.hb-marcas--si .ct-icono { color: var(--ct-primario-texto); }
.hb-marcas--no .ct-icono { color: var(--ct-peligro); }
@media (min-width: 720px) { .hb-sino { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── La demo ───────────────────────────────────────────────────────────── */
.hb-demo { --_minimo: 320px; }
.hb-demo .ct-estado { align-self: flex-start; justify-self: start; width: fit-content; }

/* ── Niveles ───────────────────────────────────────────────────────────── */
.hb-escalera { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 80ch; }
.hb-escalera > li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-espacio-interfaz-5);
  padding-bottom: var(--ct-espacio-interfaz-6);
}
.hb-escalera > li:last-child { padding-bottom: 0; }
/* el hilo que une un peldaño con el siguiente */
.hb-escalera > li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--ct-toque-minimo);
  bottom: 0;
  left: calc(var(--ct-toque-minimo) / 2);
  width: 2px;
  background: var(--ct-linea);
}
.hb-escalera__n {
  display: grid;
  place-items: center;
  width: var(--ct-toque-minimo);
  height: var(--ct-toque-minimo);
  border-radius: 50%;
  background: var(--ct-primario-relleno);
  color: var(--ct-sobre-primario);
  font-family: var(--ct-fuente-titular);
  font-size: var(--ct-tipo-interfaz-subtitulo);
  font-weight: var(--ct-peso-titular);
  line-height: 1;
}
.hb-escalera h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-espacio-interfaz-2) var(--ct-espacio-interfaz-4); min-height: var(--ct-toque-minimo); font-size: var(--ct-tipo-titulo-3-tamano); }
.hb-escalera p { margin: 0; color: var(--ct-texto-suave); }

/* ── Soluciones ────────────────────────────────────────────────────────── */
.hb-tras-rejilla { margin-top: var(--ct-espacio-interfaz-6); }