@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Creato Display MX';src:url('https://monk-experiences.vercel.app/assets/fonts/creato-display-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
#mx-exp{ --ink:#263245; --accent:#7FA7C1; --steel:#5C7E97; --platinum:#F0F0F0; --cream:#EAEDEF;
--sans:'Creato Display MX','Helvetica Neue',system-ui,sans-serif; --serif:'Bodoni Moda',Georgia,serif;
position:relative; background:var(--platinum); color:var(--ink); font-family:var(--sans); letter-spacing:-0.01em;
-webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; }
#mx-exp *{ box-sizing:border-box; }
#mx-exp img{ display:block; max-width:100%; }
#mx-exp a{ color:inherit; text-decoration:none; }
#mx-exp ::selection{ background:var(--accent); color:var(--platinum); }
#mx-exp h1,#mx-exp h2,#mx-exp h3,#mx-exp p{ margin:0; }
#mx-exp .mx-wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
#mx-exp em.mx-serif{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-0.02em; }
#mx-exp .mx-grain{ position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.09; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:220px 220px; }
#mx-exp .mx-btn{ position:relative; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap;
padding:15px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.22); font:700 15px/1 var(--sans); letter-spacing:-0.01em;
background:linear-gradient(95deg,#263245 0%,#52708F 52%,#A9C5D8 100%); color:var(--platinum);
box-shadow:0 14px 36px rgba(38,50,69,.28),inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
#mx-exp .mx-btn:hover{ box-shadow:0 22px 52px rgba(38,50,69,.4),inset 0 1px 0 rgba(255,255,255,.25); }
#mx-exp .mx-btn .mx-sheen{ position:absolute; top:0; left:-60%; width:42%; height:100%; pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); }
#mx-exp .mx-btn:hover .mx-sheen{ animation:mxSheen .9s ease forwards; }
@keyframes mxSheen{ to{ left:135%; } }
#mx-exp .mx-btn--light{ background:transparent; color:var(--platinum); border:1.4px solid rgba(240,240,240,.4); box-shadow:none; }
#mx-exp .mx-label{ display:inline-flex; align-items:center; gap:9px; font:700 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
#mx-exp .mx-label .mx-dot{ width:7px; height:7px; background:var(--accent); border-radius:2px; }
#mx-exp .mx-section{ position:relative; padding:clamp(60px,9vh,140px) 0; }
#mx-exp .mx-eyebrow{ font:700 13px/1 var(--sans); letter-spacing:.02em; color:var(--steel); opacity:.7; }
#mx-exp .mx-hxl{ font:800 clamp(27px,4.4vw,56px)/1.05 var(--sans); letter-spacing:-.04em; text-wrap:balance; }
#mx-exp .mx-hxl em{ color:var(--steel); }
#mx-exp .mx-grad{ background:linear-gradient(180deg,#A9C4D5 0%,#CBD9E4 45%,#F0F0F0 100%); }
/* hero */
#mx-exp .mx-hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; color:var(--platinum); overflow:hidden; border-radius:0; }
#mx-exp .mx-hero__bg{ position:absolute; inset:0; z-index:0; }
#mx-exp .mx-hero__bg img{ width:100%; height:120%; object-fit:cover; object-position:50% 42%; will-change:transform; }
#mx-exp .mx-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,28,40,.5) 0%,rgba(20,28,40,.26) 36%,rgba(20,28,40,.74) 100%); }
#mx-exp .mx-hero__inner{ position:relative; z-index:3; width:100%; padding-bottom:clamp(54px,9vh,110px); padding-top:clamp(60px,9vh,110px); }
#mx-exp .mx-hero h1{ color:#fff; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(33px,6.2vw,82px); line-height:1.04; letter-spacing:-.025em; max-width:17ch; text-wrap:balance; text-shadow:0 2px 40px rgba(20,28,40,.4); }
#mx-exp .mx-hero__sub{ margin-top:22px; max-width:44ch; font:400 clamp(16px,2vw,22px)/1.45 var(--sans); color:rgba(240,240,240,.92); }
#mx-exp .mx-hero__cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
/* problema */
#mx-exp .mx-lead{ margin-top:20px; max-width:52ch; font:400 clamp(16px,1.9vw,20px)/1.6 var(--sans); color:rgba(38,50,69,.74); }
/* solucion */
#mx-exp .mx-sol{ overflow:hidden; }
#mx-exp .mx-sol__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#mx-exp .mx-sol__bg img{ width:100%; height:100%; object-fit:cover; opacity:.10; mix-blend-mode:multiply; filter:grayscale(.2); }
#mx-exp .mx-sol__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(157,185,206,.2),rgba(240,240,240,.55)); }
#mx-exp .mx-sol .mx-wrap{ position:relative; z-index:1; }
#mx-exp .mx-sol__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
#mx-exp .mx-sol p{ margin-top:18px; font:400 clamp(16px,1.8vw,19px)/1.62 var(--sans); color:rgba(38,50,69,.8); }
#mx-exp .mx-figure{ position:relative; }
#mx-exp .mx-media{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 36px 80px rgba(38,50,69,.26); aspect-ratio:4/5; }
#mx-exp .mx-media img{ width:100%; height:112%; object-fit:cover; }
#mx-exp .mx-device{ position:absolute; right:6px; bottom:-14px; width:clamp(72px,9vw,110px); filter:drop-shadow(0 22px 34px rgba(38,50,69,.42)); animation:mxFloat 6s ease-in-out infinite; z-index:3; }
@keyframes mxFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-14px) rotate(2deg);} }
#mx-exp .mx-arrow{ margin-top:28px; display:inline-flex; align-items:center; gap:9px; font:700 15px/1 var(--sans); color:var(--ink); cursor:pointer; transition:gap .3s; }
#mx-exp .mx-arrow:hover{ gap:13px; }
/* beneficios */
#mx-exp .mx-bgrid{ margin-top:clamp(34px,5vh,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,16px); }
#mx-exp .mx-bcard{ background:rgba(255,255,255,.62); border:1px solid rgba(38,50,69,.1); border-radius:18px; padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:11px;
transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; }
#mx-exp .mx-bcard:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(38,50,69,.14); border-color:rgba(127,167,193,.5); }
#mx-exp .mx-brow{ display:flex; align-items:center; gap:12px; }
#mx-exp .mx-bic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#263245,#5C7E97); }
#mx-exp .mx-bic svg{ stroke:var(--platinum); width:19px; height:19px; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#mx-exp .mx-bcard h3{ font:700 clamp(15px,1.5vw,17px)/1.2 var(--sans); letter-spacing:-.02em; }
#mx-exp .mx-bcard p{ font:400 13.5px/1.55 var(--sans); color:rgba(38,50,69,.66); }
/* proceso */
#mx-exp .mx-proceso{ background:linear-gradient(90deg,#A9C4D5 0%,#CBD9E4 46%,#F0F0F0 100%); }
#mx-exp .mx-steps{ margin-top:clamp(36px,5vh,60px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,28px); }
#mx-exp .mx-step{ position:relative; padding-top:26px; border-top:1.5px solid rgba(38,50,69,.18); }
#mx-exp .mx-step__n{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(38px,5vw,60px); line-height:1; color:var(--accent); }
#mx-exp .mx-step h3{ margin-top:14px; font:700 clamp(16px,1.8vw,19px)/1.2 var(--sans); letter-spacing:-.02em; color:var(--ink); }
#mx-exp .mx-step p{ margin-top:11px; font:400 14px/1.6 var(--sans); color:rgba(38,50,69,.66); }
/* casos */
#mx-exp .mx-ucg{ margin-top:clamp(34px,5vh,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,18px); }
#mx-exp .mx-uc{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/4; color:var(--platinum); display:flex; align-items:flex-end; }
#mx-exp .mx-uc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1); }
#mx-exp .mx-uc::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,28,40,0) 16%,rgba(20,28,40,.55) 52%,rgba(20,28,40,.92) 100%); }
#mx-exp .mx-uc:hover img{ transform:scale(1.06); }
#mx-exp .mx-uc__txt{ position:relative; z-index:2; padding:clamp(18px,2.2vw,26px); }
#mx-exp .mx-uc__txt h3{ font:700 clamp(16px,1.8vw,20px)/1.15 var(--sans); letter-spacing:-.02em; color:#fff; text-shadow:0 1px 16px rgba(20,28,40,.5); }
#mx-exp .mx-uc__txt p{ margin-top:8px; font:400 13px/1.5 var(--sans); color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(20,28,40,.5); }
/* kit */
#mx-exp .mx-kit__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center; }
#mx-exp .mx-kit p{ margin-top:18px; font:400 clamp(16px,1.8vw,19px)/1.62 var(--sans); color:rgba(38,50,69,.8); }
#mx-exp .mx-kit__list{ margin-top:26px; list-style:none; padding:0; display:flex; flex-direction:column; gap:13px; }
#mx-exp .mx-kit__list li{ display:flex; align-items:flex-start; gap:12px; font:500 16px/1.45 var(--sans); color:var(--ink); }
#mx-exp .mx-kit__list svg{ flex:none; margin-top:2px; }
#mx-exp .mx-kit__media{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 36px 80px rgba(38,50,69,.24); aspect-ratio:4/5; background:linear-gradient(140deg,#263245,#5C7E97); }
#mx-exp .mx-kit__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
/* cta */
#mx-exp .mx-cta{ position:relative; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%,#2d3c52 0%,#1c2734 60%,#161f2a 100%); color:var(--platinum); }
#mx-exp .mx-cta__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#mx-exp .mx-cta__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
#mx-exp .mx-cta__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,31,42,.32),rgba(22,31,42,.62)); }
#mx-exp .mx-cta .mx-wrap{ position:relative; z-index:1; }
#mx-exp .mx-cta h2{ color:#fff; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(30px,5.2vw,70px); line-height:1.05; letter-spacing:-.025em; text-align:center; max-width:30ch; margin:0 auto; text-shadow:0 2px 30px rgba(20,28,40,.5); }
#mx-exp .mx-cta__sub{ margin:22px auto 0; max-width:50ch; text-align:center; font:400 clamp(16px,1.9vw,20px)/1.55 var(--sans); color:rgba(240,240,240,.84); }
#mx-exp .mx-form{ margin:clamp(36px,6vh,52px) auto 0; max-width:600px; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
#mx-exp .mx-form .mx-full{ grid-column:1/-1; }
#mx-exp .mx-field label{ display:block; font:600 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:rgba(240,240,240,.55); margin-bottom:8px; }
#mx-exp .mx-field input,#mx-exp .mx-field select,#mx-exp .mx-field textarea{ width:100%; padding:15px 17px; border-radius:13px; border:1px solid rgba(240,240,240,.18);
background:rgba(240,240,240,.06); color:var(--platinum); font:500 16px/1.3 var(--sans); outline:none; transition:border-color .3s, box-shadow .3s; }
#mx-exp .mx-field textarea{ resize:vertical; min-height:82px; }
#mx-exp .mx-field input::placeholder,#mx-exp .mx-field textarea::placeholder{ color:rgba(240,240,240,.4); }
#mx-exp .mx-field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 15px center; background-size:18px; padding-right:42px; }
#mx-exp .mx-field input:focus,#mx-exp .mx-field select:focus,#mx-exp .mx-field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,167,193,.25); }
#mx-exp .mx-form .mx-btn{ width:100%; padding:17px; }
#mx-exp .mx-micro{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; font:600 13px/1.3 var(--sans); color:rgba(240,240,240,.6); }
#mx-exp .mx-micro span{ display:inline-flex; align-items:center; gap:7px; }
#mx-exp .mx-done{ text-align:center; padding:clamp(32px,5vw,52px); border:1px solid rgba(127,167,193,.4); border-radius:22px; max-width:600px; margin:clamp(36px,6vh,52px) auto 0; background:rgba(240,240,240,.04); }
#mx-exp .mx-done h3{ font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.4vw,38px); margin-bottom:12px; }
#mx-exp .mx-done p{ font:400 16px/1.55 var(--sans); color:rgba(240,240,240,.78); }
/* faq */
#mx-exp .mx-faq{ margin-top:clamp(32px,5vh,48px); border-top:1px solid rgba(38,50,69,.14); }
#mx-exp .mx-faq__item{ border-bottom:1px solid rgba(38,50,69,.14); }
#mx-exp .mx-faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 46px 22px 0; position:relative; color:var(--ink);
font:600 clamp(16px,1.9vw,20px)/1.35 var(--sans); letter-spacing:-.01em; }
#mx-exp .mx-faq__q::after{ content:""; position:absolute; right:4px; top:50%; width:14px; height:14px; transform:translateY(-50%);
background:no-repeat center/contain url("data:image/svg+xml;utf8,");
transition:transform .4s cubic-bezier(.16,1,.3,1); }
#mx-exp .mx-faq__item.mx-open .mx-faq__q::after{ transform:translateY(-50%) rotate(135deg); }
#mx-exp .mx-faq__a{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1); }
#mx-exp .mx-faq__a p{ padding:0 0 24px; max-width:64ch; font:400 clamp(15px,1.7vw,17px)/1.62 var(--sans); color:rgba(38,50,69,.7); }
/* footer del bloque */
#mx-exp .mx-foot{ background:linear-gradient(180deg,#A9C4D5 0%,#CBD9E4 45%,#F0F0F0 100%); color:var(--ink); padding:clamp(44px,7vh,80px) 0 36px; }
#mx-exp .mx-foot__top{ display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; padding-bottom:32px; border-bottom:1px solid rgba(38,50,69,.16); }
#mx-exp .mx-foot__top img{ width:120px; height:auto; }
#mx-exp .mx-foot__bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:26px; font:500 13px/1.4 var(--sans); color:rgba(38,50,69,.6); }
/* reveals */
#mx-exp.mx-js [data-mx-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
#mx-exp.mx-js [data-mx-reveal].mx-in{ opacity:1; transform:none; }
#mx-exp.mx-js [data-mx-stagger]>*{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
#mx-exp.mx-js [data-mx-stagger].mx-in>*{ opacity:1; transform:none; }
#mx-exp.mx-js [data-mx-stagger].mx-in>*:nth-child(2){ transition-delay:.07s; }
#mx-exp.mx-js [data-mx-stagger].mx-in>*:nth-child(3){ transition-delay:.14s; }
#mx-exp.mx-js [data-mx-stagger].mx-in>*:nth-child(4){ transition-delay:.21s; }
#mx-exp.mx-js [data-mx-stagger].mx-in>*:nth-child(5){ transition-delay:.28s; }
#mx-exp.mx-js [data-mx-stagger].mx-in>*:nth-child(6){ transition-delay:.35s; }
#mx-exp.mx-js .mx-word{ display:inline-block; opacity:0; transform:translateY(42px) rotate(2deg); }
#mx-exp.mx-js .mx-word.mx-in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
@media(max-width:880px){ #mx-exp .mx-sol__grid,#mx-exp .mx-kit__grid{ grid-template-columns:1fr; gap:36px; } }
@media(max-width:860px){ #mx-exp .mx-bgrid,#mx-exp .mx-ucg{ grid-template-columns:repeat(2,1fr); } #mx-exp .mx-steps{ grid-template-columns:repeat(2,1fr); gap:26px; } }
@media(max-width:520px){ #mx-exp .mx-bgrid,#mx-exp .mx-ucg,#mx-exp .mx-steps{ grid-template-columns:1fr; } }
@media(max-width:540px){ #mx-exp .mx-form{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
#mx-exp.mx-js [data-mx-reveal],#mx-exp.mx-js [data-mx-stagger]>*,#mx-exp.mx-js .mx-word{ opacity:1 !important; transform:none !important; transition:none !important; }
#mx-exp .mx-device{ animation:none !important; }
}