/* ========================================================================== 
   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) + 16px);
    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:71dvh;width:min(50vw,300px);max-height:28dvh}
  .services-visual__table{object-position:center bottom}



  /* Overlay de video responsive */


  .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:72dvh;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:5dvh}
  #contenido-contacto .button{margin-top:14px}
  #contenido-servicios{top:calc(var(--header-height) + 32px)}
  #contenido-servicios .eyebrow{margin-bottom:7px}
  #contenido-servicios .service-grid{margin-top:8px}
  #contenido-servicios .service-grid li{min-height:31px;padding:7px 9px}
  .services-object{top:74dvh;max-height:25dvh}
}

/* Landscape móvil: usa una composición más compacta y deja espacio real
   entre texto, selector y pieza. La mesa horizontal se elige desde JS. */
@media(max-width:860px) and (max-height:620px) and (orientation:landscape){
  #contenido-servicios{
    top:calc(var(--header-height) + 22px);
    right:46%;
  }
  #contenido-servicios h2{font-size:clamp(30px,6.6vw,46px)}
  #contenido-servicios .service-grid{max-width:430px}
  .services-object{
    left:73%;
    top:60dvh;
    width:min(30vw,230px);
    max-height:34dvh;
  }
  .services-visual__table{object-position:center center}


}

/* Tablet: los tres datos de contacto quedan en una sola fila equilibrada. */
@media(min-width:741px) and (max-width:991px){
  .site-footer__contact>.site-footer__item{width:33.333333%}
}
@media(min-width:576px) and (max-width:740px){
  .site-footer__contact>.site-footer__item:nth-child(1),
  .site-footer__contact>.site-footer__item:nth-child(2){width:50%}
  .site-footer__contact>.site-footer__item:nth-child(3){width:100%}
}

/* ---------- 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}
}

/* Pósters de cada breakpoint: el fallback del primer frame coincide con el
   encuadre elegido también antes de que se pueda decodificar el WebM. */
@media (max-width:480px) and (orientation:portrait){
  .stage-media{background-image:url('../assets/video/01-exterior-poster-mobile.webp')}
}
@media (min-width:481px) and (max-width:860px) and (orientation:portrait){
  .stage-media{background-image:url('../assets/video/01-exterior-poster-tablet.webp')}
}

/* v224: text, navigation and footer refinements tested against CSS breakpoints.
   The hero crop (67% / 69%) and requested vertical motion remain unchanged. */
@media(min-width:861px) and (max-width:1100px){
  .desktop-nav{gap:clamp(12px,1.5vw,19px);font-size:10px;letter-spacing:.09em}
  .desktop-nav .nav-cta{padding:12px 11px}
  #contenido-servicios{width:min(450px,34vw)}
}
@media(min-width:481px) and (max-width:860px) and (orientation:portrait){
  :root{--mobile-gutter:clamp(22px,4vw,32px)}
  #contenido-servicios{max-width:660px}
  .service-grid li{font-size:clamp(10px,1.3vw,12px)}
}
@media(max-width:360px) and (orientation:portrait){
  :root{--mobile-gutter:16px;--title-section:clamp(35px,11.3vw,46px)}
  .service-grid li{font-size:10px;letter-spacing:.1em}
  #contenido-servicios{top:calc(var(--header-height) + 40px)}
}
@media(max-width:860px) and (max-height:620px) and (orientation:portrait){
  /* Preserve the upward scroll effect while keeping its full travel clear of nav. */
  #contenido-servicios{top:calc(var(--header-height) + 38px)}
}
@media(max-width:860px) and (max-height:620px) and (orientation:landscape){
  #contenido-servicios{top:calc(var(--header-height) + 28px)}
  #contenido-servicios h2{font-size:clamp(27px,5.4vw,42px)}
  #contenido-servicios .service-grid li{min-height:30px;padding:6px 8px;font-size:9px}
}
@media(max-width:740px){
  .site-footer span,.site-footer a{font-size:10px}
  .site-footer__label{font-size:9px!important}
}

/* Keep the approved Impact typography on devices that have it. A narrower
   responsive scale prevents four-line titles when Impact isn't installed. */
@media(max-width:480px){
  .font-display-fallback #contenido-servicios h2{font-size:clamp(27px,8.2vw,39px);line-height:1.03}
  .font-display-fallback .scene-copy:not(#contenido-servicios) h2{font-size:clamp(32px,9vw,48px)}
  .font-display-fallback #contenido-inicio h1{font-size:clamp(42px,11vw,57px)}
}
@media(min-width:481px) and (max-width:860px){
  .font-display-fallback #contenido-servicios h2{font-size:clamp(38px,7vw,58px);line-height:1.02}
}