:root{
  --lila:#8a99ba;
  --crema:#faecea;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--lila);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lila);color:var(--crema);
  font-family:"Myriad Pro","Segoe UI","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,p{margin:0;font-weight:inherit;font-size:inherit}
a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid #fff;outline-offset:6px}

/* Barra superior */
.top{background:#fff;height:clamp(52px,3.84vw,80px);display:flex;align-items:center;
  padding-inline:clamp(16px,2.1vw,48px)}
.top a{display:block;width:clamp(28px,1.75vw,40px)}

/* Secciones con imagen */
.sec{position:relative;overflow:hidden;max-width:2576px;margin-inline:auto;background:var(--lila)}
.s1{aspect-ratio:2576/978}
.s2,.s3,.s4{aspect-ratio:2576/472}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sec>:not(.bg){position:absolute}

/* Posiciones sobre la guía del cliente (en % de cada sección) */
.tagline{left:1.6%;top:5.8%;width:max(23.7%,230px)}
.logo{left:39.55%;top:38.3%;width:22.1%}
.ig{left:78.1%;top:47.6%;width:max(15.1%,170px);display:block;transition:opacity .25s}
.ig:hover{opacity:.8}
.soon{left:50%;bottom:6.4%;transform:translateX(-50%);width:max(32.8%,260px)}
.s2 .phrase{left:1.5%;top:7.5%;width:max(7.8%,110px)}
.s3 .phrase{left:1.5%;top:11.5%;width:max(17.2%,200px)}
.s4 .phrase{left:1.4%;top:8.5%;width:max(16.4%,190px)}

/* Pie: solo color de fondo + frase */
.foot{max-width:2576px;margin-inline:auto;min-height:12.4vw;display:flex;
  justify-content:flex-end;align-items:flex-end;padding:0 1.95% 1.1% 0}
.foot-in{width:38%}
.foot .b{display:none}

/* Animación al hacer scroll (secciones 2 en adelante) */
.js .reveal .bg{opacity:0;transform:scale(1.04);
  transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.js .reveal .phrase{opacity:0;transform:translateX(-16px);
  transition:opacity .9s .45s var(--ease),transform .9s .45s var(--ease)}
.js .foot.reveal .foot-in{opacity:0;transition:opacity 1s var(--ease)}
.js .reveal.in .bg,.js .reveal.in .phrase{opacity:1;transform:none}
.js .foot.reveal.in .foot-in{opacity:1}

/* Móvil y tablet vertical */
@media (max-width: 899px) {
  /* Sección 1: ajuste de altura y encuadre del fondo para despejar la silla */
  .s1 {
    aspect-ratio: auto;
    min-height: clamp(560px, calc(100svh - 56px), 740px);
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    justify-items: center;
    align-items: center;
    gap: 16px;
    padding: 24px 16px 28px;
  }

  /* Desplazamos la posición de la imagen para que la silla no se solape con los textos */
  .s1 .bg {
    object-position: 17% 0%;
  }

  .sec.s1 > :not(.bg) {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  /* Proporciones de texto ajustadas y más sobrias en móvil */
  .tagline {
    width: min(72vw, 260px);
  }

  .logo {
    width: min(52vw, 210px);
    align-self: center;
    margin-block: 8px;
  }

  .ig {
    width: min(48vw, 170px);
  }

  .soon {
    width: min(76vw, 280px);
  }

  /* Secciones secundarias */
  .s2, .s3, .s4 {
    aspect-ratio: auto;
    min-height: clamp(230px, 60vw, 340px);
  }

  .s2 .bg { object-position: 92% 50%; }
  .s3 .bg { object-position: 28% 50%; }
  .s4 .bg { object-position: 38% 50%; }

  .s2 .phrase, .s3 .phrase, .s4 .phrase {
    left: 20px;
    top: 22px;
  }

  .s2 .phrase { width: min(36vw, 164px); }
  .s3 .phrase { width: min(66vw, 360px); }
  .s4 .phrase { width: min(62vw, 340px); }

  /* Pie de página */
  .foot {
    --F: min(118vw, 620px);
    --G: min(150vw, 760px);
    min-height: 0;
    justify-content: center;
    padding: 44px 20px calc(36px + env(safe-area-inset-bottom));
  }

  .foot-in {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .foot .a {
    display: block;
    width: calc(var(--F) * .72);
    overflow: hidden;
  }

  .foot .a img {
    width: var(--F);
    max-width: none;
  }

  .foot .b {
    display: block;
    width: calc(var(--G) * .28);
    overflow: hidden;
  }

  .foot .b img {
    width: var(--G);
    max-width: none;
    margin-left: calc(var(--G) * -.72);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal .bg,.js .reveal .phrase,.js .foot.reveal .foot-in{opacity:1;transform:none;transition:none}
}