/* ==========================================================================
   Motion layer · Clínica Dental Dra. Díaz & Asociados
   Slow, premium transitions. Everything is gated behind html.mx so the page
   reads fine without JS, and html[data-motion="off"] (reduced motion) skips it.
   Reveal motion uses the individual translate / scale / rotate properties so
   it composes with the design's own inline transforms.
   ========================================================================== */

:root{
  --mx-ease:cubic-bezier(.16,1,.3,1);          /* expo out */
  --mx-ease-io:cubic-bezier(.77,0,.18,1);      /* quart in-out */
  --mx-ease-back:cubic-bezier(.22,1,.36,1);    /* quint out, no overshoot */
  --mx-d:1.6s;
  --mx-navy:#2E4863;--mx-teal:#3D7A7C;--mx-aqua:#9CCBCC;
}
html,body{overflow-x:clip}
html{scroll-behavior:auto}

/* ---------- Loader / curtain ---------- */
.mx-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--mx-navy);
  clip-path:inset(0 0 0 0 round 0);transition:clip-path 1.6s var(--mx-ease-io)}
.mx-loader.out{clip-path:inset(0 0 100% 0 round 0 0 50% 50%)}
.mx-loader-in{display:flex;flex-direction:column;align-items:center;gap:28px;transition:opacity .9s ease,translate 1.6s var(--mx-ease-io)}
.mx-loader.out .mx-loader-in{opacity:0;translate:0 -70px}
.mx-loader-logo{background:#fff;border-radius:18px;padding:12px 22px;display:flex;opacity:0;scale:.8;filter:blur(10px);
  clip-path:inset(0 50% 0 50% round 18px);animation:mxLogo 1.5s var(--mx-ease) .15s forwards}
.mx-loader-logo img{height:58px;width:auto;display:block}
.mx-loader-bar{width:200px;height:2px;background:rgba(156,203,204,.2);overflow:hidden;border-radius:2px}
.mx-loader-bar i{display:block;height:100%;width:100%;transform-origin:left;scale:0 1;background:linear-gradient(90deg,#609B9D,#D9EEEE,#9CCBCC);animation:mxBar 1.7s var(--mx-ease-io) .3s forwards}
.mx-loader-txt{font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.55em;color:#C9D6E0;text-transform:uppercase;opacity:0;animation:mxFade 1.2s ease .7s forwards}
@keyframes mxLogo{to{opacity:1;scale:1;filter:blur(0);clip-path:inset(0 0 0 0 round 18px)}}
@keyframes mxBar{to{scale:1 1}}
@keyframes mxFade{to{opacity:1}}

/* ---------- Scroll progress ---------- */
.mx-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:9000;pointer-events:none;transform-origin:left;scale:var(--mx-p,0) 1;
  background:linear-gradient(90deg,#3D7A7C,#9CCBCC 55%,#D9EEEE);box-shadow:0 0 12px rgba(156,203,204,.7)}

/* ---------- Generic reveal ---------- */
html.mx .mx-r{transition-property:opacity,translate,scale,rotate,filter,clip-path,letter-spacing;transition-duration:var(--mx-d);transition-timing-function:var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-r:not(.in){opacity:0}
html.mx .mx-up:not(.in){translate:0 60px}
html.mx .mx-down:not(.in){translate:0 -36px}
html.mx .mx-fade:not(.in){filter:blur(10px);translate:0 26px}
html.mx .mx-left:not(.in){translate:-90px 0;filter:blur(6px)}
html.mx .mx-right:not(.in){translate:90px 0;filter:blur(6px)}
html.mx .mx-rise{transition-duration:1.8s}
html.mx .mx-rise:not(.in){translate:0 90px;scale:.94;filter:blur(6px)}

/* Eyebrows: tracking settles + blur */
html.mx .mx-eyebrow{transition-duration:1.9s;display:inline-block}
html.mx .mx-eyebrow:not(.in){letter-spacing:.6em;filter:blur(6px)}
.eb{display:inline-block}

/* ---------- Titles split into words ---------- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
.mx-wi{display:inline-block;will-change:translate}
html.mx .mx-title{opacity:1!important;filter:none!important;translate:none!important}
html.mx .mx-title .mx-wi{transition:translate 1.7s var(--mx-ease),rotate 1.7s var(--mx-ease),opacity 1.2s ease;transition-delay:calc(var(--mx-delay,0s) + var(--i,0) * 80ms)}
html.mx .mx-title:not(.in) .mx-wi{translate:0 112%;rotate:6deg;opacity:0}

/* Inline photo pills inside the hero title: open from the centre, photo settles */
html.mx .mx-hpill{clip-path:inset(0 50% 0 50% round 999px);transition:clip-path 1.8s var(--mx-ease-io),scale 1.8s var(--mx-ease)}
html.mx .mx-hpill.in{clip-path:inset(0 0 0 0 round 999px)}
html.mx .mx-hpill img{transition:scale 2.6s var(--mx-ease),filter 2s ease}
html.mx .mx-hpill:not(.in) img{scale:1.6;filter:saturate(.3)}
.mx-hpill{transition:scale .8s var(--mx-ease)}
.mx-hpill:hover{scale:1.08}

/* ---------- Pills (buttons) ---------- */
html.mx .mx-pill{transition:clip-path 1.6s var(--mx-ease) var(--mx-delay,0s),opacity 1s ease var(--mx-delay,0s),translate 1.6s var(--mx-ease) var(--mx-delay,0s)}
html.mx .mx-pill:not(.in){clip-path:inset(0 calc(50% - 25px) 0 calc(50% - 25px) round 999px);opacity:0;translate:0 28px}
html.mx .mx-pill.in{clip-path:inset(-20px -20px -20px -20px round 999px)}
html.mx .mx-pill > svg,html.mx .mx-pill > img,html.mx .mx-pill .arr{transition:rotate 1.4s var(--mx-ease-back),scale 1.4s var(--mx-ease-back);transition-delay:calc(var(--mx-delay,0s) + .35s)}
html.mx .mx-pill:not(.in) > svg,html.mx .mx-pill:not(.in) > img,html.mx .mx-pill:not(.in) .arr{rotate:-140deg;scale:.2}
html.mx .mx-pill .mx-lbl{display:inline-block;transition:opacity 1.1s ease,translate 1.4s var(--mx-ease);transition-delay:calc(var(--mx-delay,0s) + .5s)}
html.mx .mx-pill:not(.in) .mx-lbl{opacity:0;translate:18px 0}
/* After the reveal, clip-path goes away so hover shine/shadows aren't cut */
html.mx .mx-pill.done{clip-path:none;transition:transform .6s var(--mx-ease),box-shadow .6s ease,background-color .6s ease,translate .7s var(--mx-ease)}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .6s var(--mx-ease),box-shadow .6s ease,translate .7s var(--mx-ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);translate:-120% 0;transition:translate 1.1s var(--mx-ease)}
.btn:hover::after{translate:120% 0}
.btn:hover{box-shadow:0 18px 34px -16px rgba(31,53,73,.55)}
.btn .arr,.btn > svg{transition:rotate .8s var(--mx-ease-back),scale .8s var(--mx-ease-back)}
.btn:hover .arr{rotate:45deg;scale:1.12}
.btn:hover > svg{rotate:-10deg;scale:1.15}

/* ---------- Icons ---------- */
html.mx .mx-ic{transition:opacity 1s ease var(--mx-delay,0s),scale 1.6s var(--mx-ease-back) var(--mx-delay,0s),rotate 1.6s var(--mx-ease-back) var(--mx-delay,0s),filter 1.2s ease var(--mx-delay,0s),transform .7s var(--mx-ease-back),box-shadow .7s ease}
html.mx .mx-ic:not(.in){opacity:0;scale:.3;rotate:-40deg;filter:blur(4px)}
html.mx .mx-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.2s var(--mx-ease-io);transition-delay:calc(var(--mx-delay,0s) + .35s + var(--j,0) * 140ms)}
html.mx .in .mx-draw,html.mx .in.mx-draw,html.mx .mx-row.in .mx-draw{stroke-dashoffset:0}
.ico,.sq{transition:transform .7s var(--mx-ease-back),box-shadow .7s ease,background-color .7s ease}
.ico svg,.sq svg{transition:rotate .9s var(--mx-ease-back),scale .9s var(--mx-ease-back)}
.card:hover .ico,.orbit .row:hover .ico,.orbit > div > div:hover .ico{transform:translateY(-4px) rotate(-8deg);box-shadow:0 12px 22px -10px rgba(61,122,124,.8)}
.card:hover .ico svg,.orbit > div > div:hover .ico svg{scale:1.14;rotate:8deg}
.sq:hover{background:rgba(255,255,255,.26);transform:translateY(-3px)}
/* gentle idle float for the hero icons once revealed */
html.mx .mx-float.in{animation:mxFloat 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes mxFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
html.mx .mx-bob.in{animation:mxFloat 7s ease-in-out 2.5s infinite}

/* ---------- Image frames: curtain + settle ---------- */
html.mx .mx-frame{transition:clip-path 2s var(--mx-ease-io) var(--mx-delay,0s),opacity .6s ease var(--mx-delay,0s)}
html.mx .mx-frame:not(.in){clip-path:inset(100% 0 0 0 round 28px)}
html.mx .mx-fr-left:not(.in){clip-path:inset(0 100% 0 0 round 28px)}
html.mx .mx-fr-right:not(.in){clip-path:inset(0 0 0 100% round 28px)}
html.mx .mx-fr-circle:not(.in){clip-path:circle(0% at 50% 50%)}
html.mx .mx-frame.in{clip-path:inset(0 0 0 0 round 0)}
html.mx .mx-fr-circle.in{clip-path:circle(75% at 50% 50%)}
html.mx .mx-frame.done{clip-path:none}
html.mx .mx-frame img{transition:scale 2.8s var(--mx-ease) var(--mx-delay,0s),filter 2.2s ease var(--mx-delay,0s)}
html.mx .mx-frame:not(.in) img{scale:1.4;filter:saturate(.35) brightness(.85)}
html.mx .mx-plx-img{scale:1.14}
html.mx .mx-frame:not(.in) .mx-plx-img{scale:1.45}
.mx-hoverzoom.done img,.mx-hoverzoom:not(.mx-frame) img{transition:scale 1.5s var(--mx-ease)!important}
.mx-hoverzoom:hover img{scale:1.08}

/* "Pop" container behind the second Nosotros photo */
html.mx .mx-pop-frame{transition:opacity 1.2s ease,scale 1.8s var(--mx-ease),translate 1.8s var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-pop-frame:not(.in){scale:.85;translate:40px 40px}

/* Rotating seal: spins in, then keeps its own slow spin */
html.mx .mx-seal{transition:opacity 1.3s ease,scale 2s var(--mx-ease-back),rotate 2.4s var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-seal:not(.in){scale:.2;rotate:-220deg}
.mx-seal{transition:scale .8s var(--mx-ease-back)}
.mx-seal:hover{scale:1.08}

/* Stats rule lines draw across */
.mx-rules{position:relative;border-color:transparent!important}
.mx-rules::before,.mx-rules::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,#3D7A7C,#D6E3E6);transform-origin:left;transition:scale 2s var(--mx-ease-io) var(--mx-delay,0s)}
.mx-rules::before{top:-1px}.mx-rules::after{bottom:-1px;transform-origin:right;transition-delay:calc(var(--mx-delay,0s) + .3s)}
footer .mx-rules::after{display:none}
footer .mx-rules::before{background:linear-gradient(90deg,rgba(156,203,204,.5),rgba(255,255,255,.08))}
html.mx .mx-rules:not(.in)::before,html.mx .mx-rules:not(.in)::after{scale:0 1}
html.mx .mx-rules{opacity:1!important;filter:none!important;translate:none!important}

/* ---------- Hero ---------- */
.mx-hdr{border-bottom-left-radius:calc(var(--hp,0) * 90px);border-bottom-right-radius:calc(var(--hp,0) * 90px)}
html.mx .mx-hero-bg{transition:opacity 2.4s ease .1s,scale 4s var(--mx-ease) .1s,filter 2.4s ease .1s}
html.mx body:not(.mx-go) .mx-hero-bg{opacity:0!important;scale:1.25;filter:blur(8px)}
html.mx .mx-waves .mx-draw{transition-duration:3.4s;transition-delay:calc(var(--mx-delay,0s) + var(--j,0) * 110ms)}
.mx-waves{animation:mxDrift 22s ease-in-out infinite alternate}
@keyframes mxDrift{from{translate:0 0}to{translate:-70px 24px}}

/* Arch outline draws up from the base, photo rises inside */
html.mx .mx-arch{transition:clip-path 2.4s var(--mx-ease-io) var(--mx-delay,0s),opacity 1s ease var(--mx-delay,0s)}
html.mx .mx-arch:not(.in){clip-path:inset(100% 0 0 0)}
html.mx .mx-arch.in{clip-path:inset(0 0 0 0)}
html.mx .mx-archphoto{transition:clip-path 2.4s var(--mx-ease-io) var(--mx-delay,0s),opacity .8s ease var(--mx-delay,0s)}
html.mx .mx-archphoto:not(.in){clip-path:inset(100% 0 0 0 round 170px 170px 0 0)}
html.mx .mx-archphoto.in{clip-path:inset(0 0 0 0 round 170px 170px 0 0)}
html.mx .mx-archphoto img{transition:translate 2.8s var(--mx-ease) var(--mx-delay,0s),scale 2.8s var(--mx-ease) var(--mx-delay,0s)}
html.mx .mx-archphoto:not(.in) img{translate:0 90px;scale:1.12}
.mx-archphoto{background-size:100% 200%!important;animation:mxGlow 9s ease-in-out infinite alternate}
@keyframes mxGlow{from{background-position:0 0}to{background-position:0 100%}}

html.mx .mx-insta{transition:opacity 1.3s ease,translate 1.8s var(--mx-ease),filter 1.4s ease,box-shadow .7s ease,scale .7s var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-insta:not(.in){translate:80px 0;filter:blur(8px)}
.mx-insta:hover{scale:1.04;box-shadow:0 24px 50px rgba(31,53,73,.25)}
html.mx .mx-spark{transition:opacity 1.2s ease,scale 1.8s var(--mx-ease-back),rotate 2.2s var(--mx-ease);transition-delay:var(--mx-delay,0s)}
html.mx .mx-spark:not(.in){scale:.2;rotate:-180deg}
.mx-spark svg{animation:mxTwinkle 7s ease-in-out infinite}
@keyframes mxTwinkle{0%,100%{rotate:0deg;scale:1}50%{rotate:90deg;scale:.82}}

/* ---------- Cards ---------- */
html.mx .mx-card{transition:opacity 1.6s ease var(--mx-delay,0s),translate 1.8s var(--mx-ease) var(--mx-delay,0s),scale 1.8s var(--mx-ease) var(--mx-delay,0s),rotate 1.8s var(--mx-ease) var(--mx-delay,0s),transform .9s var(--mx-ease),box-shadow .8s ease}
html.mx .mx-card:not(.in){translate:0 100px;scale:.92;rotate:2deg}
html.mx .mx-card:nth-child(even):not(.in){rotate:-2deg}
.mx-lift{transition:transform .9s var(--mx-ease),box-shadow .8s ease}
.mx-lift:hover{box-shadow:0 30px 60px -28px rgba(31,53,73,.4)!important}
.mx-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.mx-tilt:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)}
.mx-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(300px 220px at var(--mx-x,50%) var(--mx-y,50%),rgba(156,203,204,.22),rgba(156,203,204,0) 70%)}
.mx-tilt{position:relative}
.mx-tilt:hover::after{opacity:1}

/* ---------- Oferta ---------- */
html.mx .mx-offer{transition:opacity 1.6s ease,scale 2s var(--mx-ease),clip-path 2.2s var(--mx-ease-io),border-color 1.5s ease}
html.mx .mx-offer:not(.in){scale:.9;clip-path:inset(12% 20% 12% 20% round 60px)}
html.mx .mx-offer.in{clip-path:inset(-2px -2px -2px -2px round 22px)}
.mx-offer{position:relative;overflow:hidden}
.mx-offer::before{content:"";position:absolute;inset:-50% auto -50% 0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(156,203,204,.16),transparent);translate:-150% 0;rotate:12deg}
html.mx .mx-offer.in::before{animation:mxSweep 7s var(--mx-ease-io) 2.4s infinite}
@keyframes mxSweep{0%{translate:-150% 0}45%,100%{translate:420% 0}}
.mx-row{position:relative;border-bottom-color:transparent!important}
.mx-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;opacity:.25;transform-origin:left;transition:scale 1.8s var(--mx-ease-io) var(--mx-delay,0s)}
html.mx .mx-row:not(.in)::after{scale:0 1}
html.mx .mx-row:not(.in){translate:0 24px}
.mx-check circle{transform-box:fill-box;transform-origin:center;transition:scale 1.2s var(--mx-ease-back) var(--mx-delay,0s)}
html.mx .mx-row:not(.in) .mx-check circle{scale:0}
html.mx .mx-price:not(.in){translate:20px 0;filter:blur(4px)}

/* ---------- Qué incluye ---------- */
.mx-box,html.mx .mx-box{transition:opacity 1.6s ease var(--mx-delay,0s),translate 1.8s var(--mx-ease) var(--mx-delay,0s),filter 1.4s ease var(--mx-delay,0s),border-color .7s ease,box-shadow .7s ease}
.mx-box:hover{border-color:#9CCBCC!important;box-shadow:0 14px 30px -18px rgba(31,53,73,.35)!important}

/* ---------- Orbit ---------- */
html.mx .mx-ring{transition:opacity 1.6s ease,scale 2.4s var(--mx-ease),rotate 2.6s var(--mx-ease)}
html.mx .mx-ring:not(.in){scale:.5;rotate:-120deg}
html.mx .mx-ring.in{animation:mxSpin 60s linear 2.6s infinite}
@keyframes mxSpin{from{rotate:0deg}to{rotate:360deg}}
html.mx .mx-dot{transition:opacity .8s ease var(--mx-delay,0s),scale 1.4s var(--mx-ease-back) var(--mx-delay,0s)}
html.mx .mx-dot:not(.in){scale:0}
.mx-dot.in{animation:mxPulse 3.6s ease-in-out infinite;animation-delay:calc(var(--mx-delay,0s) + 1.4s)}
@keyframes mxPulse{0%,100%{box-shadow:0 0 0 0 rgba(61,122,124,.35)}50%{box-shadow:0 0 0 10px rgba(61,122,124,0)}}
.mx-breathe.done{animation:mxBreathe 8s ease-in-out infinite}
@keyframes mxBreathe{0%,100%{scale:1}50%{scale:1.035}}

/* ---------- Antes / después: halves wipe in, divider grows, handle pops ---------- */
.mx-ba > .ph{transition:clip-path 2s var(--mx-ease-io)}
.mx-ba > .ph:first-child{transition-delay:var(--mx-delay,0s)}
.mx-ba > .ph:nth-child(2){transition-delay:calc(var(--mx-delay,0s) + .45s)}
html.mx .mx-ba:not(.in) > .ph:first-child{clip-path:inset(0 100% 0 0)}
html.mx .mx-ba:not(.in) > .ph:nth-child(2){clip-path:inset(0 0 0 100%)}
.mx-ba > .ph img{transition:scale 2.6s var(--mx-ease),filter 1.4s ease;transition-delay:var(--mx-delay,0s)}
html.mx .mx-ba:not(.in) > .ph img{scale:1.3}
.mx-ba:hover > .ph img{scale:1.06}
.mx-ba > .ph:first-child img{filter:grayscale(0)}
.mx-ba:hover > .ph:first-child img{filter:grayscale(.6) brightness(.92)}
.mx-ba .cap{transition:opacity 1s ease,translate 1.2s var(--mx-ease);transition-delay:calc(var(--mx-delay,0s) + 1.4s)}
html.mx .mx-ba:not(.in) .cap{opacity:0;translate:0 -14px}
.mx-ba > div[aria-hidden]:nth-child(3){transform-origin:50% 50%;transition:scale 1.6s var(--mx-ease-io);transition-delay:calc(var(--mx-delay,0s) + 1s)}
html.mx .mx-ba:not(.in) > div[aria-hidden]:nth-child(3){scale:1 0}
.mx-ba > div[aria-hidden]:nth-child(4){transition:scale 1.3s var(--mx-ease-back),rotate 1.3s var(--mx-ease-back);transition-delay:calc(var(--mx-delay,0s) + 1.6s)}
html.mx .mx-ba:not(.in) > div[aria-hidden]:nth-child(4){scale:0;rotate:-180deg}
.mx-ba.in > div[aria-hidden]:nth-child(4){animation:mxHandle 3.2s ease-in-out 3.4s infinite}
@keyframes mxHandle{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
html.mx .mx-ba{opacity:1!important}

/* ---------- Historia collage ---------- */
html.mx .mx-host{opacity:1!important}
html.mx .mx-blob{transition:opacity 1.6s ease,scale 2.4s var(--mx-ease),border-radius 2.6s var(--mx-ease)}
html.mx .mx-blob:not(.in){scale:.4;border-radius:50%!important}
.mx-blob.in{animation:mxMorph 14s ease-in-out 2.6s infinite}
@keyframes mxMorph{0%,100%{border-radius:34px}33%{border-radius:60px 34px 80px 40px}66%{border-radius:34px 90px 40px 70px}}
html.mx .mx-drop{transition:opacity 1.4s ease,translate 2s var(--mx-ease),rotate 2.2s var(--mx-ease),scale 2s var(--mx-ease),filter 1.6s ease;transition-delay:var(--mx-delay,0s)}
html.mx .mx-drop-0:not(.in){translate:-60px 70px;rotate:-8deg;scale:.9;filter:blur(6px)}
html.mx .mx-drop-1:not(.in){translate:60px 70px;rotate:8deg;scale:.9;filter:blur(6px)}
html.mx .mx-drop-2:not(.in){translate:0 120px;rotate:-4deg;scale:.85;filter:blur(6px)}
.mx-drop img{transition:scale 1.6s var(--mx-ease)}
.mx-drop:hover img{scale:1.07}
html.mx .mx-cap{transition:opacity 1s ease,scale 1.2s var(--mx-ease-back);transition-delay:var(--mx-delay,0s)}
html.mx .mx-cap:not(.in){scale:.4}

/* ---------- Stars light up one by one ---------- */
.mx-star{display:inline-block}
html.mx .mx-stars{opacity:1!important}
html.mx .mx-stars .mx-star{transition:opacity .8s ease,scale 1.1s var(--mx-ease-back),rotate 1.1s var(--mx-ease-back);transition-delay:calc(var(--mx-delay,0s) + var(--k,0) * 140ms)}
html.mx .mx-stars:not(.in) .mx-star{opacity:0;scale:.2;rotate:-90deg}

/* ---------- Equipo ---------- */
html.mx .mx-namecard{transition:opacity 1.2s ease,translate 1.6s var(--mx-ease),filter 1.2s ease,box-shadow .7s ease;transition-delay:var(--mx-delay,0s)}
html.mx .mx-namecard:not(.in){translate:0 40px;filter:blur(6px)}
.mx-team:hover .mx-namecard{translate:0 -8px;box-shadow:0 18px 30px rgba(31,53,73,.2)!important;transition-delay:0s}
.mx-team{transition:box-shadow .8s ease}
.mx-team:hover{box-shadow:0 30px 60px -30px rgba(31,53,73,.45)}

/* ---------- Testimonios: cards come in from the edges ---------- */
html.mx .mx-testi{transition:opacity 1.6s ease var(--mx-delay,0s),translate 2s var(--mx-ease) var(--mx-delay,0s),rotate 2s var(--mx-ease) var(--mx-delay,0s),scale 2s var(--mx-ease) var(--mx-delay,0s),filter 1.4s ease var(--mx-delay,0s),transform .9s var(--mx-ease),box-shadow .8s ease}
html.mx .mx-testi-0:not(.in){translate:-160px 40px;rotate:-6deg;filter:blur(6px)}
html.mx .mx-testi-1:not(.in){translate:0 120px;scale:.9;filter:blur(6px)}
html.mx .mx-testi-2:not(.in){translate:160px 40px;rotate:6deg;filter:blur(6px)}
html.mx .mx-google{transition:opacity 1s ease,rotate 1.8s var(--mx-ease-back),scale 1.6s var(--mx-ease-back);transition-delay:var(--mx-delay,0s)}
html.mx .mx-google:not(.in){rotate:-270deg;scale:.2}

/* ---------- Contacto ---------- */
.field input,.field select{transition:border-color .6s ease,box-shadow .6s ease,translate .6s var(--mx-ease)}
.field input:hover,.field select:hover{border-color:#9CCBCC}
.field input:focus,.field select:focus{outline:none;border-color:#3D7A7C;box-shadow:0 0 0 5px rgba(61,122,124,.14);translate:0 -2px}
.field{transition:color .6s ease}
.field:focus-within{color:#3D7A7C}
.mx-wa.in{animation:mxWa 4s ease-in-out 2.5s infinite}
@keyframes mxWa{0%,100%{rotate:0deg}6%{rotate:-12deg}12%{rotate:10deg}18%{rotate:-6deg}24%{rotate:0deg}}

/* ---------- FAQ ---------- */
details.faq{transition:background-color .9s ease,box-shadow .8s ease,translate 1.6s var(--mx-ease),opacity 1.4s ease,filter 1.4s ease}
details.faq:hover{box-shadow:0 16px 34px rgba(31,53,73,.12)}
html.mx details.faq.mx-r{transition:opacity 1.4s ease var(--mx-delay,0s),translate 1.6s var(--mx-ease) var(--mx-delay,0s),background-color .9s ease,box-shadow .8s ease}
details.faq p{overflow:hidden}
details.faq summary{transition:color .7s ease,border-color .7s ease}
details.faq:not([open]) summary:hover{color:#3D7A7C}
details.faq .pl{transition:transform 1s var(--mx-ease-back),scale .7s var(--mx-ease-back)}
details.faq summary:hover .pl{scale:1.2}
details.faq.mx-closing{background:#FFFFFF!important}
details.faq.mx-closing summary{color:#2E4863!important;border-bottom-color:transparent!important}
details.faq.mx-closing .pl{transform:rotate(0deg)!important}

/* ---------- Footer CTA ---------- */
.mx-ctaglow{transition:box-shadow 1s ease,border-color 1s ease}
.mx-ctaglow.in{animation:mxCta 5s ease-in-out 2s infinite}
@keyframes mxCta{0%,100%{box-shadow:0 18px 44px rgba(31,53,73,.10)}50%{box-shadow:0 18px 44px rgba(31,53,73,.10),0 0 0 6px rgba(156,203,204,.25)}}

/* ---------- Colored bands: open from a rounded inset as they enter, close as they leave ---------- */
html.mx .mx-band{clip-path:inset(0 calc((1 - var(--sp,1)) * 5vw) round calc((1 - var(--sp,1)) * 80px))}

/* ---------- Nav links underline ---------- */
.navlinks a{position:relative;transition:color .5s ease,opacity 1.4s ease,translate 1.6s var(--mx-ease),filter 1.4s ease}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:linear-gradient(90deg,#9CCBCC,#FFFFFF);transform-origin:right;scale:0 1;transition:scale .8s var(--mx-ease)}
.navlinks a:hover::after{transform-origin:left;scale:1 1}
footer nav a{transition:color .5s ease,translate .7s var(--mx-ease)}
footer nav a:hover{color:#FFFFFF!important;translate:6px 0}

/* ---------- Reduced motion: show everything, no movement ---------- */
html[data-motion="off"] .mx-loader{display:none}
html[data-motion="off"] *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}