/* Datanex Widgets — base de maquetación (se carga con cualquier widget Datanex).
   Cada widget renderiza su propia <section> con ancho y márgenes internos (.hf-wrap).
   Por eso el contenedor de Elementor que lo aloja debe ser de ancho completo,
   sin padding ni gap, aunque en el editor quede "En caja" (boxed) por defecto.
   Si en un contenedor se configura padding o ancho a mano, esos valores mandan. */
.e-con:has(.elementor-widget[class*="elementor-widget-dnx-"]){
  --content-width:100%;
  --width:100%;
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;
  --container-widget-width:100%;
}
.elementor-widget[class*="elementor-widget-dnx-"]{width:100%;max-width:100%}

/* ---------- Componentes compartidos entre widgets ---------- */
/* Ícono en caja (librería SVG propia) */
.hf-icono{width:52px;height:52px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--hf-azul);color:var(--hf-arena)}
.hf-icono svg{width:26px;height:26px}
.hf-icono--claro{background:var(--hf-marfil);color:var(--hf-azul)}
.hf-icono--oscuro{background:var(--hf-azul-2);color:var(--hf-arena)}
@media (max-width:767px){
  .hf-icono{width:46px;height:46px;border-radius:12px}
  .hf-icono svg{width:23px;height:23px}
}

/* Sección, cabecera y tipografía compartida (H2, texto introductorio) */
.hf-seccion{padding-block:var(--hf-seccion)}
.hf-fondo-marfil{background:var(--hf-marfil)}
.hf-h2{margin:0;font-size:var(--hf-h2);line-height:1.1;font-weight:800;letter-spacing:-.015em;color:var(--hf-azul)}
.hf-lead{margin:0;font-size:18px;line-height:1.65;color:var(--hf-texto-2)}
.hf-cabecera{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
@media (max-width:767px){.hf-cabecera{grid-template-columns:1fr}}

/* Enlace de texto con flecha. a.hf-link[href] gana al reset de Elementor (.elementor a{text-decoration:none}) */
a.hf-link[href],.hf-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--hf-azul);text-decoration:underline;text-decoration-color:var(--hf-arena);text-decoration-thickness:2px;text-underline-offset:4px}
.hf-link:hover{color:var(--hf-azul-2)}
.hf-link__flecha{display:inline-flex;width:16px;height:16px;transition:transform .15s}
.hf-link__flecha svg{width:16px;height:16px}
.hf-link:hover .hf-link__flecha,.hf-link:focus-visible .hf-link__flecha{transform:translateX(3px)}

/* Microinteracciones de íconos (clase en la sección: hf-anim-tinte / hf-anim-trazo).
   El elemento que dispara el efecto lleva la clase hf-anim-item. */
.hf-icono{transition:background-color .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1)}
@keyframes hf-trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (hover:hover){
  /* Tinte suave: tono vecino al color de base */
  .hf-anim-tinte .hf-anim-item:hover .hf-icono{background:var(--hf-azul-2)}
  .hf-anim-tinte .hf-anim-item:hover .hf-icono--claro{background:var(--hf-arena-suave)}
  .hf-anim-tinte .hf-anim-item:hover .hf-icono--oscuro{background:var(--hf-azul-hover,#2c4a70)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Trazo que se dibuja: una vez por cada entrada del mouse */
  .hf-anim-trazo .hf-icono svg *{stroke-dasharray:1;stroke-dashoffset:0}
  .hf-anim-trazo .hf-anim-item:hover .hf-icono svg *{animation:hf-trazo .9s cubic-bezier(.45,.05,.3,1) both}
}
/* Teclado: mismo tinte cuando el foco está dentro del elemento */
.hf-anim-tinte .hf-anim-item:focus-within .hf-icono{background:var(--hf-azul-2)}
.hf-anim-tinte .hf-anim-item:focus-within .hf-icono--claro{background:var(--hf-arena-suave)}
@media (prefers-reduced-motion:reduce){
  .hf-icono,.hf-link__flecha{transition:none}
}

/* Etiqueta sobre el H2 */
.hf-etiqueta{margin:0;font-size:15px;font-weight:600;color:var(--hf-arena-texto)}

/* Fondo azul: textos compartidos en claro */
.hf-fondo-azul{background:var(--hf-azul);color:#fff}
.hf-fondo-azul .hf-h2{color:#fff}
.hf-fondo-azul .hf-etiqueta{color:var(--hf-arena)}
.hf-fondo-azul a.hf-link[href],.hf-fondo-azul .hf-link{color:var(--hf-arena)}
.hf-fondo-azul .hf-link:hover{color:#fff}
.hf-cabecera--fila{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}