/* ========================================================================== 
   TITAYO — RESPONSIVE
   --------------------------------------------------------------------------
   Un único lugar para comportamiento tablet/mobile.
   Todas las escenas de texto, excepto Servicios, comparten el mismo anclaje
   inferior y margen lateral.
   ========================================================================== */

/* ---------- Desktop de poca altura ---------- */
@media (min-width:861px) and (max-height:820px){
  :root{
    --title-section:clamp(44px,min(6.6vw,9.8vh),86px);
    --title-hero:clamp(58px,min(8.8vw,12vh),118px);
    --body-size:clamp(13px,1.05vw,16px);
  }
  .scene-copy{max-width:720px}
  .service-grid{margin-top:18px}
  .service-grid li{min-height:40px;padding:11px 14px}
  .button{margin-top:22px;padding:14px 16px 13px}
}

/* ---------- Tablet / desktop angosto ---------- */
@media(max-width:1024px) and (min-width:861px){
  :root{
    --page-pad:clamp(22px,4vw,42px);
    --title-section:clamp(46px,min(7.7vw,10vh),82px);
    --title-hero:clamp(60px,min(10.5vw,13vh),116px);
  }
  .desktop-nav{gap:22px}
}

/* ========================================================================== 
   MOBILE / TABLET VERTICAL <= 860px
   ========================================================================== */
@media(max-width:860px){
  :root{
    --page-pad:22px;
    --mobile-gutter:22px;
    --mobile-copy-max:560px;
    --mobile-copy-bottom:max(10vh,66px);
    --header-height:72px;
    --title-section:clamp(42px,min(12vw,8.8vh),68px);
    --title-hero:clamp(54px,min(15vw,11vh),88px);
    --body-size:clamp(14px,4vw,17px);
  }

  /* Encuadre del portón: mantiene el logo aproximadamente centrado. */
  .stage-video--hero{object-position:67% center}

  /* Navegación */
  .desktop-nav{display:none}
  .menu-button{display:block}
  .journey{display:none}
  .site-header{height:72px;padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
  .brand img{height:50px;width:auto}
  .site-header.is-compact .brand img{height:46px}
  .mobile-nav{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}

  /* Longitud de las escenas en scroll */
  .scroll-section,.scroll-section--hero,.scroll-section--final{height:125vh}
  .scroll-section--services{height:320vh}

  /* -----------------------------------------------------------------------
     POSICIÓN UNIFICADA DE TEXTOS EN RESPONSIVE
     -----------------------------------------------------------------------
     Todas las escenas, excepto Servicios, comparten exactamente:
     - mismo margen lateral
     - mismo ancho útil
     - misma distancia al borde inferior
     - alineación al inicio

     Para mover TODAS juntas más arriba/abajo, cambia --mobile-copy-bottom.
     Para cambiar TODOS los márgenes, cambia --mobile-gutter.
     ----------------------------------------------------------------------- */
  #contenido-inicio,
  #contenido-entrada,
  #contenido-mecanica,
  #contenido-motor,
  #contenido-diagnostico,
  #contenido-contacto{
    left:var(--mobile-gutter);
    right:var(--mobile-gutter);
    top:auto;
    bottom:var(--mobile-copy-bottom);
    width:auto;
    max-width:none;
    transform:none;
    text-align:start;
    box-sizing:border-box;
  }

  /* Servicios en responsive: texto ARRIBA y animaciones ABAJO.
     Conserva los mismos márgenes laterales del resto de secciones, pero se
     ancla debajo del header para dejar la parte inferior libre a la pieza. */
  #contenido-servicios{
    left:var(--mobile-gutter);
    right:var(--mobile-gutter);
    top:calc(var(--header-height) + var(--mobile-gutter));
    bottom:auto;
    width:auto;
    max-width:none;
    transform:none;
    text-align:start;
    box-sizing:border-box;
  }

  /* Ningún párrafo de las escenas unificadas se centra automáticamente. */
  #contenido-inicio>p:not(.eyebrow),
  #contenido-entrada>p:not(.eyebrow),
  #contenido-mecanica>p:not(.eyebrow),
  #contenido-motor>p:not(.eyebrow),
  #contenido-diagnostico>p:not(.eyebrow),
  #contenido-contacto>p:not(.eyebrow){
    margin-left:0;
    margin-right:0;
  }

  /* Ritmo tipográfico común */
  .scene-copy .eyebrow{margin-bottom:14px}
  .scene-copy h1,.scene-copy h2{max-width:100%}
  .scene-copy>p:not(.eyebrow),.scene-copy .lead{margin-top:18px;max-width:100%}
  .scene-copy--center>p:not(.eyebrow){margin-left:0;margin-right:0}
  .scene-copy .button{margin-top:24px}

  /* Servicios */
  .service-grid{width:100%;max-width:var(--mobile-copy-max);margin-top:16px}
  .service-grid li{min-height:44px;padding:12px;font-size:9px;letter-spacing:.13em}
  .services-object{left:50%;top:69dvh;width:min(50vw,300px);max-height:28dvh}
  .services-visual__table{object-position:center bottom}
  .services-visual__shade{background:linear-gradient(to bottom,rgba(0,0,0,.08) 0 22%,rgba(0,0,0,.02) 38%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.56) 100%)}

  /* Overlay de video responsive */
  .stage-video-shade{background:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,.02) 42%,rgba(0,0,0,.30)),linear-gradient(to right,rgba(0,0,0,.14),transparent 62%)}
  .scroll-cue{display:none}

  /* Footer */
  .site-footer{padding:22px var(--mobile-gutter) 18px}
  .site-footer__brand{gap:12px}
  .site-footer__brand>img{width:72px}
  .site-footer__identity{gap:3px}
  .site-footer__meta{align-items:flex-start;text-align:left;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);gap:4px}
  .site-footer__meta span{max-width:none}
}

/* ---------- Teléfonos <= 480px ---------- */
@media(max-width:480px){
  :root{
    --page-pad:18px;
    --mobile-gutter:18px;
    --title-section:clamp(38px,min(12.5vw,8.3vh),58px);
    --title-hero:clamp(48px,min(15vw,10.5vh),72px);
    --body-size:14px;
  }

  .stage-video--hero{object-position:69% center}
  .brand img{height:46px}
  .mobile-nav{font-size:19px}
  .eyebrow{font-size:10px;letter-spacing:.20em}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .service-grid li{min-height:42px;padding:10px;font-size:8.5px}
  .button{gap:20px;width:100%;justify-content:space-between}
  .button__whatsapp-icon{width:22px;height:22px;flex-basis:22px}

  .services-object{top:70dvh;width:min(54vw,260px);max-height:27dvh}

  .scene-copy .eyebrow{margin-bottom:12px}
  .scene-copy>p:not(.eyebrow),.scene-copy .lead{margin-top:16px}
  .scene-copy .button{margin-top:20px}

  .site-footer{padding:18px var(--mobile-gutter) 16px}
  .site-footer__brand>img{width:64px}
  .loader__content{width:132px;gap:16px}
  .loader__mark{width:88px}
  .loader__track{width:112px}
}

/* ---------- Pantallas de poca altura ---------- */
@media(max-height:620px){
  :root{
    --title-section:clamp(34px,min(6.5vw,11vh),58px);
    --title-hero:clamp(44px,min(8.5vw,13vh),76px);
    --body-size:13px;
  }
  .lead,.scene-copy>p:not(.eyebrow){margin-top:14px;line-height:1.45}
  .service-grid{margin-top:12px}
  .service-grid li{min-height:34px;padding:8px 10px}
  .button{margin-top:16px;padding:12px 14px 11px}
  .eyebrow{margin-bottom:9px}
}

@media(max-width:860px) and (max-height:620px){
  :root{--mobile-copy-bottom:5vh}
  #contenido-contacto .button{margin-top:14px}
  #contenido-servicios{top:calc(var(--header-height) + 14px)}
  .services-object{top:67dvh;max-height:26dvh}
}

/* ---------- Accesibilidad: reducir movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-cue{display:none}
  .stage-media.has-blur,.services-visual.has-blur{filter:none;will-change:auto}
  .loader,.site-header,.brand img{transition:none!important}
  .services-object{transform:translate3d(-50%,-50%,0) scale(1)}
  .service-grid li{transition:none}
}