.mockup-aprender-idioma{--blue:#174b7a;--accent:#4678a9;--soft:#edf3fa;--ink:#172331;--muted:#5e6977;--line:#d9e2e5;--paper:#f5f7f6;--cream:#fff8e2;--mint:#d9eee6}.mockup-aprender-idioma *{box-sizing:border-box}.mockup-aprender-idioma{margin:0;font:16px/1.45 Inter,system-ui,sans-serif;color:var(--ink);background:#fff}.mockup-aprender-idioma button,.mockup-aprender-idioma input,.mockup-aprender-idioma select{font:inherit}.mockup-aprender-idioma .head{height:74px;padding:0 max(22px,calc((100% - 1180px)/2));display:flex;align-items:center;gap:27px;border-bottom:1px solid var(--line)}.mockup-aprender-idioma .brand{font-weight:950;font-size:19px}.mockup-aprender-idioma .brand b{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:10px;border-radius:9px;background:var(--blue);color:#fff}.mockup-aprender-idioma .nav{display:flex;gap:25px;color:#505b68;font-size:14px;font-weight:750}.mockup-aprender-idioma .search{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 15px}.mockup-aprender-idioma .hero{padding:50px 22px 45px;background:linear-gradient(126deg,#fbfcfa 0 61%,var(--soft) 61%)}.mockup-aprender-idioma .hero-grid,.mockup-aprender-idioma .wrap{max-width:1180px;margin:auto}.mockup-aprender-idioma .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:57px;align-items:center}.mockup-aprender-idioma .crumb{font-size:14px;color:var(--blue);font-weight:850}.mockup-aprender-idioma .eyebrow{margin-top:27px;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:950}.mockup-aprender-idioma .hero h1{font-size:clamp(43px,5vw,67px);line-height:.98;letter-spacing:-.05em;margin:10px 0 19px}.mockup-aprender-idioma .lead{font-size:19px;color:var(--muted);max-width:650px}.mockup-aprender-idioma .pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.mockup-aprender-idioma .pills span{padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:800}.mockup-aprender-idioma .art{height:330px;border:1px solid color-mix(in srgb,var(--accent),#fff 62%);background:#fff;border-radius:24px;box-shadow:0 24px 50px #17374a18;position:relative;overflow:hidden;display:grid;place-items:center}.mockup-aprender-idioma .phscale{position:absolute;left:12%;right:12%;bottom:38px;height:24px;border-radius:99px;background:linear-gradient(90deg,#d4424d,#ea943a,#eadf55,#58ad67,#3c83b8,#7251a2);display:flex;justify-content:space-between;padding:30px 0 0;font-size:10px;font-weight:850}.mockup-aprender-idioma .tube{width:65px;height:170px;border:6px solid var(--blue);border-top:0;border-radius:0 0 35px 35px;position:absolute;top:40px}.mockup-aprender-idioma .tube i{position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--accent);border-radius:0 0 27px 27px}.mockup-aprender-idioma .orbit:before,.mockup-aprender-idioma .orbit:after{content:"";position:absolute;border:1px solid #6684ad66;border-radius:50%}.mockup-aprender-idioma .orbit:before{width:210px;height:210px}.mockup-aprender-idioma .orbit:after{width:300px;height:300px}.mockup-aprender-idioma .sun{width:65px;height:65px;background:#f1bd48;border-radius:50%;box-shadow:0 0 35px #e9a52a99}.mockup-aprender-idioma .planet{position:absolute;border-radius:50%;background:var(--accent)}.mockup-aprender-idioma .p1{width:20px;height:20px;left:28%;top:29%}.mockup-aprender-idioma .p2{width:30px;height:30px;right:18%;top:45%}.mockup-aprender-idioma .p3{width:25px;height:25px;left:32%;bottom:13%}.mockup-aprender-idioma .ship{position:absolute;right:26%;top:25%;font-size:38px;color:var(--blue);transform:rotate(-25deg)}.mockup-aprender-idioma .moon .earth{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7ec9a4 0 20%,#3987af 22% 100%)}.mockup-aprender-idioma .moon .luna{position:absolute;width:62px;height:62px;border-radius:50%;right:16%;top:20%;background:#eee6cf;box-shadow:inset -18px 3px #aaa49a}.mockup-aprender-idioma .tide{position:absolute;left:12%;right:12%;bottom:34px;height:35px;background:repeating-radial-gradient(ellipse at 20px 30px,#3994b9 0 12px,transparent 13px 25px)}.mockup-aprender-idioma .coffee .cup{font-size:110px}.mockup-aprender-idioma .steam{position:absolute;top:50px;width:18px;height:80px;border-left:5px solid var(--accent);border-radius:50%}.mockup-aprender-idioma .s1{left:43%}.mockup-aprender-idioma .s2{left:55%;top:65px}.mockup-aprender-idioma .beer .glass{width:130px;height:205px;border:7px solid var(--blue);border-top-width:12px;border-radius:12px 12px 35px 35px;position:relative;overflow:hidden}.mockup-aprender-idioma .beer .glass i{position:absolute;inset:35px 0 0;background:#e5a63f}.mockup-aprender-idioma .beer .glass b{position:absolute;left:0;right:0;top:18px;height:38px;background:#fff4d5;border-radius:50%;z-index:2}.mockup-aprender-idioma .beer>span{position:absolute;bottom:20px;font-weight:950;color:var(--blue)}.mockup-aprender-idioma .cup{grid-template-columns:1fr auto 1fr;gap:18px}.mockup-aprender-idioma .measurecup{width:125px;height:155px;border:6px solid var(--blue);border-radius:10px 10px 35px 35px;position:relative}.mockup-aprender-idioma .measurecup i{position:absolute;inset:45% 0 0;background:var(--accent)}.mockup-aprender-idioma .measurecup b{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:12px}.mockup-aprender-idioma .cup>span{font-size:45px;color:var(--accent)}.mockup-aprender-idioma .weight{padding:25px 18px;background:var(--soft);border-radius:18px;font-size:25px;font-weight:950}.mockup-aprender-idioma .wall{display:flex;width:240px;height:210px;border:8px solid var(--blue)}.mockup-aprender-idioma .wall i{flex:1;border-right:2px solid #fff;background:repeating-linear-gradient(45deg,var(--accent) 0 8px,var(--soft) 9px 17px)}.mockup-aprender-idioma .cold,.mockup-aprender-idioma .warm{position:absolute;font-size:25px;font-weight:950}.mockup-aprender-idioma .cold{left:18px;color:#3182a0}.mockup-aprender-idioma .warm{right:18px;color:#c26734}.mockup-aprender-idioma .dial{width:215px;height:215px;border-radius:50%;border:18px solid var(--blue);display:grid;place-items:center;position:relative}.mockup-aprender-idioma .dial i{position:absolute;width:7px;height:75px;background:var(--accent);bottom:50%;transform-origin:bottom;transform:rotate(35deg)}.mockup-aprender-idioma .dial b{font-size:52px;margin-top:30px}.mockup-aprender-idioma .dial small{position:absolute;bottom:38px}.mockup-aprender-idioma .clockface{width:210px;height:210px;border:12px solid var(--blue);border-radius:50%;position:relative}.mockup-aprender-idioma .clockface i,.mockup-aprender-idioma .clockface b{position:absolute;left:50%;bottom:50%;width:7px;background:var(--accent);transform-origin:bottom}.mockup-aprender-idioma .clockface i{height:72px;transform:rotate(90deg)}.mockup-aprender-idioma .clockface b{height:55px;transform:rotate(10deg)}.mockup-aprender-idioma .clock>span{position:absolute;bottom:24px;font-size:23px;font-weight:950}.mockup-aprender-idioma .drop i{width:150px;height:190px;background:var(--accent);border-radius:70% 30%;transform:rotate(45deg)}.mockup-aprender-idioma .drop span{position:absolute;color:#fff;font-size:32px;font-weight:950}.mockup-aprender-idioma .bubble{position:absolute;padding:18px 24px;border-radius:24px;background:var(--soft);border:2px solid var(--accent);font-weight:950;font-size:23px}.mockup-aprender-idioma .bubble.a{left:9%;top:20%}.mockup-aprender-idioma .bubble.b{right:9%;top:34%}.mockup-aprender-idioma .bubble.c{left:28%;bottom:16%}.mockup-aprender-idioma .pages{width:240px;height:175px;display:flex;perspective:500px}.mockup-aprender-idioma .pages i{width:50%;background:#fff;border:6px solid var(--blue)}.mockup-aprender-idioma .pages i:first-child{transform:rotateY(14deg)}.mockup-aprender-idioma .pages i:last-child{transform:rotateY(-14deg)}.mockup-aprender-idioma .book>span{position:absolute;bottom:27px;font-weight:950;color:var(--accent)}.mockup-aprender-idioma .sheet{width:180px;height:230px;border:5px solid var(--blue);background:#fff;border-radius:12px;padding:25px}.mockup-aprender-idioma .sheet b{font-size:55px;color:var(--accent)}.mockup-aprender-idioma .sheet i{display:block;border-top:6px solid #cbd7db;margin-top:17px}.mockup-aprender-idioma .timer{position:absolute;right:22px;bottom:24px;padding:12px;background:var(--blue);color:#fff;border-radius:10px;font-weight:950}.mockup-aprender-idioma .target{width:220px;height:220px;border:24px solid var(--accent);border-radius:50%;box-shadow:inset 0 0 0 26px #fff,inset 0 0 0 48px var(--blue);display:grid;place-items:center}.mockup-aprender-idioma .target b{font-size:44px;background:#fff;border-radius:50%;padding:18px}.mockup-aprender-idioma .parrilla{width:245px;height:160px;border:10px solid var(--blue);border-radius:18px;display:flex;gap:12px;padding:28px}.mockup-aprender-idioma .parrilla i{flex:1;border-radius:30px;background:var(--accent)}.mockup-aprender-idioma .fire{position:absolute;bottom:12px;font-size:60px;color:#e78a35}.mockup-aprender-idioma .timeline .line{position:absolute;left:12%;right:12%;top:50%;height:8px;background:var(--blue);display:flex;justify-content:space-between}.mockup-aprender-idioma .timeline .line i{width:29px;height:29px;border:7px solid var(--blue);background:#fff;border-radius:50%;transform:translateY(-11px)}.mockup-aprender-idioma .truck{position:absolute;left:30%;top:38%;font-size:50px;color:var(--accent)}.mockup-aprender-idioma .donut{width:220px;height:220px;border-radius:50%;background:conic-gradient(var(--accent) 0 40%,#e7af53 40% 65%,#4d98a1 65% 80%,#dce4e4 80%);position:relative}.mockup-aprender-idioma .donut:after{content:"";position:absolute;inset:55px;background:#fff;border-radius:50%}.mockup-aprender-idioma .budget>span{position:absolute;font-size:50px;font-weight:950;color:var(--blue)}.mockup-aprender-idioma .tool{padding:62px 22px}.mockup-aprender-idioma .tool-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:23px}.mockup-aprender-idioma .kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:950}.mockup-aprender-idioma .tool h2,.mockup-aprender-idioma .guide h2{font-size:37px;letter-spacing:-.04em;margin:7px 0}.mockup-aprender-idioma .tool-head p{max-width:510px;color:var(--muted);margin:0}.mockup-aprender-idioma .workspace{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}.mockup-aprender-idioma .panel{border-radius:24px;padding:27px}.mockup-aprender-idioma .form{border:1px solid var(--line);box-shadow:0 16px 40px #18374a0c}.mockup-aprender-idioma .panel h3{font-size:21px;margin:0 0 5px}.mockup-aprender-idioma .hint{color:var(--muted);font-size:14px;margin:0 0 20px}.mockup-aprender-idioma .fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.mockup-aprender-idioma .field{margin-bottom:2px}.mockup-aprender-idioma .field label{display:flex;justify-content:space-between;font-size:13px;font-weight:850;margin-bottom:7px}.mockup-aprender-idioma .field output{color:var(--accent)}.mockup-aprender-idioma input,.mockup-aprender-idioma select{width:100%;min-height:49px;border:1px solid #ccd7da;border-radius:12px;background:#fff;padding:12px 14px;color:var(--ink)}.mockup-aprender-idioma input[type=range]{padding:0;accent-color:var(--accent)}.mockup-aprender-idioma .actions{display:flex;gap:9px;margin-top:21px}.mockup-aprender-idioma .primary{flex:1;border:0;border-radius:12px;background:var(--blue);color:#fff;padding:14px;font-weight:900;cursor:pointer}.mockup-aprender-idioma .reset{border:1px solid #d7aa58;border-radius:12px;background:#fff;color:#654a1f;padding:13px 16px;font-weight:850;cursor:pointer}.mockup-aprender-idioma .result{background:linear-gradient(145deg,var(--blue),color-mix(in srgb,var(--blue),var(--accent) 35%));color:#fff;position:relative;overflow:hidden}.mockup-aprender-idioma .badge{display:inline-block;padding:7px 10px;border-radius:99px;background:var(--mint);color:#174f40;font-size:12px;font-weight:950}.mockup-aprender-idioma .big{font-size:48px;line-height:1;font-weight:950;letter-spacing:-.05em;margin:14px 0 5px}.mockup-aprender-idioma .caption{color:#dceaf0;font-size:14px}.mockup-aprender-idioma .meter{height:13px;border-radius:99px;background:#ffffff2d;margin:24px 0;position:relative}.mockup-aprender-idioma .meter i{position:absolute;left:var(--position);top:50%;width:24px;height:24px;border:5px solid #fff;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);transition:.25s}.mockup-aprender-idioma .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mockup-aprender-idioma .metric{padding:13px;border:1px solid #ffffff2b;background:#ffffff0e;border-radius:13px}.mockup-aprender-idioma .metric small{display:block;color:#dceaf0;font-size:10px}.mockup-aprender-idioma .metric b{font-size:16px}.mockup-aprender-idioma .note{margin-top:17px;padding:14px 15px;border-radius:12px;background:var(--cream);color:#58461f;font-size:13px}.mockup-aprender-idioma .guide{padding:65px 22px;background:var(--paper)}.mockup-aprender-idioma .guide-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px}.mockup-aprender-idioma .guide p{color:var(--muted)}.mockup-aprender-idioma .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.mockup-aprender-idioma .step{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.mockup-aprender-idioma .step b{display:block;color:var(--accent);margin-bottom:5px}.mockup-aprender-idioma .step span{font-size:14px;color:var(--muted)}.mockup-aprender-idioma .foot{padding:30px;text-align:center;border-top:1px solid var(--line);color:var(--muted)}@media(max-width:850px){.mockup-aprender-idioma .nav{display:none}.mockup-aprender-idioma .hero-grid,.mockup-aprender-idioma .workspace,.mockup-aprender-idioma .guide-grid{grid-template-columns:1fr}.mockup-aprender-idioma .tool-head{flex-direction:column;align-items:start}}@media(max-width:550px){.mockup-aprender-idioma .fields,.mockup-aprender-idioma .metrics,.mockup-aprender-idioma .steps{grid-template-columns:1fr}.mockup-aprender-idioma .hero h1{font-size:43px}.mockup-aprender-idioma .actions{flex-direction:column}.mockup-aprender-idioma .art{height:290px}}.mockup-aprender-idioma{width:100%;overflow:hidden}.mockup-aprender-idioma .top,.mockup-aprender-idioma header.top{display:none!important}.mockup-aprender-idioma .foot{display:none!important}.mockup-aprender-idioma .support-real{width:min(1160px,calc(100% - 40px));margin:auto;padding:64px 0}.mockup-aprender-idioma .support-real-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}.mockup-aprender-idioma .support-real details{border-bottom:1px solid #dfe6ed;padding:14px 0}.mockup-aprender-idioma .support-real summary{cursor:pointer;font-weight:750}.mockup-aprender-idioma .support-real p{color:#52657b;line-height:1.65}.mockup-aprender-idioma :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,small,em,i,a,label,button,summary,li,th,td){color:inherit}.mockup-aprender-idioma input[type=number]{-moz-appearance:textfield;appearance:textfield}.mockup-aprender-idioma input[type=number]::-webkit-inner-spin-button,.mockup-aprender-idioma input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}@media(max-width:800px){.mockup-aprender-idioma .support-real-grid{grid-template-columns:1fr}}