/* ═══════════════════════════════════
   MÁGICA ESCENA — MÓVIL
   Solo aplica en pantallas ≤ 767px
   styles.css NO se modifica
═══════════════════════════════════ */

@media(max-width:767px){

  /* ── VARIABLES ── */
  :root{
    --space:5vw;
    --nav-h:4rem;
    --fs-portada:clamp(1.6rem,8vw,10vw);
    --fs-principal:clamp(1.5rem,6.5vw,8vw);
    --fs-titulo:clamp(0.9rem,3.8vw,4.5vw);
    --fs-sub:clamp(0.76rem,2.8vw,3.2vw);
    --fs-body:clamp(0.7rem,2.5vw,2.8vw);
  }


  /* ── CURSOR OFF ── */
  .cursor{display:none!important}

  /* ── TRACK ── */
  .track{flex-direction:column!important}
  .section{flex:0 0 100dvh!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important}
  /* Secciones lista — fondo correcto */
  #s-servicios,#s-proyectos,#s-empresa{background:var(--sec-bg,#fff)!important}

  /* ── NAV ── */
  .nav-arrows{display:none!important}
  .nav-logo img{height:10vw!important}
  .nav-popup{min-width:75vw!important;left:50%!important;transform:translateX(-50%) scale(0.9) translateY(-10px)!important}
  .nav-bubble-wrap.open .nav-popup{transform:translateX(-50%) scale(1) translateY(0)!important}

  /* ══════════════════════════════
     HOME
     .home-content ya es position:absolute bottom:0 left:0 right:0 en desktop
     Solo ajustamos padding y anchos
  ══════════════════════════════ */
  .home-content{
    padding-left:var(--space)!important;
    padding-right:var(--space)!important;
    box-sizing:border-box!important;
  }
  /* Título — igual que escritorio pero cabe en la pantalla */
  .home-title{
    height:45dvh!important;
    overflow:visible!important;
    /* El JS ajusta el font-size automáticamente */
  }
  /* Línea y desc — ancho del contenedor sin padding */
  .home-line{
    width:100%!important;
  }
  .home-desc{
    width:100%!important;
    max-width:100%!important;
    font-size:var(--fs-sub)!important;
    word-break:break-word!important;
    white-space:normal!important;
    padding-bottom:3dvh!important;
  }

  /* ══════════════════════════════
     SECCIONES LISTA
     30vh = título+desc / 70vh = lista
     30 + 70 = 100dvh exacto
  ══════════════════════════════ */
  .list-section{
    flex-direction:column!important;
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    overflow:hidden!important;
    height:100dvh!important;
    max-height:100dvh!important;
  }

  /* Col izquierda — 30vh exacto */
  .list-col-left{
    width:100%!important;
    height:30dvh!important;
    min-height:30dvh!important;
    max-height:30dvh!important;
    flex-shrink:0!important;
    flex-grow:0!important;
    border-right:none!important;
    border-bottom:1px solid var(--left-line,rgba(0,0,0,0.1))!important;
    background:var(--left-bg,var(--sec-bg,#fff))!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    /* Padding: nav arriba, espacio abajo */
    padding-top:var(--nav-h)!important;
    padding-left:var(--space)!important;
    padding-right:var(--space)!important;
    padding-bottom:2vh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    gap:1vh!important;
    padding-top:calc(var(--nav-h) + 5dvh)!important;
  }
  .col-left-top{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  .col-left-bottom{
    display:block!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  .sec-title{
    font-size:var(--fs-principal)!important;
    line-height:1!important;
    margin:0 0 2vw 0!important;
    display:block!important;
  }
  .sec-desc{
    display:block!important;
    font-size:var(--fs-body)!important;
    opacity:0.7!important;
    margin:0!important;
    white-space:normal!important;
    overflow:visible!important;
    line-height:1.4!important;
    width:90vw!important;
    max-width:90vw!important;
  }
  /* Lista sm oculta en móvil */
  .num-list-sm{display:none!important}

  /* Col derecha — 70vh exacto */
  .list-col-right{
    width:100%!important;
    height:70dvh!important;
    min-height:70dvh!important;
    max-height:70dvh!important;
    flex-shrink:0!important;
    flex-grow:0!important;
    position:relative!important;
    background:var(--sec-bg,#fff)!important;
    overflow:hidden!important;
  }

  /* Lista numerada — llena los 70vh */
  .num-list{
    position:absolute!important;
    inset:0!important;
    padding:0 var(--space)!important;
    border-top:none!important;
    background:var(--sec-bg,#fff)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
  }
  .num-item{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:3vw!important;
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    overflow:hidden!important;
    border-bottom:1px solid var(--sec-line,rgba(0,0,0,0.1))!important;
    box-sizing:border-box!important;
  }
  .num-item:last-child{border-bottom:none!important}
  .num{font-size:clamp(1.1rem,5vw,6.5vw)!important;font-weight:700!important;flex-shrink:0!important;width:10vw!important}
  .num-name{font-size:clamp(0.88rem,3.2vw,3.8vw)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;flex:1!important}
  .num-sub,.num-desc,.num-arr{display:none!important}

  /* ── EXPANDIDO — fullscreen ── */
  .list-section.expanded .list-col-left{
    height:0!important;min-height:0!important;max-height:0!important;
    overflow:hidden!important;padding:0!important;border-bottom:none!important;
  }
  .list-section.expanded .list-col-right{
    height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
  }

  /* Panel — sube desde abajo */
  .list-col-panel{
    position:absolute!important;inset:0!important;
    transform:translateY(100%)!important;
    transition:transform var(--dur) var(--ease)!important;
    background:var(--sec-bg,#fff)!important;
  }
  .list-section.expanded .list-col-panel{transform:translateY(0)!important}

  /* Panel franjas */
  .panel-zone:nth-child(1){height:31%!important}
  .panel-zone--title{height:13%!important}
  .panel-zone--content{
    height:56%!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .panel-heading{font-size:calc(var(--fs-titulo) * 1.4)!important}
  .panel-body{
    padding:2vw var(--space) 1vw!important;
    font-size:var(--fs-body)!important;
    align-items:flex-start!important;
    flex:0 0 auto!important;
    line-height:1.4!important;
    overflow:hidden!important;
    max-height:35%!important;
  }
  .panel-ul{
    border-left:none!important;
    border-top:1px solid var(--sec-line,rgba(0,0,0,0.1))!important;
    padding:2vw var(--space)!important;
    flex:1!important;
    overflow-y:auto!important;
    justify-content:flex-start!important;
  }
  .panel-ul li{flex:0 0 auto!important;font-size:var(--fs-body)!important;padding:1.2vw 0!important;min-height:auto!important}

  /* ── PROYECTOS ── */
  .pry-info-float{left:var(--space)!important;right:var(--space)!important;bottom:var(--space)!important;max-width:none!important;max-height:45%!important;overflow-y:auto!important}
  .pry-title{font-size:var(--fs-titulo)!important}
  .pry-meta{gap:0.5rem!important;font-size:var(--fs-body)!important;flex-wrap:wrap!important}
  .pry-label{font-size:clamp(0.48rem,1.8vw,2vw)!important}
  .pry-desc{display:none!important}

  /* ── EQUIPO ── */
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(28vw,1fr))!important;gap:3vw!important}
  .emp-equipo-view{padding-top:calc(var(--nav-h) + 6vh)!important;box-sizing:border-box!important;padding-left:var(--space)!important;padding-right:var(--space)!important}

  /* ── CONTACTO ── */
  .contact-top{flex-direction:column!important;gap:2vh!important;align-items:flex-start!important}
  .contact-top-right{width:100%!important}
  .contact-bottom{grid-template-columns:1fr!important}
  .contact-action{border-right:none!important;border-bottom:1px solid var(--contacto-line,rgba(255,255,255,0.2))!important;padding-left:0!important;padding-right:0!important}
  .contact-action:last-child{border-bottom:none!important}
  .contact-main-title{font-size:var(--fs-principal)!important}

  /* ── BOTÓN CERRAR ── */
  #global-close-btn{top:1.5vh!important;right:var(--space)!important;width:2.4rem!important;height:2.4rem!important;font-size:1rem!important}

}

/* ── BLOQUEO LANDSCAPE EN MÓVIL — fuera del breakpoint ── */
@media(max-width:900px) and (orientation:landscape){
  #rotate-msg{display:flex!important;position:fixed!important;inset:0!important;background:#050505!important;z-index:999999!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3vh!important}
  .track,.site-nav,#global-close-btn{display:none!important;visibility:hidden!important}
}