/* Visual finish only: existing content, grids and image proportions are retained. */
.element-redesign,.element-legacy {
  --finish-bg:#08090b;
  --finish-surface:#111214;
  --finish-surface-raised:#202125;
  --finish-text:#fff;
  --finish-copy:#c4c7cc;
  --finish-silver:#d8dde3;
  --finish-edge:rgba(255,255,255,.14);
  --finish-hairline:rgba(255,255,255,.07);
  --finish-panel:linear-gradient(145deg,#202125 0%,#111214 36%,#08090b 100%);
  --finish-glass:rgba(8,9,11,.86);
  --finish-shadow:0 18px 50px #0006,inset 0 1px 0 #ffffff12;
  --finish-halo:rgba(208,215,226,.075);
  --finish-atmosphere:radial-gradient(ellipse 850px 600px at 85% 18%,#aeb6c51c,transparent 75%),radial-gradient(ellipse 700px 650px at 8% 72%,#aeb6c513,transparent 75%),linear-gradient(135deg,#000 8%,#08090b 48%,#000 92%);
  background:var(--finish-atmosphere);
  position:relative;
  isolation:isolate;
  color:var(--finish-text);
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="light"] :is(.element-redesign,.element-legacy) {
  --finish-bg:#fff;
  --finish-surface:#fff;
  --finish-surface-raised:#edf0f4;
  --finish-text:#111215;
  --finish-copy:#43474e;
  --finish-silver:#535b66;
  --finish-edge:rgba(20,24,32,.16);
  --finish-hairline:rgba(20,24,32,.08);
  --finish-panel:linear-gradient(145deg,#fff 0%,#f6f7f9 52%,#edf0f4 100%);
  --finish-glass:rgba(255,255,255,.9);
  --finish-shadow:0 16px 42px #15213a0b,inset 0 1px 0 #fff;
  --finish-halo:rgba(96,116,145,.055);
  background:radial-gradient(ellipse at 78% 0%,var(--finish-halo),transparent 28%),var(--finish-bg);
}
/* Stationary grain sits behind the content and never intercepts controls. */
:root:not([data-theme="light"]) :is(.element-redesign,.element-legacy):before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath filter='url(%23grain)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
:root:not([data-theme="light"]) .element-redesign :is(.el-split.problem,.el-split.about,.el-steps,.el-cases,.home-contact,.el-story) {
  background:radial-gradient(ellipse at 88% 12%,#aeb6c512,transparent 58%),radial-gradient(ellipse at 8% 85%,#aeb6c50a,transparent 55%);
}
:root .element-redesign :is(h1,h2,h3) {
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-weight:650;
  letter-spacing:-.045em;
}
:root .element-redesign p {color:var(--finish-copy)}
:root .element-redesign .el-header {
  background:var(--finish-glass);
  color:var(--finish-text);
  border-color:var(--finish-edge);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 28px #0000000d;
}
:root .element-redesign .el-nav {font-weight:550;letter-spacing:.035em}
:root .element-redesign .el-nav a {border-color:transparent}
:root .element-redesign .el-nav a:is(:hover,[aria-current]) {border-color:var(--finish-silver)}
:root .element-redesign :is(.el-util,.el-menu,.el-float a,.el-float button,.el-gallery-controls button,.el-case-filter button) {
  background:var(--finish-panel);
  color:var(--finish-text);
  border-color:var(--finish-edge);
  box-shadow:inset 0 1px 0 #ffffff10;
}
:root .element-redesign :is(.el-util,.el-menu,.el-case-filter button) {border-radius:10px}
:root .element-redesign :is(.el-util,.el-menu,.el-case-filter button):hover {border-color:var(--finish-silver)}
:root .element-redesign .el-btn {
  border-radius:10px;
  border-color:var(--finish-edge);
  background:linear-gradient(160deg,#ffffff0c,#ffffff02);
  color:var(--finish-text);
  box-shadow:inset 0 1px 0 #ffffff14,0 5px 14px #0002;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
:root .element-redesign .el-primary {
  background:linear-gradient(155deg,#fff 10%,#e2e6eb 100%)!important;
  color:#111215!important;
  border-color:#ffffffbc;
  box-shadow:inset 0 1px 0 #fff,0 6px 24px #ffffff12;
}
:root[data-theme="light"] .element-redesign .el-primary {
  background:linear-gradient(155deg,#292c32,#08090b)!important;
  color:#fff!important;
  border-color:#17191e;
  box-shadow:inset 0 1px 0 #ffffff24,0 6px 24px #10152118;
}
:root .element-redesign .el-btn:before {background:linear-gradient(90deg,transparent,#ffffff80,transparent)}
:root .element-redesign .el-btn:hover {transform:translateY(-3px);border-color:var(--finish-silver);box-shadow:0 10px 30px #cbd5e125,inset 0 1px 0 #ffffff25}
:root .element-redesign :is(.el-tiles,.el-split,.el-statement,.el-steps,.el-offers,.home-contact,.el-footer,.el-case-row) {border-color:var(--finish-hairline)}
:root .element-redesign :is(.el-offers,.el-blog,.el-tiles.service-overview) {
  background:radial-gradient(ellipse at 50% 25%,var(--finish-halo),transparent 68%);
}
:root .element-redesign :is(.el-offer,.el-blog-card,.el-split.system .el-split-items article,.el-empty) {
  background:var(--finish-panel);
  border:1px solid var(--finish-edge);
  border-radius:16px;
  box-shadow:var(--finish-shadow);
}
:root .element-redesign :is(.el-offer,.el-blog-card) {
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
:root .element-redesign :is(.el-offer,.el-blog-card):hover {
  border-color:var(--finish-silver);
  box-shadow:var(--finish-shadow),0 0 30px var(--finish-halo);
}
:root .element-redesign .el-offer h3 {font-weight:650}
:root .element-redesign .el-offer-subtitle {color:var(--finish-text)!important}
:root .element-redesign .el-offer li {color:var(--finish-copy)}
:root .element-redesign .el-offer ul {border-color:var(--finish-edge)}
:root .element-redesign :is(.el-offer li svg,.el-icon) {color:var(--finish-silver)}
:root .element-redesign .service-overview .el-tile-grid {border-color:var(--finish-edge);border-radius:16px;overflow:hidden;background:var(--finish-panel);box-shadow:var(--finish-shadow)}
:root .element-redesign .service-overview .el-tile-grid article {border-color:var(--finish-edge)}
:root .element-redesign .method .el-tile-grid article {border-color:var(--finish-edge)!important;border-radius:16px;box-shadow:var(--finish-shadow)}
:root .element-redesign :is(.el-split.technology>.el-shell>.el-photo,.el-split.about>.el-shell>.el-photo,.el-case-image,.el-blog-image) {border-radius:14px}
:root .element-redesign .el-split.problem .el-split-items article {border-color:var(--finish-edge)}
:root .element-redesign .el-split.technology .el-split-items article {border-color:var(--finish-edge)}
:root .element-redesign .el-text-link {border-color:var(--finish-edge);transition:border-color .2s ease}
:root .element-redesign .el-text-link:hover {border-color:var(--finish-silver)}
:root .element-redesign .el-faq details {
  background:var(--finish-panel);
  border:1px solid var(--finish-edge);
  border-radius:12px;
  margin-bottom:10px;
  box-shadow:inset 0 1px 0 #ffffff0a;
}
:root .element-redesign .el-faq details[open] {border-color:var(--finish-silver);box-shadow:var(--finish-shadow)}
:root .element-redesign .el-faq summary {font-weight:600;font-family:"Segoe UI",Arial,sans-serif}
:root .element-redesign .el-faq summary span:after {color:var(--finish-silver)}
:root .element-redesign :is(.el-field input,.el-field select,.el-field textarea) {
  border-radius:10px;
  background:var(--finish-panel);
  border-color:var(--finish-edge);
  color:var(--finish-text);
  box-shadow:inset 0 1px 0 #ffffff0a;
}
:root .element-redesign .el-field :is(input,textarea)::placeholder {color:var(--finish-copy);opacity:.7}
:root .element-redesign .el-field :is(input,select,textarea):focus-visible {border-color:var(--finish-silver)}
:root .element-redesign .el-field select option {background:var(--finish-bg);color:var(--finish-text)}
:root .element-redesign .el-footer {background:var(--finish-glass)}
:root .element-redesign .el-gallery-controls button:hover:not(:disabled) {background:var(--finish-panel);border-color:var(--finish-silver)}
:root .element-redesign :focus-visible {outline:2px solid var(--finish-silver);outline-offset:4px}
@media(max-width:700px) {
  :root .element-redesign .el-nav {background:var(--finish-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--finish-edge)}
  :root .element-redesign .el-faq details {padding:20px}
  :root .element-redesign :is(.el-offer,.el-blog-card,.method .el-tile-grid article) {border-radius:14px}
}
@media(prefers-reduced-motion:reduce) {
  :root .element-redesign :is(.el-btn,.el-btn:before,.el-offer,.el-blog-card,.el-util,.el-menu,.el-text-link) {transition:none}
  :root .element-redesign .el-btn:hover {transform:none}
}
/* Quiet technical grid and one-shot motion; no running animation behind forms. */
:root .element-redesign .el-hero:before {content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(var(--finish-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--finish-hairline) 1px,transparent 1px);background-size:80px 80px;opacity:.3;mask-image:linear-gradient(90deg,#000,transparent 72%)}
:root .element-redesign .el-hero-copy {position:relative;z-index:2}
:root .element-redesign .el-hero h1 {font-size:clamp(42px,5.2vw,74px);line-height:1.04;font-weight:600;letter-spacing:-.055em;text-wrap:balance}
:root .element-redesign :is(.el-section-intro h2,.el-split-copy h2,.el-steps-intro h2) {font-weight:600;text-wrap:balance}
:root .element-redesign .el-eyebrow {color:var(--finish-silver)!important;letter-spacing:.15em}
:root .element-redesign .el-tile-copy p {line-height:1.65}
:root :is(.element-redesign,.element-legacy) .el-enter {opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
:root :is(.element-redesign,.element-legacy) .el-enter:is(.el-arrived,:focus-within) {opacity:1;transform:none}
@media(hover:hover) and (pointer:fine) {
 :root .element-redesign :is(.el-offer,.el-blog-card):hover {transform:translateY(-4px)}
 :root .element-redesign .el-text-link svg {transition:transform .2s ease}
 :root .element-redesign .el-text-link:hover svg {transform:translateX(4px)}
}
@media(max-width:700px) {
 :root .element-redesign .el-hero h1 {font-size:clamp(32px,8.5vw,47px)}
 :root .element-redesign .el-hero:before {background-size:56px 56px;opacity:.2}
}
@media(prefers-reduced-motion:reduce) {
 :root :is(.element-redesign,.element-legacy) .el-enter {opacity:1;transform:none;transition:none}
 :root .element-redesign :is(.el-offer,.el-blog-card,.el-text-link svg) {transition:none;transform:none!important}
}

:root .element-redesign .el-hero>.el-photo img {filter:grayscale(.85)}

:root .element-redesign :focus-visible{outline-color:var(--finish-silver)!important}

/* Continuous alpha fade: the photograph has no hard edge at the middle of the hero. */
:root .element-redesign :is(.el-hero,.el-contact-hero){background:var(--finish-bg);overflow:hidden}
:root .element-redesign :is(.el-hero,.el-contact-hero)>.el-background{inset:0}
:root .element-redesign :is(.el-hero,.el-contact-hero)>.el-background img{
 position:absolute;inset:0 0 auto auto;width:auto;max-width:none;height:100%;object-fit:contain;
 object-position:right center;filter:grayscale(.9);opacity:.92;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,#00000014 23%,#00000040 38%,#0000008c 53%,#000000ce 68%,#000 88%);
 mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,#00000014 23%,#00000040 38%,#0000008c 53%,#000000ce 68%,#000 88%);
}
:root .element-redesign :is(.el-hero,.el-contact-hero):after{
 background:linear-gradient(90deg,var(--finish-bg) 0%,color-mix(in srgb,var(--finish-bg) 96%,transparent) 28%,color-mix(in srgb,var(--finish-bg) 78%,transparent) 45%,color-mix(in srgb,var(--finish-bg) 20%,transparent) 65%,transparent 85%);
 pointer-events:none;
}
:root[data-theme="light"] .element-redesign :is(.el-hero,.el-contact-hero)>.el-background img{opacity:.84}
/* Keep the homepage photograph inside the same right edge as the content frame. */
@media(min-width:701px){
 :root .element-redesign #portada>.el-background img{
  right:max(var(--page-gutter),calc((100% - 1440px)/2 + var(--page-gutter)));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,#00000014 23%,#00000040 38%,#0000008c 53%,#000000ce 68%,#000 80%,#000000ce 88%,#00000040 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,#00000014 23%,#00000040 38%,#0000008c 53%,#000000ce 68%,#000 80%,#000000ce 88%,#00000040 96%,transparent 100%);
 }
}
@media(max-width:700px){
 :root .element-redesign :is(.el-hero,.el-contact-hero)>.el-background img{
  inset:auto 0 0 auto;width:100%;height:auto;max-width:100%;opacity:.24;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#00000066 36%,#000 82%);
  mask-image:linear-gradient(180deg,transparent 0%,#00000066 36%,#000 82%);
 }
 :root .element-redesign :is(.el-hero,.el-contact-hero):after{background:linear-gradient(180deg,var(--finish-bg) 0%,color-mix(in srgb,var(--finish-bg) 94%,transparent) 42%,color-mix(in srgb,var(--finish-bg) 65%,transparent) 100%)}
 :root[data-theme="light"] .element-redesign :is(.el-hero,.el-contact-hero)>.el-background img{opacity:.18}
}
/* Legacy English images keep the complete concept instead of cropping into UI details. */
:root .element-legacy .hero-tile img{object-fit:contain;background:var(--finish-bg)}

/* Use the available half-page width instead of legacy narrow text measures. */
:root .element-redesign #problema .el-split-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px)}
:root .element-redesign #problema :is(.el-split-copy,.el-split-items){width:100%;min-width:0;max-width:none;align-self:start}
:root .element-redesign #problema :is(.el-eyebrow,h2,.el-lead,.el-copy,.el-split-items h3,.el-split-items p){width:100%;max-width:none}
:root .element-redesign #problema .el-split-items article>div{flex:1;min-width:0;width:100%}
@media(max-width:700px){:root .element-redesign #problema .el-split-inner{gap:28px}}
/* Section transitions remain smooth; card and form borders keep their own purpose. */
:root .element-redesign main>section,:root .element-redesign .el-footer{border-block:0!important}
