/* ==========================================================================
   hero-clouds.css — Hero "el dashboard emerge de las nubes".

   Alcance: EXCLUSIVAMENTE escritorio (min-width:901px), que es el mismo
   corte que ya usaba el hero de escritorio del sitio. Por debajo de 901px
   no se toca ni un pixel: en tablet sigue el hero anterior y en telefono
   (<=699px) manda .mobile-visual-hero, la portada pegada.

   Tres planos, en este orden de pintado:
     1. .hero-sky        cielo y nubes de fondo (foto del cliente).
     2. .hero-dashboard  la captura REAL del sistema, sin retocar.
     3. .hero-fog        nubes de primer plano, recortadas de la MISMA foto,
                         que se comen la parte baja de la captura y acaban
                         convertidas en el blanco de la seccion siguiente.

   Cada plano separa sus transformaciones en capas distintas para que nunca
   se pisen: el parallax escribe --par-y en el contenedor, la entrada anima
   .__rise y la flotacion anima .__float. Todo con transform/opacity.
   ========================================================================== */

@media (min-width:901px){

  /* ----------------------------------------------------------------------
     ESTRUCTURA
     ---------------------------------------------------------------------- */
  .home-page main[data-page="index"] > .hero{
    /* El degradado naranja anterior desaparece: ahora el fondo lo pinta
       .hero-sky, que es una capa propia y por tanto puede llevar parallax. */
    background-image:none;
    background-color:#fdfbf9;
    height:auto;
    min-height:100svh;
    /* clip en vez de hidden: no crea contenedor de scroll y evita que el
       ancho de la escena provoque barra horizontal. */
    overflow:clip;
    display:flex;
    flex-direction:column;
    isolation:isolate;
  }

  /* La figura del hero anterior y sus halos ceden el sitio a la escena. */
  .home-page main[data-page="index"] > .hero .desktop-hero-person,
  .home-page main[data-page="index"] > .hero .hero-halo,
  .home-page main[data-page="index"] > .hero .sun-wrap{
    display:none!important;
  }

  /* La captura del sistema pasa a vivir en el hero, asi que la seccion que
     la repetia justo debajo se retira SOLO en escritorio (en telefono forma
     parte de la composicion de la portada movil y ahi sigue intacta). */
  .home-page main[data-page="index"] > .dashboard-showcase{
    display:none;
  }

  /* ----------------------------------------------------------------------
     CAPA 1 — CIELO
     Se estira un 12% por debajo del hero para que el parallax tenga margen
     y nunca descubra el borde inferior de la foto.
     ---------------------------------------------------------------------- */
  .hero-sky{
    position:absolute;
    inset:-2% -2% -12%;
    z-index:0;
    background-image:url("assets/hero-sky-clouds.png");
    background-image:image-set(
      url("assets/hero-sky-clouds.webp") type("image/webp"),
      url("assets/hero-sky-clouds.png") type("image/png")
    );
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    transform:translate3d(0,var(--par-y,0px),0);
    pointer-events:none;
  }

  /* Colchon calido en el borde inferior: si la pantalla es muy ancha y baja,
     el "cover" recorta la parte blanca de la foto y el cielo llegaria abajo
     todavia naranja. Este degradado garantiza que siempre acabe en blanco. */
  .hero-sky::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:38%;
    background:linear-gradient(to bottom,
      rgba(255,251,246,0),
      rgba(255,252,248,.55) 52%,
      rgba(255,253,251,.9) 82%,
      #fff 100%);
  }

  /* ----------------------------------------------------------------------
     TEXTO — misma tipografia y mismos textos, recentrados.
     ---------------------------------------------------------------------- */
  .home-page main[data-page="index"] > .hero > .hero-inner{
    position:relative;
    z-index:3;
    flex:0 0 auto;
    width:min(1180px,calc(100% - 96px));
    height:auto;
    margin-inline:auto;
    /* El hero arranca detras de la cabecera (margin-top:-92px), asi que el
       padding superior es el que reserva su franja. */
    padding:clamp(112px,13vh,160px) 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    margin-bottom:clamp(26px,3.4vh,48px);
  }

  .home-page main[data-page="index"] > .hero .update-pill{
    margin:0 0 22px;
    color:#2b3747;
    border-color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(41,86,120,.12),inset 0 1px 0 rgba(255,255,255,.95);
  }

  .home-page main[data-page="index"] > .hero .update-pill b{color:#4d5b6c}

  .home-page main[data-page="index"] > .hero .hero-title{
    max-width:min(15ch,92%);
    margin:0 0 20px;
    color:#132030;
    font-size:clamp(52px,4.6vw,74px);
    line-height:1.02;
    letter-spacing:-.05em;
    text-shadow:0 1px 26px rgba(255,255,255,.5);
  }

  .home-page main[data-page="index"] > .hero .hero-copy{
    max-width:min(70ch,760px);
    margin-inline:auto;
    color:#3f4d5e;
    font-size:17px;
    line-height:1.5;
  }

  .home-page main[data-page="index"] > .hero .hero-actions{
    margin-top:30px;
    justify-content:center;
  }

  .home-page main[data-page="index"] > .hero .hero-actions .button-dark{
    color:#132030;
    border-color:rgba(255,255,255,.7);
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 28px rgba(41,86,120,.14);
  }

  /* ----------------------------------------------------------------------
     CAPA 2 — DASHBOARD
     .hero-dashboard  → parallax (variable --par-y)
     .__rise          → entrada al cargar
     .__float         → flotacion permanente
     .__shot          → la captura, con su mascara inferior
     ---------------------------------------------------------------------- */
  .hero-dashboard{
    position:relative;
    z-index:2;
    /* margin-top:auto empuja la captura al borde inferior del hero cuando la
       pantalla es mas alta que la composicion; el aire minimo respecto al
       texto lo garantiza el margin-bottom de .hero-inner. */
    margin:auto auto clamp(30px,4vh,62px);
    /* Se ve "de lejos": la captura ocupa ~58% del ancho y deja cielo
       abierto a ambos lados en vez de acercarse a los bordes. */
    width:min(58vw,980px);
    transform:translate3d(0,var(--par-y,0px),0);
    pointer-events:none;
  }

  .hero-dashboard__rise,
  .hero-dashboard__float{display:block}

  .hero-dashboard__shot{
    position:relative;
    display:block;
  }

  /* Halo de apoyo. Va DETRAS de la captura y termina un 16% antes que ella,
     de forma que su sombra hacia abajo queda tapada por la propia imagen:
     solo se ve el halo lateral y superior. Asi la captura flota sin que
     aparezca una sombra dura justo donde empieza la niebla. */
  .hero-dashboard__glow{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:16%;
    border-radius:14px;
    box-shadow:
      0 34px 90px rgba(30,80,100,.13),
      0 12px 34px rgba(30,80,100,.08),
      0 -2px 28px rgba(30,80,100,.05);
  }

  .hero-dashboard__shot img{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    border-radius:14px;
    /* La captura NO se deforma nunca: el alto lo fija la relacion de aspecto
       declarada en el propio <img> (2034x1166). */
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.94) 85%,
      rgba(0,0,0,.5) 93%,
      transparent 100%);
    mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.94) 85%,
      rgba(0,0,0,.5) 93%,
      transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }

  /* ----------------------------------------------------------------------
     CAPA 3 — NIEBLA DE PRIMER PLANO
     Nubes recortadas de la misma fotografia (misma luz, mismo grano) con
     canal alfa irregular: no es un rectangulo blanco desenfocado.
     ---------------------------------------------------------------------- */
  /* El contenedor no tiene altura propia: es solo el ancla en el borde
     inferior del hero (y el que recibe el parallax). Cada banco de nube se
     coloca respecto a ese punto. */
  .hero-fog{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:0;
    z-index:5;
    transform:translate3d(0,var(--par-y,0px),0);
    pointer-events:none;
  }

  /* CLAVE: la capa conserva la proporcion exacta de la imagen (1672x381).
     Antes se recortaba con background-size:cover dentro de una banda muy
     ancha y baja, y ese recorte se comia la rampa de alfa: lo que quedaba
     a la vista era la parte de la nube que ya es opaca, o sea un borde
     recto. Con la proporcion respetada se ve la rampa entera y la nube
     entra en jirones, sin ninguna linea. */
  .hero-fog__layer{
    position:absolute;
    left:-4%;
    width:108%;
    aspect-ratio:1672 / 381;
    display:block;
    background-image:url("assets/hero-clouds-front.png");
    background-image:image-set(
      url("assets/hero-clouds-front.webp") type("image/webp"),
      url("assets/hero-clouds-front.png") type("image/png")
    );
    background-repeat:no-repeat;
    background-position:center bottom;
    /* Misma proporcion que la caja: no deforma y no recorta nada. */
    background-size:100% 100%;
    will-change:transform;
  }

  /* Banco lejano: asoma mas arriba, muy tenue y desenfocado. Es el que
     rompe cualquier lectura de borde. */
  .hero-fog__layer--back{
    bottom:54px;
    opacity:.46;
    filter:blur(5px);
    transform:scaleX(-1);
  }

  /* Banco cercano: opaco abajo, transparente arriba. Es el que se traga el
     borde inferior de la captura. */
  .hero-fog__layer--front{
    bottom:-4px;
    opacity:.98;
  }

  /* ----------------------------------------------------------------------
     DOBLADILLO — el ultimo tramo del hero se convierte en el blanco de la
     seccion siguiente.

     Vive FUERA de .hero-fog y no lleva transform. Cuando estaba dentro de la
     niebla heredaba su parallax: al hacer scroll bajaba hasta 150px, se
     salia del hero por abajo y dejaba la nube a medio fundir justo contra el
     blanco de .trust-story. De ahi la linea recta que aparecia solo al
     desplazarse, no al cargar.

     El degradado es largo y de arranque muy lento (dos tramos casi
     transparentes antes del 55%) para que no se lea como una banda puesta
     encima, sino como si el aire se fuera aclarando hasta ser el fondo.
     ---------------------------------------------------------------------- */
  .hero-hem{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:6;
    display:block;
    height:clamp(130px,15vh,215px);
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,254,252,.14) 32%,
      rgba(255,254,252,.36) 55%,
      rgba(255,255,255,.68) 75%,
      rgba(255,255,255,.92) 89%,
      #fff 100%);
    pointer-events:none;
  }

  /* ----------------------------------------------------------------------
     ANIMACIONES
     ---------------------------------------------------------------------- */

  /* Entrada: la captura sube desde dentro de las nubes. */
  @keyframes hero-dashboard-rise{
    from{
      opacity:0;
      transform:translate3d(0,180px,0) scale(.965);
      filter:blur(5px);
    }
    to{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:blur(0);
    }
  }

  .hero-dashboard__rise{
    animation:hero-dashboard-rise 1.6s cubic-bezier(.16,1,.3,1) .32s both;
  }

  /* will-change solo mientras la entrada esta en curso: lo retira el JS en
     cuanto termina, para no dejar una capa de composicion permanente sobre
     una imagen de 1350px de ancho. */
  .hero-dashboard.is-entering .hero-dashboard__rise{
    will-change:transform,opacity,filter;
  }

  /* Flotacion: 5px arriba y abajo. Arranca cuando la entrada ya termino. */
  @keyframes hero-dashboard-float{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-5px,0)}
  }

  .hero-dashboard__float{
    animation:hero-dashboard-float 8.5s ease-in-out 2.1s infinite;
  }

  /* Deriva ambiental de la niebla: 20px de recorrido en 17-23 s. */
  @keyframes hero-fog-drift{
    0%,100%{transform:translate3d(-10px,0,0)}
    50%{transform:translate3d(10px,0,0)}
  }

  .hero-fog__layer--front{
    animation:hero-fog-drift 17s ease-in-out infinite;
  }

  .hero-fog__layer--back{
    /* scaleX(-1) del volteo se conserva componiendolo dentro del keyframe
       propio: aqui basta con desplazar el contenedor, asi que la deriva se
       aplica al mismo elemento manteniendo el volteo en el keyframe. */
    animation:hero-fog-drift-back 23s ease-in-out -9s infinite;
  }

  @keyframes hero-fog-drift-back{
    0%,100%{transform:scaleX(-1) translate3d(-14px,0,0)}
    50%{transform:scaleX(-1) translate3d(14px,0,0)}
  }

  /* ----------------------------------------------------------------------
     PANTALLAS DE ESCRITORIO PEQUENAS (901-1200px)
     ---------------------------------------------------------------------- */
  @media (max-width:1200px){
    .home-page main[data-page="index"] > .hero > .hero-inner{
      width:min(100%,calc(100% - 56px));
      padding-top:clamp(112px,13vh,150px);
    }

    .home-page main[data-page="index"] > .hero .hero-title{
      font-size:clamp(44px,5vw,58px);
    }

    .home-page main[data-page="index"] > .hero .hero-copy{
      font-size:16px;
    }

    .hero-dashboard{width:min(70vw,760px)}
  }

  /* ----------------------------------------------------------------------
     ACCESIBILIDAD — sin entrada, sin flotacion, sin deriva, sin parallax.
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
    .hero-dashboard__rise,
    .hero-dashboard__float,
    .hero-fog__layer--front,
    .hero-fog__layer--back{
      animation:none!important;
    }

    .hero-dashboard__rise{opacity:1;transform:none;filter:none}
    .hero-fog__layer--back{transform:scaleX(-1)}

    .hero-sky,
    .hero-dashboard,
    .hero-fog{transform:none!important}
  }
}

/* Por debajo de 901px la escena no existe: nada que pintar, nada que cargar. */
@media (max-width:900px){
  .hero-sky,
  .hero-dashboard,
  .hero-fog,
  .hero-hem{display:none}
}