/**
 * Estilos de frontend del bloque umivale/banner-cta.
 * Traduce a CSS plano las utilidades Tailwind del componente Vue original.
 */

/* Cliente (2026-09-11): "revisa que el banner cta tiene un overlay, revisa
 * size, height, etc". Medido en umivaleactiva.es
 * (.umivale-call-action-container), idéntico en /empresa y en
 * /salud-y-absentismo-laboral -- o sea, aplica a todas las vistas:
 *   contenedor: padding 20px 0, margin 20px 0, min-height 120px, alto 260px
 *               con el contenido típico; fondo SOLO imagen (cover, centro).
 *   interior:   .container de 1170px CENTRADO (no 1380), padding 0 15px.
 *   título:     29.2px / 40.88px / peso 500 (no 28px/700).
 *   imagen:     max-width 100%, max-height 200px, object-fit fill, radius 6px.
 * OVERLAY: verificado que el original NO tiene ninguno -- ni ::before/::after
 * (content:none) ni hijo semitransparente. El azul sale entero de la imagen
 * de fondo. Nosotros tampoco tenemos overlay: nada que agregar ahí. */
.umivale-banner-cta {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 120px;
  padding: 20px 0;
  margin-top: 20px;
  margin-bottom: 20px;
}

.umivale-banner-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .umivale-banner-cta__inner {
    flex-direction: row;
  }
  .umivale-banner-cta__inner.is-img-left {
    flex-direction: row-reverse;
  }
}

/* Variante centrada (#163): réplica de .umivale-call-action-container del
   original — título/subtítulo/botón centrados, sin columna de imagen. */
.umivale-banner-cta__inner.is-centered {
  align-items: center;
  text-align: center;
}
.umivale-banner-cta__inner.is-centered .umivale-banner-cta__text {
  align-items: center;
}

/* Columna de texto (~60%) */
.umivale-banner-cta__text {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 29.2px/40.88px/500 medido en el original (.umivale-call-action-title), no
 * los 28px/32px/700 del token --uv-titulo-xl. */
.umivale-banner-cta__title {
  color: var(--uv-blanco);
  font-size: 29.2px;
  font-weight: var(--uv-peso-medium);
  line-height: 40.88px;
  margin: 0;
}

.umivale-banner-cta__subtitle {
  color: var(--uv-blanco);
  font-size: var(--uv-subtitulo-xs);
  font-weight: var(--uv-peso-medium);
  line-height: var(--uv-subtitulo-xs-line-height);
  margin: 0;
}

/* Cliente (2026-09-11): "Los BTNs tienen que tener la fuente en Lato 18px"
 * -- era var(--uv-parrafo-s) (16px). Ver theme.css .hero__boton.
 * Segunda pasada (mismo día): medido el botón real del original
 * (.btn.btn-round.umivale-btn-orange) -- padding asimétrico 10px 40px 12px,
 * peso 400 y radius 30px; antes 12px 32px, peso 600 y radius 9999px. */
.umivale-banner-cta__btn {
  display: inline-block;
  border-radius: 30px;
  padding: 10px 40px 12px;
  color: var(--uv-blanco);
  font-weight: var(--uv-peso-regular);
  font-size: var(--uv-parrafo-l);
  line-height: var(--uv-parrafo-l-line-height);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.umivale-banner-cta__btn:hover {
  opacity: 0.9;
}

/* Columna de imagen (~40%) */
.umivale-banner-cta__media {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

/* Cliente (2026-09-11, Confluence "Componentes desktop" > "CTAs"): "Imagen
 * tiene la opción de ponerle una máscara de color (color superpuesto azul,
 * naranja o neutro)" -- velo semitransparente sobre la imagen, opcional
 * (atributo imagenMascara). Mismo border-radius que .umivale-banner-cta__img
 * para que el velo no se salga del recorte de la imagen. */
.umivale-banner-cta__media.has-mascara::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
}
.umivale-banner-cta__media.is-mascara-azul::after {
  background: color-mix(in srgb, var(--uv-azul) 55%, transparent);
}
.umivale-banner-cta__media.is-mascara-naranja::after {
  background: color-mix(in srgb, var(--uv-naranja) 55%, transparent);
}
.umivale-banner-cta__media.is-mascara-neutro::after {
  background: color-mix(in srgb, #171717 45%, transparent);
}

@media (min-width: 768px) {
  .umivale-banner-cta__media {
    width: 33.3333%;
  }
}

/* Original: max-width:100%, max-height:200px, object-fit:fill, radius 6px --
 * la imagen conserva su proporción natural y solo se limita por alto (medido:
 * 359.98x156.59, 299.63x200, 281.69x200 según la imagen de cada banner).
 * Cliente (2026-09-13): "la imagen lleva un overlay" -- medido en
 * umivaleactiva.es, la imagen usa la clase genérica `.img-umivale-transparent`
 * (opacity:.8), confirmado en las 6 instancias de /empresa/ y en el CTA de
 * "Estudio de la evolución de la IT". No es un ::before/::after: es opacidad
 * simple sobre la imagen, que la deja ver "velada" sobre el fondo azul. */
.umivale-banner-cta__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: fill;
  border-radius: 6px;
  opacity: 0.8;
}

.umivale-banner-cta__img--icono {
  width: auto;
  max-width: none;
  height: auto;
  object-fit: unset;
  border-radius: 0;
  filter: brightness(0) invert(1);
}

.umivale-banner-cta__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--uv-blanco) 8%, transparent);
  color: color-mix(in srgb, var(--uv-blanco) 35%, transparent);
  font-size: 13px;
  font-weight: 300;
}