.elementor-26431 .elementor-element.elementor-element-a0ea559{--display:flex;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-group.recaptcha_v3-bottomleft, .elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-26431 .elementor-element.elementor-element-233f93e .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-26431 .elementor-element.elementor-element-233f93e .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-26431 .elementor-element.elementor-element-233f93e .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-type-html{padding-bottom:0px;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-button[type="submit"]{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-26431 .elementor-element.elementor-element-233f93e{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-26431 .elementor-element.elementor-element-858977d{--display:flex;}/* Start custom CSS for html, class: .elementor-element-d6fa650 */<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <title>Abogado laboralista en Badajoz – Versión Móvil</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Merriweather:wght@700&display=swap" rel="stylesheet">

  <style>
    :root{
      --blue-900:#0f2b4c;
      --blue-800:#123a63;
      --txt:#112233;
      --txt-light:#ffffff;
      --wh-green:#25D366;
      --design-width:375px;
    }

    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--txt);
      background:#ffffff;
      overflow-x:hidden;

      width: var(--design-width);
      transform-origin: top left;
      transform: scale(calc(100vw / var(--design-width)));
      min-height: calc(100vh / (100vw / var(--design-width)));
    }

    .hero-section{
      position:relative;
      background:#ffffff;
      padding-top:0;
      overflow:hidden;
    }

    /* ===== BARRA SUPERIOR (ARREGLO DEFINITIVO: 1 SOLA LÍNEA) =====
       Nota: uso .elementor-26431 .elementor-element.elementor-element-d6fa650 más específico + !important para ganar a Elementor/tema.
    */
    #hero .top-bar{
      background: linear-gradient(90deg, var(--blue-900) 0%, var(--blue-800) 100%) !important;
      color: var(--txt-light) !important;

      position: relative !important;
      top: 00000px !important;
      left: 0 !important;
      width: 100% !important;

      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;

      gap: 20px !important;

      white-space: nowrap !important;
      flex-wrap: nowrap !important;

      padding: 12px 12px !important;
      font-family: 'Merriweather', serif !important;
      font-weight: 700 !important;

      text-align: center !important;
      z-index: 10 !important;
    }

    /* Fuerza a que los hijos NO ocupen 100% (esto es lo que te está rompiendo) */
    #hero .top-bar > *{
      width: auto !important;
      max-width: none !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.1 !important;
    }

    /* Link del teléfono en línea */
    #hero .top-bar a{
      color: var(--txt-light) !important;
      text-decoration: none !important;
      display: inline-flex !important;
      white-space: nowrap !important;
    }

    /* Separador vertical */
    #hero .top-bar .sep{
      width: 1px !important;
      height: 20px !important;
      background: rgba(255,255,255,.28) !important;
      display: inline-block !important;
    }

    /* ===== IMAGEN (SIN CAMBIOS) ===== */
    .png-img{
      position:absolute;
      top:320px;
      right:-45%;
      bottom:-200px;
      width:auto;
      object-fit:cover;
      transform: scale(1.60);
      z-index:1;
      pointer-events:none;
    }

    /* ===== CONTENIDO HERO (SIN CAMBIOS) ===== */
    .hero-container{
      position:relative;
      z-index:2;
      width:68%;
      margin:0 32% 0 16px;
      padding:32px 0;
      text-align:left;
    }

    .hero-container h1{
      font: 800 2rem/1.4 'Inter';
      color: var(--blue-900);
      margin-bottom: 16px;
      text-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 8px rgba(0,0,0,0.5);
    }

    .hero-container .subhead,
    .hero-container .lead{
      font: .9rem 'Inter';
      color:#0d1a2a;
      margin-bottom:24px;
      line-height:1.6;
    }

    .hero-container .lead strong{ display:block; line-height:1.4; }

    .hero-container .caption{
      font: 0.7rem 'Inter';
      color:#555;
      margin-top:60px;
      line-height:1.4;
    }

    .hero-container .btn{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      padding:12px;
      border-radius:6px;
      font: 600 1rem 'Inter';
      text-align:center;
      position:relative;
      text-decoration:none;
      overflow:hidden;
      margin-bottom:16px;
    }

    .hero-container .btn.call{
      background:#ffffff;
      color:var(--blue-900);
      border:2px solid var(--blue-900);
      margin-top:80px !important;
    }

    .hero-container .btn.whats{
      background: var(--blue-900);
      color: var(--txt-light);
      border:2px solid var(--blue-900);
      margin-top:8px !important;
      gap:10px;
    }

    .hero-container .btn.whats .dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: var(--wh-green);
      box-shadow:
        0 0 0 4px rgba(37,211,102,.18),
        0 0 14px rgba(37,211,102,.55);
      position:relative;
      flex:0 0 auto;
    }

    .hero-container .btn.whats .dot::after{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:999px;
      background: radial-gradient(circle, rgba(37,211,102,.22), rgba(37,211,102,0) 62%);
      animation: pulse 1.9s ease-in-out infinite;
    }

    @keyframes pulse{
      0%{ transform: scale(.72); opacity:.55; }
      60%{ transform: scale(1.15); opacity:.95; }
      100%{ transform: scale(1.35); opacity:0; }
    }

    .hero-container .btn.whats::after{
      content:"";
      position:absolute;
      top:-120%;
      left:-60%;
      width:220%;
      height:320%;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
      transform: rotate(25deg);
      animation: shine 3.4s infinite;
      pointer-events:none;
    }

    @keyframes shine{
      0%{ transform: translateX(-120%) rotate(25deg); }
      100%{ transform: translateX(120%) rotate(25deg); }
    }

    @media (prefers-reduced-motion: reduce){
      .hero-container .btn.whats::after,
      .hero-container .btn.whats .dot::after{ animation:none; }
    }

    @media (max-width: 768px){
      .png-img{ top:320px; right:-45%; bottom:0; transform: scale(1.60); }
      .hero-container{ width: calc(100% - 32px); margin:0 16px; padding:32px 0; }
    }
  </style>
</head>

<body>
  <div class="scale-root">
    <section class="hero-section" id="hero">

      <!-- Barra en 1 línea -->
      <div class="top-bar">
        <div>Arturo Álvarez</div>
        <span class="sep" aria-hidden="true"></span>
        <div><a href="tel:+34608930292">608 930 292</a></div>
      </div>

      <picture>
        <source srcset="https://www.abogadosenbadajoz.com/wp-content/uploads/2026/01/archivo-webp.webp" type="image/webp">
        <img
          class="png-img"
          src="https://www.abogadosenbadajoz.com/wp-content/uploads/2025/07/Imagen_de_WhatsApp_2025-07-15_a_las_11.19.09_cc69d461-removebg-preview.png"
          alt="Arturo Álvarez - Abogado Laboralista en Badajoz"
          loading="eager"
          decoding="async"
          fetchpriority="high"
          width="800"
          height="800">
      </picture>

      <div class="hero-container">
        <h1>Abogado laboralista en Badajoz</h1>

        <p class="subhead">
          Asesoramiento experto en Despidos, Reclamaciones Salariales, Accidentes de Trabajo e Incapacidad Permanente
        </p>

        <p class="lead">
          <strong>Atención personalizada.<br>Servicio cercano y profesional.</strong>
        </p>

        <div class="caption">
          Arturo Álvarez – ICABA 4173<br>
          C/ Arias Montano 28 1º Dcha.
        </div>

        <a href="tel:+34608930292" class="btn call">Llamar ahora</a>

        <a href="https://wa.me/34608930292?text=Hola%20Arturo,%20me%20interesa%20tu%20asesor%C3%ADa%20legal"
           class="btn whats">
          <span class="dot" aria-hidden="true"></span>
          WhatsApp 24 horas
        </a>
      </div>

    </section>
  </div>
</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cdf7f20 */<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <title>Abogado laboralista en Badajoz – Versión Móvil</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Merriweather:wght@700&display=swap" rel="stylesheet">

  <style>
    :root{
      --blue-900:#0f2b4c;
      --blue-800:#123a63;
      --txt:#112233;
      --txt-light:#ffffff;
      --wh-green:#25D366;
      --design-width:375px;
    }

    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--txt);
      background:#ffffff;
      overflow-x:hidden;

      width: var(--design-width);
      transform-origin: top left;
      transform: scale(calc(100vw / var(--design-width)));
      min-height: calc(100vh / (100vw / var(--design-width)));
    }

    .hero-section{
      position:relative;
      background:#ffffff;
      padding-top:0;
      overflow:hidden;
    }

    /* ===== BARRA SUPERIOR (ARREGLO DEFINITIVO: 1 SOLA LÍNEA) =====
       Nota: uso .elementor-26431 .elementor-element.elementor-element-cdf7f20 más específico + !important para ganar a Elementor/tema.
    */
    #hero .top-bar{
      background: linear-gradient(90deg, var(--blue-900) 0%, var(--blue-800) 100%) !important;
      color: var(--txt-light) !important;

      position: relative !important;
      top: 00000px !important;
      left: 0 !important;
      width: 100% !important;

      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;

      gap: 20px !important;

      white-space: nowrap !important;
      flex-wrap: nowrap !important;

      padding: 12px 12px !important;
      font-family: 'Merriweather', serif !important;
      font-weight: 700 !important;

      text-align: center !important;
      z-index: 10 !important;
    }

    /* Fuerza a que los hijos NO ocupen 100% (esto es lo que te está rompiendo) */
    #hero .top-bar > *{
      width: auto !important;
      max-width: none !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.1 !important;
    }

    /* Link del teléfono en línea */
    #hero .top-bar a{
      color: var(--txt-light) !important;
      text-decoration: none !important;
      display: inline-flex !important;
      white-space: nowrap !important;
    }

    /* Separador vertical */
    #hero .top-bar .sep{
      width: 1px !important;
      height: 20px !important;
      background: rgba(255,255,255,.28) !important;
      display: inline-block !important;
    }

    /* ===== IMAGEN (SIN CAMBIOS) ===== */
    .png-img{
      position:absolute;
      top:320px;
      right:-45%;
      bottom:-200px;
      width:auto;
      object-fit:cover;
      transform: scale(1.60);
      z-index:1;
      pointer-events:none;
    }

    /* ===== CONTENIDO HERO (SIN CAMBIOS) ===== */
    .hero-container{
      position:relative;
      z-index:2;
      width:68%;
      margin:0 32% 0 16px;
      padding:32px 0;
      text-align:left;
    }

    .hero-container h1{
      font: 800 2rem/1.4 'Inter';
      color: var(--blue-900);
      margin-bottom: 16px;
      text-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 8px rgba(0,0,0,0.5);
    }

    .hero-container .subhead,
    .hero-container .lead{
      font: .9rem 'Inter';
      color:#0d1a2a;
      margin-bottom:24px;
      line-height:1.6;
    }

    .hero-container .lead strong{ display:block; line-height:1.4; }

    .hero-container .caption{
      font: 0.7rem 'Inter';
      color:#555;
      margin-top:60px;
      line-height:1.4;
    }

    .hero-container .btn{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      padding:12px;
      border-radius:6px;
      font: 600 1rem 'Inter';
      text-align:center;
      position:relative;
      text-decoration:none;
      overflow:hidden;
      margin-bottom:16px;
    }

    .hero-container .btn.call{
      background:#ffffff;
      color:var(--blue-900);
      border:2px solid var(--blue-900);
      margin-top:80px !important;
    }

    .hero-container .btn.whats{
      background: var(--blue-900);
      color: var(--txt-light);
      border:2px solid var(--blue-900);
      margin-top:8px !important;
      gap:10px;
    }

    .hero-container .btn.whats .dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: var(--wh-green);
      box-shadow:
        0 0 0 4px rgba(37,211,102,.18),
        0 0 14px rgba(37,211,102,.55);
      position:relative;
      flex:0 0 auto;
    }

    .hero-container .btn.whats .dot::after{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:999px;
      background: radial-gradient(circle, rgba(37,211,102,.22), rgba(37,211,102,0) 62%);
      animation: pulse 1.9s ease-in-out infinite;
    }

    @keyframes pulse{
      0%{ transform: scale(.72); opacity:.55; }
      60%{ transform: scale(1.15); opacity:.95; }
      100%{ transform: scale(1.35); opacity:0; }
    }

    .hero-container .btn.whats::after{
      content:"";
      position:absolute;
      top:-120%;
      left:-60%;
      width:220%;
      height:320%;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
      transform: rotate(25deg);
      animation: shine 3.4s infinite;
      pointer-events:none;
    }

    @keyframes shine{
      0%{ transform: translateX(-120%) rotate(25deg); }
      100%{ transform: translateX(120%) rotate(25deg); }
    }

    @media (prefers-reduced-motion: reduce){
      .hero-container .btn.whats::after,
      .hero-container .btn.whats .dot::after{ animation:none; }
    }

    @media (max-width: 768px){
      .png-img{ top:320px; right:-45%; bottom:0; transform: scale(1.60); }
      .hero-container{ width: calc(100% - 32px); margin:0 16px; padding:32px 0; }
    }
  </style>
</head>

<body>
  <div class="scale-root">
    <section class="hero-section" id="hero">

      <!-- Barra en 1 línea -->
      <div class="top-bar">
        <div>Arturo Álvarez</div>
        <span class="sep" aria-hidden="true"></span>
        <div><a href="tel:+34608930292">608 930 292</a></div>
      </div>

      <picture>
        <source srcset="https://www.abogadosenbadajoz.com/wp-content/uploads/2026/01/archivo-webp.webp" type="image/webp">
        <img
          class="png-img"
          src="https://www.abogadosenbadajoz.com/wp-content/uploads/2025/07/Imagen_de_WhatsApp_2025-07-15_a_las_11.19.09_cc69d461-removebg-preview.png"
          alt="Arturo Álvarez - Abogado Laboralista en Badajoz"
          loading="eager"
          decoding="async"
          fetchpriority="high"
          width="800"
          height="800">
      </picture>

      <div class="hero-container">
        <h1>Abogado laboralista en Badajoz</h1>

        <p class="subhead">
          Asesoramiento experto en Despidos, Reclamaciones Salariales, Accidentes de Trabajo e Incapacidad Permanente
        </p>

        <p class="lead">
          <strong>Atención personalizada.<br>Servicio cercano y profesional.</strong>
        </p>

        <div class="caption">
          Arturo Álvarez – ICABA 4173<br>
          C/ Arias Montano 28 1º Dcha.
        </div>

        <a href="tel:+34608930292" class="btn call">Llamar ahora</a>

        <a href="https://wa.me/34608930292?text=Hola%20Arturo,%20me%20interesa%20tu%20asesor%C3%ADa%20legal"
           class="btn whats">
          <span class="dot" aria-hidden="true"></span>
          WhatsApp 24 horas
        </a>
      </div>

    </section>
  </div>
</body>
</html>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a0ea559 */@media (max-width: 768px){
  #aa-hero .split .right{
    min-height: 0 !important;
    height: 240px;
  }

  #aa-hero{ padding-bottom: 12px !important; }

  #aa-hero::after{
    height: 28px !important;
  }

  #familia-servicios{
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
}/* End custom CSS */