/* =========================================================
   SERVICIOS INTEGRALES ASESCOM — EDICIÓN FINAL
   Dirección: corporativa, comercial, elegante y premium
   Prioridad: adaptabilidad real en navegador, tablet y celular
   ========================================================= */

html,body{max-width:100%;overflow-x:clip}
.hero-grid>*{min-width:0}
.hero-copy{max-width:760px}
.hero-wordmark-only strong{max-width:12ch;text-wrap:balance}
.hero-showcase{min-width:0}

/* Escritorio: composición premium con mayor orden visual */
@media(min-width:981px){
  .hero{min-height:100svh;padding-block:92px 104px}
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);gap:clamp(24px,3vw,48px)}
  .hero-copy{padding-right:0}
  .hero-wordmark-only{max-width:650px;margin-bottom:24px}
  .hero-wordmark-only strong{font-size:clamp(42px,4.5vw,66px)}
  .hero-showcase{min-height:690px}
  .hero-photo-main{width:67%;height:398px}
  .hero-photo-maintenance{width:41%;height:230px}
  .hero-photo-care{width:41%;height:168px}
  .hero-photo-detail{width:30%;height:156px}
  .hero-showcase .hero-proof{width:min(390px,74%)}
}

/* Tablet: ya no se fuerza el collage a competir con el texto */
@media(min-width:721px) and (max-width:980px){
  .hero{min-height:auto;padding:82px 0 118px}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:40px}
  .hero-copy{max-width:820px;margin-inline:auto;text-align:left}
  .hero-wordmark-only strong{max-width:14ch;font-size:clamp(40px,7vw,58px)}
  .hero h1{max-width:12ch;font-size:clamp(54px,8vw,78px)}
  .hero-lead,.hero-support{max-width:720px}
  .hero-showcase{width:min(760px,100%);min-height:680px;margin:0 auto}
}

/* =========================================================
   MÓVIL: portada reconstruida sin posiciones superpuestas
   ========================================================= */
@media(max-width:720px){
  :root{--mobile-gutter:18px}
  body{padding-bottom:82px}
  .container{width:min(calc(100% - (var(--mobile-gutter) * 2)),var(--max))}

  .hero{
    min-height:auto;
    padding:42px 0 64px;
    overflow:clip;
  }
  .hero-bg img{object-position:66% center;transform:scale(1.02)}
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(3,18,13,.94) 0%,rgba(3,18,13,.90) 46%,rgba(3,18,13,.82) 100%),
      radial-gradient(circle at 82% 33%,rgba(181,220,43,.10),transparent 35%);
  }
  .orbit-one{width:340px;height:340px;right:-220px;top:-100px}
  .orbit-two{width:260px;height:260px;right:-110px;bottom:15%}

  .hero-grid{display:block!important}
  .hero-copy{
    width:100%;
    max-width:none;
    padding:0;
    text-align:left;
  }
  .hero-wordmark-only{
    width:100%;
    max-width:none;
    gap:7px;
    margin:0 0 22px;
  }
  .hero-wordmark-only small{
    max-width:100%;
    font-size:clamp(9px,2.8vw,11px);
    line-height:1.45;
    letter-spacing:.16em;
  }
  .hero-wordmark-only strong{
    max-width:none!important;
    font-size:clamp(34px,10.7vw,50px)!important;
    line-height:.94;
    letter-spacing:-.025em;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
  }
  .hero-wordmark-only em{
    font-size:clamp(8px,2.35vw,10px);
    line-height:1.5;
    letter-spacing:.08em;
  }
  .hero-eyebrow{
    max-width:24ch;
    margin-bottom:16px;
    font-size:9px;
    line-height:1.45;
    letter-spacing:.1em;
  }
  .hero-eyebrow::before{flex:0 0 20px;width:20px}
  .hero h1{
    max-width:none!important;
    font-size:clamp(43px,13vw,64px)!important;
    line-height:.96;
    letter-spacing:-.05em;
    text-wrap:balance;
  }
  .hero-lead{
    max-width:31ch;
    margin-top:20px;
    font-size:clamp(18px,5vw,22px);
    line-height:1.36;
  }
  .hero-support{
    max-width:40ch;
    margin-top:15px;
    font-size:14px;
    line-height:1.62;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:26px;
  }
  .hero-actions .btn{width:100%;min-height:54px;padding-inline:18px}

  /* Collage móvil en flujo normal: nada puede encimarse */
  .hero-showcase{
    position:relative;
    width:100%;
    min-height:0!important;
    margin:36px 0 0!important;
    perspective:none;
  }
  .showcase-halo{display:none}
  .showcase-scene{
    --row:clamp(122px,35vw,174px);
    position:relative!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    grid-template-rows:var(--row) var(--row) clamp(104px,28vw,138px) auto;
    grid-template-areas:
      "logo main"
      "maintenance main"
      "care detail"
      "proof proof";
    gap:11px;
    transform:none!important;
    transform-style:flat;
  }
  .hero-photo{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-width:0;
    min-height:0;
    border-radius:22px!important;
    transform:none!important;
    animation:none!important;
    box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14);
  }
  .hero-photo-main{grid-area:main}
  .hero-photo-maintenance{grid-area:maintenance}
  .hero-photo-care{grid-area:care}
  .hero-photo-detail{grid-area:detail}
  .hero-photo-main img{object-position:61% center}
  .hero-photo-detail img{object-position:center 16%}
  .hero-photo figcaption{left:11px;right:11px;bottom:10px}
  .hero-photo figcaption span{font-size:6.5px;letter-spacing:.1em}
  .hero-photo figcaption strong{margin-top:3px;font-size:10px}

  .hero-logo-orb{
    grid-area:logo;
    position:relative!important;
    inset:auto!important;
    align-self:center;
    justify-self:center;
    width:min(100%,146px)!important;
    height:auto!important;
    aspect-ratio:1;
    border-radius:50%;
    transform:none!important;
    animation:mobileLogoFloat 5s ease-in-out infinite!important;
  }
  .hero-logo-orb img{width:68%!important;height:74%!important}
  .hero-logo-orb small{display:none}
  .logo-orb-ring{inset:-7px}

  .hero-showcase .hero-proof{
    grid-area:proof;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px;
    border-radius:24px;
    transform:none!important;
    animation:none!important;
  }
  .hero-showcase .proof-top{font-size:8.5px;line-height:1.35}
  .hero-showcase .proof-stat{margin-top:17px}
  .hero-showcase .proof-stat strong{font-size:50px}
  .hero-showcase .proof-stat span{font-size:9.5px}
  .hero-showcase .proof-row{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .hero-showcase .proof-row div{padding:12px;border-radius:15px}
  .hero-showcase .proof-row strong{font-size:19px}
  .hero-showcase .proof-row span{font-size:9px}
  .hero-showcase .proof-bottom{gap:7px;flex-wrap:wrap;margin-top:14px;font-size:8.5px}
  .hero-bottom{display:none}

  /* Navegación y acciones rápidas */
  .site-header{top:8px;width:calc(100% - 16px);border-radius:22px}
  .nav-shell{height:62px;gap:10px;padding:0 9px 0 14px}
  .brand-wordmark{min-width:0}
  .brand-wordmark span{font-size:8px;line-height:1.2}
  .brand-wordmark strong{font-size:13px;line-height:1.2}
  .mobile-panel{max-height:calc(100svh - 86px);overflow:auto;padding-bottom:12px}

  .floating-actions{
    right:50%!important;
    bottom:10px!important;
    display:flex!important;
    gap:6px;
    padding:6px;
    border-radius:22px;
    transform:translateX(50%);
  }
  .floating-actions .float-action{width:45px;height:45px;border-radius:15px}
  .floating-actions .top-action:not(.show){display:none}

  /* Secciones internas: medidas reales para celular */
  section{scroll-margin-top:78px}
  .services-section{padding-top:64px}
  .work-section,.plus-section,.about-section,.contact-section{padding-top:58px}
  .section-head{margin-bottom:24px}
  .section-head h2,h2{font-size:clamp(32px,9.3vw,44px);line-height:1.06}
  .section-head p{font-size:14px;line-height:1.62}

  .service-grid,.work-grid,.plus-grid,.about-main-grid,.about-info-grid,.commitment-grid,.contact-grid,.footer-grid{grid-template-columns:1fr!important}
  .service-card,.service-card:last-child{
    grid-column:auto!important;
    min-height:460px!important;
    border-radius:26px;
    transform:none!important;
  }
  .service-card-feature{transform:none!important}
  .service-card h3{font-size:30px}
  .service-card p{font-size:13px;line-height:1.55}
  .service-content{left:20px;right:20px;bottom:20px}
  .service-top{left:18px;right:18px;top:18px}
  .service-top span{width:43px;height:43px;border-radius:14px}
  .service-top em{padding:7px 9px;font-size:7.5px}

  .work-card,.work-card.work-wide{grid-column:auto!important;min-height:260px;border-radius:24px}
  .work-card img{min-height:260px}
  .work-card figcaption{left:18px;right:18px;bottom:17px}
  .work-card figcaption b{font-size:18px}
  .work-card figcaption span{font-size:12px}

  .plus-card{min-height:0;padding:23px;border-radius:25px}
  .plus-card h3{font-size:23px}
  .plus-card p{font-size:14px}
  .plus-icon{margin-bottom:18px}

  .about-intro,.about-info-card,.policy-card,.commitment-card{padding:22px;border-radius:25px}
  .about-photo{min-height:300px;border-radius:25px}
  .about-list li{padding:14px 14px 14px 40px;font-size:14px}
  .about-info-card p,.commitment-card li,.policy-card p{font-size:14px}

  .contact-copy>p{font-size:16px}
  .contact-form{padding:18px;border-radius:25px}
  .contact-form input,.contact-form select,.contact-form textarea{padding:14px;border-radius:15px}

  .footer{padding-bottom:106px}
  .footer-grid{gap:26px}
  .footer-bottom{display:block}
  .footer-bottom span+span{margin-top:7px}

  /* Ventanas emergentes */
  .drawer-panel{width:100%;max-width:100%;padding:22px}
  .search-drawer-panel{overflow:auto}
  .floating-question-modal .faq-floating-panel{
    width:calc(100% - 16px)!important;
    max-height:calc(100svh - 16px)!important;
    padding:19px!important;
    border-radius:25px!important;
    overflow:auto;
  }
  .faq-modal-brand{padding-right:48px}
  .faq-modal-brand img{width:44px;height:49px}
  .faq-floating-panel h2{font-size:clamp(31px,9vw,40px)}
  .faq-floating-panel .faq-list{grid-template-columns:1fr!important}
  .faq-modal-actions{grid-template-columns:1fr!important}
  .faq-modal-actions .btn{width:100%;min-width:0}

  .ficha-modal{padding:6px}
  .ficha-dialog{width:100%;max-height:calc(100svh - 12px);padding:8px;border-radius:23px}
  .ficha-panel{grid-template-columns:1fr!important}
  .ficha-image{min-height:250px;border-radius:20px}
  .ficha-content{padding:18px;border-radius:20px}
  .ficha-content>h3{font-size:28px}
  .tech-grid{grid-template-columns:1fr!important}
  .ficha-photos{grid-template-columns:1fr 1fr}
  .ficha-photos img{height:105px}
}

@media(max-width:430px){
  :root{--mobile-gutter:14px}
  .hero{padding-top:34px}
  .hero-wordmark-only strong{font-size:clamp(31px,10.8vw,42px)!important}
  .hero h1{font-size:clamp(40px,13.2vw,56px)!important}
  .hero-lead{font-size:17px}
  .showcase-scene{
    --row:clamp(112px,34vw,145px);
    gap:9px;
  }
  .hero-logo-orb{width:min(100%,124px)!important}
  .hero-photo{border-radius:19px!important}
  .hero-showcase .hero-proof{padding:16px;border-radius:21px}
  .hero-showcase .proof-row{grid-template-columns:1fr 1fr}
  .hero-showcase .proof-row span{font-size:8px}
  .service-card,.service-card:last-child{min-height:430px!important}
}

@media(max-width:350px){
  .hero-wordmark-only em{display:none}
  .hero-showcase .proof-row{grid-template-columns:1fr}
  .showcase-scene{grid-template-columns:1fr 1fr}
  .brand-wordmark span{display:none}
}

@keyframes mobileLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@media(prefers-reduced-motion:reduce){
  .hero-logo-orb{animation:none!important}
}

/* Tablet final: el collage también entra en el flujo normal */
@media(min-width:721px) and (max-width:980px){
  .hero-showcase{
    position:relative;
    width:min(760px,100%);
    min-height:0!important;
    margin:4px auto 0!important;
    perspective:none;
  }
  .showcase-halo{display:none}
  .showcase-scene{
    --tablet-row:clamp(160px,25vw,205px);
    position:relative!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    grid-template-rows:var(--tablet-row) var(--tablet-row) clamp(135px,18vw,165px) auto;
    grid-template-areas:
      "logo main"
      "maintenance main"
      "care detail"
      "proof proof";
    gap:14px;
    transform:none!important;
    transform-style:flat;
  }
  .hero-photo{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    animation:none!important;
    border-radius:26px!important;
  }
  .hero-photo-main{grid-area:main}
  .hero-photo-maintenance{grid-area:maintenance}
  .hero-photo-care{grid-area:care}
  .hero-photo-detail{grid-area:detail}
  .hero-logo-orb{
    grid-area:logo;
    position:relative!important;
    inset:auto!important;
    align-self:center;
    justify-self:center;
    width:min(100%,175px)!important;
    height:auto!important;
    aspect-ratio:1;
    transform:none!important;
    animation:mobileLogoFloat 5s ease-in-out infinite!important;
  }
  .hero-logo-orb img{width:68%!important;height:74%!important}
  .hero-logo-orb small{display:none}
  .hero-showcase .hero-proof{
    grid-area:proof;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    animation:none!important;
  }
  .hero-bottom{display:none}
}

/* El dock móvil se mantiene flotante, pero fuera del centro del contenido */
@media(max-width:720px){
  .floating-actions{
    right:8px!important;
    bottom:10px!important;
    display:grid!important;
    transform:none!important;
    gap:5px;
    padding:5px;
    border-radius:20px;
  }
  .floating-actions .float-action{width:43px;height:43px;border-radius:14px}
}