.pu-home-hero{
    position:relative;min-height:75vh;display:flex;align-items:flex-end;
    overflow:hidden;background:#151515;color:#fff;
    font-family:'Inter Tight',sans-serif;-webkit-font-smoothing:antialiased;
  }
  .pu-home-hero, .pu-home-hero *{box-sizing:border-box;}

  /* ===== Carrusel de fondo (3 fotos, fade, loop, 5000ms) ===== */
  .ph-slideshow{position:absolute;inset:0;z-index:0;}
  .ph-slide{position:absolute;inset:0;opacity:0;transition:opacity 500ms ease;will-change:opacity;}
  .ph-slide.is-active{opacity:1;}
  .ph-slide img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Overlay para legibilidad del texto encima (como en el sitio real) */
  .ph-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(21,21,21,.82) 0%, rgba(21,21,21,.55) 45%, rgba(21,21,21,.25) 100%);}
  @media(max-width:680px){ .ph-scrim{background:linear-gradient(180deg, rgba(21,21,21,.72) 0%, rgba(21,21,21,.5) 60%, rgba(21,21,21,.3) 100%);} }

  /* ===== Contenido ===== */
  .ph-inner{
    position:relative;z-index:2;max-width:1160px;margin:0 auto;
    padding:120px 24px 48px;width:100%;
  }
  .ph-title{
    font-weight:700;font-size:clamp(40px, 6.2vw, 66px);line-height:1.04;
    letter-spacing:-.015em;margin:0 0 24px;max-width:900px;color:#fff;
  }
  .ph-title .word{display:inline-block;will-change:transform,opacity;}
  .ph-title .word em{font-style:italic;font-weight:500;color:#F4D000;}
  .ph-title .space{display:inline-block;width:.28em;}

  /* ===== Línea 1 (con la palabra que se tipea al lado de "tu") y
     línea 2 ("necesita…") siempre en una nueva línea — evita huecos. ===== */
  .ph-title .ph-line{display:block;}
  .ph-title .ph-line-2{margin-top:.08em;}

  /* ===== Typewriter: palabra en cursiva amarilla + cursor parpadeante =====
     Solo visual (aria-hidden); el aria-label del <h1> queda estable con
     "empresa" para SEO/lectores de pantalla. */
  .ph-title .ph-type{
    display:inline-block;
    font-style:italic;font-weight:500;color:#F4D000;
    opacity:0;
  }
  .ph-title .ph-type::after{
    content:'';display:inline-block;width:2px;height:.82em;margin-left:3px;
    background:#F4D000;vertical-align:.06em;
    animation:ph-caret 1.05s steps(1) infinite;
  }
  @keyframes ph-caret{0%,100%{opacity:1}50%{opacity:0}}
  @media(prefers-reduced-motion: reduce){
    .ph-title .ph-type::after{animation:none;opacity:1;}
  }

  /* En pantallas que no son móviles, la palabra que se tipea NO se separa de
     "tu" (se evita que "emprendimiento" salte a otra línea). En móviles el
     wrap natural está bien (layout apilado compacto). */
  @media(min-width:680px){
    .ph-title .ph-line-1{white-space:nowrap;}
  }

  /* Quebra intencional del subtítulo:
     - desktop: el <br> (ph-sub-br2) fuerza 2 líneas y el <span> sigue
       inline; max-width:620px acomoda la 2.ª línea → ≤2 líneas.
     - móvil: se oculta el <br> (evita "Tributaria,y") y el <span> queda
       inline → el texto fluye naturalmente → ≤3 líneas.
     Estas reglas-base van ANTES del media ≤680px para que el override
     móvil (display:none del br + centrado) gane por cascada. */
  .ph-sub .ph-sub-br2{display:inline;}
  .ph-sub .ph-sub-br{display:inline;}

  .ph-sub{
    font-weight:300;font-size:clamp(18px, 2.4vw, 23px);line-height:1.5;
    color:rgba(255,255,255,.92);margin:0 0 40px;max-width:620px;opacity:0;
  }

  /* ===== Móvil (≤680px): todo centrado, sin cortes feos =====
     - La etiqueta COWORK / SALAS…: SIEMPRE en una sola línea (nowrap);
       se reduce la fuente para que quepa en pantallas pequeñas.
     - Subtítulo: 2 líneas forzadas (el <br> aparece solo aquí).
     - Título, subtítulo y acciones: centrados. */
  @media(max-width:680px){
    /* Hero más bajo en móvil: 60vh y texto proporcional (vh) para que
       todo quepa sin apretarse ni desbordar. clamp() garantiza mínimos
       legibles. */
    .pu-home-hero{min-height:60vh;}
    .ph-title{font-size:clamp(26px, 6.2vw, 40px);}
    .ph-sub{font-size:clamp(14px, 2.4vw, 18px);}
    .ph-sub .ph-sub-br2{display:none;}
    .ph-sub .ph-sub-br{display:inline;}
    .ph-title{text-align:center;}
    .ph-sub{text-align:center;margin:0 auto 24px;}
    .ph-inner{padding:64px 16px 48px;}
    .ph-btn{font-size:14px;padding:14px 24px;}
    .ph-actions{gap:10px;}
  }

  /* Pantallas muy estrechas (≤360px): menos padding lateral del hero y
     fuente del subtítulo algo menor para que quepa en ≤3 líneas. */
  @media(max-width:360px){
    .ph-inner{padding-left:16px;padding-right:16px;}
  }
  @media(max-width:340px){
    .ph-sub{font-size:16px;}
  }

  .ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;opacity:0;}

  /* Envoltorio del efecto magnético: recibe el translate del puntero.
     El <a> interno conserva su hover (translateY) sin conflicto. */
  .ph-cta-mag{display:inline-block;will-change:transform;}
  .ph-btn{
    display:inline-flex !important;align-items:center;justify-content:center;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15px;
    padding:16px 30px;border-radius:100px;text-decoration:none;cursor:pointer;
    transition:transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    will-change:transform;
  }
  .ph-btn-primary{background:#F4D000 !important;color:#151515 !important;border:none !important;}
  .ph-btn-primary:hover{transform:translateY(-2px);}
  .ph-btn-primary:active{transform:translateY(0);}

  .ph-btn-ghost{background:transparent !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.85) !important;}
  .ph-btn-ghost:hover{background:rgba(255,255,255,.12) !important;transform:translateY(-2px);}
  .ph-btn-ghost:active{transform:translateY(0);}

  /* WhatsApp como enlace secundario, separado por divisor vertical;
     tercer nivel de jerarquía (pesado → outline → enlace) sin 3 pilas. */
  .ph-link-wa{
    display:inline-flex !important;align-items:center;gap:8px;
    margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.35);
    font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px;color:#fff;
    text-decoration:none;transition:opacity .18s ease;
  }
  .ph-link-wa svg{transition:transform .18s ease;}
  .ph-link-wa:hover{opacity:.8;}
  .ph-link-wa:hover svg{transform:translate(2px,-2px);}
  .ph-link-wa:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px;}

  .ph-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

  /* En pantallas donde los 2 botones + el enlace no caben juntos cómodamente
     (~820px), pasamos a columna para no dejar el divisor vertical huérfano. */
  @media(max-width:820px){
    .ph-actions{flex-direction:column;align-items:stretch;gap:12px;}
    .ph-cta-mag{width:100%;}
    .ph-btn{width:100%;justify-content:center;}
    .ph-link-wa{margin:6px 0 0;padding:0;border-left:none;justify-content:center;min-height:44px;}
  }

  /* ===== Elementor: neutraliza contenedores para que el hero sea 100% ancho ===
     El widget HTML de Elementor y sus contenedores no estiran el 100% por
     defecto (content-width boxed, padding de columna/container, etc.).
     Estas reglas fuerzan ancho completo. Combínalas con:
       1) Sección/container: Content Width = Full Width, Padding 0.
       2) Columna: Padding 0.
     Además se anula el borde/outline blanco que el widget HTML aplica en
     algunos temas alrededor del hero (causa la franja blanca sobre la que
     se posa el header en vez de sobre la foto). */
  .pu-home-hero,
  .elementor-widget-html,
  .elementor-widget-html .elementor-widget-container{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  /* ===== Franja blanca arriba del hero (Container padre del widget) =====
     Lo de arriba solo limpia el widget HTML en sí; el Container/Sección
     de Elementor que lo envuelve (clases e-con / e-con-full) puede traer
     su propio padding por defecto, dejando un borde blanco por encima
     del hero (más visible en móvil, donde el hero es más bajo). Esta
     regla apunta puntualmente al Container padre del hero (sin depender
     del ID auto-generado, que cambia si se reconstruye la sección), sin
     tocar el padding de otros containers del resto de la página. */
  .elementor-element:has(> .elementor-widget-html > .elementor-widget-container > .pu-home-hero){
    padding:0 !important;
    margin:0 !important;
  }