@charset "UTF-8";
/**
 * @file
 * Hero section styles — mobile-first.
 * Figma: Desktop 26:1790 (550px), Mobile 26:5381 (386px).
 */
/* ==========================================================================
   Mobile base (xs)
   ========================================================================== */
.vel-hero {
  position: relative;
  min-height: 386px;
  display: flex;
  align-items: center;
  background-color: var(--vel-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: var(--vel-space-3xl) 0; /* 64px vertical — horizontal via .vel-container */
}

/* Fallback background when field_bg_image is empty */
.vel-hero--home {
  background-image: none;
}

.vel-hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Mobile: image covers full container, no offset */
  background: url("../../assets/images/about-earth.webp") center/cover no-repeat;
  /* Mobile: no opacity — gradient overlay alone handles darkening (Figma 26:5381) */
  z-index: 0;
}

.vel-hero--home[style*=background-image]::before {
  display: none;
}

.vel-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--vel-gradient-hero);
  z-index: 1;
}

.vel-hero--page .vel-hero__overlay {
  background: var(--vel-gradient-hero);
}

.vel-hero__content {
  position: relative;
  z-index: 2;
  width: 100%; /* Stretch to fill hero flex parent */
  color: var(--vel-bg-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vel-space-lg);
}

.vel-hero__heading-group {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  /* Simulate Figma single-text-block spacing: line-height: 1 on children
     removes half-leading so the two elements sit as tight as one text block. */
}

.vel-hero__subtitle {
  font-family: var(--vel-font-heading);
  font-size: var(--vel-text-3xl-plus); /* 36px — Figma mobile 26:5382 */
  font-weight: 800;
  color: var(--vel-bg-white);
  margin: 0;
  line-height: 1; /* Tight pairing — no half-leading between subtitle+title */
}

.vel-hero__title {
  font-family: var(--vel-font-heading);
  font-size: 64px;
  font-weight: 800;
  color: var(--vel-accent);
  margin: 0;
  line-height: 1; /* Tight pairing — matches subtitle */
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: from-font;
  text-underline-position: from-font;
}

/* Page hero variant (Conoce, Recursos, etc.) — mobile */
.vel-hero--page {
  min-height: 280px;
}

.vel-hero--page .vel-hero__subtitle {
  font-family: var(--vel-font-body); /* Urbanist, not Funnel Display */
  font-size: var(--vel-text-lg);
  font-weight: 500;
  line-height: var(--vel-leading-loose);
}

.vel-hero--page .vel-hero__title {
  font-size: var(--vel-text-3xl);
  color: var(--vel-bg-white);
  text-decoration: none;
  line-height: 40px;
}

.vel-hero__body {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-lg); /* 18px */
  font-weight: 500;
  color: var(--vel-bg-white);
  line-height: var(--vel-leading-card-body); /* 26px */
  margin: 0;
  max-width: 100%;
}

.vel-hero__cta {
  display: inline-block;
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-base);
  font-weight: 700;
  color: var(--vel-primary);
  background: var(--vel-accent);
  padding: 0 24px;
  height: 50px;
  line-height: 50px;
  border-radius: var(--vel-btn-radius-mobile);
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  box-shadow: var(--vel-shadow-blue-mobile);
}

.vel-hero__cta:hover,
.vel-hero__cta:focus {
  transform: translateY(-2px);
  color: var(--vel-primary);
}

/* ==========================================================================
   sm (576px)
   ========================================================================== */
@media (min-width: 576px) {
  .vel-hero {
    min-height: 420px;
  }
  .vel-hero__subtitle {
    font-size: var(--vel-text-4xl); /* 48px */
    line-height: 1;
  }
  .vel-hero__title {
    font-size: 72px;
    line-height: 1;
  }
  .vel-hero--page {
    min-height: 356px;
  }
  .vel-hero--page .vel-hero__subtitle {
    font-size: var(--vel-text-xl);
    line-height: var(--vel-leading-loose);
  }
  .vel-hero--page .vel-hero__title {
    font-size: var(--vel-text-4xl);
    line-height: var(--vel-leading-heading-md);
  }
}
/* ==========================================================================
   md (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .vel-hero--home {
    min-height: 460px;
  }
  .vel-hero__content {
    gap: var(--vel-space-xl);
  }
  .vel-hero__subtitle {
    font-size: 56px;
    line-height: 1;
  }
  .vel-hero__title {
    font-size: 80px;
    line-height: 1;
  }
  .vel-hero__body {
    font-size: var(--vel-text-xl);
    line-height: 28px;
    max-width: 600px;
  }
  .vel-hero--page .vel-hero__title {
    font-size: var(--vel-text-4xl);
  }
}
/* ==========================================================================
   lg (992px) — Desktop layout
   ========================================================================== */
@media (min-width: 992px) {
  .vel-hero--home .vel-hero {
    padding: 0;
    align-items: flex-start;
  }
  .vel-hero--page .vel-hero {
    padding: 0;
    align-items: center;
  }
  .vel-hero--home {
    min-height: 500px;
  }
  /* Desktop: image oversized and shifted up per Figma (213% height, -35% top) */
  .vel-hero--home::before {
    inset: auto;
    top: -35%;
    left: 0;
    width: 100%;
    height: 213%;
    opacity: 0.5; /* Desktop only — mobile relies on gradient overlay alone */
  }
  .vel-hero--home .vel-hero__content {
    padding-top: var(--vel-section-padding);
    padding-bottom: var(--vel-section-padding);
    gap: var(--vel-space-2xl);
  }
  .vel-hero__heading-group {
    max-width: 920px;
  }
  .vel-hero__subtitle {
    font-size: var(--vel-text-6xl); /* 80px */
    line-height: 1;
  }
  .vel-hero__title {
    font-size: 100px;
    line-height: 1;
  }
  .vel-hero--page {
    padding: 0;
    background: var(--vel-primary);
  }
  .vel-hero--page .vel-hero__bg {
    position: absolute;
    inset: 0;
    background-color: var(--vel-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: 0;
    opacity: 0.2;
  }
  .vel-hero--page .vel-hero__subtitle {
    font-size: var(--vel-text-xl);
    line-height: var(--vel-leading-loose);
    max-width: 772px;
  }
  .vel-hero--page .vel-hero__title {
    font-size: var(--vel-text-5xl);
    font-weight: 700; /* Bold, not ExtraBold */
    color: var(--vel-bg-white);
    text-decoration: none;
    line-height: var(--vel-leading-heading-lg); /* 72px */
  }
  .vel-hero--home .vel-hero__body {
    font-size: var(--vel-text-3xl);
    line-height: normal;
    max-width: 671px;
  }
  .vel-hero--page .vel-hero__body {
    max-width: 671px;
  }
  .vel-hero__cta {
    padding: 14px 32px;
    height: auto;
    line-height: normal;
    border-radius: var(--vel-card-radius);
    font-size: var(--vel-text-lg);
    box-shadow: var(--vel-shadow-blue);
  }
}
/* ==========================================================================
   xl (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .vel-hero--home {
    min-height: 530px;
  }
}
/* ==========================================================================
   xxl (1600px) — Full Figma spec sizes
   ========================================================================== */
@media (min-width: 1600px) {
  .vel-hero--home {
    min-height: 550px;
  }
  .vel-hero__title {
    font-size: var(--vel-text-7xl); /* 128px */
  }
}
/*# sourceMappingURL=hero.css.map */