/* Inicio de Human Cabs: una frase y tres puertas. */
.inicio { min-height: 100vh; display: flex; flex-direction: column; background:
  radial-gradient(900px 420px at -10% 110%, rgba(207, 182, 240, .45), transparent 60%),
  radial-gradient(700px 380px at 110% -10%, rgba(207, 224, 246, .6), transparent 60%),
  var(--h-bg); }
.ini-top, .ini-hero, .ini-puertas { box-sizing: border-box; width: 100%; margin-inline: auto; }
.ini-top { padding: 28px clamp(20px, 5vw, 64px); max-width: 1200px; }
.ini-hero { padding: clamp(32px, 8vh, 96px) clamp(20px, 5vw, 64px) 40px; max-width: 920px; text-align: center; }
.ini-hero h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.08; }
.ini-hero .h-rule { margin: 24px auto 20px; width: 88px; }
.ini-hero p { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--h-ink-2); max-width: 680px; margin-inline: auto; }

.ini-puertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 16px clamp(20px, 5vw, 64px) 56px; max-width: 1200px; }
.puerta { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; color: var(--h-ink); text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.puerta:hover, .puerta:focus-visible { transform: translateY(-3px); box-shadow: var(--h-shadow-lg); border-color: var(--h-purple-soft); outline: none; }
.puerta b { font-size: 20px; font-weight: 600; margin-top: 8px; }
.puerta span:not(.h-icon) { color: var(--h-ink-2); line-height: 1.5; font-size: 15px; }
.puerta i { position: absolute; right: 22px; top: 26px; font-style: normal; font-size: 22px; color: var(--h-purple); }
.puerta .h-icon svg { stroke-linecap: round; stroke-linejoin: round; }
.inicio .h-footer { margin-top: auto; flex-wrap: wrap; }

@media (max-width: 820px) {
  .ini-puertas { grid-template-columns: 1fr; }
}