/* components-wp.css — port de componentes del mockup a selectores Elementor.
   Fuente de los patrones: mockup/assets/css/components.css (Tasks 4-6). */

/* Rolling text hover en nav (bw3d.js envuelve el texto en .bw-roll-wrap > .bw-roll--main/.bw-roll--ghost).
   El overflow y el contexto de posicion van en el WRAP (no en el <a>) para que el ghost
   quede alineado con el texto aunque el <a> tenga padding. */
.elementor-nav-menu a.elementor-item { position: relative; }
.elementor-nav-menu a.elementor-item .bw-roll-wrap { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.elementor-nav-menu a.elementor-item .bw-roll { display: block; transition: transform .3s var(--eo), opacity .3s var(--eo); }
.elementor-nav-menu a.elementor-item .bw-roll--ghost { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(110%); color: var(--red-bright); }
@media (hover:hover) and (pointer:fine) {
  .elementor-nav-menu a.elementor-item:hover .bw-roll--main { opacity: 0; transform: translateY(-110%); }
  .elementor-nav-menu a.elementor-item:hover .bw-roll--ghost { opacity: 1; transform: translateY(0); }
}
.elementor-nav-menu a.elementor-item:focus-visible .bw-roll--main { opacity: 0; transform: translateY(-110%); }
.elementor-nav-menu a.elementor-item:focus-visible .bw-roll--ghost { opacity: 1; transform: translateY(0); }

/* === Clase .bw-btn — capa "neuros-button" sobre el botón global ===
   El tamaño de letra / padding / border-radius / border vienen del Theme Style →
   Buttons (Site Settings, nativo). Acá SOLO: color, icono (flecha) y animación
   hover (cross-fade rojo→negro + doble flecha + deslizamiento del texto).
   Se aplica poniendo "bw-btn" en el campo CSS Classes del botón. */
:root{
  --bw-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.elementor-button.bw-btn{
  position:relative; overflow:hidden;
  color:var(--paper);
  background-color:var(--e-global-color-primary, var(--red));
  transition:background-color .35s var(--eo), color .35s var(--eo), box-shadow .35s var(--eo);
}
/* el contenido deja lugar a la flecha izquierda y se desliza en hover */
.elementor-button.bw-btn .elementor-button-content-wrapper{
  display:inline-flex; align-items:center;
  transform:translateX(.5em);
  transition:transform .35s var(--eo);
}
/* flechas (pseudo en mask, heredan el color del texto) */
.elementor-button.bw-btn::before,
.elementor-button.bw-btn::after{
  content:""; position:absolute; top:50%; pointer-events:none;
  width:1.05em; height:1.05em; background-color:currentColor;
  -webkit-mask:var(--bw-arrow) center/contain no-repeat;
          mask:var(--bw-arrow) center/contain no-repeat;
  transition:opacity .35s var(--eo), transform .35s var(--eo);
}
.elementor-button.bw-btn::before{ left:1.2em;  transform:translateY(-50%) translateX(0);   opacity:1; }
.elementor-button.bw-btn::after { right:1.2em; transform:translateY(-50%) translateX(.8em); opacity:0; }
@media (hover:hover) and (pointer:fine){
  .elementor-button.bw-btn:hover{ background-color:var(--e-global-color-secondary, var(--ink)); box-shadow:0 6px 15px rgba(0,0,0,.15); }
  .elementor-button.bw-btn:hover .elementor-button-content-wrapper{ transform:translateX(-.5em); }
  .elementor-button.bw-btn:hover::before{ opacity:0; transform:translateY(-50%) translateX(-.8em); }
  .elementor-button.bw-btn:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
}
.elementor-button.bw-btn:focus-visible{ background-color:var(--e-global-color-secondary, var(--ink)); }
.elementor-button.bw-btn:focus-visible .elementor-button-content-wrapper{ transform:translateX(-.5em); }
.elementor-button.bw-btn:focus-visible::before{ opacity:0; transform:translateY(-50%) translateX(-.8em); }
.elementor-button.bw-btn:focus-visible::after { opacity:1; transform:translateY(-50%) translateX(0); }

/* Preloader (markup inyectado por wp_body_open en el PHP del plugin) */
.loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: var(--ink); transition: opacity .3s ease; }
.loader--done { opacity: 0; pointer-events: none; }
.loader__box { position: relative; width: 100px; height: 100px; display: grid; place-items: center; }
.loader__logo { position: relative; z-index: 2; }
.loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: bwPulsate 1.5s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .elementor-nav-menu a.elementor-item .bw-roll,
  .elementor-nav-menu a.elementor-item .bw-roll--ghost,
  .elementor-button.bw-btn,
  .elementor-button.bw-btn .elementor-button-content-wrapper,
  .elementor-button.bw-btn::before,
  .elementor-button.bw-btn::after { transition: none; }
  .loader { display: none; }
}