@charset "UTF-8";
/**
 * @file
 * Contact CAU styles — mobile-first.
 * Figma: Desktop 26:2105, Mobile 26:5602.
 *
 * Mobile: stacked, no image, auto-width CTA.
 * Desktop (>=992px): 2-col layout with image card.
 */
/* ==========================================================================
   Mobile base (xs)
   ========================================================================== */
.vel-cau {
  background: rgba(228, 228, 228, 0.3);
  padding-block: 64px; /* Figma mobile: 64px top and bottom */
}

.vel-cau__inner {
  display: flex;
  flex-direction: column;
  gap: var(--vel-space-xl);
}

/* Hide image on mobile */
.vel-cau__image-wrapper {
  display: none;
}

.vel-cau__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* -- Title with ::after underline (consistent with vel-section-title) -- */
.vel-cau__title {
  font-family: var(--vel-font-heading);
  font-size: var(--vel-text-3xl); /* 30px — Figma mobile */
  font-weight: 800;
  color: var(--vel-primary);
  line-height: var(--vel-leading-heading-sm); /* 36px */
  position: relative;
  margin: 0 0 56px; /* 24px to underline + 32px gap below = 56px total */
  max-width: 185px; /* Force "Contacta" / "con el CAU" wrap on mobile */
}

.vel-cau__title::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 75px;
  height: 5px;
  background: var(--vel-accent);
}

/* -- Body -- */
.vel-cau__body {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-base); /* 16px */
  font-weight: 400;
  color: var(--vel-text-muted); /* #4A5565 on mobile */
  line-height: 24px;
  margin: 0 0 var(--vel-space-xl); /* 32px */
}
.vel-cau__body p {
  margin: 0;
}

/* -- Contact items -- */
.vel-cau__contact-items {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma mobile: ~12px between items */
  margin-bottom: var(--vel-space-xl);
}

.vel-cau__item {
  display: flex;
  gap: 15px; /* Figma: 15px gap between icon and text */
  align-items: center;
  max-width: 250px;
}

.vel-cau__item-text {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vel-cau__item-text .vel-cau__item-value {
  margin: auto 0;
}

.vel-cau__item-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vel-bg-white);
  border-radius: var(--vel-card-radius); /* 16px */
  box-shadow: var(--vel-shadow-sm-mobile);
  flex-shrink: 0;
}

.vel-cau__item-label {
  display: block;
  font-family: var(--vel-font-heading); /* Funnel Display — Figma */
  font-size: var(--vel-text-xs); /* 12px mobile */
  font-weight: 800;
  color: var(--vel-secondary);
  text-transform: uppercase;
  letter-spacing: var(--vel-tracking-wide); /* 1.4px */
  line-height: 16px;
}

.vel-cau__item-value {
  display: block;
  font-family: var(--vel-font-body); /* Urbanist Bold — Figma mobile */
  font-size: var(--vel-text-base); /* 16px */
  font-weight: 700;
  color: var(--vel-primary);
  line-height: 24px;
  white-space: pre-line; /* Respect \n in field value for line breaks */
}

/* -- CTA button -- */
.vel-cau__cta {
  display: inline-flex; /* auto-width, not full-width */
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px; /* Figma mobile: 24px horizontal padding */
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-base); /* 16px */
  font-weight: 700;
  color: var(--vel-primary);
  background: var(--vel-accent);
  border-radius: var(--vel-btn-radius-mobile); /* 12px */
  text-decoration: none;
  transition: box-shadow 0.3s ease;
  box-shadow: var(--vel-shadow-blue-mobile);
}

.vel-cau__cta:hover,
.vel-cau__cta:focus {
  color: var(--vel-primary);
  box-shadow: var(--vel-shadow-deep-mobile);
}

/* ==========================================================================
   sm (576px)
   ========================================================================== */
@media (min-width: 576px) {
  .vel-cau__contact-items {
    flex-direction: row;
    gap: var(--vel-space-2xl); /* 48px */
  }
}
/* ==========================================================================
   md (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .vel-cau__title {
    font-size: var(--vel-text-4xl); /* 48px */
    line-height: 48px;
    max-width: none;
  }
}
/* ==========================================================================
   lg (992px) — Desktop: 2-col with image
   ========================================================================== */
@media (min-width: 992px) {
  .vel-cau__inner {
    display: grid;
    grid-template-columns: 796fr 836fr; /* Figma: ~48.8% / 51.2% */
    gap: var(--vel-space-3xl); /* 64px — space between image and content */
    align-items: end;
  }
  .vel-cau__content {
    padding-top: 42px;
    padding-bottom: 16px;
  }
  /* -- Image card -- */
  .vel-cau__image-wrapper {
    display: block;
    position: relative;
    height: 612px;
    border-radius: var(--vel-card-radius-xl); /* 56px */
    overflow: hidden;
    box-shadow: var(--vel-shadow-deep);
  }
  /*
   * Image background layer (Figma 26:2109).
   * Sharp image with gradient overlay darkening towards the bottom.
   * Figma has blur(10.7px) at design level but the visual result is a
   * clear photo with gradient — CSS blur produces a different (stronger)
   * effect, so we skip it.
   */
  .vel-cau__image-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--vel-card-radius-xl);
    overflow: hidden;
  }
  .vel-cau__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 30% center;
       object-position: 30% center; /* Woman more to the left */
    border-radius: 0;
  }
  .vel-cau__image-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(41, 131, 169, 0) 21.16%, rgba(0, 70, 110, 0.5) 84.9%);
    pointer-events: none;
  }
  .vel-cau__image-gradient::after {
    content: "";
    position: absolute;
    height: 75%;
    width: 100%;
    bottom: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  }
  /* Sharp text overlay — outside the blurred layer */
  .vel-cau__image-overlay {
    position: absolute;
    bottom: 48px;
    left: 56px;
    right: 56px;
    z-index: 1;
    color: #fff;
    pointer-events: none;
  }
  .vel-cau__image-title {
    font-family: var(--vel-font-heading);
    font-size: var(--vel-text-4xl); /* 48px */
    font-weight: 700;
    line-height: 48px;
    margin: 0 0 12px;
    color: #fff;
  }
  .vel-cau__image-desc {
    font-family: var(--vel-font-body);
    font-size: var(--vel-text-lg); /* 18px */
    font-weight: 500;
    line-height: 28px;
    margin: 0;
    color: #fff;
  }
  /* -- Content side -- */
  .vel-cau__title {
    font-size: 80px; /* Figma: 80px ExtraBold */
    line-height: 80px;
    letter-spacing: var(--vel-tracking-tight); /* -1.8px */
    max-width: 420px; /* Force "Contacta" / "con el CAU" wrap like Figma */
    margin-bottom: var(--vel-space-3xl); /* 64px — space for underline */
  }
  .vel-cau__title::after {
    bottom: -32px;
    height: 10px;
  }
  .vel-cau__body {
    font-family: var(--vel-font-body);
    font-size: var(--vel-text-xl); /* 20px */
    font-weight: 500;
    color: var(--vel-primary); /* #00466E on desktop */
    line-height: 32.5px;
    margin-bottom: var(--vel-space-3xl); /* 64px */
  }
  .vel-cau__contact-items {
    flex-direction: row;
    gap: 64px; /* Figma: 64px between items */
    margin-bottom: var(--vel-space-3xl); /* 64px */
  }
  .vel-cau__item-icon {
    box-shadow: var(--vel-shadow-sm);
  }
  .vel-cau__item-label {
    font-size: var(--vel-text-sm); /* 14px desktop */
    line-height: 20px;
  }
  .vel-cau__item-value {
    font-family: var(--vel-font-heading); /* Funnel Display Bold on desktop */
    font-size: var(--vel-text-xl); /* 20px */
    line-height: 25px;
  }
  /* -- CTA desktop -- */
  .vel-cau__cta {
    height: auto;
    padding: 16px 32px;
    font-size: var(--vel-text-lg); /* 18px */
    border-radius: var(--vel-card-radius); /* 16px */
    box-shadow: var(--vel-shadow-blue);
  }
  .vel-cau__cta:hover,
  .vel-cau__cta:focus {
    box-shadow: var(--vel-shadow-deep);
  }
}
/* ==========================================================================
   xl (1200px) — Fine-tune spacing
   ========================================================================== */
@media (min-width: 1200px) {
  .vel-cau__image-wrapper {
    height: 612px;
  }
}
/*# sourceMappingURL=contact-cau.css.map */