/* ──────────────────────────────────────────────────────────────────────────
   restyle-v2.css · Editorial monocromo (D-039)
   ──────────────────────────────────────────────────────────────────────────
   Sobreescribe el look de exajuridico.com para llevarlo a la propuesta v2:
   crema #FFFFFF + negro tinta + acento verde forest #1F3A5F + Newsreader
   serif gigante + Inter + JetBrains Mono. NO toca SEO, JSON-LD ni HTML.

   Cargado vía <link> en <head> después del <style> inline existente, así
   las reglas con misma especificidad ganan por orden y donde no, usamos
   !important para vencer estilos inline o variables del kit Elementor 15.
   ────────────────────────────────────────────────────────────────────────── */

/* ——— Fuentes ——— */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&display=swap");

/* ——— Tokens v2 ——— */
:root,
html {
  /* Paleta v2 — sobreescribe los exa-* del kit Elementor */
  --paper:        #FFFFFF;
  --paper-2:      #EEF1F4;
  --ink:          #0E1A2B;
  --ink-2:        #2A3C52;
  --ink-soft:     #3D4F65;
  --ink-dim:      #65758E;
  --rule:         #E2E6EB;
  --rule-strong:  #0E1A2B;
  --accent:       #1F3A5F;   /* forest green */
  --accent-soft:  #C0CDDA;
  --accent-tint:  #DCE3EC;

  /* Aliases del kit existente — quedan re-mapeados */
  --exa-primary:    #1F3A5F !important;
  --exa-primary-2:  #142841 !important;
  --exa-secondary:  #0E1A2B !important;
  --exa-text:       #3D4F65 !important;
  --exa-accent:     #0E1A2B !important;
  --exa-teal:       #1F3A5F !important;
  --exa-teal-dk:    #142841 !important;
  --exa-bg-alt:     #EEF1F4 !important;
  --exa-blue-light: #C0CDDA !important;
  --exa-blue-mid:   #B5C4BD !important;
  --exa-deep:       #142841 !important;
  --exa-line:       #E2E6EB !important;
  --exa-line-2:     #D6D2C5 !important;
  --exa-line-3:     #E2E6EB !important;
  --exa-coral:      #1F3A5F !important;
  --exa-white:      #FFFFFF !important;
  --exa-black:      #0E1A2B !important;

  --bg:        #FFFFFF !important;
  --bg-2:      #FFFFFF !important;
  --ink:       #0E1A2B !important;
  --ink-soft:  #3D4F65 !important;
  --ink-dim:   #65758E !important;
  --rule:      #E2E6EB !important;
  --accent:    #1F3A5F !important;
  --link:      #1F3A5F !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FONDO Y FONDOS DECORATIVOS
   El home original tiene blobs animados (body::before/::after) y .grain.
   Para el v2 monocromo: quitar blobs (sin gradientes) y reducir grain.
   ────────────────────────────────────────────────────────────────────────── */
html, body { background: #FFFFFF !important; color: #0E1A2B !important; }
body { font-family: "Inter", system-ui, -apple-system, sans-serif !important; line-height: 1.55; }
body::before, body::after { display: none !important; }
.grain { opacity: 0.08 !important; }

/* ——— Typography reset ——— */
.serif { font-family: "Newsreader", Georgia, serif !important; }
.mono  { font-family: "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: 0.04em; }

/* Links — verde forest, hover negro */
a { color: var(--accent) !important; }
a:hover { color: #0E1A2B !important; }

/* ──────────────────────────────────────────────────────────────────────────
   HEADER (.bar)
   ────────────────────────────────────────────────────────────────────────── */
.bar {
  background: rgba(250, 250, 247, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #E2E6EB !important;
  padding: 18px 32px !important;
}
.brand b {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  color: #0E1A2B !important;
}
.brand span {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  color: #65758E !important;
  letter-spacing: 0.18em !important;
}
.bar nav { gap: 28px !important; }
.bar nav a {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: #3D4F65 !important;
  letter-spacing: 0.16em !important;
}
.bar nav a:hover, .bar nav a.active { color: #0E1A2B !important; }
.bar .cta-mini {
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  color: #0E1A2B !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  padding: 9px 16px !important;
  font-weight: 500 !important;
}
.bar .cta-mini:hover { background: #0E1A2B !important; color: #FFFFFF !important; }

/* ──────────────────────────────────────────────────────────────────────────
   HERO STAGE — quitar shader, globo, scan, corners y borde de tarjeta
   El v2 es plano, sin marcos ni canvas WebGL.
   ────────────────────────────────────────────────────────────────────────── */
.stage {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #E2E6EB !important;
}
.stage::before, .stage::after { display: none !important; }
#hero-shader { display: none !important; }
.exa-globe { display: none !important; }
.corner { display: none !important; }
.label { display: none !important; }
#fx-canvas { display: none !important; }

.hero-wrap {
  padding: 80px 6vw 100px !important;
  max-width: 1240px;
  margin: 0 auto;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 72px !important;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-wrap { grid-template-columns: 1fr !important; gap: 48px !important; padding: 56px 6vw 72px !important; }
}

/* ——— Eyebrow / kicker ——— */
.eyebrow {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: #65758E !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 24px !important;
}
.eyebrow::before {
  content: "—" !important;
  display: inline-block;
  margin-right: 12px;
  color: #0E1A2B;
}
.eyebrow .pip { display: none !important; }

/* ——— H1 hero ——— */
.hero-content h1,
.page-hero h1,
.stage h1,
section h1,
main h1,
h1#hero-title,
h1[id*="-title"] {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 6vw, 88px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: #0E1A2B !important;
  margin: 0 0 24px !important;
}
.hero-content h1 em,
.page-hero h1 em,
.stage h1 em,
section h1 em,
main h1 em {
  font-style: italic !important;
  color: #1F3A5F !important;
  font-weight: 500 !important;
}
.hero-content h1 em,
.hero-content h1 .w {
  font-style: italic !important;
  color: #1F3A5F !important;
  font-weight: 500 !important;
}
.hero-content h1 .w[data-fx="wind"] {
  color: #1F3A5F !important;
  animation: none !important;
}
.hero-content h1 .w[data-fx="wind"]::after { display: none !important; }

.hero-content p.lead {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(15.5px, 1.1vw, 18px) !important;
  color: #2A3C52 !important;
  max-width: 58ch !important;
  line-height: 1.55 !important;
  margin: 0 0 28px !important;
}

/* ——— Botones ——— */
.btn {
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  padding: 14px 22px !important;
  transition: transform .15s, background .15s, color .15s !important;
  border: 1px solid transparent !important;
}
.btn--primary {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-color: #0E1A2B !important;
}
.btn--primary:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
  color: #FFFFFF !important;
  transform: none !important;
}
.btn--ghost {
  background: transparent !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
}
.btn--ghost:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-color: #0E1A2B !important;
}

/* Hero bullets — minimal con guion + acento verde forest */
.hero-bullets {
  border-top: 1px solid #E2E6EB !important;
  padding-top: 22px !important;
  margin-top: 30px !important;
}
.hero-bullets li {
  font-family: "Inter", sans-serif !important;
  font-size: 13.5px !important;
  color: #3D4F65 !important;
}
.hero-bullets li::before {
  background: transparent !important;
  border: 1.5px solid #1F3A5F !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
}

/* Hero visual — borde fino, sin sombra, sin filter, sin tag flotante coloreado */
.hero-visual {
  border-radius: 0 !important;
  border: 1px solid #E2E6EB !important;
  box-shadow: none !important;
  background: #EEF1F4 !important;
}
.hero-visual::after { display: none !important; }
.hero-visual img { filter: grayscale(0.15) contrast(1.02) !important; }
.hero-visual__tag {
  background: #FFFFFF !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.14em !important;
}

/* Form compacto del hero — paleta cream + bordes finos negros */
.exa-lead-form--compact {
  background: #FFFFFF !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.exa-lead-form--compact .exa-lead-form-eyebrow {
  font-family: "JetBrains Mono", monospace !important;
  color: #65758E !important;
}
.exa-lead-form--compact .exa-lead-form-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  color: #0E1A2B !important;
  letter-spacing: -0.015em !important;
}
.exa-lead-form--compact .exa-lead-form-title em {
  color: #1F3A5F !important;
  font-style: italic !important;
}
.exa-lead-form--compact .exa-lead-form-field input,
.exa-lead-form--compact .exa-lead-form-field select,
.exa-lead-form--compact .exa-lead-form-select {
  border-radius: 0 !important;
  border: 1px solid #E2E6EB !important;
  background: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
}
.exa-lead-form--compact .exa-lead-form-submit {
  background: #0E1A2B !important;
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}
.exa-lead-form--compact .exa-lead-form-submit:hover {
  background: #1F3A5F !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   META TOP (kicker bar encima del hero)
   ────────────────────────────────────────────────────────────────────────── */
.meta {
  font-family: "JetBrains Mono", monospace !important;
  color: #65758E !important;
  border-bottom: 1px solid #E2E6EB;
  padding: 18px 32px !important;
}
.meta .title {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic !important;
  color: #0E1A2B !important;
}
.meta .title em { color: #1F3A5F !important; font-style: italic !important; }

/* ──────────────────────────────────────────────────────────────────────────
   SECCIONES GENÉRICAS (.band)
   ────────────────────────────────────────────────────────────────────────── */
section.band {
  padding: 100px 32px !important;
  background: #FFFFFF !important;
}
section.band--alt {
  background: #EEF1F4 !important;
  border-block: 1px solid #E2E6EB !important;
}
.section-head {
  margin: 0 auto 64px !important;
  max-width: 760px !important;
}
.section-head .kicker {
  font-family: "JetBrains Mono", monospace !important;
  color: #1F3A5F !important;
  letter-spacing: 0.18em !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.section-head h2 {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 4.4vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #0E1A2B !important;
  margin: 0 0 16px !important;
}
.section-head h2 em {
  font-style: italic !important;
  color: #1F3A5F !important;
  font-weight: 500 !important;
}
.section-head p {
  font-family: "Inter", sans-serif !important;
  color: #3D4F65 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   GRID DE SERVICIOS (.svc)
   Tarjetas planas con borde fino, sin glassmorphism.
   ────────────────────────────────────────────────────────────────────────── */
.svc {
  background: #FFFFFF !important;
  border: 1px solid #E2E6EB !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  padding: 36px 32px 32px !important;
  transition: border-color .2s, transform .2s !important;
}
.svc:hover {
  border-color: #0E1A2B !important;
  transform: none !important;
  box-shadow: none !important;
}
.svc__icon {
  background: transparent !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  color: #0E1A2B !important;
  width: 42px !important;
  height: 42px !important;
}
.svc:hover .svc__icon {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}
.svc__num {
  font-family: "JetBrains Mono", monospace !important;
  color: #65758E !important;
  letter-spacing: 0.16em !important;
}
.svc h3 {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  letter-spacing: -0.015em !important;
  color: #0E1A2B !important;
  margin: 0 0 12px !important;
}
.svc p {
  font-family: "Inter", sans-serif !important;
  font-size: 14.5px !important;
  color: #3D4F65 !important;
  line-height: 1.55 !important;
}
.svc__link {
  font-family: "JetBrains Mono", monospace !important;
  color: #1F3A5F !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
}
.svc:hover .svc__link { color: #0E1A2B !important; }

/* ──────────────────────────────────────────────────────────────────────────
   TABLA COMPARATIVA (Information Gain)
   ────────────────────────────────────────────────────────────────────────── */
.ig-table-wrap { border: 0 !important; }
.ig-table {
  background: #FFFFFF !important;
  border: 1px solid #E2E6EB !important;
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
}
.ig-table caption {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic !important;
  color: #3D4F65 !important;
}
.ig-table thead th {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.ig-table thead th.col-exa { background: #1F3A5F !important; }
.ig-table tbody td {
  border-top: 1px solid #E2E6EB !important;
  color: #2A3C52 !important;
}
.ig-table tbody td.criterio {
  font-family: "JetBrains Mono", monospace !important;
  color: #0E1A2B !important;
  letter-spacing: 0.1em !important;
}
.ig-table tbody td.exa { background: #DCE3EC !important; color: #0E1A2B !important; }
.ig-table tbody tr:hover td.exa { background: #C0CDDA !important; }

/* ──────────────────────────────────────────────────────────────────────────
   RESEÑAS / TESTIMONIOS — si usan .testimonial o similar
   ────────────────────────────────────────────────────────────────────────── */
blockquote, .testimonial, .review {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic !important;
  color: #0E1A2B !important;
}

/* FAQ items */
details {
  border-top: 1px solid #E2E6EB !important;
  border-bottom: 0 !important;
}
details summary {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  color: #0E1A2B !important;
  padding: 22px 0 !important;
}
details[open] summary { color: #1F3A5F !important; }
details p {
  font-family: "Inter", sans-serif !important;
  color: #3D4F65 !important;
  line-height: 1.6 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PRECIOS (.consulta-express, .crea-empresa, .contratos-express)
   Aplanamos el degradado de fondo y usamos cream sólido.
   ────────────────────────────────────────────────────────────────────────── */
#consulta-express, #crea-empresa-banner, #contratos-express {
  background: #FFFFFF !important;
  border-block: 1px solid #E2E6EB !important;
}
#consulta-express + section, #contratos-express + section { background: #EEF1F4 !important; }

/* Cards de precio — algunas heredan estilos inline. Usamos selectores agresivos. */
[id$="-express"] [class*="card"],
[id$="-banner"] [class*="card"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E6EB !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FOOTER (.site-foot)
   ────────────────────────────────────────────────────────────────────────── */
.site-foot {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-top: 0 !important;
}
.site-foot a { color: #FFFFFF !important; }
.site-foot a:hover { color: #1F3A5F !important; }
.site-foot h3, .site-foot h4 {
  font-family: "JetBrains Mono", monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.site-foot small, .site-foot .legal {
  font-family: "JetBrains Mono", monospace !important;
  color: rgba(250,250,247,.55) !important;
  letter-spacing: 0.04em !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CTA STICKY MOBILE — la barra flotante .exa-mobile-cta y .cro-sticky-bar
   ────────────────────────────────────────────────────────────────────────── */
.exa-mobile-cta, .cro-sticky-bar {
  background: rgba(250, 250, 247, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid #0E1A2B !important;
}
.exa-mobile-cta a, .cro-sticky-bar a {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  letter-spacing: 0.01em !important;
}
.exa-mobile-cta .btn--primary, .cro-sticky-bar .btn--primary {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   LEX WIDGET — adaptar paleta del bot al monocromo
   ────────────────────────────────────────────────────────────────────────── */
.lex-fab {
  background: #0E1A2B !important;
}
.lex-fab:hover { background: #1F3A5F !important; }
.lex-panel-header {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   LIMPIEZA DE GRADIENTES INLINE (style="background:linear-gradient...")
   No podemos quitarlos sin tocar HTML, pero podemos forzar fondo plano cream
   en las secciones marcadas con id conocidos.
   ────────────────────────────────────────────────────────────────────────── */
section[style*="linear-gradient"] {
  background: #FFFFFF !important;
}
section.band--alt[style*="linear-gradient"] {
  background: #EEF1F4 !important;
}

/* H2 inline con color override (Crea tu empresa) y AEO band sin .section-head */
h2[style*="--exa-primary"], h2[style*="--exa-teal"], h2[id*="-title"],
.aeo-band h2, .aeo-tldr h2, section.band h2, section.band h3 {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  color: #0E1A2B !important;
  letter-spacing: -0.02em !important;
}
h2[style*="--exa-primary"] em, h2[style*="--exa-teal"] em, h2[id*="-title"] em,
.aeo-band h2 em, .aeo-tldr h2 em, section.band h2 em {
  font-style: italic !important;
  color: #1F3A5F !important;
  font-weight: 500 !important;
}
.aeo-tldr h3 { font-size: 22px !important; font-weight: 500 !important; margin-top: 8px !important; }

/* ──────────────────────────────────────────────────────────────────────────
   PRINT — sin colores ni fondos
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .stage, section.band { background: #fff !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.1 — REFINAMIENTOS POST-AUDITORÍA (D-039 segunda pasada)          ║
   ║  Arregla: trust-strip gradiente, WA FAB verde, logo color, inputs    ║
   ║  con 10px radius, lex disclaimer amarillo, .svc heredando link verde,║
   ║  cro-sticky-bar Montserrat, viñetas + chips + tipografía afinada.    ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

/* ——— Trust strip top (la barra dark con "10 reseñas 5★ · 100% online · …") ——— */
.exa-trust-strip {
  background: #0E1A2B !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 11px 32px !important;
  border-bottom: 0 !important;
}
.exa-trust-strip-item {
  font-family: "JetBrains Mono", monospace !important;
  color: #FFFFFF !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.exa-trust-strip-item svg {
  fill: #FFFFFF !important;
  opacity: 0.75 !important;
  width: 11px !important;
  height: 11px !important;
}
.exa-trust-strip-sep,
.exa-trust-strip-item::after {
  color: rgba(250, 250, 247, 0.35) !important;
}

/* ——— Logo brand: convertir el PNG colorido en monocromo tinta ——— */
.brand .dot,
.brand img {
  filter: grayscale(1) contrast(1.1) brightness(0.05) !important;
  width: 28px !important;
  height: 28px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   WHATSAPP FAB — versión premium (V2.5)
   Bola verde brand con icono blanco grande y centrado. Gradiente sutil
   en lugar de plano. Inner highlight ring. Drop-shadow del icono para
   profundidad. Pulse animado calmo en lugar de halo estático.
   ────────────────────────────────────────────────────────────────────────── */
.wa-fab {
  background: linear-gradient(135deg, #2EE070 0%, #25D366 50%, #1FBE5A 100%) !important;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 14px 32px -10px rgba(37,211,102,0.55),
    0 6px 14px -4px rgba(37,211,102,0.35),
    0 0 0 6px rgba(37,211,102,0.10) !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: fixed !important;
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
}
.wa-fab:hover {
  background: linear-gradient(135deg, #25D366 0%, #1EBE57 50%, #15A049 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 22px 44px -12px rgba(30,190,87,0.6),
    0 8px 18px -4px rgba(30,190,87,0.4),
    0 0 0 10px rgba(37,211,102,0.15) !important;
  transform: translateY(-2px) scale(1.04) !important;
}
/* Icono SVG dentro del FAB: 32px, centrado perfecto, sin margen extra,
   con un drop-shadow muy suave para darle profundidad sobre el verde. */
.wa-fab > svg {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  fill: #FFFFFF !important;
  display: block !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1) !important;
}
.wa-fab > svg path { fill: #FFFFFF !important; }
.wa-fab:hover > svg {
  transform: scale(1.08) rotate(-4deg) !important;
}

/* Pulse calmo (en lugar del halo brillante) — anillo expandiéndose lentamente */
.wa-fab__pulse,
.wa-fab__halo,
.wa-fab__ring,
[class*="wa-fab__pulse"] {
  position: absolute !important;
  inset: -4px !important;
  background: transparent !important;
  border: 2px solid rgba(37,211,102,0.35) !important;
  border-radius: 50% !important;
  animation: waPulseV2 2.4s cubic-bezier(.4,0,.6,1) infinite !important;
  pointer-events: none !important;
}
@keyframes waPulseV2 {
  0%   { transform: scale(1);   opacity: 0.7; border-width: 2px; }
  100% { transform: scale(1.45); opacity: 0;   border-width: 1px; }
}

/* Ocultar label "Consulta gratis" y tooltip — el FAB es una bola pelada */
.wa-fab .wa-fab__label,
.wa-fab__label {
  display: none !important;
}
.wa-fab .wa-fab__tooltip,
.wa-fab__tooltip {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wa-fab:hover {
  background: #1EBE57 !important;
  border-color: #1EBE57 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}
.wa-fab__icon, .wa-fab svg, .wa-fab svg path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}
.wa-fab__pulse,
.wa-fab__halo,
.wa-fab__ring,
[class*="wa-fab__pulse"] {
  background: rgba(37,211,102,0.4) !important;
  border-color: rgba(37,211,102,0.4) !important;
}

/* ——— Botón inline .btn--whatsapp (CTA "Consulta gratis WhatsApp") ——— */
.btn--whatsapp {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
}
.btn--whatsapp:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
  color: #FFFFFF !important;
}
.btn--whatsapp svg, .btn--whatsapp .wa-icon { fill: #FFFFFF !important; }

/* ——— Lex panel: disclaimer amarillo → cream + tipografía editorial ——— */
.lex-disclaimer {
  background: #EEF1F4 !important;
  color: #3D4F65 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid #E2E6EB !important;
}
.lex-panel {
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px -20px rgba(10,10,10,0.35) !important;
}
.lex-head {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}
.lex-head__title {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}
.lex-head__sub {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  color: rgba(250,250,247,0.75) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.lex-head__avatar {
  background: rgba(250,250,247,0.12) !important;
  border: 1px solid rgba(250,250,247,0.3) !important;
}
.lex-head__close {
  background: rgba(250,250,247,0.12) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.lex-body {
  background: #FFFFFF !important;
  color: #0E1A2B !important;
  font-family: "Inter", sans-serif !important;
}
.lex-msg, .lex-msg__bot {
  background: #EEF1F4 !important;
  color: #0E1A2B !important;
  border-radius: 0 !important;
  border: 1px solid #E2E6EB !important;
}
.lex-msg__user {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.lex-input {
  background: #FFFFFF !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  color: #0E1A2B !important;
}
.lex-send {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.lex-send:hover { background: #1F3A5F !important; }
.lex-fab {
  background: #0E1A2B !important;
  border-radius: 0 !important;
  border: 1px solid #0E1A2B !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
.lex-fab:hover { background: #1F3A5F !important; border-color: #1F3A5F !important; }
.lex-fab__pulse { background: rgba(31,58,95,0.4) !important; }
.lex-fab__avatar { background: rgba(250,250,247,0.15) !important; }
.lex-fab__label, .lex-fab__title {
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* ——— Inputs genéricos (cualquier <input> que no sea el lead-form) ——— */
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], input[type="url"], textarea, select {
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  border-color: #E2E6EB !important;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid #0E1A2B !important;
  outline-offset: -1px !important;
  border-color: #0E1A2B !important;
}

/* ——— Cookie banner si aparece ——— */
.cookie-banner, .cookies-banner, [class*="cookie-banner"], [class*="cookies"] {
  background: #FFFFFF !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  box-shadow: 0 -8px 24px -8px rgba(10,10,10,0.18) !important;
}
.cookie-banner button, .cookies-banner button {
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
}

/* ——— Service cards: el <a class="svc"> heredaba el verde de los links ——— */
a.svc { color: #0E1A2B !important; }
a.svc:hover { color: #0E1A2B !important; }
a.svc:hover h3 { color: #1F3A5F !important; }

/* ——— CRO sticky bar mobile: forzar Inter en todo (audit decía Montserrat) ——— */
.cro-sticky-bar, .cro-sticky-bar * {
  font-family: "Inter", sans-serif !important;
}
.cro-sticky-bar a, .cro-sticky-bar button {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   VIÑETAS — refinar marker editorial elegante
   ────────────────────────────────────────────────────────────────────────── */
.hero-bullets {
  border-top: 1px solid #0E1A2B !important;
  padding-top: 24px !important;
  margin-top: 36px !important;
  gap: 12px 28px !important;
}
.hero-bullets li {
  font-family: "Inter", sans-serif !important;
  font-size: 13.5px !important;
  color: #2A3C52 !important;
  font-weight: 500 !important;
  align-items: center !important;
}
.hero-bullets li::before {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  background: #1F3A5F !important;
  border: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-size: 10px 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 0 !important;
}

/* Listas genéricas dentro de secciones — viñeta horizontal editorial */
section.band ul:not([class]):not(.hero-bullets):not(.svc__chips) li,
section.band ul.list li {
  list-style: none !important;
  padding-left: 26px !important;
  position: relative !important;
}
section.band ul:not([class]):not(.hero-bullets):not(.svc__chips) li::before,
section.band ul.list li::before {
  content: "—" !important;
  position: absolute !important;
  left: 0 !important;
  color: #1F3A5F !important;
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 500 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CHIPS / TAGS / BADGES (diferencia, servicios, comparativa, FAQ)
   ──────────────────────────────────────────────────────────────────────────
   Selector clave: usamos sólo class-name ENTERO o sufijado, NUNCA substring,
   porque "[class*='tag']" hacía match con .stage (s-TAG-e) y rompía toda la
   cascada del hero.
   ────────────────────────────────────────────────────────────────────────── */
.chip, [class$="-chip"], [class*="-chip "], [class*="__chip"],
.svc__chips span, .svc__chip,
.tag, [class$="-tag"], [class*="-tag "], [class~="tag"],
.badge, [class$="-badge"], [class*="-badge "],
.pill, [class$="-pill"], [class*="-pill "],
.nosotros-chip, .diferencia-chip, .por-que-chip {
  background: #FFFFFF !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA — refinos finales
   ────────────────────────────────────────────────────────────────────────── */
.eyebrow, .kicker, [class*="kicker"], [class*="eyebrow"] {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: #1F3A5F !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 500 !important;
}

/* Reseñas — citas en serif italic, autor mono */
.review, .testimonial, .resena, blockquote {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(18px, 1.4vw, 22px) !important;
  line-height: 1.45 !important;
  color: #0E1A2B !important;
  border: 0 !important;
  border-left: 2px solid #0E1A2B !important;
  padding: 4px 0 4px 22px !important;
  margin: 0 0 16px !important;
}
.review-author, .testimonial-author, .resena-author,
cite, blockquote + cite, .review cite {
  font-family: "JetBrains Mono", monospace !important;
  font-style: normal !important;
  font-size: 11px !important;
  color: #3D4F65 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Fondos alternos *band--alt* — tono cream-2 ligeramente más cálido */
section.band--alt {
  background: #EEF1F4 !important;
}
section.band--alt .svc {
  background: #FFFFFF !important;
}

/* SVG icons inside servicio — fina, color tinta, sin fill */
.svc__icon svg {
  stroke: #0E1A2B !important;
  fill: none !important;
  stroke-width: 1.4 !important;
}
.svc:hover .svc__icon svg { stroke: #FFFFFF !important; }

/* Numero monitor en tarjetas de servicio (.svc__num "01 / 09") */
.svc__num {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  color: #65758E !important;
  letter-spacing: 0.18em !important;
}

/* Diferencia / comparativa rows: limpiar gradientes inline */
section.band [style*="linear-gradient"],
section.band > div[style*="linear-gradient"] {
  background: transparent !important;
}
section[id*="band"][style*="linear-gradient"] { background: #FFFFFF !important; }

/* ──────────────────────────────────────────────────────────────────────────
   TOP BAR HEADER — espaciado y nav refinado
   ────────────────────────────────────────────────────────────────────────── */
.bar { padding: 16px 32px !important; }
.bar nav { gap: 32px !important; }
.bar nav a {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
}

/* Stage hero: quitar el border-bottom — limpia el corte ────────────── */
.stage { border-bottom: 0 !important; }
.hero-wrap { border-bottom: 1px solid #0E1A2B !important; }

/* Final touches — anchors siempre underline elegante en body text (no en nav, btn, svc, pref-btn ni cualquier link estilizado como botón) */
section.band p a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link),
section.band li a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link) {
  color: #1F3A5F !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
section.band p a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link):hover,
section.band li a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link):hover {
  color: #0E1A2B !important;
  text-decoration-thickness: 2px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   .pref-btn (botón "Configurar mis preferencias de cookies" en /cookies/
   y /privacidad/). Estilo igual que .btn--primary para consistencia.
   ────────────────────────────────────────────────────────────────────────── */
.pref-btn,
a.pref-btn,
#pref-btn-cookies,
#pref-btn-privacidad {
  background: #1F3A5F !important;
  color: #FFFFFF !important;
  border: 1px solid #1F3A5F !important;
  border-radius: 999px !important;
  height: 52px !important;
  padding: 14px 28px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.015em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 10px 26px -10px rgba(31,58,95,0.5),
    0 3px 8px -3px rgba(31,58,95,0.25) !important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    background-color .2s ease,
    box-shadow .25s cubic-bezier(.2,.8,.2,1) !important;
}
.pref-btn:hover,
a.pref-btn:hover {
  background: #142841 !important;
  border-color: #142841 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 16px 36px -12px rgba(20,40,65,0.55),
    0 5px 12px -4px rgba(20,40,65,0.3) !important;
}
.pref-btn:active { transform: translateY(0) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.2 — PALETA REFINADA: warm cream + warm tinta + acento ocre       ║
   ║                                                                      ║
   ║  Antes (frío):  #FFFFFF + #0A0A0A + #1F3A5F (cream/black/forest)     ║
   ║  Ahora: #FFFFFF + #0E1A2B + #1F3A5F + #2563EB (cream, tinta,         ║
   ║         forest, AZUL acento secundario — D-076, antes ocre)          ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --v2-paper:        #FFFFFF;   /* parchment cálido — base */
  --v2-paper-2:      #EEF1F4;   /* alt — para band--alt */
  --v2-paper-3:      #FFFFFF;   /* layer más claro — cards sobre paper-2 */
  --v2-paper-warm:   #E7EBEF;   /* paper acentuado para divisores */
  --v2-ink:          #0E1A2B;   /* warm tinta — eyes-friendly */
  --v2-ink-strong:   #2A1E16;
  --v2-ink-body:     #2A3C52;
  --v2-ink-soft:     #3D4F65;
  --v2-ink-muted:    #65758E;
  --v2-rule:         #E2E6EB;   /* warm rule */
  --v2-rule-strong:  #0E1A2B;
  --v2-forest:       #1F3A5F;   /* primario verde forest */
  --v2-forest-deep:  #142841;
  --v2-forest-soft:  #C0CDDA;
  --v2-forest-tint:  #DCE3EC;
  --v2-ochre:        #2563EB;   /* azul acento secundario (D-076, antes ocre) */
  --v2-ochre-deep:   #1E3A8A;
  --v2-ochre-soft:   #93C5FD;
  --v2-ochre-tint:   #DBEAFE;
  --v2-burgundy:     #7A2E2E;   /* opcional para alertas/precio rebajado */
}

/* ——— Acentos ocre en lugares clave ──────────────────────────────────── */

/* Stars del trust strip — ocre cálido en lugar de blanco */
.exa-trust-strip-item svg[viewBox*="24"] path,
.exa-trust-strip-item svg path {
  fill: #2563EB !important;
  opacity: 1 !important;
}

/* Precios destacados — los `em` con € que aparecen en h2 de precios */
h2 em[style*="--exa-teal"],
h2 em[style*="29,90"],
h2 em[style*="49,90"],
h2 em[style*="199,90"],
h2 em.price,
h2 em.precio {
  color: #2563EB !important;
}

/* Hover de service cards: h3 va a ocre (en lugar de forest) → más warmth */
a.svc:hover h3,
.svc:hover h3 {
  color: #2563EB !important;
}
a.svc:hover .svc__icon {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}
a.svc:hover .svc__icon svg { stroke: #FFFFFF !important; }
a.svc:hover .svc__link { color: #2563EB !important; }

/* Hover de botones --primary → forest (mantener) o ocre alternativo */
.btn--primary:hover,
.exa-lead-form--compact .exa-lead-form-submit:hover {
  background: #1F3A5F !important;
}
.btn--ghost:hover { background: #0E1A2B !important; }

/* CTA mini header (teléfono): hover ocre */
.bar .cta-mini:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

/* Reseñas → estrellas en ocre */
.exa-stars,
[class*="star"] svg,
[class*="rating"] svg,
.review-stars,
.testimonial-stars {
  fill: #2563EB !important;
  color: #2563EB !important;
}

/* Subrayado en H1 hero "crecer" — verde forest se mantiene, pero el
   subrayado decorativo (si vuelve) sería ocre cálido */
.hero-content h1 .w[data-fx="wind"]::after {
  background: linear-gradient(90deg, transparent 0%, #2563EB 18%, #2563EB 82%, transparent 100%) !important;
  display: block !important;
  opacity: 0.7 !important;
}

/* Bullets activos / completados → fondo forest, hover ocre */
.hero-bullets li:hover::before {
  background: #2563EB !important;
}

/* Tabla comparativa col-exa: añadir un toque ocre en accent stripe */
.ig-table tbody td.exa { background: #DCE3EC !important; }
.ig-table tbody td.exa::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px;
  background: #2563EB;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Footer: link hover ocre cálido */
.site-foot a:hover { color: #2563EB !important; }

/* Stage hero: añadir un thin overlay paper-warm para más calidez */
.stage {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) !important;
}

/* Section.band--alt: gradiente sutil para más profundidad */
section.band--alt {
  background: linear-gradient(180deg, #EEF1F4 0%, #E7EBEF 100%) !important;
}

/* Lex panel header: añadir borde ocre fino abajo */
.lex-head { border-bottom: 1px solid #2563EB !important; }

/* ──────────────────────────────────────────────────────────────────────────
   SECCIÓN #nosotros (.band--nosotros-hero)
   Originalmente tenía fondo oscuro qlcube con texto blanco. Al pasar a
   cream, todo el texto blanco quedaba invisible. Forzamos colores marino.
   ────────────────────────────────────────────────────────────────────────── */
.band--nosotros-hero {
  background: #FFFFFF !important;
  color: #0E1A2B !important;
}
.band--nosotros-hero h2,
.band--nosotros-hero h3,
.band--nosotros-hero h4 {
  color: #0E1A2B !important;
}
.band--nosotros-hero h2 em,
.band--nosotros-hero h3 em {
  color: #1F3A5F !important;
}
.band--nosotros-hero p,
.band--nosotros-hero li,
.band--nosotros-hero strong,
.band--nosotros-hero span:not(.kicker),
.band--nosotros-hero div:not(.kicker):not([class*="stat"]):not(.big):not(.sm):not([class*="big"]):not([class*="num"]) {
  color: #2A3C52 !important;
}
.band--nosotros-hero p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.band--nosotros-hero strong {
  color: #0E1A2B !important;
  font-weight: 600 !important;
}
.band--nosotros-hero a:not(.btn):not([class*="btn--"]):not([class*="cta"]):not(.exa-lead-form-submit) {
  color: #1F3A5F !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
.band--nosotros-hero a:not(.btn):not([class*="btn--"]):not([class*="cta"]):not(.exa-lead-form-submit):hover {
  color: #2563EB !important;
}
/* Asegurar que los botones dentro de #nosotros conservan su estilo propio */
.band--nosotros-hero .btn,
.band--nosotros-hero .btn--primary,
.band--nosotros-hero .btn--ghost,
.band--nosotros-hero .btn--whatsapp,
.band--nosotros-hero a[class*="btn"] {
  text-decoration: none !important;
}
.band--nosotros-hero .btn--primary {
  color: #FFFFFF !important;
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
}
.band--nosotros-hero .btn--ghost {
  color: #0E1A2B !important;
  background: transparent !important;
  border: 1px solid #0E1A2B !important;
}
.band--nosotros-hero .btn--ghost:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}
.band--nosotros-hero .btn--whatsapp {
  color: #FFFFFF !important;
  background: #0E1A2B !important;
  border-color: #0E1A2B !important;
}
.band--nosotros-hero .btn--whatsapp:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   STICKY BARS MÓVILES — fix overlap (versión robusta)

   En el repo original conviven 3 elementos sticky en mobile que entran en
   conflicto:
     1) .wa-fab          (whatsapp-widget.css)  — FAB círculo flotante WA
     2) .exa-mobile-cta  (lead-capture.css)     — barra Llamar+WhatsApp
     3) .cro-sticky-bar  (cro-boost.css)        — barra Consultar+close
        ↑ esta toma el control vía body.cro-sticky-active añadido por JS

   La REGLA: si hay cro-sticky-bar activo (body.cro-sticky-active),
   solo ese se ve. Si no, se ve .exa-mobile-cta. .wa-fab solo en desktop.
   ────────────────────────────────────────────────────────────────────────── */

/* — DESKTOP (>720px): comportamiento normal, .wa-fab visible como círculo — */
.wa-fab {
  display: inline-flex !important;
}

/* — MOBILE (≤720px): ocultar .wa-fab siempre — */
@media (max-width: 720px) {
  .wa-fab {
    display: none !important;
  }
}

/* — SOLO MOBILE: si body.cro-sticky-active (JS añadió la clase porque la
     sticky bar nueva está visible), ocultar AMBOS legacy. En desktop el
     FAB convive perfectamente con la sticky bar slim. — */
@media (max-width: 720px) {
  body.cro-sticky-active .exa-mobile-cta,
  body.cro-sticky-active .wa-fab {
    display: none !important;
  }
}

/* — Fallback adicional :has() por si el JS no añade la clase pero la barra
     existe en DOM con .is-visible — */
@media (max-width: 720px) {
  body:has(.cro-sticky-bar.is-visible) .exa-mobile-cta,
  body:has(.cro-sticky-bar.is-visible) .wa-fab {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   WHATSAPP FAB — color verde brand restaurado (D-039 hot-fix)
   El usuario reportó "no se ve el icono verde de whatsap" — el FAB navy
   tinta no se identifica como WhatsApp. Restauramos el verde brand
   (#25D366 + icono blanco) para reconocimiento de marca, manteniendo
   la elegancia con sombras y elevation.
   ────────────────────────────────────────────────────────────────────────── */
/* OBSOLETO — bloque verde plano (sin gradiente). Mantener solo color de
   border para que no haya cascade conflict. El gradiente real vive en el
   primer bloque .wa-fab. */
.wa-fab {
  border-color: #25D366 !important;
  color: #FFFFFF !important;
}
.wa-fab:hover {
  background: #1EBE57 !important;
  border-color: #1EBE57 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 22px 44px -12px rgba(30,190,87,0.55),
    0 6px 14px -4px rgba(30,190,87,0.35) !important;
}
.wa-fab svg, .wa-fab svg path, .wa-fab .wa-fab__icon {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}
/* Pulse halo del FAB en green soft (no ocre, no navy) */
.wa-fab__pulse,
.wa-fab__halo,
.wa-fab__ring,
[class*="wa-fab__pulse"] {
  background: rgba(37,211,102,0.4) !important;
  border-color: rgba(37,211,102,0.4) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ICONO WHATSAPP — agrandar a 22px y forzar fill (en CTAs inline tinta sigue
   blanco; en FAB ya es blanco brand)
   ────────────────────────────────────────────────────────────────────────── */
.btn--whatsapp svg,
.btn--whatsapp-ghost svg,
.cro-sticky-bar .btn--whatsapp svg,
.exa-mobile-cta .btn--whatsapp svg,
a[href*="wa.me"] svg,
a[href*="whatsapp"] svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  color: inherit !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}
.btn--whatsapp svg path,
a[href*="wa.me"] svg path,
a[href*="whatsapp"] svg path {
  fill: currentColor !important;
}
/* Cuando el botón es tinta dark, el icono debe ser cream */
.btn--whatsapp,
.band--nosotros-hero .btn--whatsapp,
a.btn--whatsapp {
  color: #FFFFFF !important;
}
.btn--whatsapp svg, .btn--whatsapp svg path {
  fill: #FFFFFF !important;
}
/* OBSOLETO — el bloque premium de arriba ya define .wa-fab > svg a 32px
   con color blanco brand. Lo dejamos comentado para no romper la cascada. */

/* Kicker "EL DESPACHO" — adaptar el pill cristal para cream */
.band--nosotros-hero .kicker,
.band--nosotros-hero [class*="kicker"] {
  background: transparent !important;
  border: 1px solid #1F3A5F !important;
  color: #1F3A5F !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

/* Stats nosotros (100% / 10 / 24h) ─ números grandes en marino, labels en muted */
.nosotros-stats { color: #0E1A2B !important; }
.nosotros-stat { color: #0E1A2B !important; }
.nosotros-stat .big,
.nosotros-stat__num,
.band--nosotros-hero .stat__num,
.band--nosotros-hero [class*="big"] {
  color: #1F3A5F !important;
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.nosotros-stat .sm,
.nosotros-stat__label,
.band--nosotros-hero .stat__label,
.band--nosotros-hero [class*="sm"] {
  color: #65758E !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* Cualquier rgba(255,255,255,...) o color:#fff dentro del nosotros hero
   debe pasar a marino (anti-fallout) */
.band--nosotros-hero [style*="color:#fff"],
.band--nosotros-hero [style*="color: #fff"],
.band--nosotros-hero [style*="rgba(255"] {
  color: #2A3C52 !important;
}

/* La imagen de fondo (si hay) ── ocultar para mantener el cream limpio */
.band--nosotros-hero[style*="background-image"],
.band--nosotros-hero [style*="background-image"] {
  background-image: none !important;
}

/* Input focus → outline ocre cálido (en vez de tinta puro, más rico) */
input:focus, textarea:focus, select:focus,
.exa-lead-form--compact .exa-lead-form-field input:focus,
.exa-lead-form--compact .exa-lead-form-field select:focus {
  outline: 2px solid #2563EB !important;
  outline-offset: -1px !important;
  border-color: #2563EB !important;
}

/* Header bar — sutil sombra de profundidad */
.bar {
  box-shadow: 0 1px 0 rgba(14, 26, 43, 0.06), 0 0 24px rgba(14, 26, 43, 0.03) !important;
}

/* Body global: noise/texture muy sutil para feel papel — la .grain ya hace
   parte; bajamos opacidad para que no se note granuloso */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
  opacity: 0.18 !important;
  mix-blend-mode: multiply !important;
}
.grain { opacity: 0.04 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   H1 hero — "crecer" con dos colores: italic forest green + underline ocre
   Da más warmth y visual interest sin romper la paleta
   ────────────────────────────────────────────────────────────────────────── */
.hero-content h1 em,
.hero-content h1 .w[data-fx="wind"] {
  font-style: italic !important;
  color: #1F3A5F !important;
  font-weight: 500 !important;
  position: relative !important;
  display: inline-block !important;
}
.hero-content h1 .w[data-fx="wind"]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0.04em !important;
  height: 4px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    #2563EB 12%,
    #2563EB 88%,
    transparent 100%) !important;
  border-radius: 999px !important;
  opacity: 0.85 !important;
  display: block !important;
  animation: none !important;
}

/* H2 italic: alternancia sutil — primero hover ocre */
section.band h2 em:hover,
section.band h2 em a:hover {
  color: #2563EB !important;
}

/* Sección "Crea tu empresa por 199,90 €" — el €199,90 que aparece
   en H2 con style inline → forzar a ocre cálido para destacar el precio */
h2[id="crea-empresa-title"] em,
h2[id="consulta-express-title"] em,
h2[id="contratos-express-title"] em {
  color: #2563EB !important;
}

/* Sticky bar mobile: link primary fondo forest, secondary fondo tinta */
.cro-sticky-bar a.btn--primary,
.exa-mobile-cta a.btn--primary {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
}
.cro-sticky-bar a.btn--primary:hover,
.exa-mobile-cta a.btn--primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

/* Pulse del Lex FAB → ocre suave (no verde) */
.lex-fab__pulse { background: rgba(184, 146, 76, 0.35) !important; }
.wa-fab__pulse, .wa-fab__halo { background: rgba(184, 146, 76, 0.35) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.3 — BOTONES REDONDEADOS Y ELEGANTES                              ║
   ║  Pasamos de cuadrados editoriales a pills con curvas, sombras        ║
   ║  sutiles, transiciones suaves y micro-interacciones                  ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

/* ——— Botones genéricos primary/ghost ——— */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.015em !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              background-color .2s ease,
              box-shadow .25s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              color .2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn--primary {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-color: #0E1A2B !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 8px 22px -10px rgba(14,26,43,0.4),
    0 2px 6px -2px rgba(14,26,43,0.18) !important;
}
.btn--primary:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 14px 32px -12px rgba(31,58,95,0.5),
    0 4px 10px -4px rgba(31,58,95,0.25) !important;
}
.btn--primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 4px 10px -6px rgba(14,26,43,0.4) !important;
}

.btn--ghost {
  background: transparent !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
  box-shadow: none !important;
}
.btn--ghost:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-color: #0E1A2B !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 24px -10px rgba(14,26,43,0.45),
    0 3px 8px -3px rgba(14,26,43,0.2) !important;
}
.btn--ghost:active {
  transform: translateY(0) !important;
}

/* ——— WhatsApp button inline (Consulta gratis · WhatsApp) ——— */
.btn--whatsapp {
  background: #1F3A5F !important;
  color: #FFFFFF !important;
  border: 1px solid #1F3A5F !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 10px 24px -10px rgba(31,58,95,0.5),
    0 3px 8px -3px rgba(31,58,95,0.25) !important;
}
.btn--whatsapp:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 32px -12px rgba(184,146,76,0.55),
    0 4px 10px -4px rgba(184,146,76,0.3) !important;
}

/* ——— Header CTA "+34 639..." ——— */
.bar .cta-mini {
  border-radius: 999px !important;
  padding: 9px 18px !important;
  border: 1px solid #0E1A2B !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: #0E1A2B !important;
  background: transparent !important;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  box-shadow: none !important;
}
.bar .cta-mini:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-color: #0E1A2B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px -8px rgba(14,26,43,0.4) !important;
}

/* ——— Form submit (lead form hero "Solicitar consulta") ——— */
.exa-lead-form--compact .exa-lead-form-submit,
.exa-lead-form-submit {
  border-radius: 999px !important;
  padding: 13px 24px !important;
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  font-size: 14px !important;
  border: 1px solid #0E1A2B !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 8px 20px -8px rgba(14,26,43,0.4) !important;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  cursor: pointer !important;
}
.exa-lead-form--compact .exa-lead-form-submit:hover,
.exa-lead-form-submit:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 30px -10px rgba(31,58,95,0.5) !important;
}

/* ——— Inputs: bordes redondeados también, focus ocre suave ——— */
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], input[type="url"], textarea, select,
.exa-lead-form--compact .exa-lead-form-field input,
.exa-lead-form--compact .exa-lead-form-field select,
.exa-lead-form--compact .exa-lead-form-select {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  border: 1px solid #E2E6EB !important;
  font-family: "Inter", sans-serif !important;
  background: #FFFFFF !important;
  color: #0E1A2B !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
input:focus, textarea:focus, select:focus,
.exa-lead-form--compact .exa-lead-form-field input:focus,
.exa-lead-form--compact .exa-lead-form-field select:focus {
  outline: 0 !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(184,146,76,0.18) !important;
}

/* ——— Sticky bar mobile (botones inferiores) ——— */
.cro-sticky-bar a, .cro-sticky-bar button,
.exa-mobile-cta a, .exa-mobile-cta button {
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  transition: transform .2s, background-color .2s, box-shadow .2s !important;
  white-space: nowrap !important;
}
.cro-sticky-bar a.btn--primary, .exa-mobile-cta a.btn--primary {
  background: #0E1A2B !important;
  border-color: #0E1A2B !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -8px rgba(14,26,43,0.4) !important;
}
.cro-sticky-bar a.btn--primary:hover, .exa-mobile-cta a.btn--primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px -8px rgba(184,146,76,0.5) !important;
}

/* ——— Lex FAB pill flotante ("Pregunta a Lex") ——— */
.lex-fab {
  border-radius: 999px !important;
  padding: 0 18px !important;
  border: 1px solid #0E1A2B !important;
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  box-shadow:
    0 12px 30px -10px rgba(14,26,43,0.45),
    0 3px 8px -3px rgba(14,26,43,0.25) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              background-color .2s, box-shadow .25s !important;
}
.lex-fab:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 38px -12px rgba(31,58,95,0.55),
    0 5px 12px -4px rgba(31,58,95,0.3) !important;
}
.lex-fab__avatar {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
}

/* ——— WhatsApp FAB flotante: forma circular y elegancia (el COLOR verde
       lo define la regla más arriba — aquí solo geometría y elevation) ——— */
.wa-fab {
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              background-color .2s, box-shadow .25s !important;
}
/* En mobile, ocultar el FAB (ya está la barra .exa-mobile-cta o
   .cro-sticky-bar). Esta regla se repite por si alguna otra cascada
   intentó display:inline-flex después. */
@media (max-width: 720px) {
  .wa-fab { display: none !important; }
}
.wa-fab:hover {
  background: #1EBE57 !important;
  border-color: #1EBE57 !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 22px 44px -12px rgba(30,190,87,0.55),
    0 6px 14px -4px rgba(30,190,87,0.35) !important;
}
/* OBSOLETO — el bloque premium ya define .wa-fab > svg a 32px. */
.wa-fab__pulse {
  border-radius: 50% !important;
}

/* ——— Lex panel header close button: circular ——— */
.lex-head__close {
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
}

/* ——— Lex send button: pill ——— */
.lex-send {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  transition: all .2s !important;
}
.lex-send:hover { background: #1F3A5F !important; transform: translateY(-1px) !important; }

/* Lex panel rounded corners */
.lex-panel {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    0 28px 70px -20px rgba(14,26,43,0.4),
    0 10px 24px -8px rgba(14,26,43,0.18) !important;
}
.lex-msg, .lex-msg__bot {
  border-radius: 14px !important;
  border-top-left-radius: 4px !important;
}
.lex-msg__user {
  border-radius: 14px !important;
  border-top-right-radius: 4px !important;
}
.lex-input { border-radius: 999px !important; }

/* ——— Service cards (.svc) — aún tarjetas, ahora con esquinas suaves ——— */
.svc, a.svc {
  border-radius: 16px !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              box-shadow .35s cubic-bezier(.2,.8,.2,1) !important;
}
.svc:hover, a.svc:hover {
  border-color: #2563EB !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 22px 48px -20px rgba(184,146,76,0.35),
    0 8px 18px -6px rgba(184,146,76,0.18) !important;
}
.svc__icon {
  border-radius: 12px !important;
  transition: background .25s, color .25s, transform .35s cubic-bezier(.2,.8,.2,1) !important;
}
.svc:hover .svc__icon, a.svc:hover .svc__icon { transform: rotate(-4deg) scale(1.08) !important; }

/* ——— Hero visual + lead form: redondear esquinas ——— */
.hero-visual {
  border-radius: 18px !important;
  border: 1px solid #E2E6EB !important;
}
.hero-visual__tag {
  border-radius: 999px !important;
  padding: 7px 14px !important;
  border: 0 !important;
  background: rgba(247,241,227,0.94) !important;
  backdrop-filter: blur(8px) !important;
  color: #0E1A2B !important;
}
.exa-lead-form--compact {
  border-radius: 18px !important;
  border: 1px solid #E2E6EB !important;
  box-shadow:
    0 22px 50px -20px rgba(14,26,43,0.18),
    0 8px 18px -6px rgba(14,26,43,0.06) !important;
  background: #FFFFFF !important;
}

/* ——— Pricing cards (Consulta express, Crea empresa, Contratos) ——— */
[id$="-express"] [class*="card"],
[id$="-banner"] [class*="card"],
.exa-lead-form, .exa-lead-form--card2 {
  border-radius: 18px !important;
  border: 1px solid #E2E6EB !important;
  box-shadow: 0 12px 30px -16px rgba(14,26,43,0.12) !important;
  background: #FFFFFF !important;
}

/* ——— Comparativa table: redondear contenedor ——— */
.ig-table {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #E2E6EB !important;
}

/* ——— FAQ: cada item con esquinas suaves al hacer hover ——— */
details {
  border-top: 1px solid #E2E6EB !important;
  transition: background-color .2s !important;
}
details:hover { background: rgba(247,229,205,0.18) !important; }
details summary {
  cursor: pointer !important;
  border-radius: 8px !important;
  padding: 22px 8px !important;
}

/* ——— Chips / tags: pills pequeños ——— */
.chip, [class$="-chip"], [class*="__chip"], .svc__chip,
.tag, [class$="-tag"], [class~="tag"],
.badge, [class$="-badge"],
.pill, [class$="-pill"] {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  transition: all .2s !important;
}
.chip:hover, .svc__chip:hover, [class$="-chip"]:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  border-color: #0E1A2B !important;
  transform: translateY(-1px) !important;
}

/* ——— Cookie banner: rounded container + pill buttons ——— */
.cookie-banner, .cookies-banner, [class*="cookie-banner"] {
  border-radius: 18px !important;
  border: 1px solid #E2E6EB !important;
  box-shadow: 0 -16px 40px -12px rgba(14,26,43,0.16) !important;
}
.cookie-banner button, .cookies-banner button {
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all .2s !important;
}

/* ——— Brand logo dot también redondito ——— */
.brand .dot, .brand img {
  border-radius: 50% !important;
}

/* ——— Hero bullets check marker → círculo elegante ——— */
.hero-bullets li::before {
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background-size: 11px 11px !important;
  box-shadow: 0 2px 6px -2px rgba(31,58,95,0.4) !important;
}

/* ——— Stage hero: esquinas sutilmente redondeadas en pantallas grandes ——— */
@media (min-width: 1400px) {
  .stage {
    margin: 0 24px !important;
    border-radius: 24px !important;
    border-bottom: 0 !important;
  }
}

/* ——— Anti-flash: smooth transitions on links del nav ——— */
.bar nav a {
  border-radius: 999px !important;
  padding: 8px 14px !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.bar nav a:hover {
  background: rgba(14,26,43,0.06) !important;
  color: #0E1A2B !important;
}
.bar nav a.active {
  background: rgba(14,26,43,0.08) !important;
  color: #0E1A2B !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.4 — PRIMARY CTAs en VERDE FOREST                                 ║
   ║  El usuario prefiere el verde forest pill — lo hacemos primary       ║
   ║  Tinta queda para ghost outline. Ocre para hover y warmth.           ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

/* Primary → forest green con sombra forest */
.btn--primary,
.exa-lead-form--compact .exa-lead-form-submit,
.exa-lead-form-submit,
.cro-sticky-bar a.btn--primary,
.exa-mobile-cta a.btn--primary {
  background: #1F3A5F !important;
  color: #FFFFFF !important;
  border-color: #1F3A5F !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 10px 26px -10px rgba(31,58,95,0.5),
    0 3px 8px -3px rgba(31,58,95,0.25) !important;
}
.btn--primary:hover,
.exa-lead-form--compact .exa-lead-form-submit:hover,
.exa-lead-form-submit:hover,
.cro-sticky-bar a.btn--primary:hover,
.exa-mobile-cta a.btn--primary:hover {
  background: #142841 !important;
  border-color: #142841 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 16px 36px -12px rgba(20,40,65,0.55),
    0 5px 12px -4px rgba(20,40,65,0.3) !important;
}
.btn--primary:active,
.exa-lead-form-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px -6px rgba(31,58,95,0.4) !important;
}

/* WhatsApp inline CTA → tinta cálido (para diferenciarse del primary) */
.btn--whatsapp {
  background: #0E1A2B !important;
  border-color: #0E1A2B !important;
}
.btn--whatsapp:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

/* (OBSOLETO — el bloque premium de arriba ya define background con
   gradiente. Esta versión plana se queda como fallback solo para color. */

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.6 — POLISH FINAL DE AUDITORÍA VISUAL (Chrome MCP)                ║
   ║                                                                      ║
   ║  1) Tooltips (Lex + WhatsApp) → solo on hover                        ║
   ║  2) "Más solicitado" badge → arena dorada                            ║
   ║  3) Precios H2 (em con €) → arena dorada destacada                   ║
   ║  4) Lead form hero ::before azul antiguo → quitado                   ║
   ║  5) Body anchor underline más sutil                                  ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

/* — 1) TOOLTIPS LEX + WHATSAPP solo on hover —
     Por defecto invisibles, aparecen con :hover sobre el FAB. */
.lex-fab__tip,
.lex-fab .lex-fab__tip {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-8px) !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.lex-fab:hover .lex-fab__tip,
.lex-fab:focus-visible .lex-fab__tip,
.lex-fab.is-tip-on .lex-fab__tip {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

.wa-fab__tooltip,
.wa-fab .wa-fab__tooltip {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(8px) !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.wa-fab:hover .wa-fab__tooltip,
.wa-fab:focus-visible .wa-fab__tooltip,
.wa-fab.is-tooltip-visible .wa-fab__tooltip {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* — 2) "Más solicitado" badge inline → arena dorada brand —
     El HTML tiene style="background:#076C6A;color:#fff" — sobreescribir. */
[style*="#076C6A"][style*="Más solicitado"],
[style*="#076C6A"]:where([style*="background"]) {
  background: #2563EB !important;
  color: #0E1A2B !important;
}
/* Caso genérico para cualquier badge con bg teal viejo */
div[style*="background:#076C6A"],
div[style*="background: #076C6A"] {
  background: #2563EB !important;
  color: #0E1A2B !important;
}

/* — 3) Precios destacados en H2 (em con € o cifra) → arena dorada —
     Los H2 "Una duda concreta resuelta por abogado *desde 29,90 €*" y
     similares: el em italic se renderiza igual que el resto. Lo destacamos
     con la arena dorada para que el precio salte. */
h2 em,
h2 .price,
h2[id*="-title"] em,
.section-head h2 em {
  /* Default: navy (mantiene branding) */
  color: #1F3A5F !important;
}
/* Override solo cuando el em contiene un precio (€) — usamos :has() */
h2:has(em:has-text('€')) em,
h2 em:where([class*="price"], [class*="precio"]) {
  color: #2563EB !important;
}
/* Fallback (sin :has-text() que no es spec) — apuntar por id de las
   secciones de precio conocidas. */
h2#consulta-express-title em,
h2#contratos-express-title em,
h2#crea-empresa-title em {
  color: #2563EB !important;
  font-weight: 500 !important;
}

/* — 4) Lead form hero (home) — quitar el ::before azul antiguo —
     El kit Elementor 15 dejaba un ::before con linear-gradient navy/teal
     que se ve como una línea fina arriba del form. Matarlo. */
.exa-lead-form::before,
.exa-lead-form-hero::before,
.exa-lead-form--compact::before,
.exa-lead-form--card2::before {
  display: none !important;
  background: none !important;
  border: 0 !important;
  height: 0 !important;
}

/* — 5) Body anchor underline más sutil (1px en lugar de 2 al hover) —
     El subrayado al hover crecía a 2px, mejor mantener fino y solo
     cambiar el color a tinta. */
section.band p a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link):hover,
section.band li a:not(.btn):not([class*="btn--"]):not(.pref-btn):not([class*="-btn"]):not([class*="cta"]):not(.svc):not(.svc__link):hover {
  text-decoration-thickness: 1px !important;
  color: #2563EB !important;
}

/* — 6) Sub-bar derecha en /cookies/ y /privacidad/ vacía: el `.meta .r`
     elemento existe pero a veces no tiene texto. Si el right span está
     vacío, ocultamos el grid de 3 columnas y dejamos el bloque centrado. */
.meta:has(.r:empty) {
  grid-template-columns: 1fr 1fr !important;
}
.meta .r:empty {
  display: none !important;
}

/* Lex FAB pill → mantiene tinta cálido para no chocar con el primary forest */
.lex-fab {
  background: #0E1A2B !important;
  border-color: #0E1A2B !important;
}
.lex-fab:hover {
  background: #1F3A5F !important;
  border-color: #1F3A5F !important;
}

/* Ghost button → outline tinta (sin cambios pero asegurar consistencia) */
.btn--ghost {
  background: transparent !important;
  color: #0E1A2B !important;
  border: 1px solid #0E1A2B !important;
}
.btn--ghost:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}

/* Lead form submit btn refuerza box-shadow forest + unifica con .btn--primary */
.exa-lead-form--compact .exa-lead-form-submit,
.exa-lead-form-submit,
.lex-send {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  font-size: 14.5px !important;
  padding: 14px 28px !important;
  height: 52px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SISTEMA DE TALLAS DE BOTONES — escala canónica
   ──────────────────────────────────────────────────────────────────────────
   Large (CTA principal):    52px alto · padding 14px 28px · font 14.5px
   Medium (CTA header):      37px alto · padding 9px 18px  · font 11px (mono)
   FAB Lex (pill ancho):     46px alto · padding 0 18px    · font 14px
   FAB WA (círculo):         60×60     · radius 50%
   ────────────────────────────────────────────────────────────────────────── */

/* Large size — todos los CTAs principales del cuerpo */
.btn,
.btn--primary,
.btn--ghost,
.btn--whatsapp,
.btn--whatsapp-ghost,
.cookie-banner button.accept,
.cookies-banner button.accept {
  height: 52px !important;
  padding: 14px 28px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* Medium — header CTA mini */
.bar .cta-mini {
  height: 37px !important;
  padding: 9px 18px !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Lex FAB pill */
.lex-fab {
  height: 46px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ELEVACIÓN DE FABs CUANDO HAY STICKY BAR DEL DESPACHO
   cro-boost.css define esta regla pero el browser no la expone vía
   cssRules (probable bug de parser CSS por algún caracter raro upstream),
   así que la replicamos aquí para que el WA FAB y el Lex FAB no se
   solapen con la cro-sticky-bar al activarse. Aplica en desktop y mobile.
   ────────────────────────────────────────────────────────────────────────── */
body.cro-sticky-active .wa-fab,
body.cro-sticky-active .lex-fab {
  bottom: 92px !important;
  transition: bottom .2s ease !important;
}
@media (max-width: 520px) {
  body.cro-sticky-active .wa-fab,
  body.cro-sticky-active .lex-fab {
    bottom: 88px !important;
  }
}

/* WhatsApp FAB círculo (solo aplica en desktop — mobile lo oculta más
   arriba con @media max-width: 720px { display: none !important; }) */
.wa-fab {
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* Re-asegurar display flex SOLO en desktop, y none en mobile (esta regla va
   al final del archivo para vencer cualquier cascada anterior). */
@media (min-width: 721px) {
  .wa-fab { display: inline-flex !important; }
}
@media (max-width: 720px) {
  .wa-fab { display: none !important; }
}

/* Badges cuadradas con la nueva paleta tinta — usar contrast extra */
.chip:hover, .svc__chip:hover {
  background: #0E1A2B !important;
  color: #FFFFFF !important;
}

/* Dividers entre secciones — línea ocre fina opcional */
section.band + section.band:not(.band--alt) {
  border-top: 0;
}
section.band--alt + section.band {
  border-top: 1px solid #E2E6EB !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.5 — MOBILE COHERENCE (D-040)                                     ║
   ║  Reglas finales que ganan en cascada (este archivo se carga el       ║
   ║  último). Asegura coherencia de paneles, botones y FABs en cualquier ║
   ║  móvil (iPhone SE → 14 Pro Max, Galaxy S → Fold, Pixel, Xiaomi).     ║
   ║  Estrategia: respetar safe-area, usar dvh, clamp() en padding/font,  ║
   ║  prevenir overflow horizontal, tap targets ≥44px, sin layout shifts. ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1) Defensa universal: 0 overflow horizontal en cualquier viewport ──
   Algunas páginas con prose o tablas pueden generar scroll lateral en
   pantallas estrechas. Forzamos box-sizing, max-width y oculto. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100vw;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, picture { max-width: 100%; height: auto; }

/* ── 2) BOTONES — escala adaptativa (≤480px más compacta, ≤360px mínima) ──
   restyle-v2 fija .btn a 52px alto / 14px 28px / 14.5px font para desktop.
   En pantallas estrechas eso provoca line-wrap o desbordamiento.
   Mantenemos altura ≥44px (Apple HIG) pero reducimos padding y font. */
@media (max-width: 480px) {
  .btn,
  .btn--primary,
  .btn--ghost,
  .btn--whatsapp,
  .btn--whatsapp-ghost,
  .exa-lead-form-submit,
  .exa-lead-form--compact .exa-lead-form-submit,
  .lex-send {
    height: 50px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* En grupos hero-ctas: que ocupen todo el ancho disponible y queden
     apilados en columna para que el texto no se trunque feo. */
  .hero-ctas,
  .page-hero .hero-ctas,
  .exa-mobile-cta,
  .cro-sticky-bar {
    width: 100% !important;
  }
  .hero-ctas .btn,
  .page-hero .hero-ctas .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}
@media (max-width: 360px) {
  .btn,
  .btn--primary,
  .btn--ghost,
  .btn--whatsapp,
  .btn--whatsapp-ghost,
  .exa-lead-form-submit,
  .exa-lead-form--compact .exa-lead-form-submit,
  .lex-send {
    height: 48px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    letter-spacing: 0.01em !important;
  }
  .bar .cta-mini {
    height: 34px !important;
    padding: 8px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
  }
}

/* ── 3) HEADER (.bar) — coherencia en pantallas muy estrechas ── */
@media (max-width: 480px) {
  .bar {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .bar > * { min-width: 0 !important; }
  .brand,
  .brand a { min-width: 0 !important; }
  .brand b,
  .brand strong {
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── 4) LEX FAB — círculo limpio en mobile, sin conflictos cascade ──
   restyle-v2 fija lex-fab a 46px alto pill, cro-boost lo sobrescribe a
   círculo 56×56 en ≤520px. Mobile-fixes lo eleva con bottom 110px.
   Aquí ganamos al cargar último: imponemos círculo perfecto y respeto
   absoluto a safe-area + sticky bars del despacho. */
@media (max-width: 720px) {
  .lex-fab {
    height: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 18px 38px -12px rgba(14,26,43,0.45),
      0 6px 14px -4px rgba(14,26,43,0.25) !important;
  }
  .lex-fab__label,
  .lex-fab__tip { display: none !important; }
  .lex-fab__avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
  }
  .lex-fab__avatar svg {
    width: 26px !important;
    height: 26px !important;
  }
  /* Cuando hay sticky CTA del despacho, subimos el FAB para que no se
     solape (96px = 76px barra + 18px aire + safe-area). */
  body.cro-sticky-active .lex-fab,
  body:has(.cro-sticky-bar.is-visible) .lex-fab,
  body:has(.exa-mobile-cta) .lex-fab {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── 5) LEX PANEL — fullscreen real en mobile usando 100dvh ──
   Importante 100dvh (no 100vh) para que la barra dinámica de Safari iOS
   no rompa la altura. Padding-bottom safe-area en el footer del panel.
   FIX: el `display: flex` SOLO se aplica a `.is-open` para no forzar el
   panel abierto en móvil cuando lex-widget.js no lo ha activado. */
@media (max-width: 720px) {
  .lex-panel {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    flex-direction: column !important;
  }
  .lex-panel.is-open {
    display: flex !important;
  }
  .lex-foot,
  .lex-input-wrap,
  .lex-panel form {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  /* Cuando el panel está abierto, ocultar barras flotantes para no solapar */
  body.lex-scroll-locked .exa-mobile-cta,
  body.lex-scroll-locked .cro-sticky-bar,
  body.lex-scroll-locked .wa-fab {
    display: none !important;
  }
}

/* ── 6) STICKY MOBILE CTA (.exa-mobile-cta) — alturas y padding seguros ── */
@media (max-width: 720px) {
  .exa-mobile-cta {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  .exa-mobile-cta a {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 360px) {
  .exa-mobile-cta a { padding: 10px 10px !important; font-size: 12.5px !important; }
  .exa-mobile-cta a svg { width: 16px !important; height: 16px !important; }
}

/* ── 7) STICKY CRO BAR (.cro-sticky-bar) — copy clampado, CTA visible ── */
@media (max-width: 720px) {
  .cro-sticky-bar {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }
  .cro-sticky-bar__copy { min-width: 0 !important; flex: 1 1 0 !important; }
  .cro-sticky-bar__title {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .cro-sticky-bar__sub {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .cro-sticky-bar__cta {
    padding: 11px 16px !important;
    font-size: 12.5px !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 360px) {
  .cro-sticky-bar__cta { padding: 10px 12px !important; font-size: 12px !important; }
  .cro-sticky-bar__title { font-size: 12.5px !important; }
}

/* ── 8) MODALES (cookie / CRO / wizard) — dvh + safe-area + tap targets ── */
@media (max-width: 720px) {
  /* Cookie banner: pleno ancho controlado, padding cómodo */
  #exa-cookie-banner {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding: 16px 16px !important;
    border-radius: 14px !important;
  }
  #exa-cookie-banner .exa-cb-actions button {
    min-height: 44px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
  /* Cookie modal preferencias */
  #exa-cookie-modal-overlay { padding: 16px !important; }
  #exa-cookie-modal {
    max-height: 90vh !important;
    max-height: 90dvh !important;
    padding: 22px 18px 18px !important;
    border-radius: 14px !important;
  }
  #exa-cookie-modal .exa-cb-modal-actions button {
    min-height: 44px !important;
    padding: 11px 14px !important;
  }
  /* CRO exit-intent modal */
  .cro-modal-overlay { padding: 14px !important; }
  .cro-modal {
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
  }
  .cro-modal__head { padding: 24px 22px 14px !important; }
  .cro-modal__body { padding: 18px 22px 22px !important; }
  .cro-modal__close {
    width: 40px !important;
    height: 40px !important;
    top: 10px !important;
    right: 10px !important;
  }
  .cro-modal__title { font-size: 22px !important; line-height: 1.18 !important; }
  /* Wizard modal */
  .exa-wizard-modal,
  .exa-wizard {
    max-height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
  }
  .exa-wizard { padding: 22px 18px 20px !important; }
  .exa-wizard-btn {
    min-height: 44px !important;
  }
}

/* ── 9) FORMULARIOS — input height consistente, no zoom iOS, safe-area ── */
@media (max-width: 720px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS auto-zoom */
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  .exa-lead-form,
  .exa-lead-form--compact,
  .exa-lead-form--card2 {
    padding: 22px 18px 20px !important;
    border-radius: 14px !important;
  }
  .exa-lead-form-submit {
    width: 100% !important;
  }
}

/* ── 10) GRIDS / TARJETAS — sin overflow, gaps proporcionados ── */
@media (max-width: 720px) {
  .services,
  .reasons,
  .reviews,
  .related-grid,
  .steps-grid,
  .cases-grid,
  .contracts-grid,
  .entities-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .svc, .review, .step, .case-item, .contract, .entity-item, .reason {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Tablas siempre con scroll horizontal seguro */
  table, .ig-table, .stack-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 11) HERO / STAGE — paddings consistentes en todas las landings ── */
@media (max-width: 480px) {
  .stage {
    margin: 0 8px 14px !important;
    border-radius: 14px !important;
  }
  .hero-wrap,
  .page-hero {
    padding: 36px 16px 40px !important;
  }
  .hero-content h1,
  h1.page-h1 {
    font-size: clamp(28px, 8.2vw, 40px) !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    word-break: break-word;
  }
  .hero-content p.lead,
  .page-hero p.lead {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
}

/* ── 12) FOOTER — espacio inferior dinámico para que los widgets fijos no
   tapen el contenido. Calculamos suma de barras posibles + safe-area. ── */
@media (max-width: 720px) {
  body { padding-bottom: 0 !important; }
  body.cro-sticky-active,
  body:has(.exa-mobile-cta) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  body:has(.cro-sticky-bar.is-visible).cro-sticky-active,
  body.cro-sticky-active:has(.exa-mobile-cta) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  footer.site-foot {
    padding: 28px 16px calc(28px + env(safe-area-inset-bottom)) !important;
    margin-bottom: 0 !important;
  }
}

/* ── 13) TAP TARGETS universal — todo lo cliclable ≥44px alto en mobile ── */
@media (max-width: 720px) and (hover: none) {
  a.btn,
  button,
  .btn,
  .cta-mini,
  .svc__link,
  details summary,
  .lex-fab,
  .wa-fab,
  .exa-mobile-cta a,
  .cro-sticky-bar__cta,
  .cro-modal__close,
  #exa-cookie-banner button,
  #exa-cookie-modal button {
    min-height: 44px !important;
  }
}

/* ── 14) Apagado de hover sticky en táctil (evita estados "atascados") ── */
@media (hover: none) and (pointer: coarse) {
  .svc:hover,
  .review:hover,
  .btn:hover,
  details:hover,
  .exa-mobile-cta a:hover,
  .cro-sticky-bar__cta:hover {
    transform: none !important;
  }
}

/* ── 15) Safe-area horizontal en landscape con notch (iPhone) ── */
@media (max-width: 920px) and (orientation: landscape) {
  .stage,
  .hero-wrap,
  .page-hero,
  section.band,
  footer.site-foot {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .lex-fab { left: max(14px, env(safe-area-inset-left)) !important; }
}

/* ── 16) TIPOGRAFÍA FLUIDA — escalas clamp() coherentes en todos los heads ──
   Sustituyen los font-size puntuales (que estaban en cada inline <style> con
   distintas escalas, generando saltos visuales). En móvil la escala base es
   más conservadora para evitar headings que ocupen 3 líneas. */
@media (max-width: 720px) {
  h1, .h1, h1.page-h1, .hero-content h1 {
    font-size: clamp(28px, 7.6vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.012em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  h2, .h2, .section-head h2, .aeo-tldr h2, .contact-block h2 {
    font-size: clamp(22px, 5.6vw, 30px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.008em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  h3, .h3, .svc h3, .step h3, .case-item h3, .contract h3, .price-card h3, .aeo-def h3 {
    font-size: clamp(17px, 4.4vw, 21px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.005em !important;
  }
  p.lead, .page-hero p.lead, .hero-content p.lead {
    font-size: clamp(14.5px, 3.9vw, 16.5px) !important;
    line-height: 1.55 !important;
  }
  .prose, .prose p, .prose li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .kicker, .eyebrow, .aeo-eyebrow, .exa-lead-form-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    line-height: 1.5 !important;
  }
}

/* ── 17) BREADCRUMBS / .crumbs — legibles en móvil sin truncar la ruta ── */
@media (max-width: 720px) {
  .crumbs,
  .page-hero .crumbs {
    font-size: 10.5px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 14px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .crumbs a { padding: 2px 0 !important; }
}

/* ── 18) AEO BAND (TL;DR + definiciones + citas) — denso pero legible ── */
@media (max-width: 720px) {
  .aeo-band, section.aeo-band, .band.aeo-band {
    padding: 36px 16px !important;
  }
  .aeo-wrap { max-width: 100% !important; }
  .aeo-tldr p { font-size: 15px !important; line-height: 1.6 !important; margin: 0 0 22px !important; }
  .aeo-def { padding: 18px 16px !important; border-radius: 12px !important; }
  .aeo-def p { font-size: 14px !important; line-height: 1.6 !important; }
  .aeo-cite { font-size: 11px !important; }
  .aeo-cite-body { padding: 12px 14px !important; font-size: 12.5px !important; line-height: 1.55 !important; }
  .aeo-cite code { font-size: 11px !important; word-break: break-all; }
}

/* ── 19) NOSOTROS-STATS / TRUST-ROW / STATS-ROW — grids robustos en móvil ── */
@media (max-width: 720px) {
  .nosotros-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    margin: 24px auto !important;
  }
  .nosotros-stat .big,
  .nosotros-stat .num,
  .stats-row .big,
  .stats-row .num {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1 !important;
  }
  .nosotros-stat .sm,
  .stats-row .sm {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 380px) {
  .nosotros-stats { gap: 4px !important; }
  .nosotros-stat .big,
  .nosotros-stat .num { font-size: 22px !important; }
  .nosotros-stat .sm { font-size: 8.5px !important; letter-spacing: 0.1em !important; }
}

/* ── 20) PRICE CARDS — proporcionadas en móvil sin perder jerarquía ── */
@media (max-width: 720px) {
  .price-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .price-card .price .num,
  .price-card .price-num,
  .price-card .num {
    font-size: clamp(36px, 11vw, 52px) !important;
    line-height: 1 !important;
  }
  .price-card h3 { font-size: 19px !important; margin: 0 0 12px !important; }
  .price-card ul { font-size: 14px !important; line-height: 1.6 !important; padding-left: 18px !important; }
  .price-card li { margin-bottom: 6px !important; }
}

/* ── 21) COMPARATIVA TABLE (.ig-table) — wrapper con scroll obvio + sombra ── */
@media (max-width: 720px) {
  .ig-table-wrap,
  .table-wrap {
    margin: 0 -8px !important;
    padding: 0 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .ig-table-wrap::after,
  .table-wrap::after {
    /* hint visual de scroll horizontal */
    content: "";
    position: sticky;
    right: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(247,242,229,0.85));
    pointer-events: none;
  }
  .ig-table {
    min-width: 560px !important;
    font-size: 13px !important;
  }
  .ig-table th, .ig-table td {
    padding: 12px 10px !important;
    word-break: break-word;
  }
  .ig-table tbody td.criterio {
    font-size: 10px !important;
    width: auto !important;
    min-width: 110px;
  }
}

/* ── 22) FAQ details/summary — tap target generoso, ícono claro ── */
@media (max-width: 720px) {
  details {
    padding: 14px 8px !important;
  }
  details summary {
    font-size: 16px !important;
    line-height: 1.35 !important;
    padding: 14px 36px 14px 4px !important;
    min-height: 52px !important;
    position: relative;
    cursor: pointer;
  }
  details summary::after {
    font-size: 22px !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%);
  }
  details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
  }
  details p,
  details li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
}

/* ── 23) AUTHOR CARD (E-E-A-T) — 1 columna en móvil con divider claro ── */
@media (max-width: 720px) {
  .author-band { padding: 28px 16px !important; }
  .author-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 14px !important;
  }
  .author-name { font-size: 17px !important; }
  .author-role,
  .author-meta,
  .author-date { font-size: 12px !important; line-height: 1.5 !important; }
  .author-trust {
    padding-left: 0 !important;
    border-left: none !important;
    padding-top: 14px !important;
    border-top: 1px solid #E2E6EB !important;
    font-size: 12.5px !important;
  }
}

/* ── 24) CONTACT BLOCK / CONTACT INFO — apilado claro en móvil ── */
@media (max-width: 720px) {
  .contact-block {
    padding: 32px 18px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  .contact-block h2 { font-size: clamp(22px, 5.4vw, 28px) !important; }
  .contact-block p { font-size: 14.5px !important; line-height: 1.55 !important; }
  .contact-info {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px auto 14px !important;
    font-size: 13px !important;
  }
  .contact-info a { padding: 6px 0 !important; }
}

/* ── 25) FORM FIELDS — gap consistente, labels visibles, errores claros ── */
@media (max-width: 720px) {
  .exa-lead-form-field,
  .exa-wizard-input-group {
    margin-bottom: 12px !important;
  }
  .exa-lead-form-field label,
  .exa-wizard-input-group label {
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 4px !important;
  }
  .exa-lead-form-disclaimer {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }
  .exa-lead-form-error,
  .exa-lead-form-success {
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
}

/* ── 26) IMÁGENES / VIDEO — aspect-ratio estable para evitar CLS en móvil ── */
@media (max-width: 720px) {
  .hero-visual,
  .nosotros-teaser__visual {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .nosotros-teaser__visual {
    aspect-ratio: 4 / 5 !important;
    border-radius: 14px !important;
  }
  .hero-visual {
    aspect-ratio: 4 / 4 !important;
    border-radius: 16px !important;
  }
  picture, picture img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ── 27) ANCLAS — scroll-padding-top para que las secciones no queden bajo
   un eventual header sticky (si en el futuro vuelve a haber uno). ── */
html {
  scroll-padding-top: 16px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── 28) ANIMACIONES — reducir intensidad en móvil para fluidez ── */
@media (max-width: 720px) {
  .svc, .review, .reason, .step, .case-item, .contract,
  .related-grid a, .price-card, .author-card, .lex-panel,
  .exa-lead-form, .exa-lead-form--compact {
    transition-duration: 0.18s !important;
  }
  .svc:hover, .review:hover, .step:hover, .case-item:hover,
  .related-grid a:hover, .author-card:hover {
    transform: none !important;
  }
  /* Pulse del FAB Lex: más sutil en móvil para no robar foco */
  .lex-fab__pulse {
    animation-duration: 2.4s !important;
    opacity: 0.7 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 29) FOCUS VISIBLE — indicador de teclado claro en cualquier viewport ── */
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #2563EB !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* ── 30) SKIP LINK — siempre accesible, visible al hacer focus ── */
.skip-link {
  position: absolute !important;
  top: -100px;
  left: 8px;
  z-index: 99999;
  background: #0E1A2B !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: top 0.18s ease !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: max(8px, env(safe-area-inset-top)) !important;
}

/* ── 31) SELECTION color — coherencia con paleta ── */
::selection {
  background: rgba(184, 146, 76, 0.32);
  color: #0E1A2B;
}

/* ── 32) REVIEWS / TESTIMONIOS — apilados con jerarquía clara en móvil ── */
@media (max-width: 720px) {
  .reviews-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .review {
    padding: 18px 18px 16px !important;
    border-radius: 14px !important;
  }
  .review .who { font-size: 14px !important; }
  .review .when { font-size: 11px !important; letter-spacing: 0.08em !important; }
  .review p { font-size: 14px !important; line-height: 1.55 !important; }
  .stars, .stars-sm { font-size: 13px !important; letter-spacing: 0.06em !important; }
}

/* ── 33) LEX PANEL HEADER + BODY + INPUT — ergonomía móvil completa ── */
@media (max-width: 720px) {
  .lex-head {
    padding: 12px 14px !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    gap: 10px !important;
  }
  .lex-head__avatar {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  .lex-head__avatar svg { width: 24px !important; height: 24px !important; }
  .lex-head__title { font-size: 15px !important; line-height: 1.2 !important; }
  .lex-head__sub { font-size: 11.5px !important; line-height: 1.3 !important; }
  .lex-head__close {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    font-size: 22px !important;
  }
  .lex-body {
    padding: 14px 12px !important;
    gap: 10px !important;
    overscroll-behavior: contain;
  }
  .lex-msg {
    max-width: 88% !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
  }
  .lex-input {
    padding: 10px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  .lex-input textarea {
    font-size: 16px !important; /* anti zoom iOS */
    min-height: 44px !important;
    max-height: 120px !important;
    padding: 10px 12px !important;
    line-height: 1.4 !important;
  }
  .lex-input button {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  .lex-typing { font-size: 11px !important; padding: 6px 10px !important; }
  .lex-form__btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* ── 34) WIZARD MODAL (.exa-wizard) — campos legibles, opciones pulsables ── */
@media (max-width: 720px) {
  .exa-wizard-option {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    border-radius: 10px !important;
  }
  .exa-wizard-option-content small {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .exa-wizard-option-radio {
    width: 20px !important;
    height: 20px !important;
  }
  .exa-wizard-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .exa-wizard-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .exa-wizard h3, .exa-wizard h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
  }
  .exa-wizard p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ── 35) COOKIE BANNER (mobile finetune) — texto legible, botones grandes ── */
@media (max-width: 720px) {
  #exa-cookie-banner .exa-cb-text { font-size: 13px !important; line-height: 1.55 !important; }
  #exa-cookie-banner .exa-cb-text strong { font-size: 14px !important; }
  #exa-cookie-modal .exa-cb-cat {
    padding: 14px 14px !important;
    margin-bottom: 10px !important;
  }
  #exa-cookie-modal .exa-cb-cat-title { font-size: 14.5px !important; }
  #exa-cookie-modal .exa-cb-cat-desc { font-size: 12.5px !important; line-height: 1.5 !important; }
  #exa-cookie-modal .exa-cb-switch { transform: scale(0.95); }
}

/* ── 36) TRUST STRIPS / PROMO STRIPS — densidad mobile sin saltos ── */
@media (max-width: 720px) {
  .trust-strip,
  .promo-strip,
  .top-strip,
  .exa-trust-strip {
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .cro-trust-strip {
    padding: 12px 14px !important;
    font-size: 11px !important;
    gap: 12px !important;
  }
}

/* ── 37) PROSE LINKS (legibilidad táctil) — subrayado claro, padding interno ── */
@media (max-width: 720px) {
  .prose a {
    padding: 1px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: rgba(184, 146, 76, 0.18);
  }
}

/* ── 38) Galaxy Fold (≤320px) — última red de seguridad ── */
@media (max-width: 320px) {
  .stage { margin: 0 6px 12px !important; border-radius: 12px !important; }
  .hero-wrap, .page-hero { padding: 28px 12px 32px !important; }
  .bar { padding: 8px 10px !important; gap: 6px !important; }
  .brand b, .brand strong { font-size: 14px !important; }
  .bar .cta-mini { font-size: 9.5px !important; padding: 7px 9px !important; height: 32px !important; }
  .btn, .btn--primary, .btn--ghost { padding: 9px 12px !important; font-size: 13px !important; height: 46px !important; }
  section.band { padding: 28px 12px !important; }
  .lex-fab { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; }
  .lex-fab__avatar { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
  .lex-fab__avatar svg { width: 22px !important; height: 22px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  V2.6 — D-047 MOBILE RHYTHM & COHERENCE                              ║
   ║  Síntoma reportado: en móvil "se quedan mucho espacio vacío y no     ║
   ║  tienen coherencia". Causas:                                         ║
   ║   1) IO fade-up con threshold 0.15 nunca disparaba en bands altas    ║
   ║      (>viewport/0.15) ⇒ huecos blancos enormes al hacer scroll.      ║
   ║      [Fix en visual-boost.js + visual-boost.css salvavidas]          ║
   ║   2) section.band fija 100px de padding vertical incluso en móvil    ║
   ║      ⇒ aire muerto de >200px entre cada bloque.                      ║
   ║   3) .section-head con margin-bottom 64px en móvil ⇒ el kicker queda ║
   ║      flotando muy lejos del primer card.                             ║
   ║  Reglas de ritmo mobile final, !important + último archivo:          ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  section.band { padding: 56px 18px !important; }
  section.band--alt { padding: 56px 18px !important; }
  .author-band { padding: 32px 18px !important; }
  .section-head { margin: 0 auto 28px !important; max-width: 100% !important; }
  .section-head .kicker { margin-bottom: 12px !important; }
  .section-head h2 { margin: 0 0 12px !important; }
  /* AEO band ya era compacta (36px inline) — la dejamos compacta. */
  section.band.aeo-band { padding: 36px 18px !important; }
  /* Cuadro "compliance penal" dentro de #servicios usa margin:64px inline.
     En móvil ese margin de 64px más el padding de la sección = 120px
     vacíos. Lo bajamos a 32px. */
  #servicios > div[style*="max-width:1200px"],
  #servicios > div[style*="max-width: 1200px"] {
    margin-top: 32px !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }
  /* Frontera entre band--alt y band siguiente: línea sutil, no cortante. */
  section.band--alt + section.band {
    border-top-color: rgba(217, 207, 184, 0.55) !important;
  }
  /* Hero h1: line-height 1.1 cortaba descenders en italic ("empresa", "crecer"). */
  .hero-content h1 {
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
  }
  /* body: respeto safe-area inferior por sticky bar. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}

@media (max-width: 480px) {
  section.band { padding: 44px 16px !important; }
  section.band--alt { padding: 44px 16px !important; }
  .section-head { margin: 0 auto 22px !important; }
  section.band.aeo-band { padding: 32px 16px !important; }
}

@media (max-width: 360px) {
  section.band { padding: 36px 14px !important; }
  section.band--alt { padding: 36px 14px !important; }
  .section-head { margin: 0 auto 18px !important; }
  section.band.aeo-band { padding: 28px 14px !important; }
}

/* D-047 · Tablas con <caption> rotas en móvil:
   mobile-fixes.css pone table { display: block; overflow-x: auto } pero
   la <caption> queda como columna estrecha de 64px a la izquierda. La
   sacamos del flujo del table y la colocamos como block normal arriba. */
@media (max-width: 860px) {
  table > caption,
  .ig-table > caption,
  .stack-table > caption {
    display: block !important;
    width: auto !important;
    text-align: left !important;
    padding: 0 0 12px !important;
    font-size: 13px !important;
    color: var(--ink-soft, #5b6577) !important;
    caption-side: top !important;
  }
}

/* D-058 movida a visual-boost.css al final del archivo, porque a partir de
   ciertos índice (~rule 300) las reglas de restyle-v2.css no llegan a
   parsearse en algunos navegadores (parser desync en producción).
   visual-boost.css se carga después de restyle-v2.css y se parsea sin
   problemas. */
