/* PRINTGATS · capa móvil compartida
   Mantiene intacta la composición de escritorio y establece una experiencia
   táctil, legible y ligera para pantallas de hasta 900 px. */

@media (max-width: 900px) {
  :root {
    --pg-mobile-gutter: clamp(16px, 5vw, 24px);
    --pg-mobile-header: 68px;
    --pg-mobile-label-size: 11px;
    --pg-mobile-caption-size: 12px;
  }

  html {
    scroll-padding-top: calc(var(--pg-mobile-header) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    overflow-x: clip;
  }

  body.menu-open { overflow: hidden; }

  img,
  video,
  canvas,
  svg { max-width: 100%; }

  :where(button, input, textarea, select) { font: inherit; }

  :where(a, button, summary, input, textarea, select) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  :where(a, button, summary):focus-visible {
    outline: 2px solid var(--accent, #ef4b2f);
    outline-offset: 3px;
  }

  /* Cabecera y menú: controles claros, superficie estable y zonas táctiles. */
  .site-header {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--pg-mobile-header) !important;
    min-height: var(--pg-mobile-header) !important;
    padding: 8px 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    transform: none !important;
  }

  .site-header.is-hidden { transform: translateY(-100%) !important; }

  .site-header > .brand,
  .site-header > .pg-responsive-wordmark {
    width: min(148px, 44vw) !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 6px !important;
  }

  .site-header .menu-toggle,
  .site-header .nav-toggle {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
  }

  .site-header .header-cta { display: none !important; }

  .site-header .nav,
  .site-header .main-nav {
    position: fixed !important;
    z-index: 140 !important;
    top: calc(var(--pg-mobile-header) + 8px) !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100svh - var(--pg-mobile-header) - 20px) !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(12,14,15,.985) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.32) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985) !important;
  }

  .site-header .nav.is-open,
  .site-header .main-nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .site-header .nav > a,
  .site-header .main-nav > a,
  .site-header .pg-examples-menu__link {
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    align-items: center !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
    text-shadow: none !important;
  }

  .site-header .nav > a:last-child,
  .site-header .main-nav > a:last-child { border-bottom-color: transparent !important; }

  .site-header .nav > a:active,
  .site-header .main-nav > a:active { background: rgba(255,255,255,.1) !important; }

  .site-header .nav > .pg-examples-menu,
  .site-header .main-nav > .pg-examples-menu {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
  }

  .site-header .pg-examples-menu__toggle {
    width: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border: 0 !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  .site-header .pg-examples-menu__panel {
    grid-column: 1 / -1 !important;
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
  }

  .site-header .pg-examples-menu__panel a {
    min-height: 46px !important;
    padding: 0 13px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 14px !important;
  }

  /* Inicio: conserva la secuencia vertical y elimina las capas 3D secundarias. */
  .home-page .motion-canvas,
  .home-page .motion-glow,
  .home-page .scene-counter { display: none !important; }

  .home-page .a1-hero {
    height: auto !important;
    min-height: 100svh !important;
  }

  .home-page .a1-hero__sticky {
    position: relative !important;
    height: 100svh !important;
    min-height: 620px !important;
  }

  .home-page .a1-hero__canvas,
  .home-page .a1-hero__progress,
  .home-page .a1-hero__scroll-cue { display: none !important; }

  .home-page .a1-hero__poster {
    height: 100% !important;
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: 50% 48% !important;
  }

  .home-page .a1-hero__shade {
    display: block !important;
    background:
      linear-gradient(180deg, rgba(7,9,10,.18) 0%, rgba(7,9,10,.04) 34%, rgba(7,9,10,.38) 66%, rgba(7,9,10,.88) 100%) !important;
  }

  .home-page .a1-hero__copy {
    top: auto !important;
    right: var(--pg-mobile-gutter) !important;
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 34px)) !important;
    left: var(--pg-mobile-gutter) !important;
    width: auto !important;
    max-width: 520px !important;
    color: #f7f3ed !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: 0 2px 30px rgba(0,0,0,.48) !important;
  }

  .home-page .a1-hero__copy h1 {
    gap: .08em !important;
    max-width: 10ch;
    margin: 0 !important;
    color: inherit !important;
    font-size: clamp(40px, 12.2vw, 58px) !important;
    line-height: .93 !important;
    letter-spacing: -.052em !important;
    transform: none !important;
  }

  .home-page .a1-hero__copy h1 span:last-child { font-size: .72em !important; }
  .home-page .a1-hero__prefix-brush,
  .home-page .a1-hero__circle-video { display: none !important; }

  .home-page .a1-hero__promise {
    max-width: 31ch !important;
    margin-top: 18px !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .home-page .a1-hero__cta {
    min-height: 48px !important;
    margin-top: 16px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 12px !important;
    background: rgba(9,12,13,.24) !important;
  }

  .home-page:not(.a1-hero--legacy) .work-strip,
  .home-page .work-strip { margin-top: 0 !important; }

  /* Portafolio de inicio: carrusel nativo, con tarjetas que dejan ver la siguiente. */
  .motion-horizontal {
    height: auto !important;
    padding: 76px 0 62px !important;
    overflow: hidden !important;
  }

  .motion-horizontal .work-pin {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  .motion-horizontal .work-title {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    padding: 0 var(--pg-mobile-gutter) !important;
    transform: none !important;
  }

  .motion-horizontal .work-title h2 {
    max-width: 7.5ch;
    font-size: clamp(48px, 15vw, 72px) !important;
    line-height: .88 !important;
  }

  .motion-horizontal .work-track {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 36px var(--pg-mobile-gutter) 24px !important;
    scroll-padding-inline: var(--pg-mobile-gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .motion-horizontal .work-track::-webkit-scrollbar { display: none; }

  .motion-horizontal .work-card,
  .motion-horizontal .work-card--tall,
  .motion-horizontal .work-card--wide {
    flex: 0 0 min(82vw, 360px) !important;
    height: min(58svh, 500px) !important;
    min-height: 390px !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
  }

  .motion-horizontal .work-card__copy h3 {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.02 !important;
  }

  .motion-horizontal .work-card__open strong { font-size: 12px !important; }
  .horizontal-progress { margin: 0 var(--pg-mobile-gutter) !important; }

  /* Servicios: lectura vertical y apertura táctil sin depender de WebGL. */
  .services-overview {
    min-height: 0 !important;
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .services-overview__intro h2 {
    font-size: clamp(56px, 17vw, 82px) !important;
    line-height: .88 !important;
  }

  .services-overview__summary {
    max-width: 34ch !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .service-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .service-card {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
  }

  .service-card__copy strong {
    font-size: clamp(22px, 6vw, 29px) !important;
    line-height: 1.04 !important;
  }

  .service-card__meta-runtime { font-size: 13px !important; }
  .lusion-card-canvas,
  .projects-lusion-canvas,
  .projects-detail-lusion-canvas { display: none !important; }

  /* Contacto: formulario convencional, campos grandes y sin escenario 3D. */
  .contact-minimal,
  .contact-minimal[data-contact3d-state="ready"],
  .contact-minimal[data-contact3d-state="static"] {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 78px var(--pg-mobile-gutter) 40px !important;
  }

  .contact-home-3d__canvas,
  .contact-home-3d__css,
  .contact-home-3d__cursor { display: none !important; }

  .contact-home-3d__surface,
  .contact-home-3d__content {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .contact-minimal__intro,
  .contact-minimal__panel { grid-column: 1 !important; }

  .contact-minimal__intro h2 {
    max-width: 10ch !important;
    font-size: clamp(44px, 13vw, 64px) !important;
    line-height: .9 !important;
  }

  .contact-minimal__help strong { font-size: 18px !important; }
  .contact-minimal__help span,
  .contact-minimal__identity > p { font-size: 14px !important; }

  .contact-minimal__identity > div {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .contact-minimal__identity input,
  .contact-minimal__composer textarea {
    min-height: 52px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }

  .contact-minimal__composer {
    display: grid !important;
    grid-template-columns: 52px 52px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .contact-minimal__composer textarea {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 118px !important;
    resize: vertical !important;
  }

  .contact-minimal__attach,
  .contact-minimal__audio,
  .contact-minimal__send {
    position: relative !important;
    inset: auto !important;
    min-height: 52px !important;
    margin: 0 !important;
  }

  .contact-minimal__attach { grid-column: 1 !important; grid-row: 2 !important; }
  .contact-minimal__audio { grid-column: 2 !important; grid-row: 2 !important; }
  .contact-minimal__send {
    grid-column: 3 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }

  .contact-minimal__destination { grid-column: 1 / -1 !important; }
  .contact-minimal__details { gap: 4px 12px !important; }
  .contact-minimal__details > a { min-height: 44px !important; font-size: 13px !important; }

  .contact-minimal__location,
  .contact-home-3d__surface > .contact-minimal__location {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 6px !important;
    transform: none !important;
  }

  .home-page > footer {
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
    font-size: 12px !important;
  }

  /* Proyectos: menú editorial propio, sin el desplegable nativo del navegador. */
  .examples-submenu.pg-examples-menu__panel--fixed {
    height: 64px !important;
    min-height: 64px !important;
    align-items: center !important;
    padding: 8px var(--pg-mobile-gutter) !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid rgba(17, 19, 24, .1) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
  }

  .examples-submenu.pg-examples-menu__panel--fixed .examples-submenu__inner {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .examples-submenu.pg-examples-menu__panel--fixed .examples-filter {
    display: none !important;
  }

  .examples-submenu.pg-examples-menu__panel--fixed .examples-filter-menu {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
  }

  .examples-filter-menu__trigger {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 24px !important;
    width: 100% !important;
    height: 48px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 999px !important;
    background: #111318 !important;
    box-shadow: 0 8px 22px rgba(17, 19, 24, .14) !important;
    color: #fff !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  .examples-filter-menu__trigger::-webkit-details-marker { display: none !important; }

  .examples-filter-menu__prompt {
    color: #e66a47 !important;
    font-size: var(--pg-mobile-label-size) !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  .examples-filter-menu__value {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .examples-filter-menu__trigger:focus-visible {
    outline: 2px solid #e66a47 !important;
    outline-offset: 3px !important;
  }

  .examples-filter-menu__arrow {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    color: #e66a47 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transform: rotate(0) !important;
  }

  .examples-filter-menu[open] .examples-filter-menu__arrow {
    transform: rotate(45deg) !important;
  }

  .examples-filter-menu__options {
    position: absolute !important;
    z-index: 6 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 2px !important;
    grid-auto-rows: minmax(44px, auto) !important;
    align-content: start !important;
    max-height: min(330px, calc(100svh - var(--pg-mobile-header) - 88px)) !important;
    padding: 7px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 18px !important;
    background: #111318 !important;
    box-shadow: 0 22px 54px rgba(17, 19, 24, .28) !important;
  }

  .examples-filter-menu:not([open]) .examples-filter-menu__options { display: none !important; }

  .examples-filter-menu__option {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .examples-filter-menu__option input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .examples-filter-menu__option:hover,
  .examples-filter-menu__option:focus-within {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
  }

  .examples-filter-menu__option:focus-within {
    outline: 2px solid #e66a47 !important;
    outline-offset: -2px !important;
  }

  .examples-filter-menu__option.is-active {
    background: rgba(230, 106, 71, .17) !important;
    color: #fff !important;
  }

  .examples-filter-menu__option.is-active::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 9px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: #e66a47 !important;
  }

  .examples-gallery {
    padding-top: calc(var(--header, 62px) + 82px) !important;
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 10px !important;
  }

  .examples-gallery .example-card__caption,
  .examples-project .example-card__caption { margin-top: 9px !important; }

  .examples-gallery .example-card__caption .example-card__title,
  .examples-project .example-card__caption .example-card__title,
  .examples-gallery .example-card__title[aria-label]::after {
    min-height: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

  .example-card__caption small { font-size: var(--pg-mobile-label-size) !important; line-height: 1.4 !important; }

  .examples-project__bar,
  .examples-gallery__topline { gap: 10px !important; }

  /* Nosotros: reduce el fondo interactivo y prioriza relato y retrato. */
  .about-lusion-background { display: none !important; }

  .about-hero {
    min-height: 100svh !important;
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .about-hero h1 {
    max-width: 12ch !important;
    font-size: clamp(48px, 14vw, 72px) !important;
    line-height: .98 !important;
  }

  .about-disciplines,
  .about-hero__signature { font-size: 12px !important; line-height: 1.45 !important; }

  .about-editorial,
  .about-portrait {
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .about-editorial__lead { font-size: clamp(32px, 9vw, 44px) !important; }
  .about-editorial__note p { font-size: 20px !important; line-height: 1.35 !important; }

  /* Proceso: orden vertical, vídeo directo y textos de cuerpo a 16 px. */
  .process-page .process-hero,
  .process-page .process-method,
  .process-page .process-close {
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .process-page .process-hero__copy h1 {
    font-size: clamp(52px, 15vw, 76px) !important;
    line-height: .86 !important;
  }

  .process-page .process-hero__lead,
  .process-page .process-method__heading > p:last-child,
  .process-page .process-step__copy > p,
  .process-page .process-close__copy > p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .process-step { gap: 22px !important; }
  .process-step__copy h3 { font-size: clamp(30px, 9vw, 42px) !important; }
  .process-step__media { width: 100% !important; transform: none !important; }

  .process-scroll-reel {
    height: auto !important;
    min-height: 0 !important;
  }

  .process-scroll-reel__stage {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
  }

  .process-scroll-reel__canvas { display: none !important; }
  .process-scroll-reel__visual video { display: block !important; opacity: 1 !important; }
  .process-scroll-reel__copy > p:last-child { font-size: 16px !important; line-height: 1.5 !important; }

  .mobile-project-cta {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
  }

  /* Páginas de sector y galerías. */
  .sg-header {
    height: var(--pg-mobile-header) !important;
    min-height: var(--pg-mobile-header) !important;
    padding: 8px 12px !important;
  }

  .sg-brand { width: min(148px, 44vw) !important; }
  .sg-menu-mobile {
    display: inline-flex !important;
    min-width: 108px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  .sg-hero {
    min-height: 0 !important;
    gap: 34px !important;
    padding: calc(var(--pg-mobile-header) + 30px) var(--pg-mobile-gutter) 52px !important;
  }

  .sg-hero__copy { min-height: 0 !important; }
  .sg-kicker { margin-bottom: 22px !important; font-size: 11px !important; }
  .sg-hero h1 { font-size: clamp(50px, 14vw, 72px) !important; line-height: .83 !important; }
  .sg-hero__lead { max-width: 34ch !important; font-size: 17px !important; line-height: 1.5 !important; }
  .sg-hero__actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; }
  .sg-hero__action { min-height: 50px !important; justify-content: space-between !important; padding: 0 15px !important; }
  .sg-hero__visual { width: 100% !important; height: min(68svh, 540px) !important; min-height: 390px !important; }

  .sg-archive__head {
    min-height: 0 !important;
    padding: 86px var(--pg-mobile-gutter) 72px !important;
  }

  .sg-archive h2,
  .sg-next h2 { font-size: clamp(48px, 14vw, 72px) !important; line-height: .86 !important; }
  .sg-archive__head > p:last-child { max-width: 34ch !important; font-size: 16px !important; line-height: 1.5 !important; }

  .im-scene { padding: 68px 0 84px !important; }
  .im-chapter { margin-bottom: 28px !important; padding: 0 var(--pg-mobile-gutter) !important; }
  .im-chapter h3 { font-size: clamp(30px, 9vw, 40px) !important; }
  .im-chapter small { font-size: 12px !important; line-height: 1.4 !important; }
  .im-camera { gap: 24px !important; padding: 0 var(--pg-mobile-gutter) !important; }
  .im-frame,
  .im-frame.is-portrait,
  .im-frame.is-wide,
  .im-frame.is-square,
  .im-frame:nth-child(even) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    justify-self: stretch !important;
  }

  .sg-next[data-next-section] { padding-right: var(--pg-mobile-gutter) !important; padding-left: var(--pg-mobile-gutter) !important; }
  .sg-next__links a { min-height: 64px !important; }
  .sg-next__links strong { font-size: clamp(24px, 7vw, 34px) !important; }
  .sg-footer { gap: 18px !important; font-size: 12px !important; }

  .tg-intro,
  .tg-projects,
  .ind-case,
  .ind-services,
  .ind-references,
  .ind-process {
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .tg-intro h1 { font-size: clamp(40px, 11vw, 54px) !important; }
  .tg-intro__kicker,
  .tg-projects__bar h2,
  .tg-projects__bar p { font-size: var(--pg-mobile-label-size) !important; }
  .tg-key button { min-height: 50px !important; font-size: var(--pg-mobile-label-size) !important; }
  .tg-card h3 { min-height: 0 !important; font-size: 14px !important; line-height: 1.3 !important; }

  .ind-section-head > p:last-child:not(.sg-label),
  .ind-case__copy p,
  .ind-services__grid article p,
  .ind-process__steps p { font-size: 16px !important; line-height: 1.5 !important; }

  /* Legales: el contenido manda sobre la decoración. */
  .legal-hero,
  .legal-layout {
    padding-right: var(--pg-mobile-gutter) !important;
    padding-left: var(--pg-mobile-gutter) !important;
  }

  .legal-hero h1 { font-size: clamp(48px, 14vw, 72px) !important; }
  .legal-hero__intro p,
  .legal-section p,
  .legal-section li,
  .legal-contact { font-size: 16px !important; line-height: 1.65 !important; }
  .legal-nav { overflow-x: auto !important; scrollbar-width: none; }
}

@media (max-width: 560px) {
  .service-reel-overlay__surface {
    border-radius: 18px !important;
  }

  .service-detail__header h3 { font-size: clamp(34px, 10vw, 48px) !important; }
  .service-detail__header > p,
  .service-detail__story p,
  .service-print-process,
  .service-design-formats { font-size: 15px !important; line-height: 1.55 !important; }

  .examples-gallery { padding-right: 14px !important; padding-left: 14px !important; }
  .examples-grid,
  .tg-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }

  .examples-grid { row-gap: 34px !important; }
  .examples-grid .example-card__media { aspect-ratio: 4 / 5 !important; }

  .tg-grid { row-gap: 24px !important; }
}

@media (max-width: 350px) {
  .examples-grid,
  .tg-grid { grid-template-columns: 1fr !important; }

  .examples-gallery .example-card__caption .example-card__title,
  .tg-card h3 { font-size: 15px !important; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .home-page .a1-hero__sticky { min-height: 100svh !important; }
  .home-page .a1-hero__copy { bottom: 18px !important; }
  .home-page .a1-hero__copy h1 { max-width: 14ch; font-size: clamp(32px, 7vw, 46px) !important; }
  .home-page .a1-hero__promise { margin-top: 8px !important; }
  .home-page .a1-hero__cta { margin-top: 8px !important; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .motion-horizontal .work-track { scroll-snap-type: none; }
  .site-header .nav,
  .site-header .main-nav { transition: none !important; }
}

/* Modo móvil sereno y autoritativo.
   La web de escritorio utiliza varias coreografías superpuestas. En pantallas
   táctiles dejamos una sola composición estable: desplazamiento vertical
   nativo, contenido siempre visible y cambios de estado instantáneos. */
@media (max-width: 900px) {
  html {
    scroll-behavior: auto !important;
  }

  body *,
  body *::before,
  body *::after {
    animation: none !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
  }

  body :where(
    .reveal,
    [data-reveal],
    [data-industry-reveal],
    .about-reveal,
    .about-split > *,
    .tg-card,
    .sx-reveal,
    .process-step,
    .process-hero__copy > *,
    .process-hero__media,
    .sg-hero__copy,
    .sg-hero__visual,
    .im-frame
  ) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }

  .page-wipe,
  .cursor,
  .progress,
  .scene-counter,
  .motion-glow,
  .motion-canvas,
  .horizontal-progress,
  .im-progress,
  .im-scroll-label,
  .sg-next__preview {
    display: none !important;
  }

  /* La cabecera móvil no participa en la coreografía flotante de escritorio. */
  html body.home-page .site-header,
  html[data-brand-variant] body.home-page .site-header,
  html body.home-page .site-header.is-scroll-assembled,
  html body.home-page .site-header.is-scroll-vanished,
  html body.home-page .site-header.is-hidden {
    position: fixed !important;
    inset: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    height: var(--pg-mobile-header) !important;
    min-height: var(--pg-mobile-header) !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;
    background: rgba(10,12,13,.9) !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
  }

  html body.home-page .site-header::before,
  html body.home-page .site-header::after {
    display: none !important;
  }

  html body.home-page .site-header > .brand,
  html[data-brand-variant] body.home-page .site-header > .brand,
  html body.home-page .site-header > .pg-responsive-wordmark {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: min(148px, 44vw) !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  html body.home-page .site-header .menu-toggle,
  html body.home-page .site-header .nav-toggle {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    justify-self: end !important;
    width: 48px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav,
  html body.home-page .site-header .main-nav,
  html body.home-page .site-header.is-scroll-assembled .nav,
  html body.home-page .site-header.is-scroll-assembled .main-nav {
    position: fixed !important;
    z-index: 140 !important;
    inset: calc(var(--pg-mobile-header) + 8px) 12px auto !important;
    display: flex !important;
    width: auto !important;
    max-height: calc(100svh - var(--pg-mobile-header) - 20px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 20px !important;
    background: rgba(12,14,15,.985) !important;
    box-shadow: 0 22px 56px rgba(0,0,0,.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav.is-open,
  html body.home-page .site-header .main-nav.is-open,
  html[data-brand-variant] body.home-page .site-header .nav.is-open,
  html[data-brand-variant] body.home-page .site-header .main-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 20px !important;
    background: rgba(12,14,15,.985) !important;
    box-shadow: 0 22px 56px rgba(0,0,0,.3) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav > a,
  html body.home-page .site-header .main-nav > a,
  html body.home-page .site-header .nav .pg-examples-menu__link,
  html body.home-page .site-header .main-nav .pg-examples-menu__link,
  html body.home-page .site-header .nav .pg-examples-menu__link[aria-current="page"],
  html body.home-page .site-header .main-nav .pg-examples-menu__link[aria-current="page"] {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    align-items: center !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: none !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav > .pg-examples-menu,
  html body.home-page .site-header .main-nav > .pg-examples-menu {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav .pg-examples-menu__toggle,
  html body.home-page .site-header .main-nav .pg-examples-menu__toggle {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 1px 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.1) !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav .pg-examples-menu__panel,
  html body.home-page .site-header .main-nav .pg-examples-menu__panel {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    display: none !important;
    width: 100% !important;
    max-height: none !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.home-page .site-header .nav .pg-examples-menu.is-open > .pg-examples-menu__panel,
  html body.home-page .site-header .main-nav .pg-examples-menu.is-open > .pg-examples-menu__panel {
    display: grid !important;
  }

  html body.home-page .site-header .nav .pg-examples-menu__panel a,
  html body.home-page .site-header .main-nav .pg-examples-menu__panel a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    padding: 0 12px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 14px !important;
    transform: none !important;
  }

  html[data-brand-variant] body.home-page .site-header .nav > .pg-examples-menu > .pg-examples-menu__link,
  html[data-brand-variant] body.home-page .site-header .main-nav > .pg-examples-menu > .pg-examples-menu__link,
  html[data-brand-variant] body.home-page .site-header .nav > .pg-examples-menu > .pg-examples-menu__link[aria-current="page"],
  html[data-brand-variant] body.home-page .site-header .main-nav > .pg-examples-menu > .pg-examples-menu__link[aria-current="page"] {
    color: rgba(255,255,255,.92) !important;
    text-shadow: none !important;
  }

  /* Un solo mensaje, sin intercambio de palabras ni deriva por scroll. */
  html body.home-page .a1-hero__copy,
  html body.home-page .a1-hero__copy #a1-hero-title,
  html body.home-page #a1-hero-title .a1-hero__headline-swap-region,
  html body.home-page #a1-hero-title [data-a1-headline-prefix],
  html body.home-page #a1-hero-title .a1-hero__headline-line--fixed,
  html body.home-page #a1-hero-title [data-a1-headline-idea] {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 3px 28px rgba(0,0,0,.62) !important;
    transform: none !important;
    will-change: auto !important;
  }

  html body.home-page .a1-hero.is-ready .a1-hero__poster,
  html body.home-page .a1-hero.is-mobile-static .a1-hero__poster {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.home-page #a1-hero-title [data-a1-headline-piece] {
    display: none !important;
  }

  html body.home-page .a1-hero__copy #a1-hero-title::before {
    display: none !important;
  }

  /* Los ámbitos se leen de arriba abajo; desaparecen el carrusel forzado y
     la barra que simulaba el avance de la animación horizontal. */
  html body.home-page .motion-horizontal .work-track {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 34px var(--pg-mobile-gutter) 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    transform: none !important;
  }

  html body.home-page .motion-horizontal .work-card,
  html body.home-page .motion-horizontal .work-card--tall,
  html body.home-page .motion-horizontal .work-card--wide {
    width: 100% !important;
    height: clamp(360px, 112vw, 470px) !important;
    min-height: 0 !important;
    flex: none !important;
    scroll-snap-align: none !important;
    transform: none !important;
  }

  .im-camera,
  .process-scroll-reel__stage,
  .process-scroll-reel__visual,
  .process-step__media,
  .ind-hero__media,
  .ind-case__visual,
  .ind-references__grid figure,
  .about-hero__portrait img,
  .about-process__image img,
  .about-process__portrait img {
    transform: none !important;
    will-change: auto !important;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  html body.home-page .motion-horizontal .work-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.home-page .motion-horizontal .work-card,
  html body.home-page .motion-horizontal .work-card--tall,
  html body.home-page .motion-horizontal .work-card--wide {
    height: min(52vw, 460px) !important;
  }
}

/* Ajuste final para teléfono vertical: densidad, orden y proporciones propias. */
@media (max-width: 700px) {
  html body.home-page .contact-minimal,
  html body.home-page .contact-minimal[data-contact3d-state="ready"],
  html body.home-page .contact-minimal[data-contact3d-state="static"] {
    min-height: 0 !important;
    gap: 18px !important;
    padding: 42px 18px 28px !important;
  }

  html body.home-page .contact-minimal__eyebrow {
    margin: 0 0 12px !important;
    font-size: var(--pg-mobile-label-size) !important;
  }

  html body.home-page .contact-minimal__intro h2 {
    max-width: 9.5ch !important;
    margin: 0 !important;
    font-size: clamp(34px, 9.8vw, 41px) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
  }

  html body.home-page .contact-minimal__panel { margin: 0 !important; }

  html body.home-page .contact-minimal__help {
    gap: 2px !important;
    margin: 0 0 13px !important;
  }

  html body.home-page .contact-minimal__help strong {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body.home-page .contact-minimal__help span,
  html body.home-page .contact-minimal__identity > p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body.home-page .contact-minimal__form { gap: 8px !important; }
  html body.home-page .contact-minimal__identity legend { font-size: 12px !important; }
  html body.home-page .contact-minimal__identity > div { gap: 7px !important; }

  html body.home-page .contact-minimal__identity input {
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  html body.home-page .contact-minimal__message-label {
    margin-top: 3px !important;
    font-size: var(--pg-mobile-label-size) !important;
  }

  html body.home-page .contact-minimal__composer {
    grid-template-columns: 44px 44px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 20px !important;
  }

  html body.home-page .contact-minimal__composer textarea {
    grid-column: 1 / -1 !important;
    min-height: 76px !important;
    max-height: 112px !important;
    padding: 10px 11px !important;
    font-size: 16px !important;
    resize: none !important;
  }

  html body.home-page .contact-minimal__attach,
  html body.home-page .contact-minimal__audio,
  html body.home-page .contact-minimal__send {
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  html body.home-page .contact-minimal__attach { grid-column: 1 !important; grid-row: 2 !important; }
  html body.home-page .contact-minimal__audio { grid-column: 2 !important; grid-row: 2 !important; }
  html body.home-page .contact-minimal__send {
    grid-column: 3 !important;
    grid-row: 2 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: var(--pg-mobile-caption-size) !important;
  }

  html body.home-page .contact-minimal__details {
    justify-content: flex-start !important;
    gap: 0 12px !important;
    margin: 1px 0 0 !important;
  }

  html body.home-page .contact-minimal__details > span {
    width: 100% !important;
    text-align: left !important;
    font-size: var(--pg-mobile-caption-size) !important;
  }

  html body.home-page .contact-minimal__details > a {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  html body.home-page .contact-minimal__location,
  html body.home-page .contact-home-3d__surface > .contact-minimal__location {
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  html body.home-page .contact-minimal__location summary {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body.home-page .contact-minimal__location summary img {
    width: auto !important;
    height: 23px !important;
    margin: 0 9px 0 0 !important;
  }

  html body.home-page .contact-minimal__location summary span { font-size: 15px !important; }

  html body.about-page .site-header .about-theme-toggle {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .075) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  html body.about-page .site-header .about-theme-toggle__label {
    display: block !important;
    font-size: var(--pg-mobile-label-size) !important;
  }

  html body.about-page .about-hero {
    display: block !important;
    min-height: 0 !important;
    padding: calc(var(--pg-mobile-header) + 54px) 18px 58px !important;
  }

  html body.about-page .about-hero__copy {
    width: 100% !important;
    margin: 0 !important;
  }

  html body.about-page .about-kicker {
    position: static !important;
    margin: 0 0 17px !important;
    font-size: var(--pg-mobile-label-size) !important;
  }

  html body.about-page .about-hero h1 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(38px, 10.8vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    text-align: left !important;
  }

  html body.about-page .about-hero h1 span {
    overflow: visible !important;
    text-wrap: balance !important;
  }

  html body.about-page .about-disciplines {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 14px !important;
    margin: 28px 0 0 !important;
    font-size: var(--pg-mobile-label-size) !important;
    line-height: 1.3 !important;
  }

  html body.about-page .about-disciplines li {
    padding: 10px 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--about-ink) 22%, transparent) !important;
  }

  html body.about-page .about-hero__signature {
    position: static !important;
    margin: 22px 0 0 !important;
    font-size: var(--pg-mobile-label-size) !important;
    text-align: left !important;
  }

  html body.about-page .about-scroll { display: none !important; }

  html body.about-page .about-editorial {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    min-height: 0 !important;
    padding: 58px 18px 66px !important;
    border-top: 1px solid color-mix(in srgb, var(--about-ink) 18%, transparent) !important;
  }

  html body.about-page .about-editorial__eyebrow,
  html body.about-page .about-editorial__lead,
  html body.about-page .about-editorial__note {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
  }

  html body.about-page .about-editorial__eyebrow { font-size: var(--pg-mobile-label-size) !important; }
  html body.about-page .about-editorial__lead {
    max-width: none !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.1 !important;
  }

  html body.about-page .about-editorial__note {
    padding-top: 18px !important;
    border-top: 1px solid color-mix(in srgb, var(--about-ink) 22%, transparent) !important;
  }

  html body.about-page .about-editorial__note h2 {
    margin: 0 0 11px !important;
    font-size: var(--pg-mobile-label-size) !important;
  }

  html body.about-page .about-editorial__note p {
    max-width: none !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  html body.about-page .about-portrait {
    display: block !important;
    min-height: 0 !important;
    padding: 16px 18px 72px !important;
  }

  html body.about-page .about-portrait__figure {
    width: 100% !important;
    margin: 0 !important;
  }

  html body.about-page .about-portrait__figure img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    object-position: 50% 42% !important;
  }

  /* Preserve the complete supplied group photo, including all three people. */
  html body.about-page .about-portrait__figure img.about-portrait__group-photo {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  html body.about-page .about-portrait__figure figcaption {
    margin-top: 9px !important;
    font-size: var(--pg-mobile-label-size) !important;
  }
}