/* =========================================================
   GUERRA & ASOCIADOS — overrides estaticos
   - Tipografia unica: Archivo (sustituto web de DIN Alternate)
   - Hero: imagen IMG1, sin efecto Liquid Glass, texto nitido
   Cargado de ultimo => gana por orden + !important
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

/* ---------- 1) TIPOGRAFIA UNICA EN TODO EL SITIO ---------- */
body{font-family:'Archivo',sans-serif !important;}
h1,h2,h3,h4,h5,h6,p,a,li,blockquote,figcaption,label,td,th,small,strong,em,
.elementor-heading-title,.elementskit-section-title,.elementskit-section-subtitle,
.elementor-button,.elementor-button-text,.elementskit-btn,.ekit-btn-wraper a,
button,input,select,textarea,
.elementor-widget-text-editor,
.elementor-nav-menu a,.hfe-nav-menu a,.menu-item a,.hfe-menu-item{
  font-family:'Archivo',sans-serif !important;
}

/* ---------- 2) HERO (home, post 722, seccion 24cfad7f) ---------- */
.elementor-722 .elementor-element.elementor-element-24cfad7f,
.elementor-722 .elementor-element.elementor-element-24cfad7f:not(.no-such){
  background-image:url('/assets-custom/home-bg3.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* matar el efecto "Liquid Glass" (el supuesto degradado) */
.elementor-722 .elementor-element-24cfad7f.eael_liquid_glass-effect2{
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.elementor-722 .elementor-element-24cfad7f.eael_liquid_glass_shadow-effect2{
  box-shadow:none !important;
}
/* velo plano y sutil SOLO para legibilidad (uniforme, no es degradado) */
.elementor-722 .elementor-element-24cfad7f::before{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:rgba(20,12,10,.48) !important;
  z-index:0 !important; pointer-events:none !important;
}
.elementor-722 .elementor-element-24cfad7f > .e-con-inner{
  position:relative !important; z-index:1 !important;
}

/* ---------- 3) Texto del hero nitido y en blanco ---------- */
.elementor-722 .elementor-element-8f87ed7 .elementskit-section-subtitle{
  color:#ffffff !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-shadow:0 2px 16px rgba(0,0,0,.72) !important;
}
/* acento "eyebrow": rayita naranja a la izquierda, igual que La Firma / Areas de Practica */
.elementor-722 .elementor-element-8f87ed7 .elementskit-section-subtitle.elementskit-style-border::before{
  background-color:#ff712b !important; width:40px !important;
}
.elementor-722 .elementor-element-8f87ed7 .elementskit-section-subtitle.elementskit-style-border::after{
  background-color:transparent !important;
}
.elementor-722 .elementor-element-8f87ed7 .elementskit-section-title{
  color:#ffffff !important;
  /* doble sombra: una corta y nitida (contraste sobre cielo claro) + una difusa */
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 22px rgba(0,0,0,.45) !important;
  line-height:1.1 !important;   /* antes 74px (doble) -> lineas juntas */
}
/* boton "Saber mas": blanco con texto rojo de marca */
.elementor-722 .elementor-element-18305ddb .elementskit-btn{
  background:#ffffff !important; color:#721516 !important;
  font-weight:700 !important; transition:.18s ease !important;
}
.elementor-722 .elementor-element-18305ddb .elementskit-btn:hover{
  background:#a3b5d1 !important; color:#15151a !important;
}

/* ---------- 4) "Articulos recientes" — titulo limpio y elegante ---------- */
/* quita el desenfoque (text-shadow) que lo hacia ver "como imagen salida"
   y lo vuelve mas sobrio: Archivo, peso ligero, buen interletrado */
.elementor-722 .elementor-element-44ae3fb2 .elementskit-section-title{
  text-shadow:none !important;
  font-family:'Archivo',sans-serif !important;
  font-weight:600 !important;
  font-size:32px !important;
  line-height:1.2 !important;
  letter-spacing:-.005em !important;
  color:#2a2320 !important;
}
.elementor-722 .elementor-element-44ae3fb2 .elementskit-section-title > span{
  font-family:'Archivo',sans-serif !important;
  font-weight:700 !important;
  text-shadow:none !important;
  color:#721516 !important;
}
.elementor-722 .elementor-element-44ae3fb2 .elementskit-section-title-wraper p{
  font-family:'Archivo',sans-serif !important;
  color:#726c67 !important;
  font-size:15px !important;
  line-height:1.7 !important;
  max-width:620px; margin-left:auto !important; margin-right:auto !important;
}
@media (max-width:680px){
  .elementor-722 .elementor-element-44ae3fb2 .elementskit-section-title{ font-size:24px !important; }
}

/* ---------- 5) MENU — hover + animacion al clic ---------- */
.hfe-nav-menu .menu-item a.hfe-menu-item{
  position:relative;
  transition:color .25s ease, transform .12s ease;
}
/* subrayado animado desde el centro */
.hfe-nav-menu .menu-item a.hfe-menu-item::after{
  content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:0; height:2px; background:#721516; border-radius:2px;
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover{ color:#721516 !important; }
.hfe-nav-menu .menu-item a.hfe-menu-item:hover::after{ width:72%; }
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item::after{ width:72%; }
/* feedback al hacer clic */
.hfe-nav-menu .menu-item a.hfe-menu-item:active{ transform:scale(.93); }

/* efecto ripple (lo dibuja guerra.js) */
.ga-ripple{ position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(114,21,22,.28); pointer-events:none; animation:gaRipple .55s ease-out; }
@keyframes gaRipple{ to{ transform:scale(2.6); opacity:0; } }

/* boton "Programar Cita" + botones en general */
.elementor-widget-button .elementor-button,
.elementor-widget-button a.elementor-button{
  position:relative; overflow:hidden;
  transition:transform .16s ease, box-shadow .26s ease, background-color .26s ease !important;
}
.elementor-widget-button .elementor-button:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 9px 24px rgba(114,21,22,.34) !important;
}
.elementor-widget-button .elementor-button:active{
  transform:translateY(0) scale(.97) !important;
  box-shadow:0 3px 10px rgba(114,21,22,.28) !important;
}

/* ---------- 6) Seccion ESTADISTICAS — imagen IMG3 ----------
   especificidad alta para ganarle a la regla lazy-load de Elementor
   (:not(.e-lazyloaded) * { background-image:none !important }) */
.elementor.elementor-722 .elementor-element.elementor-element-292e07a0.e-con.e-parent,
.elementor-722 .elementor-element-292e07a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-image:url('/assets-custom/img3.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* velo plano sutil para que los numeros blancos sigan legibles */
.elementor-722 .elementor-element-292e07a0::before{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:rgba(20,12,10,.34) !important; z-index:0 !important; pointer-events:none !important;
}
.elementor-722 .elementor-element-292e07a0 > .e-con-inner{ position:relative !important; z-index:1 !important; }

/* ---------- 6b) LA FIRMA — hero unificado con "Áreas de Práctica" y "Nuestro Equipo" ----------
   (1) nueva imagen Pexels, (2) sin lavado Liquid Glass, (3) velo limpio, (4) mismo formato de titulo */
.elementor.elementor-2290 .elementor-element.elementor-element-1faa0340,
.elementor-2290 .elementor-element.elementor-element-1faa0340:not(.no-such),
.elementor-2290 .elementor-element-1faa0340 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-image:url('/assets-custom/la-firma-bg2.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* quitar el efecto Liquid Glass: el blur(32px) brightness(2) lavaba la imagen a gris */
.elementor-2290 .elementor-element-1faa0340.eael_liquid_glass-effect2{
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.elementor-2290 .elementor-element-1faa0340.eael_liquid_glass_shadow-effect2{
  box-shadow:none !important;
}
/* velo oscuro uniforme (sustituye el gris #54595F al 50%) => imagen nitida + texto blanco legible */
.elementor-2290 .elementor-element-1faa0340 > .elementor-background-overlay{
  background-color:rgba(20,12,10,.55) !important;
  opacity:1 !important;
}
/* TITULO con el MISMO formato que las otras paginas (elementskit-section-title) */
.elementor-2290 .elementor-element-59dcd87 .elementskit-section-title-wraper .elementskit-section-title{
  color:#ffffff !important;
  font-weight:900 !important;
  font-size:60px !important;
  line-height:1.12 !important;
  margin:2px 0 12px 0 !important;
}
.elementor-2290 .elementor-element-59dcd87 .elementskit-section-title-wraper .elementskit-section-subtitle{
  color:#ffffff !important;
  font-weight:700 !important;
  font-size:17px !important;
  letter-spacing:.04em !important;
  margin:0 0 10px 0 !important;
}
.elementor-2290 .elementor-element-59dcd87 .elementskit-section-subtitle.elementskit-style-border::before{
  background-color:#ff712b !important; width:40px !important;
}
/* ocultar la segunda linea (gris) del subtitulo, igual que en "Areas de Practica" */
.elementor-2290 .elementor-element-59dcd87 .elementskit-section-subtitle.elementskit-style-border::after{
  background-color:transparent !important;
}
@media (max-width:1024px){
  .elementor-2290 .elementor-element-59dcd87 .elementskit-section-title-wraper .elementskit-section-title{ font-size:40px !important; line-height:1.15 !important; }
}
@media (max-width:767px){
  .elementor-2290 .elementor-element-59dcd87 .elementskit-section-title-wraper .elementskit-section-title{ font-size:32px !important; line-height:40px !important; }
}

/* ===================================================================
   7) ANIMACIONES SMOOTH — hover en todo lo interactivo
   =================================================================== */
:root{ --ga-ease:cubic-bezier(.22,.61,.36,1); }

/* enlaces y botones: transicion suave de color/sombra/desplazamiento */
a,
.elementor-button, .elementskit-btn, .ekit-btn-wraper a, .elementor-cta__button{
  transition: color .3s var(--ga-ease), background-color .3s var(--ga-ease),
              border-color .3s var(--ga-ease), box-shadow .35s var(--ga-ease),
              transform .3s var(--ga-ease) !important;
}

/* TARJETAS (servicios, equipo, testimonios/comentarios, info-box, blog): elevar + sombra */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-call-to-action .elementor-cta,
.elementskit-single-testimonial-slider,
.elementskit-testimonial-slider-default,
.elementskit-card,
.elementskit-infobox,
.elementor-testimonial,
.elementor-testimonial-wrapper,
.elementor-widget-price-table .elementor-price-table,
.eael-grid-post,
.elementor-post{
  transition: transform .42s var(--ga-ease), box-shadow .42s var(--ga-ease) !important;
}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-call-to-action:hover .elementor-cta,
.elementor-widget-elementskit-icon-box:hover .elementskit-infobox,
.elementskit-single-testimonial-slider:hover,
.elementskit-card:hover,
.elementor-testimonial:hover,
.elementor-testimonial-wrapper:hover,
.eael-grid-post:hover,
.elementor-post:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 46px rgba(20,12,10,.16) !important;
}
/* icono dentro de la tarjeta ElementsKit */
.elementskit-infobox .elementskit-info-box-icon,
.elementskit-infobox .elementskit-box-header-icon i,
.elementskit-infobox .ekit-equal-height-element i{
  transition: transform .35s var(--ga-ease), color .3s var(--ga-ease) !important;
}
.elementor-widget-elementskit-icon-box:hover .elementskit-info-box-icon,
.elementor-widget-elementskit-icon-box:hover i{
  transform: scale(1.12) translateY(-2px) !important;
}

/* IMAGENES dentro de figuras/cajas: zoom suave (no afecta fondos de seccion) */
.elementor-widget-image figure,
.elementor-image-box-img,
.elementskit-card-image,
.elementor-widget-image .elementor-widget-container{ overflow:hidden; }
.elementor-widget-image img,
.elementor-image-box-img img,
.elementskit-card-image img{
  transition: transform .6s var(--ga-ease) !important;
  will-change: transform;
}
.elementor-widget-image:hover img,
.elementor-image-box-wrapper:hover img,
.elementskit-card:hover .elementskit-card-image img{
  transform: scale(1.06) !important;
}

/* ICONOS y redes sociales: escala suave */
.elementor-social-icon, .elementskit-social-media a, .ekit-social-media li a,
.elementor-icon, .elementor-icon-box-icon .elementor-icon{
  transition: transform .3s var(--ga-ease), background-color .3s var(--ga-ease), color .3s var(--ga-ease) !important;
}
.elementor-social-icon:hover, .elementskit-social-media a:hover, .ekit-social-media li a:hover{
  transform: translateY(-3px) scale(1.12) !important;
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon{
  transform: scale(1.1) rotate(-3deg) !important;
}

/* ---------- 8) SCROLL REVEAL — aparicion suave al hacer scroll ---------- */
.ga-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ga-ease), transform .75s var(--ga-ease);
  will-change:opacity, transform;
}
.ga-reveal.ga-in{ opacity:1; transform:none; }

/* ---------- 9) BOTON VOLVER ARRIBA ---------- */
.ga-top{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  width:50px; height:50px; border-radius:50%;
  background:#721516; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(114,21,22,.42);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s var(--ga-ease), transform .3s var(--ga-ease), background-color .25s ease;
}
.ga-top.show{ opacity:1; visibility:visible; transform:none; }
.ga-top:hover{ background:#5a1012; transform:translateY(-4px); }
.ga-top:active{ transform:translateY(0) scale(.92); }
.ga-top svg{ width:22px; height:22px; }

/* ---------- 10) WHATSAPP flotante ---------- */
.ga-wa{
  position:fixed; left:22px; bottom:22px; z-index:9998;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  animation:gaWaPulse 2.6s infinite;
  transition:transform .25s var(--ga-ease), box-shadow .3s ease;
}
.ga-wa:hover{ transform:scale(1.08); box-shadow:0 14px 34px rgba(37,211,102,.6); }
.ga-wa svg{ width:30px; height:30px; }
@keyframes gaWaPulse{
  0%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- 11) Formulario: mensaje de estado ---------- */
.ga-form-msg{
  margin:16px 0 0; padding:14px 18px; border-radius:8px;
  font-family:'Archivo',sans-serif; font-size:15px; line-height:1.55;
}
.ga-form-msg.ok{ background:#e8f5ec; color:#1c6b3a; border:1px solid #bfe3cc; }
.ga-form-msg.err{ background:#fcebeb; color:#8a1f1f; border:1px solid #f0c0c0; }

/* ---------- 12) FIX móvil/tablet — tarjetas "Leyes de Interés" se solapaban
   Cada widget trae margin-bottom:-165px (overlap intencional para escritorio,
   donde van en fila). Al apilarse en columna se montaban una sobre otra. */
@media (max-width:1024px){
  .elementor-722 .elementor-element-62c93bfb .elementor-widget-elementskit-icon-box{
    margin-bottom:28px !important;
  }
}

/* accesibilidad: respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; }
  .ga-reveal{ opacity:1 !important; transform:none !important; }
  .ga-wa{ animation:none !important; }
}

/* ---------- 8) NUESTRO EQUIPO — eyebrow "GUERRA & ASOCIADOS" (igual que las otras) ---------- */
.elementor-1144 .elementor-element-fe23c1d .elementskit-section-title-wraper .elementskit-section-subtitle{
  color:#ffffff !important;
  font-weight:700 !important;
  font-size:17px !important;
  letter-spacing:.04em !important;
  margin:0 0 10px 0 !important;
}
.elementor-1144 .elementor-element-fe23c1d .elementskit-section-subtitle.elementskit-style-border::before{
  background-color:#ff712b !important; width:40px !important;
}
.elementor-1144 .elementor-element-fe23c1d .elementskit-section-subtitle.elementskit-style-border::after{
  background-color:transparent !important;
}

/* ---------- 9) AREAS DE PRACTICA — nueva imagen (columnas) + velo + texto legible ---------- */
.elementor.elementor-9 .elementor-element.elementor-element-baab649,
.elementor-9 .elementor-element.elementor-element-baab649:not(.no-such),
.elementor-9 .elementor-element-baab649 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-image:url('/assets-custom/services-bg.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.elementor-9 .elementor-element-baab649{ position:relative !important; }
.elementor-9 .elementor-element-baab649::before{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:rgba(20,12,10,.5) !important; z-index:0 !important; pointer-events:none !important;
}
.elementor-9 .elementor-element-baab649 > .e-con-inner{ position:relative !important; z-index:1 !important; }
.elementor-9 .elementor-element-677a40d3 .elementskit-section-title,
.elementor-9 .elementor-element-677a40d3 .elementskit-section-subtitle,
.elementor-9 .elementor-element-677a40d3 .ekit-heading__description p{
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.4) !important;
}

/* ---------- 10) BLOG (Publicaciones) — hero al estilo de las demas ---------- */
.ga-blog-hero{
  position:relative;
  left:50%; right:50%; width:100vw; margin-left:-50vw; margin-right:-50vw; /* full-bleed (rompe el ancho del <main>) */
  background-image:url('/assets-custom/blog-bg.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  padding:120px 6vw;
  overflow:hidden;
}
.ga-blog-hero::before{
  content:''; position:absolute; inset:0;
  background:rgba(20,12,10,.42); z-index:0; pointer-events:none;
}
.ga-blog-hero__inner{
  position:relative; z-index:1; max-width:1180px; margin:0 auto; width:100%;
}
.ga-blog-hero__eyebrow{
  display:inline-block; color:#fff; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:17px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.ga-blog-hero__eyebrow::before{
  content:''; display:inline-block; width:40px; height:2px; background:#ff712b;
  vertical-align:middle; margin-right:15px; transform:translateY(-2px);
}
.ga-blog-hero .entry-title{
  color:#fff !important; font-family:'Archivo',sans-serif !important; font-weight:900 !important;
  font-size:60px !important; line-height:1.12 !important; margin:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.4) !important;
}
@media (max-width:1024px){
  .ga-blog-hero{ padding:90px 6vw; }
  .ga-blog-hero .entry-title{ font-size:40px !important; }
}
@media (max-width:767px){
  .ga-blog-hero{ padding:70px 6vw; }
  .ga-blog-hero .entry-title{ font-size:32px !important; }
}

/* ---------- 11) "ENFOQUE ESTRATEGICO" (home) — marron de marca ---------- */
.elementor-722 .elementor-element-37b316fd .elementskit-section-title{
  color:#721516 !important;
}