/* =========================================================
   websdl-ui.css
   Capa de acabado de la portada de websdl.com.

   Solo para este sitio. No se copia a sitios de cliente: ahi
   manda la regla de solo Elementor gratis. Aqui hay codigo a
   mano porque el sitio es la carta de presentacion.

   Todo es CSS. Las cuatro paginas que se tomaron de referencia
   (purawebs, tamarindotours, suspiroesmeralda, toposfishing) no
   cargan ni una libreria de animacion: el acabado sale de
   vidrio, degradados, radios parejos y muchas transiciones
   chiquitas. Aqui se hace igual.
   ========================================================= */

:root{
  --w-bg:#0E1420;
  --w-ink:#0B0F16;
  --w-sup:rgba(255,255,255,.035);
  --w-sup2:rgba(255,255,255,.06);
  --w-bord:rgba(255,255,255,.09);
  --w-bord-fuerte:rgba(255,255,255,.16);
  --w-tit:#F4F1EB;
  --w-cue:#AAB4C2;
  --w-acc:#E8A33D;
  --w-acc2:#4CC9F0;      /* segundo acento frio, solo para degradados */
  --w-r:14px;
  --w-r-lg:20px;
  --w-ease:cubic-bezier(.22,.61,.36,1);
  --w-dur:.45s;
}

html{ scroll-behavior:smooth; }

/* ---------- Fondo: aurora y textura ----------
   Dos manchas de color muy difusas que se mueven despacio. Es lo
   que le quita el plano al fondo oscuro sin poner una foto. */
body.elementor-page-68{ position:relative; background:var(--w-bg); overflow-x:hidden; }
body.elementor-page-68::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(232,163,61,.16), transparent 62%),
    radial-gradient(42rem 30rem at 92% 8%, rgba(76,201,240,.10), transparent 62%),
    radial-gradient(40rem 28rem at 50% 108%, rgba(232,163,61,.07), transparent 64%);
  animation:w-aurora 26s ease-in-out infinite alternate;
}
/* Retícula finísima. Da sensación de plano tecnico sin pesar. */
body.elementor-page-68::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
}
@keyframes w-aurora{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(0,-2.5%,0) scale(1.06); }
}
.elementor-68 > .e-con{ position:relative; z-index:1; }
/* ---------- Tipografia fluida ----------
   clamp() en vez de tres tamanos fijos por punto de corte: la
   letra crece con la pantalla en vez de saltar de golpe. Los
   !important pisan lo que Elementor escribe por widget. */
.elementor-68 .w-h1 .elementor-heading-title{
  font-size:clamp(2.15rem, 1.15rem + 4.6vw, 4.25rem) !important;
  line-height:1.03 !important; letter-spacing:-.035em !important;
  text-wrap:balance;
}
.elementor-68 .w-h2 .elementor-heading-title{
  font-size:clamp(1.65rem, 1.05rem + 2.5vw, 2.6rem) !important;
  line-height:1.12 !important; letter-spacing:-.022em !important;
  text-wrap:balance;
}
.elementor-68 .w-h3 .elementor-heading-title{
  font-size:clamp(1.12rem, .98rem + .55vw, 1.35rem) !important;
  line-height:1.28 !important; letter-spacing:-.012em !important;
}
.elementor-68 .w-text p{ text-wrap:pretty; }

/* Titular con degradado. Va dentro de @supports porque si el
   navegador no recorta el fondo al texto, color:transparent
   dejaria el titular invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .elementor-68 .w-h1 .elementor-heading-title{
    background:linear-gradient(104deg,#FFFFFF 0%,#F4F1EB 38%,var(--w-acc) 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent !important; -webkit-text-fill-color:transparent;
  }
}

/* ---------- Etiqueta en pastilla ----------
   El texto chiquito en mayusculas de cada seccion pasa de ser
   una linea suelta a una pastilla con punto. Es el detalle que
   mas rapido sube el nivel percibido. */
.elementor-68 .w-eyebrow .elementor-heading-title{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.5em 1.05em; border-radius:999px;
  background:var(--w-sup2); border:1px solid var(--w-bord);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.735rem !important; letter-spacing:.16em !important;
}
.elementor-68 .w-eyebrow .elementor-heading-title::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--w-acc); box-shadow:0 0 0 3px rgba(232,163,61,.22);
  animation:w-latido 2.6s ease-in-out infinite;
}
@keyframes w-latido{ 0%,100%{opacity:1} 50%{opacity:.42} }
.elementor-68 .w-eyebrow{ text-align:center; }

/* ---------- Encabezado de vidrio ---------- */
.elementor-68 .fx-header{
  background:rgba(14,20,32,.62) !important;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--w-bord) !important;
  transition:background var(--w-dur) var(--w-ease), border-color var(--w-dur) var(--w-ease);
}
.elementor-68 .fx-header.fx-header-scrolled{
  background:rgba(14,20,32,.9) !important;
  border-bottom-color:var(--w-bord-fuerte) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
}
.elementor-68 .w-brand .elementor-heading-title{ letter-spacing:.18em !important; }
/* ---------- Tarjetas ----------
   Vidrio, radio parejo y un borde que se enciende al pasar el
   mouse. El borde de degradado se hace con un pseudoelemento
   enmascarado, que es la unica forma de tener un borde con
   degradado sin pintar el fondo entero. */
.elementor-68 .fx-card{
  position:relative; isolation:isolate;
  background:var(--w-sup) !important;
  border:1px solid var(--w-bord) !important;
  border-radius:var(--w-r) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform var(--w-dur) var(--w-ease),
             box-shadow var(--w-dur) var(--w-ease),
             background var(--w-dur) var(--w-ease);
}
.elementor-68 .fx-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(232,163,61,.85), rgba(76,201,240,.5) 55%, transparent 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--w-dur) var(--w-ease); pointer-events:none; z-index:-1;
}
.elementor-68 .fx-card:hover{
  transform:translateY(-6px);
  background:var(--w-sup2) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.42);
}
.elementor-68 .fx-card:hover::before{ opacity:1; }

/* ---------- Lista de lo que incluye ---------- */
.elementor-68 .w-list .elementor-icon-list-item{
  padding:.34em 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.elementor-68 .w-list .elementor-icon-list-item:last-child{ border-bottom:0; }
.elementor-68 .w-list .elementor-icon-list-text{ letter-spacing:.005em; }

/* ---------- Botones ----------
   Barrido de brillo al pasar el mouse. Es un solo pseudoelemento
   que cruza el boton; cuesta casi nada y se siente caro. */
.elementor-68 .w-btn .elementor-button{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:999px !important;
  transition:transform .3s var(--w-ease), box-shadow .3s var(--w-ease), background .3s var(--w-ease);
}
.elementor-68 .w-btn .elementor-button::after{
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); transition:left .65s var(--w-ease); pointer-events:none;
}
.elementor-68 .w-btn .elementor-button:hover::after{ left:135%; }
.elementor-68 .w-btn--primary .elementor-button{
  background:linear-gradient(135deg,#F2B455,var(--w-acc) 55%,#D9902B) !important;
  box-shadow:0 10px 26px rgba(232,163,61,.26);
}
.elementor-68 .w-btn--primary .elementor-button:hover{
  transform:translateY(-2px); box-shadow:0 16px 38px rgba(232,163,61,.36);
}
.elementor-68 .w-btn--ghost .elementor-button{
  border:1px solid var(--w-bord-fuerte) !important;
  background:rgba(255,255,255,.03) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.elementor-68 .w-btn--ghost .elementor-button:hover{
  border-color:var(--w-acc) !important; background:rgba(232,163,61,.1) !important; transform:translateY(-2px);
}

/* ---------- Cinta de rubros ----------
   Dice a que clase de negocio se le trabaja sin gastar una
   seccion entera en una lista. El track lleva el contenido dos
   veces y se corre la mitad, asi el ciclo no tiene costura. */
.elementor-68 .w-marquee-wrap{
  border-block:1px solid var(--w-bord);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.w-marquee{ overflow:hidden; padding:16px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.w-marquee__track{ display:flex; width:max-content; animation:w-corre 42s linear infinite; }
.w-marquee__track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:0 1.6rem; color:var(--w-cue);
  font-family:'Manrope',system-ui,sans-serif; font-size:.92rem; font-weight:500;
  letter-spacing:.03em; text-transform:uppercase; opacity:.72;
}
.w-marquee__track span::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--w-acc); margin-left:1.6rem; opacity:.65;
}
@keyframes w-corre{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.w-marquee:hover .w-marquee__track{ animation-play-state:paused; }
/* ---------- Barra de avance de lectura ----------
   animation-timeline: scroll() es CSS puro, sin JavaScript. Va
   dentro de @supports: donde no exista simplemente no aparece,
   y no se pierde nada porque es un adorno. */
@supports (animation-timeline: scroll()){
  .elementor-68 .fx-header::after{
    content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
    transform-origin:0 50%; transform:scaleX(0);
    background:linear-gradient(90deg,var(--w-acc),var(--w-acc2));
    animation:w-avance linear both; animation-timeline:scroll(root block);
  }
  @keyframes w-avance{ to{ transform:scaleX(1); } }
}
.elementor-68 .fx-header{ position:sticky; }

/* ---------- Hilo de luz entre secciones ----------
   Una linea que se desvanece a los lados separa las franjas sin
   la dureza de un borde de lado a lado. */
.elementor-68 > .e-con.fx-reveal{ position:relative; }
.elementor-68 > .e-con.fx-reveal::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px,88%); height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--w-bord-fuerte),transparent);
}

/* ---------- Caja del formulario ---------- */
.elementor-68 .wsdl-form{
  background:var(--w-sup) !important;
  border:1px solid var(--w-bord) !important;
  border-radius:var(--w-r-lg) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.wsdl-form .ff-el-form-control{ border-radius:12px !important; }
.wsdl-form .ff-btn-submit{
  border-radius:999px !important;
  background:linear-gradient(135deg,#F2B455,#E8A33D 55%,#D9902B) !important;
  box-shadow:0 10px 26px rgba(232,163,61,.26);
}

/* ---------- Pie ---------- */
.elementor-68 .w-brand .elementor-heading-title{ opacity:.95; }

/* ---------- Enfoque visible ----------
   Quien navega con el teclado tiene que ver donde esta parado. */
.elementor-68 a:focus-visible,
.elementor-68 button:focus-visible,
.wsdl-form :focus-visible{
  outline:2px solid var(--w-acc); outline-offset:3px; border-radius:6px;
}

/* ---------- Celular ----------
   La aurora se apaga: son tres degradados grandes repintandose y
   en telefono gastan bateria sin que se noten. */
@media (max-width:767px){
  body.elementor-page-68::before{ animation:none; opacity:.7; }
  body.elementor-page-68::after{ background-size:56px 56px; opacity:.35; }
  .elementor-68 .fx-card:hover{ transform:none; box-shadow:none; }
  .elementor-68 .fx-card::before{ display:none; }
  .w-marquee__track{ animation-duration:30s; }
  .elementor-68 .w-eyebrow .elementor-heading-title{ font-size:.68rem !important; }
}

/* ---------- Menos movimiento ----------
   Quien lo pidio en su sistema no recibe ninguno. No quitar:
   hay gente a la que el movimiento le produce mareo. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body.elementor-page-68::before{ animation:none; }
  .w-marquee__track{ animation:none; transform:none; }
  .elementor-68 .w-eyebrow .elementor-heading-title::before{ animation:none; }
  .elementor-68 .w-btn .elementor-button::after{ display:none; }
  .elementor-68 .fx-card,
  .elementor-68 .w-btn .elementor-button{ transition:none; }
  .elementor-68 .fx-card:hover,
  .elementor-68 .w-btn .elementor-button:hover{ transform:none; }
  .elementor-68 .fx-header::after{ animation:none; }
}