@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);
}

.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 (in-flow, refactor #113) -- */
.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 */
  margin: 0 0 var(--vel-space-xl); /* 32px — gap línea→siguiente (en flujo) */
  max-width: 185px; /* Force "Contacta" / "con el CAU" wrap on mobile */
}

.vel-cau__title::after {
  content: "";
  display: block;
  width: 75px;
  height: 5px;
  margin-top: var(--vel-space-lg); /* 24px — gap título→línea (mobile) */
  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;
}

.vel-cau__item-text {
  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: nowrap;
}

/* -- 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__title {
    font-size: var(--vel-text-4xl); /* 48px */
    line-height: 48px;
    max-width: none;
  }
}
/* Items side-by-side only when enough space */
@media (min-width: 768px) {
  .vel-cau__contact-items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--vel-space-2xl); /* 48px */
  }
}
/* ==========================================================================
   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-xl); /* 32px — gap línea→siguiente (en flujo) */
  }
  .vel-cau__title::after {
    height: 10px;
    margin-top: var(--vel-space-xl); /* 32px — gap título→línea (desktop) */
  }
  .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;
  }
}
/* ==========================================================================
   laptop (1366–1599px) — Figma laptop tier
   Tarjeta de imagen más contraída: alto 415px común, ancho distinto por
   página (Home 479px, Recursos 351px). El object-fit:cover recorta la
   zona decorativa derecha al estrechar. El contenido escala fluido.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1599px) {
  .vel-cau__image-wrapper {
    height: 415px;
  }
  /* El contenido se centra respecto a la tarjeta (en desktop va alineado
     abajo, pero en laptop la tarjeta es más baja y quedaría descolgado). */
  .vel-cau__inner {
    align-items: center;
    gap: 120px; /* separación imagen → columna de texto (Figma laptop) */
  }
  .vel-cau__content {
    padding-top: 0;
  }
  .vel-cau--home .vel-cau__inner {
    grid-template-columns: 479px 1fr;
  }
  .vel-cau--resources .vel-cau__inner {
    grid-template-columns: 351px 1fr;
  }
  /* -- Texto overlay sobre la tarjeta de imagen -- */
  .vel-cau__image-title {
    font-size: 1.5rem; /* 24px en laptop (vs 48px desktop) */
    line-height: normal;
    margin-bottom: var(--vel-space-md); /* 16px hasta la descripción */
  }
  .vel-cau__image-desc {
    line-height: normal;
  }
  .vel-cau__image-overlay {
    bottom: 61px;
    left: 32px;
  }
  /* -- Columna derecha: título en 1 línea + 32px entre cada elemento -- */
  .vel-cau__title {
    max-width: none; /* el título va en una sola línea en laptop */
    /* La línea azul es ::after absolute (no ocupa flujo): el margin se mide
       desde el texto. 8px hasta la línea + 32px de hueco real hacia el body. */
    margin-bottom: 40px;
  }
  .vel-cau__title::after {
    bottom: -8px; /* línea pegada al texto, como Figma laptop */
  }
  .vel-cau__body {
    margin-bottom: var(--vel-space-xl); /* 32px */
    max-width: 385px;
  }
  .vel-cau__contact-items {
    margin-bottom: var(--vel-space-xl); /* 32px */
  }
  /* El horario ocupa 2 líneas: se desplaza el bloque visualmente sin alterar
     el flujo (transform no empuja las secciones contiguas → 32px intactos). */
  .vel-cau__item:first-child .vel-cau__item-text {
    transform: translateY(10px);
  }
  .vel-cau__item:first-child .vel-cau__item-value {
    margin: 0;
  }
}
/*# sourceMappingURL=contact-cau.css.map */