/* MÓCHATE · Sistema Digital v1.1 */
:root{
  --mochate-morado:#943681;
  --mochate-marfil:#F6EFE2;
  --mochate-blanco:#FFFFFF;
  --mochate-negro:#1E1E1E;
  --mochate-crema:#FFF8EF;
  --mochate-ambar:#F3B44B;
  --font-primary:'Raleway', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{margin:0;font-family:var(--font-primary);background:var(--mochate-negro);color:var(--mochate-blanco);overflow-x:hidden}
.estacion{min-height:100vh;width:100%;position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,96px);scroll-snap-align:start;overflow:hidden}
.portada{background-image:url("../assets/portada-amaranto.png");background-size:cover;background-position:center center}
.portada__velo{position:absolute;inset:0;background:radial-gradient(circle at 18% 38%,rgba(255,190,86,.18),transparent 30%),linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.48) 100%)}
.portada__texto{position:relative;z-index:2;width:min(86vw,920px);transform:translate(-5vw,-2vh);opacity:0;animation:aparecer 2.6s ease .65s forwards}
@keyframes aparecer{from{opacity:0;transform:translate(-5vw,0)}to{opacity:1;transform:translate(-5vw,-2vh)}}
.portada h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.linea-raleway{color:var(--mochate-marfil);font-size:clamp(1.65rem,3.6vw,3.25rem);font-weight:300;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.20)}
.palabra-evoluciona{width:clamp(260px,42vw,620px);height:auto;margin-top:.15rem;margin-left:clamp(44px,7.8vw,130px);display:block;filter:drop-shadow(0 2px 15px rgba(255,255,255,.10))}
.inicia-recorrido{position:absolute;z-index:3;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:rgba(246,239,226,.82);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:300}
.inicia-recorrido i{width:1px;height:34px;background:rgba(246,239,226,.62);display:block;animation:linea-respira 1.9s ease-in-out infinite}
@keyframes linea-respira{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
.umbral,.ecosistema{background:linear-gradient(180deg,rgba(30,30,30,.94),rgba(30,30,30,.84)),url("../assets/portada-amaranto.png");background-size:cover;background-position:center center}
.estacion__contenido{max-width:1040px;text-align:center}
.etiqueta{margin:0 0 30px;font-size:clamp(.78rem,1.25vw,1rem);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.68);font-weight:500}
.estacion h2{margin:0;font-size:clamp(2.05rem,6vw,5.35rem);font-weight:300;line-height:1.16;letter-spacing:.01em}
.estacion h2 strong{font-weight:600;color:var(--mochate-ambar)}
.modelo,.cierre{background:var(--mochate-crema);color:var(--mochate-negro)}
.modelo__contenido,.cierre__contenido{max-width:860px;text-align:center}
.modelo__titulo{margin:0 0 28px;color:var(--mochate-morado);font-size:clamp(2.1rem,5.8vw,5rem);font-weight:300;line-height:1.1}
.modelo__texto{margin:0 auto;max-width:760px;color:#4C3A46;font-size:clamp(1.2rem,2.5vw,1.8rem);line-height:1.65;font-weight:300}
.palabra-continuara{width:clamp(260px,42vw,640px);height:auto;display:block;margin:0 auto 30px}
.cierre p{margin:0 auto 44px;max-width:760px;color:#4C3A46;font-size:clamp(1.25rem,2.5vw,1.8rem);line-height:1.6;font-weight:300}
.cierre small{color:rgba(148,54,129,.76);letter-spacing:.22em;text-transform:uppercase;font-weight:500}
footer{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:.82rem;color:rgba(76,58,70,.55)}
@media (max-width:720px){
  html{scroll-snap-type:y proximity}
  .estacion{padding:30px 22px}
  .portada{background-position:18% center}
  .portada__velo{background:radial-gradient(circle at 22% 36%,rgba(255,190,86,.22),transparent 34%),linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.52) 100%)}
  .portada__texto{width:90vw;transform:translate(0,-18vh)}
  @keyframes aparecer{from{opacity:0;transform:translate(0,-14vh)}to{opacity:1;transform:translate(0,-18vh)}}
  .portada h1{align-items:center}
  .linea-raleway{font-size:clamp(1.45rem,7vw,2.4rem)}
  .palabra-evoluciona{width:min(86vw,390px);margin-left:0;margin-top:.08rem}
  .inicia-recorrido{bottom:28px;font-size:.68rem;width:100%}
  .estacion h2{font-size:clamp(2.15rem,10vw,4rem)}
  .modelo__titulo{font-size:clamp(2.1rem,10vw,4.1rem)}
  .modelo__texto,.cierre p{font-size:clamp(1.12rem,5vw,1.45rem)}
  .palabra-continuara{width:min(88vw,420px)}
  footer{font-size:.72rem;padding:0 22px}
}