/* APPTIVATE_R15E_MOBILE_ABRIL */
/* SOLO MOVIL / RESPONSIVE */
/* ESCRITORIO INTACTO */

@media (max-width: 980px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Si la portada unificada usa el showcase de Abril */
  .apptiva-r9-showcase {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  /* Si sigue usando la estructura experiencia clásica */
  .experience-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  /* El bloque inicial ocupa todo el ancho */
  .hero-inner,
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Abril pasa a bloque independiente debajo */
  .apptiva-r9-showcase .orbit-stage,
  .apptiva-r9-showcase .guide-panel,
  .experience-layout .orbit-stage,
  .experience-layout .guide-panel {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .apptiva-r9-showcase .orbit-stage,
  .experience-layout .orbit-stage {
    order: 2 !important;
    height: 500px !important;
  }

  .apptiva-r9-showcase .guide-panel,
  .experience-layout .guide-panel {
    order: 3 !important;
    min-height: unset !important;
  }

  /* Evitar sensación de mezcla lateral con el texto inicial */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 28px !important;
  }

  .hero-inner {
    min-height: auto !important;
    display: block !important;
  }

  .hero-copy {
    padding-top: 42px !important;
  }

  .scroll-mark,
  .hero-number,
  .hero-side-label {
    display: none !important;
  }

  .experience {
    padding-top: 28px !important;
  }

  .section-heading-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
  }

  .section-intro {
    max-width: none !important;
  }

  /* El panel de Abril conserva su estructura pero a ancho móvil */
  .guide-panel {
    padding: 26px !important;
    border-radius: 24px !important;
  }

  .guide-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .guide-actions .btn,
  .guide-actions button {
    width: 100% !important;
  }
}

@media (max-width: 730px) {
  .shell {
    width: calc(100% - 32px) !important;
  }

  .hero-copy {
    padding-top: 34px !important;
  }

  .apptiva-r9-showcase .orbit-stage,
  .experience-layout .orbit-stage {
    max-width: 380px !important;
    height: 470px !important;
  }

  .apptiva-r9-showcase .guide-panel,
  .experience-layout .guide-panel {
    max-width: 380px !important;
  }

  .avatar-core {
    width: 190px !important;
    height: 274px !important;
    top: 50% !important;
  }

  .avatar-halo {
    inset: -13px -13px -5px !important;
  }

  .avatar-plate {
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 9px !important;
    padding: 9px 12px !important;
  }

  .avatar-plate small {
    font-size: 7px !important;
  }

  .orbit-node {
    width: 79px !important;
    height: 79px !important;
    min-width: 79px !important;
    min-height: 79px !important;
    font-size: 9px !important;
    gap: 2px !important;
    padding: 5px !important;
  }

  .node-icon {
    font-size: 22px !important;
  }

  .node-commerce {
    left: 33% !important;
    top: 0 !important;
    width: 94px !important;
    height: 94px !important;
  }

  .node-engineering {
    top: 19% !important;
    left: 0 !important;
  }

  .node-hospitality {
    top: 19% !important;
    right: 0 !important;
    width: 89px !important;
    height: 89px !important;
  }

  .node-health {
    top: 59% !important;
    right: 1% !important;
  }

  .node-booking {
    bottom: 0 !important;
    left: 49% !important;
  }

  .node-creative {
    left: 0 !important;
    bottom: 13% !important;
    width: 92px !important;
    height: 92px !important;
  }

  .orbit-line-one {
    width: 96% !important;
    height: 340px !important;
  }

  .orbit-line-two {
    width: 84% !important;
    height: 370px !important;
  }

  .orbit-line-three {
    width: 76% !important;
    height: 410px !important;
  }
}

@media (max-width: 410px) {
  .apptiva-r9-showcase .orbit-stage,
  .experience-layout .orbit-stage {
    max-width: 340px !important;
    height: 440px !important;
  }

  .guide-panel {
    padding: 24px !important;
  }

  .orbit-node {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    font-size: 8px !important;
  }

  .node-commerce {
    width: 80px !important;
    height: 80px !important;
  }

  .node-hospitality {
    width: 77px !important;
    height: 77px !important;
  }

  .node-creative {
    width: 83px !important;
    height: 83px !important;
  }

  .orbit-line-one {
    height: 270px !important;
  }

  .orbit-line-two {
    height: 300px !important;
  }

  .orbit-line-three {
    height: 365px !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
  }
}


/* APPTIVATE_R15F_MOBILE_CTA_AFTER_ABRIL */
@media (max-width: 980px){
  .apptivate-mobile-cta-after-abril{
    width: 100%;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
  }
}