/**
 * UX simple — tipografía clara, CTAs grandes (misma composición en todos los anchos).
 * Capa encima del diseño de marca (colores Andrew intactos).
 */

:root {
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.65rem;
  --text-2xl: 2.15rem;
  --text-hero: clamp(2.35rem, 6.5vw, 3.75rem);
  --space-section: clamp(3.25rem, 8vw, 5.5rem);
  --tap: 3.25rem;
}

.btn {
  min-height: var(--tap);
  padding: 1rem 1.85rem;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn--lg {
  min-height: 3.6rem;
  padding: 1.15rem 2.35rem;
  font-size: var(--text-lg);
  box-shadow: 0 10px 28px rgba(242, 138, 0, 0.35);
}

.btn--primary {
  box-shadow: 0 8px 24px rgba(242, 138, 0, 0.28);
}

.btn--primary:hover {
  box-shadow: 0 12px 32px rgba(242, 138, 0, 0.4);
}

.btn--primary.about-routes-cta {
  background: var(--color-forest);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(24, 56, 127, 0.35);
}

.btn--primary.about-routes-cta:hover {
  background: var(--color-sage);
  color: var(--color-white);
  box-shadow: 0 12px 32px rgba(24, 56, 127, 0.45);
}

.btn--camino {
  box-shadow: 0 8px 24px rgba(24, 56, 127, 0.28);
}

.btn--camino:hover {
  box-shadow: 0 12px 32px rgba(24, 56, 127, 0.4);
}

.btn--ghost-light {
  font-weight: 600;
  opacity: 0.92;
  min-height: 2.75rem;
  padding: 0.75rem 1.35rem;
  font-size: var(--text-sm);
  box-shadow: none;
}

.site-header__cta .btn {
  min-height: 2.85rem;
  font-size: var(--text-sm);
  padding: 0.75rem 1.35rem;
}

.hero__content {
  max-width: 38rem;
}

.hero__eyebrow {
  font-size: var(--text-sm);
  padding: 0.45rem 1rem;
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.12;
  margin-bottom: var(--space-sm);
}

.hero__subtitle {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.55;
  max-width: 32rem;
  font-weight: 500;
}

.hero__microcopy {
  font-size: var(--text-base);
  font-weight: 600;
  opacity: 0.95;
}

.btn-group--hero {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  max-width: none;
}

.btn-group--hero .btn--primary,
.btn-group--hero .btn--ghost-light {
  width: auto;
  justify-content: center;
}

.how-strip {
  background: var(--color-cream);
  border-block: 1px solid rgba(16, 35, 74, 0.08);
  padding-block: var(--space-md);
}

.how-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.how-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: var(--space-sm) var(--space-xs);
  position: relative;
}

.how-strip__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: -0.5rem;
  width: 1rem;
  height: 2px;
  background: rgba(16, 35, 74, 0.15);
}

.how-strip__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-white);
  font-weight: 800;
  font-size: var(--text-lg);
}

.how-strip__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-forest);
  line-height: 1.2;
}

.how-strip__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  max-width: 14rem;
}

.trust-strip {
  gap: var(--space-sm);
  padding-block: var(--space-md);
}

.trust-strip__item {
  font-size: var(--text-base);
  font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"] {
  min-height: var(--tap);
  font-size: 1.0625rem;
  padding: 0.85rem 1rem;
}

.form-group label {
  font-size: var(--text-base);
}

.form-checkbox {
  font-size: var(--text-sm);
  gap: 0.65rem;
}

.form-checkbox input {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-dock {
  display: none;
}

.mobile-dock.is-hidden {
  transform: translateY(110%);
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 769px) {
  /* Mismo esquema que en el móvil, adaptado al formato horizontal: todo
     centrado, reclamo y titular arriba, subtítulo y CTAs al pie. Así la cara
     de Andrew queda libre de texto. */
  .hero {
    align-items: stretch;
    padding-top: calc(var(--header-height) + 0.75rem);
    /* La foto mide 1024×682 (3:2). Si el hero es más alto que esa proporción,
       `cover` la amplía y recorta los lados y la parte baja. Limitando la
       altura a la proporción de la foto se ve entera y sin zoom. */
    min-height: max(32rem, min(100dvh, 66.67vw));
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 52rem;
    margin-inline: auto;
    padding-block: var(--space-sm) clamp(0.75rem, 1.6vh, 1.35rem);
  }

  .hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 4.2vw, 3.3rem);
  }

  /* En columna flex la píldora se estiraría a todo el ancho. */
  .hero__eyebrow {
    align-self: center;
    margin-bottom: var(--space-xs);
  }

  .hero__subtitle {
    max-width: 38rem;
    margin-bottom: var(--space-sm);
  }

  /* En ventanas anchas y bajas aún queda recorte vertical: se reparte dejando
     la cabeza libre arriba y enseñando el pecho abajo. */
  .hero__bg img {
    object-position: center 30%;
  }

  /* `stretch` evita que la columna encoja la fila y apile los botones. */
  .btn-group--hero {
    align-self: stretch;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    max-width: none;
  }

  .btn-group--hero .btn--primary,
  .btn-group--hero .btn--ghost-light {
    width: auto;
  }
}