/* Loopay — hero: refracción de prisma sobre blanco.
   Reemplaza banner.png (1.2MB) por luz que entra, se refracta en un punto
   y se abre en abanico espectral con los colores de marca:
   #EA9228 naranja · #D00000 rojo · #2457D4 azul · #34BAFF cian.
   Todo con gradientes CSS. Cero peticiones de red, ~2KB. */

/* ---- fondo ---- */
.elementor-21646 .elementor-element.elementor-element-7827754,
.elementor-21646
  .elementor-element.elementor-element-7827754:not(
    .elementor-motion-effects-element-type-background
  ) {
  background-image: none;
  background-color: #ffffff;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Sale del .ast-container de Astra (max-width 1440, padding 20px) para
     que el fondo llegue de borde a borde. body ya tiene overflow-x:hidden,
     así que 100vw no puede crear scroll horizontal. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* El contenedor interior traía una copia duplicada de la misma foto. */
.elementor-21646 .elementor-element.elementor-element-b55d166,
.elementor-21646
  .elementor-element.elementor-element-b55d166:not(
    .elementor-motion-effects-element-type-background
  ) {
  background-image: none;
  background-color: transparent;
}

/* ---- refracción: haz de entrada + abanico espectral ----
   Ambos son conic-gradient con el mismo vértice (58% 40%), así que la luz
   entra y sale del mismo punto, como en un prisma real. El blur los funde
   y evita que se lean como franjas duras. */
.elementor-21646 .elementor-element.elementor-element-7827754::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  background:
    /* haz de entrada: 312deg apunta arriba-izquierda desde el vértice */
    conic-gradient(
      from 308deg at 52% 46%,
      transparent 0deg,
      rgba(150, 190, 255, 0.28) 2deg,
      rgba(255, 255, 255, 0.95) 3.6deg,
      rgba(150, 190, 255, 0.28) 5.2deg,
      transparent 7.5deg
    ),
    /* abanico espectral hacia la derecha. Los bordes de ataque y de salida
       entran y salen despacio para que no se lea como un triángulo sólido. */
    conic-gradient(
      from 72deg at 52% 46%,
      transparent 0deg,
      rgba(234, 146, 40, 0.10) 3deg,
      rgba(234, 146, 40, 0.32) 7deg,
      rgba(208, 0, 0, 0.26) 13deg,
      rgba(36, 87, 212, 0.30) 24deg,
      rgba(52, 186, 255, 0.34) 33deg,
      rgba(52, 186, 255, 0.14) 41deg,
      rgba(52, 186, 255, 0.04) 47deg,
      transparent 53deg
    );
  filter: blur(13px);
}

/* Núcleo luminoso en el vértice: es lo que lo hace leer como refracción
   y no como un simple degradado de colores. */
.elementor-21646 .elementor-element.elementor-element-7827754::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* destello en el punto de refracción */
    radial-gradient(
      9% 13% at 52% 46%,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0) 70%
    ),
    /* velo blanco: se apaga en 49%, donde termina la columna de texto,
       para no lavar el vértice ni el abanico */
    linear-gradient(
      100deg,
      #ffffff 20%,
      rgba(255, 255, 255, 0.86) 33%,
      rgba(255, 255, 255, 0) 49%
    ),
    /* caída con la distancia: la luz dispersada pierde intensidad, y así
       el abanico no termina en un borde recto contra el filo del viewport */
    radial-gradient(
      78% 96% at 52% 46%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.42) 68%,
      rgba(255, 255, 255, 0.78) 100%
    );
}

/* ---- tipografía, recoloreada para el fondo claro ---- */
.elementor-21646 .elementor-element.elementor-element-342b05b .elementor-heading-title {
  color: #0b1b3a;
}

.elementor-21646 .elementor-element.elementor-element-a3a2f51,
.elementor-21646 .elementor-element.elementor-element-a3a2f51 p,
.elementor-21646 .elementor-element.elementor-element-a3a2f51 strong {
  color: #3a4a66;
}

/* El CTA era blanco sobre foto; sobre blanco desaparecería. */
.elementor-21646 .elementor-element.elementor-element-828e686 .elementor-button {
  background-color: #0b1b3a;
  color: #ffffff;
  fill: #ffffff;
}

.elementor-21646
  .elementor-element.elementor-element-828e686
  .elementor-button:hover {
  background-color: #2457d4;
  color: #ffffff;
  fill: #ffffff;
}

/* Un cambio de color no es un indicador de foco. */
.elementor-21646
  .elementor-element.elementor-element-828e686
  .elementor-button:focus-visible {
  background-color: #2457d4;
  color: #ffffff;
  fill: #ffffff;
  outline: 3px solid #0b1b3a;
  outline-offset: 3px;
}

/* El chip rotatorio conserva el gradiente de marca, intacto. */

/* ---- apilado: el texto va encima del arte, cambia el velo ---- */
@media (max-width: 1024px) {
  /* En pantalla estrecha no hay lienzo libre al lado del texto, así que el
     vértice baja a la esquina inferior izquierda y el abanico barre en
     diagonal el hueco que queda debajo del CTA. */
  .elementor-21646 .elementor-element.elementor-element-7827754::before {
    background:
      conic-gradient(
        from 200deg at 16% 90%,
        transparent 0deg,
        rgba(150, 190, 255, 0.26) 2deg,
        rgba(255, 255, 255, 0.9) 3.5deg,
        transparent 7deg
      ),
      conic-gradient(
        from 14deg at 16% 90%,
        transparent 0deg,
        rgba(234, 146, 40, 0.10) 4deg,
        rgba(234, 146, 40, 0.34) 9deg,
        rgba(208, 0, 0, 0.26) 18deg,
        rgba(36, 87, 212, 0.30) 32deg,
        rgba(52, 186, 255, 0.34) 44deg,
        rgba(52, 186, 255, 0.12) 54deg,
        transparent 62deg
      );
  }

  .elementor-21646 .elementor-element.elementor-element-7827754::after {
    background:
      radial-gradient(
        10% 7% at 16% 90%,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0) 70%
      ),
      /* velo sólo sobre el bloque de texto, no sobre todo el hero */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.88) 46%,
        rgba(255, 255, 255, 0) 74%
      ),
      radial-gradient(
        85% 70% at 16% 90%,
        rgba(255, 255, 255, 0) 22%,
        rgba(255, 255, 255, 0.45) 70%,
        rgba(255, 255, 255, 0.8) 100%
      );
  }
}

/* ---- tarjetas de servicio de la home ----
   Estos 5 títulos son blancos sobre #F6F6F6 (contraste 1.1:1, ilegibles).
   Se les pone el mismo chip que el título rotatorio del hero, con el
   gradiente de marca, así el texto blanco queda sobre color. */
.elementor-21646 .elementor-element.elementor-element-b5e0c02.elementor-widget-icon-box .elementor-icon-box-title > span,
.elementor-21646 .elementor-element.elementor-element-f0ba5e2.elementor-widget-icon-box .elementor-icon-box-title > span,
.elementor-21646 .elementor-element.elementor-element-1de19da.elementor-widget-icon-box .elementor-icon-box-title > span,
.elementor-21646 .elementor-element.elementor-element-a947831.elementor-widget-icon-box .elementor-icon-box-title > span,
.elementor-21646 .elementor-element.elementor-element-001fce1.elementor-widget-icon-box .elementor-icon-box-title > span {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  /* !important porque Elementor aplica `background-image: none !important` a
     todo descendiente de los contenedores 4º en adelante mientras no tengan
     .e-lazyloaded; sin esto el chip sólo aparecería tras el lazy-load. */
  background: linear-gradient(to right, #ea9228, #d00000, #222321, #2457d4, #34baf0) !important;
  color: #ffffff;
  line-height: 1.3;
}