:root {
  --purple: #6f178f;
  --purple-dark: #501064;
  --purple-mid: #9132ad;
  --lilac: #eee1f3;
  --paper: #f7f4f7;
  --white: #ffffff;
  --ink: #221a25;
  --muted: #6d6670;
  --line: #ddd6df;
  --green: #187d52;
  --container: 1180px;
  --header-height: 82px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 20px 55px rgba(57, 22, 67, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--white); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
::selection { color: #fff; background: var(--purple); }
[hidden] { display: none !important; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 112px 0; overflow: clip; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 2000; top: 14px; left: 14px; padding: 10px 14px; color: #fff; background: var(--purple); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: none; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-box { width: 48px; height: 48px; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--purple); border: 1px solid rgba(111, 23, 143, .2); background: #faf7fb; transition: color .25s ease, background .25s ease, transform .35s var(--ease); }
.icon-svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-icon { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.button-icon { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.whatsapp-icon { width: 21px; height: 21px; display: block; flex: 0 0 auto; fill: currentColor; }

.scroll-progress { position: fixed; z-index: 1400; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--purple); }
.site-header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: var(--header-height); border-bottom: 1px solid rgba(111, 23, 143, .08); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); transition: height .35s var(--ease), box-shadow .35s ease, background .35s ease, transform .7s var(--ease); }
body:not(.is-ready) .site-header { transform: translateY(-100%); }
.site-header.is-scrolled { height: 72px; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 35px rgba(57, 22, 67, .08); }
.header-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; }
.brand-logo { width: 204px; height: auto; transition: transform .35s var(--ease); }
.brand:hover .brand-logo { transform: translateY(-2px); }
.desktop-nav { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 25px); margin-left: auto; }
.desktop-nav a { position: relative; color: #5f5762; font-size: 12px; font-weight: 690; }
.desktop-nav a::after { position: absolute; bottom: -10px; left: 0; width: 100%; height: 1px; content: ""; background: var(--purple); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--purple); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-cta { flex: 0 0 auto; }
.nav-toggle { position: relative; z-index: 3; display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex: 0 0 auto; flex-direction: column; gap: 6px; padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #fff; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .35s var(--ease); }
.nav-toggle:hover { color: var(--purple); border-color: rgba(111, 23, 143, .42); transform: translateY(-2px); }
.nav-toggle[aria-expanded="true"] { color: #fff; border-color: var(--purple); background: var(--purple); transform: none; }
.nav-toggle > span:not(.sr-only) { width: 17px; height: 1px; background: currentColor; transform-origin: center; transition: transform .35s var(--ease); }
.nav-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 1; inset: 0; min-height: 100vh; min-height: 100dvh; display: flex; justify-content: space-between; flex-direction: column; padding: calc(var(--header-height) + 40px) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 100% 0, rgba(111, 23, 143, .09), transparent 38%), rgba(255, 255, 255, .995); opacity: 0; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transform: translate3d(0, -18px, 0); transition: opacity .3s ease, visibility .52s ease, clip-path .52s var(--ease), transform .52s var(--ease); }
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; clip-path: inset(0); transform: none; }
.mobile-menu nav { display: grid; border-top: 1px solid rgba(111, 23, 143, .18); }
.mobile-menu nav a { padding: 12px 0; color: var(--ink); border-bottom: 1px solid var(--line); font-size: clamp(29px, 8.5vw, 42px); font-weight: 760; line-height: 1.05; letter-spacing: -.045em; opacity: 0; transform: translateY(16px); transition: color .2s ease, padding-left .3s var(--ease), opacity .42s ease, transform .48s var(--ease); }
.mobile-menu nav a:hover { color: var(--purple); padding-left: 8px; }
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu.is-open nav a:nth-child(1) { transition-delay: .10s; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: .14s; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: .18s; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: .22s; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: .26s; }
.mobile-menu.is-open nav a:nth-child(6) { transition-delay: .30s; }
.mobile-menu p { max-width: 360px; margin: 34px 0 0; color: var(--muted); font-size: 13px; opacity: 0; transform: translateY(12px); transition: opacity .4s ease .32s, transform .48s var(--ease) .32s; }
.mobile-menu.is-open p { opacity: 1; transform: none; }

.button { position: relative; display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 11px; padding: 13px 22px; overflow: hidden; border: 1px solid var(--purple); border-radius: 4px; background: transparent; font-size: 14px; font-weight: 760; line-height: 1; transition: transform .3s var(--ease), color .25s ease, background .25s ease, border-color .25s ease, box-shadow .3s ease; }
.button::before { position: absolute; top: 0; left: -120%; width: 80%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); transition: left .65s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button:hover::before { left: 140%; }
.button:hover .button-icon { transform: translateX(4px); }
.button-small { min-height: 40px; padding: 10px 15px; font-size: 12px; }
.button-primary { color: #fff; background: var(--purple); box-shadow: 0 13px 28px rgba(111, 23, 143, .16); }
.button-primary:hover { background: var(--purple-dark); box-shadow: 0 17px 34px rgba(80, 16, 100, .22); }
.button-secondary { color: var(--purple); background: transparent; }
.button-secondary:hover { color: #fff; background: var(--purple); }
.button-light { color: var(--purple); border-color: #fff; background: #fff; }
.button-light:hover { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }
.button-whatsapp { color: #fff; border-color: var(--green); background: var(--green); box-shadow: 0 14px 30px rgba(24, 125, 82, .18); }
.button-whatsapp:hover { background: #106b44; box-shadow: 0 17px 36px rgba(24, 125, 82, .26); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 2px; content: ""; background: currentColor; transform-origin: left; transition: transform .7s var(--ease); }
.eyebrow-light { color: #e8caef; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: end; gap: 80px; margin-bottom: 55px; }
.section-head h2, .about-copy h2, .opportunity-copy h2, .faq-intro h2, .contact-panel h2, .product-editorial h2, .usage-panel h2, .final-cta h2 { max-width: 760px; margin: 16px 0 0; font-size: clamp(40px, 4.7vw, 64px); font-weight: 760; line-height: .98; letter-spacing: -.052em; }
.section-head > p { margin: 0; color: var(--muted); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--purple); font-size: 13px; font-weight: 780; }
.text-link::after { content: "→"; transition: transform .3s var(--ease); }
.text-link:hover::after { transform: translateX(5px); }

/* Homepage */
.home-hero { min-height: 850px; display: flex; align-items: center; padding: calc(var(--header-height) + 72px) 0 78px; overflow: hidden; background: linear-gradient(90deg, #fff 0%, #fff 60%, #f4ebf7 60%, #f4ebf7 100%); }
.home-hero-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .65fr); align-items: center; gap: 72px; }
.home-hero-copy h1 { max-width: 780px; margin: 24px 0; font-size: clamp(66px, 7.5vw, 104px); font-weight: 820; line-height: .87; letter-spacing: -.07em; }
.home-hero-copy h1 em { display: block; color: var(--purple); font-style: normal; }
.home-hero-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 580px; margin-top: 48px; border-top: 1px solid var(--line); }
.hero-stats div { padding: 20px 18px 0 0; }
.hero-stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-stats strong { display: block; color: var(--purple); font-size: 28px; line-height: 1; }
.hero-stats span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.hero-figure { position: relative; margin: 0; will-change: transform; }
.hero-figure::before { position: absolute; top: -20px; right: -20px; width: 68%; height: 64%; content: ""; border: 1px solid rgba(111, 23, 143, .26); transform: translate(0); transition: transform 1s var(--ease); }
.hero-figure.is-visible::before { transform: translate(-8px, 8px); }
.hero-figure img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.hero-caption { position: relative; z-index: 2; width: calc(100% - 38px); margin: -74px 0 0 -38px; padding: 20px 22px; color: #fff; background: var(--purple); }
.hero-caption small { display: block; color: #dfbfe8; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-caption strong { display: block; margin-top: 4px; font-size: 19px; }
.routes-section { border-bottom: 1px solid var(--line); background: #fff; }
.routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.route-card { min-height: 330px; display: flex; flex-direction: column; padding: 34px 32px; transition: background .35s ease; }
.route-card + .route-card { border-left: 1px solid var(--line); }
.route-card:hover { background: #fbf8fc; }
.route-card:hover .icon-box { color: #fff; background: var(--purple); transform: translateY(-4px) rotate(-3deg); }
.route-top { display: flex; align-items: center; justify-content: space-between; }
.route-number { color: #9b919d; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.route-card h3 { max-width: 280px; margin: 62px 0 12px; font-size: 29px; line-height: 1.03; letter-spacing: -.04em; }
.route-card p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.route-card .text-link { margin-top: auto; }
.about-section { background: var(--paper); }
.about-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr); align-items: center; gap: 84px; }
.large-copy { max-width: 590px; color: var(--muted); font-size: 17px; }
.about-points { display: grid; margin: 38px 0; border-top: 1px solid var(--line); }
.about-points div { display: grid; grid-template-columns: 190px 1fr; gap: 25px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.about-points strong { font-size: 13px; }
.about-points span { color: var(--muted); font-size: 12px; }
.editorial-figure { margin: 0; will-change: transform; }
.editorial-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-note { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; }
.photo-note strong { color: var(--purple); letter-spacing: .08em; text-transform: uppercase; }
.pillars-section { background: #fff; }
.pillars-list { border-top: 1px solid var(--line); }
.pillar-row { display: grid; grid-template-columns: 72px 70px minmax(220px, .65fr) 1fr; align-items: center; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .3s ease; }
.pillar-row:hover { padding-inline: 14px; background: #fbf8fc; }
.pillar-row:hover .icon-box { color: #fff; background: var(--purple); transform: rotate(4deg); }
.pillar-row > span:first-child { color: #99909a; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.pillar-row h3 { margin: 0; font-size: 23px; line-height: 1.08; letter-spacing: -.032em; }
.pillar-row p { margin: 0; color: var(--muted); font-size: 13px; }
.programs-section { background: var(--paper); }
.program-photo { position: relative; margin: 0 0 38px; overflow: hidden; }
.program-photo img { width: 100%; height: 460px; object-fit: cover; object-position: center 43%; }
.program-photo figcaption { position: absolute; right: 0; bottom: 0; width: min(410px, 80%); padding: 24px 28px; color: #fff; background: var(--purple); transform: translateY(0); transition: transform .5s var(--ease); }
.program-photo:hover figcaption { transform: translateY(-8px); }
.program-photo small { display: block; color: #e3c8ea; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.program-photo strong { display: block; margin-top: 5px; font-size: 20px; }
.program-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 20px; }
.program-main { padding: 44px; color: #fff; background: var(--purple); }
.program-meta { display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.program-meta span { display: inline-flex; align-items: center; gap: 9px; color: #e9d6ed; font-size: 10px; font-weight: 720; }
.program-main h3 { max-width: 680px; margin: 62px 0 18px; font-size: clamp(40px, 4.4vw, 62px); line-height: .95; letter-spacing: -.052em; }
.program-main > p { max-width: 660px; color: rgba(255, 255, 255, .74); }
.program-topics { display: flex; flex-wrap: wrap; margin: 34px 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .2); }
.program-topics li { width: 50%; padding: 11px 0; color: #eadced; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 11px; }
.program-side { display: grid; gap: 20px; }
.program-card { position: relative; padding: 30px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .35s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.program-card::after { position: absolute; right: -45px; bottom: -45px; width: 90px; height: 90px; content: ""; border: 1px solid rgba(111, 23, 143, .15); transform: rotate(45deg); transition: transform .5s var(--ease); }
.program-card:hover { border-color: rgba(111, 23, 143, .35); box-shadow: var(--shadow); transform: translateY(-5px); }
.program-card:hover::after { transform: rotate(90deg) scale(1.15); }
.program-card small { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.program-card h3 { margin: 44px 0 12px; font-size: 27px; line-height: 1.03; letter-spacing: -.04em; }
.program-card p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.program-note { margin: 22px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.opportunity-section { color: #fff; background: var(--purple-dark); overflow: hidden; }
.opportunity-layout { display: grid; grid-template-columns: 1fr 1fr; }
.opportunity-photo { min-height: 710px; margin: 0; overflow: hidden; }
.opportunity-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transition: transform 1.2s var(--ease); }
.opportunity-photo:hover img { transform: scale(1.035); }
.opportunity-copy { display: flex; justify-content: center; flex-direction: column; padding: 80px clamp(40px, 7vw, 100px); }
.opportunity-copy h2 { color: #fff; }
.opportunity-copy > p { max-width: 620px; color: rgba(255, 255, 255, .7); }
.opportunity-points { display: grid; margin: 38px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.opportunity-points div { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.opportunity-points span { color: #e7c7ed; font-size: 10px; font-weight: 800; }
.opportunity-points p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 12px; }
.method-section { background: #fff; }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-step { min-height: 285px; padding: 30px; transition: background .3s ease; }
.method-step + .method-step { border-left: 1px solid var(--line); }
.method-step:hover { background: #fbf8fc; }
.method-step:hover .icon-box { color: #fff; background: var(--purple); transform: translateY(-4px); }
.method-step h3 { margin: 62px 0 10px; font-size: 22px; letter-spacing: -.035em; }
.method-step p { margin: 0; color: var(--muted); font-size: 12px; }
.resources-section { background: var(--paper); }
.resources-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; border-top: 1px solid var(--line); }
.resource-card { min-height: 360px; display: flex; flex-direction: column; padding: 32px; border-bottom: 1px solid var(--line); transition: background .3s ease; }
.resource-card + .resource-card { border-left: 1px solid var(--line); }
.resource-card:hover { background: #fff; }
.resource-card small { color: var(--purple); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.resource-card h3 { margin: auto 0 12px; font-size: 28px; line-height: 1.04; letter-spacing: -.04em; }
.resource-card p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; align-items: start; gap: 90px; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro > p { color: var(--muted); }
.faq-intro .text-link { margin-top: 18px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 24px 45px 24px 0; cursor: pointer; font-size: 17px; font-weight: 720; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 21px; right: 3px; content: "+"; color: var(--purple); font-size: 22px; font-weight: 400; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq-list details p { margin: -4px 48px 24px 0; color: var(--muted); font-size: 13px; animation: faqIn .35s var(--ease); }
.contact-section { padding-top: 30px; background: var(--paper); }
.contact-panel { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 60px; padding: 64px; color: #fff; background: var(--purple); }
.contact-panel h2 { color: #fff; }
.contact-panel p { max-width: 650px; color: rgba(255, 255, 255, .72); }
.contact-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.contact-meta span { display: grid; color: #e3c8ea; font-size: 9px; text-transform: uppercase; }
.contact-meta strong { color: #fff; font-size: 14px; text-transform: none; }
.home-products { background: #fff; }
.products-action { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); }
.products-action p { margin: 0; color: var(--muted); font-size: 13px; }

/* Product cards and catalog */
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.products-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { min-width: 0; transition: opacity .28s ease, transform .35s var(--ease); }
.product-card.is-filtering-out { opacity: 0; transform: scale(.96); }
.product-card-visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.product-card-visual::after { position: absolute; inset: 0; content: ""; border: 1px solid transparent; transition: inset .35s var(--ease), border-color .35s ease; pointer-events: none; }
.product-card:hover .product-card-visual::after { inset: 10px; border-color: rgba(111, 23, 143, .18); }
.product-card-visual img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .65s var(--ease); }
.product-card:hover .product-card-visual img { transform: scale(1.055) rotate(-1deg); }
.product-badge { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 9px; color: var(--purple); border: 1px solid rgba(111, 23, 143, .2); background: rgba(255, 255, 255, .9); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-card-arrow { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--purple); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s var(--ease); }
.product-card-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-card:hover .product-card-arrow { opacity: 1; transform: none; }
.product-card-body { padding: 17px 0 7px; }
.product-category { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-card h2 { margin: 6px 0 8px; font-size: 21px; line-height: 1.08; letter-spacing: -.035em; }
.product-card h2 a { transition: color .2s ease; }
.product-card h2 a:hover { color: var(--purple); }
.product-card p { min-height: 58px; margin: 0; color: var(--muted); font-size: 12px; }
.product-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.product-card-meta span { padding-right: 8px; color: #827984; border-right: 1px solid var(--line); font-size: 9px; }
.inner-hero { min-height: 620px; display: flex; align-items: center; padding: calc(var(--header-height) + 85px) 0 82px; overflow: hidden; background: linear-gradient(90deg, #fff 0%, #fff 65%, #f4ebf7 65%, #f4ebf7 100%); }
.inner-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 80px; }
.inner-hero-copy h1 { max-width: 920px; margin: 22px 0; font-size: clamp(72px, 9vw, 118px); font-weight: 810; line-height: .86; letter-spacing: -.07em; }
.inner-hero-copy p { max-width: 720px; margin: 0; color: var(--muted); font-size: 18px; }
.catalog-count { min-height: 220px; display: flex; justify-content: flex-end; flex-direction: column; padding: 28px; color: #fff; background: var(--purple); }
.catalog-count strong { font-size: 70px; line-height: .86; letter-spacing: -.07em; }
.catalog-count span { margin-top: 10px; color: #e6caec; font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.catalog-section { background: #fff; }
.catalog-toolbar { position: sticky; z-index: 20; top: 82px; display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 48px; padding: 16px 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.filter-group { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { min-height: 38px; padding: 9px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; background: #fff; font-size: 10px; font-weight: 720; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.filter-chip:hover { color: var(--purple); border-color: rgba(111, 23, 143, .35); transform: translateY(-1px); }
.filter-chip.is-active { color: #fff; border-color: var(--purple); background: var(--purple); }
.catalog-search { position: relative; width: min(100%, 290px); flex: 0 0 auto; }
.catalog-search input { width: 100%; min-height: 42px; padding: 10px 40px 10px 13px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; font-size: 12px; }
.catalog-search input:focus { border-color: var(--purple); }
.catalog-search svg { position: absolute; top: 50%; right: 11px; width: 17px; height: 17px; fill: none; stroke: var(--purple); stroke-width: 1.8; transform: translateY(-50%); }
.catalog-empty { padding: 35px 0; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }

/* Product detail */
.product-hero { padding: calc(var(--header-height) + 42px) 0 94px; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 52%, #fff 52%, #fff 100%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 34px; color: var(--muted); font-size: 10px; }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb strong { color: var(--ink); }
.product-hero-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); align-items: center; gap: clamp(55px, 8vw, 110px); }
.product-main-image { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.product-main-image::after { position: absolute; inset: 18px; content: ""; border: 1px solid rgba(111, 23, 143, .08); pointer-events: none; }
.product-main-image img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.product-main-image:hover img { transform: scale(1.035); }
.product-main-image img.is-changing { opacity: 0; transform: scale(.97); transition: opacity .15s ease, transform .15s ease; }
.product-art-index { position: absolute; z-index: 2; top: 22px; left: 23px; color: rgba(111, 23, 143, .4); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.product-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.product-thumb { aspect-ratio: 1; display: grid; place-items: center; padding: 3px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: border-color .2s ease, transform .2s ease; }
.product-thumb:hover, .product-thumb.is-active { border-color: var(--purple); transform: translateY(-2px); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-summary h1 { max-width: 690px; margin: 16px 0 22px; font-size: clamp(58px, 6.7vw, 91px); font-weight: 800; line-height: .88; letter-spacing: -.07em; }
.product-short { max-width: 580px; margin: 0; color: var(--muted); font-size: 18px; }
.product-facts { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 540px; margin: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-facts div { display: grid; gap: 4px; padding: 16px 16px 16px 0; }
.product-facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.product-facts span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-facts strong { font-size: 13px; }
.cta-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.product-details { background: #fff; }
.product-details-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr); align-items: start; gap: clamp(65px, 9vw, 130px); }
.product-editorial { position: sticky; top: 108px; }
.rich-copy { margin-top: 28px; color: var(--muted); }
.rich-copy p { margin: 0 0 18px; }
.rich-copy strong { color: var(--ink); }
.benefit-list { border-top: 1px solid var(--line); }
.benefit-row { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease), background .3s ease; }
.benefit-row:hover { padding-inline: 12px; background: #fbf8fc; }
.benefit-row > span { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.benefit-row h3 { margin: 0 0 6px; font-size: 19px; }
.benefit-row p { margin: 0; color: var(--muted); font-size: 13px; }
.notes-section { background: var(--paper); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.note-card { min-height: 280px; display: flex; flex-direction: column; padding: 28px; border-bottom: 1px solid var(--line); transition: background .3s ease; }
.note-card + .note-card { border-left: 1px solid var(--line); }
.note-card:hover { background: #fff; }
.note-card > span { color: var(--purple); font-size: 10px; font-weight: 800; }
.note-card h3 { margin: auto 0 10px; font-size: 24px; }
.note-card p { margin: 0; color: var(--muted); font-size: 12px; }
.usage-section { background: #fff; }
.usage-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; padding: 64px; color: #fff; background: var(--purple); }
.usage-panel h2 { color: #fff; }
.usage-panel ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.usage-panel li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.usage-panel li span { color: #e7c7ed; font-size: 10px; font-weight: 800; }
.usage-panel li p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.final-cta-section { padding-top: 20px; background: #fff; }
.final-cta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; padding-top: 55px; border-top: 1px solid var(--line); }
.final-cta p { max-width: 620px; margin: 18px 0 0; color: var(--muted); }

/* Editorial information pages */
.editorial-hero { min-height: 690px; }
.editorial-hero-layout { display: grid; grid-template-columns: 1fr minmax(400px, .72fr); align-items: center; gap: 72px; }
.editorial-hero-photo { margin: 0; overflow: hidden; }
.editorial-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.editorial-hero-photo:hover img { transform: scale(1.035); }
.content-section { background: #fff; }
.content-layout { display: grid; grid-template-columns: 260px minmax(0, 820px); align-items: start; justify-content: space-between; gap: 80px; }
.content-aside { position: sticky; top: 110px; padding-top: 15px; border-top: 2px solid var(--purple); }
.content-aside span { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.content-aside p { color: var(--muted); font-size: 13px; }
.prose { max-width: 820px; }
.prose h2 { margin: 0 0 24px; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.045em; }
.prose h2:not(:first-child) { margin-top: 68px; }
.prose h3 { margin: 38px 0 10px; font-size: 24px; letter-spacing: -.03em; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); }
.prose a { color: var(--purple); font-weight: 760; }
.prose blockquote { margin: 40px 0; padding: 25px 28px; color: var(--purple-dark); border-left: 3px solid var(--purple); background: var(--paper); font-size: 19px; }
.page-contact-section { padding-top: 25px; background: var(--paper); }

/* Footer and WhatsApp */
.site-footer { padding: 58px 0 30px; background: var(--paper); border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.footer-brand .brand-logo { width: min(230px, 100%); }
.footer-brand p { max-width: 440px; color: var(--muted); font-size: 13px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-links > div { display: grid; align-content: start; gap: 8px; }
.footer-links strong { margin-bottom: 8px; color: var(--purple); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a, .footer-links span { color: var(--muted); font-size: 12px; }
.footer-links a { transition: color .2s ease, transform .2s ease; }
.footer-links a:hover { color: var(--purple); transform: translateX(3px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; color: #958d97; border-top: 1px solid var(--line); font-size: 10px; }
.whatsapp-float { position: fixed; z-index: 900; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; color: #fff; border-radius: 3px; background: var(--green); box-shadow: 0 12px 28px rgba(24, 125, 82, .24); font-size: 12px; font-weight: 760; transition: transform .3s var(--ease), box-shadow .3s ease; }
.whatsapp-float:hover { transform: translateY(-4px); box-shadow: 0 17px 36px rgba(24, 125, 82, .3); }

/* Motion system */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal-left { transform: translateX(-36px); }
.js .reveal-right { transform: translateX(36px); }
.js .reveal-scale { transform: scale(.965); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-media { overflow: hidden; }
.js .reveal-media.hero-figure { overflow: visible; }
.js .reveal-media img { opacity: 0; filter: saturate(.72) blur(5px); transition: opacity .78s ease, filter 1.05s var(--ease), transform 1.25s var(--ease); }
.js .reveal-media.is-visible img { opacity: 1; filter: none; }
.js body:not(.is-ready) .motion-hero > * { opacity: 0; transform: translateY(25px); }
.js body.is-ready .motion-hero > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js body.is-ready .motion-hero > *:nth-child(1) { transition-delay: .1s; }
.js body.is-ready .motion-hero > *:nth-child(2) { transition-delay: .18s; }
.js body.is-ready .motion-hero > *:nth-child(3) { transition-delay: .28s; }
.js body.is-ready .motion-hero > *:nth-child(4) { transition-delay: .38s; }
.js body.is-ready .motion-hero > *:nth-child(5) { transition-delay: .48s; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: flex; }
  .home-hero { background: linear-gradient(180deg, #fff 0%, #fff 64%, #f4ebf7 64%, #f4ebf7 100%); }
  .home-hero-layout, .about-layout, .program-layout, .faq-layout, .editorial-hero-layout { grid-template-columns: 1fr; }
  .home-hero-copy { padding-top: 35px; text-align: center; }
  .home-hero-copy > p, .hero-stats { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-figure { width: min(600px, 88%); margin: 35px auto 0; }
  .hero-caption { margin-left: -20px; }
  .about-layout { gap: 45px; }
  .program-main { order: 1; }
  .program-side { grid-template-columns: repeat(2, 1fr); order: 2; }
  .faq-intro { position: static; }
  .products-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-hero-photo { width: min(720px, 100%); }
  .footer-main { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 860px) {
  :root { --header-height: 74px; }
  .section { padding: 88px 0; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .header-cta { display: none; }
  .nav-toggle { margin-left: auto; }
  .brand-logo { width: 185px; }
  .inner-hero { min-height: auto; padding-top: calc(var(--header-height) + 70px); background: linear-gradient(180deg, #fff 0%, #fff 72%, #f4ebf7 72%, #f4ebf7 100%); }
  .inner-hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .catalog-count { width: 220px; min-height: 180px; justify-self: end; }
  .catalog-toolbar { position: relative; top: auto; align-items: stretch; flex-direction: column; }
  .catalog-search { width: 100%; }
  .product-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 48%, #fff 48%, #fff 100%); }
  .product-hero-layout, .product-details-grid, .usage-panel, .content-layout { grid-template-columns: 1fr; }
  .product-gallery { width: min(680px, 100%); margin-inline: auto; }
  .product-editorial, .content-aside { position: static; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-card + .note-card { border-top: 0; border-left: 0; }
  .contact-panel, .final-cta { grid-template-columns: 1fr; align-items: start; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .section { padding: 76px 0; }
  .brand-logo { width: 166px; }
  .home-hero { min-height: auto; padding-top: calc(var(--header-height) + 54px); }
  .home-hero-copy h1 { font-size: clamp(54px, 15vw, 74px); }
  .home-hero-copy > p { font-size: 16px; }
  .hero-actions { display: grid; }
  .hero-stats div { padding-right: 8px; }
  .hero-stats div + div { padding-left: 8px; }
  .hero-stats span { font-size: 8px; }
  .hero-figure { width: 92%; }
  .routes-grid, .method-grid, .resources-grid { grid-template-columns: 1fr; }
  .route-card + .route-card, .method-step + .method-step, .resource-card + .resource-card { border-top: 1px solid var(--line); border-left: 0; }
  .route-card { min-height: 290px; padding-inline: 0; }
  .pillar-row { grid-template-columns: 52px 58px 1fr; gap: 12px; }
  .pillar-row p { grid-column: 3; }
  .about-points div { grid-template-columns: 1fr; gap: 5px; }
  .program-photo img { height: 340px; }
  .program-photo figcaption { width: 88%; }
  .program-main { padding: 32px 24px; }
  .program-main h3 { font-size: 44px; }
  .program-topics li { width: 100%; }
  .program-side { grid-template-columns: 1fr; }
  .opportunity-layout { grid-template-columns: 1fr; }
  .opportunity-photo { min-height: 430px; }
  .opportunity-copy { padding: 66px 24px; }
  .contact-panel, .usage-panel { padding: 40px 24px; }
  .products-grid, .products-grid-home { grid-template-columns: 1fr; }
  .products-action { align-items: stretch; flex-direction: column; }
  .inner-hero-copy h1 { font-size: clamp(62px, 17vw, 86px); }
  .filter-group { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; }
  .product-summary h1 { font-size: clamp(52px, 15vw, 76px); }
  .product-facts { grid-template-columns: 1fr; }
  .product-facts div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .product-summary .button { width: 100%; }
  .product-details-grid { gap: 50px; }
  .product-thumbs { grid-template-columns: repeat(4, 1fr); }
  .editorial-hero { padding-bottom: 0; }
  .content-layout { gap: 44px; }
  .prose h2 { font-size: 38px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .whatsapp-float { width: 50px; height: 50px; justify-content: center; padding: 0; border-radius: 50%; }
  .whatsapp-float span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js .reveal, .js .reveal-media, .js .reveal-media img, .js body:not(.is-ready) .motion-hero > * { opacity: 1; clip-path: none; transform: none; }
}