/**
 * Correcciones para landings Harvis (sitio 21 mayo en Next):
 * - Tailwind `.container` vs `.container` del marketing
 * - Ancho útil ~100% del viewport (hasta 1320px)
 * - Tipografía display más fluida (sin `ch` tan agresivos en títulos largos)
 * - Safe area en móvil
 */

.harvis-web-21 {
  --container: min(1320px, calc(100vw - 2 * var(--gutter)));
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.harvis-web-21 .harvis-html-main {
  width: 100%;
  min-width: 0;
}

/* Gana sobre la utilidad `container` de Tailwind (misma clase, otro max-width) */
.harvis-web-21 .container {
  width: 100% !important;
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)) !important;
}

/* Display: ocupar ancho del contenedor; balancear líneas sin forzar pocos caracteres */
.harvis-web-21 .display {
  max-width: 100%;
  text-wrap: balance;
}

.harvis-web-21 .display--md {
  font-size: clamp(26px, 4vw + 0.55rem, 72px);
  line-height: 1.05;
}

.harvis-web-21 .display--sm {
  font-size: clamp(22px, 2.8vw + 0.45rem, 46px);
  line-height: 1.08;
}

.harvis-web-21 .display--lg {
  font-size: clamp(34px, 5.5vw + 0.4rem, 88px);
}

.harvis-web-21 .display--xl {
  font-size: clamp(42px, 7vw + 0.5rem, 120px);
}

/* Hero: título largo en español — más ancho útil que 16ch fijo */
.harvis-web-21 .hero h1 {
  max-width: min(42ch, 100%);
  font-size: clamp(36px, 5.2vw + 0.45rem, 96px);
}

.harvis-web-21 .what h2,
.harvis-web-21 .how__intro h2 {
  max-width: min(36ch, 100%);
}

@media (max-width: 600px) {
  .harvis-web-21 {
    --gutter: clamp(16px, 4.5vw, 28px);
  }

  .harvis-web-21 .hero {
    min-height: unset;
    padding-top: clamp(40px, 10vw, 72px);
    padding-bottom: clamp(56px, 12vw, 100px);
  }
}

/* Ancla desde la home: al llegar a /documentacion#centro-documentacion el buscador no queda tapado */
#centro-documentacion {
  scroll-margin-top: clamp(72px, 12vw, 100px);
}