/* =========================================================
   ESTUDIO LS — Estilos del sitio (tema hijo)
   ---------------------------------------------------------
   Índice
   1.  Variables y base
   2.  Utilidades (etiquetas, intros, botones, textos según dispositivo)
   3.  Hero
   4.  Franja de tecnologías
   5.  Tarjetas (servicios y proceso)
   6.  Mockup notebook + celular
   7.  Casos de éxito
   8.  Detrás de Estudio LS
   9.  Preguntas frecuentes
   10. Formulario de contacto (Forminator)
   11. Header
   12. Botón volver arriba
   13. Footer
   14. Plataforma de clientes
   15. Asistente (bot)
   16. Página Desarrollos (LS Chatbot)
   ---------------------------------------------------------
   Breakpoints de Elementor: tablet ≤ 1024px · celular ≤ 767px
   ========================================================= */


/* =========================================================
   1. VARIABLES Y BASE
   ========================================================= */
:root{
  --els-ink:#0E1726;
  --els-muted:#5A6478;
  --els-soft:#F4F6FB;
  --els-accent:#2F5BFF;
  --els-accent-d:#1E3FD8;
  --els-accent-soft:#EAF0FF;
  --els-green:#12B886;
  --els-line:#E6EAF2;
  --els-device:#0B1220;
}

/* Sin scroll-behavior:smooth global: chocaría con las animaciones de Forminator.
   El scroll suave lo hace el JS (anclas y botón volver arriba). */
body{ background:#fff; color:var(--els-ink); }
[id]{ scroll-margin-top:90px; } /* compensa el header fijo al navegar por anclas */


/* =========================================================
   2. UTILIDADES
   ========================================================= */

/* Etiqueta chica sobre los títulos */
.els-kicker .elementor-heading-title{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:var(--els-accent-soft);
}

/* Intro de sección centrada */
.els-intro{ max-width:760px; margin:0 auto; }
.els-intro h2{ text-wrap:balance; }

/* Botones */
.els-btn .elementor-button{ transition:all .25s ease; }
.els-btn .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(47,91,255,.22);
}

/* Textos según haya mouse o pantalla táctil
   Uso: <span class="els-solo-mouse">…</span><span class="els-solo-tactil">…</span> */
.els-solo-tactil{ display:none; }
@media (hover:none){
  .els-solo-mouse{ display:none; }
  .els-solo-tactil{ display:inline; }
}

@media (max-width:767px){
  .els-kicker .elementor-heading-title{ font-size:11px !important; letter-spacing:.6px !important; }
}


/* =========================================================
   3. HERO
   ========================================================= */
.els-hero{
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(47,91,255,.10), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(18,184,134,.07), transparent 60%),
    #fff !important;
}
.els-hero h1{ text-wrap:balance; }
.els-hero-visual .els-devices{ padding-bottom:4% !important; }

@media (max-width:767px){
  .els-btns .elementor-widget-button,
  .els-btns .elementor-button{ width:100%; }
}


/* =========================================================
   4. FRANJA DE TECNOLOGÍAS
   ---------------------------------------------------------
   El texto de la izquierda queda fijo y las herramientas
   (headings con la clase "els-stack-item") pasan en loop.
   El JS arma el carrusel solo; en el editor se ven quietas.
   Para sumar una herramienta: duplicar un heading y cambiar el texto.
   ========================================================= */
.els-stack-row{
  flex-wrap:nowrap !important;
  column-gap:48px !important;
}
.els-stack-lead{ flex:0 0 auto; }
.els-stack-lead .elementor-heading-title{
  font-weight:700 !important;
  color:var(--els-ink) !important;
  white-space:nowrap;
}

/* Carrusel */
.els-marquee{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.els-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:elsMarquee var(--els-marquee-dur, 30s) linear infinite;
}
.els-marquee-track > .elementor-widget{
  flex:0 0 auto;
  width:auto !important;
  margin:0 !important;
  padding-right:56px;
}
.els-marquee:hover .els-marquee-track{ animation-play-state:paused; }
@keyframes elsMarquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.els-stack-item .elementor-heading-title{ white-space:nowrap; transition:color .25s ease; }
.els-stack-item:hover .elementor-heading-title{ color:var(--els-accent) !important; }

@media (prefers-reduced-motion:reduce){
  .els-marquee-track{ animation:none; }
}

@media (max-width:767px){
  .els-stack-row{ flex-direction:column !important; row-gap:14px !important; }
  .els-stack-lead{ text-align:center; }
  .els-marquee{ width:100%; }
  .els-marquee-track > .elementor-widget{ padding-right:36px; }
  .els-stack-item .elementor-heading-title{ font-size:18px !important; }
}


/* =========================================================
   5. TARJETAS (servicios y proceso)
   ========================================================= */
.els-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.els-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(14,23,38,.08);
  border-color:#D6DEFF !important;
}
.els-card .elementor-icon-box-wrapper{ text-align:left; }
.els-form-card:hover{ transform:none; }

/* Número de cada paso con degradé */
.els-step-num .elementor-heading-title{
  background:linear-gradient(135deg, var(--els-accent), var(--els-green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:18px;
}


/* =========================================================
   6. MOCKUP NOTEBOOK + CELULAR
   ---------------------------------------------------------
   Cada pantalla tiene un widget Imagen con la clase "els-shot".
   Usar capturas de PÁGINA COMPLETA (imagen larga):
   - Con mouse: cada dispositivo recorre su captura al pasar por encima.
   - En pantallas táctiles: las capturas se recorren solas.
   ========================================================= */
.els-devices{
  position:relative;
  width:100%;
  padding:0 0 7% 0 !important;
}

/* Notebook */
.els-laptop{
  width:84% !important;
  margin-left:auto;
  margin-right:7%;   /* deja lugar para que la base no se salga */
  padding:0 !important;
  gap:0 !important;
  filter:drop-shadow(0 30px 40px rgba(14,23,38,.18));
}
.els-laptop-screen{
  width:100% !important;
  aspect-ratio:16/10;
  padding:0 !important;
  overflow:hidden;
  background:var(--els-device) !important;
  border:10px solid var(--els-device);
  border-bottom-width:14px;
  border-radius:16px 16px 0 0;
}
.els-laptop-base{
  position:relative;
  width:116% !important;
  height:16px;
  min-height:16px !important;
  margin-left:-8%;
  padding:0 !important;
  background:linear-gradient(180deg, #E9ECF2 0%, #C8CDD7 100%) !important;
  border-radius:0 0 16px 16px;
}
.els-laptop-base::after{
  content:"";
  position:absolute;
  left:50%; top:0;
  width:16%; height:6px;
  transform:translateX(-50%);
  background:#B6BCC8;
  border-radius:0 0 8px 8px;
}

/* Celular */
.els-phone{
  position:absolute !important;
  left:0; bottom:0;
  z-index:2;
  width:24% !important;
  aspect-ratio:9/19;
  padding:0 !important;
  overflow:hidden;
  background:var(--els-device) !important;
  border:7px solid var(--els-device);
  border-radius:26px;
  box-shadow:0 24px 40px rgba(14,23,38,.28);
}

/* Captura dentro de cada pantalla */
.els-laptop-screen > .elementor-widget,
.els-phone > .elementor-widget,
.els-shot,
.els-shot .elementor-widget-container{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}
.els-shot img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:50% 0%;
  border-radius:0 !important;
  transition:object-position 1.2s ease-in-out;   /* vuelta arriba: rápida */
}

/* Con mouse: cada dispositivo por separado */
.els-laptop:hover .els-shot img,
.els-phone:hover .els-shot img{
  object-position:50% 100%;
  transition-duration:7s;                        /* recorrido hacia abajo: lento */
}

/* Sin mouse: recorrido automático */
@keyframes elsAutoScroll{
  0%, 12%   { object-position:50% 0%; }
  88%, 100% { object-position:50% 100%; }
}
@media (hover:none){
  .els-shot img{ animation:elsAutoScroll 18s ease-in-out infinite alternate; }
}

@media (max-width:767px){
  .els-laptop{ width:86% !important; margin-right:6%; }
  .els-laptop-screen{ border-width:6px; border-bottom-width:9px; border-radius:10px 10px 0 0; }
  .els-laptop-base{ height:10px; min-height:10px !important; }
  .els-phone{ width:26% !important; border-width:5px; border-radius:18px; }
}


/* =========================================================
   7. CASOS DE ÉXITO
   ---------------------------------------------------------
   Tres bloques (.els-cases-block), cada uno con un slider
   (.els-cases) de tarjetas (.els-case).
   - El JS arma el slider en loop con flechas, puntos y arrastre.
   - En el editor de Elementor (o sin JS) las tarjetas quedan
     en una fila que se desplaza de costado.
   Para sumar un proyecto: duplicar una tarjeta dentro del bloque.
   ========================================================= */

/* Encabezado de cada bloque */
.els-block-desc p{ margin:0; }

/* Tarjeta */
.els-case{
  box-sizing:border-box;
  background:#fff !important;
  border:1px solid var(--els-line);
  border-radius:28px;
  padding:56px !important;
  box-shadow:0 1px 2px rgba(14,23,38,.04), 0 20px 50px rgba(14,23,38,.06);
}
.els-case .els-devices{ transition:transform .5s ease; }
.els-case.is-active:hover .els-devices{ transform:translateY(-6px); }

/* Chips (Tienda online, B2C…) */
.els-chips .elementor-icon-list-item{
  padding:6px 12px !important;
  margin-bottom:14px !important;
  border-radius:999px;
  background:var(--els-accent-soft);
}
.els-chips .elementor-icon-list-icon{ display:none !important; }
.els-chips .elementor-icon-list-text{ padding-left:0 !important; font-weight:600; }

/* Ancho de las tarjetas: se asoma la anterior y la siguiente */
.els-cases{ --els-card-w:84%; }

/* --- Sin JS / editor: fila que se desplaza de costado --- */
.els-cases{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:10px 0 30px !important;
}
.els-cases > .els-case{
  flex:0 0 var(--els-card-w) !important;
  min-width:0 !important;
  max-width:none !important;
  scroll-snap-align:center;
}

/* --- Slider armado por el JS --- */
.els-cases.els-slider{
  display:block !important;
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  scroll-snap-type:none;
  padding:10px 0 0 !important;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.els-slider-track{
  display:flex;
  gap:24px;
  padding-bottom:30px;
  will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.els-slider-track.is-dragging,
.els-slider-track.no-anim{ transition:none; }
.els-slider-track.is-dragging{ cursor:grabbing; user-select:none; }
.els-slider-track img{ -webkit-user-drag:none; user-select:none; }
.els-slider-track > .els-case{
  flex:0 0 var(--els-card-w) !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  cursor:grab;
  transition:opacity .4s ease, transform .4s ease;
}
.els-slider-track > .els-case:not(.is-active){
  opacity:.45;
  transform:scale(.97);
  cursor:pointer;
}

/* Flechas a los costados */
.els-slider-arrow{
  position:absolute;
  top:calc(50% - 10px);
  z-index:3;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--els-line);
  border-radius:50%;
  color:var(--els-ink);
  background:#fff;
  box-shadow:0 10px 24px rgba(14,23,38,.12);
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.els-slider-arrow:hover{ background:var(--els-accent); color:#fff; border-color:var(--els-accent); }
.els-slider-arrow:focus-visible{ outline:3px solid rgba(47,91,255,.35); outline-offset:3px; }
.els-slider-prev{ left:calc((100% - var(--els-card-w)) / 4 - 26px); }
.els-slider-next{ right:calc((100% - var(--els-card-w)) / 4 - 26px); }

/* Puntos */
.els-slider-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:4px;
}
.els-slider-dots button{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:9px;
  background:#C9D2E6;
  cursor:pointer;
  transition:width .3s ease, background .3s ease;
}
.els-slider-dots button.is-active{ width:28px; background:var(--els-accent); }

/* Un solo proyecto: sin slider */
.els-cases.els-slider-one .els-case{ flex-basis:100% !important; }

@media (max-width:1024px){
  .els-cases{ --els-card-w:88%; }
  .els-case{ padding:40px !important; }
  .els-slider-arrow{ width:44px; height:44px; }
  .els-slider-prev{ left:4px; }
  .els-slider-next{ right:4px; }
}

@media (max-width:767px){
  .els-cases{ --els-card-w:86%; }
  .els-slider-track{ gap:12px; }
  .els-slider-arrow{ display:none; }   /* en el celular se desliza con el dedo */

  /* Tarjeta compacta */
  .els-case{
    gap:16px !important;
    padding:20px 18px 22px !important;
    border-radius:22px;
    box-shadow:0 8px 22px rgba(14,23,38,.06) !important;
  }
  .els-slider-track > .els-case:not(.is-active){ opacity:.6; transform:scale(.98); }
  .els-case-info,
  .els-case-visual{ gap:0 !important; }

  /* Mockup arriba */
  .els-case-visual{ order:-1; }
  .els-case .els-devices{ padding-bottom:6% !important; }

  /* Chips */
  .els-case .els-chips .elementor-icon-list-item{ padding:4px 10px !important; margin-bottom:10px !important; }
  .els-case .els-chips .elementor-icon-list-text{ font-size:12px !important; }

  /* Título */
  .els-case-title,
  .els-case-title > .elementor-widget-container{ margin:0 0 8px !important; }
  .els-case-title .elementor-heading-title{ font-size:24px !important; }

  /* Descripción: máximo 3 líneas */
  .els-case-desc,
  .els-case-desc > .elementor-widget-container{ margin:0 0 12px !important; }
  .els-case-desc p{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.55 !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Características */
  .els-case-feats .elementor-icon-list-item{ padding:0 !important; margin:0 0 4px !important; }
  .els-case-feats .elementor-icon-list-text{ font-size:13px !important; }
  .els-case-feats .elementor-icon-list-icon svg,
  .els-case-feats .elementor-icon-list-icon i{ font-size:13px !important; width:13px; }

  /* Botón */
  .els-case-cta{ padding-top:14px !important; }
  .els-case-cta .elementor-button{ padding:11px 20px !important; font-size:14px !important; }
}


/* =========================================================
   8. DETRÁS DE ESTUDIO LS
   ========================================================= */
.els-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 24px 50px rgba(14,23,38,.12);
}


/* =========================================================
   9. PREGUNTAS FRECUENTES
   ========================================================= */
.els-faq .elementor-accordion-item{
  border:0 !important;
  border-bottom:1px solid var(--els-line) !important;
}
.els-faq .elementor-tab-title,
.els-faq .elementor-tab-content{ border:0 !important; }


/* =========================================================
   10. FORMULARIO DE CONTACTO (Forminator)
   ---------------------------------------------------------
   En Forminator: Apariencia → Estilo de diseño → Ninguno
   ========================================================= */
.els-form-card .forminator-ui{ font-family:'Inter', sans-serif; }
.els-form-card .forminator-row{ margin-bottom:18px !important; }

/* Etiquetas */
.els-form-card .forminator-label{
  display:block;
  margin-bottom:8px !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--els-ink) !important;
}
.els-form-card .forminator-required{ color:var(--els-accent) !important; }

/* Campos */
.els-form-card .forminator-input,
.els-form-card .forminator-textarea{
  width:100%;
  padding:14px 16px !important;
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  color:var(--els-ink) !important;
  background:var(--els-soft) !important;
  border:1px solid #D6DBE6 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.els-form-card .forminator-input::placeholder,
.els-form-card .forminator-textarea::placeholder{ color:#9AA3B5; }
.els-form-card .forminator-input:focus,
.els-form-card .forminator-textarea:focus{
  outline:none;
  background:#fff !important;
  border-color:var(--els-accent) !important;
  box-shadow:0 0 0 4px rgba(47,91,255,.12) !important;
}
.els-form-card .forminator-textarea{ min-height:140px; resize:vertical; }

/* Contador de caracteres */
.els-form-card .forminator-description{ font-size:12px !important; color:var(--els-muted) !important; }

/* Botón enviar */
.els-form-card .forminator-button-submit{
  padding:16px 32px !important;
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:#fff !important;
  background:var(--els-accent) !important;
  border:0 !important;
  border-radius:999px !important;
  cursor:pointer;
  transition:all .25s ease;
}
.els-form-card .forminator-button-submit:hover{
  background:var(--els-accent-d) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(47,91,255,.22);
}

/* Errores y mensajes */
.els-form-card .forminator-has_error .forminator-input,
.els-form-card .forminator-has_error .forminator-textarea{ border-color:#E03131 !important; }
.els-form-card .forminator-error-message{ margin-top:6px; font-size:13px !important; color:#E03131 !important; }
.els-form-card .forminator-response-message{
  margin:-14px 0 24px !important;   /* mismo espacio arriba (título) y abajo (primer campo) */
  padding:14px 16px !important;
  border-radius:12px !important;
  font-size:14px !important;
}
.els-form-card .forminator-response-message.forminator-success{ background:#E7F8F1 !important; color:#0B7A57 !important; }
.els-form-card .forminator-response-message.forminator-error{ background:#FDECEC !important; color:#B42318 !important; }
/* El contenedor de mensajes existe siempre: mientras está vacío se colapsa.
   Sin display:none, porque Forminator necesita medir su posición para hacer scroll. */
.els-form-card .forminator-response-message:empty,
.els-form-card .forminator-response-message[aria-hidden="true"]{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* Captcha (Turnstile) a la derecha del botón Enviar, en la misma línea */
.els-form-card .forminator-custom-form{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  column-gap:20px;
}
.els-form-card .forminator-custom-form > *{ flex:0 0 100%; max-width:100%; }
.els-form-card .forminator-custom-form > .forminator-row-last{
  flex:0 0 auto;
  order:1;
  margin-bottom:0 !important;
}
.els-form-card .forminator-custom-form > .forminator-row:has(.forminator-field-captcha){
  flex:1 1 300px;
  order:2;
  display:flex;
  justify-content:flex-end;
  margin-bottom:0 !important;
}
/* Sin los márgenes negativos de la grilla de Forminator: todos los campos usan el ancho exacto del formulario */
.els-form-card .forminator-custom-form .forminator-row{ margin-left:0 !important; margin-right:0 !important; }
.els-form-card .forminator-custom-form .forminator-col{ padding-left:0 !important; padding-right:0 !important; }
.els-form-card .forminator-field-captcha{ flex:1 1 auto !important; width:100% !important; }
.els-form-card .forminator-turnstile{ display:flex !important; justify-content:flex-end; }   /* pegado al borde derecho de los campos */

@media (max-width:767px){
  .els-form-card .forminator-button-submit{ width:100%; }
  /* En el celular: captcha arriba y botón abajo, los dos a lo ancho */
  .els-form-card .forminator-custom-form > .forminator-row:has(.forminator-field-captcha){
    flex:0 0 100%;
    order:1;
    justify-content:flex-start;
    margin-bottom:16px !important;
  }
  .els-form-card .forminator-turnstile{ justify-content:flex-start; }
  .els-form-card .forminator-custom-form > .forminator-row-last{ flex:0 0 100%; order:2; }
}


/* =========================================================
   11. HEADER (Elementor Header & Footer Builder)
   ========================================================= */

/* Header fijo arriba al hacer scroll */
#masthead{
  position:sticky;
  top:0;
  z-index:999;
}
body.admin-bar #masthead{ top:32px; }
@media (max-width:782px){ body.admin-bar #masthead{ top:46px; } }

/* Fondo blanco translúcido con desenfoque */
.els-header{
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--els-line);
}

/* Logo (imagen) */
.els-brand{ width:auto !important; min-width:110px; flex:0 0 auto; } /* ancho mínimo: se puede clickear aunque no tenga imagen */
.els-logo-icon img{ display:block; height:56px !important; width:auto !important; }
@media (max-width:767px){
  .els-logo-icon img{ height:44px !important; }
}

/* Menú */
.els-nav .elementor-icon-list-icon{ display:none !important; }
.els-nav .elementor-icon-list-text{ padding-left:0 !important; }
.els-nav .elementor-icon-list-item a{ position:relative; }
.els-nav .elementor-icon-list-item a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  border-radius:2px;
  background:var(--els-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.els-nav .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:var(--els-accent) !important; }
.els-nav .elementor-icon-list-item a:hover::after{ transform:scaleX(1); }

/* Tablet: menú más compacto */
@media (max-width:1024px){
  .els-nav .elementor-icon-list-item{ margin-right:16px !important; margin-left:0 !important; }
  .els-nav .elementor-icon-list-text{ font-size:14px !important; }
}

/* Celular: logo + botón */
@media (max-width:767px){
  .els-header-cta .elementor-button{ padding:10px 16px !important; font-size:14px !important; }
}


/* =========================================================
   12. BOTÓN VOLVER ARRIBA (lo crea assets/js/estudiols.js)
   ========================================================= */
.els-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:998;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  background:var(--els-accent);
  box-shadow:0 10px 24px rgba(47,91,255,.30);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.els-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.els-to-top:hover{
  background:var(--els-accent-d);
  transform:translateY(-3px);
}
.els-to-top:focus-visible{
  outline:3px solid rgba(47,91,255,.35);
  outline-offset:3px;
}
@media (max-width:767px){
  .els-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
}


/* =========================================================
   13. FOOTER (Elementor Header & Footer Builder)
   ========================================================= */
.els-footer{ position:relative; overflow:hidden; }
.els-footer::before{   /* brillo suave de fondo */
  content:"";
  position:absolute;
  width:700px; height:700px;
  right:-200px; top:-380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,91,255,.22), transparent 65%);
  pointer-events:none;
}
.els-footer > .e-con-inner{ position:relative; }

/* Logo */
.els-ft-logo img{ display:block; height:72px !important; width:auto !important; margin-bottom:18px; }
.els-ft-text p{ margin:0; max-width:340px; }

/* Listas de enlaces */
.els-ft-links .elementor-icon-list-item a,
.els-ft-links .elementor-icon-list-text{ transition:color .2s ease; }
.els-ft-links .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:#fff !important; }
.els-ft-links:not(.els-ft-contact) .elementor-icon-list-icon{ display:none !important; }
.els-ft-links:not(.els-ft-contact) .elementor-icon-list-text{ padding-left:0 !important; }

/* Redes */
.els-ft-social .elementor-social-icon{ transition:background .2s ease, transform .2s ease; }
.els-ft-social .elementor-social-icon:hover{ background:var(--els-accent) !important; transform:translateY(-2px); }

/* Barra inferior */
.els-ft-bottom{
  margin-top:56px;
  padding-top:24px !important;
  border-top:1px solid rgba(255,255,255,.08);
}
.els-ft-copy p{ margin:0; }
.els-ft-afip img{
  display:block;
  height:56px !important;
  width:auto !important;
  border-radius:6px;
  background:#fff;
  padding:3px;
}

/* Columnas: en escritorio las 4 en una fila; en tablet y celular la marca arriba */
.els-ft-top{ flex-wrap:nowrap !important; }
.els-ft-top > .e-con{ width:auto !important; flex:1 1 0; min-width:0; }
.els-ft-top > .els-ft-brand{ flex:1.5 1 0; }

@media (max-width:1024px){
  .els-ft-top{ flex-wrap:wrap !important; }
  .els-ft-top > .els-ft-brand{ flex:1 1 100%; }
  .els-ft-top > .e-con:not(.els-ft-brand){ flex:1 1 150px; }
}

@media (max-width:767px){
  .els-ft-top{ row-gap:36px !important; column-gap:24px !important; }
  .els-ft-logo img{ height:60px !important; }
  .els-ft-bottom{ margin-top:40px; text-align:center; }
}


/* =========================================================
   14. PLATAFORMA DE CLIENTES
   ========================================================= */
.els-plat-panel{
  padding:64px !important;
  border-radius:32px;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(47,91,255,.14), transparent 60%),
    radial-gradient(500px 360px at 0% 100%, rgba(18,184,134,.10), transparent 60%),
    var(--els-soft) !important;
  border:1px solid var(--els-line);
}

/* Estados de las tareas */
.els-status .elementor-icon-list-items{ gap:8px; }
.els-status .elementor-icon-list-item{
  margin:0 !important;
  padding:6px 12px 6px 10px !important;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--els-line);
}
.els-status .elementor-icon-list-icon{ display:none !important; }
.els-status .elementor-icon-list-text{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-left:0 !important;
  font-weight:600;
}
.els-status .elementor-icon-list-text::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:#F59F00;
}
.els-status .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text::before{ background:var(--els-accent); }
.els-status .elementor-icon-list-item:nth-child(3) .elementor-icon-list-text::before{ background:var(--els-green); }

/* Pasos */
.els-plat-steps .elementor-icon-list-icon{
  width:36px !important;
  height:36px;
  flex:0 0 36px;
  display:grid !important;
  place-items:center;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--els-line);
}

/* Versión compacta: menos alto */
.els-plat-panel{ padding:48px 56px !important; gap:48px !important; }
.els-plat-info{ width:54% !important; }
.els-plat-visual{ width:46% !important; }
.els-plat-info .els-kicker{ margin-bottom:10px !important; }
.els-plat-info h2.elementor-heading-title{ font-size:34px !important; }
.els-plat-info .elementor-widget-heading:not(.els-kicker),
.els-plat-info .elementor-widget-heading:not(.els-kicker) > .elementor-widget-container{ margin-bottom:12px !important; }
.els-plat-info .elementor-widget-text-editor,
.els-plat-info .elementor-widget-text-editor > .elementor-widget-container{ margin-bottom:16px !important; }
.els-plat-info .elementor-widget-text-editor p{ margin:0; font-size:16px !important; }

/* Pasos en dos columnas */
.els-plat-info > .e-con:has(.els-plat-steps){ padding-top:18px !important; }
.els-plat-steps .elementor-icon-list-items{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
}
.els-plat-steps .elementor-icon-list-item{ margin:0 !important; padding:0 !important; align-items:flex-start !important; }
.els-plat-steps .elementor-icon-list-text{ font-size:14.5px !important; line-height:1.45 !important; }

/* Botones en una fila */
.els-plat-info .els-btns{ padding-top:24px !important; flex-wrap:nowrap !important; }
.els-plat-info .els-btns .elementor-button{ padding:14px 22px !important; white-space:nowrap; }

@media (max-width:1024px){
  .els-plat-panel{ padding:40px !important; flex-wrap:wrap !important; }
  .els-plat-info, .els-plat-visual{ width:100% !important; }
  .els-plat-visual{ max-width:560px; margin:0 auto; }
}
@media (max-width:767px){
  .els-plat-panel{ padding:28px 20px !important; border-radius:24px; gap:28px !important; }
  .els-plat-visual{ order:-1; }
  .els-plat-info h2.elementor-heading-title{ font-size:28px !important; }
  .els-plat-steps .elementor-icon-list-items{ grid-template-columns:1fr; gap:12px; }
  .els-plat-info .els-btns{ flex-wrap:wrap !important; }
  .els-plat-info .els-btns .elementor-widget-button,
  .els-plat-info .els-btns .elementor-button{ width:100%; }
}


/* =========================================================
   15. ASISTENTE (bot) — lo crea assets/js/estudiols-bot.js
   ========================================================= */
/* El asistente va abajo a la izquierda y el botón "volver arriba" abajo a la derecha:
   mismo tamaño, misma altura y misma distancia al borde (simétricos). */

.els-bot-launcher{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:1000;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  background:var(--els-accent);
  box-shadow:0 10px 24px rgba(47,91,255,.30);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.els-bot-launcher svg{ width:22px; height:22px; }
.els-bot-launcher:hover{ transform:translateY(-3px); background:var(--els-accent-d); }
.els-bot-launcher.is-open{ background:var(--els-ink); }

.els-bot-hint{
  position:fixed;
  left:84px;
  bottom:28px;
  z-index:1000;
  max-width:240px;
  padding:12px 16px;
  font:500 14px/1.4 'Inter', sans-serif;
  color:var(--els-ink);
  background:#fff;
  border:1px solid var(--els-line);
  border-radius:16px 16px 16px 4px;
  box-shadow:0 14px 30px rgba(14,23,38,.14);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.els-bot-hint.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

.els-bot-panel{
  position:fixed;
  left:24px;
  bottom:84px;
  z-index:1000;
  width:380px;
  max-width:calc(100vw - 32px);
  height:560px;
  max-height:calc(100vh - 130px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:'Inter', sans-serif;
  background:#fff;
  border:1px solid var(--els-line);
  border-radius:22px;
  box-shadow:0 30px 70px rgba(14,23,38,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.98);
  transform-origin:bottom left;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.els-bot-panel.is-open{ opacity:1; visibility:visible; transform:none; }

.els-bot-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px 16px 18px;
  color:#fff;
  background:linear-gradient(135deg, var(--els-ink), #1B2A55);
}
.els-bot-avatar{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.1);
}
.els-bot-title{ flex:1; line-height:1.3; }
.els-bot-title strong{ display:block; font-size:15px; }
.els-bot-title span{ font-size:12.5px; opacity:.75; }
.els-bot-close{
  width:36px; height:36px;
  display:grid; place-items:center;
  padding:0; border:0; border-radius:10px;
  color:#fff; background:transparent; cursor:pointer;
}
.els-bot-close:hover{ background:rgba(255,255,255,.12); }

.els-bot-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 16px;
  background:var(--els-soft);
}
.els-bot-msg{
  align-self:flex-start;
  max-width:88%;
  padding:10px 14px;
  font-size:14px;
  line-height:1.5;
  color:var(--els-ink);
  background:#fff;
  border:1px solid var(--els-line);
  border-radius:4px 16px 16px 16px;
}
.els-bot-msg ul{ margin:6px 0 0; padding-left:18px; }
.els-bot-msg small{ color:var(--els-muted); font-size:12px; }
.els-bot-user{
  align-self:flex-end;
  color:#fff;
  background:var(--els-accent);
  border-color:var(--els-accent);
  border-radius:16px 4px 16px 16px;
}
.els-bot-typing{ display:flex; gap:4px; padding:14px; }
.els-bot-typing i{
  width:7px; height:7px; border-radius:50%;
  background:#AEB6C6;
  animation:elsDots 1s infinite ease-in-out;
}
.els-bot-typing i:nth-child(2){ animation-delay:.15s; }
.els-bot-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes elsDots{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-4px); opacity:1; } }

/* Presupuesto */
.els-bot-quote{ min-width:240px; }
.els-bot-quote-title{ font-weight:700; margin-bottom:8px; }
.els-bot-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom:1px dashed var(--els-line);
  font-size:13.5px;
}
.els-bot-row b{ white-space:nowrap; }
.els-bot-row.is-muted{ color:var(--els-muted); }
.els-bot-row.is-total{ border-bottom:0; padding-top:10px; font-size:15px; }
.els-bot-row.is-total b{ color:var(--els-accent); }

/* Opciones */
.els-bot-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:46%;
  overflow-y:auto;
  padding:12px 16px 16px;
  background:#fff;
  border-top:1px solid var(--els-line);
}
.els-bot-options:empty{ display:none; }
.els-bot-opt{
  padding:9px 14px;
  font:600 13.5px/1.2 'Inter', sans-serif;
  color:var(--els-accent-d) !important;
  text-decoration:none !important;
  background:var(--els-accent-soft);
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.els-bot-opt:hover{ border-color:var(--els-accent); background:#fff; }
.els-bot-opt.is-primary{ color:#fff !important; background:#1FAF5A; }
.els-bot-opt.is-primary:hover{ background:#178F49; border-color:#178F49; }

.els-bot-form{ display:flex; gap:8px; width:100%; }
.els-bot-form input{
  flex:1;
  min-width:0;
  padding:11px 14px;
  font:500 14px 'Inter', sans-serif;
  color:var(--els-ink);
  background:var(--els-soft);
  border:1px solid #D6DBE6;
  border-radius:999px;
  outline:none;
}
.els-bot-form input:focus{ border-color:var(--els-accent); background:#fff; box-shadow:0 0 0 3px rgba(47,91,255,.12); }
.els-bot-form button{
  padding:11px 18px;
  font:600 14px 'Inter', sans-serif;
  color:#fff;
  background:var(--els-accent);
  border:0;
  border-radius:999px;
  cursor:pointer;
}
.els-bot-form button:hover{ background:var(--els-accent-d); }

@media (max-width:767px){
  .els-bot-launcher{ left:16px; bottom:16px; width:44px; height:44px; }
  .els-bot-launcher svg{ width:20px; height:20px; }
  .els-bot-hint{ left:70px; bottom:18px; max-width:200px; }
  .els-bot-panel{
    right:8px; left:8px; bottom:70px;
    width:auto; max-width:none;
    height:auto; max-height:calc(100vh - 100px);
    min-height:60vh;
  }
}


/* =========================================================
   16. Página Desarrollos (LS Chatbot)
   ========================================================= */
/* Migas de pan */
.els-crumbs p{ margin:0; }
.els-crumbs a{ color:var(--els-muted); text-decoration:none; }
.els-crumbs a:hover{ color:var(--els-accent); }
.els-crumbs span{ margin:0 6px; color:#B6BECD; }
.els-dev-head{ max-width:780px; }

/* Encabezado del producto: ícono + nombre */
.els-prod-icon-wrap{ flex:0 0 auto !important; width:auto !important; }
.els-prod-icon img{
  width:88px !important; height:88px !important;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 12px 28px rgba(14,23,38,.22);
}
.els-prod-title{ margin-bottom:26px; }
.els-prod-title .elementor-widget-text-editor p{ margin:0; }

/* Capturas enmarcadas */
.els-prod-shot{
  padding:10px !important;
  background:#fff;
  border:1px solid #E6EAF2;
  border-radius:22px;
  box-shadow:0 1px 2px rgba(14,23,38,.04), 0 24px 60px rgba(14,23,38,.08);
}
.els-prod-shot img{ width:100% !important; height:auto; border-radius:14px; display:block; }

/* Tarjeta de detalles (columna derecha) */
.els-prod-side{ position:sticky; top:110px; }
.els-prod-meta .elementor-icon-list-item{
  padding:12px 0 !important;
  border-bottom:1px solid #EEF1F6;
  align-items:flex-start !important;
}
.els-prod-meta .elementor-icon-list-item:last-child{ border-bottom:0; }
.els-prod-meta .elementor-icon-list-icon{ margin-top:2px; flex:0 0 28px; width:28px !important; }
.els-prod-meta .elementor-icon-list-icon svg{ flex:0 0 16px; width:16px !important; height:16px !important; }
.els-prod-meta .elementor-icon-list-text{ color:var(--els-ink); line-height:1.5; }
.els-prod-side-cta .elementor-button{ width:100%; justify-content:center; }

/* Filas de módulos */
.els-prod-feats .elementor-icon-list-item{ align-items:flex-start !important; }
.els-prod-feats .elementor-icon-list-icon{ margin-top:3px; }

/* Planes */
.els-plan .els-chips .elementor-icon-list-item{ margin-bottom:16px !important; }
.els-plan-mode .elementor-heading-title{ margin-bottom:12px; }

/* Cierre oscuro: botón blanco */
.els-dev-cta .elementor-button{ border-color:#fff !important; }

@media (max-width:1024px){
  .els-prod-side{ position:static; }
}
@media (max-width:767px){
  .els-prod-icon img{ width:68px !important; height:68px !important; }
  .els-prod-title{ margin-bottom:20px; }
  .els-prod-shot{ padding:6px !important; border-radius:16px; }
  .els-prod-shot img{ border-radius:11px; }
}