/* =====================================================================
   CIFP As Mercedes — portada.css
   ÁMBITO      : PÁXINA (só a portada / front page — Inicio)
   ENCOLADO EN : functions.php → cifp_custom_css()  [if is_front_page()]
   QUE FAI     : estilos específicos da portada. Empeza polos badges do hero.
   ACTUALIZADO : 2026-08-25
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO — overlay (2 degradados sobre a imaxe)
   Elementor só permite 1 degradado. Faise cun ::before sobre .hero-cifp
   (NON fai falta activar "Background Overlay" en Elementor). Só requisito:
     · Imaxe de fondo no container do hero.
     · Clase "hero-cifp" no container do hero.
   O contido (.e-con-inner, que é flex item) sóbese con z-index para quedar
   por riba do overlay.  ⚠ O TEXTO do hero (título/subtítulo/eyebrow) ponse
   BRANCO/claro en Elementor: sobre o overlay escuro o texto escuro non se le.
   --------------------------------------------------------------------- */
.hero-cifp{ position: relative; }
.hero-cifp::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(0,43,74,.92) 0%, rgba(0,43,74,.72) 45%, rgba(0,43,74,.35) 100%),
    linear-gradient(to top, rgba(0,43,74,.85) 0%, rgba(0,43,74,0) 40%);
}
.hero-cifp > .e-con-inner{ position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   HERO — badges (barra de datos destacados)
   Widget HTML co markup <ul class="hero__badges"> (5 <li> con <strong>).
   Texto claro sobre o hero escuro; a parte <strong> en branco; separador
   vertical entre badges. Reséanse os estilos de lista por defecto do <ul>.
   --------------------------------------------------------------------- */
.hero__badges{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 1rem 2.9rem;
  font-size: .95rem;
  color: #e8f1f8;                 /* texto claro sobre fondo escuro do hero */
}
.hero__badges li{
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.hero__badges strong{
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
/* separador vertical entre badges (todos agás o primeiro) */
.hero__badges li + li{
  padding-left: 1.4rem;
  border-left: 1px solid rgba(255, 255, 255, .25);
}

/* Ancorar os badges ao FONDO do hero: o widget vai absoluto respecto a
   .hero-cifp (relative). Como .e-con-inner é static, o ancoraxe é ao hero
   completo, non ao contido. Requisito: os badges dentro do container do hero. */
.hero-cifp .elementor-widget:has(.hero__badges){
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6rem;
  z-index: 2;
}

/* Tablet (768–1024): badges centrados, letra e gap menores, SEN divisores
   (ao envolverse, os bordes verticais quedan como raias soltas). */
@media (min-width: 768px) and (max-width: 1024px){
  .hero__badges{
    justify-content: center;
    gap: .2rem 1.3rem;
    font-size: .8rem;
  }
  .hero__badges strong{ font-size: .82rem; }
  .hero__badges li + li{
    padding-left: 0;
    border-left: none;
  }
}

/* Móbil: badges compactos e CENTRADOS, seguen ancorados ao fondo do hero
   (coma en PC, para que non floten cun oco debaixo), letra MOITO máis
   pequena, e sen separadores verticais (rompen ao envolver as liñas). */
@media (max-width: 767px){
  .hero__badges{
    justify-content: center;
    gap: 0.1rem 1rem;
    font-size: .72rem;
  }
  .hero__badges strong{ font-size: .8rem; }
  .hero__badges li + li{
    padding-left: 0;
    border-left: none;
  }
}

/* ---------------------------------------------------------------------
   ACCESOS DIRECTOS — tarxetas .quick-card  (:hover)
   Clase "quick-card" no CONTAINER (o <a>) de cada tarxeta.
   O estado BASE (fondo, borde, sombra, icona) ponse en Elementor. Aquí só o
   :hover: sombra máis forte + borde azul-25 + icona con fondo azul e glifo
   branco. (Require que a tarxeta teña un borde base en Elementor para que o
   cambio de border-color se vexa.)
   --------------------------------------------------------------------- */
.quick-card{
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.quick-card .elementor-icon{ transition: background-color .25s ease; }
.quick-card .elementor-icon svg{ transition: stroke .25s ease; }

.quick-card:hover{
  /* ⇦ FORZA DA SOMBRA EN HOVER (axústase aquí) */
  box-shadow: 0 14px 34px rgba(0, 43, 74, .12) !important;
  border-color: var(--e-global-color-cmazul25, #BFDEF0) !important;
}
/* icona: fondo azul + glifo (lucide, stroke) branco */
.quick-card:hover .elementor-icon{
  background-color: var(--e-global-color-primary, #007BC4) !important;
}
.quick-card:hover .elementor-icon svg,
.quick-card:hover .elementor-icon svg path{
  stroke: #fff !important;
}