@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/font-0569c822cab6.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/font-9bd8ba39c9d5.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/font-18e69125ce1f.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/font-8257aa2626c3.woff2") format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/font-a699af1dea30.woff2") format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/font-e45972c7e9f2.woff2") format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/font-87e867b52640.woff2") format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/font-6f49e1b28bce.woff2") format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/font-3f704e45d6b6.woff2") format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/font-05b877abde46.woff2") format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/font-f168ede1842d.woff2") format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/font-7ed5c1c49c73.woff2") format('woff2'); } :root{--ink:#1d1e20;--muted:#56585e;--blue:#4a6fa5;--gray:#93a3b3;--line:#e6e8eb;--paper:#f1f1f1;--font-primary:'Outfit',sans-serif;--font-secondary:'Inter',sans-serif;scroll-behavior:smooth;scroll-padding-top:100px} *{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:var(--font-secondary);font-size:16px;line-height:1.5}h1,h2,h3,h4{font-family:var(--font-primary);font-weight:600;line-height:1.3;margin:0 0 24px}h1{font-size:64px}h2{font-size:48px}h3{font-size:26px}p{margin:0 0 20px}a{color:inherit}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a,button{touch-action:manipulation}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.container{width:min(1224px,calc(100% - 56px));margin-inline:auto}.section{padding-block:80px}.center{text-align:center}.lead{max-width:650px;margin:0 auto 36px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9%}.button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:14px 38px;background:#56585e;color:#fff;text-decoration:none;border:0;border-radius:28px;font-weight:500;line-height:1.5;transition:background .2s,transform .2s}.button:hover{background:#222;transform:translateY(-2px)}.button.blue{background:var(--blue)}.button.blue:hover{background:#365580}.button-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.skip-link{position:fixed;top:-100px;left:16px;background:white;padding:12px;z-index:100}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:50;background:var(--paper);box-shadow:0 1px 0 #00000005}.header-inner{height:82px;max-width:1440px;padding:0 48px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.logo{display:block;width:66px}.logo img{width:66px;height:64px;object-fit:contain}.site-nav{display:flex;gap:26px;align-items:center}.site-nav a{text-decoration:none;position:relative;padding:8px 0;font-size:16px;white-space:nowrap}.site-nav a::after{content:'';position:absolute;bottom:3px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s}.site-nav a:hover::after,.site-nav a[aria-current]::after{transform:scaleX(1)}.socials{display:flex;justify-content:flex-end;gap:16px;align-items:center}.socials a{display:flex;align-items:center;justify-content:center;width:22px;height:28px}.socials svg{width:21px;height:21px;fill:currentColor}.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:8px}.menu-toggle span{height:2px;width:24px;background:var(--ink);display:block;margin:5px 0}.hero{position:relative;isolation:isolate;overflow:hidden;background:#3a444e;color:white;text-align:center}.hero-home{min-height:632px;padding:180px 24px 38px}.hero-bg,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero::after{content:'';position:absolute;inset:0;background:rgba(29,30,32,.45);z-index:-1}.hero h1{max-width:710px;margin:0 auto 20px}.hero p{max-width:530px;margin:0 auto 34px}.hero .button{min-width:194px}.hero-stars{font-size:24px;line-height:1.1;margin:28px 0 2px;letter-spacing:-2px}.hero-rating{font-size:14px;text-transform:uppercase}.video-toggle{position:absolute;bottom:18px;left:22px;width:34px;height:34px;border:1px solid #ffffff55;background:#0002;color:white;border-radius:50%;font-size:15px;display:grid;place-items:center}.mission h2{margin-bottom:36px}.mission h3{font-family:Inter,sans-serif;font-size:16px;margin:0 0 18px;font-weight:700}.mission .values{margin-top:22px}.wide-photo{width:100%;height:424px;object-fit:cover;border-radius:20px;margin-top:36px}.about{align-items:center}.about img{width:100%;height:496px;object-fit:cover;border-radius:20px}.services{background:#2a2a2a;color:white;text-align:center}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:68px;text-align:left}.service-card{border-radius:20px;overflow:hidden;background:#fff;color:#0d141a}.service-card img{width:100%;height:285px;object-fit:cover}.service-copy{padding:32px 42px 38px}.service-copy h3{font-size:18px;margin-bottom:14px}.service-copy p{margin:0}.jobs h2{margin-bottom:64px}.contact{position:relative;isolation:isolate;background:#32383c;color:#fff;text-align:center}.contact::before{content:'';position:absolute;inset:0;background:linear-gradient(#10161ddc,#10161de8),url("assets/contacto.jpg") center/cover;z-index:-1}.contact h2{max-width:640px;margin-inline:auto}.contact .lead{max-width:500px}.contact-form{width:min(568px,100%);margin:30px auto 0;text-align:left;display:grid;gap:18px}.contact-form label{font-size:14px;display:block;margin-bottom:7px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid #d8dadd;border-radius:0;background:#fff;color:#1d1e20;padding:15px 16px;min-height:52px;outline-offset:2px}.contact-form textarea{min-height:130px;resize:vertical}.contact-form .button{justify-self:start;background:var(--blue)}.form-note{font-size:13px;line-height:1.6;color:#e2e6eb;margin:0}.prepared-message{border:1px solid #ffffff40;border-radius:12px;padding:20px;background:#ffffff0c}.prepared-message[hidden]{display:none}.prepared-message pre{white-space:pre-wrap;font:inherit;font-size:14px;overflow-wrap:anywhere}.prepared-message .button{margin-top:8px}.whatsapp-float{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:#378969;display:grid;place-items:center;z-index:45;box-shadow:0 4px 18px #0003;color:white}.whatsapp-float svg{width:43px;height:43px;fill:currentColor}.site-footer{padding:32px 0;background:var(--paper);color:#56585e;font-size:13px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-right:65px}.footer-links{display:flex;gap:20px}.footer-links a{text-decoration:none}.footer-links a:hover{text-decoration:underline}.course-intro{padding-top:75px}.course-intro h1{font-size:48px;text-align:center}.course-intro .intro-copy{max-width:1000px;margin:30px auto 38px}.course-intro .intro-copy p{margin-bottom:12px}.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0}.gallery-trigger{display:block;padding:0;border:0;background:#f1f1f1;border-radius:8px;overflow:hidden;width:100%}.gallery-trigger img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.gallery-trigger:hover img{transform:scale(1.025)}.photo-gallery .gallery-trigger{aspect-ratio:1.75}.result-section{align-items:center;gap:6%}.result-section h2{font-size:32px}.result-section p{font-size:17px}.result-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start}.result-gallery .gallery-trigger{border-radius:3px}.result-gallery img{height:auto}.result-section .button{margin-top:12px}.course-includes{border-top:1px solid var(--line)}.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;margin-top:40px}.includes-column>img{width:100%;border-radius:16px;margin-bottom:30px}.includes-column h3{text-align:center;font-size:22px}.includes-column p{margin-bottom:16px;font-size:16px;line-height:1.6}.includes-column .button{margin-top:16px}.hero-languages{padding:80px 24px 72px;min-height:348px}.hero-languages h1{max-width:1200px}.hero-languages p{max-width:515px;margin-bottom:0}.languages-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1018px;gap:24px 60px;margin:40px auto 0}.languages-grid img{width:100%;border-radius:16px;aspect-ratio:1;object-fit:cover}.language-contact::before{background:linear-gradient(#121820b8,#121820c9),url("assets/photo-1601042879364-f3947d3f9c16-EFgHTxUkWpGsIXEV.png") center/cover}.language-contact h2{max-width:1100px}.embed-section{padding:40px 0}.lightbox{padding:0;border:0;background:transparent;color:white;width:min(1100px,95vw);max-height:94vh;overflow:visible}.lightbox::backdrop{background:#111e}.lightbox-inner{display:flex;flex-direction:column;align-items:center;position:relative}.lightbox img{max-height:80vh;max-width:100%;width:auto;object-fit:contain;background:#fff}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:25px;padding:12px}.lightbox button{background:#fff;color:#1d1e20;border:0;border-radius:30px;padding:8px 18px;min-height:42px}.lightbox-close{position:absolute;right:0;top:0;transform:translateY(-110%)}.gallery-caption{margin:0;font-size:14px;text-align:center}.motion-control{background:none;border:1px solid #d4d8dd;border-radius:30px;padding:7px 15px;color:#56585e;font-size:12px;margin:0 auto 14px;display:block}.spt-marquee:focus-within .spt-track{animation-play-state:paused}.prof-card:not(.is-active){visibility:hidden}.prof-dot{min-width:16px;min-height:16px}.embedded-brand{padding:40px 0}.contact-form :disabled{opacity:.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:1000px){.header-inner{padding:0 24px;gap:20px}.site-nav{gap:20px}.socials{gap:10px}.service-copy{padding:25px}.two-col{gap:40px}.service-card img{height:230px}.result-section{grid-template-columns:1fr}.result-gallery{grid-template-columns:repeat(4,1fr)}.languages-grid{gap:24px}.includes-grid{gap:35px}.hero h1{font-size:56px}} @media(max-width:760px){:root{scroll-padding-top:80px}.container{width:calc(100% - 40px)}.section{padding-block:56px}h1{font-size:40px}h2{font-size:32px}h3{font-size:22px}.header-inner{height:66px;padding:0 18px;display:flex;justify-content:space-between}.menu-toggle{display:block;order:0}.logo{order:1;width:50px}.logo img{width:50px;height:50px}.socials{order:2;width:44px;justify-content:center}.socials a:not(:last-child){display:none}.socials svg{width:24px;height:24px}.site-nav{position:absolute;top:66px;left:0;right:0;background:var(--paper);display:none;padding:18px 26px 26px;box-shadow:0 12px 20px #0001;flex-direction:column;gap:8px;align-items:stretch}.site-nav.is-open{display:flex}.site-nav a{padding:11px 0}.site-nav a::after{width:42px}.hero-home{padding:96px 24px 48px;min-height:610px}.hero h1{font-size:40px;max-width:380px;line-height:1.3}.hero p{font-size:18px;max-width:350px;line-height:1.3;margin-bottom:30px}.hero-home .button{min-width:155px;min-height:44px;padding:10px 25px}.hero-stars{font-size:28px;margin-top:26px}.hero-rating{font-size:12px}.two-col{grid-template-columns:1fr;gap:28px}.wide-photo{height:300px;margin-top:28px}.about img{height:auto;max-height:480px}.service-grid{grid-template-columns:1fr;gap:28px;margin:36px auto 0;max-width:480px}.service-card img{height:270px}.service-copy{padding:26px 30px}.jobs h2{margin-bottom:32px}.contact-form{gap:16px}.contact .lead{font-size:16px}.whatsapp-float{width:56px;height:56px;right:16px;bottom:18px}.whatsapp-float svg{width:37px;height:37px}.footer-inner{flex-direction:column;text-align:center;padding-right:0;align-items:center}.footer-links{gap:18px;margin-right:35px}.course-intro{padding-top:46px}.course-intro h1{font-size:32px}.course-intro .intro-copy{margin-top:24px}.photo-gallery{grid-template-columns:repeat(2,1fr);gap:10px}.photo-gallery .gallery-trigger{aspect-ratio:1.55}.button-row{gap:12px}.button-row .button{width:min(340px,100%)}.result-gallery{grid-template-columns:repeat(3,1fr);gap:10px}.result-section h2{font-size:28px}.includes-grid{grid-template-columns:1fr;gap:55px}.hero-languages{padding:72px 20px;min-height:340px}.hero-languages h1{max-width:550px}.hero-languages p{font-size:16px;line-height:1.5;max-width:500px}.languages-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0 0}.embed-section{padding:24px 0}.embedded-brand{padding:28px 0}.lightbox-close{right:10px}.lightbox-controls{gap:12px}.lightbox button{font-size:14px;padding:8px 14px}.result-section p{font-size:16px}.sp-wrap{padding-inline:0!important}.mission .two-col{gap:30px}} @media(max-width:380px){.hero h1{font-size:36px}.hero-home{padding-top:80px}.container{width:calc(100% - 32px)}.result-gallery{grid-template-columns:repeat(2,1fr)}.hero-rating{font-size:11px}.languages-grid{gap:12px}} @media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero video{display:none}} .job-form-fallback{text-align:center;padding:16px;margin:0;font-size:14px}.sp-marquee:focus-within .sp-track{animation-play-state:paused}.video-toggle[hidden]{display:none} .prof-section { --team-ink: #1d1e20; --team-muted: #56585e; --team-line: #e6e8eb; padding: clamp(56px, 6vw, 80px) 0; background: #fafafa; color: var(--team-ink); font-family: Inter, sans-serif; overflow: hidden; } .prof-wrap { width: min(1000px, calc(100% - var(--page-gutter, 24px) * 2)); margin-inline: auto; text-align: center; } .prof-label { margin: 0 0 12px; color: var(--team-muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .prof-h { margin: 0 0 20px; font: 600 clamp(1.875rem, 4vw, 2.625rem)/1.2 Outfit, sans-serif; } .prof-p { max-width: 660px; margin: 0 auto 36px; color: var(--team-muted); font-size: 16px; line-height: 1.7; } .prof-carousel { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; } .prof-card { --icon-color: #56585e; --icon-soft: #f0f1f3; --icon-line: #e2e3e6; position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 32px 24px; background: #fff; border: 1px solid var(--team-line); border-radius: 24px; box-shadow: 0 8px 30px #1d1e2006; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(16px) scale(.99); transition: opacity .5s, transform .5s, visibility .5s; } .prof-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; z-index: 1; } .prof-img-wrap { width: 104px; height: 104px; flex-shrink: 0; padding: 7px; border: 1px solid var(--icon-line); border-radius: 30%; background: #fff; box-shadow: 0 5px 16px #1d1e2008; } .prof-icon { display: block; width: 100%; height: 100%; padding: 20px; border-radius: 25%; background: linear-gradient(145deg, #fff, var(--icon-soft)); color: var(--icon-color); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .prof-img { width: 100%; height: 100%; border-radius: 25%; object-fit: cover; object-position: top; } .prof-info { width: 100%; text-align: center; } .prof-name { margin: 0 0 12px; font: 600 clamp(1.5rem, 3vw, 1.75rem)/1.2 Outfit, sans-serif; } .prof-role { display: inline-block; max-width: 100%; margin-bottom: 18px; padding: 7px 12px; border-radius: 12px; background: #56585e; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; } .prof-bio { margin: 0; color: var(--team-muted); font-size: 15px; line-height: 1.75; text-wrap: pretty; } .prof-bio strong { font-weight: 600; color: var(--team-ink); } .prof-card--siempre .prof-role { color: #56585e; background: #f0f1f3; } .prof-card--fundacion { --icon-color: #977118; --icon-soft: #fbf3dd; --icon-line: #ecdfbc; } .prof-card--fundacion .prof-role { color: #705211; background: #fbf3dd; } .prof-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px auto 0; } .prof-controls button { min-width: 44px; min-height: 44px; padding: 9px 15px; border: 1px solid #dedfe1; border-radius: 30px; background: #fff; color: #56585e; font-size: 13px; transition: background .2s, color .2s; } .prof-controls button:hover { background: #3d3f44; color: #fff; } .prof-count { min-width: 44px; color: #56585e; font-size: 12px; font-variant-numeric: tabular-nums; } .prof-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; max-width: 740px; margin: 18px auto 0; } .prof-dot { display: grid; place-items: center; width: 22px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; } .prof-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d5d6d9; transition: background .2s, transform .2s; } .prof-dot:hover::before { background: #93959a; } .prof-dot.is-active::before { background: #56585e; transform: scale(1.25); } @media (min-width: 768px) { .prof-card { flex-direction: row; padding: 40px; gap: 36px; } .prof-info { text-align: left; } .prof-img-wrap { width: 124px; height: 124px; } .prof-icon { padding: 25px; } } @media (max-width: 480px) { .prof-bio { text-align: left; } .prof-card { padding: 28px 22px; } } @media (prefers-reduced-motion: reduce) { .prof-card { transition: none; transform: none; } } #spq-unam, #spq-unam * { box-sizing: border-box; } #spq-unam { --navy: #34363B; --navy-soft: #42444A; --btn: #56585e; --btn-hover: #45474c; --accent: #ffffff; --soft: #f2f3f5; --ink: #1d1e20; --muted: #6b6e76; --line: #e3e5ea; --bg: #f6f7f9; --white: #fff; font-family: "DM Sans", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); width: 100%; max-width: 1140px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 24px); -webkit-text-size-adjust: 100%; } #spq-unam .spq-head { max-width: 860px; margin: 0 0 clamp(20px, 4vw, 30px); } #spq-unam h2.spq-title { font-family: "Outfit", "DM Sans", sans-serif; font-weight: 600; line-height: 1.18; margin: 0 0 14px; font-size: clamp(24px, 4.4vw, 34px); color: var(--ink); } #spq-unam .spq-sub { font-size: clamp(15px, 2.2vw, 17px); line-height: 1.65; color: #4a4d55; margin: 0; } #spq-unam .spq-sub strong { color: var(--ink); font-weight: 700; } #spq-unam .spq-card { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3.5vw, 32px); } #spq-unam .spq-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; } #spq-unam .spq-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #spq-unam label { font-size: 14px; font-weight: 600; color: var(--ink); } #spq-unam select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 52px; padding: 14px 44px 14px 16px; font-size: 16px; font-family: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B6E76' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; text-overflow: ellipsis; } #spq-unam select:focus { outline: none; border-color: #56585e; box-shadow: 0 0 0 3px rgba(86, 88, 94, 0.15); } #spq-unam select:disabled { color: #9a9da6; cursor: not-allowed; } #spq-unam .spq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 30px; border: 0; border-radius: 28px; background: var(--btn); color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; transition: color 0.2s, border-color 0.2s, background-color 0.2s; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #spq-unam .spq-btn:hover, #spq-unam a.spq-btn:hover, #spq-unam .spq-btn:active, #spq-unam a.spq-btn:active, #spq-unam .spq-btn:focus-visible { background: #000; color: #fff; } #spq-unam .spq-out { margin-top: clamp(18px, 3vw, 26px); } #spq-unam .spq-hint { display: flex; gap: 10px; align-items: flex-start; background: var(--white); border: 1px dashed var(--line); border-radius: 16px; padding: 18px; color: var(--muted); font-size: 15px; line-height: 1.55; } #spq-unam .spq-res-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin: 0 0 14px; } #spq-unam .spq-res-head h3 { font-family: "Outfit", "DM Sans", sans-serif; font-size: clamp(18px, 3vw, 22px); font-weight: 600; margin: 0; color: var(--ink); } #spq-unam .spq-tag { font-size: 13px; font-weight: 600; color: #4a4d55; background: var(--soft); border-radius: 999px; padding: 5px 12px; } #spq-unam .spq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } #spq-unam .spq-item { background: var(--navy); border-radius: 16px; padding: 20px; color: #fff; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.06); } #spq-unam .spq-item .spq-num { font-family: "Outfit", "DM Sans", sans-serif; font-size: 44px; line-height: 1; font-weight: 700; color: var(--accent); } #spq-unam .spq-item .spq-num small { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-left: 6px; } #spq-unam .spq-item .spq-pl { font-size: 15px; font-weight: 600; line-height: 1.35; } #spq-unam .spq-item .spq-mod { font-size: 13px; color: rgba(255, 255, 255, 0.7); } #spq-unam .spq-note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); } #spq-unam .spq-cta { margin-top: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } #spq-unam .spq-cta p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 600; max-width: 560px; } #spq-unam .spq-foot { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); } #spq-unam .spq-foot a { color: var(--navy); text-decoration: underline; } @media (max-width: 860px) { #spq-unam .spq-form { grid-template-columns: 1fr; } #spq-unam #spq-go { width: 100%; } #spq-unam .spq-cta .spq-btn { width: auto; max-width: 100%; align-self: center; padding: 13px 22px; font-size: 13.5px; letter-spacing: 0.01em; } #spq-unam .spq-cta { flex-direction: column; align-items: stretch; text-align: center; } #spq-unam .spq-cta p { max-width: none; } #spq-unam .spq-item .spq-num { font-size: 38px; } } @media (max-width: 400px) { #spq-unam .spq-card { border-radius: 16px; } #spq-unam .spq-grid { grid-template-columns: 1fr; } } #spe-unam,#spe-unam *{box-sizing:border-box;} #spe-unam{ --navy:#34363B; --navy-soft:#42444A; --btn:#56585E; --btn-hover:#45474C; --accent:#FFFFFF; --soft:#F2F3F5; --ink:#1D1E20; --muted:#6B6E76; --line:#E3E5EA; --bg:#F6F7F9; --white:#fff; font-family:'DM Sans','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--ink); width:100%; max-width:1140px; margin:0 auto; padding:clamp(24px,5vw,56px) clamp(16px,4vw,24px); -webkit-text-size-adjust:100%; } #spe-unam .spe-head{max-width:860px;margin:0 0 clamp(20px,4vw,30px);} #spe-unam h2.spe-title{font-family:'Outfit','DM Sans',sans-serif;font-weight:600;line-height:1.18;margin:0 0 14px; font-size:clamp(24px,4.4vw,34px);color:var(--ink);} #spe-unam .spe-sub{font-size:clamp(15px,2.2vw,17px);line-height:1.65;color:#4A4D55;margin:0;} #spe-unam .spe-sub strong{color:var(--ink);font-weight:700;} #spe-unam .spe-card{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3.5vw,32px);} #spe-unam .spe-form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;} #spe-unam .spe-field{display:flex;flex-direction:column;gap:8px;min-width:0;} #spe-unam label{font-size:14px;font-weight:600;color:var(--ink);} #spe-unam select{ -webkit-appearance:none;appearance:none;width:100%;min-height:52px;padding:14px 44px 14px 16px;font-size:16px; font-family:inherit;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B6E76' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;cursor:pointer;text-overflow:ellipsis; } #spe-unam select:focus{outline:none;border-color:#56585E;box-shadow:0 0 0 3px rgba(86,88,94,.15);} #spe-unam select:disabled{color:#9A9DA6;cursor:not-allowed;} #spe-unam .spe-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 30px;border:0; border-radius:28px;background:var(--btn);color:#fff;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer; text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation; } #spe-unam .spe-btn:hover,#spe-unam a.spe-btn:hover,#spe-unam .spe-btn:active,#spe-unam a.spe-btn:active,#spe-unam .spe-btn:focus-visible{background:#000;color:#fff;} #spe-unam .spe-out{margin-top:clamp(18px,3vw,26px);} #spe-unam .spe-hint{display:flex;gap:10px;align-items:flex-start;background:var(--white);border:1px dashed var(--line); border-radius:16px;padding:18px;color:var(--muted);font-size:15px;line-height:1.55;} #spe-unam .spe-res-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin:0 0 14px;} #spe-unam .spe-res-head h3{font-family:'Outfit','DM Sans',sans-serif;font-size:clamp(18px,3vw,22px);font-weight:600;margin:0;color:var(--ink);} #spe-unam .spe-tag{font-size:13px;font-weight:600;color:#4A4D55;background:var(--soft);border-radius:999px;padding:5px 12px;} #spe-unam .spe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;} #spe-unam .spe-item{background:var(--navy);border-radius:16px;padding:20px;color:#fff;display:flex;flex-direction:column;gap:6px; border:1px solid rgba(255,255,255,.06);} #spe-unam .spe-item .spe-num{font-family:'Outfit','DM Sans',sans-serif;font-size:44px;line-height:1;font-weight:700;color:var(--accent);} #spe-unam .spe-item .spe-num small{font-size:15px;font-weight:500;color:rgba(255,255,255,.7);margin-left:6px;} #spe-unam .spe-item .spe-pl{font-size:15px;font-weight:600;line-height:1.35;} #spe-unam .spe-item .spe-mod{font-size:13px;color:rgba(255,255,255,.7);} #spe-unam .spe-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted);} #spe-unam .spe-cta{margin-top:16px;background:var(--soft); border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-wrap:wrap;gap:16px; align-items:center;justify-content:space-between;} #spe-unam .spe-cta p{margin:0;font-size:16px;line-height:1.5;color:var(--ink);font-weight:600;max-width:560px;} #spe-unam .spe-foot{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);} @media (max-width:860px){ #spe-unam .spe-form{grid-template-columns:1fr;} #spe-unam #spe-go{width:100%;} #spe-unam .spe-cta .spe-btn{width:auto;max-width:100%;align-self:center;padding:13px 22px;font-size:13.5px;letter-spacing:.01em;} #spe-unam .spe-cta{flex-direction:column;align-items:stretch;text-align:center;} #spe-unam .spe-cta p{max-width:none;} #spe-unam .spe-item .spe-num{font-size:38px;} } @media (max-width:400px){ #spe-unam .spe-card{border-radius:16px;} #spe-unam .spe-grid{grid-template-columns:1fr;} } .site-header { transition: box-shadow .35s ease, background-color .35s ease; } .site-header.is-scrolled { background: #f1f1f1f5; box-shadow: 0 5px 28px #1d335117; } .site-nav a { transition: color .2s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--blue); } .site-nav a::after { transform-origin: left; transition: transform .3s ease; } .button, .sp-btn, .spt-btn, #spq-unam .spq-btn, #spe-unam .spe-btn, .helper-cta { background: #56585e; color: #fff; } .button, .sp-btn, .spt-btn, #spq-unam .spq-btn, #spe-unam .spe-btn, .helper-cta, .prof-controls button, .lightbox button, .motion-control { position: relative; overflow: hidden; isolation: isolate; transition: background .25s, color .25s, transform .25s, box-shadow .25s; } :is(.button, .sp-btn, .spt-btn, .spq-btn, .spe-btn, .helper-cta, .prof-controls button, .lightbox button, .motion-control)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, #ffffff40 48%, transparent 76%); transform: translateX(-130%); pointer-events: none; } :is(.button, .sp-btn, .spt-btn, .spq-btn, .spe-btn, .helper-cta, .prof-controls button, .lightbox button, .motion-control):not(:disabled):is(:hover, :focus-visible)::after { animation: surface-glint .8s ease-out both; } .button:not(:disabled):is(:hover, :focus-visible), .sp-btn:is(:hover, :focus-visible), .spt-btn:is(:hover, :focus-visible), #spq-unam .spq-btn:not(:disabled):is(:hover, :focus-visible, :active), #spe-unam .spe-btn:not(:disabled):is(:hover, :focus-visible, :active), .helper-cta:is(:hover, :focus-visible), .prof-controls button:is(:hover, :focus-visible), .lightbox button:is(:hover, :focus-visible), .motion-control:is(:hover, :focus-visible) { background: var(--hover-gray, #3d3f44); color: #fff; box-shadow: 0 9px 22px #22222220; } :is(.button, .sp-btn, .spt-btn, .spq-btn, .spe-btn, .helper-cta):not(:disabled):is(:hover, :focus-visible) { transform: translateY(-2px); } :is(.button, .sp-btn, .spt-btn, .spq-btn, .spe-btn, .helper-cta):active { transform: translateY(0) scale(.98); } @keyframes surface-glint { from { transform: translateX(-130%); } to { transform: translateX(130%); } } .service-card { transition: transform .35s ease, box-shadow .35s ease; } .service-card img, .languages-grid > img { transition: transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .service-card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px #1d335124; } .service-card:hover img { transform: scale(1.035); } .languages-grid > img:hover { transform: translateY(-5px); box-shadow: 0 16px 30px #1d335122; } .gallery-trigger img { transition: transform .65s cubic-bezier(.2,.7,.3,1), filter .4s; } .gallery-trigger:hover img { transform: scale(1.055); filter: saturate(1.06); } .socials a, .whatsapp-float { transition: transform .25s, box-shadow .25s; } .socials a:hover { transform: translateY(-3px); } .whatsapp-float:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 28px #123e3440; } .scroll-reveal { transition: opacity .65s ease var(--reveal-delay, 0ms), translate .65s cubic-bezier(.2,.7,.3,1) var(--reveal-delay, 0ms); } .reveal-pending { opacity: 0; translate: 0 24px; } .hero h1, .course-intro h1 { animation: entrance .8s both; } .hero > p, .hero-content > p, .course-intro > .container > p { animation: entrance .8s .1s both; } .hero > .button, .hero-content > .button { animation: entrance .8s .2s both; } .hero-stars, .hero-rating { animation: entrance .8s .28s both; } .lightbox[open] .lightbox-inner { animation: dialog-entrance .3s ease both; } .lightbox[open]::backdrop { animation: backdrop-entrance .3s ease both; } .site-nav.is-open { animation: menu-entrance .25s ease both; } @keyframes entrance { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes dialog-entrance { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } @keyframes backdrop-entrance { from { opacity: 0; } to { opacity: 1; } } @keyframes menu-entrance { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } } .page-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; background: #f8fafded; backdrop-filter: blur(14px); color: #4a6fa5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; } .page-loader.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .is-navigating { cursor: progress; } .loader-content { width: min(360px, 100%); text-align: center; transform: translateY(10px); transition: transform .3s; } .is-active .loader-content { transform: translateY(0); } .loader-brand { display: inline-flex; align-items: center; gap: 8px; color: #253d61; font-family: Outfit, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: .15em; } .loader-brand > span { width: 6px; height: 6px; background: #c6a96c; border-radius: 50%; } .puma-stage { margin: 16px auto 4px; width: min(300px, 100%); } .puma-runner { display: block; width: 100%; overflow: visible; } .puma-body { fill: currentColor; animation: puma-bound .5s ease-in-out infinite; } .puma-shadow { fill: #4a6fa51c; transform-origin: 172px 125px; animation: puma-shadow .5s ease-in-out infinite; } .puma-ground { opacity: .23; } .puma-speed { opacity: .3; animation: puma-speed .5s linear infinite; } .puma-tail { transform-origin: 104px 62px; animation: puma-tail .5s ease-in-out infinite; } .puma-leg { animation: puma-stride .5s ease-in-out infinite alternate; } .puma-leg-back { transform-origin: 114px 66px; } .puma-leg-back-far { transform-origin: 107px 67px; opacity: .48; animation-delay: -.5s; } .puma-leg-front { transform-origin: 184px 64px; animation-delay: -.5s; } .puma-leg-front-far { transform-origin: 189px 65px; opacity: .48; } .page-loader * { animation-play-state: paused; } .page-loader.is-active * { animation-play-state: running; } .loader-label { color: #536078; font-size: 16px; margin: 5px 0 22px; } .loader-track { width: 124px; height: 3px; margin: 0 auto; background: #4a6fa517; border-radius: 3px; overflow: hidden; } .loader-track > span { display: block; height: 100%; width: 40%; border-radius: inherit; background: #4a6fa5; animation: loader-track .9s ease-in-out infinite; } @keyframes puma-bound { 0%,100% { translate: 0 1px; } 50% { translate: 0 -5px; } } @keyframes puma-stride { from { rotate: -27deg; } to { rotate: 28deg; } } @keyframes puma-tail { 0%,100% { rotate: -6deg; } 50% { rotate: 7deg; } } @keyframes puma-shadow { 0%,100% { scale: 1 1; opacity: 1; } 50% { scale: .78 1; opacity: .6; } } @keyframes puma-speed { from { translate: 14px 0; opacity: 0; } 35% { opacity: .4; } to { translate: -12px 0; opacity: 0; } } @keyframes loader-track { from { translate: -110% 0; } to { translate: 350% 0; } } @media (hover: none) { .service-card:hover, .languages-grid > img:hover, .socials a:hover { transform: none; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .reveal-pending { opacity: 1; translate: none; } .page-loader, .loader-content, .scroll-reveal, .site-header, .button, .service-card, .gallery-trigger img { transition: none; } .page-loader *, .hero > *, .hero-content > *, .course-intro h1, .course-intro > .container > p, .lightbox[open] .lightbox-inner, .site-nav.is-open { animation: none; } .service-card:hover, .service-card:hover img, .gallery-trigger:hover img, .languages-grid > img:hover, .whatsapp-float:hover, .button:hover { transform: none; } } @media print { .page-loader { display: none; } .reveal-pending { opacity: 1; translate: none; } } .image-sheen { position: relative; display: block; overflow: hidden; border-radius: inherit; isolation: isolate; } .image-sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, #ffffff38 48%, transparent 76%); transform: translateX(-130%); pointer-events: none; } .image-sheen img { display: block; } .wide-photo img { width: 100%; height: 100%; object-fit: cover; } .about .image-sheen { border-radius: 20px; } .includes-column > .image-sheen { width: 100%; border-radius: 16px; margin-bottom: 30px; } .languages-grid > .image-sheen { border-radius: 16px; transition: transform .35s, box-shadow .35s, opacity .65s ease var(--reveal-delay, 0ms), translate .65s ease var(--reveal-delay, 0ms); } @media (hover: hover) { .image-sheen:hover::after, .service-card:hover .image-sheen::after, .gallery-trigger:hover .image-sheen::after { animation: surface-glint .9s ease-out both; } .languages-grid > .image-sheen:hover { transform: translateY(-4px); box-shadow: 0 16px 30px #22222220; } } .gallery-trigger:focus-visible .image-sheen::after { animation: surface-glint .9s ease-out both; } @media (prefers-reduced-motion: reduce) { .image-sheen::after, :is(.button, .sp-btn, .spt-btn, .spq-btn, .spe-btn, .helper-cta, .prof-controls button, .lightbox button, .motion-control)::after { display: none; animation: none; } .languages-grid > .image-sheen:hover { transform: none; } } @media(hover:none) and (prefers-reduced-motion:no-preference), (max-width:760px) and (prefers-reduced-motion:no-preference){ .image-sheen.sheen-visible::after{animation:surface-glint 1.15s ease-out both} .image-sheen:active::after{animation:surface-glint 1s ease-out both} } :root { --blue: #56585e; --gray: #93959a; --hover-gray: #3d3f44; } .button.blue { background: #56585e; } .button:hover, .button.blue:hover, .sp-btn:hover, .spt-btn:hover, #spe-unam .spe-btn:hover, #spe-unam a.spe-btn:hover, #spq-unam .spq-btn:hover, #spq-unam a.spq-btn:hover { background: var(--hover-gray); } .button:hover { box-shadow: 0 9px 22px #22222226; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--hover-gray); } .page-loader { color: #56585e; background: #f8f8f8; } .page-loader.is-active { transition: none; } .loader-brand { color: #3d3f44; } .loader-brand > span, .loader-track > span { background: #56585e; } .loader-label { color: #56585e; } .loader-track { background: #56585e17; } .puma-shadow { fill: #56585e1c; } .puma-stage { position: relative; width: min(320px, 100%); aspect-ratio: 544 / 350; margin: 0 auto -2px; } .puma-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; animation: puma-film .6s steps(1, end) infinite; animation-delay: calc(var(--frame) * 100ms); } .page-loader .puma-frame { animation-play-state: paused; } .page-loader.is-active .puma-frame { animation-play-state: running; } @keyframes puma-film { 0% { opacity: 1; } 16.666%, 100% { opacity: 0; } } .site-header.is-scrolled { background: #f1f1f1; box-shadow: 0 5px 28px #22222217; } .logo img { transition: filter .25s ease, transform .25s ease; } .logo:is(:hover, :focus-visible, :active) img { filter: brightness(.72); transform: scale(1.025); } .socials a { color: #56585e; transition: color .2s ease, transform .25s ease; } .socials a[aria-label="WhatsApp"]:is(:hover, :focus-visible, :active) { color: #25d366; } .socials a[aria-label="Facebook"]:is(:hover, :focus-visible, :active) { color: #0866ff; } .socials a[aria-label="Instagram"]:is(:hover, :focus-visible, :active) { color: #e1306c; } .socials a[aria-label="Instagram"]:is(:hover, :focus-visible, :active) svg rect, .socials a[aria-label="Instagram"]:is(:hover, :focus-visible, :active) svg circle:not(:last-child) { stroke: url(#instagram-gradient); } .socials a[aria-label="TikTok"]:is(:hover, :focus-visible, :active) { color: #111; } .socials a[aria-label="TikTok"] svg { transition: filter .2s; } .socials a[aria-label="TikTok"]:is(:hover, :focus-visible, :active) svg { filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55); } .socials a:is(:focus-visible, :active) { transform: translateY(-3px); } .sp-unam:is(:hover, :focus-visible, :active) .sp-inst { color: #003d79; border-color: #c9a227; } .sp-ipn:is(:hover, :focus-visible, :active) .sp-inst { color: #7a1a2e; border-color: #7a1a2e; } .sp-uam:is(:hover, :focus-visible, :active) .sp-inst { color: #e8641b; border-color: #e8641b; } .course-intro { padding-top: 24px; } .course-intro h1, .course-intro .intro-copy { max-width: 812px; margin-inline: auto; text-align: center; } .course-intro .intro-copy { margin-top: 18px; } .course-intro .intro-copy p { margin-bottom: 10px; } .photo-gallery { max-width: 1105px; margin: 56px auto 36px; align-items: start; } .photo-gallery .gallery-trigger { position: relative; aspect-ratio: auto; overflow: visible; background: transparent; border-radius: 8px; transition: transform .35s ease, box-shadow .35s ease, opacity .65s ease var(--reveal-delay, 0ms), translate .65s ease var(--reveal-delay, 0ms); } .photo-gallery .gallery-trigger img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: inherit; transform: none; filter: none; } .photo-gallery .gallery-trigger:hover, .photo-gallery .gallery-trigger:focus-visible { transform: scale(1.035); z-index: 2; box-shadow: 0 12px 24px #22222226; } .photo-gallery .gallery-trigger:hover img { transform: none; filter: none; } .result-section p { font-size: 16px; } .result-gallery .gallery-trigger { position: relative; border-radius: 16px; overflow: visible; transition: transform .3s ease, box-shadow .3s ease, opacity .65s ease var(--reveal-delay, 0ms), translate .65s ease var(--reveal-delay, 0ms); } .result-gallery .gallery-trigger img { border-radius: inherit; transform: none; object-fit: contain; } .result-gallery .gallery-trigger:is(:hover, :focus-visible) { transform: scale(1.035); z-index: 2; box-shadow: 0 9px 24px #22222220; } .result-gallery .gallery-trigger:hover img { transform: none; } .course-includes > .container > .lead { max-width: 1018px; text-align: center; } .course-includes > .container > h3 { font-size: 18px; } .includes-grid { max-width: 1018px; margin-inline: auto; gap: 12%; } .includes-column p { line-height: 1.5; } .services > .container > .lead { max-width: 606px; } .hero-languages p { max-width: 503px; } .lightbox { max-height: calc(100dvh - 32px); overflow: auto; } .lightbox-inner { padding: 52px 0 0; } .lightbox img { max-height: calc(100dvh - 180px); width: auto; height: auto; object-fit: contain; border-radius: 16px; } .lightbox-close { top: 0; transform: none; } .whatsapp-float { background: #25d366; color: #fff; width: 60px; height: 60px; border: 1px solid #ffffff70; box-shadow: 0 8px 24px #128c7e2e; transition: transform .25s, background .25s, box-shadow .25s; } .whatsapp-float svg { width: 33px; height: 33px; } .whatsapp-float:hover { background: #20bd5a; box-shadow: 0 10px 28px #128c7e40; } .whatsapp-float.is-inviting::before { content: ''; position: absolute; inset: -5px; border: 1px solid #25d36688; border-radius: 50%; animation: chat-ring 1.6s ease-out 2; pointer-events: none; } .whatsapp-helper { position: fixed; right: 22px; bottom: 98px; width: 294px; max-width: calc(100vw - 32px); z-index: 44; transform-origin: bottom right; animation: helper-entrance .45s cubic-bezier(.2,.8,.2,1) both; } .whatsapp-helper[hidden] { display: none; } .helper-mascot { width: 156px; height: 156px; object-fit: contain; margin: 0 4px -22px auto; filter: drop-shadow(0 5px 7px #00000013); animation: mascot-hello 1.4s ease-in-out 2; transform-origin: 50% 90%; } .helper-card { position: relative; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; padding: 20px; box-shadow: 0 12px 44px #20202421; } .helper-card::after { content: ''; position: absolute; bottom: -7px; right: 22px; width: 14px; height: 14px; background: #fff; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; transform: rotate(45deg); } .helper-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #65666a; background: #f4f4f4; font-size: 23px; line-height: 1; } .helper-close:hover { color: #fff; background: #3d3f44; } .helper-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: #74767c; margin: 0 0 7px; } .helper-card h2 { font-family: Outfit, sans-serif; font-size: 23px; line-height: 1.2; margin: 0 0 8px; color: #292a2d; } .helper-card p:not(.helper-eyebrow) { font-size: 13px; line-height: 1.5; margin: 0 0 16px; color: #65666a; max-width: 240px; } .helper-cta { display: flex; justify-content: center; align-items: center; gap: 9px; border-radius: 25px; min-height: 42px; padding: 10px 16px; background: #56585e; color: white; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s; } .helper-cta:hover { background: #3d3f44; } .helper-cta svg { width: 18px; height: 18px; fill: currentColor; } body:has(.site-nav.is-open) .whatsapp-helper, body:has(.lightbox[open]) .whatsapp-helper, body.is-navigating .whatsapp-helper { visibility: hidden; pointer-events: none; } @keyframes chat-ring { from { scale: 1; opacity: .7; } to { scale: 1.35; opacity: 0; } } @keyframes helper-entrance { from { opacity: 0; translate: 0 20px; scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes mascot-hello { 0%,100% { rotate: 0deg; translate: 0 0; } 40% { rotate: -4deg; translate: 0 -5px; } 70% { rotate: 2deg; } } @media (max-width: 760px) { .header-inner { position: relative; } .logo { position: absolute; left: 50%; transform: translateX(-50%); } .container { width: calc(100% - 32px); } .site-nav { text-align: center; align-items: center; gap: 4px; padding-block: 16px 22px; background: #f1f1f1; } .site-nav a { display: block; width: min(100%, 300px); text-align: center; border-radius: 8px; } .site-nav a::after { left: calc(50% - 21px); } .site-nav a:hover { background: #e5e5e7; } .course-intro { padding-top: 20px; } .photo-gallery { gap: 12px; margin-top: 32px; } .result-section h2 { font-size: 24px; text-align: center; } .lightbox-controls { width: 100%; gap: 8px; } .lightbox-controls button { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 8px 12px; } .gallery-caption { font-size: 12px; } .includes-grid { gap: 55px; } .whatsapp-float { width: 56px; height: 56px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); } .whatsapp-helper { right: 16px; bottom: 90px; width: 270px; } .helper-mascot { width: 126px; height: 126px; margin-bottom: -18px; } .helper-card { padding: 18px; } .helper-card h2 { font-size: 21px; } } @media (hover: none) { .photo-gallery .gallery-trigger:hover, .result-gallery .gallery-trigger:hover { transform: none; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .photo-gallery .gallery-trigger:hover, .result-gallery .gallery-trigger:hover { transform: none; } .whatsapp-helper, .helper-mascot, .whatsapp-float::before { animation: none; } .puma-frame { animation: none; } .puma-frame:first-child { opacity: 1; } } @media print { .whatsapp-helper, .whatsapp-float, .prof-controls { display: none; } } :root { --nav-height: 82px; --announcement-height: 36px; --header-height: calc(var(--nav-height) + var(--announcement-height)); --page-gutter: clamp(20px, 4vw, 48px); --section-space: clamp(56px, 6vw, 88px); } .header-inner { min-height: var(--nav-height); height: auto; } :root { scroll-padding-top: calc(var(--header-height) + 18px); } .announcement-bar { display: flex; align-items: center; justify-content: center; min-height: var(--announcement-height); padding: 6px 16px; background: #151515; color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: .055em; text-align: center; text-decoration: none; } .announcement-bar:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; } .announcement-bar:focus-visible { outline-offset: -4px; outline-color: #fff; } .nav-links { display: flex; gap: 26px; align-items: center; } .site-nav .socials a { padding: 0; border-radius: 50%; } .site-nav .socials a::after { display: none; } @media (min-width: 761px) { .site-nav { display: contents; } } .container { width: min(1224px, calc(100% - var(--page-gutter) * 2)); } .section { padding-block: var(--section-space); } h1, h2, h3 { text-wrap: balance; } .two-col, .includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col > *, .includes-grid > *, .prof-info { min-width: 0; } .mission p, .about p, .intro-copy p, .includes-column p, .result-section p, .service-copy p { line-height: 1.75; text-wrap: pretty; } .mission h2 { max-width: 850px; } .mission h3 { margin-bottom: 14px; } .mission .values { margin-top: 32px; } .about p:last-child { margin-bottom: 0; } .service-grid { gap: 24px; } .service-copy { padding: clamp(24px, 3vw, 38px); } .service-card img { height: auto; aspect-ratio: 4 / 3; } .site-footer { padding-bottom: 40px; } .hero-home { min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); display: grid; place-items: center; padding: clamp(32px, 6vh, 72px) var(--page-gutter); } .hero-content { width: min(100%, 800px); margin-inline: auto; } .hero-home h1 { max-width: 760px; margin: 0 auto clamp(20px, 3vh, 28px); font-size: clamp(2.125rem, 1.25rem + 4.2vw, 4rem); line-height: 1.12; letter-spacing: -.025em; } .hero-home p { max-width: 550px; margin: 0 auto clamp(24px, 3.5vh, 36px); font-size: clamp(1rem, .9rem + .3vw, 1.125rem); line-height: 1.65; text-wrap: pretty; } .hero-home .button { min-height: 52px; padding: 14px 32px; } .hero-stars { font-size: 25px; margin: clamp(24px, 3.5vh, 36px) 0 7px; letter-spacing: 1px; } .hero-rating { font-size: clamp(.6875rem, .6rem + .25vw, .8125rem); line-height: 1.5; letter-spacing: .04em; text-wrap: balance; } .hero-home .hero-bg, .hero-home video { object-position: center; } .hero-home::after { background: linear-gradient(180deg, #1d1e2061, #1d1e207a 50%, #1d1e2099); } .video-toggle { width: 40px; height: 40px; } .course-intro { padding-top: clamp(40px, 5vw, 72px); } .course-intro h1 { font-size: clamp(2rem, 1.1rem + 3vw, 3rem); line-height: 1.2; } .course-intro .intro-copy { margin: 28px auto 0; max-width: 812px; } .course-intro .intro-copy p { margin-bottom: 20px; } .course-intro .intro-copy p:last-child { margin-bottom: 0; } .photo-gallery { gap: clamp(14px, 2vw, 24px); margin-top: clamp(36px, 5vw, 56px); } .result-section { gap: clamp(32px, 5vw, 72px); } .result-section h2 { font-size: clamp(1.625rem, 2.5vw, 2rem); line-height: 1.3; } .includes-grid { gap: clamp(40px, 7vw, 100px); } .includes-column p { margin-bottom: 22px; } .hero-languages { padding-block: clamp(56px, 7vw, 88px); } .hero-languages h1 { font-size: clamp(2.125rem, 1.25rem + 4.2vw, 4rem); line-height: 1.15; } .hero-languages p { line-height: 1.7; } .sp-wrap, .spt-wrap { width: min(1200px, calc(100% - var(--page-gutter) * 2)); padding-inline: 0; } .sp-p, .spt-p, .prof-p { line-height: 1.7; } .sp-h, .spt-h { margin-bottom: 20px; } @media (max-width: 1000px) { .nav-links { gap: 20px; } .result-section { grid-template-columns: minmax(0, 1fr); } .result-section > div:first-child { max-width: 720px; } } @media (max-width: 760px) { :root { --nav-height: 66px; --announcement-height: 32px; } .header-inner { padding-inline: 14px; } .site-nav { top: var(--nav-height); max-height: calc(100svh - var(--header-height)); overflow-y: auto; } @supports (height: 100dvh) { .site-nav { max-height: calc(100dvh - var(--header-height)); } } .nav-links { flex-direction: column; gap: 4px; width: 100%; } .site-nav .socials { width: min(100%, 300px); margin-top: 14px; padding-top: 14px; border-top: 1px solid #dddde0; justify-content: center; gap: 14px; } .site-nav .socials a, .site-nav .socials a:not(:last-child) { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; } .site-nav .socials a:hover { background: transparent; } .site-nav .socials svg { width: 23px; height: 23px; } .two-col, .includes-grid { grid-template-columns: minmax(0, 1fr); } .two-col, .mission .two-col { gap: 36px; } .mission h2, .about h2, .services h2 { font-size: clamp(1.875rem, 6.5vw, 2.5rem); line-height: 1.2; } .hero-home { padding-block: 48px; } .hero-home h1 { max-width: 520px; } .hero-home p { max-width: 420px; } .course-intro .intro-copy { text-align: left; } .course-intro .intro-copy p { margin-bottom: 24px; } .photo-gallery { gap: 14px; } .result-section h2 { text-align: left; } .result-section .button { margin-top: 8px; } .includes-grid { gap: 56px; } .service-copy { padding: 28px; } .service-copy h3 { font-size: 21px; } .wide-photo { height: auto; aspect-ratio: 4 / 3; } .about img { max-height: none; } .sp-h { font-size: clamp(1.875rem, 6.5vw, 2.5rem); } .footer-inner { padding-bottom: 44px; } .footer-links { margin-right: 0; flex-wrap: wrap; justify-content: center; } } @media (max-height: 540px) { .hero-home { padding-block: 28px; } .hero-home h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 16px; } .hero-home p { font-size: 1rem; margin-bottom: 20px; } .hero-stars { margin-top: 18px; font-size: 22px; } } .header-inner { position: relative; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; padding-inline: 32px; } @media (min-width: 1101px) { .header-inner > .logo { grid-column: 1; grid-row: 1; justify-self: start; } .nav-links { grid-column: 2; grid-row: 1; gap: 22px; } .nav-links a { font-size: 16px; white-space: nowrap; } .site-nav .socials { position: absolute; right: 94px; gap: 14px; width: auto; } .site-nav .socials svg { width: 20px; height: 20px; } .header-inner > .cart-toggle { position: absolute; right: 32px; } } .nav-links { justify-content: center; gap: 24px; } .cart-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 9px; border: 0; border-radius: 50%; color: #56585e; background: transparent; transition: background .2s, transform .2s; } .cart-toggle:hover { background: #e2e3e5; transform: translateY(-2px); } .cart-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cart-count { position: absolute; right: -2px; top: -2px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 12px; background: #56585e; color: #fff; font-size: 10px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { :root { --nav-height: 66px; --announcement-height: 32px; } .header-inner { position: relative; display: flex; justify-content: space-between; padding-inline: 18px; } .menu-toggle { display: block; order: 0; } .logo { position: absolute; left: 50%; transform: translateX(-50%); width: 50px; } .logo img { width: 50px; height: 50px; } .cart-toggle { order: 2; } .site-nav { position: absolute; top: 66px; left: 0; right: 0; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 16px 26px 22px; background: #f1f1f1; box-shadow: 0 12px 20px #0001; text-align: center; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; } .site-nav.is-open { display: flex; } .nav-links { flex-direction: column; gap: 4px; width: 100%; } .nav-links a { display: block; width: min(100%, 300px); padding: 11px 0; text-align: center; border-radius: 8px; } .nav-links a:hover { background: #e5e5e7; } .nav-links a::after { left: calc(50% - 21px); width: 42px; } .site-nav .socials { width: min(100%, 300px); margin-top: 14px; padding-top: 14px; border-top: 1px solid #dddde0; justify-content: center; gap: 14px; } .site-nav .socials a, .site-nav .socials a:not(:last-child) { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; } .site-nav .socials svg { width: 23px; height: 23px; } } .shop-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; padding-block: clamp(40px, 6vw, 80px); } .shop-sidebar h2 { font-size: 22px; padding-bottom: 16px; border-bottom: 1px solid #d9dade; margin-bottom: 14px; } .shop-categories { display: grid; justify-items: start; gap: 6px; } .shop-categories button { border: 0; background: transparent; padding: 8px 0; color: #56585e; text-align: left; font-size: 15px; } .shop-categories button[aria-pressed="true"] { color: #1d1e20; text-decoration: underline; text-underline-offset: 5px; } .shop-heading h1 { font-size: clamp(2.125rem, 4vw, 3rem); margin-bottom: 24px; text-align: left; } .shop-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; } .shop-search { flex: 1 1 220px; max-width: 350px; } .shop-search input { width: 100%; border: 1px solid #dddfe2; border-radius: 12px; padding: 12px 15px; background: white; color: #1d1e20; font-size: 15px; min-height: 46px; } .shop-sort { display: flex; align-items: center; gap: 10px; font-size: 13px; } .shop-sort select { min-height: 44px; max-width: 180px; border: 1px solid #d6d7db; border-radius: 24px; padding: 10px 12px; color: #56585e; background: white; font: inherit; } .shop-count { color: #777981; font-size: 13px; margin-bottom: 20px; } .shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } .shop-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e4e5e7; border-radius: 16px; overflow: hidden; background: white; min-width: 0; transition: box-shadow .3s, transform .3s; } .shop-card[hidden] { display: none; } .shop-card:hover { box-shadow: 0 12px 28px #22222212; transform: translateY(-3px); } .shop-card-image { display: block; aspect-ratio: 1; background: #f5f5f5; border-radius: 0; } .shop-card-image img { width: 100%; height: 100%; object-fit: contain; } .shop-badge { position: absolute; top: 12px; left: 10px; max-width: calc(100% - 20px); padding: 6px 9px; background: #28292bee; color: white; font-size: 10px; line-height: 1.5; letter-spacing: .04em; pointer-events: none; } .shop-card-copy { display: flex; flex: 1; flex-direction: column; padding: 18px 16px; } .shop-card h2 { font-size: 17px; line-height: 1.35; text-wrap: pretty; margin-bottom: 14px; } .shop-card h2 a { text-decoration: none; } .shop-card h2 a:hover { color: #65676d; } .shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: auto 0 18px; font-size: 17px; } .shop-price del { color: #92949b; font-size: 14px; } .shop-price small { font-size: 11px; font-weight: 400; } .shop-card .button { width: 100%; min-height: 46px; padding: 11px 12px; font-size: 13px; } .shop-empty { padding: 40px 20px; color: #56585e; text-align: center; border: 1px dashed #ddd; border-radius: 16px; } .product-page { padding-block: 36px 80px; } .breadcrumb { display: flex; gap: 12px; align-items: center; margin-bottom: 32px; font-size: 13px; color: #74767d; } .breadcrumb a { text-underline-offset: 4px; } .product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .product-gallery { position: sticky; top: calc(var(--header-height) + 24px); min-width: 0; } .product-main-image { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f7f7f7; border: 1px solid #e8e8e8; border-radius: 20px; } .product-thumbs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .product-thumbs button { padding: 0; border: 1px solid #e3e4e6; border-radius: 8px; background: #f6f6f6; overflow: hidden; } .product-thumbs button[aria-pressed="true"] { border-color: #56585e; outline: 1px solid #56585e; } .product-thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; } .product-info h1 { font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.2; text-align: left; text-wrap: pretty; margin-bottom: 18px; } .product-subtitle { font-size: 15px; line-height: 1.6; color: #56585e; } .product-info > .shop-price { margin: 24px 0; font-size: 26px; } .product-info .shop-price del { font-size: 18px; } .product-buy { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #e5e5e5; } .product-quantity { display: grid; gap: 7px; color: #56585e; font-size: 12px; } .product-quantity input { width: 80px; height: 52px; padding: 10px; border: 1px solid #d9dbdf; border-radius: 12px; font-size: 16px; background: white; } .product-buy .button { flex: 1; white-space: nowrap; padding-inline: 20px; } .product-description { font-size: 15px; line-height: 1.8; color: #56585e; overflow-wrap: break-word; } .product-description h2 { font-size: 24px; color: #1d1e20; } .product-description strong { color: #33353a; } .product-description p:empty { display: none; } .product-description p { margin-bottom: 20px; } .product-description a { text-underline-offset: 3px; } .cart-dialog { width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: #1d1e20; overflow: hidden; } .cart-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: cart-enter .25s ease-out; } .cart-dialog::backdrop { background: #15151570; backdrop-filter: blur(3px); } .cart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 26px 22px; border-bottom: 1px solid #e5e6e8; } .cart-eyebrow { font-size: 10px; letter-spacing: .16em; color: #74767d; margin: 0 0 7px; } .cart-head h2 { font-size: 28px; margin: 0; } .cart-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f2f2f3; color: #56585e; font-size: 28px; } .cart-close:hover { background: #dddfe2; } .cart-items { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 26px; } .cart-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid #ececef; } .cart-item-image img { width: 82px; height: 82px; object-fit: contain; border-radius: 10px; background: #f6f6f6; } .cart-item-title { display: block; font: 600 15px/1.4 Outfit, sans-serif; text-decoration: none; } .cart-unit-price { font-size: 12px; color: #777981; margin: 8px 0 12px; } .cart-item-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .cart-item-bottom > strong { font-size: 14px; font-variant-numeric: tabular-nums; } .quantity-control { display: inline-flex; align-items: center; border: 1px solid #dddfe2; border-radius: 9px; overflow: hidden; } .quantity-control button { width: 32px; min-height: 36px; border: 0; background: #f7f7f8; font-size: 20px; color: #56585e; } .quantity-control button:disabled { color: #b7b9be; cursor: default; } .quantity-control input { appearance: textfield; width: 36px; height: 36px; padding: 4px 0; text-align: center; border: 0; background: #fff; color: #1d1e20; font-size: 14px; } .quantity-control input::-webkit-inner-spin-button { appearance: none; } .cart-remove { display: block; padding: 7px 0; margin-top: 4px; border: 0; background: none; color: #7d7f87; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .cart-footer { padding: 22px 26px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e6e8; box-shadow: 0 -10px 24px #11111105; } .cart-footer[hidden] { display: none; } .cart-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .cart-total strong { font-size: 22px; font-family: Outfit, sans-serif; } .cart-total small { font-size: 11px; color: #777981; } .cart-checkout { width: 100%; } .cart-checkout:disabled { background: #dedfe2; color: #7a7d85; cursor: not-allowed; box-shadow: none; } .cart-payment-note { margin: 10px 0 0; color: #7d7f87; text-align: center; font-size: 12px; } .cart-product-payment { grid-column: 1 / -1; } .cart-pay { width: 100%; min-height: 46px; display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-radius: 12px; font-size: 13px; } .cart-quantity-note { padding: 12px 14px; border-radius: 10px; background: #f0f0f2; color: #56585e; font-size: 12px; line-height: 1.65; margin: 0 0 12px; } .cart-saved-note { margin: 10px 0 0; font-size: 11px; line-height: 1.55; color: #85878e; text-align: center; } .cart-continue { display: block; margin: 13px auto 0; padding: 6px 0; border: 0; color: #56585e; background: none; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; } .cart-empty { text-align: center; padding: 56px 0; } .cart-empty svg { width: 56px; height: 56px; margin: 0 auto 22px; fill: none; stroke: #93959a; stroke-width: 1.4; } .cart-empty h3 { font-size: 24px; margin-bottom: 12px; } .cart-empty p { color: #777981; font-size: 15px; line-height: 1.7; } body:has(.cart-dialog[open]) { overflow: hidden; } body:has(.cart-dialog[open]) .whatsapp-helper, body:has(.cart-dialog[open]) .whatsapp-float { visibility: hidden; } @keyframes cart-enter { from { translate: 100% 0; opacity: .7; } to { translate: 0 0; opacity: 1; } } @media (max-width: 1100px) { .shop-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; } .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .shop-layout { display: block; padding-top: 36px; } .shop-sidebar { margin-bottom: 28px; } .shop-sidebar h2 { font-size: 16px; padding-bottom: 12px; } .shop-categories { display: flex; flex-wrap: wrap; gap: 6px 18px; } .shop-categories button { font-size: 13px; } .shop-heading h1 { font-size: 32px; } .shop-tools { gap: 14px; } .shop-search { max-width: none; flex-basis: 100%; } .shop-sort { width: 100%; justify-content: space-between; } .shop-grid { gap: 24px 14px; } .shop-card-copy { padding: 17px 14px; } .product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .product-gallery { position: static; } .product-info h1 { font-size: 30px; } } @media (max-width: 480px) { .shop-grid { grid-template-columns: minmax(0, 1fr); } .shop-card h2 { font-size: 21px; } .shop-card-copy { padding: 22px; } .shop-card .button { font-size: 15px; } .shop-badge { font-size: 11px; } .cart-head { padding: 20px; } .cart-items { padding-inline: 18px; } .cart-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } .cart-item-image img { width: 64px; height: 64px; } .cart-footer { padding-inline: 20px; } .cart-total strong { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .cart-dialog[open] { animation: none; } } .product-single-unit{font-size:11px;color:#7a7d85;border:1px solid #e1e2e6;border-radius:12px;padding:15px 13px;min-height:50px}.product-exclusive-note{font-size:12px;color:#60636b;line-height:1.7;margin:0 0 16px;font-weight:550}.cart-selected-unit{font-size:11px;color:#777a83}.cart-quantity-note>strong{display:block;color:#50535b;font-size:12px;margin-bottom:7px}.cart-quantity-note p{margin:0;font-size:11px;line-height:1.8}.product-buy{align-items:center}@media(max-width:450px){.product-buy .product-single-unit{width:100%;text-align:center}} .sp-logo img { transition: filter .25s ease, scale .3s ease; } .sp-logo:is(:hover, :focus-visible) img { filter: grayscale(1) brightness(.67); scale: 1.035; } .services .service-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: stretch; max-width: none; } .services .service-card { display: grid; grid-template-columns: minmax(150px, .85fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; border: 1px solid #ffffff1c; background: #f5f5f5; color: #242529; } .services .service-card:first-child { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; } .services .service-card > .image-sheen { height: 100%; min-height: 210px; border-radius: 0; } .services .service-card img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } .services .service-card:first-child > .image-sheen { flex: 1; min-height: 260px; max-height: 360px; } .services .service-card:first-child img { aspect-ratio: 16 / 10; } .services .service-copy { display: flex; flex-direction: column; justify-content: center; padding: 28px; } .services .service-copy::before { content: '02'; font: 500 13px/1 Inter, sans-serif; letter-spacing: .1em; color: #909299; margin-bottom: 22px; } .services .service-card:first-child .service-copy::before { content: '01'; } .services .service-card:last-child .service-copy::before { content: '03'; } .services .service-copy h3 { margin-bottom: 14px; font-size: clamp(21px, 2vw, 28px); line-height: 1.2; } .services .service-copy p { margin: 0; font-size: 15px; line-height: 1.75; color: #5d5e64; } .services .service-card:first-child .service-copy { padding: 30px 36px 36px; } .services .service-card:first-child h3 { font-size: 32px; } .services .service-card:hover { box-shadow: 0 20px 44px #0003; } .helper-mascot { display: block; background-repeat: no-repeat; background-size: 300% 200%; background-position: 0 0; animation: puma-paw-wave 5s steps(1, end) infinite; } @keyframes puma-paw-wave { 0%, 24%, 100% { background-position: 0% 0%; } 3%, 15% { background-position: 50% 0%; } 6%, 18% { background-position: 100% 0%; } 9%, 21% { background-position: 0% 100%; } 12% { background-position: 50% 100%; } 23% { background-position: 100% 100%; } } .page-loader { transition-duration: .12s; } .loader-content { transition-duration: .16s; } .loader-graphic { display: none; } .page-loader[data-kind="courses"] [data-graphic="courses"], .page-loader[data-kind="languages"] [data-graphic="languages"], .page-loader[data-kind="shop"] [data-graphic="shop"], .page-loader[data-kind="campus"] [data-graphic="campus"], .page-loader[data-kind="home"] [data-graphic="home"] { display: block; } .symbol-stage, .language-stage { width: 180px; height: 116px; margin: 12px auto; position: relative; color: #56585e; } .symbol-stage svg { width: 94px; height: 94px; margin: 8px auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: section-arrive .65s ease-out both; } .language-stage svg { width: 160px; height: 110px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; } .language-stage span { position: absolute; top: 10px; left: -2px; border-radius: 12px 12px 2px 12px; background: #56585e; color: white; padding: 7px 11px; font: 500 14px/1.2 Outfit, sans-serif; animation: section-arrive .5s ease-out both; } .language-stage span:last-child { left: auto; right: -2px; top: 68px; border-radius: 12px 12px 12px 2px; } @keyframes section-arrive { from { opacity: .3; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 1050px) and (min-width: 701px) { .services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services .service-card:first-child { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .services .service-card { display: flex; flex-direction: column; } .services .service-card > .image-sheen { height: 240px; min-height: 0; } .services .service-card:first-child > .image-sheen { height: 100%; } } @media (max-width: 700px) { .services .service-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .services .service-card, .services .service-card:first-child { display: flex; flex-direction: column; grid-row: auto; grid-column: auto; } .services .service-card > .image-sheen, .services .service-card:first-child > .image-sheen { min-height: 0; height: auto; max-height: none; } .services .service-card img, .services .service-card:first-child img { aspect-ratio: 4 / 3; height: auto; } .services .service-copy, .services .service-card:first-child .service-copy { padding: 28px; } .services .service-copy h3, .services .service-card:first-child h3 { font-size: 26px; } .services .service-copy::before { margin-bottom: 18px; } } @media (max-width: 600px) { #sp-idiomas-mapa .sp-boton-idioma { min-height: 44px; font-size: 12px; } #sp-idiomas-mapa #sp-descripcion { font-size: 14px; line-height: 1.65; } #sp-idiomas-mapa .sp-panel-etiqueta { font-size: 10px; } #sp-idiomas-mapa .sp-indicacion-movil { font-size: 11px; padding-block: 10px; } #sp-idiomas-mapa .sp-panel-informacion { min-height: 205px; } } @media (max-width: 480px) { .languages-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } } @media (prefers-reduced-motion: reduce) { .helper-mascot, .symbol-stage svg, .language-stage span { animation: none; } .sp-logo:is(:hover, :focus-visible) img { scale: 1; } } .editorial-eyebrow { margin: 0 0 16px; font: 600 11px/1.5 Inter, sans-serif; letter-spacing: .15em; color: #74767d; } .storefront { background: #fafafa; padding: 40px 0 80px; } .shop-hero { display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border-radius: 28px; background: #34363b; color: #fff; } .shop-hero-copy { padding: clamp(30px, 4vw, 56px); } .shop-hero .editorial-eyebrow { color: #d5d6d9; } .shop-hero h1 { font-size: clamp(38px, 4vw, 58px); line-height: 1.05; letter-spacing: -.035em; text-align: left; margin: 0 0 22px; } .shop-hero-copy > p:not(.editorial-eyebrow) { max-width: 350px; font-size: 15px; line-height: 1.7; color: #e0e0e3; margin-bottom: 26px; } .shop-hero-link { display: inline-flex; align-items: center; gap: 28px; padding-bottom: 8px; border-bottom: 1px solid #ffffff60; text-decoration: none; font-size: 14px; font-weight: 500; } .shop-hero-link span { transition: translate .25s; } .shop-hero-link:hover span { translate: 0 4px; } .shop-hero-visual { position: relative; min-height: 300px; overflow: hidden; } .shop-hero-visual::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #16171980); pointer-events: none; } .shop-hero-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .shop-hero-visual > span { position: absolute; z-index: 1; left: 28px; bottom: 28px; right: 28px; font: 500 19px/1.3 Outfit, sans-serif; color: #fff; } .storefront .shop-layout { display: block; padding-block: 56px; } .shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .shop-heading .editorial-eyebrow { margin-bottom: 10px; } .shop-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.15; text-align: left; } .shop-heading .shop-count { margin: 0 0 3px; white-space: nowrap; } .shop-filter-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 30px; } .shop-categories { display: flex; flex-wrap: wrap; gap: 6px; } .shop-categories button { min-height: 42px; padding: 10px 16px; border: 1px solid #e1e2e5; border-radius: 24px; color: #64666d; background: #fff; font-size: 13px; transition: color .2s, background .2s, border-color .2s; } .shop-categories button[aria-pressed="true"] { color: #fff; background: #56585e; border-color: #56585e; text-decoration: none; } .shop-categories button:hover { background: #e9eaec; color: #33353a; } .shop-categories button[aria-pressed="true"]:hover { background: #3d3f44; color: #fff; } .shop-tools { margin: 0; gap: 10px; flex: 0 1 400px; flex-wrap: nowrap; } .shop-search { flex: 1; min-width: 150px; } .shop-search input { padding: 12px 14px; font-size: 13px; min-height: 44px; background: transparent; } .shop-sort { flex: 0 0 auto; } .shop-sort select { border-radius: 12px; font-size: 12px; background: transparent; } .storefront .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .storefront .shop-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); border-radius: 22px; background: #fff; overflow: hidden; } .storefront .shop-card[hidden] { display: none; } .storefront .shop-card-image { height: 100%; aspect-ratio: auto; padding: 16px; display: flex; align-items: center; background: #f0f0f2; } .storefront .shop-card-image img { height: auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 8px 16px #16171912; transition: scale .4s; } .storefront .shop-card:hover .shop-card-image img { scale: 1.025; } .storefront .shop-card-copy { padding: 26px 24px; min-width: 0; } .shop-product-type { margin: 0 0 12px; font-size: 10px; line-height: 1.4; color: #81838a; letter-spacing: .06em; text-transform: uppercase; } .shop-card h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; text-wrap: pretty; margin-bottom: 12px; } .shop-card h3 a { text-decoration: none; } .shop-card-summary { font-size: 12px; line-height: 1.65; color: #73757c; margin-bottom: 16px; } .storefront .shop-badge { position: static; align-self: start; background: #f0f0f2; color: #686a72; border-radius: 5px; padding: 4px 7px; font-size: 9px; max-width: 100%; margin: 0 0 20px; letter-spacing: .035em; } .storefront .shop-price { padding-top: 4px; font-size: 24px; gap: 7px; line-height: 1.3; margin-bottom: 20px; } .storefront .shop-price strong { font-family: Outfit, sans-serif; font-weight: 600; } .storefront .shop-price del { font-size: 12px; } .shop-card-actions { display: grid; gap: 14px; } .storefront .shop-card .button { min-height: 44px; border-radius: 12px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; } .shop-card .button > span { font-size: 20px; line-height: 1; font-weight: 400; } .shop-detail-link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: #6a6c74; font-size: 12px; padding: 2px 3px; } .shop-detail-link:hover { color: #303237; text-decoration: underline; text-underline-offset: 4px; } .shop-guidance { display: flex; justify-content: space-between; align-items: center; gap: 28px; border-top: 1px solid #e0e1e4; padding-top: 40px; } .shop-guidance .editorial-eyebrow { margin-bottom: 12px; } .shop-guidance h2 { font-size: 30px; margin-bottom: 12px; } .shop-guidance p:last-child { margin: 0; max-width: 480px; font-size: 14px; line-height: 1.7; color: #73757c; } .shop-guidance .button { flex-shrink: 0; font-size: 13px; gap: 20px; } .product-page { padding-top: 32px; } .product-info { padding: clamp(24px, 3vw, 40px); border: 1px solid #e7e8ea; border-radius: 24px; background: #fcfcfc; } .product-info h1 { font-size: clamp(26px, 2.5vw, 36px); } .product-buy { margin-bottom: 0; border-bottom: 0; padding-bottom: 14px; } .product-buy .button { font-size: 14px; min-height: 52px; border-radius: 12px; } .product-payment-note { color: #82848b; font-size: 12px; margin: 0 0 30px; padding-bottom: 28px; border-bottom: 1px solid #e3e4e6; } .product-description { font-size: 14px; } .product-thumbs { gap: 10px; } .product-thumbs button { min-height: 44px; } .blog-placeholder { min-height: calc(100svh - var(--header-height)); display: grid; place-items: center; padding-block: 64px; text-align: center; } .blog-placeholder img { margin: 0 auto 24px; } .blog-placeholder h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.035em; line-height: 1.1; margin-bottom: 18px; } .blog-placeholder p:not(.editorial-eyebrow) { color: #74767d; font-size: 16px; margin-bottom: 28px; } .blog-placeholder .button { font-size: 14px; } .footer-links { flex-wrap: wrap; justify-content: center; } .page-loader[data-kind="blog"] [data-graphic="blog"] { display: block; } .home-stage svg, .blog-stage svg { width: 146px; height: 120px; fill: #56585e; stroke: none; margin: 0 auto; animation-name: home-silhouette-enter; } @keyframes home-silhouette-enter { from { transform: translateY(6px) scale(.94); } to { transform: translateY(0) scale(1); } } .language-stage { width: 250px; height: 160px; margin-block: 16px; } .language-stage svg { width: 212px; height: 145px; stroke-width: 2; } .language-stage span { top: 7px; left: -6px; font-size: 19px; padding: 10px 16px; } .language-stage span:last-child { right: -5px; top: 104px; } .symbol-stage svg, .language-stage span { animation-duration: .2s; } @media (max-width: 1100px) { .shop-tools { flex: 1 1 300px; } .storefront .shop-card { grid-template-columns: 40% minmax(0, 1fr); } .storefront .shop-card-copy { padding: 24px 20px; } .shop-card h3 { font-size: 18px; } } @media (max-width: 900px) { .storefront .shop-grid { grid-template-columns: minmax(0, 1fr); } .storefront .shop-card { grid-template-columns: 38% minmax(0, 1fr); } .shop-card h3 { font-size: 24px; } .storefront .shop-card-copy { padding: 30px; } .storefront .shop-card-image { padding: 20px; } .shop-card-summary { font-size: 14px; } } @media (max-width: 700px) { .storefront { padding-block: 24px 52px; } .shop-hero { grid-template-columns: minmax(0, 1fr); border-radius: 22px; } .shop-hero-copy { padding: 30px; } .shop-hero h1 { font-size: 42px; } .shop-hero-visual { min-height: 170px; } .shop-hero-visual > span { bottom: 20px; left: 30px; font-size: 16px; } .storefront .shop-layout { padding-block: 40px; } .shop-heading { gap: 16px; } .shop-heading .editorial-eyebrow { font-size: 9px; } .shop-heading h2 { font-size: 28px; } .shop-count { font-size: 11px; } .shop-categories { gap: 6px; } .shop-categories button { font-size: 12px; padding: 9px 12px; } .shop-tools { flex-basis: 100%; } .shop-search { flex: 1; min-width: 0; } .shop-sort { width: auto; } .shop-sort select { width: 126px; } .shop-guidance { flex-direction: column; align-items: start; } .shop-guidance h2 { font-size: 28px; } .product-info { padding: 26px 22px; } .product-thumbs { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); } } @media (max-width: 520px) { .storefront .shop-card { display: flex; } .storefront .shop-card-image { padding: 20px; height: auto; } .storefront .shop-card-image img { width: 100%; max-width: none; } .storefront .shop-card-copy { padding: 26px; } .shop-card h3 { font-size: 23px; } .shop-heading { display: block; } .shop-heading .shop-count { margin-top: 12px; } .shop-hero-copy { padding: 28px 24px; } .shop-hero h1 { font-size: 38px; } .shop-hero-visual { min-height: 145px; } } @media (prefers-reduced-motion: reduce) { .shop-hero-link span, .shop-card-image img { transition: none; } .shop-hero-link:hover span { translate: none; } .storefront .shop-card:hover .shop-card-image img { scale: 1; } .symbol-stage svg, .language-stage span { animation: none; } } .shop-photo-credit{font-size:11px;color:#707278;text-align:right;margin-top:12px;margin-bottom:0;line-height:1.6}.shop-photo-credit a{text-underline-offset:3px}@media(max-width:600px){.shop-photo-credit{margin-top:10px;margin-bottom:0;text-align:left}} .footer-renewed{background:#f0f0f2;border-top:1px solid #e3e4e7;padding:54px 0 22px;color:#666971}.footer-main{display:grid;grid-template-columns:1.15fr .7fr 1fr 1.25fr;gap:40px;padding-bottom:40px}.footer-brand>a{display:block;width:54px;margin-bottom:14px}.footer-brand img{width:54px;height:54px;object-fit:contain}.footer-brand>p{font:400 22px/1.3 var(--font-primary);letter-spacing:-.02em;color:#777a82;margin:0 0 12px}.footer-brand strong{font-weight:550;color:#44474f}.footer-brand>span{font-size:10px;color:#898c93}.footer-column h2,.footer-contact h2{font-family:var(--font-secondary);font-size:11px;font-weight:650;line-height:1.5;margin:0 0 20px;color:#494c54}.footer-column{padding-top:8px;display:flex;align-items:start;flex-direction:column;gap:12px}.footer-column h2{margin-bottom:6px}.footer-column>a{font-size:12px;text-decoration:none;color:#777a82;line-height:1.6;transition:color .2s,transform .2s}.footer-column>a:hover{color:#363941;transform:translateX(2px)}.footer-contact{padding-top:8px}.footer-contact h2{font-family:var(--font-primary);font-size:20px;letter-spacing:-.02em;margin-bottom:14px}.footer-contact p{font-size:12px;line-height:1.8;margin:0 0 18px;color:#7b7e85}.footer-contact>a{display:inline-flex;gap:18px;border-bottom:1px solid #989ba2;color:#56585e;text-decoration:none;font-size:12px;padding-bottom:5px}.footer-base{border-top:1px solid #dcdde1;padding-top:20px;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#9699a0;padding-right:72px}.whatsapp-helper.is-reminder{width:270px}.is-reminder .helper-mascot{width:112px;height:112px;margin-bottom:-16px}.is-reminder .helper-eyebrow{font-size:8px}.is-reminder .helper-card h2{font-size:20px}.is-reminder .helper-card{padding:18px}.is-reminder .helper-card p:not(.helper-eyebrow){font-size:12px} @media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr;gap:35px}.footer-contact p br{display:none}} @media(max-width:600px){.footer-renewed{padding-block:38px 22px}.footer-main{grid-template-columns:1fr 1fr;gap:30px 20px;padding-bottom:30px}.footer-brand{grid-column:1/-1}.footer-brand>a{float:left;margin:0 16px 0 0;width:46px}.footer-brand img{width:46px;height:46px}.footer-brand>p{font-size:22px;margin-bottom:8px}.footer-brand>span{display:block;margin-left:62px}.footer-column{padding-top:0;gap:11px}.footer-column h2{font-size:10px}.footer-column>a{font-size:11px}.footer-contact{grid-column:1/-1;background:#ffffff70;border-radius:16px;padding:20px}.footer-contact h2{font-size:21px}.footer-contact p{font-size:12px}.footer-base{display:block;font-size:9px;line-height:1.8;padding-right:65px}.footer-base>span{display:block}.footer-base>span+span{margin-top:6px}.whatsapp-helper.is-reminder{width:250px}.is-reminder .helper-mascot{width:100px;height:100px}} .whatsapp-helper,.whatsapp-helper.is-reminder{width:240px;max-width:calc(100vw - 32px)} .whatsapp-helper .helper-mascot{width:108px;height:108px;margin:0 4px -15px auto} .whatsapp-helper .helper-card{padding:16px;border-radius:17px;box-shadow:0 8px 28px #20202418} .whatsapp-helper .helper-eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:7px;padding-right:20px} .whatsapp-helper .helper-card h2{font-size:19px;line-height:1.2;margin-bottom:7px;padding-right:15px} .whatsapp-helper .helper-card p:not(.helper-eyebrow){font-size:12px;line-height:1.55;margin-bottom:12px;max-width:none} .whatsapp-helper .helper-cta{font-size:11px;gap:7px;min-height:40px;padding:9px 12px} .whatsapp-helper .helper-cta svg{width:16px;height:16px} .whatsapp-helper .helper-close{top:6px;right:6px;width:30px;height:30px;font-size:21px} @media(max-width:760px){.whatsapp-helper,.whatsapp-helper.is-reminder{width:220px;right:16px}.whatsapp-helper .helper-mascot{width:88px;height:88px;margin-bottom:-12px}.whatsapp-helper .helper-card{padding:14px}.whatsapp-helper .helper-card h2{font-size:18px;padding-right:25px}.whatsapp-helper .helper-card p:not(.helper-eyebrow){font-size:11.5px}.whatsapp-helper .helper-eyebrow{font-size:7px;padding-right:29px}.whatsapp-helper .helper-cta{min-height:42px;font-size:11px}.whatsapp-helper .helper-close{width:36px;height:36px;top:3px;right:3px}} .storefront{background:#fff}.shop-hero.shop-hero-light{background:transparent;color:#34373e;border-radius:0;overflow:visible;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:center}.shop-hero-light .shop-hero-copy{padding:16px 0;min-width:0}.shop-hero-light .editorial-eyebrow{color:#868991;font-size:10px;letter-spacing:.16em;margin-bottom:19px}.shop-hero-light h1{color:#33363d;font-size:clamp(38px,4.1vw,58px);line-height:1.07;letter-spacing:-.04em;margin-bottom:22px}.shop-hero-light h1>span{color:#858891}.shop-hero-light .shop-hero-copy>p:not(.editorial-eyebrow){font-size:15px;color:#7b7e86;max-width:340px;line-height:1.8;margin-bottom:24px}.shop-hero-light .shop-hero-link{border-bottom:0;min-height:48px;gap:24px;font-size:13px;font-weight:550;padding:12px 24px;background:#56585e;color:#fff;border-radius:30px}.shop-hero-light .shop-hero-link:hover{background:#3d3f44}.shop-hero-levels{display:flex;flex-wrap:wrap;gap:14px;margin-top:23px;color:#979aa2;font-size:10px;line-height:1.7}.shop-hero-levels span+span{border-left:1px solid #dedfe4;padding-left:14px}.shop-hero-light .shop-hero-visual{min-height:340px;border-radius:24px;box-shadow:0 12px 32px #282c340b;overflow:hidden;isolation:isolate}.shop-hero-light .shop-hero-visual img{object-position:50% 42%}.shop-hero-light .shop-hero-visual::after{inset:55% 0 0;background:linear-gradient(transparent,#1823318a);z-index:0}.shop-hero-light .shop-hero-visual>.shop-photo-label{left:20px;right:auto;top:20px;bottom:auto;background:#ffffffeb;border-radius:20px;color:#686d77;font:550 8px/1.4 var(--font-secondary);letter-spacing:.07em;padding:8px 12px;z-index:1}.shop-hero-light .shop-hero-visual>.shop-photo-message{font:500 25px/1.18 var(--font-primary);letter-spacing:-.015em;left:24px;bottom:24px;right:24px;color:white}.shop-hero-light+.shop-photo-credit{font-size:10px;margin-top:12px;color:#9b9ea5}.storefront .shop-layout{padding-top:48px} @media(max-width:900px){.shop-hero.shop-hero-light{gap:5%}.shop-hero-light h1{font-size:40px}.shop-hero-light .shop-hero-visual{min-height:310px}.shop-hero-levels{font-size:9px;gap:9px}.shop-hero-levels span+span{padding-left:9px}.shop-hero-light .shop-hero-copy>p:not(.editorial-eyebrow){font-size:14px}} @media(max-width:700px){.shop-hero.shop-hero-light{grid-template-columns:1fr;gap:24px}.shop-hero-light .shop-hero-copy{padding:4px 0 0}.shop-hero-light h1{font-size:clamp(33px,6.7vw,42px);margin-bottom:16px}.shop-hero-light .editorial-eyebrow{margin-bottom:12px;font-size:9px}.shop-hero-light .shop-hero-copy>p:not(.editorial-eyebrow){font-size:13px;max-width:380px;margin-bottom:19px;line-height:1.75}.shop-hero-light .shop-hero-link{min-height:44px;font-size:12px;padding:11px 21px}.shop-hero-levels{margin-top:16px;gap:12px;font-size:9px}.shop-hero-levels span+span{padding-left:12px}.shop-hero-light .shop-hero-visual{min-height:185px;border-radius:19px}.shop-hero-light .shop-hero-visual img{object-position:50% 35%}.shop-hero-light .shop-hero-visual>.shop-photo-label{left:14px;top:14px;font-size:7px;padding:6px 9px}.shop-hero-light .shop-hero-visual>.shop-photo-message{left:17px;bottom:17px;font-size:20px}.shop-hero-light .shop-hero-visual>.shop-photo-message br{display:none}.shop-hero-light+.shop-photo-credit{font-size:8px;line-height:1.6;margin-top:9px}.storefront .shop-layout{padding-top:32px}} @media(max-width:400px){.shop-hero-light .shop-hero-visual{min-height:165px}.shop-hero-light h1{font-size:33px}.shop-hero.shop-hero-light{gap:20px}} .shop-welcome{padding:12px 0 30px;border-bottom:1px solid #e8e9ec}.shop-welcome .editorial-eyebrow{font-size:10px;letter-spacing:.14em;color:#858891;margin-bottom:13px}.shop-welcome h1{font-size:clamp(30px,3vw,43px);line-height:1.15;letter-spacing:-.035em;color:#373a42;margin:0 0 14px}.shop-welcome>p:last-of-type{font-size:14px;line-height:1.8;color:#7a7e86;margin:0;max-width:650px}.shop-welcome+.shop-layout{padding-top:30px}@media(max-width:700px){.shop-welcome{padding:4px 0 24px}.shop-welcome h1{font-size:31px;max-width:420px;margin-bottom:12px}.shop-welcome>p:last-of-type{font-size:13px;line-height:1.8}.shop-welcome .editorial-eyebrow{font-size:9px;margin-bottom:11px}.shop-welcome+.shop-layout{padding-top:25px}} .shop-payment-policy{display:flex;align-items:start;gap:10px;margin-top:18px;color:#858992;max-width:690px}.shop-payment-policy svg{width:17px;height:17px;fill:none;stroke:#969ba4;stroke-width:1.6;flex-shrink:0;margin-top:2px}.shop-payment-policy p{margin:0;font-size:11px;line-height:1.8}.shop-payment-policy strong{font-weight:550;color:#71757e;display:block;margin-bottom:2px}.shop-payment-policy span{display:block}.product-web-policy,.cart-web-policy{font-size:11px;line-height:1.8;color:#858992;background:#f6f6f7;padding:12px 14px;border-radius:10px}.product-web-policy{margin:14px 0 24px}.cart-web-policy{margin:12px 0}@media(max-width:700px){.shop-payment-policy{margin-top:16px;gap:8px}.shop-payment-policy p{font-size:10px}.shop-payment-policy svg{width:15px;height:15px}.product-web-policy,.cart-web-policy{font-size:10px}} .purchase-reminder{width:min(430px,calc(100vw - 36px));max-height:calc(100svh - 40px);overflow:auto;border:1px solid #e6e7ea;border-radius:24px;padding:30px;background:#fff;color:#565a63;box-shadow:0 20px 75px #20242e22;text-align:center}.purchase-reminder::backdrop{background:#25283368;backdrop-filter:blur(3px)}.reminder-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;background:#f4f4f6;border-radius:50%;color:#858992;font-size:24px}.reminder-logo{margin:0 auto 16px;width:50px;height:50px;object-fit:contain}.reminder-eyebrow{font-size:9px;letter-spacing:.15em;color:#9599a2;margin-bottom:10px}.purchase-reminder h2{font-size:29px;line-height:1.15;letter-spacing:-.035em;color:#383c45;margin-bottom:15px}.reminder-intro{font-size:12px;line-height:1.8;color:#8b8f98;margin-bottom:14px}.reminder-course{font-size:12px;line-height:1.7;color:#626772;background:#f5f5f7;border-radius:12px;padding:13px;margin-bottom:20px;font-weight:550}.reminder-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 0;border-block:1px solid #ececf0;margin-bottom:17px}.reminder-results p{margin:0}.reminder-results p+p{border-left:1px solid #e8e9ec}.reminder-results strong{display:block;font:500 29px/1.2 var(--font-primary);color:#565b66;margin-bottom:5px}.reminder-results span{font-size:9px;line-height:1.6;color:#9599a2;display:block}.reminder-availability{font-size:11px;line-height:1.8;color:#81858f;margin-bottom:20px}.purchase-reminder .reminder-resume{width:100%;gap:18px;min-height:46px;font-size:12px;padding:12px 16px}.reminder-later{border:0;background:transparent;color:#91959e;font-size:11px;padding:12px 15px;margin-top:5px;text-decoration:underline;text-underline-offset:4px}body:has(.purchase-reminder[open]) .whatsapp-helper{visibility:hidden;pointer-events:none}@media(max-width:480px){.purchase-reminder{padding:24px 22px;border-radius:20px}.purchase-reminder h2{font-size:26px}.reminder-logo{width:44px;height:44px}.reminder-results strong{font-size:26px}} .reminder-results .reminder-community strong{font-size:19px;line-height:1.35}@media(max-width:480px){.reminder-results .reminder-community strong{font-size:17px}} .course-overview { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px); background: #fafafa; } .course-lead { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 88px); align-items: center; } .course-eyebrow { margin: 0 0 18px; color: #6f7179; font: 600 10px/1.5 Inter, sans-serif; letter-spacing: .14em; } .course-overview h1 { max-width: 560px; margin: 0 0 28px; text-align: left; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.07; letter-spacing: -.035em; color: #292b30; animation: none; } .course-overview h1 span { display: block; color: #6b6d74; } .course-levels { display: flex; flex-wrap: wrap; gap: 8px; } .course-levels span { border: 1px solid #dfe0e3; border-radius: 30px; padding: 7px 16px; font-size: 12px; color: #686a71; } .course-explore { display: inline-flex; align-items: center; gap: 36px; text-decoration: none; padding-block: 13px; margin-top: 18px; font-size: 13px; color: #56585e; border-bottom: 1px solid #c6c8cd; } .course-explore span { transition: transform .25s; } .course-explore:hover { color: #292b30; border-color: #56585e; } .course-explore:hover span { transform: translateY(3px); } .course-overview .intro-copy { max-width: none; margin: 0; text-align: left; color: #686a72; font-size: 15px; } .course-overview .intro-copy p { line-height: 1.85; margin: 0 0 20px; text-wrap: pretty; } .course-overview .intro-copy p:last-child { margin-bottom: 0; } .course-overview .intro-copy strong { font-weight: 600; color: #44464d; } .course-promise { margin-top: 36px; padding: 22px 28px; border: 1px solid #e3e4e7; border-left: 3px solid #797b82; border-radius: 0 16px 16px 0; background: #f1f1f3; color: #61636a; } .course-promise p { margin: 0; font-size: 15px; line-height: 1.7; } .course-promise strong { color: #34363c; } .course-downloads { padding-block: 44px 48px; } .course-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .course-section-heading .course-eyebrow { margin-bottom: 9px; } .course-section-heading h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -.025em; margin: 0; color: #292b30; } .course-section-heading > p { color: #6d6f77; font-size: 12px; line-height: 1.7; margin: 0 0 2px; } .syllabus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .syllabus-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 26px; border: 1px solid #dedfe3; border-radius: 18px; background: #fff; transition: border-color .25s, box-shadow .25s; } .syllabus-card:hover { border-color: #b1b3ba; box-shadow: 0 8px 24px #292b3007; } .syllabus-icon { align-self: start; display: grid; place-items: center; padding-block: 3px; color: #797b83; } .syllabus-icon svg { width: 30px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .syllabus-copy h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; color: #35373e; letter-spacing: -.015em; } .syllabus-copy p { font-size: 11px; line-height: 1.6; color: #686a72; margin: 0 0 8px; } .syllabus-meta { display: block; font-size: 10px; color: #74767e; } .syllabus-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; } .syllabus-actions .button { min-height: 44px; padding: 11px 15px; gap: 16px; border-radius: 11px; font-size: 11px; white-space: nowrap; } .syllabus-actions .button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .syllabus-preview { min-height: 32px; display: inline-flex; gap: 10px; align-items: center; padding: 5px 8px; font-size: 10px; color: #6e7078; text-underline-offset: 4px; } .syllabus-preview:hover { color: #34363b; } .course-subjects { border-top: 1px solid #e2e3e6; padding-top: 42px; } .course-subjects .course-section-heading { margin-bottom: 30px; } .course-overview .subject-grid { max-width: none; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .course-overview .subject-card { background: #fff; border: 1px solid #e2e3e6; border-radius: 18px; overflow: hidden; text-align: left; aspect-ratio: auto; } .subject-card .image-sheen { display: block; width: 100%; border-radius: 0; } .course-overview .subject-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 0; } .subject-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; color: #494b52; font: 500 17px/1.35 Outfit, sans-serif; } .subject-caption > span:first-child { display: flex; align-items: baseline; gap: 12px; } .subject-number { font: 500 10px/1.3 Inter, sans-serif; color: #9a9ca4; } .subject-expand { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid #e6e7e9; border-radius: 50%; color: #8c8e96; transition: background .25s, color .25s; } .course-overview .subject-card:is(:hover, :focus-visible) { transform: translateY(-3px) scale(1.015); box-shadow: 0 10px 25px #26282d12; } .subject-card:is(:hover, :focus-visible) .subject-expand { background: #56585e; border-color: #56585e; color: #fff; } @media (max-width: 1100px) { .course-lead { gap: 40px; } .syllabus-card { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 24px; } .syllabus-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: start; } .subject-caption { font-size: 16px; padding: 15px; } } @media (max-width: 800px) { .course-lead { grid-template-columns: minmax(0, 1fr); gap: 30px; } .course-overview h1 { max-width: none; font-size: clamp(40px, 7vw, 56px); } .course-overview .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .course-overview .intro-copy { font-size: 15px; } .course-promise { padding: 20px 24px; margin-top: 28px; } .course-promise p { font-size: 14px; } .course-section-heading > p { max-width: 180px; } } @media (max-width: 600px) { .syllabus-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .syllabus-copy h3 { font-size: 21px; } .syllabus-copy p { font-size: 12px; } .syllabus-meta { font-size: 11px; } .syllabus-actions { gap: 10px; } .syllabus-actions .button { font-size: 12px; padding-inline: 17px; } .syllabus-preview { font-size: 11px; min-height: 44px; } .course-section-heading { align-items: start; flex-direction: column; gap: 12px; } .course-section-heading > p { max-width: none; } .course-section-heading > p br { display: none; } } @media (max-width: 520px) { .course-overview { padding-top: 36px; } .course-overview h1 { font-size: clamp(36px, 9.5vw, 48px); margin-bottom: 24px; } .course-eyebrow { font-size: 9px; } .course-overview .intro-copy { font-size: 14px; } .course-overview .intro-copy p { line-height: 1.85; margin-bottom: 22px; } .course-promise { padding: 18px 20px; } .course-promise p { font-size: 13px; } .course-downloads { padding-block: 36px; } .syllabus-card { padding: 22px 18px; gap: 12px; } .course-subjects { padding-top: 36px; } .course-overview .subject-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .subject-caption { font-size: 18px; padding: 17px 18px; } } @media (hover: none), (prefers-reduced-motion: reduce) { .course-overview .subject-card:is(:hover, :focus-visible) { transform: none; } } @media (prefers-reduced-motion: reduce) { .course-explore span, .syllabus-card, .subject-expand { transition: none; } .course-explore:hover span { transform: none; } } .results-showcase { padding-block: clamp(48px, 5.5vw, 80px); border-block: 1px solid #e9eaec; scroll-margin-top: 136px; } .results-ecoems { background: #f7f7f8; } .results-intro { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(32px, 6vw, 84px); } .results-heading h2 { margin: 0; max-width: 490px; color: #303238; font-size: clamp(32px, 3.5vw, 46px); line-height: 1.15; letter-spacing: -.025em; text-align: left; } .results-kicker { display: block; margin-bottom: 20px; color: #71737b; font: 600 11px/1.5 Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; } .results-level { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; margin-top: 26px; padding: 8px 15px; border: 1px solid #dedfe3; border-radius: 30px; color: #676971; font-size: 12px; text-decoration: none; transition: background .2s, border-color .2s; } .results-level:is(:hover, :focus-visible) { background: #eeeeF0; border-color: #b6b8c1; color: #34363d; } .results-level > span { color: #95979f; } .results-copy p { font-size: 14px; line-height: 1.85; color: #6a6c74; text-wrap: pretty; margin: 0 0 19px; } .results-copy p:last-child { margin-bottom: 0; } .results-copy strong { font-weight: 600; color: #45474f; } .results-explorer { margin-top: 36px; min-width: 0; } .results-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid #dedfe3; } .results-toolbar h3 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.015em; color: #363840; } .results-toolbar p { margin: 0; font-size: 12px; line-height: 1.65; color: #757780; } .results-navigation { display: flex; gap: 9px; align-items: center; } .results-navigation[hidden] { display: none; } .results-counter { min-width: 87px; margin-right: 10px; color: #71737c; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .results-arrow { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #585a62; background: #fff; border: 1px solid #d7d9de; border-radius: 50%; transition: color .2s, background .2s, transform .2s; } .results-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .results-previous svg { rotate: 180deg; } .results-arrow:not(:disabled):is(:hover, :focus-visible) { color: #fff; background: #56585e; border-color: #56585e; transform: translateY(-2px); } .results-arrow:disabled { opacity: .35; cursor: default; } .results-showcase .results-track { --result-columns: 3; display: grid; position: relative; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px 0 16px; border-radius: 0; } .results-track::-webkit-scrollbar { display: none; } .results-showcase .result-card { display: block; min-width: 0; border: 1px solid #e1e2e6; border-radius: 18px; background: #fff; overflow: hidden; scroll-snap-align: start; scroll-margin-block: 140px; text-align: left; transform: none; opacity: 1; translate: none; transition: transform .3s, box-shadow .3s, border-color .3s; } .results-showcase .result-card .image-sheen { border-radius: 0; } .results-showcase .result-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 0; transform: none; filter: none; } .result-card-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; color: #51535b; font: 500 16px/1.3 Outfit, sans-serif; } .result-card-caption > span:first-child { display: flex; align-items: center; gap: 12px; } .result-card-number { color: #9597a0; font: 500 11px/1.3 Inter, sans-serif; } .result-card-expand { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e4e5e8; color: #7a7c85; transition: color .2s, background .2s; } .result-card-expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .results-showcase .result-card:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: #b6b8c1; box-shadow: 0 7px 14px #292b3012; } .results-showcase .result-card:focus-visible { outline-offset: -3px; } .results-showcase .result-card:is(:hover, :focus-visible) .result-card-expand { background: #56585e; border-color: #56585e; color: #fff; } .results-rail-footer { display: flex; align-items: center; gap: 24px; color: #777982; font-size: 11px; } .results-rail-footer > span:first-child { flex-shrink: 0; } .results-rail-footer > span:first-child > span { display: inline-block; margin-left: 8px; font-size: 15px; } .results-progress { height: 2px; flex: 1; display: block; background: #e4e5e8; overflow: hidden; } .results-progress > span { display: block; height: 100%; background: #84868f; border-radius: 2px; } .results-bottom { display: flex; justify-content: space-between; gap: 44px; align-items: center; margin-top: 30px; padding-top: 26px; border-top: 1px solid #e1e2e5; } .results-note { max-width: 770px; } .results-note p { margin: 0; color: #777982; font-size: 12px; line-height: 1.8; text-wrap: pretty; } .results-note strong { font-weight: 500; color: #676971; } .results-bottom > .button { flex-shrink: 0; gap: 22px; font-size: 13px; min-height: 46px; padding: 12px 23px; margin: 0; } @media (max-width: 1000px) { .results-intro { grid-template-columns: minmax(0, 1fr); gap: 26px; } .results-heading h2 { max-width: 660px; font-size: clamp(32px, 4.8vw, 42px); } .results-level { margin-top: 18px; } .results-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .results-copy p { margin: 0; } .results-showcase .results-track { --result-columns: 2; grid-auto-columns: calc((100% - 24px) / 2); } .results-bottom { gap: 28px; } } @media (max-width: 600px) { .results-showcase { scroll-margin-top: 114px; } .results-heading h2 { font-size: clamp(30px, 7.5vw, 38px); line-height: 1.16; } .results-kicker { font-size: 10px; margin-bottom: 15px; } .results-copy { display: block; } .results-copy p { font-size: 14px; margin-bottom: 18px; } .results-explorer { margin-top: 28px; } .results-toolbar { align-items: start; flex-wrap: wrap; gap: 16px; padding-top: 24px; } .results-toolbar h3 { font-size: 23px; } .results-toolbar p { font-size: 11px; } .results-navigation { width: 100%; } .results-counter { margin-right: auto; } .results-showcase .results-track { --result-columns: 1; grid-auto-columns: 88%; gap: 16px; padding-top: 16px; } .result-card-caption { padding: 14px 15px; font-size: 16px; } .results-rail-footer { gap: 18px; font-size: 10px; } .results-rail-footer > span:first-child > span { margin-left: 4px; } .results-bottom { align-items: start; flex-direction: column; gap: 22px; margin-top: 24px; padding-top: 22px; } .results-note p { font-size: 12px; } .results-bottom > .button { width: 100%; } } @media (hover: none), (prefers-reduced-motion: reduce) { .results-showcase .result-card:is(:hover, :focus-visible), .results-arrow:not(:disabled):is(:hover, :focus-visible) { transform: none; } } @media (prefers-reduced-motion: reduce) { .results-showcase .result-card, .results-arrow, .result-card-expand, .results-level { transition: none; } } @media print { .results-showcase .results-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .results-navigation, .results-rail-footer { display: none; } } .results-unified-intro { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(36px, 6vw, 90px); } .results-unified-intro h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.12; letter-spacing: -.03em; color: #303238; max-width: 600px; margin-bottom: 22px; } .results-unified-intro h2 > span { color: #858790; display: block; } .results-unified-copy { font-size: 15px; line-height: 1.8; color: #6a6c74; max-width: 570px; margin: 0; } .results-unified-intro .results-level { margin-top: 20px; } .results-statistics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #f5f5f6; border: 1px solid #e6e7e9; border-radius: 24px; padding: 34px 20px; } .results-statistics > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 15px; } .results-statistics > div + div { border-left: 1px solid #d9dbe0; } .results-statistics strong { font: 500 clamp(40px, 4.5vw, 64px)/1.1 Outfit, sans-serif; color: #45474f; letter-spacing: -.04em; white-space: nowrap; } .results-statistics strong > span { font-size: .65em; } .results-statistics div > span { max-width: 140px; margin-top: 12px; color: #71737b; font-size: 12px; line-height: 1.6; } .results-unified .results-toolbar > div:first-child { max-width: 720px; } .results-unified .results-counter { min-width: 100px; } .results-sort-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; color: #7a7c85; font-size: 11px; } .results-sort-note > span:first-child { padding: 5px 11px; background: #f2f2f4; border-radius: 30px; color: #666872; } .results-showcase .result-score-label { display: flex; flex-direction: column; align-items: start; gap: 5px; } .result-score-label strong { color: #464851; font-size: 22px; line-height: 1.2; font-weight: 500; } .result-score-label small { font-size: 14px; font-weight: 400; } .result-score-label > span { font: 400 11px/1.4 Inter, sans-serif; color: #797b83; } .results-community-note { font-size: 14px; line-height: 1.8; color: #74767e; margin: 0; } .results-community-note strong { color: #454750; font-weight: 500; } .score-hub { background: #f6f6f8; padding-block: clamp(48px, 6vw, 82px); scroll-margin-top: 136px; } .score-hub .course-section-heading { margin-bottom: 30px; } .score-tabs { display: inline-flex; align-items: stretch; gap: 6px; padding: 6px; margin-bottom: 24px; background: #e9e9ed; border: 1px solid #e2e3e7; border-radius: 18px; max-width: 100%; } .score-tabs[hidden], .score-hub :is(#spq-unam, #spe-unam)[hidden] { display: none; } .score-tabs button { border: 0; padding: 14px 28px; text-align: left; border-radius: 13px; background: transparent; color: #6c6e77; font: 500 18px/1.25 Outfit, sans-serif; transition: background .2s, color .2s, box-shadow .2s; min-width: 190px; } .score-tabs button > span { display: block; margin-top: 6px; font: 400 10px/1.4 Inter, sans-serif; letter-spacing: .02em; } .score-tabs button[aria-selected="true"] { color: #fff; background: #56585e; box-shadow: 0 3px 10px #24262c15; } .score-tabs button:not([aria-selected="true"]):hover { color: #303238; background: #f3f3f5; } .score-hub :is(#spq-unam, #spe-unam) { width: 100%; max-width: none; padding: 36px; margin: 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: 24px 44px; align-items: start; background: #fff; border: 1px solid #e1e2e7; border-radius: 24px; font-family: Inter, sans-serif; } .score-hub :is(#spq-unam .spq-head, #spe-unam .spe-head) { margin: 0; } .score-panel-kicker { display: block; margin: 5px 0 16px; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: #898b94; } .score-hub :is(#spq-unam .spq-title, #spe-unam .spe-title) { font: 500 clamp(26px, 3vw, 34px)/1.2 Outfit, sans-serif; color: #3c3e46; margin: 0 0 14px; letter-spacing: -.02em; } .score-hub :is(#spq-unam .spq-sub, #spe-unam .spe-sub) { font-size: 14px; line-height: 1.8; color: #73757e; margin: 0; } .score-hub :is(#spq-unam .spq-card, #spe-unam .spe-card) { padding: 0; border: 0; background: transparent; min-width: 0; } .score-hub :is(#spq-unam .spq-form, #spe-unam .spe-form) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .score-hub :is(#spq-unam .spq-field, #spe-unam .spe-field):last-child { grid-column: 1 / -1; } .score-hub :is(#spq-unam label, #spe-unam label) { font-size: 12px; font-weight: 500; color: #60626c; } .score-hub :is(#spq-unam select, #spe-unam select) { min-height: 50px; font-size: 14px; border-radius: 12px; background-color: #fafafb; } .score-hub :is(#spq-unam select, #spe-unam select):disabled { color: #858791; background-color: #f4f4f6; } .score-hub :is(#spq-unam .spq-btn, #spe-unam .spe-btn) { min-height: 48px; border-radius: 12px; font-size: 13px; padding: 12px 22px; } .score-hub :is(#spq-unam .spq-hint, #spe-unam .spe-hint) { border-style: solid; border-color: #ededf0; background: #f9f9fb; padding: 18px; font-size: 12px; line-height: 1.75; } .score-hub :is(#spq-unam .spq-out, #spe-unam .spe-out) { grid-column: 1 / -1; margin-top: 0; } .score-hub :is(#spq-unam .spq-foot, #spe-unam .spe-foot) { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid #e7e8ec; font-size: 11px; line-height: 1.8; color: #7c7e87; } .score-hub :is(#spq-unam .spq-grid, #spe-unam .spe-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; } .score-hub :is(#spq-unam .spq-item, #spe-unam .spe-item) { background: #f5f5f7; color: #42444c; border: 1px solid #e3e4e8; border-radius: 14px; gap: 10px; } .score-hub :is(#spq-unam .spq-item .spq-num, #spe-unam .spe-item .spe-num) { color: #42444c; font-size: 44px; } .score-hub :is(#spq-unam .spq-item .spq-num small, #spe-unam .spe-item .spe-num small) { color: #797b84; font-size: 12px; } .score-hub :is(#spq-unam .spq-item .spq-pl, #spe-unam .spe-item .spe-pl) { font-size: 13px; font-weight: 500; } .score-hub :is(#spq-unam .spq-item .spq-mod, #spe-unam .spe-item .spe-mod) { color: #777983; font-size: 11px; } .score-hub :is(#spq-unam .spq-tag, #spe-unam .spe-tag) { font-size: 10px; font-weight: 400; padding: 5px 10px; } .score-hub :is(#spq-unam .spq-cta, #spe-unam .spe-cta) { background: transparent; border: 0; border-top: 1px solid #e3e4e8; border-radius: 0; padding: 20px 0 0; text-align: left; } .score-hub :is(#spq-unam .spq-cta p, #spe-unam .spe-cta p) { font-size: 13px; font-weight: 400; line-height: 1.7; color: #656771; } .course-benefits { background: #fafafa; padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid #e5e6e9; scroll-margin-top: 136px; } .benefits-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; } .benefits-intro h2 { font-size: clamp(34px, 4vw, 48px); color: #34363d; line-height: 1.15; letter-spacing: -.025em; margin: 0; } .benefits-lead p { margin: 0; font-size: 14px; line-height: 1.8; color: #747680; } .benefits-lead strong { color: #555761; font-weight: 500; } .benefits-guide { display: flex; justify-content: space-between; gap: 20px; margin: 38px 0 22px; border-top: 1px solid #dfe0e5; padding-top: 22px; color: #60626c; font-size: 13px; } .benefits-guide > span:last-child { font-size: 11px; color: #84868f; } .benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px; } .benefit-course { border: 1px solid #e1e2e6; background: #fff; border-radius: 24px; overflow: hidden; } .benefit-art { padding: 26px; background: #efeff2; border-bottom: 1px solid #e1e2e6; } .benefit-art .image-sheen { border-radius: 14px; max-width: 350px; margin-inline: auto; box-shadow: 0 8px 22px #30323812; } .benefit-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .benefit-content { padding: 28px; } .benefit-title > span { color: #898b95; font-size: 10px; letter-spacing: .08em; } .benefit-title h3 { font-size: 34px; font-weight: 500; letter-spacing: -.02em; color: #383a42; margin: 8px 0 22px; } .benefit-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid #e7e8eb; padding: 20px 0; margin-bottom: 12px; } .benefit-metrics p { margin: 0; } .benefit-metrics p + p { padding-left: 22px; border-left: 1px solid #e7e8eb; } .benefit-metrics strong { display: block; font: 500 32px/1.15 Outfit, sans-serif; color: #51535c; } .benefit-metrics span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: #81838d; } .benefit-group { border-bottom: 1px solid #e8e9ec; } .benefit-group summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; color: #51535c; font-size: 15px; cursor: pointer; list-style: none; min-height: 72px; } .benefit-group summary::-webkit-details-marker { display: none; } .benefit-group summary small { display: block; font-size: 10px; color: #8a8c95; margin-top: 5px; } .benefit-group summary:hover { color: #303238; } .benefit-toggle { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e0e1e5; border-radius: 50%; font-size: 20px; line-height: 1; font-weight: 300; color: #81838e; transition: transform .2s, background .2s; } .benefit-group[open] .benefit-toggle { transform: rotate(45deg); background: #f0f0f3; color: #53555f; } .benefit-group ul { list-style: none; margin: 0 0 24px; padding: 0; } .benefit-group li { position: relative; padding-left: 19px; margin: 0 0 15px; font-size: 13px; line-height: 1.8; color: #747681; text-wrap: pretty; } .benefit-group li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #999ba5; position: absolute; left: 0; top: .8em; } .benefit-group li strong { color: #50525d; font-weight: 500; } .benefit-group[open] ul { animation: benefit-reveal .25s ease both; } .benefit-cta { padding-top: 26px; } .benefit-cta .button { width: 100%; min-height: 48px; border-radius: 13px; font-size: 13px; } @keyframes benefit-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1000px) { .results-unified-intro { gap: 32px; } .results-statistics { padding: 24px 12px; } .results-statistics > div { padding-inline: 8px; } .results-statistics div > span { font-size: 11px; } .score-hub :is(#spq-unam, #spe-unam) { grid-template-columns: minmax(0, 1fr); padding: 30px; } .score-hub :is(#spq-unam .spq-head, #spe-unam .spe-head) { max-width: 600px; } .benefits-intro { gap: 32px; } .benefit-content { padding: 23px; } .benefits-grid { gap: 20px; } } @media (max-width: 760px) { .results-unified-intro, .benefits-intro { grid-template-columns: minmax(0, 1fr); } .results-unified-intro h2 { max-width: 540px; } .results-statistics { max-width: 520px; } .results-statistics strong { font-size: 48px; } .results-statistics div > span { font-size: 12px; } .benefits-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .benefits-intro { gap: 24px; } .benefits-guide { flex-direction: column; gap: 8px; margin-top: 30px; } .benefit-content { padding: 26px; } } @media (max-width: 600px) { .results-unified-copy { font-size: 14px; } .results-sort-note { align-items: start; flex-direction: column; gap: 8px; font-size: 10px; } .results-community-note { font-size: 13px; } .score-hub, .course-benefits { scroll-margin-top: 114px; } .score-tabs { display: flex; width: 100%; } .score-tabs button { min-width: 0; flex: 1; padding: 13px 12px; font-size: 17px; } .score-tabs button > span { font-size: 9px; } .score-hub :is(#spq-unam, #spe-unam) { padding: 24px 20px; border-radius: 20px; gap: 26px; } .score-hub :is(#spq-unam .spq-form, #spe-unam .spe-form) { grid-template-columns: minmax(0, 1fr); gap: 16px; } .score-hub :is(#spq-unam select, #spe-unam select) { font-size: 16px; } .score-hub :is(#spq-unam .spq-sub, #spe-unam .spe-sub) { font-size: 13px; } .score-panel-kicker { font-size: 9px; } .benefits-intro h2 { font-size: 36px; } .benefit-title h3 { font-size: 32px; } .benefit-metrics strong { font-size: 30px; } .benefit-content { padding: 22px; } .benefit-group summary { font-size: 14px; } .benefit-metrics span { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .benefit-group[open] ul { animation: none; } .benefit-toggle, .score-tabs button { transition: none; } } .results-statistics>div:first-child>strong{font-size:clamp(24px,3vw,38px);line-height:1.2;letter-spacing:-.025em} .results-statistics>div:first-child>strong{white-space:normal;max-width:100%;overflow-wrap:normal} .score-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:8px}.score-tabs button{min-width:0;white-space:normal}.score-tabs button span{font-size:10px;line-height:1.5}.score-source{display:inline-block;margin-top:16px;font-size:11px;color:#52627a;text-underline-offset:4px}.score-criteria{padding:32px;background:#f5f6f8;border:1px solid #e0e4e9;border-radius:20px}.score-criteria h3{font-size:35px;letter-spacing:0;word-spacing:.035em;line-height:1.2}.score-criteria>p{font-size:14px;line-height:1.9;color:#6d7785;max-width:820px}.score-weight{display:grid;grid-template-columns:1fr 1fr;max-width:550px;gap:25px;margin:28px 0}.score-weight>div{border-top:1px solid #d5dce5;padding-top:20px}.score-weight strong{font:500 49px/1.2 var(--font-primary);display:block;color:#4b586a}.score-weight span{display:block;font-size:12px;color:#7b8796;margin-top:6px}.score-criteria-links{display:flex;flex-wrap:wrap;gap:15px 28px;margin:25px 0}.score-criteria-links a{font-size:12px;color:#4d627f;text-underline-offset:5px}.score-verified{font-size:10px!important;color:#9199a4!important}.spq-num small,.spe-num small{font-size:10px;line-height:1.5}.spq-foot a,.spe-foot a{color:#52647d;text-underline-offset:4px}@media(max-width:680px){.score-tabs{grid-template-columns:1fr 1fr}.score-tabs button{padding:15px 12px}.score-criteria{padding:25px}.score-criteria h3{font-size:29px}.score-weight strong{font-size:42px}} .faq-page{padding-bottom:64px}.faq-intro{padding:54px 0 35px}.faq-intro .editorial-eyebrow,.faq-preview .editorial-eyebrow{font-size:9px;letter-spacing:.13em;color:#737b87;margin-bottom:15px}.faq-intro h1{font-size:clamp(36px,4vw,55px);letter-spacing:-.04em;line-height:1.1;color:#41464f;margin-bottom:20px}.faq-intro>p:not(.editorial-eyebrow){max-width:620px;font-size:14px;line-height:1.85;color:#686d76;margin-bottom:24px}.faq-topics{display:flex;flex-wrap:wrap;gap:8px}.faq-topics a{font-size:10px;text-decoration:none;padding:9px 13px;border:1px solid #e3e8f0;border-radius:22px;background:#f6f6f8;color:#646b76}.faq-topics a:hover{background:#ebedf1}.faq-groups{display:grid;gap:36px}.faq-group{display:grid;grid-template-columns:.65fr 1.35fr;gap:55px;border-top:1px solid #e2e8f1;padding-top:30px;scroll-margin-top:20px}.faq-group-heading{display:flex;align-items:start;gap:16px}.faq-group-heading>span{font-size:10px;color:#828892;padding-top:8px}.faq-group h2{font-size:25px;line-height:1.25;letter-spacing:-.025em;color:#4f5662;margin:0}.faq-item{border-bottom:1px solid #e7edf6}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:19px 0;color:#58616f;font-size:14px;line-height:1.7;font-weight:550}.faq-item summary::-webkit-details-marker{display:none}.faq-plus{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;color:#7c8490;background:#f1f2f5;font-size:18px;font-weight:400;transition:transform .2s}.faq-item[open] .faq-plus{transform:rotate(45deg)}.faq-answer{padding:0 39px 21px 0}.faq-answer p{font-size:13px;line-height:1.95;color:#69717d;margin:0}.faq-answer strong{font-weight:550;color:#5c6675}.faq-answer a{color:#535f70;text-underline-offset:3px}.faq-contact{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:45px;background:#f7f7f9;border:1px solid #e6edf8;border-radius:22px;padding:28px 35px}.faq-contact h2{font-size:25px;line-height:1.2;letter-spacing:-.02em;color:#586576;margin-bottom:12px}.faq-contact p{font-size:12px;color:#747d89;margin:0;line-height:1.8}.faq-contact .button{font-size:12px;padding:12px 23px}.faq-preview{background:#f6f6f8;padding-block:66px}.faq-preview-heading{display:flex;gap:40px;align-items:end;justify-content:space-between;margin-bottom:28px}.faq-preview h2{font-size:clamp(31px,3.2vw,43px);letter-spacing:-.035em;line-height:1.15;color:#4d5869;margin:0}.faq-preview-heading>a{font-size:11px;color:#697687;text-decoration:none;border-bottom:1px solid #d9e4f6;padding-bottom:5px}.faq-preview-heading>a span{margin-left:14px}.faq-preview-list{max-width:1000px}.faq-preview .faq-item summary{font-size:14px}.faq-preview .faq-answer p{font-size:13px} @media(max-width:760px){.faq-intro{padding:35px 0 28px}.faq-intro h1{font-size:36px}.faq-intro>p:not(.editorial-eyebrow){font-size:13px}.faq-topics a{font-size:9px;padding:8px 11px}.faq-groups{gap:27px}.faq-group{grid-template-columns:1fr;gap:12px;padding-top:25px;scroll-margin-top:13px}.faq-group h2{font-size:24px}.faq-item summary{font-size:13px;gap:14px;padding:17px 0}.faq-answer{padding:0 0 20px}.faq-answer p{font-size:12px}.faq-contact{display:block;padding:24px;margin-top:35px}.faq-contact h2{font-size:24px}.faq-contact .button{margin-top:21px;font-size:11px}.faq-preview{padding-block:44px}.faq-preview-heading{display:block;margin-bottom:25px}.faq-preview h2{font-size:32px;margin-bottom:20px}.faq-preview-heading>a{display:inline-block;font-size:10px}.faq-preview .faq-item summary{font-size:13px}.faq-preview .faq-answer p{font-size:12px}} @media(prefers-reduced-motion:reduce){.faq-plus{transition:none}} .cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:65;background:#fffffffa;backdrop-filter:blur(8px);border-top:1px solid #e3e5e9;box-shadow:0 -6px 25px #2529330c;padding:20px max(28px,calc((100vw - 1224px)/2));display:flex;align-items:center;gap:34px;justify-content:space-between}.cookie-banner[hidden]{display:none}.cookie-copy{max-width:690px}.cookie-copy h2{font-size:19px;letter-spacing:-.02em;margin:0 0 7px;color:#4e5664}.cookie-copy p{font-size:12px;line-height:1.7;color:#67717e;margin:0 0 6px}.cookie-explain{border:0;background:none;padding:0;font-size:10px;color:#677384;text-decoration:underline;text-underline-offset:3px;min-height:28px}.cookie-actions{display:flex;gap:10px;flex-shrink:0}.cookie-actions button,.cookie-save{border:1px solid #d5dbe4;background:#fff;color:#586578;border-radius:24px;font-size:11px;min-height:44px;padding:11px 19px;white-space:nowrap}.cookie-actions button:last-child,.cookie-save{background:#56585e;color:white;border-color:#56585e}.cookie-actions button:hover,.cookie-save:hover{box-shadow:0 3px 8px #20242e12}.cookie-settings{width:min(490px,calc(100vw - 36px));max-height:calc(100svh - 40px);overflow:auto;padding:30px;border:1px solid #e4e8ee;border-radius:22px;color:#8190a4;background:white}.cookie-settings::backdrop{background:#252b3568;backdrop-filter:blur(3px)}.cookie-settings-close{position:absolute;right:8px;top:8px;border:0;border-radius:50%;width:40px;height:40px;background:#f4f6f8;font-size:23px;color:#747f8e}.cookie-eyebrow{font-size:9px;letter-spacing:.13em;color:#747d89;margin-bottom:13px}.cookie-settings h2{font-size:27px;color:#455266;letter-spacing:-.03em;line-height:1.15;margin-bottom:24px}.cookie-option{display:flex;gap:20px;justify-content:space-between;border-top:1px solid #e4e9f0;padding:20px 0;align-items:start}.cookie-option h3,.cookie-option strong{font:550 12px/1.7 var(--font-secondary);display:block;color:#58667b;margin:0 0 7px}.cookie-option p,.cookie-option div>span{font-size:11px;line-height:1.85;color:#6c7788;display:block;margin:0}.cookie-option>span{font-size:9px;color:#778397;white-space:nowrap;padding-top:4px}.cookie-option input{width:20px;height:20px;flex-shrink:0;accent-color:#56585e;margin-top:3px}.cookie-no-tracking{font-size:10px;line-height:1.8;color:#717d8e;margin-bottom:20px}.cookie-save{width:100%}.footer-privacy-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.footer-privacy-links button{font:inherit;font-size:10px;background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:30px;padding:0}.policy-refund-link{display:inline-block;color:#66768d;font-size:10px;margin-top:6px;text-underline-offset:3px}body:has(.cookie-banner:not([hidden])) .whatsapp-float{bottom:calc(var(--cookie-banner-height,130px) + 16px)}body:has(.cookie-banner:not([hidden])) .whatsapp-helper,body:has(.cookie-settings[open]) .whatsapp-helper{visibility:hidden;pointer-events:none} @media(max-width:760px){.cookie-banner{padding:17px 20px;display:block}.cookie-copy h2{font-size:17px}.cookie-copy p{font-size:11px}.cookie-explain{font-size:10px;min-height:30px}.cookie-actions{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.cookie-actions button{font-size:10px;min-height:44px;padding:10px 12px}.cookie-settings{padding:25px 22px}.cookie-settings h2{font-size:25px}.cookie-option{gap:12px}.cookie-option>span{font-size:8px}.footer-privacy-links{gap:8px;display:block}.footer-privacy-links button{display:block;font-size:9px}.footer-privacy-links>span{display:block}} .whatsapp-helper.junior-helper{width:240px;max-width:calc(100vw - 32px)} .junior-helper .junior-mascot.helper-mascot{width:112px;height:128px;margin:0 5px -14px auto;background:none;animation:none;filter:drop-shadow(0 3px 5px #0000000c);pointer-events:none} .junior-mascot img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 90%;will-change:auto} .junior-helper[data-pose="hello"] .junior-mascot img{animation:junior-hello 1.05s ease-in-out 3} .junior-helper[data-pose="listening"] .junior-mascot img{animation:junior-listen 2.2s ease-in-out 2} .junior-helper .helper-eyebrow{font-size:8px;letter-spacing:.08em} .junior-helper .helper-card h2{letter-spacing:0;word-spacing:.035em;font-size:19px;line-height:1.25;padding-right:23px} .junior-helper .helper-cta{font-weight:500;font-size:11px;background:#56585e} .junior-helper .helper-cta:hover{background:#3e4147} body:has(dialog[open]) .junior-helper,body:has(.site-nav.is-open) .junior-helper{display:none} @keyframes junior-hello{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-3deg)}65%{transform:translateY(-1px) rotate(2deg)}} @keyframes junior-listen{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2px) rotate(1.5deg)}} @media(max-width:760px){.whatsapp-helper.junior-helper{width:220px;right:16px;bottom:max(86px,calc(env(safe-area-inset-bottom) + 72px))}.junior-helper .junior-mascot.helper-mascot{width:96px;height:110px;margin-bottom:-12px}.junior-helper .helper-card h2{font-size:18px}.junior-helper .helper-card p:not(.helper-eyebrow){font-size:11.5px;line-height:1.6}.junior-helper .helper-cta{min-height:42px}.junior-helper .helper-close{width:36px;height:36px}} @media(max-height:560px){.junior-helper .junior-mascot.helper-mascot{width:66px;height:76px}.junior-helper .helper-card{padding:12px}.junior-helper .helper-card p:not(.helper-eyebrow){margin-bottom:9px}} @media(prefers-reduced-motion:reduce){.junior-helper,.junior-helper .junior-mascot img{animation:none!important}}