/* Mika — portada pública (rediseño R2, 2026-11-03): marcado y CSS reales de la maqueta del diseñador, con las clases con prefijo «portada-»
   (la maqueta usa nombres en inglés; el prefijo evita choques con las pantallas interiores) y el oscuro en «html.acc-oscuro».
   Tramo 2 de 3 del 5c; se cargan en orden. */
.portada-footer-grid>div>a:not(:has(img)) { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 12px; transition: color .15s }
.portada-footer-grid>div>a:hover { color: var(--primary) }
.portada-footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 23px; font-size: .62rem; color: var(--muted); gap: 25px }
.portada-footer-bottom .portada-link { font-size: .62rem; font-weight: 400; display: flex; align-items: center; gap: 5px }
.portada-footer-bottom .portada-icon { width: 12px; height: 12px }
.portada-experience .portada-reveal { opacity: 1; transform: none }
.portada-experience .portada-reveal.portada-waiting-reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1) }
.portada-experience .portada-reveal.portada-visible { opacity: 1; transform: none }
.portada-experience .portada-content-arrive { animation: content-arrive .4s cubic-bezier(.2, .7, .2, 1) }
.portada-experience [data-tilt] { transition: transform .35s ease-out, box-shadow .35s }
.portada-experience [data-tilt].portada-visible { transition: transform .35s ease-out, box-shadow .35s }
html.acc-oscuro .portada-a-one { background: radial-gradient(ellipse, #593d9e77, transparent 72%) }
html.acc-oscuro .portada-a-two { background: radial-gradient(ellipse, #2c6d6266, transparent 72%) }
html.acc-oscuro .portada-a-three { background: radial-gradient(ellipse, #6840a977, transparent 70%) }
html.acc-oscuro .portada-shimmer-text { background-image: linear-gradient(110deg, #b39aff 15%, #ddbef0 45%, #b39aff 70%) }
html.acc-oscuro .portada-showcase-world { background: radial-gradient(ellipse, #4b356666, transparent 75%) }
html.acc-oscuro .portada-world-glow { background: radial-gradient(ellipse, #6b48a366, transparent 70%) }
html.acc-oscuro .portada-showcase-browser { border-color: #ffffff1f }
html.acc-oscuro .portada-showcase-phone .portada-thumb-preview { background: #faf0e4 }
html.acc-oscuro .portada-bento-photo { background: #292138 }
html.acc-oscuro .portada-final-universe { background: radial-gradient(ellipse at 50% 100%, #7450c733, transparent 70%), var(--card) }
@media(max-width:1100px) {
.portada-experience .portada-container { width: calc(100% - 60px) }
.portada-showcase-phone { right: 60px }
.portada-access-story-grid { gap: 50px }
.portada-bento-grid { gap: 17px }
.portada-bento-card { padding: 24px }
.portada-bento-image { padding: 0 }
.portada-bento-conversation { margin-right: -10px; margin-left: 0 }
.portada-bento-card h3 { font-size: 1.3rem }
.portada-bento-color-sample { font-size: 1.5rem }
.portada-faq-layout { gap: 55px }
.portada-behind-top { gap: 35px }
.portada-mika-services { gap: 17px }
.portada-mika-service>div:last-child { padding: 21px }
.portada-inspiration-card { min-width: 310px }
.portada-showcase-browser { width: 600px; left: calc(50% - 330px) }
.portada-showcase-browser .portada-thumb-preview h4 { font-size: 37px }
}
@media(max-width:850px) {
.portada-exp-hero { padding-top: 55px }
.portada-exp-hero h1 { font-size: 4.5rem }
.portada-exp-showcase { margin-top: 45px }
.portada-showcase-browser { width: 520px; left: calc(50% - 280px); top: 55px }
.portada-showcase-browser .portada-thumb-preview { height: 285px }
.portada-showcase-browser .portada-thumb-preview h4 { font-size: 34px }
.portada-showcase-browser .portada-thumb-preview .portada-tp-text { padding: 35px 23px }
.portada-showcase-phone { right: 35px; width: 129px; height: 250px; top: 120px }
.portada-showcase-phone .portada-thumb-preview h4 { font-size: 19px }
.portada-phone-notch { left: 37px }
.portada-flying-card.portada-fly-a { left: 20px; bottom: 30px }
.portada-fly-b { right: 18px; top: 22px }
.portada-flying-swatch { left: 23px; top: 40px }
.portada-showcase-world { height: 425px }
.portada-showcase-top { align-items: flex-start }
.portada-showcase-top>.portada-flex { font-size: .6rem; max-width: 210px }
.portada-example-tabs button { padding: 5px 9px; font-size: .6rem }
.portada-gallery-heading { gap: 30px }
.portada-gallery-heading p { max-width: 220px; font-size: .75rem }
.portada-bento-image,
.portada-bento-history,
.portada-bento-export { grid-column: span 3 }
.portada-bento-export { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; min-height: 210px }
.portada-bento-export .portada-bento-icon { grid-column: 1 }
.portada-bento-export h3 { grid-column: 1; margin-top: 13px }
.portada-bento-export h3 br { display: none }
.portada-bento-export>p { grid-column: 1; max-width: 300px }
.portada-bento-export .portada-export-stack { grid-column: 2; grid-row: 1/4; align-self: center; margin: 0 }
.portada-access-story-grid { gap: 35px }
.portada-access-lab { padding: 23px }
.portada-access-lab-controls { gap: 5px }
.portada-access-lab-controls .portada-btn { font-size: .55rem; padding: 7px }
.portada-access-story-copy .portada-btn { font-size: .72rem }
.portada-access-story-copy h2 { font-size: 2.7rem }
.portada-access-sample { padding: 25px 18px }
.portada-access-sample h3 { font-size: 1.8rem }
.portada-access-sample.portada-large-text h3 { font-size: 2.2rem }
.portada-behind-top { align-items: flex-start; gap: 30px }
.portada-behind-top>p { max-width: 270px; font-size: .76rem }
.portada-mika-services { grid-template-columns: 1fr }
.portada-mika-service { display: grid; grid-template-columns: 1fr 1.3fr }
.portada-mika-service-image { height: 220px }
.portada-mika-service>div:last-child { padding: 25px }
.portada-mika-service p { min-height: 0 }
.portada-faq-layout { gap: 35px }
.portada-faq-intro h2 { font-size: 2.5rem }
.portada-footer-grid { gap: 25px; grid-template-columns: 1.4fr 1fr 1fr }
.portada-footer-grid>div:last-child { grid-column: 1/-1; display: flex; gap: 25px; align-items: center; flex-wrap: wrap }
.portada-footer-grid>div:last-child h3 { margin: 0 }
.portada-footer-grid>div:last-child>a:not(:has(img)) { margin: 0 }
.portada-experience .portada-section { padding: 80px 0 }
}
@media(max-width:650px) {
.portada-experience .portada-container { width: calc(100% - 36px) }
.portada-exp-hero { padding-top: 43px }
.portada-exp-hero .portada-eyebrow { font-size: .48rem; letter-spacing: .16em; gap: 8px; margin-bottom: 22px }
.portada-exp-hero h1 { font-size: clamp(2.7rem, 10vw, 3.75rem); letter-spacing: -.065em; line-height: 1.08; margin-bottom: 19px }
.portada-hero-lede { font-size: .83rem; line-height: 1.8; margin-bottom: 22px }
.portada-idea-composer { padding: 14px; border-radius: 14px }
.portada-composer-heading { gap: 8px; font-size: .74rem }
.portada-composer-label { display: none }
.portada-idea-composer textarea { font-size: .8rem; min-height: 95px; padding: 14px 0 }
.portada-composer-hint { font-size: .53rem; max-width: 170px; line-height: 1.5; align-items: flex-start }
.portada-composer-hint .portada-icon { width: 11px; height: 11px; margin-top: 2px; flex-shrink: 0 }
.portada-composer-footer .portada-btn { font-size: .67rem; padding: 9px 12px; min-height: 38px; gap: 7px }
.portada-composer-footer .portada-btn .portada-icon { width: 14px; height: 14px }
.portada-idea-chips { gap: 6px; margin: 13px 0 20px }
.portada-idea-chips button { font-size: .57rem; padding: 6px 8px; gap: 5px; min-height: 34px }
.portada-idea-chips button .portada-icon { width: 11px; height: 11px }
.portada-idea-chips button>span { padding-left: 0 }
.portada-hero-footnote { gap: 11px; font-size: .51rem; flex-wrap: wrap }
.portada-hero-footnote .portada-icon { width: 10px; height: 10px }
.portada-exp-showcase { margin-top: 35px; border-radius: 14px }
.portada-showcase-top { padding: 13px; flex-direction: column; align-items: center; gap: 12px }
.portada-showcase-top>.portada-flex { font-size: .61rem; max-width: none }
.portada-example-tabs { width: 100%; justify-content: center }
.portada-example-tabs button { flex: 1; font-size: .62rem; padding: 6px 7px; min-height: 31px }
.portada-showcase-world { height: 290px }
.portada-showcase-browser { width: 290px; left: calc(50% - 162px); top: 34px; border-radius: 7px; transform: rotateZ(-3deg) }
.portada-showcase-browser .portada-browser-bar { height: 18px; padding: 0 7px; gap: 3px; font-size: 5px }
.portada-showcase-browser .portada-browser-bar i { width: 4px; height: 4px }
.portada-showcase-browser .portada-thumb-preview { height: 180px }
.portada-showcase-browser .portada-thumb-preview header { font-size: 5px; padding: 8px 10px }
.portada-showcase-browser .portada-thumb-preview h4 { font-size: 23px }
.portada-showcase-browser .portada-thumb-preview .portada-tp-text { padding: 22px 15px }
.portada-showcase-browser .portada-thumb-preview p { font-size: 6px; line-height: 1.5 }
.portada-showcase-browser .portada-thumb-preview .portada-tiny-cta { font-size: 5px; padding: 5px 8px }
.portada-showcase-phone { width: 83px; height: 165px; border-width: 3px; border-radius: 15px; right: 13px; top: 95px; transform: rotate(7deg) }
.portada-showcase-phone .portada-phone-notch { width: 27px; height: 6px; left: 25px }
.portada-showcase-phone .portada-thumb-preview header { font-size: 3px; padding: 12px 6px 5px }
.portada-showcase-phone .portada-tp-content { height: calc(100% - 25px) }
.portada-showcase-phone .portada-thumb-preview img { height: 62px }
.portada-showcase-phone .portada-tp-text { padding: 8px }
.portada-showcase-phone .portada-tp-text h4 { font-size: 12px; margin-bottom: 5px }
.portada-showcase-phone .portada-tp-text p { font-size: 4px; line-height: 1.3; margin-bottom: 5px }
.portada-showcase-phone .portada-tiny-cta { font-size: 3px; padding: 3px 5px }
.portada-flying-card { gap: 7px; padding: 8px 10px; border-radius: 7px }
.portada-flying-card .portada-spark { width: 23px; height: 23px; border-radius: 6px }
.portada-flying-card .portada-spark .portada-icon { width: 13px; height: 13px }
.portada-flying-card b { font-size: .51rem }
.portada-flying-card small { font-size: .43rem }
.portada-flying-card.portada-fly-a { bottom: 16px; left: 13px }
.portada-fly-b { right: 12px; top: 12px; font-size: .44rem; padding: 7px 9px }
.portada-fly-b>.portada-icon { width: 11px; height: 11px }
.portada-flying-swatch { left: 18px; top: 22px; padding: 6px; gap: 3px }
.portada-flying-swatch>span { width: 10px; height: 10px }
.portada-showcase-bottom { padding: 12px; gap: 9px; align-items: flex-start; flex-direction: column; font-size: .5rem }
.portada-showcase-bottom .portada-link { font-size: .57rem }
.portada-showcase-bottom .portada-link .portada-icon { width: 12px; height: 12px }
.portada-world-orbit { width: 400px; height: 140px; left: calc(50% - 200px); top: 90px }
.portada-orbit-2 { width: 420px; left: calc(50% - 210px) }
.portada-exp-scroll { padding: 27px 0; font-size: .48rem; gap: 10px }
.portada-exp-scroll>span { height: 28px; width: 28px }
.portada-exp-scroll .portada-icon { width: 12px; height: 12px }
.portada-capability-ribbon { padding: 18px 0 }
.portada-capability-ribbon>.portada-container { gap: 7px; font-size: .43rem; letter-spacing: .09em }
.portada-capability-ribbon b { font-size: 16px }
.portada-experience .portada-section { padding: 58px 0 }
.portada-experience h2 { font-size: 2.25rem; line-height: 1.12 }
.portada-experience .portada-section-head { margin-bottom: 30px }
.portada-experience .portada-section-head .portada-eyebrow,
.portada-experience .portada-gallery-heading .portada-eyebrow { font-size: .52rem; letter-spacing: .12em }
.portada-experience .portada-section-head p { font-size: .82rem; line-height: 1.8 }
.portada-gallery-heading { display: block; margin-bottom: 25px }
.portada-gallery-heading p { max-width: none; font-size: .79rem; margin-top: 18px }
.portada-gallery-heading p br { display: none }
.portada-gallery-controls { gap: 7px; flex-wrap: wrap; align-items: center }
.portada-gallery-controls .portada-segmented { flex: 1 }
.portada-gallery-controls .portada-segmented button { font-size: .57rem; padding: 6px 8px; flex: 1 }
.portada-gallery-controls>.portada-flex { gap: 5px }
.portada-gallery-controls .portada-icon-btn { height: 30px; width: 30px }
.portada-gallery-controls .portada-icon { height: 14px; width: 14px }
.portada-inspiration-rail { gap: 15px; min-height: 340px; padding-bottom: 18px }
.portada-inspiration-card { flex-basis: 86%; min-width: 280px }
.portada-inspiration-art { height: 225px }
.portada-inspiration-card-footer { padding: 19px }
.portada-inspiration-card-footer h3 { font-size: .98rem }
.portada-gallery-caption { font-size: .55rem; gap: 20px }
.portada-gallery-caption>span:first-child { max-width: 185px }
.portada-bento-grid { grid-template-columns: 1fr; gap: 16px }
.portada-bento-card,
.portada-bento-export { grid-column: auto; display: block; padding: 25px; min-height: 0 }
.portada-bento-card h3 { font-size: 1.48rem }
.portada-bento-card p { font-size: .78rem; max-width: 330px }
.portada-bento-chat { min-height: 425px }
.portada-bento-conversation { margin: 0 0 -25px 0 }
.portada-mini-user { margin-left: 32px; font-size: .68rem }
.portada-bento-color-sample { font-size: 1.6rem; margin-left: 20px }
.portada-mini-color-row { margin-left: 20px }
.portada-bento-responsive { padding-bottom: 10px }
.portada-bento-device-stage { height: 215px }
.portada-bento-device-frame .portada-thumb-preview { height: 185px }
.portada-bento-image { padding: 0 }
.portada-bento-photo { height: 210px }
.portada-bento-image-copy { padding: 0 25px 7px }
.portada-bento-image-copy h3 { font-size: 1.35rem }
.portada-bento-history { padding-bottom: 23px }
.portada-version-line b { font-size: .7rem }
.portada-version-line small { font-size: .6rem }
.portada-bento-export .portada-export-stack { margin-top: 22px; height: 130px }
.portada-bento-export h3 br { display: block }
.portada-bento-export>p { max-width: 100% }
.portada-access-story-grid { grid-template-columns: 1fr; gap: 35px }
.portada-access-story-copy h2 { font-size: 2.6rem }
.portada-access-story-copy p { font-size: .84rem }
.portada-access-story-copy .portada-access-specific { font-size: .73rem }
.portada-access-story-copy .portada-btn { font-size: .76rem }
.portada-access-story-copy>.portada-link { font-size: .67rem }
.portada-access-lab { padding: 23px; transform: none }
.portada-access-sample h3 { font-size: 2rem }
.portada-access-sample.portada-large-text h3 { font-size: 2.4rem }
.portada-access-lab-controls { gap: 6px }
.portada-access-lab-controls .portada-btn { font-size: .6rem; padding: 8px 10px }
.portada-behind-top { display: block; margin-bottom: 30px }
.portada-behind-top .portada-eyebrow { font-size: .53rem }
.portada-behind-top>p { max-width: 100%; font-size: .81rem; margin-top: 24px }
.portada-mika-service { display: block }
.portada-mika-service-image { height: 180px }
.portada-mika-service>div:last-child { padding: 23px }
.portada-mika-service h3 { font-size: 1.2rem }
.portada-mika-service p { font-size: .78rem; margin-bottom: 18px }
.portada-behind-bottom { margin-top: 30px; flex-direction: column; align-items: flex-start; gap: 18px }
.portada-behind-bottom>span { font-size: .54rem }
.portada-behind-bottom .portada-btn { font-size: .72rem }
.portada-faq-layout { grid-template-columns: 1fr; gap: 30px }
.portada-faq-intro { position: static }
.portada-faq-intro p { max-width: 100%; font-size: .8rem }
.portada-faq-intro .portada-link { font-size: .72rem; margin-top: 20px }
.portada-exp-faq .portada-faq summary { font-size: .8rem; line-height: 1.5 }
.portada-exp-faq .portada-faq details { padding: 20px 0 }
.portada-exp-faq .portada-faq details p { font-size: .76rem }
.portada-final-universe { padding: 50px 22px; border-radius: 19px }
.portada-final-universe h2 { font-size: 2.45rem }
.portada-final-universe>p { font-size: .78rem }
.portada-final-universe>p br { display: none }
.portada-final-universe .portada-btn.portada-large { font-size: .7rem; padding: 12px 16px; min-height: 44px }
.portada-final-universe>.portada-flex { gap: 10px }
.portada-final-universe .portada-eyebrow { font-size: .48rem }
.portada-final-signature { font-size: .45rem }
.portada-exp-footer { padding: 38px 0 22px }
.portada-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 30px }
.portada-footer-grid>div:first-child { grid-column: 1/-1 }
.portada-footer-grid>div:first-child p { margin: 14px 0; font-size: .72rem }
.portada-footer-grid>div:first-child .portada-logo { width: 110px }
.portada-footer-grid h3 { font-size: .73rem; margin-bottom: 16px }
.portada-footer-grid>div>a:not(:has(img)) { font-size: .67rem }
.portada-footer-grid>div:last-child { gap: 12px 22px; align-items: flex-start }
.portada-footer-grid>div:last-child h3 { width: 100%; margin-bottom: 2px }
.portada-footer-bottom { align-items: flex-start; flex-direction: column; gap: 16px; font-size: .57rem }
.portada-footer-bottom>.portada-flex { gap: 15px }
.portada-footer-bottom .portada-link { font-size: .57rem }
.portada-footer-bottom .portada-demo-tag { font-size: .5rem }
}
@media(prefers-reduced-motion:reduce) {
.portada-experience .portada-reveal.portada-waiting-reveal { opacity: 1; transform: none }
.portada-experience [data-tilt].portada-visible { transform: none }
}
.portada-experience section[id] { scroll-margin-top: 110px }
.portada-inspiration-browser .portada-template-editorial .portada-tp-content { flex-direction: column-reverse }
.portada-inspiration-browser .portada-template-editorial img { width: 100%; height: 90px }
.portada-inspiration-browser .portada-template-editorial .portada-tp-text { width: 100%; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 15px }
.portada-inspiration-browser .portada-template-editorial h4 { font-size: 18px; max-width: 150px; margin: 0 }
.portada-inspiration-browser .portada-template-editorial p { display: none }
.portada-inspiration-browser .portada-template-editorial .portada-tiny-cta { white-space: nowrap }
.portada-inspiration-browser .portada-template-minimal { background: #f8f7f4 }
.portada-inspiration-browser .portada-template-minimal header { background: #fff }
.portada-inspiration-browser .portada-template-minimal h4 { font-family: Arial, sans-serif; font-size: 18px }
.portada-inspiration-browser .portada-template-minimal img { border-radius: 40px 0 0 40px }
.portada-inspiration-browser .portada-template-minimal .portada-tiny-cta { border-radius: 3px }
.portada-inspiration-card:nth-child(4) .portada-inspiration-art { background: linear-gradient(120deg, #d7e6dc, #f2e9d8) }
.portada-inspiration-card:nth-child(5) .portada-inspiration-art { background: linear-gradient(120deg, #edd5c8, #f1e9df) }
.portada-inspiration-card:nth-child(6) .portada-inspiration-art { background: linear-gradient(120deg, #e0d9f2, #f0e5ee) }
@media(max-width:380px) {
.portada-exp-hero h1 { font-size: 2.65rem }
.portada-idea-chips { gap: 5px }
.portada-idea-chips button { font-size: .53rem; padding: 6px 7px }
}
.portada-exp-hero { --pointer-x: 50%; --pointer-y: 30% }
.portada-exp-hero:after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(550px circle at var(--pointer-x) var(--pointer-y), #9878ff13, transparent 70%) }
.portada-exp-atmosphere .portada-aurora-light { opacity: .8; filter: blur(45px) }
.portada-exp-atmosphere .portada-a-one { background: radial-gradient(ellipse, #d0beff9c, transparent 75%) }
.portada-exp-atmosphere .portada-a-two { background: radial-gradient(ellipse, #bdeedcaa, transparent 75%) }
.portada-hero-sculpture { position: absolute; pointer-events: none; width: 235px; height: 235px; top: 120px; left: -100px; perspective: 700px; opacity: .65; animation: sculpture-float 13s ease-in-out infinite }
.portada-hero-sculpture.portada-sculpture-right { left: auto; right: -110px; top: 410px; transform: scale(.8); animation-delay: -6s }
.portada-sculpture-ring { position: absolute; inset: 0; border: 19px solid #a88cfa44; border-right-color: #b8e5d266; border-top-color: #b59ce97a; border-radius: 50%; transform: rotateY(55deg) rotateX(30deg) rotateZ(-25deg); box-shadow: inset 4px 3px 15px #fff5, 0 10px 35px #7651c51c; backdrop-filter: blur(3px) }
.portada-sculpture-ring:nth-child(2) { inset: 35px; border-width: 14px; transform: rotateY(-30deg) rotateX(50deg) rotateZ(40deg); border-color: #b2d8cb77 #8b6cdd77 #b2d8cb44 #c7b2f588 }
.portada-sculpture-sphere { position: absolute; width: 65px; height: 65px; left: 86px; top: 83px; border-radius: 50%; background: radial-gradient(circle at 28% 23%, #ffffff, #a7e2ca 38%, #5b9f977a 82%); box-shadow: 8px 13px 25px #5e37872c }
.portada-sculpture-right .portada-sculpture-sphere { background: radial-gradient(circle at 28% 23%, #faf6ff, #b18af3 38%, #7651ca 82%) }
.portada-exp-showcase { box-shadow: 0 35px 85px #6346ff1b, 0 3px 12px #3a165d06 }
.portada-exp-showcase .portada-world-orbit { border-color: color-mix(in srgb, var(--primary) 23%, transparent); box-shadow: 0 0 25px #9d7dfb08 }
.portada-exp-showcase .portada-world-glow { background: radial-gradient(ellipse, #c2a9ff96, transparent 70%) }
.portada-exp-showcase .portada-showcase-browser { box-shadow: 0 40px 60px #25154128, 0 6px 0 #ffffff60 }
.portada-exp-showcase .portada-showcase-world { background: radial-gradient(ellipse at 50% 50%, #e1d5ff80, transparent 80%) }
.portada-cosmic-lab { position: relative; background: var(--card); border-block: 1px solid var(--line); isolation: isolate }
.portada-cosmic-lab:before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 15% 70%, #b79aff0f, transparent 60%) }
.portada-cosmic-playground { display: grid; grid-template-columns: 1.55fr 1fr; border: 1px solid var(--line); border-radius: 23px; overflow: hidden; background: var(--bg); box-shadow: 0 25px 70px #35204c09 }
.portada-cosmic-scene-wrap { min-width: 0; position: relative; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cosmic-color) 12%, transparent), transparent 70%) }
.portada-cosmic-scene-top { display: flex; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid var(--line) }
.portada-cosmic-live { display: flex; align-items: center; gap: 7px; font-size: .55rem; letter-spacing: .13em; color: var(--primary) }
.portada-cosmic-live.portada-muted { color: var(--muted); font-size: .5rem }
.portada-cosmic-live .portada-icon { height: 14px; width: 14px }
.portada-cosmic-stage { height: 390px; position: relative; perspective: 1000px; isolation: isolate; overflow: hidden }
.portada-cosmic-stage:focus-visible { outline-offset: -5px; border-radius: 8px }
.portada-cosmic-spotlight { position: absolute; left: calc(50% - 165px); top: 65px; width: 330px; height: 240px; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--cosmic-color) 20%, transparent), transparent 70%); filter: blur(15px) }
.portada-cosmic-floor { position: absolute; bottom: -140px; left: calc(50% - 300px); width: 600px; height: 420px; background-image: linear-gradient(color-mix(in srgb, var(--cosmic-color) 13%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cosmic-color) 13%, transparent) 1px, transparent 1px); background-size: 35px 35px; transform: rotateX(65deg); mask-image: radial-gradient(ellipse, #000a, transparent 70%) }
.portada-cosmic-halo { position: absolute; width: 340px; height: 170px; border: 1px solid color-mix(in srgb, var(--cosmic-color) 28%, transparent); border-radius: 50%; top: 105px; left: calc(50% - 170px); transform: rotate(-25deg); box-shadow: 0 0 25px color-mix(in srgb, var(--cosmic-color) 5%, transparent); pointer-events: none; animation: halo-breathe 7s ease-in-out infinite }
.portada-cosmic-halo.portada-halo-b { width: 320px; height: 180px; left: calc(50% - 160px); transform: rotate(40deg); animation-delay: -3s }
.portada-cosmic-cube-position { position: absolute; top: 115px; left: calc(50% - 66px); width: 132px; height: 132px; perspective: 800px; animation: core-levitate 6s ease-in-out infinite }
.portada-cosmic-cube { width: 132px; height: 132px; position: relative; transform-style: preserve-3d; transform: rotateX(var(--cube-x)) rotateY(var(--cube-y)); transition: transform .65s cubic-bezier(.2, .8, .2, 1) }
.portada-cube-face { position: absolute; inset: 0; width: 132px; height: 132px; background: color-mix(in srgb, var(--cosmic-color) 80%, #b9a6f0); border: 1px solid #ffffff60; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 15px; box-shadow: inset 0 0 25px #ffffff18; backface-visibility: hidden; transition: transform .75s cubic-bezier(.2, .8, .2, 1), background .4s }
.portada-cube-front { background: linear-gradient(135deg, #fff, #f5f0fc); transform: translateZ(66px); box-shadow: inset 0 0 25px #ffffff80 }
.portada-cube-front img { width: 95px; filter: none; visibility: visible }
.portada-cube-front span { font-size: 3.5px; color: #716381; letter-spacing: .18em; margin-top: 13px }
.portada-cube-back { transform: rotateY(180deg) translateZ(66px) }
.portada-cube-right { transform: rotateY(90deg) translateZ(66px); background: color-mix(in srgb, var(--cosmic-color) 84%, #412b71) }
.portada-cube-left { transform: rotateY(-90deg) translateZ(66px) }
.portada-cube-top { transform: rotateX(90deg) translateZ(66px); background: color-mix(in srgb, var(--cosmic-color) 44%, #e6ddff) }
.portada-cube-bottom { transform: rotateX(-90deg) translateZ(66px) }
.portada-cube-face>.portada-icon { width: 43px; height: 43px; color: #fff; stroke-width: 1.3 }
.portada-exploded .portada-cube-front { transform: translateZ(105px) }
.portada-exploded .portada-cube-back { transform: rotateY(180deg) translateZ(105px) }
.portada-exploded .portada-cube-right { transform: rotateY(90deg) translateZ(105px) }
.portada-exploded .portada-cube-left { transform: rotateY(-90deg) translateZ(105px) }
.portada-exploded .portada-cube-top { transform: rotateX(90deg) translateZ(105px) }
.portada-exploded .portada-cube-bottom { transform: rotateX(-90deg) translateZ(105px) }
.portada-cosmic-satellites { position: absolute; inset: 0; pointer-events: none }
.portada-cosmic-node { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--card) 93%, transparent); border: 1px solid var(--line); padding: 9px 13px; border-radius: 10px; box-shadow: 0 9px 20px #37234f09; color: var(--muted); transition: all .25s; min-height: 40px; backdrop-filter: blur(15px) }
.portada-cosmic-node>span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--soft); color: var(--primary) }
.portada-cosmic-node .portada-icon { width: 15px; height: 15px }
.portada-cosmic-node b { font-size: .62rem; font-weight: 550 }
.portada-cosmic-node:hover { transform: translateY(-4px); border-color: var(--primary); color: var(--primary); box-shadow: 0 12px 30px #6346ff18 }
.portada-cosmic-node.portada-selected { border-color: var(--primary); color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent), 0 9px 20px #37234f09 }
.portada-node-1 { top: 52px; left: 15% }
.portada-node-2 { top: 45px; right: 12% }
.portada-node-3 { top: 163px; left: 6% }
.portada-node-4 { top: 170px; right: 5% }
.portada-node-5 { top: 280px; left: 15% }
.portada-node-6 { top: 277px; right: 13% }
.portada-cosmic-drag-hint { position: absolute; bottom: 17px; left: 0; right: 0; font-size: .55rem; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 6px }
.portada-cosmic-drag-hint .portada-icon { width: 12px; height: 12px }
.portada-cosmic-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 21px; border-top: 1px solid var(--line); flex-wrap: wrap; background: color-mix(in srgb, var(--card) 55%, transparent) }
.portada-cosmic-rotation { display: flex; align-items: center; gap: 6px }
.portada-cosmic-rotation .portada-icon-btn { height: 32px; width: 32px }
.portada-cosmic-rotation .portada-icon { width: 14px; height: 14px }
.portada-cosmic-rotation .portada-btn { font-size: .58rem; min-height: 32px; padding: 6px 11px }
.portada-cosmic-palette { display: flex; gap: 8px }
.portada-cosmic-palette button { width: 22px; height: 22px; background: var(--color); border: 3px solid var(--card); outline: 1px solid var(--line); border-radius: 50%; transition: transform .2s }
.portada-cosmic-palette button.portada-selected { outline: 2px solid var(--color); outline-offset: 1px; transform: scale(1.07) }
.portada-cosmic-expand.portada-btn { font-size: .58rem; min-height: 32px; padding: 7px 9px }
.portada-cosmic-expand .portada-icon { width: 12px; height: 12px }
.portada-cosmic-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 14px 25px 20px; border-top: 1px solid var(--line) }
.portada-cosmic-ranges label { display: flex; align-items: center; gap: 11px; font-size: .57rem; color: var(--muted) }
.portada-cosmic-ranges input { width: 100%; min-width: 0; accent-color: var(--primary); height: 5px; cursor: pointer }
.portada-cosmic-detail { border-left: 1px solid var(--line); padding: 55px 40px; align-self: stretch; background: var(--card); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden }
.portada-cosmic-detail:after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid var(--line); border-radius: 50%; right: -100px; bottom: -130px; pointer-events: none }
.portada-cosmic-detail-icon { width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line)); border-radius: 14px; display: grid; place-items: center; color: var(--primary); background: var(--soft); box-shadow: 5px 5px 0 color-mix(in srgb, var(--primary) 8%, transparent); margin-bottom: 34px }
.portada-cosmic-detail-icon>.portada-icon { height: 26px; width: 26px }
.portada-cosmic-detail .portada-eyebrow { font-size: .51rem; letter-spacing: .13em; line-height: 1.8 }
.portada-cosmic-detail h3 { font-size: 2rem; line-height: 1.15; letter-spacing: -.045em; margin-bottom: 21px }
.portada-cosmic-detail p { font-size: .83rem; line-height: 1.9; margin-bottom: 30px }