/* Cielo fotográfico real; solo la franja costera inferior procede de IA. */
.hero-sky{background-image:url('assets/galactic-center-eso.jpg');background-position:center;transform:scaleX(-1)}
.hero-sky:after{content:'';position:absolute;left:0;right:0;bottom:0;height:min(6%,4vw);background:url('assets/sky-coast-v2.png') center bottom/100% auto no-repeat;mask-image:linear-gradient(transparent,#000 30%);-webkit-mask-image:linear-gradient(transparent,#000 30%)}
.hero:after{background:linear-gradient(90deg,#060c18cc 0%,#060c1860 52%,#060c1828 100%),linear-gradient(0deg,#080d18 0%,#080d18d9 9%,transparent 38%,#080d1840 100%)}
.community{background-image:linear-gradient(#080d1866,#080d18ed),url('assets/galactic-center-eso.jpg');background-position:center}
.sky-intro{padding-top:150px;padding-bottom:120px;position:relative}
.sky-intro:before{content:'';position:absolute;top:30px;left:50%;width:1px;height:65px;background:linear-gradient(transparent,var(--lavender));opacity:.6}
.sky-intro .section-top,.guides .section-top{padding-top:25px;border-top:1px solid var(--line);margin-bottom:55px}
.sky-intro .section-top .eyebrow,.guides .section-top .eyebrow,.project>.eyebrow{font-size:16px!important;letter-spacing:2px}
.sky-intro .intro-heading{align-items:end;gap:45px;margin-bottom:64px}
.sky-intro #sky-title,.guides #guides-title{font-size:clamp(48px,5.2vw,74px);line-height:1.1;letter-spacing:-.055em}
.intro-heading>p{max-width:310px}
.story-read{display:block;margin-top:24px;font-size:14px;color:var(--lavender)}
.guides{padding-block:120px}
.guides-heading{gap:50px;align-items:end}
.guides-heading>p{max-width:300px}
.illustrated-guides>a{gap:24px;padding-block:28px;min-height:190px}
.guide-thumb{width:170px;height:128px;object-fit:cover;border-radius:4px;flex-shrink:0}
.thumb-luna,.thumb-planetas{object-fit:contain;background:#0c1220;mix-blend-mode:screen}
.illustrated-guides .guide-number{width:30px;font-size:24px}
.illustrated-guides h3{font-size:28px;line-height:1.3;letter-spacing:-.8px;margin-block:8px}
.guide-summary{font-size:16px;line-height:1.65;color:var(--muted);margin:8px 0}
.guide-duration{font-size:13px;color:var(--lavender)}
.project{padding-block:80px 120px}
.project h2{font-size:clamp(46px,4.4vw,64px);line-height:1.12}
.community h2{font-size:clamp(44px,4.7vw,68px);line-height:1.15}
@keyframes section-arrive{from{opacity:.45;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.section-arrived{animation:section-arrive .8s ease-out both}
@media(max-width:1000px) and (min-width:701px){.intro-heading,.guides-heading{display:block}.intro-heading>p,.guides-heading>p{max-width:520px;margin-top:28px}.guide-thumb{width:130px;height:110px}.illustrated-guides h3{font-size:25px}}
@media(max-width:700px){
 .hero-sky{background-position:60% center}
 .hero:after{background:linear-gradient(90deg,#060c18bf,#060c1845),linear-gradient(0deg,#080d18 0%,#080d18a8 14%,transparent 65%)}
 .hero-footer{padding-bottom:30px}
 .sky-intro{padding-top:110px;padding-bottom:75px}
 .sky-intro:before{top:7px;height:55px}
 .sky-intro .section-top,.guides .section-top{margin-bottom:35px;padding-top:20px}
 .sky-intro .section-top .eyebrow,.guides .section-top .eyebrow,.project>.eyebrow{font-size:14px!important;letter-spacing:1.4px}
 .sky-intro #sky-title,.guides #guides-title{font-size:clamp(40px,11.5vw,50px);letter-spacing:-.055em}
 .sky-intro .intro-heading{margin-bottom:40px}
 .intro-heading>p{max-width:100%}
 .guides{padding-block:75px}
 .illustrated-guides>a{display:grid;grid-template-columns:78px 1fr 18px;gap:16px;padding-block:24px}
 .guide-thumb{width:78px;height:98px;grid-column:1;grid-row:1/3}
 .illustrated-guides .guide-number{display:none}
 .illustrated-guides>a>div{grid-column:2}
 .illustrated-guides .guide-direction{grid-column:3;grid-row:1;align-self:center}
 .illustrated-guides h3{font-size:21px;letter-spacing:-.5px;margin-block:8px}
 .guide-summary{display:none}
 .guide-duration{line-height:1.6}
 .guide-category{font-size:13px!important;letter-spacing:.8px}
 .project{padding-block:50px 75px}
 .project h2{font-size:42px}
 .community h2{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.section-arrived{animation:none}}
@media(max-width:700px){.hero-sky{background-position:55% center}.hero-sky:after{height:3%;background-image:url('assets/sky-coast-v2-mobile.png')}}

/* Cabecera con mayor presencia y sin separador horizontal. */
.header{height:104px;border-bottom:0;gap:24px;background:linear-gradient(#03071385,transparent)}
.header nav{gap:32px;font-size:20px;font-weight:600;color:#fff;text-shadow:0 1px 10px #000b}
.header nav a{color:#fff;padding-block:18px}
.header nav a:hover{color:var(--lavender)}
.header-action{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:4px;background:#f4f1eb;color:#111827;font-size:18px;font-weight:700;padding:15px 22px;min-height:54px;white-space:nowrap;text-shadow:none}
.header-action:hover{background:#fff}
.menu{font-size:25px}
@media(min-width:1101px){.header nav{display:flex}}
@media(max-width:1100px){
 .header{padding-inline:32px;gap:20px}
 .menu{display:block}
 .header-action{margin-left:auto;display:inline-flex;font-size:17px;padding:13px 18px}
 .header nav{display:none;position:absolute;top:104px;left:0;right:0;padding:20px 32px;background:#0b1221;flex-direction:column;gap:0;border:0;box-shadow:0 20px 30px #0005}
 .header nav.open{display:flex}
 .header nav a{padding:16px 0}
}
@media(max-width:700px){
 .header{height:78px;padding-inline:20px;gap:14px}
 .header-action{display:none}
 .header nav{top:78px;padding-inline:24px;font-size:20px}
 .menu{margin-left:auto}
}

/* Recorte de la captura integrado al marco del teléfono del hero. */
.hero-product .phone{border-radius:44px;overflow:hidden;user-select:none;-webkit-user-select:none}
/* Captura original intacta. Solo se ocultan las barras de Android:
   76 px superiores y 42 px inferiores sobre una imagen de 714 x 1599. */
.hero-screen-crop{position:relative;aspect-ratio:714/1481;overflow:hidden;border-radius:36px}
.hero-product .hero-screen-crop img{position:absolute;inset:auto 0 auto;top:-5.1316678%;width:100%;height:auto;border-radius:0;clip-path:none;max-width:none}
.hero-product .phone img{border-radius:36px;clip-path:inset(0 round 36px);-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
@media(max-width:700px){.hero-product .phone{border-radius:38px}.hero-product .phone img{border-radius:31px;clip-path:inset(0 round 31px)}}

/* Portada breve: app, guías y comunidad; presentación del proyecto al pie. */
.app-section{position:relative}
.guides{padding-block:100px}
.guides-heading>p{max-width:320px}
.footer-top{gap:60px;align-items:start}
.footer-about{max-width:570px;margin:0;color:var(--muted);font-size:16px;line-height:1.8;scroll-margin-top:35px}
@media(max-width:700px){.guides{padding-block:70px}.footer-about{font-size:16px;margin-top:24px}.community h2{font-size:44px}}

/* Experiencia real, sin duplicar la captura de inicio. */
.play-download[hidden]{display:none!important}
.header nav{font-size:18px;gap:25px}
.hero{min-height:900px}
.hero-inner{min-height:900px;padding-block:150px 105px}
.app-layout{padding-block:85px;gap:70px}
.app-tabs{margin-top:26px}
.app-tabs button{gap:16px;min-height:83px;padding-block:16px}
.app-tabs .feature-index{font-size:14px;flex:none;width:24px;color:#a995d3}
.app-tabs button>span:nth-child(2){flex:1}
.app-tabs strong{display:block;font-size:20px;font-weight:600;line-height:1.4}
.app-tabs small{display:block;font-size:15px;line-height:1.55;margin-top:4px;color:var(--muted)}
.app-tabs button[aria-selected=true] small{color:#ded4ef}
.app-explanation{min-height:92px;margin-bottom:0}
.availability a{color:var(--lavender);text-decoration:underline;text-underline-offset:3px}
.second-phone img{aspect-ratio:430/932;object-fit:contain}
.second-phone{border-radius:43px;overflow:hidden;user-select:none}
.second-phone img{border-radius:35px;clip-path:inset(0 round 35px);-webkit-user-drag:none}
.capture-context{font-size:13px;color:var(--muted);text-align:center;line-height:1.7;margin-top:9px;z-index:1;max-width:320px}
.how-it-works{padding-block:80px}
.how-it-works .section-top{margin-bottom:35px}
.how-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:45px}
.how-heading h2{font-size:clamp(42px,4.5vw,64px);letter-spacing:-.05em}
.how-heading>p{max-width:330px;color:var(--muted);font-size:18px;line-height:1.8;margin:0}
.observation-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.observation-flow li{border-top:1px solid var(--line);padding-top:22px}
.observation-flow li>span{font-family:var(--serif);font-style:italic;font-size:32px;color:var(--lavender)}
.observation-flow h3{font-size:23px;line-height:1.35;margin:15px 0 12px}
.observation-flow p{font-size:17px;line-height:1.75;color:var(--muted);margin:0}
.guides{padding-block:70px 85px}
.library-link{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:32px}
.library-link>a:last-child{font-size:16px;line-height:1.7;color:var(--lavender)}
.community-reach{display:flex;justify-content:center;gap:70px;margin:35px auto 20px}
.community-reach strong{display:block;font-size:34px;font-weight:500;letter-spacing:-1px;color:#f4f1eb}
.community-reach span{display:block;font-size:16px;color:#d2d5df;margin-top:8px;line-height:1.6}
.community .reach-context{font-size:13px;color:#b4bccc;margin:0 0 28px}
@media(max-width:1100px) and (min-width:701px){.observation-flow{grid-template-columns:repeat(2,1fr);gap:35px}.app-layout{gap:40px}}
@media(max-width:700px){
 .header nav{font-size:20px}
 .hero{min-height:0}
 .hero-inner{min-height:0;padding-block:120px 90px}
 .app-layout{padding-block:65px;gap:35px}
 .app-tabs strong{font-size:19px}
 .app-tabs small{font-size:15px}
 .app-explanation{min-height:120px}
 .second-phone{width:min(80vw,310px)}
 .how-it-works{padding-block:65px 35px}
 .how-heading{display:block;margin-bottom:32px}
 .how-heading h2{font-size:42px}
 .how-heading>p{font-size:17px;margin-top:22px}
 .observation-flow{grid-template-columns:1fr;gap:25px}
 .observation-flow li{position:relative;padding:20px 0 0 45px}
 .observation-flow li>span{position:absolute;left:0;top:22px;font-size:28px}
 .observation-flow h3{font-size:23px;margin-top:0}
 .guides{padding-block:55px 65px}
 .library-link{gap:20px}
 .community-reach{display:grid;gap:22px;margin-top:30px}
 .community-reach strong{font-size:31px}
 .community-reach span{font-size:15px}
}
.app-tabs button>span.feature-index:first-child{flex:0 0 24px;font-size:14px;width:24px}
.app-tabs button>span:nth-child(2){text-align:left}
.store-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:220px;border:0;background:none;padding:0;box-shadow:none;text-decoration:none;line-height:0}
.store-badge img{display:block;width:100%;height:auto}
.header .header-action.store-badge{width:172px;padding:0;background:none;border:0;box-shadow:none}
.hero-actions .hero-store-badge{width:220px}
.store-badge[hidden]{display:none}
@media(max-width:700px){.hero-actions .hero-store-badge{width:200px}.header .header-action.store-badge{display:none}}
