/* =========================================================
   DROPHO SYSTEMS · V29 MOBILE
   Ajustes exclusivos para móvil/tablet. Desktop permanece intacto.
   ========================================================= */

@media (max-width: 780px){
  html{scroll-padding-top:64px}
  body{overflow-x:hidden!important;-webkit-text-size-adjust:100%}

  /* Evita que los section-shell anidados se hagan cada vez más angostos */
  .section-shell{width:calc(100% - 32px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .section-shell .section-shell{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}

  /* Header compacto y legible */
  .site-header{height:64px!important;padding:0 16px!important;background:rgba(7,11,13,.96)!important;border-bottom-color:rgba(255,255,255,.065)!important;box-shadow:0 8px 30px rgba(0,0,0,.28)!important}
  .brand-link{width:176px!important;max-width:58vw!important}
  .brand-logo{filter:drop-shadow(0 0 12px rgba(92,208,225,.035))}
  .menu-toggle{width:40px;height:40px;flex:0 0 40px}
  .mobile-menu{top:64px!important;height:calc(100dvh - 64px);padding:22px 18px 34px!important;background:rgba(6,10,12,.985)!important;overflow-y:auto;z-index:890!important}
  .mobile-menu a{padding:18px 4px!important;font-size:13px!important;letter-spacing:.115em!important}
  .milkyway-header-canvas{opacity:.32!important}

  /* Jerarquía editorial móvil */
  .eyebrow{font-size:8px!important;letter-spacing:.16em!important}
  .hero h1,.page-intro h1,.contact-main h1{font-size:clamp(40px,11.7vw,56px)!important;line-height:.98!important;letter-spacing:-.046em!important}
  .page-intro{padding:48px 0 38px!important}
  .page-intro>p:last-child,.page-intro-photo .intro-content>p:last-child{font-size:14px!important;line-height:1.65!important;margin-top:22px!important;max-width:none!important}
  .page-section{margin-top:62px!important}

  /* Hero home */
  .hero{padding:42px 0 20px!important;gap:30px!important;min-height:auto!important}
  .hero-lead{font-size:15px!important;line-height:1.62!important;margin-top:22px!important}
  .hero-actions{margin-top:26px!important;gap:12px!important}
  .hero-visual{height:310px!important;min-height:0!important;margin-top:2px!important}
  .visual-caption{left:14px!important;right:14px!important;bottom:14px!important}
  .visual-caption p{font-size:8px!important;line-height:1.45!important}

  /* Fotos editoriales de portada */
  .page-intro-photo{min-height:360px!important;padding:52px 0 42px!important}
  .page-intro-photo .intro-bg{width:145%!important;height:105%!important;right:-66%!important;top:-3%!important;opacity:.17!important}
  .page-intro-photo::after{background:linear-gradient(90deg,#070b0d 0%,rgba(7,11,13,.92) 54%,rgba(7,11,13,.48) 79%,#070b0d 100%)!important}

  /* Home: mensaje, accesos y diagnóstico */
  .home-principle{padding:56px 0 48px!important;gap:22px!important}
  .home-principle h2,.team-philosophy h2{font-size:clamp(34px,9.5vw,44px)!important;line-height:1.03!important}
  .home-principle>div:last-child p,.team-philosophy>p{font-size:14px!important;line-height:1.68!important}
  .home-links{margin-bottom:48px!important}
  .home-links-photo{gap:10px!important}
  .home-links-photo a{min-height:205px!important;padding:20px!important}
  .home-links h3{font-size:23px!important}
  .home-links p{font-size:12px!important;line-height:1.55!important}
  .diagnostic{padding:52px 0!important}
  .diagnostic-head{gap:18px!important}
  .diagnostic-head h2{font-size:clamp(32px,9vw,42px)!important}
  .diagnostic-head>p:last-child{font-size:13px!important;line-height:1.65!important}
  .diagnostic-grid{margin-top:28px!important;gap:10px!important}
  .diagnostic-grid select{min-height:48px!important;font-size:12px!important}
  .diagnostic-output{padding:20px!important;min-height:0!important;align-items:flex-start!important;flex-direction:column!important;gap:14px!important}

  /* Método y escenarios: menos altura y menos “tarjeta gigante” */
  .method-step-fade,.scenario-fade-row{min-height:285px!important;padding:28px 16px 30px!important}
  .method-step-fade>img,.scenario-fade-row>img{right:-10%!important;top:0!important;width:120%!important;height:76%!important;opacity:.36!important}
  .method-step-fade::after,.scenario-fade-row::after{background:linear-gradient(180deg,rgba(7,11,13,.10),rgba(7,11,13,.52) 40%,#070b0d 72%)!important}
  .method-step-copy h3,.scenario-fade-copy h3{font-size:27px!important;line-height:1.05!important}
  .method-step-copy p,.scenario-fade-copy p{font-size:13px!important;line-height:1.6!important}
  .mini-flow{gap:6px!important;flex-wrap:wrap!important}
  .mini-flow b{font-size:7px!important}

  /* Bloques de consultoría */
  .expertise{min-height:0!important}
  .expertise-media{width:100%!important;right:0!important;top:0!important;height:270px!important;min-height:0!important;position:absolute!important}
  .expertise-media img{opacity:.44!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 58%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 58%,transparent 100%)!important}
  .expertise-copy{width:100%!important;padding:250px 16px 34px!important}
  .expertise-copy h2{font-size:clamp(32px,9vw,42px)!important}
  .expertise-copy>p:not(.eyebrow){font-size:14px!important;line-height:1.65!important;margin-top:18px!important}
  .context-fade-band{min-height:410px!important;padding:230px 16px 34px!important}
  .context-fade-band>img{right:-10%!important;width:120%!important;height:61%!important}
  .context-fade-copy h2{font-size:clamp(31px,8.8vw,42px)!important}
  .tools-photo-band{min-height:430px!important;padding:230px 0 34px!important}
  .tools-photo-band>img{right:-16%!important;width:132%!important;height:64%!important}
  .tools-photo-copy h2{font-size:clamp(31px,8.8vw,42px)!important}

  /* Soluciones */
  .explore-examples-band{margin-top:54px!important}
  .explore-examples-link{padding:26px 0!important;gap:20px!important}
  .explore-examples-copy h2{font-size:clamp(31px,8.7vw,42px)!important}
  .explore-examples-copy>p:last-child{font-size:12px!important;line-height:1.6!important}
  .explore-examples-action{padding:12px 14px!important;font-size:8px!important}
  .platforms{gap:26px!important}
  .platform-copy h2{font-size:clamp(34px,9.5vw,46px)!important;line-height:1.02!important}
  .platform-copy>p:not(.eyebrow){font-size:14px!important;line-height:1.65!important}
  .device-stage{min-height:250px!important;transform:scale(.66)!important;margin:-22px -70px -36px!important}

  /* Hub ejemplos */
  .examples-hub-grid{margin-top:38px!important;gap:10px!important}
  .examples-hub-card{min-height:205px!important;padding:20px!important}
  .examples-hub-card>span{left:18px!important;top:17px!important;font-size:8px!important}
  .examples-hub-card h2{font-size:29px!important;line-height:1.03!important}
  .examples-hub-card p{font-size:12px!important;line-height:1.55!important;margin-top:9px!important}
  .examples-hub-card b{margin-top:18px!important;font-size:8px!important}

  /* Galería sistemas empresariales */
  .solution-gallery-intro{padding-bottom:28px!important}
  .solution-category-tabs{display:flex!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:4px!important;scrollbar-width:none!important}
  .solution-category-tabs::-webkit-scrollbar{display:none}
  .solution-category-tabs a{flex:0 0 auto!important;font-size:8px!important;padding:9px 11px!important}
  .gallery-heading{margin:38px 0 22px!important;gap:13px!important}
  .gallery-heading h2{font-size:clamp(32px,9vw,42px)!important}
  .gallery-heading p{font-size:12px!important;line-height:1.6!important}
  .solution-gallery-grid{grid-template-columns:1fr!important;gap:9px!important}
  .solution-gallery-card{min-height:168px!important;padding:18px!important}
  .solution-gallery-card h3{font-size:27px!important;margin-top:26px!important}
  .gallery-card-footer{margin-top:20px!important;align-items:flex-end!important}
  .gallery-card-footer p{font-size:11px!important;line-height:1.48!important;max-width:72%!important}
  .gallery-card-open{font-size:8px!important}
  .gallery-back{margin-top:26px!important}

  /* Profesionales */
  .team-editorial-head{gap:12px!important}
  .team-editorial-head h2{font-size:32px!important}
  .team-editorial-head>div:first-child>p:last-child{font-size:13px!important;line-height:1.62!important}
  .team-gallery-wrap{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important}
  .team-card.team-card-editorial{flex-basis:176px!important;height:268px!important}
  .team-card.team-card-editorial:nth-child(n){margin-top:0!important}
  .team-card.team-card-editorial:nth-child(even){margin-top:8px!important}
  .team-card.team-card-editorial .team-info{left:13px!important;right:13px!important;bottom:13px!important}
  .team-card.team-card-editorial .team-info h3{font-size:15px!important}
  .team-card.team-card-editorial .team-info p{font-size:9px!important}
  .team-card.team-card-editorial .team-info span{font-size:7px!important}
  .team-profile-note{font-size:11px!important;line-height:1.6!important}
  .team-philosophy{padding:46px 0!important}

  /* Contacto */
  .systems-contact-strip{min-height:220px!important;padding:30px 0!important;margin-bottom:48px!important;gap:20px!important}
  .systems-contact-strip h2{font-size:32px!important;line-height:1.04!important}
  .contact-photo-band{min-height:235px!important;padding:30px 0!important;align-items:flex-end!important}
  .contact-strip-bg{opacity:.26!important}
  .contact-page{padding:46px 0!important}
  .contact-page-integrated{margin-top:70px!important;margin-bottom:52px!important;padding:40px 16px!important}
  .contact-main>p:last-child{font-size:14px!important;line-height:1.65!important;margin-top:20px!important}
  .contact-actions-large a{padding:18px 0!important}
  .contact-actions-large span{font-size:14px!important}
  .site-footer{padding:22px 0!important;font-size:8px!important;gap:9px!important}
  .whatsapp-float{right:12px!important;bottom:12px!important}
  .whatsapp-button{min-height:44px!important}

  /* Demo aplicaciones: no rompe el ancho de la página. El escenario se desliza internamente. */
  .syncdemo-shell.section-shell{width:100%!important;margin-left:0!important;margin-right:0!important;padding-top:58px!important}
  .syncdemo-heading{grid-template-columns:1fr!important;gap:18px!important;margin-bottom:28px!important}
  .syncdemo-heading h2{font-size:clamp(34px,9.5vw,46px)!important}
  .syncdemo-heading-copy>p{font-size:13px!important;line-height:1.62!important}
  .syncdemo-instructions{grid-template-columns:1fr!important}
  .syncdemo-instructions>div{display:none!important}
  .syncdemo-instructions>div:first-child{display:flex!important}
  .syncdemo-instructions button{min-height:52px!important;border-left:0!important;border-top:1px solid rgba(145,220,229,.14)!important}
  .syncdemo-stage{width:100%!important;margin:0!important;padding:24px 10px!important;min-height:500px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  .syncdemo-devices-row{width:max-content!important;min-width:0!important;min-height:450px!important;justify-content:flex-start!important;gap:8px!important}
  .syncdemo-phone-column{flex:0 0 184px!important;width:184px!important;min-width:184px!important}
  .syncdemo-phone{width:178px!important;height:418px!important}
  .syncdemo-bridge{flex:0 0 38px!important;width:38px!important;min-width:38px!important}
  .syncdemo-tablet-column{flex:0 0 342px!important;width:342px!important;min-width:342px!important}
  .syncdemo-tablet{width:342px!important;height:405px!important}
  .syncdemo-bottom{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .syncdemo-legend{gap:10px!important}
  .syncdemo-demo-actions{width:100%!important}
  .syncdemo-demo-actions button{flex:1!important}
  .syncdemo-value-grid{gap:32px!important}
  .syncdemo-value-copy h2{font-size:36px!important}
  .syncdemo-value-items article{grid-template-columns:28px 1fr!important;padding:16px 0!important}
  .syncdemo-value-items p{grid-column:2!important;font-size:11px!important}
}

@media (max-width: 420px){
  .section-shell{width:calc(100% - 26px)!important}
  .brand-link{width:164px!important}
  .hero h1,.page-intro h1,.contact-main h1{font-size:clamp(38px,11.8vw,50px)!important}
  .hero-visual{height:280px!important}
  .page-intro-photo{min-height:335px!important}
  .method-step-fade,.scenario-fade-row{min-height:270px!important}
  .team-card.team-card-editorial{flex-basis:166px!important;height:252px!important}
  .solution-gallery-card{min-height:158px!important}
  .gallery-card-footer p{max-width:68%!important}
}

/* =========================================================
   V30 — WhatsApp compacto y sin bloquear NEXO OPS
========================================================= */
/* Botón flotante: sólo el icono, área real 42x42. */
.whatsapp-float{
  right:12px!important;
  bottom:12px!important;
}
.whatsapp-button{
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  gap:0!important;
  border-radius:50%!important;
}
.whatsapp-button svg{
  width:18px!important;
  height:18px!important;
}
.whatsapp-button span{display:none!important}

/* En Aplicaciones, la demo queda por encima del botón flotante cuando ambos
   ocupan la misma zona de pantalla. Así WhatsApp nunca intercepta un control. */
body.applications-page .whatsapp-float{z-index:70!important}
body.applications-page .syncdemo-stage,
body.applications-page .syncdemo-devices-row,
body.applications-page .syncdemo-device,
body.applications-page .syncdemo-screen{position:relative;z-index:120}
body.applications-page .syncdemo-screen{z-index:140}

@media(max-width:780px){
  .whatsapp-float{right:8px!important;bottom:8px!important}
  .whatsapp-button{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }
  .whatsapp-button svg{width:17px!important;height:17px!important}
}