/* ARUEDA Core · Tarjetas editoriales de /destinos/ y "Explora por tipo de viaje".
   Estructura REAL (confirmada en el HTML de Elementor):
   - La imagen es un FONDO CLÁSICO aplicado sobre la propia columna
     .elementor-column.arueda-card-destino (background_background:"classic").
     NO hay slideshow ni capa de imagen interna.
   - Todo el contenido (kicker, título, chips, descripción, CTA) vive dentro de
     .elementor-widget-wrap, hijo directo de la columna.
   - La descripción es un <p> directo dentro de .elementor-widget-wrap; en el
     HTML real NO lleva la clase arueda-card-descripcion.

   Por eso el overlay se pinta en .elementor-widget-wrap::before (no en la
   columna raíz) y el contenido se eleva por encima. Clases semánticas:
     - arueda-card-destino / arueda-card-viaje  (columna raíz de la tarjeta)
     - arueda-card-con-imagen                   (activa el overlay verde)
     - arueda-card-descripcion                  (compatibilidad; opcional)
   Sin JavaScript. Sin tocar gap/márgenes/columnas. */

/* ============================ COLUMNA RAÍZ ============================ */
/* La imagen de fondo la aplica Elementor sobre esta columna. Solo garantizamos
   el recorte redondeado y el contexto de posicionamiento. */
.arueda-card-destino,
.arueda-card-viaje{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background-size:cover;
  background-position:center;
}

/* ============================ WIDGET-WRAP: capa de overlay + contenido ============================ */
/* El widget-wrap agrupa TODO el contenido. Le damos contexto de posicionamiento
   y recorte. Aquí vivirán el overlay (::before, al fondo) y los hijos (encima). */
.arueda-card-destino > .elementor-widget-wrap,
.arueda-card-viaje > .elementor-widget-wrap{
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:inherit;
}

/* Overlay verde: SOLO con imagen. Se pinta al fondo del widget-wrap (z-index:0),
   sobre la imagen de la columna (que está por detrás del widget-wrap) y por
   debajo del contenido. pointer-events:none: no bloquea enlaces. */
.arueda-card-destino.arueda-card-con-imagen > .elementor-widget-wrap::before,
.arueda-card-viaje.arueda-card-con-imagen > .elementor-widget-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:rgba(23,53,39,.62);
}
/* Las tarjetas SIN imagen conservan su fondo verde y no generan overlay. */

/* Todos los hijos reales del widget-wrap (kicker, título, chips, descripción,
   CTA) por encima del overlay. */
.arueda-card-destino > .elementor-widget-wrap > *,
.arueda-card-viaje > .elementor-widget-wrap > *{
  position:relative;
  z-index:1;
}

/* Enlaces y CTA plenamente clicables por encima del overlay. */
.arueda-card-destino a,
.arueda-card-viaje a,
.arueda-card-destino .elementor-button,
.arueda-card-viaje .elementor-button{
  position:relative;
  z-index:2;
}

/* ============================ DESCRIPCIÓN EN BLANCO ROTO ============================ */
/* La descripción real es un <p> directo dentro de .elementor-widget-wrap y NO
   lleva la clase semántica. Se cubre ese <p> directo Y, por compatibilidad, la
   clase arueda-card-descripcion por si se asigna en el futuro.
   !important: justificado porque Elementor genera el color del párrafo con
   selectores de alta especificidad/atómicos (p.ej. clases e-*-base) que la
   clase semántica no puede superar, y la clase objetivo no existe en el HTML. */
.arueda-card-destino > .elementor-widget-wrap > p,
.arueda-card-viaje > .elementor-widget-wrap > p,
.arueda-card-descripcion,
.arueda-card-descripcion p,
.arueda-card-descripcion .elementor-widget-container{
  color:#F7F4EE !important;
}
.arueda-card-destino:hover > .elementor-widget-wrap > p,
.arueda-card-viaje:hover > .elementor-widget-wrap > p,
.arueda-card-descripcion:hover,
.arueda-card-descripcion:hover p{
  color:#F7F4EE !important;
}