/* ══════════════════════════════════════════
   NOS ADAPTAMOS — MOBILE (≤779px)
   Blindado con #id + !important para ganarle a mobile.css / styles.css
   Desktop (≥780px) no se toca
══════════════════════════════════════════ */
@media (min-width: 780px) {
  .na-br-m {
    display: none;
  }
}

@media (max-width: 779px) {
  #na-wrapper .na-br-d {
    display: none !important;
  }

  #na-wrapper {
    position: relative !important;
    display: block !important;
    height: auto !important;
    /* animación automática: ya no hacen falta pasos de scroll */
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* top y height los fija el JS (inline + important) */
  #na-wrapper #na-stage {
    --na-cx: 52%;
    /* x de la cruz de la foto */
    --na-cy: 56%;
    /* y de la cruz de la foto */
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  #na-wrapper .na-vline,
  #na-wrapper .na-hline {
    display: none !important;
  }

  #na-wrapper .na-title {
    position: absolute !important;
    left: 5.6vw !important;
    top: 6.5vw !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 4.4vw !important;
    line-height: 1.2 !important;
    z-index: 6 !important;
  }

  /* El círculo ahora recorta justo el plato (sin borde blanco) y la cruz queda en --na-cx / --na-cy */
  #na-wrapper .na-circle {
    position: absolute !important;
    left: var(--na-cx) !important;
    top: var(--na-cy) !important;
    right: auto !important;
    bottom: auto !important;
    width: 103vw !important;
    height: 103vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    /* Sin compensaciones fijas: coincide siempre con --na-cx / --na-cy. */
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
  }

  #na-wrapper .na-circle img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0% !important;
    object-position: center 100% !important;
    translate: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    object-fit: cover !important;
    /* La cuadrícula de la foto no está al 50% del archivo. Desplazamos el
       recorte para que su división vertical coincida con --na-cx. */
    object-position: 94% center !important;
  }

  /* Cuadrados naranjas anclados a la cruz de la foto */
  #na-wrapper .na-quad {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    transition: opacity .7s ease !important;
    will-change: opacity;
    pointer-events: none;
    z-index: 12 !important;
  }

  #na-wrapper .na-quad.is-active {
    opacity: 1 !important;
  }

  #na-wrapper .na-quad--tr {
    /* PEQUEÑOS: arriba-derecha */
    left: var(--na-qx, var(--na-cx)) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    height: var(--na-qy, var(--na-cy)) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 10.5vw 4vw 0 4.6vw !important;
  }

  #na-wrapper .na-quad--br {
    /* MEDIANOS: abajo-derecha */
    left: var(--na-qx, var(--na-cx)) !important;
    right: 0 !important;
    top: var(--na-qy, var(--na-cy)) !important;
    bottom: 0 !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 4vw calc(22vw + env(safe-area-inset-bottom, 0px)) 4.6vw !important;
  }

  #na-wrapper .na-quad--bl {
    /* GRANDES: abajo-izquierda */
    left: 0 !important;
    right: calc(100% - var(--na-qx, var(--na-cx))) !important;
    top: var(--na-qy, var(--na-cy)) !important;
    bottom: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 7vw 4vw 0 4.4vw !important;
  }

  #na-wrapper .na-format-title {
    font-size: 4.4vw !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  #na-wrapper .na-format-desc {
    font-size: 3.6vw !important;
    line-height: 1.25 !important;
    margin: 2vw 0 0 !important;
  }

  /* el texto sube suavecito al aparecer */
  #na-wrapper .na-quad>* {
    transform: translateY(2.5vw);
    transition: transform .7s ease;
  }

  #na-wrapper .na-quad.is-active>* {
    transform: none;
  }
}

@media (max-width: 779px) and (prefers-reduced-motion: reduce) {

  #na-wrapper .na-quad,
  #na-wrapper .na-quad>* {
    transition: none !important;
  }
}