/* Aetherium — nueva dirección visual: estudio digital, luz y movimiento. */
:root {
  --bg: #f5f5f8;
  --bg-2: #ececf3;
  --surface: #ffffff;
  --surface-2: #f1efff;
  --line: rgb(28 28 62 / 12%);
  --line-strong: rgb(28 28 62 / 22%);
  --text: #161426;
  --text-2: #4f5066;
  --text-3: #696b80;
  --blue: #6847f5;
  --blue-2: #5136d6;
  --blue-3: #6847f5;
  --green: #087f65;
  --grad: linear-gradient(115deg, #704afa, #5138dc 60%, #34249d);
  --glow: 0 16px 35px rgb(93 63 211 / 22%);
  --radius: 22px;
  --radius-lg: 32px;
  --max: 78rem;
}
html { scroll-padding-top: 6rem; overflow-x: clip; }
.hero { overflow: clip; }
body { color: var(--text); background: var(--bg); }
body::before { opacity: .15; background-image: radial-gradient(#5b53a0 .55px, transparent .55px); mask-image: none; }
::selection { background: #d7ccff; color: #211753; }
:focus-visible { outline: 3px solid #8d70ff; outline-offset: 3px; }
.wrap { width: min(calc(100% - clamp(2rem, 6vw, 5rem)), var(--max)); }

/* Navegación */
.header { background: rgb(255 255 255 / 82%); border-color: rgb(29 27 64 / 9%); box-shadow: 0 8px 32px rgb(38 28 74 / 5%); backdrop-filter: blur(20px) saturate(1.5); }
.header::after { background: linear-gradient(90deg, #7050f2, #ef8171, #f0b968); }
.logo { color: #18162b; }
.logo__mark { background: var(--grad); box-shadow: 0 8px 22px rgb(94 66 204 / 26%); }
.logo small { color: #716b8b; }
.nav a { color: #4d4a63; }
.nav a:hover, .nav a[aria-current="page"] { color: #3d25af; background: #eeeaff; }
.menu-btn, .cart-btn { color: #251b57; background: #fff; border-color: #dcd8ed; }
.menu-btn:hover, .cart-btn:hover { background: #eeeaff; }
.header .btn--primary { box-shadow: 0 9px 22px rgb(93 63 211 / 18%); }
.btn { font-weight: 800; letter-spacing: -.015em; }
.btn--primary { color: white; border-color: transparent; background: var(--grad); box-shadow: 0 12px 27px rgb(93 63 211 / 21%); }
.btn--primary:hover { box-shadow: 0 17px 35px rgb(93 63 211 / 28%); }
.btn--ghost { color: #251c5d; background: #fff; border-color: #ded9f1; box-shadow: 0 6px 18px rgb(41 28 98 / 5%); }
.btn--ghost:hover { background: #f1ecff; border-color: #b7a9ed; }
.grad-text { background-image: linear-gradient(105deg, #6548df, #8a63f5 55%, #e57578); }
.eyebrow { color: #5f43d0; }
.eyebrow::before { background: #f0887b; box-shadow: 0 0 0 5px rgb(240 136 123 / 16%); }
.section-head h2 { color: #1c1735; }
.section-head p, .hero__lead { color: var(--text-2); }

/* Inicio: hero en lienzo claro con aurora suave */
.hero { background: radial-gradient(ellipse 47rem 36rem at 90% 8%, #ddd4ff 0%, transparent 72%), radial-gradient(ellipse 28rem 26rem at -8% 75%, #ffe8df 0%, transparent 76%), #faf9fd; }
.hero::before { width: 37rem; height: 37rem; top: -19rem; right: -12rem; background: radial-gradient(circle, rgb(162 132 255 / 27%), transparent 70%); }
.hero h1 { color: #1a1535; }
.hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.21rem); }
.chip { color: #4a3d81; background: rgb(255 255 255 / 82%); border-color: #e2dcf5; box-shadow: 0 5px 15px rgb(56 36 123 / 5%); }
.chip:hover { background: #fff; border-color: #c6b8f8; }
.chip i { background: #eb8e75; }
.code-card { background: linear-gradient(155deg, #211e45, #12182c 80%); border-color: #484073; box-shadow: 0 35px 70px rgb(36 26 84 / 21%), 0 0 0 9px rgb(114 84 213 / 7%); }
.code-card:hover { box-shadow: 0 42px 80px rgb(36 26 84 / 27%), 0 0 0 10px rgb(114 84 213 / 9%); }
.code-card__bar { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 10%); }
.code-card__bar span { color: #bdb4e8; }
.code { color: #dfdcff; }
.code .k { color: #a998ff; } .code .s { color: #8eebc7; } .code .c { color: #8582ac; } .code .f { color: #ffd69e; }
.pill--blue { color: #c2b6ff; background: rgb(123 101 230 / 17%); border-color: rgb(123 101 230 / 37%); }
.stats { gap: .75rem; }
.stat { border: 1px solid #e5e0f0; background: rgb(255 255 255 / 88%); box-shadow: 0 13px 30px rgb(47 32 115 / 6%); }
.stat::before { background: linear-gradient(90deg, #8765ef, #ec8b89, transparent); }
.stat b { color: #241b53; }
.stat span { color: #656177; }

/* Secciones, tarjetas y proyectos */
section { padding-block: clamp(5rem, 8vw, 8rem); }
main > section:not(.hero)::after { background: linear-gradient(90deg, transparent, #e4dfeb, transparent); }
#servicios, #para-quien, #productos, #faq { background: #f5f5f8; }
#proyectos, #programa, #contratar, #proceso, #como-comprar, #contacto { background: #fff; }
.card, .pcard, .product, .service, .step, .module, .outcomes div, .trust div { color: #201b37; background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 4%); }
.card:hover, .pcard:hover, .product:hover, .service:hover, .project:hover { border-color: #bdb0f1; box-shadow: 0 25px 50px rgb(52 32 119 / 12%); }
.card::after, .pcard::after, .product::after, .service::after { background: radial-gradient(circle at 95% 0%, rgb(169 141 255 / 17%), transparent 55%); }
.card h3, .pcard h3, .product h3, .service h3, .step h3, .module h3 { color: #1e1a36; }
.card p, .card li, .pcard p, .product p, .service p, .service li, .step p, .module p, .outcomes div { color: #555469; }
.card__icon, .product__icon { color: #6847e8; background: #f0ecff; border-color: #ddd4ff; }
.card:hover .card__icon, .product:hover .product__icon, .service:hover .product__icon { background: #e6ddff; }
.card li::before { background: #8060ee; }
.tag-dr, .st-ok { color: #087f65; background: #e5f7ef; border-color: #bce8d2; }
.project { background: #fff; border-color: #e2dfec; box-shadow: 0 11px 30px rgb(42 33 83 / 5%); }
.project__kicker, .pcard__cat, .product__type { color: #6847df; }
.project h3 { color: #201a3d; }
.project p, .features li { color: #555469; }
.mock { background: radial-gradient(ellipse at 70% 20%, #b6a7ee, transparent 65%), linear-gradient(155deg, #eae6ff, #d8def2); border-color: #e1dcf1; }
.project:hover .mock { background: radial-gradient(ellipse at 70% 20%, #a793ef, transparent 65%), linear-gradient(155deg, #eae6ff, #d8def2); }
.stack span { color: #574d70; background: #f1eff8; border-color: #e6e1f0; }
.filter { color: #514b64; background: #fff; border-color: #ded9eb; }
.filter span { background: #f0edfa; color: #706a84; }
.filter:hover { color: #4c31ca; background: #f6f2ff; border-color: #bcaaf1; }
.filter.is-on { color: #fff; background: var(--grad); }
.filter.is-on span { color: #fff; background: rgb(255 255 255 / 21%); }
.status.st-dev { color: #966010; background: #fff4d8; border-color: #f2dea6; }
.status.st-design { color: #6449c6; background: #f0ebff; border-color: #d8ccff; }
.step::before, .module::before { color: #7452e4; }
.step::before { background: linear-gradient(120deg, #7654e9, #df7f8a); background-clip: text; }
.step:hover, .module:hover, .outcomes div:hover, .trust div:hover { background: #faf8ff; border-color: #bdb0f1; }

/* Banda, FAQ y contacto */
.course-band { background: radial-gradient(ellipse at 100% 0%, rgb(226 154 210 / 27%), transparent 60%), linear-gradient(135deg, #312368, #1b1e44); border-color: #4e3e86; color: #fff; box-shadow: 0 30px 65px rgb(44 30 100 / 19%); }
.course-band h2 { color: white; }
.course-band p { color: #ded8f5; }
.course-band .eyebrow { color: #e9cdff; }
.course-band .modules-mini div { color: #fff; background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 14%); }
.course-band .modules-mini b { color: #e6c3ff; }
.faq details { background: #fff; border-color: #e4e1ec; box-shadow: 0 6px 18px rgb(42 33 83 / 4%); }
.faq details:hover { border-color: #c6b8f1; }
.faq details[open] { background: #fff; border-color: #bbaef1; box-shadow: 0 16px 34px rgb(64 42 138 / 9%); }
.faq summary { color: #221d3c; }
.faq summary::after { color: #6444d7; background: #f1ecff; }
.faq details p { color: #555469; }
.contact__info a.line { color: #241b43; background: #faf9ff; border-color: #e6e1f0; }
.contact__info a.line:hover { background: #f2edff; border-color: #c6b9f2; }
.contact__info a.line svg { color: #7152e3; }
.contact__info a.line span { color: #686477; }
.form { background: #fff; border-color: #e1dced; box-shadow: 0 25px 55px rgb(42 33 83 / 9%); }
.form label { color: #37334a; }
.form input, .form select, .form textarea, .drawer__form input, .drawer__form textarea { color: #241e40; background: #faf9fd; border-color: #dcd7e9; }
.form input:focus, .form select:focus, .form textarea:focus, .drawer__form input:focus, .drawer__form textarea:focus { border-color: #7755e7; box-shadow: 0 0 0 4px rgb(119 85 231 / 14%); }
.form input::placeholder, .form textarea::placeholder, .drawer__form input::placeholder, .drawer__form textarea::placeholder { color: #858195; }
.form small, .note { color: #706c7e; }

/* Tienda: arte orbital y fichas */
.store-hero { background: radial-gradient(ellipse 35rem 30rem at 85% 25%, #ddd1ff, transparent 75%), radial-gradient(ellipse 30rem 25rem at 0% 75%, #ffebe3, transparent 75%), #faf9fd; }
.store-visual__orbit { border-color: rgb(99 74 207 / 22%); box-shadow: 0 0 0 3.2rem rgb(124 93 225 / 4%), inset 0 0 5rem rgb(106 79 216 / 7%); }
.store-visual__tile { color: #292047; background: rgb(255 255 255 / 88%); border-color: #ded6f4; box-shadow: 0 15px 35px rgb(58 36 132 / 12%); }
.store-visual__tile b { color: #251945; }
.store-visual__tile span { color: #655e77; }
.trust { position: relative; z-index: 2; }
.trust b { color: #261e44; }
.trust span { color: #645e77; }
.product__price b { color: #281f4c; }
.product__price b.muted, .product__price small { color: #686275; }
.product__foot { border-color: #e9e5ef; }
.service__time { color: #675b82; border-color: #ded8eb; }
[data-add].is-added { color: #087f65; background: #e4f7ed; border-color: #a7dec5; }
.cart-btn__count { background: var(--grad); }
.drawer__backdrop { background: rgb(21 16 43 / 55%); }
.drawer__panel { color: #241e40; background: #fcfbff; border-color: #e2ddec; }
.drawer__head { background: #f3efff; border-color: #e3ddf3; }
.drawer__x { color: #362855; border-color: #d8cee9; }
.citem { background: #fff; border-color: #e1dce9; }
.citem b, .drawer__total b { color: #241d42; }
.citem span, .citem strong, .drawer__total span, .drawer__empty { color: #696276; }
.drawer__foot { border-color: #e1dce9; }
.toast { color: #fff; background: #29204b; border-color: #4a3a77; }

/* Curso, texto legal y páginas auxiliares */
.course-hero { background: radial-gradient(ellipse 40rem 30rem at 80% 20%, #dfd4ff, transparent 75%), #faf9fd; }
.price-card { color: #fff; background: radial-gradient(circle at 100% 0%, rgb(151 119 241 / 27%), transparent 55%), linear-gradient(145deg, #32236f, #1b1b42); border-color: #5b4b95; box-shadow: 0 30px 65px rgb(44 30 100 / 20%); }
.price-card h3, .price b { color: #fff; }
.price-card p, .price-card li, .price-card .note { color: #ded8f5; }
.price-card .meta { color: #ddd7f3; background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 16%); }
.price-card .meta b { color: #fff; }
.price-card a:not(.btn) { color: #f0d5ff; }
.outcomes div::before { color: #7552e7; }
.legal h1, .legal h2 { color: #211b3c; }
.legal h2 { border-color: #e0dce8; }
.legal p, .legal li { color: #514d60; }
.legal a { color: #6545d9; }
.error-page h1 { color: #21183f; }
.error-page p { color: #585168; }
.footer { color: #fff; background: #17152a; border-color: #312c48; }
.footer .logo { color: #fff; }
.footer .logo small, .footer p, .footer__copy { color: #b7b1cd; }
.footer nav a { color: #d2cde1; }
.footer nav a:hover { color: #fff; }
.footer__copy { border-color: #39324f; }
.socials a { color: #ddd5f4; border-color: #48405f; background: #242139; }
.socials a:hover { color: #fff; background: #3a2d6f; border-color: #8063d6; }
.wa-float { background: #24bd73; }
.consent { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: .65rem !important; font-size: .84rem !important; font-weight: 500 !important; line-height: 1.5; color: #5d576d !important; }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; min-height: 0; margin: .13rem 0 0; accent-color: #6847e8; }
.consent a { color: #5c3dcc; text-underline-offset: 2px; }
.storage-notice { position: fixed; z-index: 95; left: 1.25rem; bottom: 1.25rem; width: min(34rem, calc(100vw - 2.5rem)); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: 18px; color: #221d39; background: rgb(255 255 255 / 96%); border: 1px solid #dcd5ec; box-shadow: 0 18px 55px rgb(37 23 91 / 18%); backdrop-filter: blur(16px); }
.storage-notice b { display: block; font-size: .9rem; }
.storage-notice p { margin-top: .2rem; color: #625b71; font-size: .8rem; line-height: 1.45; }
.storage-notice a { color: #5638c5; }
.storage-notice .btn { flex: none; }
@media (max-width: 540px) { .storage-notice { display: grid; } .storage-notice .btn { width: 100%; } }

/* Movimiento y detalles que acompañan al contenido */
@media (hover: hover) and (pointer: fine) {
  .card::after, .pcard::after, .product::after, .service::after {
    opacity: 0;
    background: radial-gradient(circle 13rem at var(--mx, 85%) var(--my, 0%), rgb(139 109 243 / 17%), transparent 75%);
  }
  .card:hover::after, .pcard:hover::after, .product:hover::after, .service:hover::after { opacity: 1; }
}
.card, .pcard, .product, .service { transform-style: preserve-3d; }
.card::before, .pcard::before, .product::before, .service::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(180deg, #7b58f0, #e88985);
  transition: opacity .3s ease;
}
.card:hover::before, .pcard:hover::before, .product:hover::before, .service:hover::before { opacity: 1; }
.project__body { position: relative; }
.project__body::before { content: ""; position: absolute; top: 0; left: 2rem; right: 2rem; height: 2px; background: linear-gradient(90deg, #7555e7, #e2858c, transparent); opacity: .75; }
.project .mock { isolation: isolate; }
.project .mock::before { content: ""; position: absolute; z-index: -1; width: 20rem; aspect-ratio: 1; border: 1px solid rgb(104 75 208 / 16%); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(104 75 208 / 5%), 0 0 0 6rem rgb(104 75 208 / 3%); }
.browser { transform: perspective(900px) rotateY(-5deg) rotateX(3deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.project:hover .browser { transform: perspective(900px) rotateY(0) rotateX(0) translateY(-4px); }
.browser__hero { background: linear-gradient(130deg, #3f2bb1, #6645df 57%, #b969bb); }
.browser__bar { background: #ece8f8; }
.browser__bar span { color: #655d7f; }
.browser__row div { border-color: #e5e0ef; }
.steps { position: relative; }
.step { position: relative; overflow: hidden; }
.step::after { content: ""; position: absolute; top: 1.7rem; right: 1.6rem; width: 2.5rem; height: 2.5rem; border: 1px solid #eee8fa; border-radius: 50%; background: radial-gradient(circle, #e6ddff 12%, transparent 14%); }
.module { position: relative; overflow: hidden; }
.module::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(#7654e9, #da7d92); opacity: .6; }
.module:hover::after { width: 5px; opacity: 1; }
.outcomes div { align-items: start; }
.outcomes div::before { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 9px; color: #6745d9; background: #eee9ff; line-height: 1; }
.price-card::before { background: linear-gradient(90deg, #9a75ff, #e590b5, #f6c885); }
.price-card::after { content: ""; position: absolute; width: 18rem; aspect-ratio: 1; top: -10rem; right: -9rem; border-radius: 50%; background: radial-gradient(circle, rgb(234 177 228 / 20%), transparent 70%); pointer-events: none; }
.price-card > * { position: relative; z-index: 1; }
.store-visual__core { animation: float-core 6s ease-in-out infinite; }
.store-visual__tile--one { animation: float-tile-a 7s ease-in-out infinite; }
.store-visual__tile--two { animation: float-tile-b 8s ease-in-out infinite; }
.store-visual__tile--three { animation: float-tile-a 7.5s ease-in-out infinite reverse; }
@keyframes float-core { 50% { transform: translateY(-10px) rotate(-9deg); } }
@keyframes float-tile-a { 50% { translate: 0 -8px; } }
@keyframes float-tile-b { 50% { translate: 0 8px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .js .reveal.in { animation: reveal-up .65s cubic-bezier(.2,.8,.2,1) both; }
  .grid-3 > .reveal.in:nth-child(3n + 2), .product-grid > .reveal.in:nth-child(3n + 2), .pgrid > .reveal.in:nth-child(3n + 2) { animation-delay: .07s; }
  .grid-3 > .reveal.in:nth-child(3n + 3), .product-grid > .reveal.in:nth-child(3n + 3), .pgrid > .reveal.in:nth-child(3n + 3) { animation-delay: .14s; }
}
@keyframes reveal-up { from { opacity: .8; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .header .nav { background: rgb(255 255 255 / 98%); border-color: #e1ddec; box-shadow: 0 20px 35px rgb(40 30 80 / 11%); }
}
@media (max-width: 980px) {
  .price-card { position: relative; }
}
@media (max-width: 760px) {
  .hero { background: radial-gradient(ellipse 24rem 22rem at 100% 0%, #e1d7ff, transparent 75%), #faf9fd; }
  .hero h1 { letter-spacing: -.05em; }
  .code-card { transform: none; }
  .store-visual { display: none; }
  .header .nav { background: rgb(255 255 255 / 98%); }
}
@media (prefers-reduced-motion: reduce) {
  .header::after, .eyebrow::before { animation: none; }
  .btn::before { display: none; }
  .store-visual__core, .store-visual__tile { animation: none; }
}