.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#0475E7;--e-global-color-184997b:#EBEBEB;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --blue-950:#02090F; --blue-900:#021930; --blue-700:#034587; --blue-600:#0363C4; --blue-500:#0475E7; --blue-100:#E3F0FD; --gray-100:#FAFCFF; --gray-200:#F5F5F5; --gray-300:#EBEDF0; --gray-400:#E8EBEF; --gray-500:#C6CDD6; --gray-600:#8A94A1; --gray-700:#5A6572; --orange-500:#EE8B00; --orange-400:#FFA213; --orange-200:#FFD185; --orange-100:#FFF3E0; --red-600:#B72818; --red-500:#E81305; --red-100:#FDEAE7; --green-600:#1B7F4B; --green-100:#E4F4EB; --surface-page:#FAFCFF; --surface-card:#FFFFFF; --surface-sunken:#F5F5F5; --surface-dark:#021930; --surface-darkest:#02090F; --text-heading:#021930; --text-body:#2A3644; --text-muted:#5A6572; --text-faint:#8A94A1; --text-on-dark:#FFFFFF; --text-on-dark-muted:#9FB1C6; --text-link:#034587; --text-link-hover:#0475E7; --action-primary:#0475E7; --action-primary-hover:#0363C4; --action-primary-text:#FFFFFF; --accent:#EE8B00; --accent-hover:#FFA213; --danger:#E81305; --danger-hover:#B72818; --danger-bg:#FDEAE7; --warning:#EE8B00; --warning-bg:#FFF3E0; --success:#1B7F4B; --success-bg:#E4F4EB; --info:#034587; --info-bg:#E3F0FD; --border:#DDE2E9; --border-strong:#C6CDD6; --border-on-dark:rgba(255,255,255,0.14); --focus-ring:#0475E7; --font-display:Space Grotesk; --font-body:Schibsted Grotesk; --font-mono:IBM Plex Mono; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px; --container:1200px; --navbar-height:64px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:16px; --text-lg:18px; --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px; --text-5xl:64px; --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55; --tracking-eyebrow:0.08em; }
/* Start custom CSS *//* DMI — shared keyframes (site-wide, used by dmi-marquee-track) */
@keyframes dmi-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.dmi-marquee-track{animation:none}}
/* DMI — make the theme-builder header stick (its wrapper is the scrolling parent) */
.elementor-location-header{position:sticky;top:0;z-index:50}
/* DMI - active slider dot (class is applied by JS, so Elementor cannot compile it) */
.elementor .dmi-dot.dmi-dot-active{background-color:var(--blue-500)}

/* DMI - header ghost state over the video hero. The class is applied by JS and the
   rules reach descendants, so neither can be expressed as an Elementor global class.
   !important is deliberate: these are state overrides competing with Elementor's own
   generated .elementor-kit-7s, which reach (0,8,1) in post-295.css and change on every re-save. */
.dmi-header{transition:background-color .28s ease,box-shadow .28s ease}
.elementor .dmi-header.dmi-header-ghost{background-color:transparent !important;box-shadow:none !important}
.elementor .dmi-header-ghost .elementor-nav-menu--main .elementor-item{color:var(--text-on-dark) !important}
.elementor .dmi-header-ghost .elementor-nav-menu--main .elementor-item:hover,
.elementor .dmi-header-ghost .elementor-nav-menu--main .elementor-item:focus{color:var(--text-on-dark) !important;opacity:.75}
.elementor .dmi-header-ghost .elementor-menu-toggle{color:var(--text-on-dark) !important;background-color:transparent !important}
.elementor .dmi-header-ghost .elementor-menu-toggle svg{fill:currentColor !important}
.elementor .dmi-header-ghost .dmi-header-logo{filter:brightness(0) invert(1)}


/* DMI - capability card tap-to-toggle. The open class is applied by JS, so Elementor
   cannot compile it. On touch devices the CSS :hover reveal is neutralised so the tap
   state is the single source of truth and iOS sticky-hover cannot leave a card stuck open. */
.elementor .dmi-cap-reveal.dmi-cap-reveal-open{opacity:1 !important}
.elementor .dmi-cap-card[role="button"]{cursor:pointer}
@media (hover: none){
  .elementor .dmi-cap-reveal:hover,
  .elementor .dmi-cap-reveal:focus-visible{opacity:0}
  .elementor .dmi-cap-reveal.dmi-cap-reveal-open{opacity:1 !important}
}


/* DMI - CTA Ken Burns. Keyframes cannot live in an Elementor global class (no at-rules,
   and the schema has no animation prop), so the motion lives here while every static style
   stays on dmi-cta / dmi-img-cover. Scoped to the CTA so other cover images are untouched.
   'alternate' eases back and forth, so the loop never jumps. The scale floor of 1.04 keeps
   the drift inside the overflow, so no edge of the section is ever exposed. */
@keyframes dmi-cta-kenburns{
  from{transform:scale(1.04) translate3d(0, 0.8%, 0)}
  to{transform:scale(1.30) translate3d(0, -0.8%, 0)}
}
.elementor .dmi-cta .dmi-img-cover{
  animation:dmi-cta-kenburns 5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .elementor .dmi-cta .dmi-img-cover{animation:none}
}


/* DMI - CTA background video. Two stacked <video> elements crossfade into each other so
   the loop never shows a hard cut. The visible class is applied by JS, so Elementor cannot
   compile it; everything static lives on the dmi-cta-video global class. */
.elementor .dmi-cta .dmi-cta-video.is-visible{opacity:1}
@media (prefers-reduced-motion: reduce){
  .elementor .dmi-cta .dmi-cta-video{display:none}
}

/* DMI - industry .elementor-kit-7. The active class is applied by JS, so Elementor cannot compile
   it, and the row needs per-side border colours (a transparent left marker that turns blue)
   which a single border-color prop cannot express. Layout and type stay on the classes. */
.elementor .dmi-ind-list{border-top:1px solid var(--border)}
.elementor .dmi-ind-row{border-bottom:1px solid var(--border);border-left:2px solid transparent;transition:background-color 150ms ease-out,border-color 150ms ease-out}
.elementor .dmi-ind-row:hover{background-color:var(--gray-300)}
.elementor .dmi-ind-row.is-active{background-color:var(--blue-500);border-left-color:var(--blue-500)}
.elementor .dmi-ind-row.is-active:hover{background-color:var(--blue-500)}
.elementor .dmi-ind-row.is-active .dmi-ind-name{color:#fff}
.elementor .dmi-ind-row.is-active .dmi-ind-num{color:rgba(255,255,255,.70)}
.elementor .dmi-ind-row.is-active .dmi-ind-tag{color:rgba(255,255,255,.80)}
.elementor .dmi-ind-row:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px}
/* Show only the selected panel. The :not() beats the dmi-ind-card class's own display:flex,
   which sits at equal specificity. The second rule is the no-JS fallback: when nothing is
   marked active, the first card stays visible so the section still reads without scripts. */
.elementor .dmi-ind-card:not(.is-active){display:none}
.elementor .dmi-ind-card:first-child:not(.is-active):not(:has(~ .dmi-ind-card.is-active)){display:flex}


/* DMI - privacy placeholder chips. These spans come from rich text, and Elementor's html-v3
   sanitiser strips class attributes from inline tags, so they can only be reached as
   descendants of the paragraph that carries dmi-todo-text. Remove that class once the real
   copy replaces the placeholder and the chip styling disappears with it. */
.elementor .dmi-todo-text span{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-heading);
  background:rgba(238,139,0,.14);
  border:1px dashed var(--orange-500);
  border-radius:2px;
  padding:1px 6px;
}
/* smooth jumps for the privacy table of contents */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}


/* DMI - Our Site gallery. The active classes are applied by JS so Elementor cannot compile
   them, and the active tab's underline plus its descendant colours need .elementor-kit-7s a single
   class cannot express. Everything static lives on the dmi-gal-* classes. */
.elementor .dmi-gal-panel:not(.is-active){display:none}
.elementor .dmi-gal-panel.is-active{display:block}
/* no-JS fallback: show the first panel when nothing has been marked active */
.elementor .dmi-gal-panel:first-child:not(.is-active):not(:has(~ .dmi-gal-panel.is-active)){display:block}
.elementor .dmi-gal-tab.is-active{box-shadow:inset 0 -2px 0 var(--blue-500)}
.elementor .dmi-gal-tab.is-active .dmi-gal-tab-label{color:var(--blue-500)}
.elementor .dmi-gal-tab.is-active .dmi-gal-tab-title{color:var(--text-heading)}
.elementor .dmi-gal-tab:focus-visible,
.elementor .dmi-gal-btn:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}


/* DMI - phone country code. The code select sits under the single Teléfono label as
   one field pair, so its own label is empty and Elementor renders no label element.
   Each form field is its own flex group with align-items:center and the widget offers
   no per-field alignment control, so without this the select would float mid-row
   instead of lining up with the phone input beside it. */
.elementor-field-group-codigo{align-items:flex-end}
/* The label is kept in the markup so the field stays findable in the Elementor editor
   (its Form Fields list titles each row by the label) and so the select keeps a real
   associated label, but it is hidden visually because the pair shares the Teléfono label. */
.elementor-field-group-codigo > label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* DMI - phone pair on small screens. Elementor collapses every form column to 100% below 768px, which would
   strand the label-less code select on its own row above the Teléfono label. Keeping the
   pair side by side is the whole point of the shared label, so hold their ratio. */
@media (max-width:767px){
  .elementor-field-group-codigo{width:40%}
  .elementor-field-group-telefono{width:60%}
}

/* DMI - consent sentence link. The legacy Form widget exposes no style control for the
   acceptance field or links inside it, so this link falls back to Hello Elementor's
   reset.css default (#c36 pink). Match the site link colour used by dmi-link. */
.elementor-field-type-acceptance a{color:var(--blue-700)}
.elementor-field-type-acceptance a:hover{color:var(--blue-500)}/* End custom CSS */