
/* Proyección Creativa V4.0 — Mobile editorial flow
   En celulares: título -> imagen -> contenido/CTA. */
.mobile-inline-media{display:none}

@media (max-width:700px){
  /* Global mobile rhythm */
  .container{width:min(calc(100% - 30px),var(--container))}
  .mobile-replaced-media{display:none!important}
  .mobile-inline-media{
    display:block;
    width:100%;
    margin:20px 0 22px;
    border-radius:18px;
    overflow:hidden;
    background:#dfe5ec;
    box-shadow:0 14px 34px rgba(7,26,54,.12);
  }
  .mobile-inline-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
  }
  .mobile-inline-media figcaption{
    display:none;
  }
  .eyebrow{margin-bottom:10px}
  .story-copy>p:not(.eyebrow),
  .em-story-copy>p:not(.eyebrow),
  .digital-story-copy>p:not(.eyebrow),
  .digital-design-copy>p:not(.eyebrow),
  .digital-campaign-copy>p:not(.eyebrow){margin-top:0}

  /* HOME */
  .hero{padding:34px 0 54px}
  .hero-grid{display:block}
  .hero-copy{max-width:none}
  .hero h1{font-size:clamp(2.8rem,13.7vw,4rem);line-height:.98}
  .hero-lead{margin-top:0;font-size:.98rem;line-height:1.68}
  .hero-actions{margin-top:24px}
  .home-page-nav{top:76px}
  .service-story,.service-story-alt{padding:28px 0 68px}
  .story-grid,.story-grid-alt{display:block}
  .story-copy h2{font-size:clamp(2.45rem,11.6vw,3.35rem)}
  .story-list{margin-top:22px}
  .contact-section{padding:30px 0 68px}
  .contact-grid{display:block}
  .contact-copy h2{font-size:clamp(2.45rem,11.6vw,3.35rem)}
  .contact-copy>p:not(.eyebrow){margin-top:0}

  /* ESPACIOS & MARCA */
  .em-hero{min-height:auto;background:#071a36}
  .em-hero::before{background:none!important}
  .em-hero::after{background:linear-gradient(180deg,#071a36 0%,#0a2245 100%)!important}
  .em-hero-inner{min-height:auto;padding:40px 0 54px;display:block}
  .em-hero-copy{max-width:none}
  .em-hero h1{font-size:clamp(3rem,13.8vw,4.2rem);line-height:.98}
  .em-hero-lead{margin-top:0}
  .em-hero-tag{display:none}
  .em-story,.em-production,.em-identity,.em-case,.em-contact{padding-top:28px}
  .em-story-grid,.em-story-grid.reverse{display:block}
  .em-story-copy h2,.em-section-title{font-size:clamp(2.45rem,11.6vw,3.4rem)!important}
  .em-list{grid-template-columns:1fr;margin-top:22px}
  .em-production-head,.em-case-head{display:block;margin-bottom:22px}
  .em-production-head>p,.em-case-head>p{margin-top:0}
  .em-production-cats,.em-case-grid{grid-template-columns:1fr}

  /* DIGITAL */
  .digital-hero{min-height:auto;background:#071a36}
  .digital-hero::before{background:none!important}
  .digital-hero::after{background:linear-gradient(180deg,#071a36 0%,#0a2245 100%)!important}
  .digital-hero-inner{min-height:auto;padding:40px 0 54px;display:block}
  .digital-hero-copy{max-width:none}
  .digital-hero h1{font-size:clamp(3rem,13.8vw,4.2rem);line-height:.98}
  .digital-hero-lead{margin-top:0}
  .digital-hero-tag{display:none}
  .digital-story,.digital-design,.digital-campaign,.digital-contact{padding-top:28px}
  .digital-story-grid,.digital-story-grid.reverse,.digital-campaign-grid,.digital-design-grid,.digital-contact-grid{display:block}
  .digital-story-copy h2,.digital-design-copy h2,.digital-campaign-copy h2,.digital-contact h2{font-size:clamp(2.45rem,11.6vw,3.4rem)}
  .digital-list,.digital-chip-grid{grid-template-columns:1fr}
  .digital-flow{margin-top:22px}
  .digital-contact-copy>p:not(.eyebrow){margin-top:0}
}

@media (max-width:430px){
  .mobile-inline-media{margin:18px 0 20px;border-radius:16px}
  .mobile-inline-media img{aspect-ratio:4/3}
  .hero-actions,.em-hero-actions,.digital-hero-actions{gap:10px}
  .hero-actions .btn,.em-hero-actions .btn,.digital-hero-actions .btn{width:100%}
}
