/* =========================================================
   V47 · Mobile polish / no-overlap pass
   Goal: clean vertical flow, no decorative layer over buttons,
   readable typography and safe touch targets on small screens.
   ========================================================= */

@media (max-width:900px){
  html,body{
    max-width:100%;
    overflow-x:clip!important;
  }

  body{
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
  }

  img,svg,video,canvas{max-width:100%;}
  input,select,textarea,button{max-width:100%;}

  /* Nothing decorative may intercept a tap. */
  .ambient-particles,
  .dissolve-particles,
  .pp-cursor-light,
  .scene-meta,
  .page-progress,
  .inner-hero-orbit,
  .inner-hero-decoration,
  .decorative,
  [aria-hidden="true"]{
    pointer-events:none!important;
  }

  /* A floating back-to-top button can sit on top of primary CTAs on phones. */
  .back-to-top{display:none!important;}

  /* Every real action sits above visual effects. */
  a.btn,
  button.btn,
  .cinema-btn,
  .cinema-text-link,
  .cinema-dark-link,
  .mobile-menu-cta,
  .cta-actions-v23,
  .cta-actions-v23 .btn,
  .industry-v25-actions,
  .industry-v25-actions .btn,
  .configurator-actions-v32,
  .configurator-actions-v32 .btn,
  .tab-btn{
    position:relative!important;
    z-index:30!important;
    isolation:isolate;
  }

  a.btn::before,a.btn::after,
  button.btn::before,button.btn::after,
  .cinema-btn::before,.cinema-btn::after,
  .cinema-text-link::before,.cinema-text-link::after,
  .cinema-dark-link::before,.cinema-dark-link::after{
    pointer-events:none!important;
  }

  .btn,
  .cinema-btn,
  .mobile-menu-cta{
    min-height:48px!important;
    line-height:1.2!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  /* =========================
     Mobile header / navigation
     ========================= */
  .site-header .nav-links>a::before,
  body.cinematic-home .site-header .nav-links>a::before,
  body.cinematic-inner .site-header .nav-links>a::before{
    content:none!important;
    display:none!important;
  }

  .site-header .nav-links>a,
  body.cinematic-home .site-header .nav-links>a,
  body.cinematic-inner .site-header .nav-links>a{
    padding-left:4px!important;
    padding-right:42px!important;
    min-height:52px!important;
    overflow:visible!important;
  }

  .site-header .nav-links>a:hover,
  .site-header .nav-links>a:focus-visible{
    padding-left:8px!important;
  }

  .site-header .nav-links>a::after{
    right:5px!important;
    z-index:2!important;
  }

  /* =========================
     Home: strict vertical flow
     ========================= */
  body.cinematic-home main{overflow:clip!important;}

  body.cinematic-home .cinema-scene,
  body.cinematic-home .cinema-scene.cinema-hero{
    overflow:clip!important;
    padding:22px 0 42px!important;
    background:#fff!important;
  }

  body.cinematic-home .cinema-sticky,
  body.cinematic-home .cinema-hero .cinema-sticky{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    gap:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    background:#fff!important;
    isolation:isolate;
  }

  /* Image has no visible card edge on mobile. */
  body.cinematic-home .cinema-media,
  body.cinematic-home .cinema-media-wide,
  body.cinematic-home .cinema-hero .cinema-media,
  body.cinematic-home .cinema-contact-scene .cinema-media{
    position:relative!important;
    grid-column:1!important;
    grid-row:1!important;
    inset:auto!important;
    order:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:hidden!important;
    z-index:1!important;
  }

  body.cinematic-home .cinema-media img{
    background:#fff!important;
  }

  /* Keep the white feather, but never create a dark or framed layer. */
  body.cinematic-home .cinema-media::after{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  body.cinematic-home .cinema-overlay,
  body.cinematic-home .cinema-overlay-right,
  body.cinematic-home .cinema-overlay-center,
  body.cinematic-home .cinema-overlay-strong{
    pointer-events:none!important;
    z-index:2!important;
  }

  /* Copy is BELOW the image, never floating on top of it or a button. */
  body.cinematic-home .cinema-content,
  body.cinematic-home .cinema-content-left,
  body.cinematic-home .cinema-content-center,
  body.cinematic-home .cinema-content-right,
  body.cinematic-home .cinema-content-center-y,
  body.cinematic-home .cinema-hero .cinema-content,
  body.cinematic-home .cinema-hero .cinema-content-left,
  body.cinematic-home .cinema-hero .cinema-content-center-y{
    position:relative!important;
    grid-column:1!important;
    grid-row:2!important;
    inset:auto!important;
    order:2!important;
    width:calc(100% - 32px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:18px auto 0!important;
    padding:0!important;
    display:block!important;
    transform:none!important;
    z-index:6!important;
    pointer-events:auto!important;
  }

  body.cinematic-home .cinema-copy,
  body.cinematic-home .cinema-copy-narrow,
  body.cinematic-home .cinema-copy-centered,
  body.cinematic-home .cinema-copy-contact,
  body.cinematic-home .cinema-hero .cinema-copy{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important;
    z-index:7!important;
  }

  body.cinematic-home .cinema-copy::before,
  body.cinematic-home .cinema-copy::after,
  body.cinematic-home .cinema-copy-centered::before{
    pointer-events:none!important;
  }

  body.cinematic-home .cinema-copy h1,
  body.cinematic-home .cinema-copy h2{
    position:relative!important;
    z-index:3!important;
    max-width:100%!important;
    margin:0!important;
    line-height:1.03!important;
    text-wrap:balance!important;
    overflow:visible!important;
  }

  body.cinematic-home .cinema-copy h1{font-size:clamp(2.15rem,10.4vw,3.15rem)!important;}
  body.cinematic-home .cinema-copy h2{font-size:clamp(1.95rem,9.6vw,2.8rem)!important;}

  body.cinematic-home .cinema-copy p{
    position:relative!important;
    z-index:4!important;
    margin-top:16px!important;
    font-size:.95rem!important;
    line-height:1.62!important;
  }

  body.cinematic-home .cinema-kicker{
    position:relative!important;
    z-index:4!important;
  }

  /* Actions always receive their own clear row. */
  body.cinematic-home .cinema-actions,
  body.cinematic-home .cinema-actions-center{
    position:relative!important;
    z-index:30!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    margin:22px 0 0!important;
    padding:0!important;
    clear:both!important;
  }

  body.cinematic-home .cinema-actions .cinema-btn{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    margin:0!important;
    padding:13px 17px!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  body.cinematic-home .cinema-text-link{
    display:inline-flex!important;
    align-items:center!important;
    min-height:44px!important;
    margin-top:16px!important;
    padding-block:8px!important;
  }

  /* Facts cannot float into hero buttons/copy. */
  body.cinematic-home .cinema-hero .hero-facts{
    position:relative!important;
    grid-column:1!important;
    grid-row:3!important;
    inset:auto!important;
    order:3!important;
    width:calc(100% - 32px)!important;
    margin:22px auto 0!important;
    z-index:5!important;
  }

  /* White editorial sections get consistent separation. */
  body.cinematic-home .cinema-intro,
  body.cinematic-home .cinema-strip,
  body.cinematic-home .cinema-process,
  body.cinematic-home .cinema-pricing{
    overflow:clip!important;
  }

  body.cinematic-home .cinema-intro-grid,
  body.cinematic-home .cinema-strip-head,
  body.cinematic-home .cinema-process-head,
  body.cinematic-home .cinema-pricing-head{
    position:relative!important;
    z-index:5!important;
    gap:18px!important;
  }

  body.cinematic-home .cinema-pricing-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
  }

  body.cinematic-home .cinema-pricing .cinema-dark-link{
    justify-self:start!important;
    margin-top:2px!important;
  }

  body.cinematic-home .cinema-price-row{
    position:relative!important;
    z-index:3!important;
    overflow:hidden!important;
  }

  /* =========================
     Inner pages
     ========================= */
  body.cinematic-inner main{overflow:clip!important;}

  body.cinematic-inner .page-hero{
    min-height:0!important;
    height:auto!important;
    padding:24px 0 48px!important;
    overflow:hidden!important;
  }

  body.cinematic-inner .page-hero-inner{
    position:relative!important;
    z-index:5!important;
    width:calc(100% - 32px)!important;
    min-height:0!important;
    padding:64px 0 32px!important;
  }

  body.cinematic-inner .page-hero h1{
    max-width:100%!important;
    font-size:clamp(2.45rem,11.3vw,3.8rem)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere;
  }

  body.cinematic-inner .page-hero p{
    max-width:100%!important;
    font-size:.98rem!important;
    line-height:1.65!important;
  }

  body.cinematic-inner .page-hero::before,
  body.cinematic-inner .page-hero::after,
  body.cinematic-inner .page-hero-inner::before,
  body.cinematic-inner .page-hero-inner::after,
  body.cinematic-inner .inner-hero-media::before,
  body.cinematic-inner .inner-hero-media::after{
    pointer-events:none!important;
  }

  body.cinematic-inner main>.section,
  body.cinematic-inner .section{
    overflow:clip!important;
  }

  /* CTA blocks: all ornament stays behind copy/actions. */
  body.cinematic-inner .cta-card-v23{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
    min-height:0!important;
    padding:30px 22px!important;
    overflow:hidden!important;
  }

  body.cinematic-inner .cta-card-v23::before,
  body.cinematic-inner .cta-card-v23::after{
    z-index:0!important;
    opacity:.45!important;
    pointer-events:none!important;
  }

  body.cinematic-inner .cta-copy-v23{
    position:relative!important;
    z-index:2!important;
  }

  body.cinematic-inner .cta-actions-v23{
    position:relative!important;
    z-index:20!important;
    width:100%!important;
    min-width:0!important;
    gap:12px!important;
  }

  body.cinematic-inner .cta-actions-v23 .btn{
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    justify-content:center!important;
  }

  /* Cards and forms stay in normal flow. */
  body.cinematic-inner .profile-card,
  body.cinematic-inner .industry-card,
  body.cinematic-inner .benefit-full-card,
  body.cinematic-inner .plan-card,
  body.cinematic-inner .testimonial-card,
  body.cinematic-inner .contact-card,
  body.cinematic-inner form{
    max-width:100%!important;
  }

  body.cinematic-inner .profile-card-copy{
    position:relative!important;
    z-index:3!important;
  }

  #planes .plan-tabs{
    position:relative!important;
    top:auto!important;
    z-index:10!important;
    margin-bottom:22px!important;
  }

  #planes .tab-btn{
    min-height:44px!important;
    overflow:hidden!important;
  }

  #planes .plan-card .btn,
  #contacto .btn,
  #industrias .industry-v25-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }

  #contacto input,
  #contacto select,
  #contacto textarea{
    width:100%!important;
    min-width:0!important;
  }

  #contacto .map-section{
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Hover transforms are not useful on touch and can visually overlap neighbors. */
  @media (hover:none), (pointer:coarse){
    .btn:hover,
    .cinema-btn:hover,
    .cinema-price-row:hover,
    .plan-card:hover,
    .profile-card:hover,
    .industry-card:hover,
    .benefit-full-card:hover,
    .testimonial-card:hover{
      transform:none!important;
    }
  }
}

@media (max-width:520px){
  body.cinematic-home .cinema-content,
  body.cinematic-home .cinema-content-left,
  body.cinematic-home .cinema-content-center,
  body.cinematic-home .cinema-content-right,
  body.cinematic-home .cinema-content-center-y,
  body.cinematic-home .cinema-hero .cinema-content,
  body.cinematic-home .cinema-hero .cinema-content-left,
  body.cinematic-home .cinema-hero .cinema-content-center-y,
  body.cinematic-home .cinema-hero .hero-facts,
  body.cinematic-inner .page-hero-inner{
    width:calc(100% - 24px)!important;
  }

  body.cinematic-home .cinema-copy h1{font-size:clamp(2rem,10.7vw,2.8rem)!important;}
  body.cinematic-home .cinema-copy h2{font-size:clamp(1.82rem,9.9vw,2.5rem)!important;}

  body.cinematic-inner .page-hero h1{
    font-size:clamp(2.25rem,11.5vw,3.2rem)!important;
  }

  body.cinematic-inner .cta-card-v23{
    padding:26px 18px!important;
  }
}