:root {
    --blue: #0648e8;
    --blue-2: #002fc4;
    --cyan: #02d4d0;
    --cyan-dark: #00aeb3;
    --orange: #ffab08;
    --orange-dark: #e58e00;
    --navy: #0d1537;
    --navy-2: #141f4d;
    --ink: #12182c;
    --muted: #65708c;
    --line: rgba(13, 21, 55, .12);
    --soft: #f3f7ff;
    --soft-cyan: #edffff;
    --white: #ffffff;
    --shadow-sm: 0 16px 42px rgba(25, 55, 130, .09);
    --shadow-md: 0 24px 70px rgba(19, 46, 112, .14);
    --shadow-lg: 0 38px 110px rgba(11, 39, 112, .2);
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 38px;
    --radius-xl: 54px;
    --container: 1220px;
    --header-height: 82px;
    --ease: cubic-bezier(.2,.75,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
input, select, textarea { color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { margin-bottom: .42em; line-height: 1.05; letter-spacing: -.045em; }
h1 { font-size: clamp(3.4rem, 7.2vw, 7.25rem); }
h2 { font-size: clamp(2.25rem, 4.8vw, 4.8rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.85rem); }
p { color: var(--muted); }
::selection { background: var(--cyan); color: var(--navy); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; left:14px; top:14px; z-index:9999; padding:12px 18px; border-radius:12px; background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); transform:translateY(-160%); }
.skip-link:focus { transform:none; }

.announcement { position:relative; z-index:80; background:linear-gradient(90deg,var(--blue-2),var(--blue),var(--cyan-dark)); color:#fff; }
.announcement__inner { min-height:38px; display:flex; align-items:center; justify-content:center; gap:24px; font-size:.82rem; font-weight:800; }
.announcement__message, .announcement a { display:flex; align-items:center; gap:8px; }
.announcement svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.announcement a { color:#fff; opacity:.88; }
.announcement a:hover { opacity:1; }

.site-header { position:sticky; top:0; z-index:70; height:var(--header-height); display:flex; align-items:center; background:rgba(255,255,255,.9); backdrop-filter:blur(18px); border-bottom:1px solid transparent; transition:height .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-scrolled { height:68px; border-color:var(--line); box-shadow:0 12px 34px rgba(15,45,110,.07); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { flex:none; display:inline-flex; align-items:center; }
.brand img { width:72px; height:72px; object-fit:cover; border-radius:18px; transition:width .25s var(--ease),height .25s var(--ease); }
.site-header.is-scrolled .brand img { width:58px; height:58px; }
.nav { display:flex; align-items:center; gap:26px; }
.nav__link, .nav-dropdown__toggle { position:relative; border:0; background:none; padding:10px 0; color:#4f5a75; font-size:.91rem; font-weight:800; }
.nav__link::after, .nav-dropdown__toggle::after { content:""; position:absolute; left:0; right:100%; bottom:3px; height:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:right .2s var(--ease); }
.nav__link:hover, .nav__link.is-active, .nav-dropdown__toggle:hover, .nav-dropdown__toggle.is-active { color:var(--navy); }
.nav__link:hover::after, .nav__link.is-active::after, .nav-dropdown__toggle:hover::after, .nav-dropdown__toggle.is-active::after { right:0; }
.nav-dropdown { position:relative; }
.nav-dropdown__toggle { display:flex; align-items:center; gap:6px; }
.nav-dropdown__toggle span { font-size:1rem; transition:transform .2s var(--ease); }
.nav-dropdown__toggle[aria-expanded="true"] span { transform:rotate(180deg); }
.nav-dropdown__panel { position:absolute; top:calc(100% + 16px); left:50%; width:min(620px,92vw); padding:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translate(-50%,-8px); transition:.2s var(--ease); }
.nav-dropdown.is-open .nav-dropdown__panel { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-dropdown__panel a { padding:18px; border-radius:16px; transition:background .18s var(--ease),transform .18s var(--ease); }
.nav-dropdown__panel a:hover { background:var(--soft); transform:translateY(-2px); }
.nav-dropdown__panel strong { display:block; margin-bottom:4px; font-size:.95rem; }
.nav-dropdown__panel span { display:block; color:var(--muted); font-size:.8rem; line-height:1.45; }
.menu-toggle { display:none; position:relative; z-index:75; padding:10px; border:0; background:none; }
.menu-toggle > span:not(.sr-only) { display:block; width:26px; height:2px; margin:5px 0; background:var(--navy); border-radius:99px; transition:.22s var(--ease); }

.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border:1px solid var(--blue); border-radius:999px; background:var(--blue); color:#fff; font-weight:850; letter-spacing:-.015em; transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease); }
.button:hover { transform:translateY(-3px); background:var(--blue-2); border-color:var(--blue-2); box-shadow:0 15px 34px rgba(6,72,232,.24); }
.button svg, .text-link svg, .icon-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button--header { min-height:44px; padding-inline:18px; font-size:.88rem; }
.button--header svg { width:17px; }
.button--large { min-height:60px; padding-inline:27px; }
.button--small { min-height:44px; padding-inline:17px; font-size:.84rem; }
.button--ghost { background:transparent; border-color:rgba(13,21,55,.17); color:var(--navy); }
.button--ghost:hover { background:#fff; border-color:rgba(13,21,55,.3); color:var(--navy); box-shadow:var(--shadow-sm); }
.button--light { background:#fff; border-color:#fff; color:var(--navy); }
.button--light:hover { background:#f3f7ff; border-color:#f3f7ff; color:var(--navy); box-shadow:0 17px 40px rgba(0,0,0,.14); }
.button--full { width:100%; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-weight:850; }
.text-link svg { transition:transform .2s var(--ease); }
.text-link:hover svg { transform:translateX(5px); }
.text-link--light { color:#fff; }
.icon-link { width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--blue); transition:.2s var(--ease); }
.icon-link:hover { transform:translateY(-3px); background:var(--blue); border-color:var(--blue); color:#fff; }

.eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--blue); font-size:.76rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow::before { content:""; width:26px; height:2px; border-radius:99px; background:currentColor; }
.eyebrow--light { color:#fff; }
.section { position:relative; padding:clamp(82px,10vw,142px) 0; }
.section--tint { background:var(--soft); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:54px; }
.section-heading > div { max-width:780px; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { max-width:430px; margin-bottom:8px; }
.section-label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.13em; }
.section-label span { color:var(--blue); }
.section-center { margin-top:44px; text-align:center; }
.display-copy { color:var(--navy); font-size:clamp(2.15rem,4.2vw,4.35rem); line-height:1.1; letter-spacing:-.05em; }
.display-copy em { color:var(--blue); font-style:normal; }

/* Hero */
.hero { position:relative; min-height:calc(100svh - 120px); overflow:hidden; display:flex; align-items:center; padding:70px 0 110px; background:linear-gradient(145deg,#f7faff 0%,#fff 48%,#efffff 100%); }
.hero-mesh { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(6,72,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(6,72,232,.045) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%); }
.hero::before { content:""; position:absolute; width:44vw; aspect-ratio:1; left:-21vw; top:-12vw; border-radius:50%; background:radial-gradient(circle,var(--cyan) 0,rgba(2,212,208,.12) 30%,transparent 70%); filter:blur(18px); opacity:.42; }
.hero::after { content:""; position:absolute; width:38vw; aspect-ratio:1; right:-17vw; bottom:-17vw; border-radius:50%; background:radial-gradient(circle,var(--blue) 0,rgba(6,72,232,.12) 34%,transparent 72%); filter:blur(18px); opacity:.4; }
.hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,7vw,100px); align-items:center; }
.hero__content { max-width:760px; }
.hero__badge { width:max-content; max-width:100%; display:flex; align-items:center; gap:10px; margin-bottom:28px; padding:9px 14px; border:1px solid rgba(6,72,232,.15); border-radius:999px; background:rgba(255,255,255,.68); color:var(--navy); font-size:.8rem; font-weight:850; box-shadow:0 8px 30px rgba(6,72,232,.06); backdrop-filter:blur(10px); }
.hero__badge-dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 6px rgba(2,212,208,.15); }
.hero h1 { margin-bottom:28px; }
.hero h1 span, .page-hero h1 span, .about-hero h1 span, .contact-hero h1 span { color:var(--blue); }
.hero__lead { max-width:690px; margin-bottom:0; font-size:clamp(1.1rem,1.9vw,1.36rem); line-height:1.65; }
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__facts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; padding-top:26px; border-top:1px solid var(--line); }
.hero__facts strong { display:block; margin-bottom:4px; color:var(--navy); font-size:.92rem; }
.hero__facts span { color:var(--muted); font-size:.78rem; }
.hero-stage { position:relative; min-height:580px; }
.hero-stage__halo { position:absolute; inset:60px 25px 55px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(2,212,208,.42),rgba(6,72,232,.12) 44%,rgba(255,171,8,.13) 65%,transparent 72%); filter:blur(6px); }
.hero-stage__logo-card { position:absolute; z-index:5; left:50%; top:50%; width:310px; height:210px; padding:26px; display:flex; align-items:center; gap:18px; border-radius:34px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow-lg); transform:translate(-50%,-50%) rotate(-2deg); backdrop-filter:blur(18px); }
.hero-stage__logo-card img { width:98px; height:98px; border-radius:22px; object-fit:cover; }
.hero-stage__logo-card span { display:block; margin-bottom:8px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.hero-stage__logo-card strong { display:block; font-size:1.05rem; line-height:1.35; }
.hero-stage__tile { position:absolute; z-index:3; width:185px; aspect-ratio:1; padding:22px; display:flex; flex-direction:column; justify-content:space-between; border-radius:30px; box-shadow:var(--shadow-md); color:#fff; }
.hero-stage__tile span { font-size:.72rem; font-weight:900; letter-spacing:.1em; opacity:.75; }
.hero-stage__tile strong { font-size:1.35rem; line-height:1.05; }
.hero-stage__tile--ia { right:4px; top:42px; background:linear-gradient(145deg,var(--blue),var(--blue-2)); transform:rotate(7deg); }
.hero-stage__tile--design { left:0; top:90px; background:linear-gradient(145deg,var(--cyan),var(--cyan-dark)); color:var(--navy); transform:rotate(-8deg); }
.hero-stage__tile--creative { right:36px; bottom:48px; background:linear-gradient(145deg,var(--orange),#ffcf54); color:var(--navy); transform:rotate(10deg); }
.hero-stage__floating { position:absolute; z-index:6; padding:10px 14px; border-radius:999px; background:var(--navy); color:#fff; font-size:.74rem; font-weight:850; box-shadow:var(--shadow-sm); }
.hero-stage__floating--one { left:42px; bottom:78px; transform:rotate(-4deg); }
.hero-stage__floating--two { right:8px; top:250px; transform:rotate(5deg); background:#fff; color:var(--navy); }
.hero__scroll { position:absolute; z-index:4; left:50%; bottom:25px; display:flex; align-items:center; gap:10px; transform:translateX(-50%); color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.hero__scroll span { width:34px; height:1px; background:var(--muted); }

.brand-marquee { overflow:hidden; padding:18px 0; background:var(--navy); color:#fff; }
.brand-marquee__track { width:max-content; display:flex; align-items:center; gap:26px; animation:marquee 26s linear infinite; }
.brand-marquee span { font-size:.83rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.brand-marquee i { width:8px; height:8px; border-radius:50%; background:var(--cyan); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* intro */
.intro-grid { display:grid; grid-template-columns:170px minmax(0,1fr) 280px; gap:48px; align-items:start; }
.intro-copy p { margin:0; }
.intro-side { padding-top:8px; }
.intro-side p { margin-bottom:24px; }

/* Areas */
.areas-bento { display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:repeat(2,minmax(285px,auto)); gap:18px; }
.area-panel { position:relative; overflow:hidden; padding:30px; display:flex; flex-direction:column; justify-content:space-between; border-radius:32px; transition:transform .28s var(--ease),box-shadow .28s var(--ease); }
.area-panel:hover { transform:translateY(-7px); box-shadow:var(--shadow-md); }
.area-panel--large { grid-row:1/3; color:#fff; }
.area-panel--blue { background:linear-gradient(145deg,var(--blue),#001fa9); }
.area-panel--cyan { background:linear-gradient(145deg,#bffffe,var(--cyan)); color:var(--navy); }
.area-panel--orange { background:linear-gradient(145deg,#ffdc83,var(--orange)); color:var(--navy); }
.area-panel--navy { background:linear-gradient(145deg,var(--navy),#1a2f73); color:#fff; }
.area-panel--light { background:#fff; color:var(--navy); border:1px solid var(--line); }
.area-panel__number { position:relative; z-index:2; font-size:.76rem; font-weight:900; letter-spacing:.1em; opacity:.72; }
.area-panel > div:not(.area-panel__graphic) { position:relative; z-index:2; }
.area-panel__tag { display:inline-block; margin-bottom:12px; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; opacity:.8; }
.area-panel h3 { max-width:340px; margin-bottom:12px; font-size:clamp(1.65rem,3vw,3.25rem); }
.area-panel p { max-width:390px; margin-bottom:0; color:inherit; opacity:.72; }
.area-panel__arrow { position:absolute; z-index:3; right:24px; top:24px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.17); }
.area-panel__arrow svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.area-panel__graphic--ai { position:absolute; right:-100px; bottom:-90px; width:380px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.area-panel__graphic--ai::before, .area-panel__graphic--ai::after, .area-panel__graphic--ai i { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.area-panel__graphic--ai::before { inset:55px; }
.area-panel__graphic--ai::after { inset:110px; background:rgba(2,212,208,.18); }
.area-panel__graphic--ai i:nth-child(1) { width:18px;height:18px;left:82px;top:42px;background:var(--cyan);border:0; }
.area-panel__graphic--ai i:nth-child(2) { width:13px;height:13px;left:58px;bottom:84px;background:var(--orange);border:0; }
.area-panel__graphic--ai i:nth-child(3) { width:10px;height:10px;right:95px;top:70px;background:#fff;border:0; }

/* Finder */
.finder-shell { position:relative; overflow:hidden; padding:clamp(34px,5vw,62px); display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; border-radius:44px; background:linear-gradient(145deg,var(--navy),#071f6b); color:#fff; box-shadow:var(--shadow-lg); }
.finder-shell::after { content:""; position:absolute; right:-160px; bottom:-180px; width:430px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--cyan),transparent 68%); opacity:.18; }
.finder-shell__intro, .finder-options, .finder-result { position:relative; z-index:2; }
.finder-shell__intro h2 { margin-bottom:18px; }
.finder-shell__intro p { color:rgba(255,255,255,.66); }
.finder-options { display:grid; gap:10px; }
.finder-options button { padding:17px 20px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.05); color:#fff; text-align:left; font-weight:800; transition:.2s var(--ease); }
.finder-options button:hover, .finder-options button.is-active { border-color:var(--cyan); background:rgba(2,212,208,.14); transform:translateX(5px); }
.finder-result { grid-column:1/-1; padding-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.14); }
.finder-result span { display:block; color:var(--cyan); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.11em; }
.finder-result strong { display:block; margin-top:4px; font-size:1.25rem; }

/* Course cards */
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.course-card { min-width:0; display:flex; flex-direction:column; border-radius:28px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.course-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-md); }
.course-card[hidden] { display:none; }
.course-card__visual { min-height:235px; }
.course-card__body { flex:1; padding:25px; display:flex; flex-direction:column; }
.course-card__topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; color:var(--muted); font-size:.71rem; font-weight:850; }
.status { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#e8edff; color:var(--blue); font-size:.66rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.status--august { background:#fff0ca; color:#865500; }
.status--active { background:#dffdfa; color:#007a7d; }
.status--consult { background:#e8edff; color:var(--blue); }
.course-card h3 { margin-bottom:12px; }
.course-card h3 a:hover { color:var(--blue); }
.course-card p { margin-bottom:22px; font-size:.93rem; }
.course-card__meta { margin-top:auto; display:grid; gap:9px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.76rem; }
.course-card__meta span { display:flex; align-items:center; gap:8px; }
.course-card__meta svg { width:17px; height:17px; fill:none; stroke:var(--blue); stroke-width:1.7; }
.course-card__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.course-visual { position:relative; overflow:hidden; padding:24px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; }
.course-visual__kicker { position:relative; z-index:3; font-size:.69rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; opacity:.78; }
.course-visual strong { position:relative; z-index:3; font-size:clamp(2.3rem,4vw,4rem); line-height:.9; letter-spacing:-.06em; }
.course-visual__orb { position:absolute; width:240px; aspect-ratio:1; right:-65px; top:-75px; border-radius:50%; background:rgba(255,255,255,.16); box-shadow:0 0 0 42px rgba(255,255,255,.07),0 0 0 84px rgba(255,255,255,.04); }
.course-visual__grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(135deg,#000,transparent 65%); }
.course-visual--blue { background:linear-gradient(145deg,var(--blue),var(--blue-2)); }
.course-visual--cyan { background:linear-gradient(145deg,var(--cyan),#00a4a9); color:var(--navy); }
.course-visual--orange { background:linear-gradient(145deg,var(--orange),#ffcb55); color:var(--navy); }
.course-visual--navy { background:linear-gradient(145deg,var(--navy),#203c94); }
.course-visual--mix { background:linear-gradient(135deg,var(--blue) 0 46%,var(--cyan) 46% 72%,var(--orange) 72%); }
.course-visual--gradient { background:linear-gradient(135deg,var(--blue),var(--cyan) 58%,var(--orange)); color:var(--navy); }

/* Method */
.method-header { display:grid; grid-template-columns:180px 1fr; gap:50px; align-items:start; margin-bottom:60px; }
.method-header h2 { max-width:900px; }
.method-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:30px; overflow:hidden; }
.method-item { min-height:340px; padding:28px; border-right:1px solid var(--line); background:#fff; }
.method-item:last-child { border-right:0; }
.method-item > span { color:var(--blue); font-size:.72rem; font-weight:900; letter-spacing:.1em; }
.method-item__icon { width:52px; height:52px; margin:50px 0 28px; display:grid; place-items:center; border-radius:16px; background:var(--soft); color:var(--blue); }
.method-item__icon svg { width:24px; fill:none; stroke:currentColor; stroke-width:1.7; }
.method-item h3 { font-size:1.45rem; }
.method-item p { margin:0; font-size:.9rem; }

/* Audience features */
.dual-audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.audience-feature { position:relative; min-height:570px; overflow:hidden; padding:clamp(32px,5vw,54px); display:flex; border-radius:38px; }
.audience-feature--kids { background:linear-gradient(145deg,#f6fbff,#dffeff); }
.audience-feature--teachers { background:linear-gradient(145deg,var(--navy),#173589); color:#fff; }
.audience-feature__content { position:relative; z-index:3; max-width:520px; align-self:flex-start; }
.audience-feature h2 { font-size:clamp(2.25rem,4.4vw,4.2rem); }
.audience-feature p { max-width:460px; }
.audience-feature--teachers p { color:rgba(255,255,255,.7); }
.audience-feature .button { margin-top:16px; }
.audience-feature__art { position:absolute; right:-50px; bottom:-60px; width:330px; aspect-ratio:1; }
.audience-feature__art--kids span { position:absolute; inset:55px; display:grid; place-items:center; border-radius:42px; background:var(--blue); color:#fff; font-size:6rem; font-weight:950; transform:rotate(8deg); }
.audience-feature__art--kids i { position:absolute; border-radius:24px; }
.audience-feature__art--kids i:nth-child(2) { width:100px;height:100px;left:0;top:34px;background:var(--cyan);transform:rotate(-10deg); }
.audience-feature__art--kids i:nth-child(3) { width:85px;height:85px;right:8px;top:0;background:var(--orange);transform:rotate(12deg); }
.audience-feature__art--kids i:nth-child(4) { width:120px;height:70px;left:18px;bottom:28px;background:#fff;border:1px solid var(--line);transform:rotate(-7deg); }
.audience-feature__art--teachers span { position:absolute; inset:60px; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(255,255,255,.65); color:var(--cyan); font-size:6rem; font-weight:300; }
.audience-feature__art--teachers i { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.audience-feature__art--teachers i:nth-child(2) { inset:20px; }
.audience-feature__art--teachers i:nth-child(3) { inset:-20px; }

/* Workshop banner */
.workshop-banner { position:relative; overflow:hidden; padding:55px; display:grid; grid-template-columns:180px 1fr auto; gap:50px; align-items:center; border-radius:42px; background:linear-gradient(125deg,var(--blue),#123ac6 45%,var(--cyan-dark)); color:#fff; box-shadow:var(--shadow-lg); }
.workshop-banner::after { content:""; position:absolute; right:-100px; top:-160px; width:380px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 0 60px rgba(255,255,255,.06),0 0 0 120px rgba(255,255,255,.035); }
.workshop-banner > * { position:relative; z-index:2; }
.workshop-banner__number { font-size:7rem; font-weight:950; line-height:.75; letter-spacing:-.08em; }
.workshop-banner__number span { display:block; margin-top:15px; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; }
.workshop-banner__copy h2 { font-size:clamp(2rem,4vw,4rem); }
.workshop-banner__copy p { max-width:680px; margin:0; color:rgba(255,255,255,.7); }
.workshop-banner__actions { display:grid; justify-items:start; gap:16px; }

/* Updates */
.updates-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.updates-grid--all { grid-template-columns:repeat(3,1fr); }
.update-card { min-height:420px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border-radius:30px; color:#fff; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.update-card:hover { transform:translateY(-7px) rotate(.4deg); box-shadow:var(--shadow-md); }
.update-card--blue { background:linear-gradient(145deg,var(--blue),var(--blue-2)); }
.update-card--cyan { background:linear-gradient(145deg,var(--cyan),#01a7aa); color:var(--navy); }
.update-card--orange { background:linear-gradient(145deg,var(--orange),#ffd462); color:var(--navy); }
.update-card--mix { background:linear-gradient(135deg,var(--blue) 0 45%,var(--cyan) 45% 73%,var(--orange) 73%); }
.update-card--gradient { background:linear-gradient(145deg,#174de7,var(--cyan)); color:var(--navy); }
.update-card--navy { background:linear-gradient(145deg,var(--navy),#1b337d); }
.update-card__top { display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.update-card__top svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.update-card h2, .update-card h3 { margin-bottom:14px; font-size:clamp(1.7rem,3vw,2.8rem); }
.update-card p { color:inherit; opacity:.72; }
.update-card__link { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:850; }
.update-card__link svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,8vw,110px); }
.faq-intro { position:sticky; top:110px; align-self:start; }
.faq-intro p { max-width:470px; }
.faq-intro .button { margin-top:16px; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-item summary { position:relative; list-style:none; padding:24px 46px 24px 0; display:flex; gap:20px; color:var(--navy); font-weight:850; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { color:var(--blue); font-size:.72rem; letter-spacing:.1em; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:17px; color:var(--blue); font-size:1.7rem; font-weight:300; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { padding-left:38px; padding-right:44px; margin-bottom:26px; }

/* Final CTA */
.final-cta-section { padding-top:60px; }
.final-cta { position:relative; overflow:hidden; padding:clamp(38px,6vw,72px); display:grid; grid-template-columns:130px 1fr auto; gap:42px; align-items:center; border-radius:46px; background:linear-gradient(125deg,var(--blue-2),var(--blue),#006fcb); color:#fff; box-shadow:var(--shadow-lg); }
.final-cta::after { content:""; position:absolute; right:-120px; bottom:-180px; width:420px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--cyan),transparent 68%); opacity:.2; }
.final-cta > * { position:relative; z-index:2; }
.final-cta__symbol { width:120px; aspect-ratio:1; display:grid; place-items:center; border-radius:32px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); transform:rotate(-5deg); }
.final-cta__symbol span { font-size:4.4rem; font-weight:950; }
.final-cta__copy h2 { margin-bottom:12px; font-size:clamp(2.1rem,4vw,4rem); }
.final-cta__copy p { margin:0; color:rgba(255,255,255,.7); }
.final-cta__actions { display:grid; justify-items:start; gap:16px; }

/* Page hero */
.page-hero { position:relative; overflow:hidden; padding:clamp(88px,11vw,150px) 0 100px; background:linear-gradient(145deg,#f5f8ff,#fff 55%,#efffff); }
.page-hero::before { content:""; position:absolute; left:-180px; top:-200px; width:470px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(2,212,208,.3),transparent 70%); }
.page-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr .72fr; gap:60px; align-items:center; }
.page-hero__copy { max-width:820px; }
.page-hero h1 { margin-bottom:24px; }
.page-hero__copy > p { max-width:680px; font-size:1.12rem; }
.page-hero__art { position:relative; min-height:360px; }
.page-hero__disc { position:absolute; display:grid; place-items:center; border-radius:50%; font-weight:950; box-shadow:var(--shadow-md); }
.page-hero__disc--one { width:210px; height:210px; right:35px; top:15px; background:var(--blue); color:#fff; font-size:4rem; }
.page-hero__disc--two { width:150px; height:150px; left:20px; bottom:5px; background:var(--cyan); color:var(--navy); transform:rotate(-8deg); }
.page-hero__disc--three { width:120px; height:120px; right:0; bottom:0; background:var(--orange); color:var(--navy); transform:rotate(10deg); }

/* Catalog */
.catalog-toolbar { padding:20px; display:grid; grid-template-columns:1.35fr repeat(3,1fr) auto; gap:12px; align-items:end; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow-sm); }
.catalog-search, .catalog-filter { display:grid; gap:7px; }
.catalog-toolbar label, .field label { color:var(--navy); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.catalog-search__field { position:relative; }
.catalog-search__field svg { position:absolute; left:14px; top:50%; width:18px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.7; }
.catalog-toolbar input, .catalog-toolbar select, .field input, .field select, .field textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:#fff; outline:none; transition:border-color .18s var(--ease),box-shadow .18s var(--ease); }
.catalog-toolbar input { padding-left:42px; }
.catalog-toolbar input:focus, .catalog-toolbar select:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(6,72,232,.1); }
.filter-reset { min-height:50px; padding:0 14px; border:0; background:none; color:var(--blue); font-size:.78rem; font-weight:850; }
.catalog-status { margin:30px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.catalog-status p { margin:0; color:var(--navy); }
.catalog-status span { color:var(--muted); font-size:.78rem; }
.empty-state { padding:80px 24px; text-align:center; border-radius:30px; background:var(--soft); }
.empty-state__icon { width:58px; height:58px; margin:0 auto 22px; display:grid; place-items:center; border-radius:18px; background:#fff; color:var(--blue); }
.empty-state__icon svg { width:28px; fill:none; stroke:currentColor; stroke-width:1.7; }
.catalog-help-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.catalog-help__intro { max-width:500px; }
.mini-form { padding:28px; border-radius:28px; background:#fff; box-shadow:var(--shadow-sm); }
.mini-form__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

/* Course detail */
.course-detail-hero { position:relative; overflow:hidden; padding:44px 0 100px; background:linear-gradient(145deg,#f5f8ff,#fff,#efffff); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:46px; color:var(--muted); font-size:.78rem; }
.breadcrumbs a:hover { color:var(--blue); }
.course-detail-hero__grid { display:grid; grid-template-columns:1.02fr .98fr; gap:70px; align-items:center; }
.course-detail-hero__area { margin:18px 0 12px; color:var(--blue); font-size:.77rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.course-detail-hero h1 { margin-bottom:24px; font-size:clamp(3rem,6.5vw,6.6rem); }
.course-detail-hero__lead { max-width:700px; font-size:1.12rem; }
.course-detail-visual { min-height:500px; border-radius:42px; box-shadow:var(--shadow-lg); transform:rotate(1.5deg); }
.course-detail-visual strong { font-size:clamp(5rem,10vw,9rem); }
.course-facts-section { position:relative; z-index:4; margin-top:-34px; }
.course-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); border-radius:24px; background:#fff; box-shadow:var(--shadow-md); overflow:hidden; }
.course-facts-grid > div { padding:24px; border-right:1px solid var(--line); }
.course-facts-grid > div:last-child { border-right:0; }
.course-facts-grid span { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--muted); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.course-facts-grid svg { width:17px; fill:none; stroke:var(--blue); stroke-width:1.7; }
.course-facts-grid strong { display:block; font-size:.98rem; }
.course-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:80px; align-items:start; }
.content-section + .content-section { margin-top:90px; }
.content-section h2 { max-width:800px; }
.known-list { list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.known-list li { min-height:100px; padding:20px; display:flex; align-items:flex-start; gap:14px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.known-list svg { width:23px; flex:none; fill:none; stroke:var(--cyan-dark); stroke-width:2; }
.truth-section { padding:32px; display:grid; grid-template-columns:64px 1fr; gap:24px; border-radius:28px; background:var(--soft); }
.truth-section__icon { width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:var(--blue); color:#fff; }
.truth-section__icon svg { width:30px; fill:none; stroke:currentColor; stroke-width:1.7; }
.truth-section h2 { font-size:clamp(1.9rem,3.5vw,3.2rem); }
.steps-list { margin-top:36px; border-top:1px solid var(--line); }
.steps-list > div { display:grid; grid-template-columns:54px 210px 1fr; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); }
.steps-list > div > span { color:var(--blue); font-size:.72rem; font-weight:900; letter-spacing:.1em; }
.steps-list p { margin:0; }
.course-detail-sidebar { position:sticky; top:100px; }
.sidebar-card { padding:30px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow-sm); }
.sidebar-card__eyebrow { color:var(--blue); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.sidebar-card h2 { margin-top:12px; font-size:1.8rem; }
.sidebar-card dl { margin:24px 0; }
.sidebar-card dl > div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--line); font-size:.86rem; }
.sidebar-card dt { color:var(--muted); }
.sidebar-card dd { margin:0; text-align:right; font-weight:800; }
.sidebar-card__instagram { margin-top:18px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--blue); font-size:.8rem; font-weight:850; }
.sidebar-card__instagram svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.mobile-course-cta { display:none; }

/* Audience heroes */
.audience-hero { position:relative; overflow:hidden; padding:clamp(90px,11vw,150px) 0 110px; }
.audience-hero--teachers { background:linear-gradient(145deg,var(--navy),#12368d); color:#fff; }
.audience-hero--kids { background:linear-gradient(145deg,#f3f8ff,#fff 50%,#e8ffff); }
.audience-hero__grid { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; }
.audience-hero h1 { margin-bottom:26px; }
.audience-hero__copy > p { max-width:700px; font-size:1.12rem; }
.audience-hero--teachers p { color:rgba(255,255,255,.7); }
.teacher-board { padding:22px; border-radius:30px; background:#f7f9ff; color:var(--navy); box-shadow:var(--shadow-lg); transform:rotate(2deg); }
.teacher-board__header { display:flex; align-items:center; gap:7px; padding:0 4px 18px; border-bottom:1px solid var(--line); font-size:.7rem; font-weight:900; }
.teacher-board__header span { margin-right:auto; }
.teacher-board__header i { width:9px; height:9px; border-radius:50%; background:var(--blue); }
.teacher-board__header i:nth-child(3) { background:var(--cyan); }
.teacher-board__header i:nth-child(4) { background:var(--orange); }
.teacher-board__content { padding:32px 12px 16px; }
.teacher-board__main span { display:block; color:var(--muted); font-size:1.4rem; }
.teacher-board__main strong { display:block; color:var(--blue); font-size:clamp(3rem,6vw,5.4rem); line-height:.95; }
.teacher-board__chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:44px; }
.teacher-board__chips span { padding:9px 12px; border-radius:999px; background:var(--soft); font-size:.72rem; font-weight:850; }
.teacher-board__line { height:8px; margin-top:28px; border-radius:99px; background:#e9edfa; overflow:hidden; }
.teacher-board__line span { display:block; width:72%; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.topic-card { min-height:350px; padding:28px; display:flex; flex-direction:column; border-radius:28px; background:#fff; box-shadow:var(--shadow-sm); }
.topic-card > span { font-size:.72rem; font-weight:900; letter-spacing:.1em; }
.topic-card__icon { width:54px; height:54px; margin:52px 0 32px; display:grid; place-items:center; border-radius:18px; }
.topic-card__icon svg { width:25px; fill:none; stroke:currentColor; stroke-width:1.7; }
.topic-card h3 { margin-top:auto; }
.topic-card p { margin-bottom:0; font-size:.9rem; }
.topic-card--blue > span,.topic-card--blue .topic-card__icon { color:var(--blue); }.topic-card--blue .topic-card__icon{background:#e9efff;}
.topic-card--cyan > span,.topic-card--cyan .topic-card__icon { color:#008f93; }.topic-card--cyan .topic-card__icon{background:#dffffe;}
.topic-card--orange > span,.topic-card--orange .topic-card__icon { color:#a56700; }.topic-card--orange .topic-card__icon{background:#fff2d0;}
.topic-card--navy > span,.topic-card--navy .topic-card__icon { color:var(--navy); }.topic-card--navy .topic-card__icon{background:#e9ebf4;}
.truth-banner { padding:38px; display:grid; grid-template-columns:76px 1fr auto; gap:30px; align-items:center; border-radius:32px; background:#fff; box-shadow:var(--shadow-sm); }
.truth-banner__icon { width:76px; aspect-ratio:1; display:grid; place-items:center; border-radius:22px; background:linear-gradient(145deg,var(--cyan),var(--blue)); color:#fff; }
.truth-banner__icon svg { width:34px; fill:none; stroke:currentColor; stroke-width:2; }
.truth-banner h2 { font-size:clamp(1.8rem,3vw,2.8rem); }
.truth-banner p { margin:0; }
.split-feature { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.check-list { list-style:none; padding:0; margin:30px 0 0; }
.check-list li { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:800; }
.check-list svg { width:21px; fill:none; stroke:var(--cyan-dark); stroke-width:2; }
.education-art { position:relative; min-height:520px; }
.education-art__screen { position:absolute; inset:35px 30px 60px; padding:42px; display:grid; place-items:center; align-content:center; border-radius:36px; background:var(--navy); color:#fff; box-shadow:var(--shadow-lg); transform:rotate(2deg); text-align:center; }
.education-art__screen span { color:var(--cyan); font-size:.75rem; font-weight:900; letter-spacing:.14em; }
.education-art__screen strong { margin:10px; font-size:6rem; font-weight:300; line-height:.8; }
.education-art__screen i { margin:12px; color:var(--orange); font-size:2rem; font-style:normal; }
.education-art__screen b { font-size:2.1rem; }
.education-art__card { position:absolute; z-index:3; padding:14px 18px; border-radius:16px; background:#fff; box-shadow:var(--shadow-md); font-weight:850; }
.education-art__card--one { left:0; top:25px; transform:rotate(-8deg); color:var(--blue); }
.education-art__card--two { right:0; top:120px; transform:rotate(8deg); color:var(--cyan-dark); }
.education-art__card--three { left:45px; bottom:15px; transform:rotate(-5deg); color:#9a6200; }

/* Kids */
.kids-lab { position:relative; min-height:520px; }
.kids-lab__window { position:absolute; inset:40px 10px 40px 30px; border:1px solid var(--line); border-radius:32px; background:#fff; box-shadow:var(--shadow-lg); transform:rotate(2deg); overflow:hidden; }
.kids-lab__bar { height:48px; padding:0 18px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); }
.kids-lab__bar i { width:9px;height:9px;border-radius:50%;background:var(--blue); }.kids-lab__bar i:nth-child(2){background:var(--cyan)}.kids-lab__bar i:nth-child(3){background:var(--orange)}
.kids-lab__canvas { position:relative; height:calc(100% - 48px); background-image:linear-gradient(rgba(6,72,232,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(6,72,232,.055) 1px,transparent 1px); background-size:32px 32px; }
.kids-lab__canvas b { position:absolute; left:50%; top:50%; width:140px; height:140px; display:grid; place-items:center; border-radius:36px; background:var(--blue); color:#fff; font-size:5.5rem; transform:translate(-50%,-50%) rotate(-5deg); }
.kids-lab__block { position:absolute; padding:11px 15px; border-radius:14px; font-size:.75rem; font-weight:900; box-shadow:var(--shadow-sm); }
.kids-lab__block--one { left:40px; top:55px; background:var(--cyan); transform:rotate(-8deg); }
.kids-lab__block--two { right:38px; top:105px; background:var(--orange); transform:rotate(8deg); }
.kids-lab__block--three { left:72px; bottom:50px; background:var(--navy); color:#fff; transform:rotate(6deg); }
.kids-lab__note { position:absolute; z-index:4; padding:12px 16px; border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); font-size:.75rem; font-weight:850; }
.kids-lab__note--one { left:0; bottom:56px; transform:rotate(-5deg); }
.kids-lab__note--two { right:0; top:15px; transform:rotate(5deg); }
.fact-panels { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fact-panel { min-height:300px; padding:28px; border:1px solid var(--line); border-radius:26px; background:#fff; }
.fact-panel > span { color:var(--blue); font-size:.72rem; font-weight:900; letter-spacing:.1em; }
.fact-panel h3 { margin-top:82px; }
.fact-panel p { margin-bottom:0; font-size:.9rem; }
.parent-guide-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.question-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.question-checklist > div { min-height:110px; padding:20px; display:flex; gap:14px; align-items:flex-start; border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.question-checklist span { color:var(--blue); font-size:.7rem; font-weight:900; }
.course-highlight { display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.course-highlight__visual { min-height:480px; border-radius:38px; box-shadow:var(--shadow-lg); }
.course-highlight__copy { max-width:600px; }
.course-highlight__copy .status { margin-bottom:20px; }

/* Workshops */
.workshops-hero { position:relative; overflow:hidden; padding:clamp(95px,12vw,160px) 0 120px; background:linear-gradient(135deg,var(--blue-2),var(--blue) 50%,#008bc4); color:#fff; }
.workshops-hero__mesh { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,#000,transparent); }
.workshops-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr .7fr; gap:80px; align-items:center; }
.workshops-hero h1 { margin-bottom:26px; }
.workshops-hero p { max-width:700px; color:rgba(255,255,255,.72); font-size:1.14rem; }
.workshops-clock { position:relative; width:min(420px,100%); aspect-ratio:1; margin-left:auto; display:grid; place-items:center; align-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); box-shadow:inset 0 0 80px rgba(255,255,255,.06),var(--shadow-lg); backdrop-filter:blur(10px); }
.workshops-clock > span { font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em; }
.workshops-clock strong { font-size:10rem; line-height:.8; letter-spacing:-.1em; }
.workshops-clock b { margin-top:16px; color:var(--cyan); letter-spacing:.16em; }
.workshops-clock__ring { position:absolute; inset:38px; border-radius:50%; border:1px dashed rgba(255,255,255,.35); animation:spin 28s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.confirmed-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.confirmed-card { min-height:320px; padding:28px; display:flex; flex-direction:column; border-radius:28px; background:var(--soft); }
.confirmed-card strong { font-size:clamp(2.8rem,5vw,5rem); letter-spacing:-.07em; color:var(--blue); }
.confirmed-card > span { margin-top:auto; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.confirmed-card p { margin:10px 0 0; font-size:.9rem; }
.workshop-questions-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.contact-form--compact { padding:30px; }
.workshop-principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.workshop-principles article { padding:36px; border-right:1px solid var(--line); }
.workshop-principles article:last-child { border-right:0; }
.workshop-principles span { color:var(--blue); font-size:.72rem; font-weight:900; }
.workshop-principles h3 { margin-top:70px; font-size:2rem; }
.workshop-principles p { margin:0; }

/* About */
.about-hero { position:relative; overflow:hidden; padding:clamp(100px,12vw,170px) 0 110px; background:linear-gradient(145deg,#f6f9ff,#fff,#edffff); }
.about-hero::after { content:"A"; position:absolute; right:-4vw; bottom:-12vw; color:rgba(6,72,232,.04); font-size:48vw; font-weight:950; line-height:.7; }
.about-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr .7fr; gap:80px; align-items:end; }
.about-hero__copy p { max-width:680px; font-size:1.13rem; }
.about-hero__quote { padding:34px; border-radius:28px; background:#fff; box-shadow:var(--shadow-md); }
.about-hero__quote > span { color:var(--cyan); font-size:5rem; line-height:.6; }
.about-hero__quote p { margin:18px 0; color:var(--navy); font-size:1.35rem; line-height:1.5; }
.about-hero__quote small { color:var(--muted); }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-card { min-height:340px; padding:28px; display:flex; flex-direction:column; border-radius:28px; }
.value-card > span { font-size:.72rem; font-weight:900; letter-spacing:.1em; }
.value-card h3 { margin-top:auto; font-size:2rem; }
.value-card p { margin-bottom:0; }
.value-card--blue { background:var(--blue); color:#fff; }.value-card--blue p{color:rgba(255,255,255,.7)}
.value-card--cyan { background:var(--cyan); color:var(--navy); }.value-card--cyan p{color:rgba(13,21,55,.7)}
.value-card--orange { background:var(--orange); color:var(--navy); }.value-card--orange p{color:rgba(13,21,55,.7)}
.value-card--navy { background:var(--navy); color:#fff; }.value-card--navy p{color:rgba(255,255,255,.7)}
.identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.identity-art { position:relative; min-height:560px; display:grid; place-items:center; border-radius:42px; background:var(--soft); overflow:hidden; }
.identity-art img { position:relative; z-index:2; width:250px; height:250px; object-fit:cover; border-radius:40px; box-shadow:var(--shadow-md); }
.identity-art__palette { position:absolute; left:30px; top:30px; display:flex; gap:9px; }
.identity-art__palette span { width:38px; height:38px; border-radius:12px; background:var(--swatch); box-shadow:0 7px 20px rgba(0,0,0,.12); }
.identity-art__words { position:absolute; right:20px; bottom:24px; display:grid; gap:6px; color:var(--blue); font-size:2rem; font-weight:950; line-height:1; transform:rotate(-5deg); }
.identity-copy p { font-size:1.06rem; }
.identity-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; }
.identity-points div { padding:16px; border:1px solid var(--line); border-radius:16px; }
.identity-points strong, .identity-points span { display:block; }
.identity-points span { margin-top:5px; color:var(--muted); font-size:.75rem; }
.ecosystem-card { padding:44px; display:flex; align-items:center; justify-content:space-between; gap:40px; border-radius:34px; background:#fff; box-shadow:var(--shadow-sm); }
.ecosystem-card > div { max-width:800px; }
.ecosystem-card h2 { font-size:clamp(2rem,3.5vw,3.4rem); }
.ecosystem-card p { margin:0; }

/* News phone */
.instagram-phone { width:300px; min-height:520px; margin-left:auto; padding:16px; border:10px solid var(--navy); border-radius:42px; background:#fff; box-shadow:var(--shadow-lg); transform:rotate(4deg); }
.instagram-phone__top { display:flex; align-items:center; gap:10px; padding:5px 3px 14px; font-size:.75rem; font-weight:850; }
.instagram-phone__top img { width:34px; height:34px; border-radius:50%; }
.instagram-phone__post { min-height:340px; padding:25px; display:flex; flex-direction:column; justify-content:center; border-radius:22px; background:linear-gradient(145deg,var(--blue),var(--cyan)); color:#fff; }
.instagram-phone__post span,.instagram-phone__post b { font-size:.82rem; letter-spacing:.13em; }
.instagram-phone__post strong { font-size:3.5rem; line-height:1; }
.instagram-phone__icons { display:flex; gap:16px; padding:16px 6px 2px; font-size:1.2rem; }
.sources-note { padding:40px; display:grid; grid-template-columns:70px 1fr auto; gap:30px; align-items:center; border-radius:32px; background:#fff; box-shadow:var(--shadow-sm); }
.sources-note__icon { width:70px; height:70px; display:grid; place-items:center; border-radius:20px; background:var(--cyan); color:var(--navy); }
.sources-note__icon svg { width:30px; fill:none; stroke:currentColor; stroke-width:2; }
.sources-note h2 { font-size:clamp(1.8rem,3vw,2.8rem); }
.sources-note p { margin:0; }

/* Contact */
.contact-hero { position:relative; overflow:hidden; padding:clamp(95px,12vw,160px) 0 100px; background:linear-gradient(145deg,#f4f8ff,#fff,#eaffff); }
.contact-hero__grid { display:grid; grid-template-columns:1fr .65fr; gap:80px; align-items:center; }
.contact-hero__copy > p { max-width:680px; font-size:1.12rem; }
.contact-direct { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:38px; }
.contact-direct > * { padding:16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.contact-direct svg { width:23px; flex:none; fill:none; stroke:var(--blue); stroke-width:1.7; }
.contact-direct span, .contact-direct strong { display:block; }
.contact-direct span { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.contact-direct strong { font-size:.82rem; }
.contact-hero__symbol { position:relative; width:min(420px,100%); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(6,72,232,.14); }
.contact-hero__symbol span { width:180px; height:180px; display:grid; place-items:center; border-radius:46px; background:var(--blue); color:#fff; font-size:7rem; font-weight:950; transform:rotate(-6deg); box-shadow:var(--shadow-lg); }
.contact-hero__symbol i { position:absolute; border-radius:50%; border:1px solid rgba(6,72,232,.14); }
.contact-hero__symbol i:nth-child(2){inset:35px}.contact-hero__symbol i:nth-child(3){inset:75px}.contact-hero__symbol i:nth-child(4){width:22px;height:22px;right:38px;top:80px;background:var(--orange);border:0}
.contact-form-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.contact-form-intro { position:sticky; top:100px; }
.contact-form-help { margin-top:34px; padding:24px; border-radius:20px; background:var(--soft); }
.contact-form-help ul { list-style:none; padding:0; margin:14px 0 0; }
.contact-form-help li { display:flex; gap:9px; align-items:center; padding:7px 0; font-size:.86rem; }
.contact-form-help svg { width:18px; fill:none; stroke:var(--cyan-dark); stroke-width:2; }
.contact-form { padding:clamp(26px,4vw,44px); border:1px solid var(--line); border-radius:34px; background:#fff; box-shadow:var(--shadow-md); }
.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:grid; gap:7px; margin-bottom:18px; }
.field textarea { min-height:145px; resize:vertical; }
.field small, .consent-error { min-height:18px; color:#bd2938; font-size:.75rem; }
.consent-check { margin:4px 0 18px; display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.8rem; cursor:pointer; }
.consent-check input { width:18px; height:18px; margin-top:2px; accent-color:var(--blue); }
.form-note { margin:12px 0 0; text-align:center; font-size:.76rem; }
.contact-faq-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; }

/* Legal */
.legal-hero { padding:100px 0 70px; background:linear-gradient(145deg,#f5f8ff,#fff); }
.legal-hero h1 { max-width:800px; }
.legal-layout { display:grid; grid-template-columns:240px 1fr; gap:80px; align-items:start; }
.legal-index { position:sticky; top:100px; display:grid; gap:12px; padding:22px; border-radius:18px; background:var(--soft); }
.legal-index strong { margin-bottom:5px; }
.legal-index a { color:var(--muted); font-size:.84rem; }
.legal-index a:hover { color:var(--blue); }
.legal-content { max-width:840px; }
.legal-content > p:first-child { color:var(--navy); font-size:1.18rem; }
.legal-content h2 { margin-top:50px; font-size:1.8rem; }
.legal-content a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* 404 */
.not-found { position:relative; overflow:hidden; min-height:72vh; padding:110px 0; display:grid; place-items:center; background:linear-gradient(145deg,var(--navy),#123785); color:#fff; }
.not-found__content { position:relative; z-index:2; max-width:850px; text-align:center; }
.not-found__code { display:block; color:var(--cyan); font-size:clamp(7rem,20vw,15rem); font-weight:950; line-height:.75; letter-spacing:-.1em; }
.not-found h1 { margin-top:25px; }
.not-found p { color:rgba(255,255,255,.7); }
.not-found .hero__actions { justify-content:center; }
.not-found__orbit { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.13); }
.not-found__orbit--one { width:520px;height:520px;left:-180px;top:-180px;box-shadow:0 0 0 80px rgba(255,255,255,.04),0 0 0 160px rgba(255,255,255,.025); }
.not-found__orbit--two { width:440px;height:440px;right:-140px;bottom:-160px;box-shadow:0 0 0 70px rgba(2,212,208,.06); }

/* Footer */
.site-footer { position:relative; overflow:hidden; padding:86px 0 28px; background:var(--navy); color:#fff; }
.footer-orbit { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.footer-orbit--one { width:380px;height:380px;right:-170px;top:-160px;box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018); }
.footer-orbit--two { width:250px;height:250px;left:-130px;bottom:-90px; }
.footer-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:60px; }
.brand--footer img { width:90px; height:90px; border-radius:22px; }
.footer-brand p { max-width:330px; margin:22px 0; color:rgba(255,255,255,.62); }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;transition:.2s var(--ease); }
.footer-socials a:hover { background:var(--cyan); color:var(--navy); border-color:var(--cyan); transform:translateY(-3px); }
.footer-socials svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.footer-title { margin-bottom:20px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.footer-links, .footer-contact { list-style:none; padding:0; margin:0; color:rgba(255,255,255,.62); font-size:.86rem; }
.footer-links li + li, .footer-contact li + li { margin-top:11px; }
.footer-links a:hover, .footer-contact a:hover { color:#fff; }
.footer-contact li { display:flex; align-items:flex-start; gap:10px; }
.footer-contact svg { width:18px; flex:none; fill:none; stroke:var(--cyan); stroke-width:1.7; }
.footer-bottom { position:relative; z-index:2; margin-top:64px; padding-top:24px; display:flex; justify-content:space-between; gap:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.46); font-size:.74rem; }
.footer-bottom a:hover { color:#fff; }
.whatsapp-float { position:fixed; right:20px; bottom:20px; z-index:60; min-height:52px; padding:0 18px; display:flex; align-items:center; gap:9px; border-radius:999px; background:#19a968; color:#fff; box-shadow:0 16px 40px rgba(13,113,67,.27); font-size:.82rem; font-weight:900; transition:transform .2s var(--ease); }
.whatsapp-float:hover { transform:translateY(-4px); }
.whatsapp-float svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:12px 18px; border-radius:999px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:800; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:.2s var(--ease); }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1120px) {
    .nav { gap:18px; }
    .areas-bento { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .area-panel--large { grid-row:auto; grid-column:1/-1; min-height:430px; }
    .course-grid, .updates-grid, .updates-grid--all { grid-template-columns:repeat(2,1fr); }
    .topic-grid, .fact-panels, .confirmed-grid, .values-grid { grid-template-columns:repeat(2,1fr); }
    .method-flow { grid-template-columns:repeat(2,1fr); }
    .method-item:nth-child(2) { border-right:0; }
    .method-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
    .catalog-toolbar { grid-template-columns:repeat(2,1fr); }
    .catalog-search { grid-column:1/-1; }
    .filter-reset { justify-self:start; }
    .footer-grid { grid-template-columns:1.2fr repeat(3,1fr); gap:35px; }
}

@media (max-width: 900px) {
    :root { --header-height:72px; }
    .container { width:min(calc(100% - 28px),var(--container)); }
    .announcement__inner { justify-content:space-between; }
    .menu-toggle { display:block; }
    .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity:0; }
    .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .nav { position:fixed; inset:0; z-index:70; padding:115px 22px 40px; display:flex; flex-direction:column; align-items:stretch; gap:2px; background:#fff; overflow:auto; transform:translateX(100%); transition:transform .25s var(--ease); }
    .nav.is-open { transform:none; }
    .nav__link, .nav-dropdown__toggle { width:100%; padding:16px 4px; border-bottom:1px solid var(--line); text-align:left; font-size:1.15rem; }
    .nav-dropdown__toggle { justify-content:space-between; }
    .nav-dropdown__panel { position:static; width:100%; padding:8px 0; grid-template-columns:1fr; border:0; box-shadow:none; transform:none; display:none; opacity:1; visibility:visible; }
    .nav-dropdown.is-open .nav-dropdown__panel { display:grid; transform:none; }
    .nav-dropdown__panel a { padding:14px; background:var(--soft); }
    .button--header { margin-top:20px; }
    .hero { min-height:auto; padding-top:90px; }
    .hero__grid, .page-hero__grid, .course-detail-hero__grid, .audience-hero__grid, .workshops-hero__grid, .about-hero__grid, .contact-hero__grid, .identity-grid, .split-feature, .course-highlight { grid-template-columns:1fr; }
    .hero-stage { min-height:520px; max-width:600px; width:100%; margin-inline:auto; }
    .intro-grid { grid-template-columns:1fr; gap:28px; }
    .intro-side { max-width:620px; }
    .finder-shell { grid-template-columns:1fr; gap:30px; }
    .finder-result { grid-column:auto; }
    .dual-audience-grid { grid-template-columns:1fr; }
    .audience-feature { min-height:520px; }
    .workshop-banner { grid-template-columns:130px 1fr; }
    .workshop-banner__actions { grid-column:1/-1; display:flex; align-items:center; gap:24px; }
    .faq-grid, .catalog-help-grid, .course-detail-layout, .parent-guide-grid, .workshop-questions-grid, .contact-form-grid, .contact-faq-grid, .legal-layout { grid-template-columns:1fr; }
    .faq-intro, .contact-form-intro, .legal-index, .course-detail-sidebar { position:static; }
    .course-detail-sidebar { order:-1; }
    .course-facts-grid { grid-template-columns:repeat(2,1fr); }
    .course-facts-grid > div:nth-child(2) { border-right:0; }
    .course-facts-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
    .truth-banner, .sources-note { grid-template-columns:70px 1fr; }
    .truth-banner .button, .sources-note .button { grid-column:1/-1; justify-self:start; }
    .education-art, .kids-lab { min-height:480px; }
    .final-cta { grid-template-columns:100px 1fr; }
    .final-cta__symbol { width:100px; }
    .final-cta__actions { grid-column:1/-1; display:flex; align-items:center; gap:24px; }
    .contact-direct { grid-template-columns:1fr; max-width:430px; }
    .contact-hero__symbol { margin-inline:auto; }
    .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
    .footer-grid > div:last-child { grid-column:1/-1; }
}

@media (max-width: 660px) {
    h1 { font-size:clamp(3rem,15.5vw,4.8rem); }
    h2 { font-size:clamp(2rem,10.7vw,3.4rem); }
    .section { padding:78px 0; }
    .announcement { font-size:.7rem; }
    .announcement__message svg { display:none; }
    .announcement a svg { display:none; }
    .brand img { width:62px; height:62px; }
    .hero { padding:72px 0 95px; }
    .hero__badge { font-size:.7rem; }
    .hero__actions, .final-cta__actions, .workshop-banner__actions { width:100%; align-items:stretch; flex-direction:column; }
    .hero__actions .button, .final-cta__actions .button, .workshop-banner__actions .button { width:100%; }
    .hero__facts { grid-template-columns:1fr; gap:12px; }
    .hero__facts div { padding-bottom:10px; border-bottom:1px solid var(--line); }
    .hero-stage { min-height:430px; }
    .hero-stage__logo-card { width:250px; height:175px; padding:20px; }
    .hero-stage__logo-card img { width:78px; height:78px; }
    .hero-stage__tile { width:122px; padding:15px; border-radius:22px; }
    .hero-stage__tile strong { font-size:.95rem; }
    .hero-stage__tile--ia { right:5px; top:28px; }
    .hero-stage__tile--design { left:0; top:65px; }
    .hero-stage__tile--creative { right:10px; bottom:28px; }
    .hero-stage__floating--one { left:10px; bottom:46px; }
    .hero-stage__floating--two { right:0; top:210px; }
    .hero__scroll { display:none; }
    .section-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:38px; }
    .areas-bento { grid-template-columns:1fr; }
    .area-panel--large { grid-column:auto; min-height:390px; }
    .area-panel { min-height:285px; }
    .finder-shell { padding:28px; border-radius:30px; }
    .finder-result { align-items:flex-start; flex-direction:column; }
    .course-grid, .updates-grid, .updates-grid--all, .topic-grid, .fact-panels, .confirmed-grid, .values-grid, .question-checklist { grid-template-columns:1fr; }
    .method-header { grid-template-columns:1fr; gap:20px; }
    .method-flow { grid-template-columns:1fr; }
    .method-item { min-height:280px; border-right:0; border-bottom:1px solid var(--line); }
    .method-item:last-child { border-bottom:0; }
    .method-item__icon { margin:36px 0 24px; }
    .audience-feature { min-height:590px; padding:28px; }
    .audience-feature__art { width:270px; }
    .workshop-banner { padding:30px; grid-template-columns:1fr; gap:28px; border-radius:30px; }
    .workshop-banner__number { font-size:5rem; }
    .faq-item summary { gap:12px; }
    .faq-item p { padding-left:0; }
    .final-cta { padding:30px; grid-template-columns:1fr; border-radius:32px; }
    .final-cta__symbol { width:88px; }
    .page-hero { padding:80px 0 72px; }
    .page-hero__art { min-height:300px; }
    .page-hero__disc--one { width:175px;height:175px;right:25px; }
    .page-hero__disc--two { width:120px;height:120px;left:0; }
    .page-hero__disc--three { width:95px;height:95px; }
    .catalog-toolbar, .mini-form__grid, .form-row { grid-template-columns:1fr; }
    .catalog-search { grid-column:auto; }
    .catalog-status { align-items:flex-start; flex-direction:column; }
    .course-detail-visual { min-height:350px; }
    .course-facts-grid { grid-template-columns:1fr; }
    .course-facts-grid > div { border-right:0; border-bottom:1px solid var(--line); }
    .course-facts-grid > div:last-child { border-bottom:0; }
    .known-list { grid-template-columns:1fr; }
    .truth-section { grid-template-columns:1fr; }
    .steps-list > div { grid-template-columns:42px 1fr; }
    .steps-list p { grid-column:2; }
    .mobile-course-cta { position:fixed; z-index:65; left:12px; right:12px; bottom:12px; min-height:52px; padding:0 18px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; background:var(--blue); color:#fff; box-shadow:var(--shadow-lg); font-size:.8rem; font-weight:900; }
    .mobile-course-cta svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
    .mobile-course-cta ~ .site-footer { padding-bottom:80px; }
    .truth-banner, .sources-note { grid-template-columns:1fr; padding:28px; }
    .teacher-board { transform:none; }
    .education-art, .kids-lab { min-height:400px; }
    .education-art__screen { inset:30px 10px 50px; padding:28px; }
    .education-art__screen strong { font-size:4.7rem; }
    .kids-lab__window { inset:30px 0 40px; }
    .workshops-clock { margin:20px auto 0; }
    .workshops-clock strong { font-size:8rem; }
    .workshop-principles { grid-template-columns:1fr; }
    .workshop-principles article { border-right:0; border-bottom:1px solid var(--line); }
    .workshop-principles article:last-child { border-bottom:0; }
    .identity-art { min-height:430px; }
    .identity-art img { width:190px;height:190px; }
    .identity-art__words { font-size:1.4rem; }
    .identity-points { grid-template-columns:1fr; }
    .ecosystem-card { padding:28px; align-items:flex-start; flex-direction:column; }
    .instagram-phone { margin-inline:auto; }
    .contact-hero__symbol { max-width:320px; }
    .contact-hero__symbol span { width:140px;height:140px;font-size:5rem; }
    .legal-index { display:none; }
    .footer-grid { grid-template-columns:1fr; gap:38px; }
    .footer-grid > div:last-child { grid-column:auto; }
    .footer-bottom { flex-direction:column; gap:7px; }
    .whatsapp-float { width:52px; padding:0; justify-content:center; }
    .whatsapp-float span { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
    .reveal { opacity:1; transform:none; }
}


/* ==========================================================
   ACTIVA DIGITAL — NUEVO INDEX
   Diseño editorial, directo y basado en los colores del logo
   ========================================================== */

   :root {
    --activa-blue: #0757e8;
    --activa-blue-dark: #0039b8;
    --activa-cyan: #12ced3;
    --activa-cyan-dark: #079da6;
    --activa-orange: #ff9d00;
    --activa-orange-dark: #dd7600;

    --activa-navy: #111b3f;
    --activa-text: #1c2440;
    --activa-muted: #687087;
    --activa-light: #f5f7fb;
    --activa-line: #dfe4ef;
    --activa-white: #ffffff;

    --activa-container: 1180px;
    --activa-radius: 8px;
}


/* ==========================================================
   AJUSTES GENERALES
   ========================================================== */

.home-page {
    background: var(--activa-white);
    color: var(--activa-text);
}

.home-page main {
    overflow: hidden;
}

.home-page h1,
.home-page h2,
.home-page h3 {
    color: var(--activa-navy);
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    letter-spacing: -0.035em;
}

.home-page p {
    color: var(--activa-muted);
}

.home-page svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-page .container {
    width: min(
        calc(100% - 40px),
        var(--activa-container)
    );
    margin-inline: auto;
}

.home-page .button {
    border-radius: var(--activa-radius);
    box-shadow: none;
}

.home-page .button:hover {
    box-shadow: none;
}


/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

.announcement {
    background: var(--activa-navy);
    color: var(--activa-white);
}

.announcement__inner {
    min-height: 36px;
    font-size: 0.76rem;
    font-weight: 700;
}

.announcement__message {
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement__message svg {
    display: none;
}

.announcement a {
    color: var(--activa-white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--activa-line);
    box-shadow: none;
    backdrop-filter: none;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--activa-line);
    box-shadow: 0 5px 18px rgba(17, 27, 63, 0.06);
}

.site-header__inner {
    min-height: 76px;
}

.brand {
    display: inline-flex;
    align-items: center;
}

.brand img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 0;
}

.site-header.is-scrolled .brand img {
    width: 62px;
    height: 62px;
}

.nav {
    gap: 28px;
}

.nav__link,
.nav-dropdown__toggle {
    position: relative;
    color: #545d75;
    font-size: 0.88rem;
    font-weight: 750;
}

.nav__link:hover,
.nav__link.is-active,
.nav-dropdown__toggle:hover {
    color: var(--activa-blue);
}

.nav__link::after,
.nav-dropdown__toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--activa-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 160ms ease;
}

.nav__link:hover::after,
.nav__link.is-active::after,
.nav-dropdown__toggle:hover::after {
    transform: scaleX(1);
}

.button--header {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--activa-blue);
    border-radius: 7px;
    background: var(--activa-blue);
    color: var(--activa-white);
    font-size: 0.85rem;
}

.button--header:hover {
    background: var(--activa-blue-dark);
    border-color: var(--activa-blue-dark);
    transform: none;
}


/* ==========================================================
   ELEMENTOS COMPARTIDOS DEL INDEX
   ========================================================== */

.home-kicker {
    margin: 0 0 18px;
    color: var(--activa-blue);
    font-size: 0.73rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.home-kicker--light {
    color: rgba(255, 255, 255, 0.72);
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: var(--activa-blue);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

.home-link svg {
    width: 17px;
    height: 17px;
    transition: transform 160ms ease;
}

.home-link:hover {
    color: var(--activa-blue-dark);
}

.home-link:hover svg {
    transform: translateX(3px);
}

.home-link--light {
    color: var(--activa-white);
}

.home-link--light:hover {
    color: var(--activa-white);
    opacity: 0.8;
}

.home-button {
    min-height: 52px;
    padding-inline: 22px;
    border: 1px solid var(--activa-blue);
    background: var(--activa-blue);
    color: var(--activa-white);
    font-size: 0.9rem;
    font-weight: 800;
}

.home-button:hover {
    background: var(--activa-blue-dark);
    border-color: var(--activa-blue-dark);
    transform: none;
}

.home-button--light {
    border-color: var(--activa-white);
    background: var(--activa-white);
    color: var(--activa-blue);
}

.home-button--light:hover {
    border-color: var(--activa-white);
    background: #eef4ff;
    color: var(--activa-blue-dark);
}

.home-section {
    padding: clamp(78px, 9vw, 125px) 0;
}

.home-section__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: 70px;
    align-items: end;
    margin-bottom: 50px;
}

.home-section__heading h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.25rem, 4.8vw, 4.5rem);
    line-height: 1.02;
}

.home-section__heading > p {
    margin: 0 0 5px;
    font-size: 0.98rem;
    line-height: 1.7;
}


/* ==========================================================
   HERO
   ========================================================== */

.home-hero {
    position: relative;
    padding: clamp(72px, 9vw, 125px) 0;
    background: var(--activa-white);
    border-bottom: 1px solid var(--activa-line);
}

.home-hero::before,
.home-hero::after {
    display: none;
}

.home-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.72fr);
    gap: clamp(55px, 8vw, 110px);
    align-items: center;
}

.home-hero__content {
    max-width: 760px;
}

.home-hero h1 {
    max-width: 780px;
    margin: 0 0 28px;
    font-size: clamp(3.2rem, 6.2vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.home-hero__lead {
    max-width: 660px;
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.26rem);
    line-height: 1.68;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-top: 34px;
}

.home-link--whatsapp {
    color: var(--activa-navy);
}

.home-link--whatsapp:hover {
    color: var(--activa-blue);
}

.home-hero__subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 29px;
    margin: 50px 0 0;
    padding: 24px 0 0;
    list-style: none;
    border-top: 1px solid var(--activa-line);
}

.home-hero__subjects li {
    position: relative;
    color: #596278;
    font-size: 0.79rem;
    font-weight: 750;
}

.home-hero__subjects li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--activa-orange);
    transform: translateY(-50%);
}


/* Panel derecho del hero */

.home-hero__panel {
    position: relative;
    min-height: 520px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    background: var(--activa-blue);
    color: var(--activa-white);
    border-radius: 0;
    overflow: hidden;
}

.home-hero__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 34%;
    background: var(--activa-orange);
}

.home-hero__panel::after {
    content: "";
    position: absolute;
    top: 34%;
    right: 0;
    width: 16px;
    height: 20%;
    background: var(--activa-cyan);
}

.home-hero__panel-head {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 25px;
    align-items: center;
    padding-right: 12px;
}

.home-hero__panel-head img {
    width: 116px;
    height: 116px;
    padding: 8px;
    object-fit: contain;
    background: var(--activa-white);
}

.home-hero__panel-head span {
    display: block;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-hero__panel-head strong {
    display: block;
    font-size: 1.3rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.home-hero__panel-list {
    margin: 45px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.23);
}

.home-hero__panel-list a {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    min-height: 57px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.23);
    color: var(--activa-white);
    font-size: 0.9rem;
    font-weight: 700;
}

.home-hero__panel-list a:hover {
    padding-left: 7px;
}

.home-hero__panel-list svg {
    width: 18px;
    height: 18px;
}

.home-hero__panel-foot {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.23);
}

.home-hero__panel-foot span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-hero__panel-foot strong {
    font-size: 0.94rem;
}


/* ==========================================================
   RESUMEN DEBAJO DEL HERO
   ========================================================== */

.home-summary {
    background: var(--activa-white);
    border-bottom: 1px solid var(--activa-line);
}

.home-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.home-summary__item {
    min-height: 184px;
    padding: 36px 38px 36px 0;
    border-right: 1px solid var(--activa-line);
}

.home-summary__item + .home-summary__item {
    padding-left: 38px;
}

.home-summary__item:last-child {
    border-right: 0;
}

.home-summary__item > span {
    display: block;
    margin-bottom: 12px;
    color: var(--activa-blue);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-summary__item strong {
    display: block;
    margin-bottom: 9px;
    color: var(--activa-navy);
    font-size: 1.08rem;
    line-height: 1.35;
}

.home-summary__item p {
    max-width: 310px;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.58;
}


/* ==========================================================
   SOBRE ACTIVA DIGITAL
   ========================================================== */

.home-about {
    background: var(--activa-light);
}

.home-about__grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1.15fr) minmax(280px, 0.7fr);
    gap: clamp(35px, 6vw, 85px);
    align-items: start;
}

.home-section__label {
    padding-top: 8px;
    color: var(--activa-blue);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-about__title h2 {
    margin: 0;
    font-size: clamp(2.25rem, 4.7vw, 4.45rem);
    line-height: 1.03;
}

.home-about__copy {
    padding-top: 8px;
}

.home-about__copy p {
    margin: 0 0 20px;
    font-size: 0.98rem;
    line-height: 1.73;
}

.home-about__copy .home-link {
    margin-top: 10px;
}


/* ==========================================================
   ÁREAS DE FORMACIÓN
   ========================================================== */

.home-areas {
    background: var(--activa-white);
}

.home-area-list {
    border-top: 1px solid var(--activa-line);
}

.home-area {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 250px)
        42px;
    gap: 35px;
    align-items: center;
    min-height: 175px;
    padding: 28px 18px 28px 30px;
    border-bottom: 1px solid var(--activa-line);
    border-left: 5px solid var(--activa-blue);
    background: var(--activa-white);
    transition:
        background-color 160ms ease,
        padding-left 160ms ease;
}

.home-area:hover {
    padding-left: 38px;
    background: #f8faff;
}

.home-area--cyan {
    border-left-color: var(--activa-cyan);
}

.home-area--orange {
    border-left-color: var(--activa-orange);
}

.home-area--navy {
    border-left-color: var(--activa-navy);
}

.home-area--mix {
    border-left-color: var(--activa-blue);
}

.home-area--mix::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 33%;
    width: 5px;
    height: 34%;
    background: var(--activa-orange);
}

.home-area--mix::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 5px;
    height: 33%;
    background: var(--activa-cyan);
}

.home-area__main > span {
    display: block;
    margin-bottom: 8px;
    color: var(--activa-muted);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-area h3 {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 2.8vw, 2.4rem);
    line-height: 1.1;
}

.home-area p {
    max-width: 690px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.home-area__meta {
    color: var(--activa-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.home-area__arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--activa-line);
    color: var(--activa-blue);
}

.home-area__arrow svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   CURSOS
   ========================================================== */

.home-courses {
    background: var(--activa-light);
}

.home-course-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-course {
    position: relative;
    min-height: 430px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: var(--activa-white);
    border: 1px solid var(--activa-line);
    border-top: 5px solid var(--activa-blue);
    border-radius: 0;
    box-shadow: none;
}

.home-course--cyan {
    border-top-color: var(--activa-cyan);
}

.home-course--orange {
    border-top-color: var(--activa-orange);
}

.home-course--navy {
    border-top-color: var(--activa-navy);
}

.home-course--blue {
    border-top-color: var(--activa-blue);
}

.home-course--mixed {
    border-top-color: var(--activa-blue);
}

.home-course__top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 34px;
}

.home-course__area,
.home-course__status {
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.home-course__area {
    color: var(--activa-blue);
}

.home-course__status {
    color: var(--activa-muted);
    text-align: right;
}

.home-course h3 {
    margin: 0 0 15px;
    font-size: 1.65rem;
    line-height: 1.1;
}

.home-course h3 a:hover {
    color: var(--activa-blue);
}

.home-course > p {
    margin: 0 0 26px;
    font-size: 0.9rem;
    line-height: 1.62;
}

.home-course__details {
    margin: auto 0 25px;
}

.home-course__details > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 15px;
    padding: 9px 0;
    border-top: 1px solid var(--activa-line);
}

.home-course__details > div:last-child {
    border-bottom: 1px solid var(--activa-line);
}

.home-course__details dt {
    color: var(--activa-muted);
    font-size: 0.7rem;
}

.home-course__details dd {
    margin: 0;
    color: var(--activa-text);
    font-size: 0.76rem;
    font-weight: 750;
}

.home-course__actions {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.home-course__whatsapp {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid var(--activa-line);
    color: var(--activa-blue);
}

.home-course__whatsapp:hover {
    border-color: var(--activa-blue);
    background: var(--activa-blue);
    color: var(--activa-white);
}

.home-course__whatsapp svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   NIÑOS Y DOCENTES
   ========================================================== */

.home-audiences {
    background: var(--activa-white);
}

.home-audiences__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.home-audience {
    position: relative;
    min-height: 505px;
    padding: clamp(34px, 5vw, 58px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.home-audience::before,
.home-audience::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.home-audience--kids {
    background: #e9fbfc;
    border: 1px solid #bdebee;
}

.home-audience--kids::before {
    top: 0;
    right: 0;
    width: 115px;
    height: 115px;
    background: var(--activa-cyan);
}

.home-audience--kids::after {
    top: 0;
    right: 115px;
    width: 64px;
    height: 64px;
    background: var(--activa-orange);
}

.home-audience--teachers {
    background: var(--activa-navy);
    color: var(--activa-white);
}

.home-audience--teachers::before {
    top: 0;
    right: 0;
    width: 18px;
    height: 55%;
    background: var(--activa-blue);
}

.home-audience--teachers::after {
    top: 55%;
    right: 0;
    width: 18px;
    height: 22%;
    background: var(--activa-orange);
}

.home-audience__content {
    position: relative;
    z-index: 2;
    max-width: 510px;
}

.home-audience h2 {
    margin: 0 0 22px;
    font-size: clamp(2rem, 4.2vw, 3.65rem);
    line-height: 1.03;
}

.home-audience p {
    max-width: 520px;
    margin: 0 0 27px;
    font-size: 0.96rem;
    line-height: 1.68;
}

.home-audience--teachers h2 {
    color: var(--activa-white);
}

.home-audience--teachers p {
    color: rgba(255, 255, 255, 0.68);
}

.home-audience--teachers .home-kicker {
    color: var(--activa-cyan);
}


/* ==========================================================
   TALLERES
   ========================================================== */

.home-workshops {
    background: var(--activa-white);
}

.home-workshops__box {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 230px;
    gap: clamp(35px, 6vw, 75px);
    align-items: center;
    padding: clamp(38px, 6vw, 68px);
    background: var(--activa-blue);
    color: var(--activa-white);
}

.home-workshops__duration {
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.home-workshops__duration strong {
    display: block;
    color: var(--activa-white);
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 850;
    line-height: 0.8;
    letter-spacing: -0.08em;
}

.home-workshops__duration span {
    display: block;
    margin-top: 14px;
    color: var(--activa-cyan);
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-workshops__content h2 {
    margin: 0 0 19px;
    color: var(--activa-white);
    font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: 1.02;
}

.home-workshops__content p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.68;
}

.home-workshops__content .home-kicker {
    color: var(--activa-cyan);
}

.home-workshops__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
}


/* ==========================================================
   NOVEDADES
   ========================================================== */

.home-updates {
    background: var(--activa-light);
}

.home-update-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-update {
    min-height: 335px;
    padding: 29px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--activa-line);
    border-top: 4px solid var(--activa-blue);
    background: var(--activa-white);
}

.home-update--cyan {
    border-top-color: var(--activa-cyan);
}

.home-update--orange {
    border-top-color: var(--activa-orange);
}

.home-update--navy {
    border-top-color: var(--activa-navy);
}

.home-update__type {
    margin-bottom: 48px;
    color: var(--activa-blue);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-update h3 {
    margin: 0 0 14px;
    font-size: 1.45rem;
    line-height: 1.15;
}

.home-update p {
    margin: 0 0 25px;
    font-size: 0.88rem;
    line-height: 1.6;
}

.home-update__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--activa-blue);
    font-size: 0.79rem;
    font-weight: 800;
}

.home-update__link svg {
    width: 16px;
    height: 16px;
}

.home-update:hover {
    border-color: #bfc9df;
}

.home-update:hover .home-update__link svg {
    transform: translateX(3px);
}


/* ==========================================================
   PREGUNTAS FRECUENTES
   ========================================================== */

.home-faq {
    background: var(--activa-white);
}

.home-faq__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(50px, 8vw, 105px);
    align-items: start;
}

.home-faq__intro {
    position: sticky;
    top: 115px;
}

.home-faq__intro h2 {
    margin: 0 0 23px;
    font-size: clamp(2.2rem, 4.3vw, 4rem);
    line-height: 1.02;
}

.home-faq__intro p {
    margin: 0 0 27px;
    font-size: 0.94rem;
    line-height: 1.7;
}

.home-faq__list {
    border-top: 1px solid var(--activa-line);
}

.home-faq__item {
    border-bottom: 1px solid var(--activa-line);
}

.home-faq__item summary {
    position: relative;
    padding: 24px 48px 24px 0;
    list-style: none;
    color: var(--activa-navy);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.home-faq__item summary::-webkit-details-marker {
    display: none;
}

.home-faq__item summary::after {
    content: "+";
    position: absolute;
    top: 18px;
    right: 0;
    color: var(--activa-blue);
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;
}

.home-faq__item[open] summary::after {
    content: "−";
}

.home-faq__item p {
    max-width: 730px;
    margin: 0;
    padding: 0 45px 25px 0;
    font-size: 0.9rem;
    line-height: 1.68;
}


/* ==========================================================
   CONTACTO FINAL
   ========================================================== */

.home-contact {
    padding: clamp(70px, 8vw, 105px) 0;
    background: var(--activa-navy);
    color: var(--activa-white);
}

.home-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 65px;
    align-items: center;
}

.home-contact h2 {
    max-width: 750px;
    margin: 0 0 18px;
    color: var(--activa-white);
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: 1;
}

.home-contact p {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 1rem;
    line-height: 1.68;
}

.home-contact__actions {
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    background: #0a112b;
}

.site-footer .brand img {
    width: 86px;
    height: 86px;
    padding: 6px;
    background: var(--activa-white);
}

.footer-title {
    color: var(--activa-white);
}

.footer-links a:hover {
    color: var(--activa-cyan);
}


/* ==========================================================
   BOTÓN FLOTANTE
   ========================================================== */

.whatsapp-float {
    border-radius: 7px;
    box-shadow: 0 10px 28px rgba(17, 27, 63, 0.18);
}

.whatsapp-float:hover {
    transform: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .home-hero__grid {
        grid-template-columns: minmax(0, 1fr) 390px;
        gap: 50px;
    }

    .home-course-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-update-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-update:last-child {
        grid-column: 1 / -1;
    }

    .home-workshops__box {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .home-workshops__actions {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
    }

}


@media (max-width: 900px) {

    .nav {
        gap: 18px;
    }

    .home-hero__grid {
        grid-template-columns: 1fr;
    }

    .home-hero__content {
        max-width: 800px;
    }

    .home-hero__panel {
        min-height: 475px;
    }

    .home-about__grid {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .home-about__copy {
        grid-column: 2;
        max-width: 720px;
        padding-top: 0;
    }

    .home-section__heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .home-section__heading > p {
        max-width: 680px;
    }

    .home-area {
        grid-template-columns: minmax(0, 1fr) 190px 40px;
    }

    .home-audiences__grid {
        grid-template-columns: 1fr;
    }

    .home-audience {
        min-height: 440px;
    }

    .home-faq__grid {
        grid-template-columns: 1fr;
    }

    .home-faq__intro {
        position: static;
        max-width: 700px;
    }

    .home-contact__grid {
        grid-template-columns: 1fr;
    }

    .home-contact__actions {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

}


/* ==========================================================
   MENÚ MÓVIL
   ========================================================== */

@media (max-width: 820px) {

    .site-header__inner {
        min-height: 68px;
    }

    .brand img,
    .site-header.is-scrolled .brand img {
        width: 61px;
        height: 61px;
    }

    .menu-toggle {
        position: relative;
        z-index: 102;
    }

    .nav {
        background: var(--activa-white);
    }

    .nav__link,
    .nav-dropdown__toggle {
        color: var(--activa-navy);
        font-size: 1.05rem;
    }

    .nav__link::after,
    .nav-dropdown__toggle::after {
        display: none;
    }

    .button--header {
        width: 100%;
        min-height: 48px;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 650px) {

    .home-page .container {
        width: min(
            calc(100% - 26px),
            var(--activa-container)
        );
    }

    .announcement__inner {
        gap: 10px;
        min-height: 39px;
        font-size: 0.69rem;
    }

    .announcement__message {
        min-width: 0;
        overflow: hidden;
    }

    .announcement__message span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .home-section {
        padding: 72px 0;
    }

    .home-section__heading {
        margin-bottom: 34px;
    }

    .home-section__heading h2 {
        font-size: 2.55rem;
    }


    /* Hero */

    .home-hero {
        padding: 58px 0 45px;
    }

    .home-hero__grid {
        gap: 45px;
    }

    .home-hero h1 {
        margin-bottom: 23px;
        font-size: clamp(2.85rem, 13.7vw, 4.2rem);
        line-height: 0.99;
    }

    .home-hero__lead {
        font-size: 1rem;
        line-height: 1.62;
    }

    .home-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 21px;
        margin-top: 30px;
    }

    .home-hero__actions .home-button {
        width: 100%;
    }

    .home-hero__subjects {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 18px;
        margin-top: 38px;
    }

    .home-hero__subjects li::after {
        display: none;
    }

    .home-hero__panel {
        min-height: 450px;
        padding: 29px;
    }

    .home-hero__panel-head {
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 18px;
    }

    .home-hero__panel-head img {
        width: 94px;
        height: 94px;
    }

    .home-hero__panel-head strong {
        font-size: 1.08rem;
    }

    .home-hero__panel-list {
        margin: 34px 0;
    }

    .home-hero__panel-list a {
        min-height: 52px;
        font-size: 0.82rem;
    }


    /* Resumen */

    .home-summary__grid {
        grid-template-columns: 1fr;
    }

    .home-summary__item,
    .home-summary__item + .home-summary__item {
        min-height: auto;
        padding: 27px 0;
        border-right: 0;
        border-bottom: 1px solid var(--activa-line);
    }

    .home-summary__item:last-child {
        border-bottom: 0;
    }


    /* Sobre Activa */

    .home-about__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .home-about__copy {
        grid-column: auto;
    }

    .home-about__title h2 {
        font-size: 2.55rem;
    }


    /* Áreas */

    .home-area {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 18px;
        min-height: 0;
        padding: 26px 12px 26px 20px;
    }

    .home-area:hover {
        padding-left: 20px;
    }

    .home-area__meta {
        grid-column: 1;
        grid-row: 2;
        margin-top: 2px;
    }

    .home-area__arrow {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .home-area h3 {
        font-size: 1.65rem;
    }


    /* Cursos */

    .home-course-list {
        grid-template-columns: 1fr;
    }

    .home-course {
        min-height: 0;
        padding: 25px;
    }

    .home-course__top {
        margin-bottom: 29px;
    }

    .home-course h3 {
        font-size: 1.55rem;
    }


    /* Públicos */

    .home-audience {
        min-height: 465px;
        padding: 31px 27px;
    }

    .home-audience h2 {
        font-size: 2.35rem;
    }

    .home-audience--kids::before {
        width: 78px;
        height: 78px;
    }

    .home-audience--kids::after {
        right: 78px;
        width: 45px;
        height: 45px;
    }


    /* Talleres */

    .home-workshops__box {
        grid-template-columns: 1fr;
        gap: 33px;
        padding: 34px 27px;
    }

    .home-workshops__duration {
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    }

    .home-workshops__duration strong {
        font-size: 6rem;
    }

    .home-workshops__actions {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .home-workshops__actions .home-button {
        width: 100%;
    }

    .home-workshops__content h2 {
        font-size: 2.45rem;
    }


    /* Novedades */

    .home-update-list {
        grid-template-columns: 1fr;
    }

    .home-update:last-child {
        grid-column: auto;
    }

    .home-update {
        min-height: 310px;
        padding: 25px;
    }


    /* Preguntas */

    .home-faq__intro h2 {
        font-size: 2.55rem;
    }

    .home-faq__item summary {
        padding-right: 42px;
        font-size: 0.94rem;
    }


    /* Contacto */

    .home-contact {
        padding: 70px 0;
    }

    .home-contact h2 {
        font-size: 2.7rem;
    }

    .home-contact__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-contact__actions .home-button {
        width: 100%;
    }

}


/* ==========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================== */

@media (max-width: 390px) {

    .home-hero h1 {
        font-size: 2.65rem;
    }

    .home-hero__subjects {
        grid-template-columns: 1fr;
    }

    .home-hero__panel {
        padding: 24px;
    }

    .home-hero__panel-head {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .home-hero__panel-head img {
        width: 78px;
        height: 78px;
    }

    .home-hero__panel-head strong {
        font-size: 0.98rem;
    }

}


/* ==========================================================
   MOVIMIENTO REDUCIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .home-page *,
    .home-page *::before,
    .home-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

}

/* ==========================================================
   PÁGINA DE NOVEDADES
   ========================================================== */

   .updates-page {
    background: #ffffff;
}

.updates-page h1,
.updates-page h2,
.updates-page h3 {
    color: var(--activa-navy, #111b3f);
}

.updates-kicker {
    margin: 0 0 18px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.updates-kicker--light {
    color: rgba(255, 255, 255, 0.68);
}


/* Hero */

.updates-hero {
    padding: clamp(75px, 9vw, 125px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.updates-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.65fr);
    gap: clamp(50px, 8vw, 105px);
    align-items: end;
}

.updates-hero__content {
    max-width: 800px;
}

.updates-hero h1 {
    margin: 0 0 26px;
    font-size: clamp(3.1rem, 6.2vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.058em;
}

.updates-hero__content > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 1.08rem;
    line-height: 1.7;
}

.updates-hero__aside {
    padding: 28px 0 5px 32px;
    border-left: 4px solid var(--activa-orange, #ff9d00);
}

.updates-hero__aside > span {
    display: block;
    margin-bottom: 12px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.updates-hero__aside strong {
    display: block;
    margin-bottom: 24px;
    color: var(--activa-navy, #111b3f);
    font-size: 1rem;
    line-height: 1.55;
}

.updates-hero__aside a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.85rem;
    font-weight: 800;
}

.updates-hero__aside svg {
    width: 17px;
    height: 17px;
}


/* Contenido */

.updates-section {
    padding: clamp(78px, 9vw, 125px) 0;
    background: var(--activa-light, #f5f7fb);
}

.updates-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    gap: 70px;
    align-items: end;
    margin-bottom: 48px;
}

.updates-heading h2 {
    margin: 0;
    font-size: clamp(2.3rem, 4.8vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.updates-heading > p {
    margin: 0 0 5px;
    color: var(--activa-muted, #687087);
    font-size: 0.94rem;
    line-height: 1.7;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.updates-card {
    min-height: 355px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-top: 5px solid var(--activa-blue, #0757e8);
}

.updates-card--cyan {
    border-top-color: var(--activa-cyan, #12ced3);
}

.updates-card--orange {
    border-top-color: var(--activa-orange, #ff9d00);
}

.updates-card--navy {
    border-top-color: var(--activa-navy, #111b3f);
}

.updates-card__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 46px;
}

.updates-card__type {
    flex: 0 0 auto;
    color: var(--activa-blue, #0757e8);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.updates-card--cyan .updates-card__type {
    color: #078b93;
}

.updates-card--orange .updates-card__type {
    color: #c26900;
}

.updates-card--navy .updates-card__type {
    color: var(--activa-navy, #111b3f);
}

.updates-card__line {
    width: 100%;
    height: 1px;
    background: var(--activa-line, #dfe4ef);
}

.updates-card h3 {
    margin: 0 0 16px;
    font-size: 1.48rem;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.updates-card p {
    margin: 0 0 28px;
    color: var(--activa-muted, #687087);
    font-size: 0.89rem;
    line-height: 1.63;
}

.updates-card__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: auto;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.8rem;
    font-weight: 800;
}

.updates-card__link svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.updates-card__link:hover svg {
    transform: translateX(3px);
}


/* Estado vacío */

.updates-empty {
    padding: 65px 30px;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.updates-empty h2 {
    margin-bottom: 15px;
    font-size: 2rem;
}

.updates-empty p {
    max-width: 570px;
    margin: 0 auto 25px;
    color: var(--activa-muted, #687087);
}


/* Contacto final */

.updates-contact {
    padding: clamp(70px, 8vw, 105px) 0;
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
}

.updates-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 65px;
    align-items: center;
}

.updates-contact h2 {
    max-width: 760px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.updates-contact p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.68;
}

.updates-contact__actions {
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.updates-button--light {
    border-radius: 8px;
    border-color: #ffffff;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.updates-button--light:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    transform: none;
    box-shadow: none;
}

.updates-contact__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: #ffffff;
    border-bottom: 1px solid currentColor;
    font-size: 0.85rem;
    font-weight: 800;
}


/* Tablet */

@media (max-width: 980px) {

    .updates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .updates-hero__grid {
        grid-template-columns: 1fr;
    }

    .updates-hero__aside {
        max-width: 700px;
    }

}


/* Celular */

@media (max-width: 680px) {

    .updates-hero {
        padding: 60px 0;
    }

    .updates-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .updates-hero__aside {
        padding-left: 22px;
    }

    .updates-heading {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .updates-heading h2 {
        font-size: 2.55rem;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .updates-card {
        min-height: 320px;
        padding: 25px;
    }

    .updates-contact__grid {
        grid-template-columns: 1fr;
    }

    .updates-contact h2 {
        font-size: 2.7rem;
    }

    .updates-contact__actions {
        min-width: 0;
    }

    .updates-contact__actions .button {
        width: 100%;
    }

}

/* ==========================================================
   ACTIVA DIGITAL — CATÁLOGO DE CURSOS
   ========================================================== */

   .courses-page {
    background: #ffffff;
    color: var(--activa-text, #1c2440);
}

.courses-page main {
    overflow: hidden;
}

.courses-page h1,
.courses-page h2,
.courses-page h3 {
    color: var(--activa-navy, #111b3f);
}

.courses-page svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   ELEMENTOS GENERALES
   ========================================================== */

.courses-kicker {
    margin: 0 0 18px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.courses-kicker--light {
    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================
   HERO
   ========================================================== */

.courses-hero {
    padding: clamp(75px, 9vw, 125px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.courses-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(310px, 0.58fr);
    gap: clamp(50px, 8vw, 110px);
    align-items: end;
}

.courses-hero__content {
    max-width: 850px;
}

.courses-hero h1 {
    max-width: 850px;
    margin: 0 0 27px;
    font-size: clamp(3.1rem, 6.1vw, 5.9rem);
    line-height: 0.98;
    letter-spacing: -0.058em;
}

.courses-hero__content > p:last-child {
    max-width: 690px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: clamp(1rem, 1.55vw, 1.16rem);
    line-height: 1.72;
}


/* Nota lateral */

.courses-hero__note {
    padding: 28px 0 5px 30px;
    border-left: 4px solid var(--activa-orange, #ff9d00);
}

.courses-hero__note > span {
    display: block;
    margin-bottom: 12px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.courses-hero__note p {
    margin: 0 0 23px;
    color: var(--activa-muted, #687087);
    font-size: 0.9rem;
    line-height: 1.66;
}

.courses-hero__note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.84rem;
    font-weight: 800;
}

.courses-hero__note a:hover {
    color: var(--activa-blue-dark, #0039b8);
}

.courses-hero__note a svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.courses-hero__note a:hover svg {
    transform: translateX(3px);
}


/* ==========================================================
   CATÁLOGO
   ========================================================== */

.courses-catalog {
    padding: clamp(65px, 8vw, 110px) 0 clamp(85px, 10vw, 135px);
    background: var(--activa-light, #f5f7fb);
}


/* ==========================================================
   FILTROS
   ========================================================== */

.courses-filters {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.5fr)
        minmax(180px, 0.75fr)
        minmax(180px, 0.75fr)
        auto;
    gap: 14px;
    align-items: end;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.courses-filter {
    display: grid;
    gap: 8px;
}

.courses-filter label {
    color: var(--activa-navy, #111b3f);
    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.courses-filter input,
.courses-filter select {
    width: 100%;
    min-height: 49px;
    padding: 10px 13px;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-radius: 5px;
    outline: none;
    background: #ffffff;
    color: var(--activa-text, #1c2440);
    font-size: 0.88rem;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.courses-filter input::placeholder {
    color: #9198aa;
}

.courses-filter input:focus,
.courses-filter select:focus {
    border-color: var(--activa-blue, #0757e8);
    box-shadow: 0 0 0 3px rgba(7, 87, 232, 0.1);
}

.courses-filters__reset {
    min-height: 49px;
    padding: 0 17px;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-radius: 5px;
    background: #ffffff;
    color: var(--activa-navy, #111b3f);
    font-size: 0.79rem;
    font-weight: 800;
}

.courses-filters__reset:hover {
    border-color: var(--activa-navy, #111b3f);
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
}


/* ==========================================================
   CABECERA DE RESULTADOS
   ========================================================== */

.courses-results-head {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    margin: 34px 0 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.courses-results-head p {
    margin: 0;
    color: var(--activa-navy, #111b3f);
    font-size: 0.88rem;
}

.courses-results-head p strong {
    color: var(--activa-blue, #0757e8);
    font-size: 1rem;
}

.courses-results-head > span {
    color: var(--activa-muted, #687087);
    font-size: 0.72rem;
}


/* ==========================================================
   LISTA DE PROPUESTAS
   ========================================================== */

.courses-list {
    background: #ffffff;
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.courses-item {
    position: relative;
    display: grid;
    grid-template-columns:
        56px
        minmax(0, 1fr)
        minmax(190px, 230px);
    gap: 34px;
    align-items: stretch;
    min-height: 290px;
    padding: 34px 30px 34px 24px;
    background: #ffffff;
    border-right: 1px solid var(--activa-line, #dfe4ef);
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
    border-left: 6px solid var(--activa-blue, #0757e8);
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.courses-item[hidden] {
    display: none;
}

.courses-item:hover {
    background: #fafbfe;
}

.courses-item--blue {
    border-left-color: var(--activa-blue, #0757e8);
}

.courses-item--cyan {
    border-left-color: var(--activa-cyan, #12ced3);
}

.courses-item--orange {
    border-left-color: var(--activa-orange, #ff9d00);
}

.courses-item--navy {
    border-left-color: var(--activa-navy, #111b3f);
}

.courses-item--mix,
.courses-item--mixed,
.courses-item--gradient {
    border-left-color: var(--activa-blue, #0757e8);
}

.courses-item--mix::before,
.courses-item--mixed::before,
.courses-item--gradient::before {
    content: "";
    position: absolute;
    top: 33%;
    bottom: 33%;
    left: -6px;
    width: 6px;
    background: var(--activa-orange, #ff9d00);
}

.courses-item--mix::after,
.courses-item--mixed::after,
.courses-item--gradient::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -6px;
    width: 6px;
    height: 33%;
    background: var(--activa-cyan, #12ced3);
}


/* Número */

.courses-item__number {
    padding-top: 3px;
    color: #9ba2b4;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}


/* Contenido */

.courses-item__content {
    min-width: 0;
}

.courses-item__heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.courses-item__heading > span:first-child {
    color: var(--activa-blue, #0757e8);
    font-size: 0.69rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.courses-item--cyan .courses-item__heading > span:first-child {
    color: #078d95;
}

.courses-item--orange .courses-item__heading > span:first-child {
    color: #ba6400;
}

.courses-item--navy .courses-item__heading > span:first-child {
    color: var(--activa-navy, #111b3f);
}

.courses-item__status {
    color: var(--activa-muted, #687087);
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: right;
}

.courses-item h2 {
    max-width: 760px;
    margin: 0 0 15px;
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.courses-item h2 a {
    transition: color 150ms ease;
}

.courses-item h2 a:hover {
    color: var(--activa-blue, #0757e8);
}

.courses-item__content > p {
    max-width: 760px;
    margin: 0 0 27px;
    color: var(--activa-muted, #687087);
    font-size: 0.91rem;
    line-height: 1.66;
}


/* Datos */

.courses-item__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.courses-item__facts > div {
    min-width: 0;
    padding: 14px 16px 0 0;
}

.courses-item__facts > div + div {
    padding-left: 16px;
    border-left: 1px solid var(--activa-line, #dfe4ef);
}

.courses-item__facts dt {
    margin-bottom: 5px;
    color: var(--activa-muted, #687087);
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.courses-item__facts dd {
    margin: 0;
    color: var(--activa-text, #1c2440);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.45;
}


/* Acciones */

.courses-item__actions {
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border-left: 1px solid var(--activa-line, #dfe4ef);
}

.courses-item__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.84rem;
    font-weight: 850;
}

.courses-item__primary svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.courses-item__primary:hover svg {
    transform: translateX(3px);
}

.courses-item__source {
    color: var(--activa-muted, #687087);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.courses-item__source:hover {
    color: var(--activa-navy, #111b3f);
}

.courses-item__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-radius: 5px;
    color: var(--activa-navy, #111b3f);
    font-size: 0.78rem;
    font-weight: 800;
}

.courses-item__whatsapp svg {
    width: 17px;
    height: 17px;
    color: #168b54;
}

.courses-item__whatsapp:hover {
    border-color: #168b54;
    background: #168b54;
    color: #ffffff;
}

.courses-item__whatsapp:hover svg {
    color: #ffffff;
}


/* ==========================================================
   ESTADO SIN RESULTADOS
   ========================================================== */

.courses-empty {
    margin-top: 20px;
    padding: 65px 30px;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.courses-empty > span {
    display: block;
    margin-bottom: 13px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.courses-empty h2 {
    max-width: 650px;
    margin: 0 auto 16px;
    font-size: clamp(1.9rem, 4vw, 3rem);
}

.courses-empty p {
    max-width: 600px;
    margin: 0 auto 25px;
    color: var(--activa-muted, #687087);
    line-height: 1.65;
}

.courses-empty button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--activa-blue, #0757e8);
    border-radius: 5px;
    background: var(--activa-blue, #0757e8);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.courses-empty button:hover {
    background: var(--activa-blue-dark, #0039b8);
    border-color: var(--activa-blue-dark, #0039b8);
}


/* ==========================================================
   ORIENTACIÓN FINAL
   ========================================================== */

.courses-guidance {
    padding: clamp(70px, 8vw, 105px) 0;
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
}

.courses-guidance__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 65px;
    align-items: center;
}

.courses-guidance h2 {
    max-width: 760px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.courses-guidance p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.68;
}

.courses-guidance__actions {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
}

.courses-guidance__button {
    min-height: 51px;
    padding-inline: 20px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.courses-guidance__button:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    box-shadow: none;
    transform: none;
}

.courses-guidance__button svg {
    width: 18px;
    height: 18px;
}

.courses-guidance__instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: #ffffff;
    border-bottom: 1px solid currentColor;
    font-size: 0.82rem;
    font-weight: 800;
}

.courses-guidance__instagram svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   DESKTOP INTERMEDIO
   ========================================================== */

@media (max-width: 1080px) {

    .courses-item {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            190px;
        gap: 25px;
    }

    .courses-item__actions {
        padding-left: 22px;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .courses-hero__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .courses-hero__note {
        max-width: 720px;
    }

    .courses-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .courses-filter--search {
        grid-column: 1 / -1;
    }

    .courses-filters__reset {
        width: fit-content;
    }

    .courses-item {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 23px;
        min-height: 0;
    }

    .courses-item__actions {
        grid-column: 2;
        padding: 23px 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-top: 1px solid var(--activa-line, #dfe4ef);
        border-left: 0;
    }

    .courses-guidance__grid {
        grid-template-columns: 1fr;
    }

    .courses-guidance__actions {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 650px) {

    .courses-hero {
        padding: 58px 0;
    }

    .courses-hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem);
        line-height: 0.99;
    }

    .courses-hero__content > p:last-child {
        font-size: 1rem;
    }

    .courses-hero__note {
        padding: 24px 0 0 20px;
    }

    .courses-catalog {
        padding: 45px 0 80px;
    }

    .courses-filters {
        grid-template-columns: 1fr;
        padding: 17px;
    }

    .courses-filter--search {
        grid-column: auto;
    }

    .courses-filters__reset {
        width: 100%;
    }

    .courses-results-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        margin-top: 27px;
    }

    .courses-results-head > span {
        line-height: 1.45;
    }

    .courses-item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 25px 20px;
        border-left-width: 5px;
    }

    .courses-item--mix::before,
    .courses-item--mixed::before,
    .courses-item--gradient::before {
        left: -5px;
        width: 5px;
    }

    .courses-item--mix::after,
    .courses-item--mixed::after,
    .courses-item--gradient::after {
        left: -5px;
        width: 5px;
    }

    .courses-item__number {
        padding: 0;
    }

    .courses-item__heading {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 17px;
    }

    .courses-item__status {
        text-align: left;
    }

    .courses-item h2 {
        font-size: 1.8rem;
    }

    .courses-item__content > p {
        font-size: 0.88rem;
    }

    .courses-item__facts {
        grid-template-columns: 1fr;
    }

    .courses-item__facts > div,
    .courses-item__facts > div + div {
        padding: 11px 0;
        border-left: 0;
        border-bottom: 1px solid var(--activa-line, #dfe4ef);
    }

    .courses-item__actions {
        grid-column: auto;
        padding-top: 21px;
        align-items: flex-start;
        flex-direction: column;
    }

    .courses-item__whatsapp {
        width: 100%;
        justify-content: center;
    }

    .courses-guidance {
        padding: 68px 0;
    }

    .courses-guidance h2 {
        font-size: 2.7rem;
    }

    .courses-guidance__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .courses-guidance__button {
        width: 100%;
    }

}


/* ==========================================================
   PANTALLAS PEQUEÑAS
   ========================================================== */

@media (max-width: 390px) {

    .courses-hero h1 {
        font-size: 2.65rem;
    }

    .courses-item {
        padding-inline: 17px;
    }

}

/* ==========================================================
   ACTIVA DIGITAL — FICHA INDIVIDUAL DE CURSO
   ========================================================== */

   .course-page {
    background: #ffffff;
    color: var(--activa-text, #1c2440);
}

.course-page main {
    overflow: hidden;
}

.course-page h1,
.course-page h2,
.course-page h3 {
    color: var(--activa-navy, #111b3f);
}

.course-page svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   MIGAS DE PAN
   ========================================================== */

.course-breadcrumbs-wrap {
    background: #ffffff;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.course-breadcrumbs {
    min-height: 52px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: var(--activa-muted, #687087);
    font-size: 0.75rem;
}

.course-breadcrumbs a {
    color: var(--activa-muted, #687087);
}

.course-breadcrumbs a:hover {
    color: var(--activa-blue, #0757e8);
}

.course-breadcrumbs span[aria-current="page"] {
    color: var(--activa-navy, #111b3f);
    font-weight: 750;
}


/* ==========================================================
   HERO
   ========================================================== */

.course-detail-hero {
    position: relative;
    padding: clamp(72px, 9vw, 120px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, 0.58fr);
    gap: clamp(55px, 8vw, 110px);
    align-items: start;
}

.course-detail-hero__content {
    max-width: 830px;
}

.course-detail-hero__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 25px;
}

.course-detail-hero__area,
.course-detail-hero__status {
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.course-detail-hero__area {
    color: var(--activa-blue, #0757e8);
}

.course-detail-hero__status {
    position: relative;
    color: var(--activa-muted, #687087);
}

.course-detail-hero__status::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--activa-orange, #ff9d00);
    transform: translateY(-50%);
}

.course-detail-hero h1 {
    max-width: 850px;
    margin: 0 0 27px;
    font-size: clamp(3.15rem, 6.3vw, 6.2rem);
    line-height: 0.97;
    letter-spacing: -0.06em;
}

.course-detail-hero__summary {
    max-width: 710px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: clamp(1.03rem, 1.65vw, 1.22rem);
    line-height: 1.72;
}

.course-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 35px;
}

.course-detail-button {
    min-height: 52px;
    padding-inline: 21px;
    border: 1px solid var(--activa-blue, #0757e8);
    border-radius: 6px;
    background: var(--activa-blue, #0757e8);
    color: #ffffff;
    box-shadow: none;
    font-size: 0.87rem;
    font-weight: 800;
}

.course-detail-button:hover {
    border-color: var(--activa-blue-dark, #0039b8);
    background: var(--activa-blue-dark, #0039b8);
    box-shadow: none;
    transform: none;
}

.course-detail-button svg {
    width: 18px;
    height: 18px;
}

.course-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-navy, #111b3f);
    border-bottom: 1px solid currentColor;
    font-size: 0.84rem;
    font-weight: 800;
}

.course-detail-link:hover {
    color: var(--activa-blue, #0757e8);
}

.course-detail-link svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   PANEL DE INFORMACIÓN
   ========================================================== */

.course-detail-hero__facts {
    position: relative;
    padding: 30px 30px 29px;
    background: var(--activa-light, #f5f7fb);
    border: 1px solid var(--activa-line, #dfe4ef);
    border-top: 5px solid var(--activa-blue, #0757e8);
}

.course-page--cyan .course-detail-hero__facts {
    border-top-color: var(--activa-cyan, #12ced3);
}

.course-page--orange .course-detail-hero__facts {
    border-top-color: var(--activa-orange, #ff9d00);
}

.course-page--navy .course-detail-hero__facts {
    border-top-color: var(--activa-navy, #111b3f);
}

.course-page--mix .course-detail-hero__facts,
.course-page--mixed .course-detail-hero__facts,
.course-page--gradient .course-detail-hero__facts {
    border-top-color: var(--activa-blue, #0757e8);
}

.course-detail-hero__facts dl {
    margin: 0;
}

.course-detail-hero__facts dl > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-hero__facts dl > div:first-child {
    padding-top: 0;
}

.course-detail-hero__facts dl > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.course-detail-hero__facts dt {
    color: var(--activa-muted, #687087);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.course-detail-hero__facts dd {
    margin: 0;
    color: var(--activa-navy, #111b3f);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
}


/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

.course-detail-content {
    padding: clamp(78px, 9vw, 125px) 0;
    background: var(--activa-light, #f5f7fb);
}

.course-detail-content__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 340px);
    gap: clamp(55px, 8vw, 105px);
    align-items: start;
}

.course-detail-main {
    min-width: 0;
}

.course-detail-kicker {
    margin: 0 0 17px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.course-detail-kicker--light {
    color: rgba(255, 255, 255, 0.7);
}

.course-detail-block + .course-detail-block {
    margin-top: clamp(68px, 8vw, 105px);
}

.course-detail-block h2 {
    max-width: 760px;
    margin: 0 0 23px;
    font-size: clamp(2.15rem, 4.6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.course-detail-description {
    max-width: 790px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 1.02rem;
    line-height: 1.78;
}


/* ==========================================================
   PUNTOS CONFIRMADOS
   ========================================================== */

.course-detail-points {
    margin: 33px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-points li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-points li > span {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    background: var(--activa-blue, #0757e8);
}

.course-page--cyan .course-detail-points li > span {
    background: var(--activa-cyan, #12ced3);
}

.course-page--orange .course-detail-points li > span {
    background: var(--activa-orange, #ff9d00);
}

.course-page--navy .course-detail-points li > span {
    background: var(--activa-navy, #111b3f);
}

.course-detail-points p {
    margin: 0;
    color: var(--activa-text, #1c2440);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.62;
}


/* ==========================================================
   INFORMACIÓN PENDIENTE
   ========================================================== */

.course-detail-notice {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 36px;
    margin-top: clamp(68px, 8vw, 105px);
    padding: 31px 0;
    border-top: 1px solid var(--activa-line, #dfe4ef);
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-notice__label {
    padding-top: 5px;
    color: var(--activa-orange-dark, #dd7600);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.course-detail-notice h2 {
    margin: 0 0 12px;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.course-detail-notice p {
    max-width: 720px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 0.92rem;
    line-height: 1.67;
}


/* ==========================================================
   FUENTE
   ========================================================== */

.course-detail-source {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 45px;
    align-items: end;
    margin-top: clamp(68px, 8vw, 105px);
    padding: 34px;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.course-detail-source h2 {
    margin: 0 0 12px;
    font-size: 1.75rem;
    line-height: 1.12;
}

.course-detail-source p {
    max-width: 660px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 0.89rem;
    line-height: 1.62;
}

.course-detail-source > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.course-detail-source > a:hover {
    color: var(--activa-blue-dark, #0039b8);
}

.course-detail-source > a svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   TARJETA LATERAL
   ========================================================== */

.course-detail-sidebar {
    position: sticky;
    top: 105px;
}

.course-detail-contact-card {
    padding: 30px;
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
    border-top: 6px solid var(--activa-orange, #ff9d00);
}

.course-detail-contact-card > span {
    display: block;
    margin-bottom: 28px;
    color: var(--activa-cyan, #12ced3);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.course-detail-contact-card h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.course-detail-contact-card p {
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.89rem;
    line-height: 1.68;
}

.course-detail-contact-card__button {
    width: 100%;
    min-height: 50px;
    padding-inline: 16px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
    font-size: 0.82rem;
}

.course-detail-contact-card__button:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    box-shadow: none;
    transform: none;
}

.course-detail-contact-card__button svg {
    width: 18px;
    height: 18px;
}

.course-detail-contact-card__secondary {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.course-detail-contact-card__secondary:hover {
    color: #ffffff;
}


/* ==========================================================
   CURSOS RELACIONADOS
   ========================================================== */

.course-related {
    padding: clamp(78px, 9vw, 125px) 0;
    background: #ffffff;
}

.course-related__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 45px;
}

.course-related__heading h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4.5vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.course-related__heading > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.82rem;
    font-weight: 800;
}

.course-related__heading > a svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.course-related__heading > a:hover svg {
    transform: translateX(3px);
}

.course-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.course-related-card {
    min-height: 330px;
    padding: 27px;
    display: flex;
    flex-direction: column;
    background: var(--activa-light, #f5f7fb);
    border: 1px solid var(--activa-line, #dfe4ef);
    border-top: 5px solid var(--activa-blue, #0757e8);
}

.course-related-card--cyan {
    border-top-color: var(--activa-cyan, #12ced3);
}

.course-related-card--orange {
    border-top-color: var(--activa-orange, #ff9d00);
}

.course-related-card--navy {
    border-top-color: var(--activa-navy, #111b3f);
}

.course-related-card--mix,
.course-related-card--mixed,
.course-related-card--gradient {
    border-top-color: var(--activa-blue, #0757e8);
}

.course-related-card__area {
    display: block;
    margin-bottom: 42px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-related-card--cyan .course-related-card__area {
    color: #078d95;
}

.course-related-card--orange .course-related-card__area {
    color: #ba6400;
}

.course-related-card--navy .course-related-card__area {
    color: var(--activa-navy, #111b3f);
}

.course-related-card h3 {
    margin: 0 0 15px;
    font-size: 1.55rem;
    line-height: 1.12;
}

.course-related-card h3 a:hover {
    color: var(--activa-blue, #0757e8);
}

.course-related-card p {
    margin: 0 0 24px;
    color: var(--activa-muted, #687087);
    font-size: 0.87rem;
    line-height: 1.62;
}

.course-related-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.79rem;
    font-weight: 800;
}

.course-related-card__link svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

.course-related-card__link:hover svg {
    transform: translateX(3px);
}


/* ==========================================================
   CONTACTO FINAL
   ========================================================== */

.course-detail-final {
    padding: clamp(68px, 8vw, 102px) 0;
    background: var(--activa-blue, #0757e8);
    color: #ffffff;
}

.course-detail-final__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: center;
}

.course-detail-final h2 {
    max-width: 780px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.course-detail-final p {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.68;
}

.course-detail-final__button {
    min-width: 220px;
    min-height: 51px;
    padding-inline: 20px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.course-detail-final__button:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    box-shadow: none;
    transform: none;
}

.course-detail-final__button svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   VARIANTES DE COLOR
   ========================================================== */

.course-page--cyan .course-detail-hero__area,
.course-page--cyan .course-detail-kicker,
.course-page--cyan .course-related-card__link {
    color: #078d95;
}

.course-page--orange .course-detail-hero__area,
.course-page--orange .course-detail-kicker {
    color: #ba6400;
}

.course-page--navy .course-detail-hero__area,
.course-page--navy .course-detail-kicker {
    color: var(--activa-navy, #111b3f);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .course-detail-hero__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 50px;
    }

    .course-detail-content__grid {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 50px;
    }

    .course-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .course-related-card:last-child {
        grid-column: 1 / -1;
    }

}


@media (max-width: 820px) {

    .course-detail-hero__grid,
    .course-detail-content__grid {
        grid-template-columns: 1fr;
    }

    .course-detail-hero__facts {
        max-width: 650px;
    }

    .course-detail-sidebar {
        position: static;
        order: -1;
    }

    .course-detail-contact-card {
        max-width: 650px;
    }

    .course-detail-source {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .course-related__heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .course-detail-final__grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 650px) {

    .course-breadcrumbs {
        min-height: 48px;
        font-size: 0.69rem;
    }

    .course-detail-hero {
        padding: 58px 0;
    }

    .course-detail-hero h1 {
        font-size: clamp(2.8rem, 13.2vw, 4.15rem);
        line-height: 0.99;
    }

    .course-detail-hero__summary {
        font-size: 1rem;
    }

    .course-detail-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }

    .course-detail-hero__actions .course-detail-button {
        width: 100%;
    }

    .course-detail-hero__facts {
        padding: 25px 22px;
    }

    .course-detail-hero__facts dl > div {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 15px;
    }

    .course-detail-content {
        padding: 70px 0;
    }

    .course-detail-content__grid {
        gap: 55px;
    }

    .course-detail-block h2 {
        font-size: 2.45rem;
    }

    .course-detail-description {
        font-size: 0.95rem;
    }

    .course-detail-points li {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 13px;
    }

    .course-detail-notice {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 27px 0;
    }

    .course-detail-source {
        padding: 25px 21px;
    }

    .course-detail-contact-card {
        padding: 27px 23px;
    }

    .course-detail-contact-card h2 {
        font-size: 1.8rem;
    }

    .course-related {
        padding: 72px 0;
    }

    .course-related__heading h2 {
        font-size: 2.5rem;
    }

    .course-related__grid {
        grid-template-columns: 1fr;
    }

    .course-related-card:last-child {
        grid-column: auto;
    }

    .course-related-card {
        min-height: 300px;
        padding: 24px;
    }

    .course-detail-final {
        padding: 68px 0;
    }

    .course-detail-final h2 {
        font-size: 2.7rem;
    }

    .course-detail-final__button {
        width: 100%;
    }

}


/* ==========================================================
   PANTALLAS PEQUEÑAS
   ========================================================== */

@media (max-width: 390px) {

    .course-detail-hero h1 {
        font-size: 2.65rem;
    }

    .course-detail-hero__facts dl > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}

/* ==========================================================
   PÁGINAS SECUNDARIAS
   ========================================================== */

   .page-clean {
    background: #ffffff;
    color: var(--activa-text, #1c2440);
}

.page-clean main {
    overflow: hidden;
}

.page-clean h1,
.page-clean h2,
.page-clean h3 {
    color: var(--activa-navy, #111b3f);
}

.page-clean svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-kicker {
    margin: 0 0 18px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-kicker--light {
    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================
   HERO SIMPLE
   ========================================================== */

.simple-hero {
    padding: clamp(72px, 9vw, 120px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.simple-hero--compact {
    padding-bottom: 62px;
}

.simple-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(300px, 0.58fr);
    gap: clamp(50px, 8vw, 105px);
    align-items: end;
}

.simple-hero h1 {
    max-width: 880px;
    margin: 0 0 25px;
    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.058em;
}

.simple-hero__lead {
    max-width: 690px;
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 1.1rem;
    line-height: 1.7;
}

.simple-hero__aside {
    padding: 27px 0 4px 29px;
    border-left: 4px solid var(--activa-orange, #ff9d00);
}

.simple-hero__aside > span {
    display: block;
    margin-bottom: 11px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.simple-hero__aside strong {
    display: block;
    margin-bottom: 23px;
    color: var(--activa-navy, #111b3f);
    font-size: 1rem;
    line-height: 1.55;
}

.simple-hero__aside a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-size: 0.84rem;
    font-weight: 800;
}

.simple-hero__aside svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   SECCIONES
   ========================================================== */

.section-clean {
    padding: clamp(76px, 9vw, 120px) 0;
}

.section-clean--soft {
    background: var(--activa-light, #f5f7fb);
}

.section-clean__heading {
    max-width: 800px;
    margin-bottom: 45px;
}

.section-clean__heading h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4.5vw, 4.1rem);
    line-height: 1.02;
}

.content-split {
    display: grid;
    grid-template-columns: 160px minmax(0, 780px);
    gap: clamp(35px, 7vw, 90px);
    align-items: start;
}

.content-split__label {
    padding-top: 8px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content-split__body h2 {
    margin: 0 0 27px;
    font-size: clamp(2.25rem, 4.6vw, 4.25rem);
    line-height: 1.02;
}

.content-split__body p {
    margin: 0 0 20px;
    color: var(--activa-muted, #687087);
    font-size: 1rem;
    line-height: 1.75;
}


/* ==========================================================
   PRINCIPIOS Y PASOS
   ========================================================== */

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.principle-card {
    min-height: 285px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-top: 5px solid var(--activa-blue, #0757e8);
}

.principle-card:nth-child(2) {
    border-top-color: var(--activa-cyan, #12ced3);
}

.principle-card:nth-child(3) {
    border-top-color: var(--activa-orange, #ff9d00);
}

.principle-card > span {
    display: block;
    color: var(--activa-blue, #0757e8);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.principle-card h3 {
    margin: 85px 0 13px;
    font-size: 1.7rem;
}

.principle-card p {
    margin: 0;
    color: var(--activa-muted, #687087);
    font-size: 0.9rem;
    line-height: 1.62;
}


/* ==========================================================
   ENLACES DE ÁREAS
   ========================================================== */

.topic-links {
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.topic-link {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    min-height: 92px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
    border-left: 5px solid var(--activa-blue, #0757e8);
    background: #ffffff;
    color: var(--activa-navy, #111b3f);
    font-size: 1.15rem;
    font-weight: 800;
}

.topic-link--cyan {
    border-left-color: var(--activa-cyan, #12ced3);
}

.topic-link--orange {
    border-left-color: var(--activa-orange, #ff9d00);
}

.topic-link--navy {
    border-left-color: var(--activa-navy, #111b3f);
}

.topic-link--mixed {
    border-left-color: var(--activa-blue, #0757e8);
}

.topic-link:hover {
    padding-left: 32px;
    background: #f8faff;
}

.topic-link svg {
    width: 20px;
    height: 20px;
    color: var(--activa-blue, #0757e8);
}


/* ==========================================================
   CTA
   ========================================================== */

.cta-band {
    padding: clamp(66px, 8vw, 100px) 0;
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
}

.cta-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: center;
}

.cta-band h2 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 1;
}

.cta-band__button {
    min-width: 220px;
    border-radius: 6px;
    border-color: #ffffff;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.cta-band__button:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    transform: none;
    box-shadow: none;
}


/* ==========================================================
   CONTACTO
   ========================================================== */

.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(50px, 8vw, 100px);
    align-items: start;
}

.contact-details h2 {
    margin: 0 0 20px;
    font-size: clamp(2.15rem, 4vw, 3.6rem);
    line-height: 1.04;
}

.contact-details > p {
    color: var(--activa-muted, #687087);
    line-height: 1.7;
}

.contact-list {
    display: grid;
    gap: 12px;
    margin-top: 33px;
}

.contact-list > * {
    padding: 19px;
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.contact-list span {
    display: block;
    margin-bottom: 5px;
    color: var(--activa-muted, #687087);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-list strong {
    color: var(--activa-navy, #111b3f);
    font-size: 0.92rem;
}

.contact-form {
    padding: clamp(25px, 4vw, 42px);
    background: #ffffff;
    border: 1px solid var(--activa-line, #dfe4ef);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.field {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.field label {
    color: var(--activa-navy, #111b3f);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 49px;
    padding: 11px 13px;
    border: 1px solid var(--activa-line, #dfe4ef);
    border-radius: 5px;
    outline: none;
    background: #ffffff;
    color: var(--activa-text, #1c2440);
}

.field textarea {
    min-height: 135px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--activa-blue, #0757e8);
    box-shadow: 0 0 0 3px rgba(7, 87, 232, 0.1);
}

.field small {
    min-height: 18px;
    color: #b3261e;
    font-size: 0.76rem;
}

.contact-form__button {
    width: 100%;
    border-radius: 6px;
    background: var(--activa-blue, #0757e8);
    border-color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.contact-form__button:hover {
    background: var(--activa-blue-dark, #0039b8);
    border-color: var(--activa-blue-dark, #0039b8);
    transform: none;
    box-shadow: none;
}

.contact-form__note {
    margin: 13px 0 0;
    color: var(--activa-muted, #687087);
    font-size: 0.77rem;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   PÁGINAS POR PÚBLICO
   ========================================================== */

.audience-hero {
    padding: clamp(72px, 9vw, 120px) 0;
}

.audience-hero--teachers {
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
}

.audience-hero--kids {
    background: #e9fbfc;
}

.audience-hero--workshops {
    background: var(--activa-blue, #0757e8);
    color: #ffffff;
}

.audience-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.55fr);
    gap: clamp(50px, 8vw, 105px);
    align-items: center;
}

.audience-hero h1 {
    max-width: 830px;
    margin: 0 0 25px;
    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.058em;
}

.audience-hero--teachers h1,
.audience-hero--workshops h1 {
    color: #ffffff;
}

.audience-hero p {
    max-width: 680px;
    color: var(--activa-muted, #687087);
    font-size: 1.08rem;
    line-height: 1.7;
}

.audience-hero--teachers p,
.audience-hero--workshops p {
    color: rgba(255, 255, 255, 0.7);
}

.audience-hero__button {
    margin-top: 21px;
    border-radius: 6px;
    box-shadow: none;
}

.audience-hero--teachers .audience-hero__button,
.audience-hero--workshops .audience-hero__button {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
}

.audience-hero__button:hover {
    transform: none;
    box-shadow: none;
}

.audience-hero__panel {
    padding: 28px;
    background: #ffffff;
    border-top: 5px solid var(--activa-orange, #ff9d00);
}

.audience-hero__panel > span {
    display: block;
    margin-bottom: 22px;
    color: var(--activa-blue, #0757e8);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.audience-hero__panel dl {
    margin: 0;
}

.audience-hero__panel dl > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.audience-hero__panel dl > div:last-child {
    border-bottom: 0;
}

.audience-hero__panel dt {
    color: var(--activa-muted, #687087);
    font-size: 0.65rem;
    font-weight: 750;
    text-transform: uppercase;
}

.audience-hero__panel dd {
    margin: 0;
    color: var(--activa-navy, #111b3f);
    font-size: 0.8rem;
    font-weight: 800;
}

.audience-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
    gap: clamp(50px, 8vw, 100px);
    align-items: start;
}

.audience-content-grid h2 {
    max-width: 740px;
    margin: 0 0 30px;
    font-size: clamp(2.2rem, 4.5vw, 4.1rem);
    line-height: 1.02;
}

.audience-points {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.audience-points li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
    color: var(--activa-text, #1c2440);
    font-weight: 700;
}

.audience-points li > span {
    width: 9px;
    height: 9px;
    margin-top: 7px;
    background: var(--activa-blue, #0757e8);
}

.schedule-card {
    position: sticky;
    top: 105px;
    padding: 28px;
    background: var(--activa-navy, #111b3f);
    color: #ffffff;
    border-top: 5px solid var(--activa-orange, #ff9d00);
}

.schedule-card > span {
    display: block;
    margin-bottom: 27px;
    color: var(--activa-cyan, #12ced3);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.schedule-card h2 {
    margin: 0 0 17px;
    color: #ffffff;
    font-size: 1.9rem;
    line-height: 1.06;
}

.schedule-card p {
    margin: 0 0 25px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    line-height: 1.65;
}

.schedule-card__button {
    width: 100%;
    border-radius: 6px;
    border-color: #ffffff;
    background: #ffffff;
    color: var(--activa-blue, #0757e8);
    box-shadow: none;
}

.schedule-card__button:hover {
    border-color: #ffffff;
    background: #eef4ff;
    color: var(--activa-blue-dark, #0039b8);
    transform: none;
    box-shadow: none;
}

.audience-faq {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(45px, 8vw, 100px);
}

.audience-faq > div:first-child h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4.3vw, 3.9rem);
}

.audience-faq__list {
    border-top: 1px solid var(--activa-line, #dfe4ef);
}

.audience-faq__list details {
    border-bottom: 1px solid var(--activa-line, #dfe4ef);
}

.audience-faq__list summary {
    padding: 22px 35px 22px 0;
    color: var(--activa-navy, #111b3f);
    font-weight: 800;
    cursor: pointer;
}

.audience-faq__list p {
    margin: 0;
    padding: 0 30px 22px 0;
    color: var(--activa-muted, #687087);
    line-height: 1.65;
}


/* ==========================================================
   PRIVACIDAD
   ========================================================== */

.legal-wrap {
    max-width: 820px;
}

.legal-wrap > p {
    color: var(--activa-muted, #687087);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-wrap h2 {
    margin: 48px 0 14px;
    font-size: 1.7rem;
}

.legal-wrap h2:first-of-type {
    margin-top: 40px;
}


/* ==========================================================
   404
   ========================================================== */

.error-page__section {
    min-height: 68vh;
    display: grid;
    place-items: center;
    padding: 80px 0;
    background: var(--activa-light, #f5f7fb);
}

.error-page__content {
    max-width: 760px;
    text-align: center;
}

.error-page__number {
    display: block;
    margin-bottom: 30px;
    color: var(--activa-blue, #0757e8);
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 900;
    line-height: 0.7;
    letter-spacing: -0.08em;
}

.error-page h1 {
    margin: 0 0 18px;
    font-size: clamp(2.5rem, 5vw, 4.6rem);
}

.error-page__content > p:not(.page-kicker) {
    color: var(--activa-muted, #687087);
}

.error-page__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
}

.error-page__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--activa-blue, #0757e8);
    border-bottom: 1px solid currentColor;
    font-weight: 800;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .simple-hero__grid,
    .audience-hero__grid,
    .contact-page-grid,
    .audience-content-grid {
        grid-template-columns: 1fr;
    }

    .content-split {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .principle-card:last-child {
        grid-column: 1 / -1;
    }

    .cta-band__grid {
        grid-template-columns: 1fr;
    }

    .schedule-card {
        position: static;
        max-width: 650px;
    }

    .audience-faq {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .simple-hero,
    .audience-hero {
        padding: 58px 0;
    }

    .simple-hero h1,
    .audience-hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem);
    }

    .simple-hero__lead,
    .audience-hero p {
        font-size: 1rem;
    }

    .simple-hero__aside {
        padding-left: 21px;
    }

    .section-clean {
        padding: 70px 0;
    }

    .content-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .content-split__body h2,
    .section-clean__heading h2,
    .audience-content-grid h2 {
        font-size: 2.5rem;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }

    .principle-card:last-child {
        grid-column: auto;
    }

    .principle-card {
        min-height: 250px;
    }

    .principle-card h3 {
        margin-top: 65px;
    }

    .topic-link {
        min-height: 82px;
        padding-inline: 18px;
        font-size: 1rem;
    }

    .cta-band {
        padding: 67px 0;
    }

    .cta-band h2 {
        font-size: 2.7rem;
    }

    .cta-band__button {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 23px 19px;
    }

    .audience-hero__panel {
        padding: 24px 21px;
    }

    .audience-hero__panel dl > div {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 13px;
    }

    .audience-faq > div:first-child h2 {
        font-size: 2.5rem;
    }

    .error-page__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .error-page__actions .button {
        width: 100%;
    }

}