/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2026 | 16:07:48 */
/* --------------------------------------------------------------------------
   00. BOOTSTRAP -> TOKENS DEL KIT
   bootstrap-utilities.min.css trae su propio :root con la paleta del framework
   (el `primary` es el azul de Bootstrap). Sin este remapeo, cualquier utilidad
   de color o de sombra mete valores fuera de la paleta del sitio sin avisar.
   Las utilidades de color esperan R,G,B sueltos, no #hex ni rgb().

   EL SELECTOR ES `:root:root` A PROPOSITO. La hoja de Bootstrap se carga desde
   una entrada de tipo `footer`, o sea DESPUES de este snippet: con `:root` a
   secas (0,1,0) empatariamos y ganaria Bootstrap, y todos los componentes de
   abajo saldrian con los radios y sombras del framework (4px, 6px, 32px...)
   en vez de los del sitio. Repetir la pseudo-clase da (0,2,0) y hace que el
   remapeo gane sea cual sea el orden de carga.
   La escala de radios y sombras del sitio vive AQUI: los componentes de abajo
   la leen, no repiten numeros. Cambiar un radio del sistema = cambiarlo aqui.
   -------------------------------------------------------------------------- */
:root:root{
  --bs-primary-rgb:10,111,120;      /* brand      #0A6F78 */
  --bs-secondary-rgb:8,79,86;       /* branddark  #084F56 */
  --bs-dark-rgb:16,33,43;           /* ink        #10212B */
  --bs-light-rgb:247,250,251;       /* bg         #F7FAFB */
  --bs-body-color-rgb:81,97,107;    /* body       #51616B */
  --bs-danger-rgb:192,57,43;        /* error      #C0392B */

  /* escala de radios del sitio, en los 5 huecos de Bootstrap */
  --bs-border-radius-sm:14px;       /* botones            */
  --bs-border-radius:16px;          /* featurestat        */
  --bs-border-radius-lg:18px;       /* step               */
  --bs-border-radius-xl:22px;       /* tarjeta, cita      */
  --bs-border-radius-xxl:28px;      /* featurebox         */

  --bs-box-shadow-sm:0 10px 30px rgba(16,33,43,.04);   /* tarjeta    */
  --bs-box-shadow:0 18px 50px rgba(16,33,43,.10);      /* featurebox */
}

/* Estas dos leen tokens del KIT, y Elementor los declara en `body.elementor-kit-N`,
   NO en :root. Puestas arriba, el var() no resuelve y la declaracion queda
   invalida: cualquier shorthand que la use (border-bottom:1px solid var(...))
   se cae ENTERO, incluido el ancho. Sintoma: un borde que simplemente no sale.
   En body no hace falta especificidad: una declaracion propia del elemento gana
   al valor heredado del :root de Bootstrap. */
body{
  --bs-border-color:var(--e-global-color-line);
  --bs-body-bg:var(--e-global-color-white);
}

/* ==========================================================================
   wearUP v2 - GLOBAL design system
   Origen: wearUP_website_v2/{wearup-home-es, wearup-software-es, wearup-modulos-es}.html
   Regla del proyecto: TODA regla cuelga de una clase con prefijo cld_
   Los colores y tipografias salen de las variables del kit de Elementor (kit 10)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REJILLAS -> FLEX  (gap 0 + gutter como padding interno de cada columna)
   El row compensa el gutter con margin negativo para que las tarjetas queden
   alineadas con los titulares de seccion.
   -------------------------------------------------------------------------- */
.cld_row{--cld-g:11px;width:auto;max-width:none;margin-left:calc(var(--cld-g) * -1);margin-right:calc(var(--cld-g) * -1)}
.cld_col{padding-left:var(--cld-g);padding-right:var(--cld-g)}
.cld_col_card{padding-bottom:calc(var(--cld-g) * 2)}
.cld_g7{--cld-g:7px}
.cld_g8{--cld-g:8px}
.cld_g10{--cld-g:10px}
.cld_g11{--cld-g:11px}
.cld_g12{--cld-g:12px}
.cld_g18{--cld-g:18px}
.cld_g25{--cld-g:25px}
.cld_g30{--cld-g:30px}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA FLUIDA
   El control de tamano de Elementor Free no acepta clamp(); el original si.
   -------------------------------------------------------------------------- */
.cld_h1 .elementor-heading-title{font-size:clamp(2.8rem,7vw,5.6rem);line-height:1.1}
.cld_h1_page .elementor-heading-title{font-size:clamp(2.8rem,6vw,5rem);line-height:1.1}
.cld_h2 .elementor-heading-title{font-size:clamp(2rem,4vw,3.8rem);line-height:1.1}
.cld_h2_md .elementor-heading-title{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1}
.cld_h2_sm .elementor-heading-title{font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.1}

/* --------------------------------------------------------------------------
   3. FONDOS DE DOS CAPAS
   Elementor Free solo admite un degradado por contenedor; el hero lleva dos.
   -------------------------------------------------------------------------- */
.cld_hero{background:radial-gradient(circle at 85% 15%,rgba(10,111,120,.14),transparent 30%),linear-gradient(180deg,#fff 0%,#f7fbfb 100%)}
.cld_pagehero{background:radial-gradient(circle at 85% 15%,rgba(10,111,120,.16),transparent 32%),linear-gradient(180deg,#fff,#f3fafb)}

/* --------------------------------------------------------------------------
   4. PIEZAS DE MARCA (widget heading no tiene fondo ni tamano de caja)
   -------------------------------------------------------------------------- */
.cld_eyebrow .elementor-heading-title{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--e-global-color-brandsoft);color:var(--e-global-color-branddark)}
.cld_eyebrow_light .elementor-heading-title{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}

.cld_icon_chip .elementor-heading-title{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--e-global-color-brandsoft);color:var(--e-global-color-branddark);font-size:1.3rem;line-height:1}
.cld_icon_chip_txt .elementor-heading-title{font-size:.95rem;font-weight:900;letter-spacing:-.02em}

.cld_step_num .elementor-heading-title{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--e-global-color-brand);color:#fff;line-height:1}
.cld_benefit_chip .elementor-heading-title{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--e-global-color-brandsoft);color:var(--e-global-color-branddark);line-height:1}

.cld_pill .elementor-heading-title{display:inline-flex;padding:9px 13px;border-radius:999px;border:1px solid var(--e-global-color-line);background:#fff;color:var(--e-global-color-pilltext)}

/* --------------------------------------------------------------------------
   5. LISTAS CON MARCA DE VERIFICACION (pseudo-elementos: no hay control nativo)
   -------------------------------------------------------------------------- */
.cld_hero_points .elementor-heading-title::before{content:" ● ";color:var(--e-global-color-brand);margin-right:8px}
.cld_checklist ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.cld_checklist ul li::before{content:" ● ";color:var(--e-global-color-brand);font-weight:900;margin-right:10px}

/* --------------------------------------------------------------------------
   6. MOCKUP DE DASHBOARD DEL HERO
   La rotacion no existe como control en Elementor Free (Motion Effects es Pro).
   -------------------------------------------------------------------------- */
.cld_dashboard{transform:rotate(1deg)}
.cld_bar{opacity:.85}

/* --------------------------------------------------------------------------
   7. HOVER Y TRANSICIONES (replican .btn:hover del original)
   -------------------------------------------------------------------------- */
.cld_btn .elementor-button{transition:.2s ease}
.cld_btn .elementor-button:hover{transform:translateY(-2px)}
.cld_btn_primary .elementor-button{box-shadow:0 10px 25px rgba(10,111,120,.25)}
.cld_cardlink a{transition:.2s ease}
.cld_cardlink a:hover{color:var(--e-global-color-branddark)}

/* --------------------------------------------------------------------------
   8. FAQ - nested-accordion con la piel de los <details> del original
   -------------------------------------------------------------------------- */
.cld_faq .e-n-accordion-item{border:1px solid var(--e-global-color-line);border-radius:16px;background:#fff;margin-bottom:14px;overflow:hidden}
.cld_faq .e-n-accordion-item-title{padding:18px 20px;cursor:pointer}
.cld_faq .e-n-accordion-item > .e-con{padding:0 20px 18px}
.cld_faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon{transform:rotate(45deg)}
.cld_faq .e-n-accordion-item-title-icon{transition:transform .2s ease}


/* --------------------------------------------------------------------------
   9. FORMULARIO CONTACT FORM 7 (el plugin no trae estilos de marca)
   -------------------------------------------------------------------------- */
/*
.cld_form_contact .wpcf7-form{display:flex;flex-wrap:wrap;margin:0 -8px}
.cld_form_contact .cld_field{width:50%;padding:0 8px 16px;box-sizing:border-box}
.cld_form_contact .cld_field_full{width:100%}
.cld_form_contact label{display:block;font-size:.9rem;font-weight:800;color:var(--e-global-color-ink);font-family:var(--e-global-typography-wubody-font-family),sans-serif}
.cld_form_contact input:not([type=submit]),
.cld_form_contact textarea,
.cld_form_contact select{width:100%;margin-top:7px;border:1px solid var(--e-global-color-line);border-radius:12px;padding:13px 14px;background:#fff;font-family:var(--e-global-typography-wubody-font-family),sans-serif;font-size:16px;color:var(--e-global-color-ink)}
.cld_form_contact textarea{min-height:130px;resize:vertical}
.cld_form_contact input:not([type=submit]):focus,
.cld_form_contact textarea:focus,
.cld_form_contact select:focus{outline:3px solid rgba(10,111,120,.14);border-color:var(--e-global-color-brand)}
.cld_form_contact input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:14px;font-weight:800;font-size:16px;font-family:var(--e-global-typography-wubody-font-family),sans-serif;border:1px solid transparent;background:var(--e-global-color-brand);color:#fff;box-shadow:0 10px 25px rgba(10,111,120,.25);cursor:pointer;transition:.2s ease}
.cld_form_contact input[type=submit]:hover{transform:translateY(-2px);background:var(--e-global-color-branddark)}
.cld_form_contact .wpcf7-spinner{display:block;margin:8px 0 0}
.cld_form_contact .wpcf7-not-valid-tip{color:var(--e-global-color-error);font-size:.85rem;margin-top:6px}
.cld_form_contact .wpcf7-response-output{width:100%;margin:8px 8px 0;border-radius:12px;border-width:1px;padding:12px 14px;font-size:.9rem}
*/

/* --------------------------------------------------------------------------
   10. CABECERA Y PIE (plantillas Xpro)
   -------------------------------------------------------------------------- */
.cld_header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,231,234,.9)}
.cld_logo img{height:34px;width:auto}
.cld_footer_bottom{border-top:1px solid var(--e-global-color-footline)}

/* --------------------------------------------------------------------------
   11. DESPLAZAMIENTO SUAVE  (html{scroll-behavior} del original, pero anclado
       a una clase cld_ mediante :has para no usar un selector de etiqueta)
   -------------------------------------------------------------------------- */
html:has(.cld_page){scroll-behavior:smooth}

/* --------------------------------------------------------------------------
   12. RESPONSIVE  (mismos cortes que el original: 980px y 640px)
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .cld_form_contact .cld_field{width:50%}
}
@media (max-width:640px){
  .cld_dashboard{transform:none}
  .cld_form_contact .cld_field{width:100%}
  .cld_row{--cld-g:0px}
  .cld_col_card{padding-bottom:22px}
}

/* --------------------------------------------------------------------------
   13. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cld_btn .elementor-button:hover{transform:none}
  .cld_form_contact input[type=submit]:hover{transform:none}
  .cld_anim{animation:none !important}
}

/* --------------------------------------------------------------------------
   14. MEDIDAS Y CAJAS QUE ELEMENTOR FREE NO EXPONE COMO CONTROL
   -------------------------------------------------------------------------- */
.cld_head{max-width:780px}
.cld_cta_copy{max-width:700px}
.cld_lead p{max-width:680px}
.cld_col_card{display:flex;flex-direction:column}
.cld_pilllist > *,
.cld_hero_points > *,
.cld_actions > *{width:auto}
.cld_bars{height:90px}
.cld_bar{flex:1 1 0}
.cld_bar_32{height:32%}
.cld_bar_43{height:43%}
.cld_bar_58{height:58%}
.cld_bar_66{height:66%}
.cld_bar_78{height:78%}
.cld_bar_88{height:88%}
.cld_dot{width:9px;height:9px;flex:0 0 9px}
.cld_trust_num .elementor-heading-title,
.cld_trust_lbl{text-align:center}
.cld_breadcrumb_txt p{margin:0}
.cld_breadcrumb_txt a{color:var(--e-global-color-branddark);font-weight:800}
.cld_breadcrumb_txt span{padding-inline:8px}
.cld_cardlink p{margin:0}
.cld_cardlink a{font-weight:800;color:var(--e-global-color-brand)}
/* --------------------------------------------------------------------------
   15. CABECERA, PIE Y REMATES DE PAGINA
   -------------------------------------------------------------------------- */
.cld_nav_wrap{min-height:76px}
.cld_navcta .elementor-button{white-space:nowrap}

/* el logotipo es tinta sobre transparente: en el pie oscuro se invierte a blanco */
.cld_footer_logo img{filter:brightness(0) invert(1);height:30px}

.cld_footer_links p{margin:0}
.cld_footer_links a{display:block;margin:8px 0;color:#C9D5DA;font-weight:400}
.cld_footer_links a:hover{color:#fff}
.cld_footer_about p{max-width:350px;margin:0}
.cld_legal .elementor-heading-title{font-weight:400}

.cld_bc_inline .elementor-heading-title{font-weight:800}
.cld_flownum .elementor-heading-title{font-weight:900}
.cld_prose p + p{margin-top:14px}

/* el CTA de cabecera desaparece cuando el menu pasa a hamburguesa (980px) */
@media (max-width:980px){
  .cld_navcta{display:none}
}

/* --------------------------------------------------------------------------
   16. TAMANOS FLUIDOS VIA TOKEN
   Elementor emite `.elementor-{page} .elementor-element.elementor-element-{id}
   .elementor-heading-title{font-size:var(--e-global-typography-X-font-size)}`,
   que es (0,4,0) y gana a cualquier clase suelta. En vez de escalar la guerra
   de especificidad, se redefine el propio token sobre la clase cld_: la regla
   de Elementor resuelve la variable heredada y adopta el valor fluido.
   -------------------------------------------------------------------------- */
.cld_h1{--e-global-typography-wuh1-font-size:clamp(2.8rem,7vw,5.6rem)}
.cld_h1_page{--e-global-typography-wuh1-font-size:clamp(2.8rem,6vw,5rem)}
.cld_h2{--e-global-typography-wuh2-font-size:clamp(2rem,4vw,3.8rem)}
.cld_h2_md{--e-global-typography-wuh2md-font-size:clamp(1.9rem,3vw,2.6rem)}
.cld_h2_sm{--e-global-typography-wuh2sm-font-size:clamp(1.7rem,2.4vw,2.2rem)}
.cld_icon_chip{--e-global-typography-wuh3-font-size:1.3rem}
.cld_icon_chip_txt{--e-global-typography-wuh3-font-size:1.05rem;--e-global-typography-wuh3-font-weight:900}
.cld_flownum{--e-global-typography-wusmall-font-weight:900}
.cld_card_cool{--e-global-color-white:var(--e-global-color-coolsoft)}
/* --------------------------------------------------------------------------
   17. DESBORDE DEL GUTTER POR DEBAJO DE 1280px
   La fila compensa el gutter con margin negativo. Por encima de 1280px el
   contenedor boxed (1180) tiene holgura de sobra; por debajo no la hay y ese
   margen sobresale del viewport. Lo que sobresale es SOLO el padding vacio de
   las columnas (el contenido nunca cruza la linea de 1180), asi que recortarlo
   es seguro. overflow-x:clip deja el eje Y visible (hidden lo bloquearia).
   -------------------------------------------------------------------------- */
.cld_section,.cld_hero,.cld_pagehero,.cld_trust,.cld_breadcrumb,.cld_footer{overflow-x:clip}

/* El panel off-canvas del menu Xpro queda aparcado fuera de pantalla a la derecha
   (sigue ocupando layout) y alarga el scroll horizontal. Al abrirse entra por
   transform, asi que recortar la cabecera solo oculta su posicion cerrada. */
.cld_header{overflow-x:clip}

/* --------------------------------------------------------------------------
   18. SEPARACION VERTICAL DE LOS SPLITS APILADOS (<=980px)
   El original conserva el gap de 60/50px al pasar a una sola columna.
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .cld_row.cld_g30 > .cld_col,
  .cld_row.cld_g25 > .cld_col{padding-bottom:44px}
  .cld_row.cld_g30 > .cld_col:last-child,
  .cld_row.cld_g25 > .cld_col:last-child{padding-bottom:0}
}
/* --------------------------------------------------------------------------
   19. CTA APILADO EN MOVIL (igual que el original a <=640px)
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .cld_cta{flex-direction:column;align-items:flex-start}
}

/* --------------------------------------------------------------------------
   20. BLOQUES EN HTML + CSS PURO
   Tres bloques de la home (mockup de dashboard del hero y las dos cajas teal)
   se sirven como marcado propio dentro de un widget HTML, a peticion expresa.
   Aqui si se usa CSS Grid: el marcado ya no pasa por contenedores de Elementor,
   asi que se reproduce la rejilla del HTML de origen tal cual.
   Los colores siguen saliendo del kit -> el sitio se sigue recoloreando solo.
   -------------------------------------------------------------------------- */
.cld_rawblock{width:100%}

/* --- mockup de dashboard --- */
.cld_raw_dash{border-radius:28px;background:var(--e-global-color-panel);padding:20px;box-shadow:0 30px 70px rgba(8,79,86,.25);transform:rotate(1deg)}
.cld_raw_top{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.cld_raw_top i{display:block;width:9px;height:9px;border-radius:50%;background:var(--e-global-color-dot)}
.cld_raw_grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.cld_raw_panel{background:var(--e-global-color-white);border-radius:18px;padding:18px;min-height:150px;color:var(--e-global-color-ink)}
.cld_raw_panel small{font-size:.8rem;color:var(--e-global-color-body)}
.cld_raw_panel p{margin:0;font-size:.9rem;line-height:1.5;color:var(--e-global-color-body)}
.cld_raw_panel_dark{background:var(--e-global-color-paneldk);color:var(--e-global-color-white)}
.cld_raw_panel_dark small,.cld_raw_panel_dark p{color:rgba(255,255,255,.75)}
.cld_raw_kpi{font-size:2rem;font-weight:900;line-height:1.1;letter-spacing:-.02em;margin:8px 0}
.cld_raw_bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:18px}
.cld_raw_bars i{display:block;flex:1;background:var(--e-global-color-brand);border-radius:8px 8px 2px 2px;opacity:.85}
.cld_raw_bars i:nth-child(1){height:32%}
.cld_raw_bars i:nth-child(2){height:58%}
.cld_raw_bars i:nth-child(3){height:43%}
.cld_raw_bars i:nth-child(4){height:78%}
.cld_raw_bars i:nth-child(5){height:66%}
.cld_raw_bars i:nth-child(6){height:88%}
.cld_raw_list{display:grid;gap:10px;margin-top:14px}
.cld_raw_row{display:flex;justify-content:space-between;gap:20px;padding-bottom:8px;border-bottom:1px solid var(--e-global-color-panelline);color:var(--e-global-color-body);font-size:.9rem}
.cld_raw_row strong{color:var(--e-global-color-ink);font-weight:800}

/* --- cajas teal --- */
.cld_raw_fbox{background:linear-gradient(135deg,var(--e-global-color-branddark),var(--e-global-color-brand));color:var(--e-global-color-white);border-radius:28px;padding:44px;box-shadow:0 18px 50px rgba(16,33,43,.10)}
.cld_raw_fbox h2,.cld_raw_fbox h3{margin:0 0 10px;color:var(--e-global-color-white);line-height:1.1}
.cld_raw_fbox h3{font-size:1.2rem}
.cld_raw_fbox h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:14px}
.cld_raw_fbox p{margin:0;line-height:1.6;color:rgba(255,255,255,.82)}
.cld_raw_fbox_stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.cld_raw_fbox_stat{background:rgba(255,255,255,.1);padding:18px;border-radius:16px}
.cld_raw_fbox_stat strong{display:block;font-size:1.2rem;font-weight:800;margin-bottom:4px}
.cld_raw_fbox_stat small{display:block;font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.82)}
.cld_raw_eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--e-global-color-white);font-size:.85rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px}
.cld_raw_fbox a.cld_raw_btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:24px;padding:0 22px;border:1px solid var(--e-global-color-white);border-radius:14px;background:var(--e-global-color-white);color:var(--e-global-color-branddark);font-weight:800;text-decoration:none;transition:.2s ease}
.cld_raw_fbox a.cld_raw_btn:hover{transform:translateY(-2px);background:var(--e-global-color-brandsoft);color:var(--e-global-color-branddark)}

@media (max-width:640px){
  .cld_raw_dash{transform:none}
  .cld_raw_grid{grid-template-columns:1fr}
  .cld_raw_fbox{padding:28px 24px}
  .cld_raw_fbox_stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cld_raw_fbox a.cld_raw_btn:hover{transform:none}
}

/* --------------------------------------------------------------------------
   21. COMPONENTE TARJETA (.cld_card)
   Punto unico de estilo de las 141 tarjetas del sitio. Los contenedores de
   Elementor ya no llevan fondo, borde, radio, sombra, padding, gap ni
   direccion/alineacion propios: solo conservan lo estructural
   (content_width:full y _flex_size:grow).
   Elementor pinta el contenedor a traves de custom properties definidas en
   .e-con (--padding-*, --row-gap, --align-items, --border-radius), que es
   (0,1,0) igual que .cld_card; este snippet se imprime el ultimo del head,
   asi que gana sin necesidad de !important.
   -------------------------------------------------------------------------- */
.cld_card{
  --padding-top:26px;--padding-right:26px;--padding-bottom:26px;--padding-left:26px;
  --row-gap:0px;--column-gap:0px;--gap:0px;
  --align-items:flex-start;
  --border-radius:var(--bs-border-radius-xl);
  background-color:var(--e-global-color-white);
  border:1px solid var(--e-global-color-line);
  box-shadow:var(--bs-box-shadow-sm);
}
/* Variantes de fondo (pagina Software) */
.cld_card_warm{background-color:var(--e-global-color-warmsoft)}
.cld_card_cool{background-color:var(--e-global-color-coolsoft);border-color:var(--e-global-color-coolline)}


/* --------------------------------------------------------------------------
   22. RITMO VERTICAL DE SECCION
   Punto unico del ritmo de pagina. Antes vivia en el control `padding` de cada
   contenedor de primer nivel: 103 copias de 5 valores, imposibles de mantener
   sincronizadas. Los contenedores ya no llevan padding; sale de aqui.

   OJO CON EL SELECTOR. Elementor declara en custom-frontend.min.css:
       .e-con{--padding-top:var(--container-default-padding-top,10px)}
       .e-con{--padding-block-start:var(--padding-top)}
       .e-con-full,.e-con>.e-con-inner{padding-block-start:var(--padding-block-start)}
   `.e-con` es (0,1,0), igual que una clase suelta: `.cld_section` EMPATA y
   pierde por orden de carga, y el contenedor se queda en el default de 10px.
   Por eso el selector es `.e-con.cld_section` (0,2,0). Sin !important.
   Como .e-con redeclara la variable en cada contenedor, el valor NO se hereda
   hacia los hijos: el 92px de la seccion no llega a las tarjetas de dentro.

   No se usan utilidades de Bootstrap: su escala tope es 3rem (48px) y sus
   cortes responsive (576/768/992) no son los de este sitio (980/640).
   Cambiar el ritmo de TODO el sitio = cambiar los numeros de aqui.
   -------------------------------------------------------------------------- */
.e-con.cld_section,.e-con.cld_hero,.e-con.cld_pagehero,.e-con.cld_trust,.e-con.cld_breadcrumb{--padding-left:20px;--padding-right:20px}
.e-con.cld_section   {--padding-top:92px;--padding-bottom:92px}
.e-con.cld_hero      {--padding-top:90px;--padding-bottom:60px}
.e-con.cld_pagehero  {--padding-top:100px;--padding-bottom:76px}
.e-con.cld_trust     {--padding-top:25px;--padding-bottom:25px}
.e-con.cld_breadcrumb{--padding-top:11px;--padding-bottom:11px}

@media (max-width:640px){
  /* .cld_breadcrumb no tenia valor movil propio: conserva el gutter de 20px */
  .e-con.cld_section,.e-con.cld_hero,.e-con.cld_pagehero,.e-con.cld_trust{--padding-left:12px;--padding-right:12px}
  .e-con.cld_section  {--padding-top:68px;--padding-bottom:68px}
  .e-con.cld_hero     {--padding-top:67px;--padding-bottom:44px}
  .e-con.cld_pagehero {--padding-top:74px;--padding-bottom:56px}
  .e-con.cld_trust    {--padding-top:19px;--padding-bottom:19px}
}


/* --------------------------------------------------------------------------
   23. RADIOS Y SOMBRAS DE COMPONENTE
   Antes: 165 controles `border_radius` / `box_shadow` repartidos por el JSON,
   una copia por elemento. Ahora una regla por componente, leyendo la escala
   de la seccion 00.
   Por que NO son utilidades de Bootstrap escritas en el markup: cada uno de
   estos valores pertenece a un COMPONENTE que se repite (29 featurebox, 40
   featurestat, 35 botones...). Poner `rounded-4` en 40 campos de clase son 40
   copias del mismo dato; la clase de componente es una. Las utilidades ganan
   en lo puntual, no en lo repetido.
   -------------------------------------------------------------------------- */
.cld_btn .elementor-button{border-radius:var(--bs-border-radius-sm)}
.e-con.cld_featurestat{--border-radius:var(--bs-border-radius)}
.e-con.cld_step       {--border-radius:var(--bs-border-radius-lg)}
.e-con.cld_quote      {--border-radius:0 var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0}
.e-con.cld_featurebox {--border-radius:var(--bs-border-radius-xxl);box-shadow:var(--bs-box-shadow)}
/* 30px se sale de los 5 huecos de la escala: el sitio tiene 6 radios distintos.
   28 y 30 estan a 2px; unificarlos es decision del usuario, no la tomo yo. */
.e-con.cld_cta        {--border-radius:30px}
.e-con.cld_breadcrumb{border-bottom:1px solid var(--bs-border-color)}


/* --------------------------------------------------------------------------
   25. INTEGRACIONES - SPLITS EDITORIALES
   Los tres modulos reproducen la composicion de dos columnas de la fuente.
   Elementor conserva cada bloque editable; la cuadrícula solo determina su
   posicion en escritorio y vuelve a una columna por debajo de 980px.
   -------------------------------------------------------------------------- */
.e-con.cld_integrations_split > .e-con-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;row-gap:0;align-items:start}
.e-con.cld_integrations_cadcam > .e-con-inner > :nth-child(1){grid-column:1;grid-row:1}
.e-con.cld_integrations_cadcam > .e-con-inner > :nth-child(2){grid-column:1;grid-row:2}
.e-con.cld_integrations_cadcam > .e-con-inner > :nth-child(3){grid-column:2;grid-row:1 / span 2}
.e-con.cld_integrations_erp > .e-con-inner > :nth-child(1){grid-column:1;grid-row:1 / span 3}
.e-con.cld_integrations_erp > .e-con-inner > :nth-child(2){grid-column:2;grid-row:1}
.e-con.cld_integrations_erp > .e-con-inner > :nth-child(3){grid-column:2;grid-row:2}
.e-con.cld_integrations_erp > .e-con-inner > :nth-child(4){grid-column:2;grid-row:3}
.e-con.cld_integrations_bi > .e-con-inner > :nth-child(1){grid-column:1;grid-row:1}
.e-con.cld_integrations_bi > .e-con-inner > :nth-child(2){grid-column:1;grid-row:2}
.e-con.cld_integrations_bi > .e-con-inner > :nth-child(3){grid-column:2;grid-row:1 / span 2}
@media (max-width:980px){
  .e-con.cld_integrations_split > .e-con-inner{display:flex;flex-direction:column;gap:60px}
}

/* --------------------------------------------------------------------------
   CASOS DE USO
   -------------------------------------------------------------------------- */
.elementor-524 .cld-casos-hero .elementor-heading-title{max-width:10ch}
.elementor-524 .cld-casos-hero .elementor-widget-text-editor p{max-width:48ch}
.elementor-524 .cld-casos-context,.elementor-524 .cld-casos-comparison{background:var(--e-global-color-body)}
.elementor-524 .cld-casos-context .cld-casos-metric{border-inline-start:1px solid var(--e-global-color-line);padding-inline-start:24px}
.elementor-524 .cld-casos-list .cld-casos-row{border-top:1px solid var(--e-global-color-line)}
.elementor-524 .cld-casos-list .cld-casos-row:last-child{border-bottom:1px solid var(--e-global-color-line)}
.elementor-524 .cld-casos-row .elementor-widget-text-editor ul,.elementor-524 .cld-casos-comparison .elementor-widget-text-editor ul{margin:0;padding-inline-start:1.25em}
.elementor-524 .cld-casos-cta{background:var(--e-global-color-ink)}
.elementor-524 .cld-casos-cta .elementor-heading-title,.elementor-524 .cld-casos-cta .elementor-widget-text-editor{color:var(--e-global-color-white)}
.elementor-524 .cld-casos-contact .wpcf7-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.elementor-524 .cld-casos-contact .wpcf7-form .cld_field_full{grid-column:1/-1}
.elementor-524 .cld-casos-contact .wpcf7-form input,.elementor-524 .cld-casos-contact .wpcf7-form select,.elementor-524 .cld-casos-contact .wpcf7-form textarea{width:100%;border:1px solid var(--e-global-color-line);border-radius:2px;background:var(--e-global-color-white);color:var(--e-global-color-ink);padding:12px}
.elementor-524 .cld-casos-contact .wpcf7-form input:focus,.elementor-524 .cld-casos-contact .wpcf7-form select:focus,.elementor-524 .cld-casos-contact .wpcf7-form textarea:focus{outline:2px solid var(--e-global-color-brand);outline-offset:3px}
.elementor-524 .cld-casos-contact .wpcf7-submit{min-height:44px;border:1px solid var(--e-global-color-brand);border-radius:2px;background:var(--e-global-color-brand);color:var(--e-global-color-white);padding:12px 22px}
@media (max-width:640px){
  .elementor-524 .cld-casos-context .cld-casos-metric{border-inline-start:0;border-top:1px solid var(--e-global-color-line);padding:16px 0 0}
  .elementor-524 .cld-casos-contact .wpcf7-form{grid-template-columns:1fr}
  .elementor-524 .cld-casos-contact .wpcf7-form .cld_field_full{grid-column:auto}
}

/* CLD CASOS LAYOUT REPAIR 2026-08-27
   Scoped repair for page 524. Elementor e-con-full children need explicit
   desktop tracks and an explicit tablet collapse at the site breakpoint. */
.elementor-524 .cld-casos-hero .elementor-heading-title{max-width:none}
.elementor-524 .cld-casos-context,.elementor-524 .cld-casos-comparison,.elementor-524 .cld-casos-contact{background:var(--e-global-color-bg)}
.elementor-524 .cld-casos-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.elementor-524 .cld-casos-points>*,.elementor-524 .cld-casos-flow>*{width:auto}
.elementor-524 .cld-casos-points p::before{content:"✓";color:var(--e-global-color-brand);margin-right:8px}
.elementor-524 .cld-casos-flow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);border:1px solid var(--e-global-color-line);background:var(--e-global-color-white);padding:24px}
.elementor-524 .cld-casos-flow>:last-child{border-inline-start:1px solid var(--e-global-color-line);padding-inline-start:24px}
.elementor-524 .cld-casos-comparison-grid>*{--padding-top:24px;--padding-right:24px;--padding-bottom:24px;--padding-left:24px;border:1px solid var(--e-global-color-line);background:var(--e-global-color-white)}
.elementor-524 .cld-casos-comparison-grid>:last-child{background:var(--e-global-color-brandsoft)}
.elementor-524 .cld-casos-connected{--padding-top:32px;--padding-right:32px;--padding-bottom:32px;--padding-left:32px;background:var(--e-global-color-ink)}
.elementor-524 .cld-casos-connected p,.elementor-524 .cld-casos-connected strong{color:var(--e-global-color-white)}
.elementor-524 .cld-casos-connected-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.elementor-524 .cld-casos-connected-grid>*{--padding-top:16px;--padding-right:16px;--padding-bottom:16px;--padding-left:16px;background:rgba(255,255,255,.08);width:auto}
.elementor-524 .e-con.cld-casos-cta{--padding-top:64px;--padding-bottom:64px}
.elementor-524 .cld-casos-cta>.e-con-inner{display:grid;grid-template-columns:minmax(0,3fr) minmax(240px,1fr);grid-template-rows:auto auto;column-gap:48px;align-items:center}
.elementor-524 .cld-casos-cta-heading{grid-column:1;grid-row:1}
.elementor-524 .cld-casos-cta .cld-casos-cta-heading .elementor-heading-title{color:var(--e-global-color-white)}
.elementor-524 .cld-casos-cta-copy{grid-column:1;grid-row:2}
.elementor-524 .cld-casos-cta-copy p{color:rgba(255,255,255,.82)}
.elementor-524 .cld-casos-cta-action{grid-column:2;grid-row:1/span 2}
.elementor-524 .cld-casos-cta-action .elementor-button{width:100%}
body:has(.elementor-524 .cld-casos-contact) .elementor-element-8cacc64{display:none}
.elementor-524 .cld-casos-list,.elementor-524 .cld-casos-contact{scroll-margin-top:96px}

@media (min-width:981px){
  .elementor-524 .cld-casos-hero>.e-con-inner{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:64px;align-items:center}
  .elementor-524 .cld-casos-multisite>.e-con-inner,
  .elementor-524 .cld-casos-contact>.e-con-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}
  .elementor-524 .cld-casos-context .cld-casos-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .elementor-524 .cld-casos-list .cld-casos-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:32px}
  .elementor-524 .cld-casos-comparison .cld-casos-comparison-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px}
}

@media (min-width:981px) and (max-width:1100px){
  .elementor-524 .cld-casos-hero>.e-con-inner{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);column-gap:32px}
  .elementor-524 .e-con.cld-casos-hero{--padding-top:68px;--padding-bottom:68px}
}

@media (max-width:980px){
  .elementor-524 .e-con.cld-casos-hero,
  .elementor-524 .e-con.cld-casos-multisite,
  .elementor-524 .e-con.cld-casos-contact,
  .elementor-524 .e-con.cld-casos-row,
  .elementor-524 .e-con.cld-casos-comparison-grid,
  .elementor-524 .e-con.cld-casos-metrics{--flex-direction:column}
  .elementor-524 .cld-casos-flow{display:flex;flex-direction:column}
  .elementor-524 .cld-casos-flow>*{width:100%}
  .elementor-524 .cld-casos-flow>:last-child{border-inline-start:0;border-top:1px solid var(--e-global-color-line);padding-inline-start:0;padding-top:24px}
  .elementor-524 .cld-casos-cta>.e-con-inner{display:flex;flex-direction:column;align-items:stretch}
  .elementor-524 .cld-casos-cta-action .elementor-button{width:auto}
  .elementor-524 .cld-casos-connected-grid{grid-template-columns:1fr}
  .elementor-524 .e-con.cld-casos-hero{--padding-top:48px;--padding-bottom:48px}
  .elementor-524 .cld-casos-hero-media{max-width:520px;align-self:center}
}

@media (max-width:560px){
  .elementor-524 .cld-casos-points{grid-template-columns:1fr;row-gap:12px}
  .elementor-524 .e-con.cld-casos-hero{--padding-top:44px;--padding-bottom:44px}
  .elementor-524 .cld-casos-hero-media{max-width:300px}
}

.elementor-524 .cld-casos-internal-breadcrumb{display:none}