/* =========================================================================
   Baker (Astra Child) — global.css
   1) Full-width real en todo el sitio (mata el "boxed")
   2) Hueco para el header fijo (72px)
   3) Blog "Learn the Law" (hero + filtros + featured + grid + CTA)
   4) Entrada individual (single)
   Paleta del mockup. Todo el CSS del blog/single va namespaced bajo
   .blg-blog / .blg-single para no chocar con Astra/Elementor.
   ========================================================================= */

:root{
  --navy:#0F3E5E; --charcoal:#141414; --off-white:#FAFAF7; --steel:#2A6F97;
  --cream:#EDE8E0; --muted:#E8E4DD; --muted-fg:#6B6560; --border:#D6D0C8;
  --card:#FFFFFF; --radius:.375rem;
}

/* -------------------------------------------------------------------------
   1) FULL-WIDTH  ->  fin del boxed
   Astra en layout "page-builder" ya quita el contenedor; estas reglas son
   el cinturón de seguridad por si alguna versión reinyecta max-width/padding.
   ---------------------------------------------------------------------- */
.baker-fullwidth .site-content .ast-container,
.baker-fullwidth .ast-container,
.baker-fullwidth #primary,
.baker-fullwidth #main,
.baker-fullwidth .site-content,
.baker-fullwidth .entry-content{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.baker-fullwidth .site-content{ overflow-x:hidden; }
/* Astra a veces mete padding al article del contenido */
.baker-fullwidth .ast-article-single,
.baker-fullwidth .ast-article-post{ padding:0 !important; }

/* -------------------------------------------------------------------------
   FIX OVERFLOW MÓVIL GLOBAL — evita que el contenido se salga a la derecha
   en móvil en TODAS las páginas (práctica, location, etc., no solo blog).
   ---------------------------------------------------------------------- */
html,body{ overflow-x:hidden !important; max-width:100%; }
body *{ box-sizing:border-box; }
/* contenedores de Elementor / widgets HTML no deben exceder el ancho */
.elementor,.elementor-widget-html,.elementor-widget-container{ max-width:100%; overflow-wrap:break-word; }
/* imágenes y iframes siempre dentro del ancho */
.elementor img,.elementor iframe,.elementor video{ max-width:100%; height:auto; }
/* en móvil, garantizar padding lateral mínimo y romper palabras largas */
@media(max-width:640px){
  .elementor .wrap,.elementor .iwrap,.elementor .co-wrap{ padding-left:20px !important; padding-right:20px !important; }
  .elementor p,.elementor h1,.elementor h2,.elementor h3,.elementor li{ overflow-wrap:break-word; word-wrap:break-word; }
}

/* -------------------------------------------------------------------------
   FIX CHECKBOX WPForms — Astra estira los checkboxes como si fueran inputs
   de texto (caja larga). Casilla a tamaño fijo; el texto fluye normal al lado.
   ---------------------------------------------------------------------- */
.wpforms-container input[type="checkbox"],
.wpforms-container input[type="radio"]{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  flex:none !important;
  margin:3px 10px 0 0 !important;
  padding:0 !important;
  float:left !important;
  border:1px solid #b5b5b5 !important;
  border-radius:3px !important;
  background:#fff !important;
  vertical-align:middle !important;
  -webkit-appearance:checkbox !important;
  -moz-appearance:checkbox !important;
  appearance:checkbox !important;
  box-shadow:none !important;
}
/* el <li> NO debe ser flex (eso apilaba el texto en vertical). Bloque normal. */
.wpforms-container .wpforms-field-checkbox ul li,
.wpforms-container .wpforms-field-gdpr-checkbox ul li,
.wpforms-container ul.wpforms-image-choices li{
  display:block !important;
  overflow:hidden;
}
/* el label ocupa el resto y el texto fluye normal (no letra a letra) */
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-gdpr-checkbox label,
.wpforms-container .wpforms-field-checkbox ul li label,
.wpforms-container .wpforms-field-gdpr-checkbox ul li label{
  display:block !important;
  width:auto !important;
  overflow:visible !important;
  white-space:normal !important;
  word-break:normal !important;
  font-family:'Lato',sans-serif;
  font-size:14px;
  line-height:1.5;
  color:#141414;
}



/* -------------------------------------------------------------------------
   2) HUECO PARA EL HEADER FIJO (.blg-global-header es position:fixed; 72px)
   En las páginas de Elementor el propio <style> ya pone padding-top:72px;
   aquí lo garantizamos también en blog, single, búsqueda y 404.
   ---------------------------------------------------------------------- */
body{ padding-top:72px; }
/* Landing pages Google Ads: header sticky, sin hueco de header fijo */
body.single-google-ad{ padding-top:0; }
body.single-google-ad .blg-header-landing{ position:sticky; top:0; }

/* =========================================================================
   3) BLOG  "Learn the Law"
   ========================================================================= */
.blg-blog{
  font-family:'Lato',sans-serif; color:var(--charcoal);
  background:var(--off-white); line-height:1.6;
}
.blg-blog *,
.blg-blog *::before,
.blg-blog *::after{ box-sizing:border-box; }
.blg-blog h1,.blg-blog h2,.blg-blog h3{ font-family:'Playfair Display',serif; }
.blg-blog a{ text-decoration:none; color:inherit; }
.blg-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* --- Hero --- */
.blg-blog-hero{
  position:relative; padding:96px 24px; text-align:center; color:#fff;
  background:var(--navy) center/cover no-repeat;
}
.blg-blog-hero::before{
  content:""; position:absolute; inset:0;
  background:transparent;
}
.blg-blog-hero > *{ position:relative; z-index:1; }
.blg-blog-hero h1{ font-size:clamp(34px,5vw,52px); margin:0 0 14px; color:#fff; }
.blg-blog-hero p{
  max-width:720px; margin:0 auto; font-size:18px; color:rgba(255,255,255,.85);
}

/* --- Filtros (pills) --- */
.blg-filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:32px 24px 8px;
}
.blg-filter{
  border:1px solid var(--border); background:#fff; color:var(--charcoal);
  font-size:14px; font-weight:600; padding:9px 18px; border-radius:999px;
  cursor:pointer; transition:all .15s; font-family:'Lato',sans-serif;
}
.blg-filter:hover{ border-color:var(--steel); color:var(--steel); }
.blg-filter.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* --- Featured --- */
.blg-featured-wrap{ padding:24px 0 8px; }
.blg-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.blg-featured-media{ position:relative; min-height:320px; background:var(--cream); }
.blg-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blg-featured-badge{
  position:absolute; top:16px; left:16px; background:var(--steel); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:4px;
}
.blg-featured-body{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
.blg-featured-cat{ color:var(--steel); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.blg-featured-body h2{ font-size:28px; margin:10px 0 14px; line-height:1.25; }
.blg-featured-body p{ color:var(--muted-fg); font-size:16px; margin-bottom:20px; }
.blg-meta{ display:flex; gap:16px; color:var(--muted-fg); font-size:13px; margin-bottom:18px; }
.blg-readmore{ color:var(--navy); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.blg-readmore::after{ content:"→"; }

/* --- Grid de recientes --- */
.blg-section-title{ font-size:26px; margin:48px 0 24px; }
.blg-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-bottom:8px;
}
.blg-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
}
.blg-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(20,20,20,.12); }
.blg-card-media{ height:188px; background:var(--cream); }
.blg-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blg-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blg-card-cat{ color:var(--steel); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.blg-card-body h3{ font-size:19px; line-height:1.3; margin:8px 0 10px; }
.blg-card-body p{ color:var(--muted-fg); font-size:14px; flex:1; }
.blg-card .blg-meta{ margin:14px 0 0; }

/* Filtro: ocultar tarjetas que no coinciden */
.blg-card.is-hidden,
.blg-featured.is-hidden{ display:none; }

.blg-empty{ text-align:center; color:var(--muted-fg); padding:40px 0; display:none; }
.blg-empty.is-visible{ display:block; }

/* --- CTA --- */
.blg-cta{ background:var(--navy); color:#fff; text-align:center; padding:64px 24px; margin-top:56px; }
.blg-cta h2{ font-family:'Playfair Display',serif; font-size:30px; margin:0 0 12px; color:#fff !important; }
.blg-cta p{ color:#fff; max-width:620px; margin:0 auto 24px; }
.blg-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.blg-btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:14px 28px; font-weight:700; font-size:14px; text-transform:uppercase;
	letter-spacing:.05em; border-radius:2px; text-decoration:none;
	transition:opacity .2s;
}
.blg-btn:hover{ opacity:.9; }
.blg-btn-gold{ background:var(--steel); color:#fff; border:1px solid var(--steel); }
.blg-btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff; }

@media(max-width:980px){
  .blg-featured{ grid-template-columns:1fr; }
  .blg-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .blg-grid{ grid-template-columns:1fr; }
  .blg-featured-body{ padding:28px; }
}

/* =========================================================================
   4) SINGLE (entrada individual)
   ========================================================================= */
.blg-single{ font-family:'Lato',sans-serif; color:var(--charcoal); background:var(--off-white); line-height:1.75; }
.blg-single h1,.blg-single h2,.blg-single h3{ font-family:'Playfair Display',serif; }
.blg-single a{ color:var(--steel); }
.blg-single-hero{ background:var(--navy); color:#fff; padding:72px 24px 56px; }
.blg-single-hero .blg-wrap{ max-width:820px; }
.blg-single-cat{ color:#9fc6e0; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.blg-single-hero h1{ font-size:clamp(30px,4.5vw,44px); margin:12px 0 16px; line-height:1.2; }
.blg-single-hero .blg-meta{ color:rgba(255,255,255,.75); }
.blg-single-figure{ max-width:920px; margin:-32px auto 0; padding:0 24px; }
.blg-single-figure img{ width:100%; border-radius:var(--radius); display:block; box-shadow:0 16px 40px rgba(20,20,20,.18); }
.blg-single-body{ max-width:760px; margin:0 auto; padding:48px 24px 8px; font-size:17px; }
.blg-single-body p{ margin:0 0 20px; }
.blg-single-body h2{ font-size:26px; margin:36px 0 14px; }
.blg-single-body h3{ font-size:21px; margin:28px 0 12px; }
.blg-single-body ul,.blg-single-body ol{ margin:0 0 20px 22px; }
.blg-single-body img{ max-width:100%; height:auto; border-radius:var(--radius); }
.blg-back{ display:block; max-width:760px; margin:8px auto 0; padding:0 24px 48px; }
.blg-back a{ color:var(--navy); font-weight:700; }

/* --- Blog "Learn the Law" a ANCHO COMPLETO sin sidebar (Astra Free) ---
   Aplica al LISTADO (.blog) y a la ENTRADA INDIVIDUAL (.single / .single-post).
   La entrada individual no llevaba estas reglas, por eso Astra le metía
   columna estrecha + hueco de sidebar (la franja vacía a la derecha). */
.blog #primary,
.blog #content > .ast-container,
.single #primary,
.single #content > .ast-container,
.single-post #primary,
.single-post #content > .ast-container{ max-width:100%; padding-left:0; padding-right:0; }
.blog #content > .ast-container,
.single #content > .ast-container,
.single-post #content > .ast-container{ display:block; }
.blog #secondary,
.blog .widget-area,
.single #secondary,
.single .widget-area,
.single-post #secondary,
.single-post .widget-area{ display:none; }
.blog #primary,
.single #primary,
.single-post #primary{ width:100%; flex:0 0 100%; max-width:100%; margin:0; }
.blog .site-content .ast-container,
.single .site-content .ast-container,
.single-post .site-content .ast-container{ width:100%; max-width:100%; }
/* el artículo de Astra sin padding propio que descuadre */
.single .ast-article-single,
.single-post .ast-article-single,
.single .ast-article-post,
.single-post .ast-article-post{ padding:0 !important; margin:0 !important; max-width:100%; }

/* === "Other Areas Served": CSS de secciones (clavado al mockup) === */
.oa-h2{font-family:'Playfair Display',serif;color:#0F3E5E;font-size:33px;font-weight:700;line-height:1.2;margin:0 0 22px;}
.oa-intro p{color:#3a3a3a;font-size:17px;line-height:1.75;max-width:1000px;margin:0;}
.oa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:6px 0 0;}
.oa-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;min-height:116px;background:#EDE8E0;border:0;border-radius:6px;color:#141414;font-weight:600;font-size:17px;text-decoration:none;text-align:center;transition:background .2s,transform .2s,box-shadow .2s;}
.oa-card:hover{background:#E5DFD4;transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,62,94,.10);}
.oa-card .icon{width:28px;height:28px;flex:0 0 28px;color:#0F3E5E;}
.oa-card span{line-height:1.2;}
.po-box{background:#EDE8E0;border-radius:6px;padding:42px 46px;}
.po-box h2{font-family:'Playfair Display',serif;color:#0F3E5E;font-size:29px;font-weight:700;margin:0 0 14px;}
.po-box>p{color:#6B6560;font-size:16px;line-height:1.6;margin:0 0 28px;}
.po-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.po-grid h3{color:#141414;font-size:18px;font-weight:700;margin:0 0 8px;}
.po-grid p{color:#6B6560;font-size:15px;line-height:1.6;margin:0 0 6px;}
.po-grid a{color:#2A6F97;text-decoration:none;font-size:15px;font-weight:600;}
.po-grid a:hover{text-decoration:underline;}
.isec:has(.oa-state){display:none;}
@media(max-width:980px){.oa-grid{grid-template-columns:repeat(2,1fr);}.po-grid{grid-template-columns:1fr;gap:24px;}.po-box{padding:32px 26px;}}

/* =========================================================================
   v4 — Ajustes globales de PÁGINAS (hero, botones, imágenes, fichas)
   Estas clases viven en el HTML Elementor de las páginas. Se cargan aquí
   para aplicarse de forma centralizada en todo el sitio.
   ========================================================================= */

/* (5) Contraste hero: overline blanco + más grande */
.hero-overline span{color:#fff !important;font-size:12px !important;}
.hero-overline .line{background:rgba(255,255,255,.6) !important;}

/* (5) Estrellas de rating en testimonials -> dorado */
.pg-hero .extra .stars{color:#FACC15 !important;}
.rev-rating .stars{color:#FACC15 !important;}

/* (7) Encuadre uniforme de imágenes de hero (menos cielo, misma altura) */
.pg-hero,.hero{height:420px !important;}
.pg-hero img,.hero img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 60% !important;}

/* (9) Hover de botones del hero: el texto SIEMPRE blanco (evita azul invisible) */
.btn-steel:hover,.btn-lg:hover,.btn-steel:hover .icon,.btn-lg:hover .icon{color:#fff !important;}
.btn-outline-w:hover{color:#fff !important;}

/* (20) Fichas de abogado: bloque .hours-box -> textos en blanco */
.hours-box h3{color:#fff !important;}
.hours-box p{color:#fff !important;}

/* =========================================================================
   v4 — WPForms (form 13718): se apunta DIRECTO al form por ID, sin depender
   del div .form-largo/.form-lateral (Elementor a veces lo elimina al render).
   Doble selector: por ID y por clase envoltorio, para cubrir ambos casos.
   ========================================================================= */
#wpforms-13718 .wpforms-form,#wpforms-100689 .wpforms-form,
.form-largo .wpforms-form,.form-lateral .wpforms-form{font-family:'Lato',sans-serif !important;}
div.wpforms-container-full{margin:0 !important;}

/* contenedor de cada campo */
#wpforms-13718 div.wpforms-field,#wpforms-100689 div.wpforms-field,
.form-largo div.wpforms-field,.form-lateral div.wpforms-field{
  padding:0 0 16px !important;margin:0 !important;border:0 !important;}

/* LABEL principal: pequeño, mayúsculas (el problema era el tamaño enorme) */
#wpforms-13718 .wpforms-field-label,#wpforms-100689 .wpforms-field-label,
.form-largo .wpforms-field-label,.form-lateral .wpforms-field-label{
  font-size:11px !important;font-weight:700 !important;text-transform:uppercase !important;
  letter-spacing:.15em !important;color:var(--muted-fg) !important;
  margin:0 0 6px !important;line-height:1.3 !important;display:block !important;
  font-family:'Lato',sans-serif !important;}
/* algunos temas meten el texto del label en un <span>: forzar tamaño tambien */
#wpforms-13718 .wpforms-field-label *,#wpforms-100689 .wpforms-field-label *{font-size:inherit !important;}

#wpforms-13718 .wpforms-required-label,#wpforms-100689 .wpforms-required-label,
.form-largo .wpforms-required-label,.form-lateral .wpforms-required-label{color:#b91c1c !important;}

/* sublabels "First / Last" */
#wpforms-13718 .wpforms-field-sublabel,#wpforms-100689 .wpforms-field-sublabel,
.form-largo .wpforms-field-sublabel,.form-lateral .wpforms-field-sublabel{
  font-size:11px !important;color:var(--muted-fg) !important;text-transform:none !important;
  letter-spacing:0 !important;font-weight:400 !important;margin-top:4px !important;line-height:1.3 !important;}

/* INPUTS / SELECT / TEXTAREA */
#wpforms-13718 .wpforms-field input[type=text],#wpforms-100689 .wpforms-field input[type=text],
#wpforms-13718 .wpforms-field input[type=email],#wpforms-100689 .wpforms-field input[type=email],
#wpforms-13718 .wpforms-field input[type=tel],#wpforms-100689 .wpforms-field input[type=tel],
#wpforms-13718 .wpforms-field select,#wpforms-100689 .wpforms-field select,
#wpforms-13718 .wpforms-field textarea,#wpforms-100689 .wpforms-field textarea,
.form-largo .wpforms-field input,.form-largo .wpforms-field select,.form-largo .wpforms-field textarea,
.form-lateral .wpforms-field input,.form-lateral .wpforms-field select,.form-lateral .wpforms-field textarea{
  width:100% !important;max-width:100% !important;padding:12px 14px !important;
  border:1px solid var(--border) !important;border-radius:var(--radius) !important;
  font-family:'Lato',sans-serif !important;font-size:14px !important;line-height:1.4 !important;
  background:#fff !important;color:var(--charcoal) !important;box-sizing:border-box !important;
  box-shadow:none !important;height:auto !important;margin:0 !important;}
#wpforms-13718 .wpforms-field textarea,#wpforms-100689 .wpforms-field textarea{resize:none !important;min-height:120px !important;}

/* ocultar descripciones largas */
#wpforms-13718 .wpforms-field-description,#wpforms-100689 .wpforms-field-description,
.form-largo .wpforms-field-description,.form-lateral .wpforms-field-description{display:none !important;}

/* BOTÓN enviar: navy, ancho completo */
#wpforms-13718 button.wpforms-submit,#wpforms-100689 button.wpforms-submit,
.form-largo button.wpforms-submit,.form-lateral button.wpforms-submit{
  width:100% !important;background:var(--navy) !important;color:#fff !important;border:0 !important;
  border-radius:var(--radius) !important;font-family:'Lato',sans-serif !important;font-weight:700 !important;
  padding:15px !important;font-size:14px !important;text-transform:uppercase !important;letter-spacing:.08em !important;
  cursor:pointer !important;transition:background .2s !important;}
#wpforms-13718 button.wpforms-submit:hover,#wpforms-100689 button.wpforms-submit:hover,
.form-largo button.wpforms-submit:hover,.form-lateral button.wpforms-submit:hover{background:#0c3350 !important;}

/* LATERAL: tarjeta compacta (cuando el div SÍ existe) */
.form-lateral{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.form-lateral div.wpforms-field{padding:0 0 12px !important;}
.form-lateral button.wpforms-submit{padding:11px !important;}

/* --- Ficha de abogado (CPT attorney) a ANCHO COMPLETO sin sidebar --- */
.single-attorney #primary,
.single-attorney #content > .ast-container{ max-width:100%; padding-left:0; padding-right:0; }
.single-attorney #content > .ast-container{ display:block; }
.single-attorney #secondary,
.single-attorney .widget-area{ display:none; }
.single-attorney #primary{ width:100%; flex:0 0 100%; max-width:100%; margin:0; }
.single-attorney .site-content .ast-container{ width:100%; max-width:100%; }
.single-attorney .ast-article-single,
.single-attorney .ast-article-post{ padding:0 !important; margin:0 !important; max-width:100%; }

/* === v4.8: Fix desbordamiento horizontal en móvil (completo) === */
/* Muchos contenedores (.hero-content, .contact-inner, .intro-inner, .pa-inner, etc.)
   usan padding:0 40px sin reducirlo en móvil, lo que empuja el contenido fuera de
   la pantalla en dispositivos estrechos. Se reduce el padding lateral en móvil. */
@media(max-width:640px){
  html, body{ overflow-x:hidden; max-width:100%; }
  /* Reducir padding lateral de todos los contenedores principales */
  .hero-content, .contact-inner, .intro-inner, .pa-inner, .stats-grid,
  .testimonials-inner, .badges-inner, .cta-inner, .why-cta,
  .contact-form-wrap, .foot-inner, .off-grid, .svc-grid, .loc-grid,
  .bento, .istats, .why-grid, .why-items, .values-grid, .rev-grid,
  .wrap, .grid{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  /* Reducir gaps grandes que también empujan contenido */
  .contact-inner, .intro-inner, .loc-grid{ gap:32px !important; }
  /* Evitar que texto con nowrap se salga */
  .cta-l{ white-space:normal !important; }
  /* Imágenes y media nunca exceden el ancho */
  img, iframe, video, table{ max-width:100% !important; height:auto; }
}


/* -------------------------------------------------------------------------
   FIX OVERFLOW REFORZADO — páginas de práctica (.hero) y todas.
   Ataca contenedores y el panel del menú que puede desbordar en móvil.
   ---------------------------------------------------------------------- */
/* contención dura a nivel raíz */
html{ overflow-x:hidden !important; }
body{ overflow-x:hidden !important; max-width:100vw !important; position:relative; }
#page,.site,.ast-container,.site-content,.entry-content,main,.elementor{ overflow-x:hidden !important; max-width:100% !important; }
/* secciones y contenedores de las páginas nunca exceden el ancho */
.hero,.body-section,.wrap,.grid,.main-col,.pg-hero,.iwrap,.isec,.co-wrap,.faq-accordion-section,.faq-acc-wrap{
  max-width:100% !important;
  box-sizing:border-box !important;
}
/* el panel del menú desplegable (min-width 230px) no debe forzar scroll en móvil */
@media(max-width:640px){
  .dd-panel,.dd-loc,.dd-sub{ min-width:0 !important; max-width:100vw !important; }
  .hero,.body-section,.wrap,.grid{ padding-left:0 !important; padding-right:0 !important; }
  .wrap,.iwrap,.co-wrap{ padding-left:20px !important; padding-right:20px !important; }
  /* romper palabras largas y URLs que desbordan */
  .main-col,.main-col *,.body-section p,.body-section li,.body-section h2,.body-section h3{
    overflow-wrap:break-word !important; word-break:break-word !important; max-width:100% !important;
  }
}


/* -------------------------------------------------------------------------
   FIX TÍTULO BLOG — el header azul del post ponía el título en negro
   (Astra sobrescribe). Forzar blanco.
   ---------------------------------------------------------------------- */
.blg-single-hero h1,
.blg-single-hero .entry-title,
.blg-single-hero a{ color:#fff !important; }
.blg-single-hero .blg-meta,
.blg-single-hero .blg-meta *{ color:rgba(255,255,255,.8) !important; }

/* -------------------------------------------------------------------------
   FIX LOGOS — el CSS inline de las páginas aplica mix-blend-mode:screen al
   logo, que sobre el fondo navy lo vuelve invisible. Lo anulamos.
   ---------------------------------------------------------------------- */
.hdr-logo img,.foot-logo img,
.blg-global-header .hdr-logo img,.blg-global-footer .foot-logo img{
  mix-blend-mode:normal !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* ==========================================================================
   1. WPForms GDPR Checkbox Fix (confirmado en vivo)
   - El problema: WPForms "Modern" pinta un checkbox FALSO (pseudo-elemento)
     encima, además del nativo. Anulamos el falso y mostramos el nativo.
   ========================================================================== */
.wpforms-render-modern .wpforms-field-gdpr-checkbox input[type="checkbox"],
.wpforms-render-modern .wpforms-field-gdpr-checkbox input[type="radio"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    margin: 3px 8px 0 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
}
.wpforms-render-modern .wpforms-field-gdpr-checkbox input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: radio !important;
}
/* apagar el checkbox FALSO de WPForms Modern (pseudo-elementos) */
.wpforms-render-modern .wpforms-field-gdpr-checkbox input[type="checkbox"]::before,
.wpforms-render-modern .wpforms-field-gdpr-checkbox input[type="checkbox"]::after,
.wpforms-render-modern .wpforms-field-gdpr-checkbox li label::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
}
/* título "Privacy" arriba; checkbox + texto en fila */
.wpforms-container .wpforms-field-gdpr-checkbox > .wpforms-field-label {
    display: block !important;
    margin-bottom: 8px !important;
}
.wpforms-container .wpforms-field-gdpr-checkbox ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.wpforms-container .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
    display: block !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: normal !important;
    flex: 1 !important;
}

/* ==========================================================================
   2. Mobile Text Squashing/Overflow Fix
   ========================================================================== */
.main-col,
.main-col *,
.grid,
.wrap {
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
}
.main-col p,
.main-col h2,
.main-col h3,
.main-col ul li {
    max-width: 100% !important;
    white-space: normal !important;
}


/* ===== FAQ acordeón (páginas regeneradas) ===== */
.faq-accordion{margin:8px 0 8px}
.faq-item{border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px;overflow:hidden;background:#fff}
.faq-item .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:'Playfair Display',serif;font-size:18px;color:var(--navy);font-weight:600;
  padding:18px 48px 18px 20px;position:relative;display:block}
.faq-item .faq-ic{position:absolute;right:20px;top:50%;width:14px;height:14px;transform:translateY(-50%)}
.faq-item .faq-ic::before,.faq-item .faq-ic::after{content:"";position:absolute;background:var(--steel);
  left:50%;top:50%;transition:transform .2s}
.faq-item .faq-ic::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-item .faq-ic::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item.open .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:1200px}
.faq-item .faq-a p{font-family:'Lato',sans-serif;color:var(--muted-fg);font-size:16px;
  line-height:1.7;padding:0 20px 18px;margin:0}


/* FIX menú Locations: el estado con enlace (Colorado) alineado como los <span> */
.hdr-nav .dd-loc .dd-state>a{padding:0;margin:0;display:block;flex:1;color:inherit;
  text-transform:none;font-size:14px;letter-spacing:0;font-weight:500;background:none;}
.hdr-nav .dd-loc .dd-state:hover>a{color:var(--navy);}


/* ============================================================
   v8 — Landing pages (CPT google-ad): estados :hover de botones .lp-*
   Astra aplica su color de enlace en :hover y el texto blanco desaparecía.
   Mismo patrón que .btn-steel/.btn-outline-w (líneas ~315).
   ============================================================ */

/* Botones azules -> navy más oscuro, texto e icono SIEMPRE blancos */
.lp-btn.lp-btn-steel:hover, .lp-btn.lp-btn-steel:focus,
.lp-att-primary:hover, .lp-att-primary:focus,
.lp-cta-btn.lp-cta-steel:hover, .lp-cta-btn.lp-cta-steel:focus{
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:#fff !important;
}
.lp-btn.lp-btn-steel:hover *, .lp-att-primary:hover *, .lp-cta-btn.lp-cta-steel:hover *{
  color:#fff !important;
}
.lp-btn.lp-btn-steel:hover svg, .lp-att-primary:hover svg, .lp-cta-btn.lp-cta-steel:hover svg{
  color:#fff !important; stroke:#fff !important;
}

/* Botones outline sobre fondo oscuro -> matiz blanco + borde blanco */
.lp-btn.lp-btn-out:hover, .lp-btn.lp-btn-out:focus,
.lp-cta-btn.lp-cta-out:hover, .lp-cta-btn.lp-cta-out:focus{
  background:rgba(255,255,255,.16) !important;
  border-color:#fff !important;
  color:#fff !important;
}
.lp-btn.lp-btn-out:hover *, .lp-cta-btn.lp-cta-out:hover *{ color:#fff !important; }
.lp-btn.lp-btn-out:hover svg, .lp-cta-btn.lp-cta-out:hover svg{
  color:#fff !important; stroke:#fff !important;
}

/* Enlace de texto de la ficha de abogado -> navy subrayado */
.lp-att-more:hover, .lp-att-more:focus{
  color:var(--navy) !important; text-decoration:underline !important;
}
.lp-att-more:hover svg{ color:var(--navy) !important; stroke:var(--navy) !important; }


/* ============================================================
   v9.2 — Hero móvil de las landings (CPT google-ad)
   Solo afecta a páginas single google-ad (.single-google-ad en <body>)
   y solo en móvil. Cambia el fondo del hero (1ª sección) por la
   versión vertical recortada. No toca ninguna otra página.
   background-size:100% auto (no "cover") porque la altura de la
   sección es "auto" y varía según el contenido de cada landing;
   con "cover" el navegador a veces escala por altura y recorta
   los lados (solo se ven 2 de las 4 personas). Con 100% auto el
   ancho siempre se ajusta al viewport y nunca hay recorte lateral;
   si una landing tiene más texto y la sección crece más alta que
   la imagen, debajo simplemente se ve el background_color navy
   ya definido en Elementor (no hay salto visual raro).
   ============================================================ */
@media (max-width:767px){
  body.single-google-ad .elementor-section.elementor-top-section:first-of-type{
    background-image:url('/images/hero-landing-mobile.jpg') !important;
    background-position:center top !important;
    background-size:100% auto !important;
    background-repeat:no-repeat !important;
  }
}

/* =========================================================================
   v9.17 — BLOG: filtri come link, placeholder anteprima, pulsante Load more
   ========================================================================= */

/* I filtri ora sono <a> e non <button>: servono le stesse regole visive. */
.blg-filters a.blg-filter{ text-decoration:none !important; display:inline-block; }
.blg-filters a.blg-filter:hover{ text-decoration:none !important; }

/* Contatore accanto al titolo della categoria */
.blg-section-title .blg-count{
  font-family:'Lato',sans-serif; font-size:13px; font-weight:400;
  color:#6B6560; letter-spacing:.04em; margin-left:10px; white-space:nowrap;
}

/* Placeholder quando il post non ha ne featured image ne immagini nel testo:
   senza questo la card restava vuota e la griglia si sfalsava. */
.blg-thumb-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:180px;
  background:#EDE8E0; color:#0F3E5E;
}
.blg-thumb-ph span{
  font-family:'Playfair Display',serif; font-size:34px; font-weight:700;
  letter-spacing:.06em; opacity:.35;
}

/* Le immagini delle card non devono deformarsi */
.blg-card-media img,
.blg-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Pulsante Load more */
.blg-more-wrap{ display:flex; justify-content:center; margin:36px 0 8px; }
.blg-more{
  font-family:'Lato',sans-serif; font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  background:#0F3E5E; color:#fff; border:0; border-radius:6px;
  padding:15px 34px; cursor:pointer; transition:background .2s;
  text-decoration:none !important;
}
.blg-more:hover{ background:#0c3350; }
.blg-more[data-loading="1"]{ opacity:.65; cursor:default; }


/* =========================================================================
   v9.18 — Pagine avvocato: video singolo centrato
   Quando nella griglia video c'e' UNA sola card, la griglia a due colonne
   lasciava meta' spazio vuoto. :only-child scatta solo in quel caso, quindi
   le pagine con due video (Ashley, Jereme) restano invariate.
   ========================================================================= */
.vid-grid > .vid-card:only-child{
  grid-column:1 / -1;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.vid-grid.vid-single{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;}