/* ==========================================================================
   BRÚJULA EMPRESARIAL — Estilos personalizados del tema hijo
   --------------------------------------------------------------------------
   Reglas escritas SOLO para lo que los ajustes de los widgets de Elementor no
   pueden expresar: máscaras de pétalo, degradados de varias paradas, filetes
   con pseudoelementos, el pulso del botón de WhatsApp y algunos ajustes de
   rejilla. Todo lo demás (colores, tipografías, espaciados, bordes) se
   configura en cada widget y en los estilos globales del tema (Kit).

   Cada bloque indica el ÁREA / SECCIÓN a la que pertenece y la clase que
   debe llevar el widget o contenedor de Elementor.
   ========================================================================== */

/* ==========================================================================
   00 · VARIABLES DE MARCA (Brand Guide pág. 6 y 7)
   --------------------------------------------------------------------------
   La paleta y las tipografías también están dadas de alta como colores y
   fuentes GLOBALES del tema en Elementor > Ajustes del sitio, que es donde el
   cliente las cambia. Estas variables son la copia que usan las reglas de esta
   hoja; si se edita un color global, actualizar aquí el valor equivalente.
   ========================================================================== */
:root{
  --brj-azul:#095491;
  --brj-tinta:#242422;
  --brj-hueso:#F6F5F0;
  --brj-celeste:#869CB0;
  --brj-arena:#D4AA8B;
  --brj-gris:#ECECEC;
  --brj-azul-900:#052F51;
  --brj-azul-800:#073F6B;
  --brj-azul-100:#E7EFF6;
  --brj-texto-suave:#55554F;
  --brj-texto-tenue:#7A7A74;

  --brj-font-base:'Open Sauce One','Inter','Helvetica Neue',Arial,sans-serif;
  --brj-font-slab:'Roboto Slab',Georgia,'Times New Roman',serif;

  --brj-pad-x:clamp(1.25rem,5vw,4rem);
  --brj-petalo:140px 0 140px 0;
  --brj-petalo-inv:0 140px 0 140px;
  --brj-sombra:0 24px 60px -28px rgba(9,84,145,.45);
  --brj-ease:cubic-bezier(.25,.46,.45,.94);
  --brj-barra-h:43px;
  --brj-header-h:92px;
  --brj-cabecera-h:calc(var(--brj-header-h) + var(--brj-barra-h));
}
@media (max-width:960px){
  :root{ --brj-petalo:100px 0 100px 0; --brj-petalo-inv:0 100px 0 100px;
         --brj-header-h:74px; --brj-barra-h:40px; }
}
@media (max-width:700px){
  :root{ --brj-petalo:80px 0 80px 0; --brj-petalo-inv:0 80px 0 80px; }
}

/* La tipográfica principal de marca (Open Sauce One) no está en Google Fonts.
   Se declara primero por si el cliente la aloja; Inter, que sí carga el Kit,
   queda como sustituta de proporciones equivalentes. */
body,button,input,select,textarea{ font-family:var(--brj-font-base); }

html{ scroll-padding-top:var(--brj-cabecera-h); }
body{ overflow-x:hidden; }

/* ==========================================================================
   01 · CONTENEDOR DE SECCIÓN · clase: brj-seccion
   Reproduce el `.contenedor` de la maqueta: 1280 px con respiro lateral.
   ========================================================================== */
.brj-seccion > .e-con-inner{ padding-inline:var(--brj-pad-x); }
.brj-seccion.brj-seccion--sangre > .e-con-inner{ padding-inline:0; }

/* Forma decorativa en pétalo de las franjas azules · clase: brj-azul-profundo */
.brj-azul-profundo{ position:relative; overflow:hidden; }
.brj-azul-profundo::before{
  content:""; position:absolute; right:-220px; top:-180px; width:620px; height:620px;
  border-radius:50% 0 50% 0; background:rgba(255,255,255,.04); pointer-events:none; }
.brj-azul-profundo > .e-con-inner{ position:relative; z-index:1; }

/* ==========================================================================
   02 · TÍTULO DE SECCIÓN CON FILETE · clase: brj-titulo-seccion
   El filete horizontal que acompaña a cada H2 (maqueta: .titulo-seccion::after)
   ========================================================================== */
.brj-titulo-seccion{ display:flex; align-items:center; gap:1.25rem; width:100%; }
.brj-titulo-seccion .elementor-heading-title{ flex:0 1 auto; }
.brj-titulo-seccion::after{
  content:""; flex:1 1 2rem; height:1px; background:var(--brj-celeste); opacity:.55; }
.brj-titulo-seccion.brj-titulo-seccion--claro::after{ background:rgba(255,255,255,.35); opacity:1; }

/* Filete corto en arena sobre un título · clase: brj-regla */
.brj-regla{ width:84px; height:3px; background:var(--brj-arena); }
.brj-regla--corta{ width:44px; height:2px; }

/* Rótulo tipo versalita · clase: brj-rotulo
   Peso 400 e interlineado 1.7, como los rótulos de la maqueta (antes 500).
   Cada widget lleva además su tipografía en Elementor; esto es el valor base. */
.brj-rotulo .elementor-heading-title,
.brj-rotulo{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brj-celeste); font-weight:400; line-height:1.7; }

/* ==========================================================================
   03 · CABECERA · plantilla «Header ES»
   ========================================================================== */
/* Barra superior · clase: brj-barra-superior */
.brj-barra-superior{ font-size:.82rem; }
.brj-barra-superior .brj-barra-datos{ color:rgba(255,255,255,.85); }
.brj-barra-superior .brj-barra-datos p{ margin:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:.35rem 1.8rem; line-height:1.5; }
.brj-barra-superior .brj-barra-datos a{ color:inherit; text-decoration:none; }
.brj-barra-superior .brj-barra-datos a:hover{ color:#fff; }
@media (max-width:960px){ .brj-barra-superior .brj-barra-datos .brj-oculta-movil{ display:none; } }
@media (max-width:700px){
  .brj-barra-superior .brj-barra-datos{ display:none; }
  .brj-barra-superior > .e-con-inner{ justify-content:center !important; }
  .brj-barra-superior .brj-redes .elementor-social-icons-wrapper{ justify-content:center; }
}

/* Iconos de la barra · clase: brj-redes. Correo y blog, como .redes de la
   maqueta: caja de 32 px con borde claro; al pasar el cursor, fondo y borde
   blancos, icono azul y sube 2 px (iconos, colores, tamaño y relleno van en
   el widget). El widget y la celda del icono son flex: la rejilla va en línea
   y la línea base le sumaba 1.4 px a la barra (44.6 px en vez de 43.2). */
.brj-redes.elementor-widget-social-icons,
.brj-redes .elementor-grid-item{ display:flex; }
.brj-redes .elementor-social-icon{ border:1px solid rgba(255,255,255,.22);
  transition:background-color .25s, border-color .25s, transform .25s; }
.brj-redes .elementor-social-icon:hover{ border-color:#fff; transform:translateY(-2px); }
.brj-redes .elementor-social-icon svg{ transition:fill .25s; }

/* Cabecera blanca · clase: brj-header */
.brj-header{ border-bottom:1px solid var(--brj-gris); }
.brj-header .brj-logo img{ width:clamp(168px,17vw,220px); height:auto; }
/* Botón de la cabecera en una sola línea, como .btn */
.brj-header-cta .elementor-button{ white-space:nowrap; }

/* Menú principal · clase: brj-nav (maqueta: .nav-principal)
   Tipografía, colores, separaciones y rellenos van en el widget. Aquí sólo lo
   que el widget no permite. */
.brj-nav .elementor-nav-menu--main .elementor-item{ white-space:nowrap; }
/* El CTA oculto es el último elemento de la lista: el último enlace visible
   no lleva la media separación a su derecha. */
.brj-nav .elementor-nav-menu--main .elementor-nav-menu > li:nth-last-child(2) > a{ margin-inline-end:0; }
/* Subrayado de .nav-principal a::after: crece desde la izquierda de 0 al
   100 % en .3 s. Los punteros de Elementor sólo entran con fundido, desde la
   derecha o desde el centro: el widget queda con «Subrayado» sin animación y
   el crecimiento va aquí. */
.brj-nav .elementor-nav-menu--main.e--pointer-underline .elementor-item::after{
  left:0; right:auto; transition:width .3s var(--brj-ease); }
.brj-nav .elementor-nav-menu--main.e--pointer-underline .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::after{
  width:0; opacity:1; }
/* Entre 1101 y 1280 px el menú se aprieta como en la maqueta (.86rem, 1rem
   entre enlaces, 1.9rem hasta el botón y botón .84rem): Elementor no tiene un
   punto de corte ahí (el siguiente, 1100 px, ya es la hamburguesa). */
@media (min-width:1101px) and (max-width:1280px){
  .brj-cabecera .brj-header .brj-nav.elementor-widget-nav-menu{ --e-nav-menu-horizontal-menu-item-margin:calc(1rem / 2); }
  .brj-cabecera .brj-header .brj-nav .elementor-nav-menu--main.e--pointer-underline .elementor-item{ font-size:.86rem; }
  .brj-cabecera .brj-header .brj-header__derecha.e-con{ --gap:0px 1.9rem; --column-gap:1.9rem; }
  .brj-cabecera .brj-header .brj-header-cta.elementor-widget-button .elementor-button{ font-size:.84rem; padding-inline:1.05rem; }
}

/* Botón «Agendar una reunión» sólo dentro del panel, como .nav-principal .btn.
   El widget aplica a los enlaces del panel su tipografía y colores con peso
   0,5,0: el selector repite la clase para ganarle. */
.brj-nav .elementor-nav-menu--main .brj-solo-movil{ display:none; }
.brj-nav .elementor-nav-menu--dropdown .brj-solo-movil{ padding-top:1.2rem; }
.brj-nav .elementor-nav-menu--dropdown .brj-solo-movil > a.elementor-item.elementor-item{
  display:flex; align-items:center; justify-content:center; padding:1rem 1.5rem;
  border:1px solid var(--brj-azul); background:var(--brj-azul); color:#fff;
  font-size:.95rem; font-weight:600; letter-spacing:.02em; line-height:1;
  transition:transform .25s var(--brj-ease), background-color .25s var(--brj-ease), border-color .25s var(--brj-ease); }
.brj-nav .elementor-nav-menu--dropdown .brj-solo-movil > a.elementor-item.elementor-item:hover,
.brj-nav .elementor-nav-menu--dropdown .brj-solo-movil > a.elementor-item.elementor-item:focus,
.brj-nav .elementor-nav-menu--dropdown .brj-solo-movil > a.elementor-item.elementor-item.elementor-item-active{
  background:var(--brj-azul-900); border-color:var(--brj-azul-900); color:#fff; transform:translateY(-2px); }

/* Hamburguesa, como .hamburguesa: caja de 46 px con borde gris y tres líneas
   que se cruzan en una X al abrir (.3 s; la del centro se desvanece en .2 s).
   El widget sólo cambia un icono por otro: se ocultan sus SVG y las líneas
   se dibujan con pseudoelementos y un degradado. */
@property --brj-linea-central{ syntax:'<color>'; inherits:false; initial-value:#242422; }
.brj-nav .elementor-menu-toggle{ margin-inline-start:auto; flex:0 0 auto; position:relative;
  border:1px solid var(--brj-gris); border-radius:0; width:46px; height:46px; padding:0;
  justify-content:center;
  background:linear-gradient(var(--brj-linea-central), var(--brj-linea-central)) center / 20px 2px no-repeat;
  transition:--brj-linea-central .2s; }
.brj-nav .elementor-menu-toggle svg{ display:none; }
.brj-nav .elementor-menu-toggle::before,
.brj-nav .elementor-menu-toggle::after{ content:""; position:absolute; left:50%; top:50%;
  width:20px; height:2px; margin:-1px 0 0 -10px; background:var(--brj-tinta); transition:transform .3s; }
.brj-nav .elementor-menu-toggle::before{ transform:translateY(-6px) rotate(0); }
.brj-nav .elementor-menu-toggle::after{ transform:translateY(6px) rotate(0); }
.brj-nav .elementor-menu-toggle.elementor-active{ --brj-linea-central:transparent; }
.brj-nav .elementor-menu-toggle.elementor-active::before{ transform:translateY(0) rotate(45deg); }
.brj-nav .elementor-menu-toggle.elementor-active::after{ transform:translateY(0) rotate(-45deg); }

/* Panel desplegable (≤ 1100 px), como .nav-principal en móvil: arranca justo
   bajo la cabecera (el widget lo pone bajo la hamburguesa, 10 px más abajo),
   baja deslizándose en .35 s en lugar de desplegarse, y los enlaces van
   alineados al contenedor con filetes entre ellos (el relleno de cada enlace,
   la letra y los filetes van en el widget). */
/* Arranque del panel: la maqueta lo fija en --cabecera-h (43+92 / 40+74 px). Su
   barra mide 43.2, así que en ≤ 960 px monta 3 px sobre la cabecera: se replica.
   Medido desde la hamburguesa (46 px, centrada en la cabecera de 92/74 px). */
.brj-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{
  margin-top:22.8px;
  box-shadow:0 24px 40px -24px rgba(0,0,0,.3); border-bottom:1px solid var(--brj-gris);
  transition:transform .35s var(--brj-ease); }
/* Cerrado: fuera de la vista hacia arriba, con alto 0 y sin filete (una caja
   sin alto no ensancha la página antes de que el widget la estire a todo el
   ancho; con el filete medía 1 px y dejaba scroll horizontal). Al cerrar, alto
   y filete vuelven a 0 después de los .35 s de la subida. */
.brj-nav.elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container{
  transform:translateY(-140%); border-bottom-width:0;
  transition:transform .35s var(--brj-ease), max-height 0s .35s, border-bottom-width 0s .35s; }
.brj-nav.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
  transform:none; transition:transform .35s var(--brj-ease), max-height 0s, border-bottom-width 0s; }
.brj-nav .elementor-nav-menu--dropdown > ul{ padding:.5rem var(--brj-pad-x) 1.5rem; }
@media (max-width:960px){
  .brj-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{ margin-top:10.8px; } }
.brj-nav .elementor-nav-menu--dropdown a.elementor-item{ transition:none; }
/* Interlineado 1.7 de los enlaces del panel (59 px de alto, como la maqueta): la
   tipografía del panel en el widget no trae interlineado y hereda el «normal»
   del menú horizontal. Pesa 0,5,2 para ganar a la del widget (0,5,0). */
.brj-cabecera .brj-nav .elementor-nav-menu--dropdown li:not(.brj-solo-movil) > a.elementor-item{ line-height:1.7; }

/* La cabecera fija no puede tapar el contenido inicial: el «sticky» de
   Elementor deja un espaciador, y aquí se asegura que el ancla y el z-index
   queden por encima de todo el contenido de la página. */
.brj-cabecera{ z-index:900; }
.brj-cabecera.elementor-sticky--effects{ box-shadow:0 10px 30px -20px rgba(0,0,0,.35); }

/* ==========================================================================
   04 · HOME · HERO (widget Diapositivas) · clase: brj-hero
   La alineación del texto con el contenedor de 1280 px (Relleno con unidad
   personalizada), el tamaño fluido del titular y los espaciados se fijan en
   los ajustes del widget. Aquí sólo va lo que el widget no puede expresar.
   ========================================================================== */
.brj-hero .elementor-slides .swiper-slide{
  height:calc(100svh - var(--brj-cabecera-h)) !important; min-height:560px !important; }
.brj-hero .swiper-slide-contents{ width:100%; max-width:min(660px,100%); }

/* Degradado azul común a las tres escenas */
.brj-hero .elementor-background-overlay{
  background-image:linear-gradient(90deg,
    rgba(5,47,81,.94) 0%, rgba(5,47,81,.86) 34%, rgba(5,47,81,.45) 58%,
    rgba(5,47,81,.14) 84%, rgba(5,47,81,.06) 100%) !important;
  background-color:transparent !important; opacity:1 !important; }

/* Escena uno en blanco y negro, como en la maqueta */
.brj-hero .elementor-repeater-item-brjhero1 .swiper-slide-bg{ filter:grayscale(1) contrast(1.05); }

/* Filete en arena sobre el titular. Va en el bloque de contenido y no en el
   titular para poder entrar por separado, antes que el título. */
.brj-hero .swiper-slide-contents::before{
  content:""; display:block; width:84px; height:3px;
  background:var(--brj-arena); margin-bottom:1.6rem; }
.brj-hero .elementor-slide-heading{ margin-top:0; color:#fff; }

/* Botón claro del hero */
.brj-hero .elementor-slide-button{ border:1px solid #fff; border-radius:0;
  padding:1rem 2.1rem; line-height:1; font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform .25s var(--brj-ease), background-color .25s var(--brj-ease), color .25s var(--brj-ease); }
.brj-hero .elementor-slide-button:hover{ transform:translateY(-2px); }

/* Bajada en Roboto Slab + párrafo, dentro de la descripción de la diapositiva */
.brj-hero .brj-hero__linea{ display:block; font-family:var(--brj-font-slab);
  font-size:clamp(1.05rem,.95rem + .7vw,1.6rem); line-height:1.4; color:var(--brj-arena);
  margin-bottom:1.1rem; }
.brj-hero .brj-hero__texto{ display:block; color:rgba(255,255,255,.9);
  font-size:clamp(1rem,.97rem + .25vw,1.15rem); line-height:1.7; max-width:56ch; }

/* Indicadores: barras, no puntos (grosor y separación en los ajustes del widget) */
.brj-hero .swiper-pagination-bullet{ width:52px !important; height:3px !important;
  border-radius:0 !important; opacity:1; transition:background-color .35s var(--brj-ease); }
.brj-hero .swiper-pagination{ bottom:1.9rem !important; }

/* Entrada escalonada del contenido de cada escena (maqueta: .hero.activo .anima):
   filete .15 s, titular .3 s, bajada .45 s, párrafo .6 s y botón .75 s.
   La animación propia del widget mueve todo el bloque junto y sólo al terminar
   la transición, por eso allí está en «Ninguna» y cada pieza entra aquí en
   cuanto su escena se vuelve activa. Relleno «backwards» (no «both»): al
   terminar, el botón recupera su transform y el hover sigue funcionando. */
@keyframes brj-hero-entrada{
  from{ opacity:0; transform:translate3d(0,60px,0) }
  to{ opacity:1; transform:none } }
.brj-hero .swiper-slide:not(.swiper-slide-active) .swiper-slide-contents::before,
.brj-hero .swiper-slide:not(.swiper-slide-active) .elementor-slide-heading,
.brj-hero .swiper-slide:not(.swiper-slide-active) .brj-hero__linea,
.brj-hero .swiper-slide:not(.swiper-slide-active) .brj-hero__texto,
.brj-hero .swiper-slide:not(.swiper-slide-active) .elementor-slide-button{ opacity:0; }
.brj-hero .swiper-slide-active .swiper-slide-contents::before,
.brj-hero .swiper-slide-active .elementor-slide-heading,
.brj-hero .swiper-slide-active .brj-hero__linea,
.brj-hero .swiper-slide-active .brj-hero__texto,
.brj-hero .swiper-slide-active .elementor-slide-button{
  animation:brj-hero-entrada 1s var(--brj-ease) backwards; }
.brj-hero .swiper-slide-active .swiper-slide-contents::before{ animation-delay:.15s; }
.brj-hero .swiper-slide-active .elementor-slide-heading{ animation-delay:.3s; }
.brj-hero .swiper-slide-active .brj-hero__linea{ animation-delay:.45s; }
.brj-hero .swiper-slide-active .brj-hero__texto{ animation-delay:.6s; }
.brj-hero .swiper-slide-active .elementor-slide-button{ animation-delay:.75s; }

@media (max-width:960px){
  /* En móvil el contenido baja y el degradado pasa a vertical: el texto no
     cruza ningún rostro en ninguna medida de pantalla. */
  .brj-hero .elementor-slides .swiper-slide{ align-items:flex-end; }
  .brj-hero .swiper-slide-inner{ align-items:flex-end !important;
    padding-top:clamp(3rem,6vh,4rem) !important;
    padding-bottom:clamp(4.5rem,10vh,6.5rem) !important; }
}
@media (max-width:700px){
  .brj-hero .elementor-background-overlay{
    background-image:linear-gradient(180deg,
      rgba(5,47,81,.68) 0%, rgba(5,47,81,.84) 55%, rgba(5,47,81,.94) 100%) !important; }
  .brj-hero .brj-hero__texto{ display:none; }
  .brj-hero .brj-hero__linea{ margin-bottom:0; }
  .brj-hero .swiper-pagination-bullet{ width:38px !important; }
  /* Recorte vertical propio de cada escena (clase de cada diapositiva) */
  .brj-hero .elementor-repeater-item-brjhero1 .swiper-slide-bg{
    background-image:url(/wp-content/uploads/2026/09/hero-inteligencia-empresarial-movil.webp) !important; }
  .brj-hero .elementor-repeater-item-brjhero2 .swiper-slide-bg{
    background-image:url(/wp-content/uploads/2026/09/hero-planeacion-estrategica-movil.webp) !important; }
  .brj-hero .elementor-repeater-item-brjhero3 .swiper-slide-bg{
    background-image:url(/wp-content/uploads/2026/09/hero-trascender-con-usted-movil.webp) !important; }
}
@media (prefers-reduced-motion:reduce){
  .brj-hero .swiper-slide-active .swiper-slide-contents::before,
  .brj-hero .swiper-slide-active .elementor-slide-heading,
  .brj-hero .swiper-slide-active .brj-hero__linea,
  .brj-hero .swiper-slide-active .brj-hero__texto,
  .brj-hero .swiper-slide-active .elementor-slide-button{ animation:none; }
}
/* ==========================================================================
   05 · FOTOS EN PÉTALO (recurso gráfico de marca, moodboard pág. 3)
   clases: brj-petalo · brj-petalo-inv
   ========================================================================== */
.brj-petalo img,.brj-petalo .elementor-widget-container{ border-radius:var(--brj-petalo); overflow:hidden; }
.brj-petalo-inv img,.brj-petalo-inv .elementor-widget-container{ border-radius:var(--brj-petalo-inv); overflow:hidden; }
/* Sin hover aquí: al escalar una <img> con el radio puesto crecía todo el
   recorte. Las fotos con zoom usan un contenedor brj-marco + brj-foto-zoom
   (ver más abajo) y la sombra se pone en ese contenedor desde Elementor. */

/* Foto rotulada («Gestión General», «Plan de Negocios») · clase: brj-foto-rotulada
   La maqueta recorta estas dos fotografías en 3/4. */
.brj-foto-rotulada img{ aspect-ratio:3/4; object-fit:cover; width:100%; }
.brj-foto-rotulada figcaption.widget-image-caption{
  margin-top:.9rem; font-weight:600; font-size:1rem; text-align:center;
  color:var(--brj-azul); font-style:normal; }

/* Marco en pétalo que recorta la fotografía · clase: brj-marco
   Es un contenedor de Elementor con «Radio del borde» y «Desbordamiento:
   oculto» en sus ajustes: la foto crece DENTRO del marco y el marco no se
   mueve. El disparador del hover lleva la clase brj-foto-zoom (el propio
   marco, o la columna que agrupa marco + pie de foto). */
.brj-marco{ isolation:isolate; } /* Safari: conserva el recorte durante el zoom */
.brj-marco img{ display:block; width:100%; }
.brj-foto-zoom img{ transition:transform .7s var(--brj-ease); }
.brj-foto-zoom:hover img{ transform:scale(1.05); }
/* Variante .8 s (maqueta: .servicio-fila__figura y .mv__figura) · clase: brj-foto-zoom--lento */
.brj-foto-zoom--lento img{ transition-duration:.8s; }
/* Proporción del marco, como en la maqueta (3/4 fotos rotuladas, 4/5 Visión,
   Servicios y Sectores, 11/13 Cómo acceder, 1/1 entrada destacada del blog). El marco tiene alto propio aunque la foto aún no haya
   cargado (carga diferida): sin esto el marco medía 0 px en móvil y la foto
   nunca entraba en pantalla para cargarse. La foto lo llena recortada. */
.brj-marco--3x4{ aspect-ratio:3/4; }
.brj-marco--4x5{ aspect-ratio:4/5; }
.brj-marco--11x13{ aspect-ratio:11/13; }
.brj-marco--1x1{ aspect-ratio:1/1; }
.brj-marco[class*="brj-marco--"] > .elementor-widget,
.brj-marco[class*="brj-marco--"] > .elementor-widget a{ display:block; height:100%; }
.brj-marco[class*="brj-marco--"] img{ height:100%; object-fit:cover; }
/* ==========================================================================
   06 · HOME · QUIÉNES SOMOS
   ========================================================================== */
/* Caja «Nuestro principal enfoque» · clase: brj-enfoque */
.brj-enfoque .brj-enfoque__lema .elementor-heading-title{
  font-family:var(--brj-font-slab); font-weight:500; letter-spacing:.01em;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); line-height:1.7; color:#fff; }

/* Cifras · clase: brj-datos / brj-dato */
.brj-datos{ border-top:1px solid var(--brj-gris); }
.brj-azul-profundo .brj-datos,.brj-datos.brj-datos--claro{ border-top-color:rgba(255,255,255,.16); }
.brj-dato .brj-dato__cifra .elementor-heading-title{
  font-family:var(--brj-font-slab); line-height:1;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem); color:var(--brj-azul); }
.brj-dato .brj-dato__pie{ font-size:.84rem; line-height:1.45; color:#5C5C58; }

/* ==========================================================================
   07 · HOME · SERVICIOS PROFESIONALES (widget Pestañas, tipo vertical)
   clase: brj-indice-servicios
   Índice editorial de la maqueta: la columna izquierda lista los seis
   servicios y despliega la descripción del activo; la derecha muestra la
   fotografía del servicio, que acompaña el scroll.
   · Escritorio (≥ 961 px): la pestaña se abre al pasar el cursor
     (assets/js/brujula.js) y las fotos se funden entre sí.
   · ≤ 960 px: la foto queda ARRIBA de la lista, siempre visible, y cambia
     con el mismo fundido al tocar cada servicio. El rótulo de móvil del
     widget no se usa: la lista de escritorio sirve en todas las medidas.
   ========================================================================== */
.brj-indice-servicios .elementor-tabs{ gap:clamp(2rem,5vw,4.5rem); align-items:flex-start; }
.brj-indice-servicios .elementor-tabs-wrapper{ border-top:1px solid var(--brj-gris); }
.brj-indice-servicios .elementor-tab-mobile-title{ display:none !important; }

/* Rótulo: filete + nombre + descripción desplegable */
.brj-indice-servicios .elementor-tab-desktop-title{
  display:flex; align-items:flex-start; gap:1.2rem;
  padding:1.5rem 0 !important; border:0 !important;
  border-bottom:1px solid var(--brj-gris) !important;
  transition:color .3s var(--brj-ease); }
.brj-indice-servicios.elementor-widget .elementor-tabs .elementor-tab-desktop-title:hover{ color:var(--brj-azul); }
/* La marca ocupa siempre 44 px (la columna fija de la maqueta): el nombre no
   se desplaza al activarse, sólo crece el filete dibujado dentro. */
.brj-srv__marca{ position:relative; flex:0 0 44px; height:2px; margin-top:.62em; }
.brj-srv__marca::before{ content:""; position:absolute; left:0; top:0; width:26px; height:2px;
  background:var(--brj-celeste);
  transition:width .35s var(--brj-ease), background-color .3s var(--brj-ease); }
.elementor-active .brj-srv__marca::before{ width:44px; background:var(--brj-arena); }
.brj-srv__cuerpo{ flex:1 1 auto; min-width:0; }
.brj-srv__nombre{ display:block; font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  font-weight:700; letter-spacing:-.015em; line-height:1.2; }
/* La descripción arranca a 3.35rem del borde, como el párrafo de la maqueta.
   El desplazamiento va en este contenedor y no en el texto: el recorte
   (.brj-srv__clip, overflow oculto) cortaba lo que quedaba fuera. */
.brj-srv__desc{ display:grid; grid-template-rows:0fr;
  margin-left:calc(3.35rem - 44px - 1.2rem);
  transition:grid-template-rows .5s var(--brj-ease); }
.elementor-active .brj-srv__desc{ grid-template-rows:1fr; }
.brj-srv__clip{ overflow:hidden; }
.brj-srv__texto{ display:block; padding:1.5rem 0 .2rem;
  max-width:calc(56ch - 3.35rem);
  font-size:.96rem; font-weight:400; line-height:1.7; letter-spacing:normal;
  color:var(--brj-texto-suave);
  text-align:justify; text-justify:inter-word; hyphens:manual; }

/* Marco de la fotografía: pétalo con sombra. Las seis fotos quedan apiladas;
   la activa aparece con un fundido de .8 s y un acercamiento lento de 6 s. */
.brj-indice-servicios .elementor-tabs-content-wrapper{
  position:sticky; top:calc(var(--brj-cabecera-h) + 2rem);
  aspect-ratio:4/5; border:0 !important; border-radius:var(--brj-petalo);
  overflow:hidden; box-shadow:var(--brj-sombra); isolation:isolate; }
.brj-indice-servicios .elementor-tab-content{
  display:block !important; position:absolute; inset:0;
  padding:0 !important; border:0 !important;
  opacity:0; transition:opacity .8s var(--brj-ease); }
.brj-indice-servicios .elementor-tab-content.elementor-active{ opacity:1; }
.brj-indice-servicios .brj-servicio-foto{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 6s linear; }
.brj-indice-servicios .elementor-tab-content.elementor-active .brj-servicio-foto{ transform:scale(1.08); }

@media (max-width:960px){
  .brj-indice-servicios .elementor-tabs{ display:flex; flex-direction:column; align-items:stretch; }
  .brj-indice-servicios .elementor-tabs-wrapper{ display:block !important; width:100% !important; order:2; }
  .brj-indice-servicios .elementor-tabs-content-wrapper{ order:1; position:relative; top:auto;
    width:100%; max-width:460px; margin-inline:auto; }
}
@media (max-width:700px){
  .brj-srv__desc{ margin-left:calc(-44px - 1.2rem); }
  .brj-srv__texto{ max-width:56ch; }
}
@media (max-width:560px){
  .brj-srv__texto{ text-align:left; }
}
/* ==========================================================================
   08 · HOME · DECLARACIÓN «Inteligencia Empresarial» · clase: brj-declaracion
   ========================================================================== */
.brj-declaracion .brj-declaracion__frase .elementor-heading-title{
  font-family:var(--brj-font-slab); font-weight:400; line-height:1.35;
  font-size:clamp(1.4rem,1.1rem + 1.6vw,2.4rem); color:var(--brj-azul);
  max-width:26ch; margin-inline:auto; text-wrap:balance; }

/* ==========================================================================
   09 · SECTORES (home, sobre azul) · clase: brj-sector
   ========================================================================== */
.brj-sector{ border-top:1px solid rgba(255,255,255,.16); }
.brj-sector .brj-sector__titulo .elementor-heading-title{ font-size:1.2rem; line-height:1.12; color:#fff; }
.brj-sector .brj-sector__texto{ font-size:.92rem; color:rgba(255,255,255,.72); }
/* Primera fila en 2 columnas: sin filo. El relleno superior (0; 26 px en móvil,
   donde vuelve el filo) va en Elementor en cada contenedor. */
.brj-sector--sin-filo{ border-top:0 !important; }
@media (max-width:700px){
  .brj-sector--sin-filo{ border-top:1px solid rgba(255,255,255,.16) !important; }
  .brj-sectores-lista > .e-con:first-child .brj-sector--sin-filo{ border-top:0 !important; }
}

/* ==========================================================================
   10 · PASOS DEL PROCESO · clases: brj-paso, brj-pasos
   Marca cuadrada azul en lugar de numeración (decisión de la maqueta).
   ========================================================================== */
.brj-paso{ position:relative; padding-left:2.1rem; border-bottom:1px solid var(--brj-gris); }
.brj-paso::before{ content:""; position:absolute; left:0; top:.55rem;
  width:12px; height:12px; background:var(--brj-azul); }
.brj-paso--ultimo{ border-bottom:0; }
.brj-paso .brj-paso__titulo .elementor-heading-title{ font-size:1rem; font-weight:700; }
.brj-paso .brj-paso__texto{ font-size:.93rem; color:var(--brj-texto-suave); }
.brj-azul-profundo .brj-paso{ border-bottom-color:rgba(255,255,255,.16); }
.brj-azul-profundo .brj-paso::before{ background:var(--brj-arena); }
.brj-azul-profundo .brj-paso .brj-paso__titulo .elementor-heading-title{ color:#fff; }
.brj-azul-profundo .brj-paso .brj-paso__texto{ color:rgba(255,255,255,.72); }

/* Nota «Acompañamiento» superpuesta a la foto · clase: brj-nota-flotante */
.brj-nota-flotante{ background:var(--brj-tinta); color:#fff; }
.brj-nota-flotante .brj-nota-flotante__titulo .elementor-heading-title{
  font-family:var(--brj-font-slab); color:var(--brj-arena); font-size:1rem; font-weight:500; }
.brj-nota-flotante .brj-nota-flotante__texto{ font-size:.9rem; line-height:1.55; color:#fff; }
@media (max-width:700px){
  .brj-nota-flotante{ position:static !important; margin-top:1.25rem !important;
    max-width:none !important; inset:auto !important; }
}

/* Enlace de correo subrayado · clase: brj-correo */
.brj-correo a,.brj-correo{ font-weight:600; color:var(--brj-azul); }
.brj-correo a{ border-bottom:1px solid var(--brj-celeste); padding-bottom:2px; text-decoration:none; }
.brj-correo a:hover{ border-color:var(--brj-azul); }

/* ==========================================================================
   11 · PIE · plantilla «Footer ES»
   ========================================================================== */
.brj-footer{ font-size:.92rem; }
.brj-footer .brj-footer__lema .elementor-heading-title{
  font-family:var(--brj-font-slab); font-size:1.05rem; font-weight:400;
  color:rgba(255,255,255,.82); max-width:34ch; }
.brj-footer .brj-footer__datos{ color:rgba(255,255,255,.6); line-height:1.75; }
.brj-footer .brj-footer__datos a{ color:inherit; text-decoration:none; }
.brj-footer .brj-footer__datos a:hover{ color:#fff; }
.brj-footer .brj-footer__legal{ border-top:1px solid rgba(255,255,255,.12); }
.brj-footer .brj-footer__copy{ color:rgba(255,255,255,.6); font-size:.82rem; }

/* El menú del pie NUNCA se compacta: siempre horizontal, ajustando líneas. */
.brj-nav-footer .elementor-nav-menu--main{ display:flex !important; flex-wrap:wrap; }
.brj-nav-footer .elementor-nav-menu--main > ul,
.brj-nav-footer ul.elementor-nav-menu{ display:flex !important; flex-wrap:wrap !important;
  justify-content:flex-end; row-gap:.4rem; }
.brj-nav-footer .elementor-menu-toggle,
.brj-nav-footer .elementor-nav-menu--dropdown{ display:none !important; }
.brj-nav-footer .elementor-nav-menu--main .elementor-item{ white-space:nowrap; }
@media (max-width:1100px){
  .brj-nav-footer ul.elementor-nav-menu{ justify-content:flex-start; }
}

/* ==========================================================================
   12 · BOTÓN FLOTANTE DE CONTACTO (correo) · plantilla «Footer ES»
   Maqueta: .contacto-flotante. Contenedor brj-contacto-flotante con un widget
   Icono (sobre, enlace mailto, colores y tamaño en Elementor) y un Título con
   el globo (texto, fondo, relleno y sombra en Elementor; oculto en móvil).
   Aquí va lo que Elementor no permite: la posición fija encima del botón
   «Volver arriba» del tema (52 px de alto a 24/18 px del borde, corte a
   767 px), el pulso, la sombra del círculo, el acercamiento y la aparición
   del globo. El pulso crece 27 px alrededor del círculo y debe pasar 5 px por
   encima de «Volver arriba»: 24+52+27+5 = 108 px (móvil 18+52+27+5 = 102).
   Sustituye al botón de WhatsApp del tema, que quedó apagado en Opciones del
   tema.
   ========================================================================== */
.elementor-location-footer .brj-contacto-flotante.e-con{
  position:fixed; right:20px; bottom:108px; z-index:960; }
@media (max-width:767px){
  .elementor-location-footer .brj-contacto-flotante.e-con{ right:14px; bottom:102px; } }
/* Pulsaciones concéntricas. Elementor usa el ::before del contenedor como capa
   de fondo (con left:0 y medidas propias): se redefine completo. */
.elementor-location-footer .brj-contacto-flotante.e-con::before,
.elementor-location-footer .brj-contacto-flotante.e-con::after{
  content:""; display:block; position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; background:var(--brj-azul); opacity:.55; z-index:0; pointer-events:none;
  animation:brj-pulso 2.4s cubic-bezier(.25,.8,.35,1) infinite; }
.elementor-location-footer .brj-contacto-flotante.e-con::after{ animation-delay:1.2s; }
@keyframes brj-pulso{
  0%{ transform:scale(1); opacity:.55 }
  70%{ transform:scale(1.9); opacity:0 }
  100%{ transform:scale(1.9); opacity:0 } }
.brj-contacto-flotante .brj-contacto-flotante__boton{ position:relative; z-index:2; }
.brj-contacto-flotante .brj-contacto-flotante__boton .elementor-icon-wrapper{ display:flex; justify-content:center; }
.brj-contacto-flotante .brj-contacto-flotante__boton .elementor-icon{
  box-shadow:0 12px 30px -8px rgba(9,84,145,.7);
  transition:transform .3s var(--brj-ease), background-color .3s var(--brj-ease); }
.brj-contacto-flotante .brj-contacto-flotante__boton .elementor-icon:hover{ transform:scale(1.08); }
/* Globo: a 74 px del borde derecho, centrado en vertical; aparece al pasar el
   cursor sobre el botón y se corre 4 px. */
.brj-contacto-flotante.e-con > .brj-contacto-flotante__globo{
  position:absolute; right:74px; top:50%; z-index:2; margin:0;
  opacity:0; pointer-events:none; transform:translateY(-50%);
  transition:opacity .3s var(--brj-ease), transform .3s var(--brj-ease); }
/* El ancho (max-content) va en el widget, pero Elementor le pone max-width:100%
   con .elementor.elementor .e-con > .elementor-widget (0,4,0), que gana a su
   propio ajuste (0,3,0) y lo dejaba en 60 px: se anula con 0,5,0. El texto es
   un span y, en línea, tomaba el interlineado del widget (48 px en vez de 42). */
.elementor.elementor .brj-contacto-flotante.e-con > .brj-contacto-flotante__globo{ max-width:none; }
.brj-contacto-flotante.e-con > .brj-contacto-flotante__globo .elementor-heading-title{ display:block; white-space:nowrap; }
.brj-contacto-flotante.e-con:hover > .brj-contacto-flotante__globo{ opacity:1; transform:translateY(-50%) translateX(-4px); }

/* ==========================================================================
   13 · PÁGINAS INTERNAS · CABECERA DE PÁGINA · clase: brj-hero-interno
   ========================================================================== */
.brj-hero-interno{ min-height:clamp(300px,44vh,440px); }
/* El degradado azul va en un pseudoelemento propio: la capa de superposición
   del contenedor se reserva para la fotografía (estática o dinámica). */
.brj-hero-interno::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,
    rgba(5,47,81,.95) 0%, rgba(5,47,81,.88) 38%, rgba(5,47,81,.5) 66%, rgba(5,47,81,.18) 100%); }
.brj-hero-interno > .e-con-inner{ position:relative; z-index:2; }
.brj-hero-interno .brj-hero-interno__bajada .elementor-heading-title{
  font-family:var(--brj-font-slab); font-weight:400; line-height:1.45;
  font-size:clamp(1.02rem,.95rem + .55vw,1.4rem); color:var(--brj-arena); max-width:52ch; }
@media (max-width:960px){
  .brj-hero-interno{ min-height:280px; }
  .brj-hero-interno::after{
    background:linear-gradient(180deg,
      rgba(5,47,81,.6) 0%, rgba(5,47,81,.86) 60%, rgba(5,47,81,.95) 100%); }
}
@media (max-width:700px){
  .brj-hero-interno .brj-hero-interno__bajada .elementor-heading-title{ font-size:1rem; }
}

/* Migas de pan · clase: brj-migas */
.brj-migas{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.brj-migas,.brj-migas p{ color:rgba(255,255,255,.6); margin:0; }
.brj-migas a{ color:rgba(255,255,255,.6); text-decoration:none; }
.brj-migas a:hover{ color:#fff; }
.brj-migas span[aria-current],.brj-migas .brj-migas__actual{ color:var(--brj-arena); }
/* Separador de las migas (maqueta: .migas i). Yoast lo imprime dentro de <i>
   y sin espacios gracias al filtro de functions.php. */
.brj-migas i{ font-style:normal; padding:0 .55rem; opacity:.5; }

/* ==========================================================================
   14 · BLOQUES DE TEXTO DE LAS INTERNAS
   ========================================================================== */
/* Entradilla en Roboto Slab · clase: brj-entradilla */
.brj-entradilla,.brj-entradilla p{ font-family:var(--brj-font-slab);
  font-size:clamp(1.1rem,1rem + .6vw,1.45rem); line-height:1.55;
  color:var(--brj-azul); font-weight:400; }
/* Medida de la entradilla (maqueta: .entradilla{max-width:44ch}) · clase: brj-entradilla--medida
   En CSS porque el ancho del widget en Elementor mide «ch» con la fuente del
   contenedor (Inter 17 px) y no con la de la entradilla (Roboto Slab, más ancha). */
.brj-entradilla--medida p{ max-width:44ch; }

/* Texto justificado SIN partición de palabras (petición del cliente).
   Por debajo de 560 px la medida baja de 55 caracteres y pasa a bandera. */
.brj-justificado,.brj-justificado p,.brj-justificado li{
  text-align:justify; text-justify:inter-word; hyphens:manual; }
@media (max-width:560px){
  .brj-justificado,.brj-justificado p,.brj-justificado li{ text-align:left; }
}

/* Cita destacada sobre azul · clase: brj-destacada
   El radio (pétalo invertido 0 140 0 140 / 100 / 80) va en Elementor, contenedor #f734799 de la página 73. */
.brj-destacada .brj-destacada__texto,
.brj-destacada .brj-destacada__texto p{ font-family:var(--brj-font-slab);
  font-size:clamp(1.15rem,1rem + .8vw,1.65rem); line-height:1.45; color:#fff; max-width:40ch; }

/* Listas de términos del brief · clase: brj-lista-marcada (widget Texto) */
.brj-lista-marcada ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.65rem .7rem; }
.brj-lista-marcada li{ font-size:.95rem; line-height:1.3; padding:.75rem 1.2rem;
  background:var(--brj-hueso); border:1px solid var(--brj-gris); color:var(--brj-azul); }
.brj-azul-profundo .brj-lista-marcada li{ background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.2); color:#fff; }

/* Lista en columna con marca cuadrada · clase: brj-lista-columna
   Interlineado 1.3, el de .lista-marcada li en la maqueta (con 1.5 cada fila
   medía 51 px en lugar de 48). */
.brj-lista-columna ul{ list-style:none; margin:0; padding:0; }
.brj-lista-columna li{ position:relative; display:block; padding:.85rem 0 .85rem 1.5rem;
  border-bottom:1px solid var(--brj-gris); font-size:.95rem; line-height:1.3; }
.brj-lista-columna li::before{ content:""; position:absolute; left:0; top:1.3rem;
  width:8px; height:8px; background:var(--brj-arena); }
.brj-azul-profundo .brj-lista-columna li{ border-bottom-color:rgba(255,255,255,.14); color:#fff; }

/* ==========================================================================
   15 · SERVICIOS (interna) · índice de anclas y filas editoriales
   ========================================================================== */
/* Índice numerado · clase: brj-indice-anclas (widget Texto) */
.brj-indice-anclas{ border-top:1px solid var(--brj-gris); }
.brj-indice-anclas ol{ list-style:none; margin:0; padding:0; counter-reset:brjindice;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 clamp(1.5rem,3vw,2.5rem); }
.brj-indice-anclas li{ counter-increment:brjindice; border-bottom:1px solid var(--brj-gris); }
.brj-indice-anclas a{ display:flex; align-items:baseline; gap:1rem; padding:1.1rem 0;
  font-weight:600; font-size:.98rem; color:var(--brj-tinta); text-decoration:none;
  transition:color .3s var(--brj-ease); }
.brj-indice-anclas a::before{ content:counter(brjindice,decimal-leading-zero);
  font-family:var(--brj-font-slab); font-size:.82rem; color:var(--brj-celeste); }
.brj-indice-anclas a:hover{ color:var(--brj-azul); }
.brj-indice-anclas a:hover::before{ color:var(--brj-arena); }

/* Etiquetas clave bajo cada servicio · clase: brj-etiquetas (widget Texto) */
.brj-etiquetas ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.brj-etiquetas li{ font-size:.82rem; letter-spacing:.02em; padding:.45rem .9rem;
  background:var(--brj-hueso); color:var(--brj-azul); border:1px solid var(--brj-gris); }

/* Separador entre filas de servicio · clase: brj-fila-servicio */
.brj-fila-servicio + .brj-fila-servicio{ border-top:1px solid var(--brj-gris); }

/* Capacidades complementarias · clase: brj-capacidades (widget Texto) */
.brj-capacidades ul{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0 clamp(1.5rem,3vw,2.5rem); }
.brj-capacidades li{ position:relative; padding:1rem 0 1rem 1.6rem; font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.82); }
.brj-capacidades li::before{ content:""; position:absolute; left:0; top:1.45rem;
  width:8px; height:8px; background:var(--brj-arena); }

/* ==========================================================================
   16 · SECTORES (interna) · tarjetas con icono · clase: brj-tarjeta-sector
   ========================================================================== */
/* Hover como .tarjeta-sector de la maqueta: solo sombra, borde e icono azul.
   La tarjeta no se desplaza (su translateY no llega a verse en la maqueta). */
.brj-tarjeta-sector{ transition:box-shadow .35s var(--brj-ease), border-color .35s var(--brj-ease); }
.brj-tarjeta-sector:hover{ box-shadow:var(--brj-sombra);
  border-color:var(--brj-azul-100) !important; }
.brj-tarjeta-sector .brj-tarjeta-sector__icono .elementor-icon{ transition:background-color .35s var(--brj-ease); }
.brj-tarjeta-sector:hover .brj-tarjeta-sector__icono .elementor-icon{ background-color:var(--brj-azul) !important; }
.brj-tarjeta-sector:hover .brj-tarjeta-sector__icono .elementor-icon svg{ fill:#fff !important; }
.brj-tarjeta-sector:hover .brj-tarjeta-sector__icono .elementor-icon i,
.brj-tarjeta-sector:hover .brj-tarjeta-sector__icono .elementor-icon{ color:#fff !important; }
.brj-tarjeta-sector .brj-tarjeta-sector__texto{ font-size:.94rem; color:var(--brj-texto-suave); }

/* ==========================================================================
   17 · BLOG · listado (widget Bucle) · clases: brj-blog-destacado, brj-blog-tarjeta
   ========================================================================== */
.brj-etiqueta,.brj-etiqueta .elementor-heading-title{
  display:inline-block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brj-azul); background:var(--brj-azul-100); padding:.4rem .8rem; }

.brj-blog-destacado .brj-blog-destacado__titulo .elementor-heading-title{
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.4rem); line-height:1.15; }
.brj-blog-destacado .brj-blog-destacado__titulo a{ color:inherit; text-decoration:none; }
.brj-blog-destacado .brj-blog-destacado__titulo a:hover{ color:var(--brj-azul); }
.brj-blog-destacado .brj-petalo img{ aspect-ratio:1/1; object-fit:cover; width:100%; }

.brj-blog-tarjeta .brj-blog-tarjeta__foto img{ aspect-ratio:1/1; object-fit:cover; width:100%;
  filter:grayscale(1) contrast(1.04); opacity:.85;
  transition:transform .8s var(--brj-ease), filter .5s var(--brj-ease), opacity .5s var(--brj-ease); }
.brj-blog-tarjeta:hover .brj-blog-tarjeta__foto img{ transform:scale(1.05); filter:none; opacity:1; }
.brj-blog-tarjeta .brj-blog-tarjeta__foto{ overflow:hidden; background:var(--brj-azul-900); }
.brj-blog-tarjeta .brj-fecha,.brj-fecha{ font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brj-celeste); }
.brj-blog-tarjeta .brj-blog-tarjeta__titulo .elementor-heading-title{ font-size:1.16rem; line-height:1.3; }
.brj-blog-tarjeta .brj-blog-tarjeta__titulo a{ color:inherit; text-decoration:none; }
.brj-blog-tarjeta .brj-blog-tarjeta__titulo a:hover{ color:var(--brj-azul); }
.brj-blog-tarjeta .brj-blog-tarjeta__extracto{ font-size:.93rem; color:var(--brj-texto-suave); }
/* «Ver más» con filete en arena */
.brj-ver-mas .elementor-button{ padding:0 0 3px; background:transparent; color:var(--brj-azul);
  border:0; border-bottom:2px solid var(--brj-arena); font-size:.86rem; font-weight:600;
  letter-spacing:.02em; border-radius:0; transition:border-color .3s var(--brj-ease); }
.brj-ver-mas .elementor-button:hover{ border-bottom-color:var(--brj-azul);
  background:transparent; color:var(--brj-azul); transform:none; }

/* ==========================================================================
   18 · BLOG · entrada · plantilla «Single Post ES»
   ========================================================================== */
.brj-articulo{ max-width:74ch; margin-inline:auto; }
.brj-articulo__meta{ border-bottom:1px solid var(--brj-gris); font-size:.85rem;
  color:var(--brj-texto-suave); }
.brj-articulo__meta .elementor-icon-list-item{ font-size:.85rem; }
/* Nombre del autor en azul (maqueta: .articulo__meta strong) y separación entre
   filas cuando el bloque se parte en móvil (maqueta: gap .6rem 1.4rem; el
   1.4rem entre datos es el «Espacio entre» del widget). */
.brj-articulo__meta strong{ color:var(--brj-azul); font-weight:600; }
.brj-articulo__meta .elementor-inline-items{ row-gap:.6rem; }
@media (max-width:700px){ .brj-articulo__meta .elementor-inline-items{ row-gap:.35rem; } } /* maqueta ≤700: gap .35rem 1rem */
.brj-articulo__figura img{ border-radius:var(--brj-petalo); aspect-ratio:1/1;
  object-fit:cover; width:100%; max-width:480px; }
.brj-articulo__cuerpo p{ font-size:clamp(1.02rem,.98rem + .2vw,1.1rem); line-height:1.85; margin:0 0 1.5em; }
.brj-articulo__cuerpo p:last-child{ margin-bottom:0; }
.brj-articulo__cuerpo p:first-of-type{ font-family:var(--brj-font-slab);
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem); line-height:1.6; color:var(--brj-azul); }
.brj-articulo__cuerpo .brj-aviso{ margin:0 0 2rem; padding:1.1rem 1.35rem;
  background:var(--brj-hueso); border-left:3px solid var(--brj-arena);
  font-size:.9rem; color:var(--brj-texto-suave); font-family:var(--brj-font-base); }
.brj-articulo__cuerpo .brj-aviso strong{ color:var(--brj-tinta); }
.brj-articulo__firma{ border-top:1px solid var(--brj-gris); }
.brj-articulo__firma .brj-articulo__origen{ font-size:.86rem; color:var(--brj-texto-suave);
  max-width:46ch; line-height:1.6; }

/* Entradas relacionadas · clase: brj-relacionada */
.brj-relacionada{ border-top:1px solid var(--brj-gris); }
.brj-relacionada .brj-relacionada__titulo .elementor-heading-title{
  font-size:1.02rem; line-height:1.35; font-weight:700; letter-spacing:-.015em; }
.brj-relacionada .brj-relacionada__titulo a{ color:inherit; text-decoration:none; }
.brj-relacionada .brj-relacionada__titulo a:hover{ color:var(--brj-azul); }

/* ==========================================================================
   19 · PÁGINAS LEGALES · clase: brj-legal (widget Texto)
   ========================================================================== */
.brj-legal{ max-width:78ch; margin-inline:auto; counter-reset:brjclausula; }
/* Separación bajo la fecha: 1.1em, lo que la maqueta muestra en realidad
   (su .legal p pesa más que .legal__fecha y le gana el margen). */
.brj-legal .brj-legal__fecha{ font-size:.85rem; letter-spacing:.04em; line-height:1.7;
  color:var(--brj-texto-tenue); margin:0 0 1.1em; }
.brj-legal h2{ font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);
  margin:clamp(2.5rem,5vw,3.5rem) 0 1rem; padding-top:1.75rem;
  border-top:1px solid var(--brj-gris); line-height:1.12; }
.brj-legal h2::before{ counter-increment:brjclausula;
  content:counter(brjclausula,decimal-leading-zero); display:block;
  font-family:var(--brj-font-slab); font-size:.82rem; font-weight:400;
  letter-spacing:.08em; color:var(--brj-celeste); margin-bottom:.6rem; }
.brj-legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.brj-legal p,.brj-legal li{ text-align:justify; hyphens:manual; }
.brj-legal p{ margin:0 0 1.1em; }
.brj-legal ul{ margin:0 0 1.3em; padding:0; list-style:none; }
.brj-legal li{ position:relative; padding-left:1.5rem; margin-bottom:.6em; }
.brj-legal li::before{ content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--brj-arena); }
.brj-legal a{ color:var(--brj-azul); border-bottom:1px solid var(--brj-celeste); text-decoration:none; }
/* Al pasar el cursor el enlace sigue azul y solo se oscurece el filete, como
   .legal a:hover. Pesa 0,3,1 porque el Kit (.elementor-kit-7 a:hover, 0,2,1)
   carga después y lo pasaba a #052F51. */
.brj-legal.elementor-widget a:hover{ border-color:var(--brj-azul); color:var(--brj-azul); }
@media (max-width:560px){ .brj-legal p,.brj-legal li{ text-align:left; } }

/* ==========================================================================
   20 · CONTACTO Y CITA · panel de datos, mapa y formulario
   ========================================================================== */
/* Panel azul «Encuéntranos» · clase: brj-panel-datos / brj-dato-fila */
.brj-dato-fila{ border-top:1px solid rgba(255,255,255,.2); }
.brj-dato-fila--primera{ border-top:0 !important; }
.brj-dato-fila .brj-dato-fila__rotulo .elementor-heading-title{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-weight:400; line-height:1.7; } /* 400, como .dato span de la maqueta */
.brj-dato-fila .brj-dato-fila__valor,
.brj-dato-fila .brj-dato-fila__valor p{ font-weight:500; font-size:1.02rem;
  line-height:1.6; color:#fff; }
.brj-dato-fila .brj-dato-fila__valor a{ color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4); }
.brj-dato-fila .brj-dato-fila__valor a:hover{ border-color:#fff; }

/* Foto de «Encuéntranos»: se estira a la altura del panel azul de al lado
   clases: brj-encuentranos-col (columna) · brj-encuentranos__foto (widget) */
.brj-encuentranos-col{ display:flex; }
.brj-encuentranos__foto{ flex:1 1 auto; display:flex; }
.brj-encuentranos__foto .elementor-widget-container,
.brj-encuentranos__foto figure,
.brj-encuentranos__foto .elementor-image{ flex:1 1 auto; display:flex; margin:0; }
.brj-encuentranos__foto img{ width:100%; height:100%; object-fit:cover; min-height:280px; }

/* Mapa de Google · clase: brj-mapa
   Va a color y sin hover (antes gris → color, 2026-09-17). La esquina redondeada
   va arriba a la derecha y abajo a la izquierda (pétalo invertido 140/100/80 px),
   libre la esquina de la tarjeta del lugar; radio y recorte están en Elementor. */

/* Botones «Waze» y «Google Maps» del panel de datos · clases: brj-rutas / brj-btn-ruta
   Colores, borde, relleno, letra y separación del icono van en el widget.
   El widget Botón no tiene control de tamaño de icono (el SVG mide 1em). */
.brj-btn-ruta .elementor-button-icon svg{ width:1.35em; height:1.35em; }

/* Mapa que llena su contenedor (alto del panel azul de al lado) · clase: brj-mapa--estirar
   Como .mapa iframe de la maqueta (absoluto, inset 0). El fondo gris, el alto
   mínimo (420/340/320) y el crecimiento van en Elementor; el widget de mapa
   solo admite un alto fijo, por eso se posiciona aquí. Lo usan 72 y 73. */
.brj-mapa--estirar{ position:relative; }
.brj-mapa--estirar > .elementor-widget-google_maps{ position:absolute; inset:0; width:auto; margin:0; }
.brj-mapa--estirar .elementor-widget-container,
.brj-mapa--estirar .elementor-custom-embed{ height:100%; }
.brj-mapa--estirar iframe{ display:block; }

/* Formulario · clase: brj-formulario
   Los campos llevan SOLO etiqueta (sin placeholder repetido): se configura en
   el widget. Aquí sólo el rótulo del grupo y el aviso final. */
.brj-formulario .elementor-field-group > label{ font-size:.84rem; font-weight:600; }
.brj-formulario .elementor-field-group .elementor-field-subgroup label{ font-weight:400; }
/* Elementor no pone la «Clase CSS» de un campo HTML en su contenedor, así que
   la clase sola nunca aplicaba: se apunta también por el ID del campo
   (Formulario > campo > Avanzado > ID: rotulocita y nota). */
.brj-formulario .elementor-field-type-html.brj-form-rotulo,
.brj-formulario .elementor-field-group-rotulocita{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brj-azul);
  margin-top:.8rem; padding-top:1.5rem; border-top:1px solid var(--brj-gris); }
.brj-formulario .elementor-field-type-html.brj-form-nota,
.brj-formulario .elementor-field-group-nota{
  font-size:.8rem; color:var(--brj-texto-tenue); line-height:1.6; }
.brj-formulario .elementor-field-type-acceptance{
  padding:1rem 1.15rem; background:#fff; border:1px solid var(--brj-gris);
  margin-top:.5rem; }
.brj-formulario--claro .elementor-field-type-acceptance{ background:var(--brj-hueso); }
.brj-formulario .elementor-field-type-acceptance .elementor-field-option{
  display:flex; align-items:flex-start; gap:.8rem; }
.brj-formulario .elementor-field-type-acceptance input[type="checkbox"]{
  width:22px; height:22px; flex:0 0 auto; accent-color:var(--brj-azul); margin-top:.1rem; }
.brj-formulario .elementor-field-type-acceptance .elementor-field-option label{
  font-size:.88rem; line-height:1.5; font-weight:400; margin:0; }
.brj-formulario .elementor-message{ font-size:.92rem; }
.brj-formulario .elementor-message-success{ padding:1.15rem 1.35rem;
  background:var(--brj-azul-100); border-left:3px solid var(--brj-azul); color:var(--brj-azul); }
.brj-formulario .elementor-field-group.brj-campo-requerido > label::after{
  content:" *"; color:var(--brj-arena); }

/* ==========================================================================
   21 · FRANJA DE CIERRE · clase: brj-franja-cta
   ========================================================================== */
.brj-franja-cta .brj-franja-cta__titulo .elementor-heading-title{
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.2rem); line-height:1.15; }
.brj-franja-cta .brj-franja-cta__texto{ color:var(--brj-texto-suave); max-width:56ch; }

/* ==========================================================================
   22 · ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   ========================================================================== */
.brj-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce){
  .elementor-location-footer .brj-contacto-flotante.e-con::before,
  .elementor-location-footer .brj-contacto-flotante.e-con::after{ animation:none; opacity:0; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   23 · VARIANTES DE BOTÓN DE MARCA
   clases: brj-btn-linea (contorno azul) · brj-btn-claro (sobre fondo oscuro)
   El botón sólido usa los estilos globales del tema (Kit).
   ========================================================================== */
.brj-btn-linea .elementor-button{
  background-color:transparent; color:var(--brj-azul);
  border:1px solid var(--brj-azul); }
.brj-btn-linea .elementor-button:hover,
.brj-btn-linea .elementor-button:focus{
  background-color:var(--brj-azul); color:#fff; border-color:var(--brj-azul); }
.brj-btn-claro .elementor-button{
  background-color:#fff; color:var(--brj-azul); border:1px solid #fff; }
.brj-btn-claro .elementor-button:hover,
.brj-btn-claro .elementor-button:focus{
  background-color:transparent; color:#fff; border-color:#fff; }
.brj-btn .elementor-button{ transition:transform .25s var(--brj-ease),
  background-color .25s var(--brj-ease), color .25s var(--brj-ease), border-color .25s var(--brj-ease); }
.brj-btn .elementor-button:hover{ transform:translateY(-2px); }

/* Caja de texto de la cabecera interna */
.brj-hero-interno__caja{ max-width:720px; }

/* Etiqueta de la entrada destacada del blog · clase: brj-etiqueta--ultima
   El rótulo «Última entrada ·» lo aporta el prefijo de la etiqueta dinámica. */
.brj-etiqueta--ultima p{ margin:0; display:inline; }
.brj-etiqueta--ultima{ text-transform:uppercase; }

/* La fecha del artículo llega en minúsculas por el formato F Y del locale */
.brj-articulo__meta .elementor-icon-list-text{ text-transform:capitalize; }

/* Utilidades de medida de texto · clases: brj-intro, brj-limite */
.brj-intro,.brj-intro p{ max-width:62ch; color:var(--brj-texto-suave); }
.brj-limite,.brj-limite p{ max-width:62ch; }
.brj-azul-profundo .brj-intro,.brj-azul-profundo .brj-intro p{ color:rgba(255,255,255,.82); }

/* Medida de lectura de los bloques de prosa · clase: brj-prosa */
.brj-prosa,.brj-prosa p{ max-width:70ch; }

/* En móvil el botón flotante de contacto queda sobre la esquina inferior
   derecha: se reserva espacio para que no tape la última fila del menú del pie. */
@media (max-width:700px){
  .brj-footer .brj-footer__legal{ padding-bottom:82px !important; }
}

/* ==========================================================================
   24 · HOME · ESPACIADOS DE TEXTO
   El último párrafo de cada bloque de texto no suma margen inferior (maqueta:
   p:last-child{margin-bottom:0}); así manda la separación configurada en
   cada contenedor de Elementor.
   ========================================================================== */
.home .brj-seccion .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
/* Interlineado proporcional (1.7 sin unidad, como la maqueta). El del Kit es
   1.7em y se hereda ya calculado en px sobre 17 px: los textos más pequeños
   (sectores, pasos, cifras) quedaban con 28.9 px en lugar de ~25 px. */
.home .brj-seccion .elementor-widget-text-editor,
.home .brj-seccion .elementor-widget-text-editor p{ line-height:1.7; }

/* ==========================================================================
   25 · ANIMACIONES DE ENTRADA (todo el sitio)
   --------------------------------------------------------------------------
   La animación y su retraso se siguen eligiendo en cada widget o contenedor
   de Elementor (Avanzado > Efectos de movimiento > Animación de entrada).
   Aquí solo se igualan al set de la maqueta: 1.1 s, curva --brj-ease y 60 px
   de recorrido. Elementor usa 1.25 s y desplaza el 100 % del alto del
   elemento, y no tiene un ajuste global para cambiarlo. Los keyframes llevan
   nombre propio para no chocar con los de Elementor.
   ========================================================================== */
.elementor-element.animated{ animation-duration:1.1s; animation-timing-function:var(--brj-ease); }
.elementor-element.animated.fadeIn{ animation-name:brj-eFadeIn; }
.elementor-element.animated.fadeInUp{ animation-name:brj-eFadeInUp; }
.elementor-element.animated.fadeInDown{ animation-name:brj-eFadeInDown; }
.elementor-element.animated.fadeInLeft{ animation-name:brj-eFadeInLeft; }
.elementor-element.animated.fadeInRight{ animation-name:brj-eFadeInRight; }
.elementor-element.animated.zoomIn{ animation-name:brj-eZoomIn; }
@keyframes brj-eFadeIn      { from{ opacity:0 } to{ opacity:1 } }
@keyframes brj-eFadeInUp    { from{ opacity:0; transform:translate3d(0,60px,0) }  to{ opacity:1; transform:none } }
@keyframes brj-eFadeInDown  { from{ opacity:0; transform:translate3d(0,-50px,0) } to{ opacity:1; transform:none } }
@keyframes brj-eFadeInLeft  { from{ opacity:0; transform:translate3d(-60px,0,0) } to{ opacity:1; transform:none } }
@keyframes brj-eFadeInRight { from{ opacity:0; transform:translate3d(60px,0,0) }  to{ opacity:1; transform:none } }
@keyframes brj-eZoomIn      { from{ opacity:0; transform:scale3d(.92,.92,.92) }   to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .elementor-element.animated{ animation-duration:.01ms; }
}

/* ==========================================================================
   26 · SERVICIOS (página 69) · ajustes contra la maqueta v3
   --------------------------------------------------------------------------
   Solo lo que Elementor no puede expresar, acotado a esta página con la
   clase del documento (.elementor-69) hasta que el cliente apruebe
   replicarlo en las demás internas.
   ========================================================================== */
/* Párrafos como la maqueta: interlineado 1.7 sin unidad (el del Kit es 1.7em
   y se hereda ya calculado en px: listas y pasos quedaban a 28.9 px), 1.1em
   entre párrafos y el último sin margen, así manda la separación de cada
   contenedor de Elementor. La entradilla y la nota flotante conservan su 1.55;\n   los pasos llevan su propio interlineado (más abajo). */
.elementor-69 .brj-seccion .elementor-widget-text-editor:not(.brj-entradilla, .brj-nota-flotante__texto, .brj-paso__texto),
.elementor-69 .brj-seccion .elementor-widget-text-editor:not(.brj-entradilla, .brj-nota-flotante__texto, .brj-paso__texto) p{ line-height:1.7; }
.elementor-69 .brj-seccion .elementor-widget-text-editor p{ margin:0 0 1.1em; }
.elementor-69 .brj-seccion .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
/* Filete del título con base 0, como .titulo-seccion::after (flex:1): con
   base 2rem «Seis líneas de trabajo» se partía en dos líneas a 375 px. */
.elementor-69 .brj-titulo-seccion::after{ flex-basis:0; }
/* Medida del texto de la franja de cierre: en el widget no aplicaba. */
.elementor-69 .brj-franja-cta__texto p{ max-width:56ch; }
/* Pasos: en la maqueta el texto es un <span> dentro del <li>, así que sus
   líneas guardan el interlineado del <li> (1.7 × texto base) aunque la
   letra sea de .93rem. */
.elementor-69 .brj-seccion .elementor-widget-text-editor.brj-paso__texto,
.elementor-69 .brj-seccion .elementor-widget-text-editor.brj-paso__texto p{ line-height:calc(1.7 * clamp(1rem, .96rem + .2vw, 1.0625rem)); }
/* Marca del paso: columna de 12 px + 1.2rem de separación y .5rem desde
   arriba, como la rejilla de .pasos li. */
.elementor-69 .brj-paso{ padding-left:calc(12px + 1.2rem); }
.elementor-69 .brj-paso::before{ top:.5rem; }
/* Correo: en la maqueta el enlace es un elemento de la fila flex (bloque),
   así que el filete queda al pie de su línea de 1.7 y no pegado al texto. */
.elementor-69 .brj-correo a{ display:inline-block; }

/* ==========================================================================
   27 · SECTORES QUE ATENDEMOS (página 103) · ajustes contra la maqueta v3
   --------------------------------------------------------------------------
   Mismo criterio que §26 (Servicios): solo lo que Elementor no puede
   expresar, acotado a la página con .elementor-103 hasta que el cliente
   apruebe replicarlo.
   ========================================================================== */
/* Filete del título con base 0, como .titulo-seccion::after (flex:1): con
   base 2rem el H2 de la franja azul no se partía como en la maqueta y
   «Seis industrias, una misma metodología» se partía a 900 px. */
.elementor-103 .brj-titulo-seccion::after{ flex-basis:0; }
/* Medida del texto de la franja de cierre: en el widget no aplicaba. */
.elementor-103 .brj-franja-cta__texto p{ max-width:56ch; }
/* Pasos: en la maqueta el texto es un <span> dentro del <li>, así que sus
   líneas guardan el interlineado del <li> (1.7 × texto base). Marca en una
   columna de 12 px + 1.2rem y a .5rem desde arriba (rejilla de .pasos li). */
.elementor-103 .brj-seccion .elementor-widget-text-editor.brj-paso__texto,
.elementor-103 .brj-seccion .elementor-widget-text-editor.brj-paso__texto p{ line-height:calc(1.7 * clamp(1rem, .96rem + .2vw, 1.0625rem)); }
.elementor-103 .brj-paso{ padding-left:calc(12px + 1.2rem); }
.elementor-103 .brj-paso::before{ top:.5rem; }
/* Pétalo decorativo de la franja azul a la derecha, como .fondo-azul::before.
   Elementor pone left:0 a todo ::before de contenedor (capa de fondo) y, con
   ancho fijo, left gana a right: el pétalo salía pegado a la izquierda. */
.elementor-103 .brj-azul-profundo::before{ left:auto; }
/* Icono de las tarjetas: la envoltura del widget es un bloque con el
   interlineado del texto (28.9 px) y el icono va en línea sobre la base,
   así que medía 65 px en lugar de 56 (.tarjeta-sector__icono es un bloque). */
.elementor-103 .brj-tarjeta-sector__icono .elementor-icon-wrapper{ display:flex; }

/* ==========================================================================
   28 · CONTÁCTENOS (página 72) — lo que Elementor no permite ajustar
   Maqueta: contacto.html (internas.css: .mapa, .campo, .formulario).
   ========================================================================== */
/* Filete del título con base 0, como .titulo-seccion::after (flex:1). */
.elementor-72 .brj-titulo-seccion::after{ flex-basis:0; }
.elementor-72 .brj-franja-cta__texto p{ max-width:56ch; }
/* Las dos fotos junto al formulario (clase brj-encuentranos-col) miden lo mismo:
   base 0. Elementor solo ofrece crecer/encoger y cada una partia del alto
   natural de su imagen (429 y 664 px a 1440). */
.elementor-72 .brj-encuentranos-col.e-con{ flex-basis:0; min-height:0; }
/* Campos: relleno y foco de .campo input; el widget Formulario no tiene
   control de relleno ni de estado :focus. */
.elementor-72 .brj-formulario .elementor-field-group .elementor-field-textual{
  padding:.85rem 1rem; min-height:0;
  transition:border-color .25s var(--brj-ease), box-shadow .25s var(--brj-ease); }
/* Especificidad 0,7,0: el color de borde del widget pesa 0,6,0 y carga después. */
.elementor-72 .brj-formulario.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual:focus{
  outline:0; border-color:var(--brj-azul); box-shadow:0 0 0 3px rgba(9,84,145,.12); }
.elementor-72 .brj-formulario .elementor-field-group textarea.elementor-field-textual{
  min-height:130px; resize:vertical; }
/* Separaciones de .formulario__rotulo (.9rem abajo) y .robot (1.6rem); la nota
   va después del botón, como .formulario__nota (Elementor pone el botón al final). */
.elementor-72 .brj-formulario .elementor-field-group.elementor-field-group-rotulocita{ margin-bottom:.9rem; }
.elementor-72 .brj-formulario .elementor-field-group.elementor-field-type-acceptance{ margin-bottom:1.6rem; }
.elementor-72 .brj-formulario .elementor-field-group.elementor-field-group-nota{ order:1; margin-top:0; }
/* Botón Enviar: sube 2 px al pasar el cursor, como .btn:hover (el widget
   Formulario solo trae animaciones de hover predefinidas). */
.elementor-72 .brj-formulario .elementor-button{
  transition:transform .25s var(--brj-ease), background-color .25s var(--brj-ease),
  color .25s var(--brj-ease), border-color .25s var(--brj-ease); }
.elementor-72 .brj-formulario .elementor-button:hover{ transform:translateY(-2px); }
/* Móvil: Fecha y Hora apiladas con la separación de .campos-par (1.1rem)
   además del margen del campo; Elementor solo deja la separación de filas. */
@media (max-width:767px){
  .elementor-72 .brj-formulario .elementor-field-group.elementor-field-group-fecha{ margin-bottom:2.2rem; }
}

/* ==========================================================================
   29 · BLOG (página 71) Y ENTRADAS (plantilla 142; tarjetas 139, 140 y 141)
   Maqueta: blog.html y blog-*.html (internas.css: .rejilla-blog, .entrada,
   .entrada-destacada, .relacionadas, .articulo__firma).
   ========================================================================== */
/* Filete del título con base 0 y medida del párrafo del CTA, como §26/§27. */
.elementor-71 .brj-titulo-seccion::after,
.elementor-142 .brj-titulo-seccion::after{ flex-basis:0; }
.elementor-71 .brj-franja-cta__texto p,
.elementor-142 .brj-franja-cta__texto p{ max-width:56ch; }
/* Rejillas por ancho mínimo, como la maqueta (310 px en el listado, 260 px en
   «Otras entradas»): el Loop Grid solo admite un número fijo de columnas por
   dispositivo y entre 1025 y 1150 px ponía 3 donde la maqueta pone 2. */
.brj-rejilla-blog .elementor-loop-container{
  grid-template-columns:repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.brj-rejilla-relacionadas .elementor-loop-container{
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
/* Entrada escalonada de las tarjetas, como la maqueta (100/180/260 ms): el
   retraso de Elementor (100 ms) es el mismo en todas; se suman 80/160 ms. */
.brj-rejilla-blog .e-loop-item:nth-child(3n+2) .brj-blog-tarjeta.animated{
  animation-delay:80ms; animation-fill-mode:both; }
.brj-rejilla-blog .e-loop-item:nth-child(3n) .brj-blog-tarjeta.animated{
  animation-delay:160ms; animation-fill-mode:both; }
/* Entrada destacada: acercamiento de 1.04 en .8 s, como .entrada-destacada:hover. */
.brj-blog-destacado.brj-foto-zoom:hover img{ transform:scale(1.04); }
/* Firma de la entrada: el enlace al texto original va en el color del texto,
   como .articulo__firma small a. */
.brj-articulo__firma .brj-articulo__origen a{ color:inherit; }
/* "Ver más" de las tarjetas: el enlace es inline-block sobre la línea base del
   widget (bloque con el interlineado del texto) y cada tarjeta medía 4 px de más;
   en la maqueta .entrada__mas es un elemento flexible. */
.brj-ver-mas.elementor-widget-button{ display:flex; }
/* «Otras entradas»: toda la tarjeta es el enlace (contenedor <a> en Elementor)
   y el título pasa a azul al pasar sobre ella, como .relacionadas a:hover strong. */
.brj-relacionada{ text-decoration:none; color:inherit; }
.e-loop-item .brj-relacionada:hover .brj-relacionada__titulo .elementor-heading-title{ color:var(--brj-azul); }

/* ==========================================================================
   30 · TÉRMINOS Y CONDICIONES (74) Y AVISO DE PRIVACIDAD (75)
   Maqueta: terminos-y-condiciones.html y aviso-de-privacidad.html
   (internas.css: .legal, .franja-cta). El texto legal va en §19.
   ========================================================================== */
/* Medida del párrafo del CTA, como §26 a §29 (Elementor pone max-width:100%
   al widget y anula el 56ch de §21). */
.elementor-74 .brj-franja-cta__texto p,
.elementor-75 .brj-franja-cta__texto p{ max-width:56ch; }