/*
 ANTARES MOBILE-18
 Hero responsive only.
 Desktop >= 861px remains unchanged.
*/

@media screen and (max-width:860px){

  /* Contenedor general */

  .hero {
    overflow:hidden !important;
    background:linear-gradient(
      180deg,
      #f8fbff 0%,
      #edf6ff 100%
    ) !important;
  }

  .hero .hero-inner {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    min-height:0 !important;
    max-height:none !important;
    gap:0 !important;
  }

  /* Textos */

  .hero .hero-copy {
    width:100% !important;
    padding:28px 0 14px !important;
    position:relative !important;
    z-index:3 !important;
  }

  .hero .hero-copy h1 {
    font-size:clamp(34px,9vw,48px) !important;
    line-height:1.09 !important;
  }

  .hero .hero-copy p {
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .hero .actions {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .hero .trust {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px 12px !important;
    margin-top:22px !important;
  }

  .hero .trust-item {
    max-width:none !important;
  }

  /* Composición visual independiente */

  .hero .hero-art.hero-art-10 {
    order:2 !important;
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:560px !important;
    height:390px !important;
    min-height:390px !important;
    margin:10px auto 8px !important;
    overflow:hidden !important;
    isolation:isolate !important;

    background-image:url(
      "/assets/antares-hero-escena-17.webp"
    ) !important;

    background-repeat:no-repeat !important;
    background-size:auto 100% !important;
    background-position:70% center !important;
    border-radius:20px !important;
  }

  /* El retrato ya forma parte de la escena.
     Evitar duplicarlo o recortarlo. */

  .hero .hero-art-10 .hero-human {
    display:none !important;
  }

  .hero .hero-art-10::before,
  .hero .hero-art-10::after {
    display:none !important;
  }

  /* Pantallas reales de software */

  .hero .hero-art-10 .hero-software {
    position:absolute !important;
    display:block !important;
    left:auto !important;
    overflow:hidden !important;
    border:3px solid #fff !important;
    border-radius:14px !important;
    background:white !important;

    box-shadow:0 10px 24px rgba(7,42,91,.18) !important;

    z-index:5 !important;
    animation:none !important;
    translate:none !important;
    transform:rotate(var(--twist,0deg)) !important;
  }

  .hero .hero-art-10 .hero-software img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top left !important;
    filter:none !important;
  }

  /* VYVA: arriba derecha */

  .hero .hero-art-10 .h-vyva {
    width:43% !important;
    height:105px !important;
    top:10px !important;
    right:4px !important;
    bottom:auto !important;
    --twist:3deg !important;
    z-index:4 !important;
  }

  /* LegalDesk: centro derecha */

  .hero .hero-art-10 .h-legaldesk {
    width:53% !important;
    height:142px !important;
    top:125px !important;
    right:3px !important;
    bottom:auto !important;
    --twist:-2deg !important;
    z-index:5 !important;
  }

  /* Tickets: inferior derecha */

  .hero .hero-art-10 .h-tickets {
    width:44% !important;
    height:101px !important;
    top:auto !important;
    right:9px !important;
    bottom:9px !important;
    --twist:2deg !important;
    z-index:6 !important;
  }

  .hero .hero-art-10 .card-caption {
    display:none !important;
  }
}

/* Celulares pequeños */

@media screen and (max-width:420px){

  .hero .hero-art.hero-art-10 {
    height:335px !important;
    min-height:335px !important;
  }

  .hero .hero-art-10 .h-vyva {
    height:88px !important;
    top:8px !important;
  }

  .hero .hero-art-10 .h-legaldesk {
    height:120px !important;
    top:106px !important;
  }

  .hero .hero-art-10 .h-tickets {
    height:84px !important;
    bottom:8px !important;
  }
}

/* Respeto a accesibilidad */

@media(prefers-reduced-motion:reduce){
  .hero .hero-software {
    animation:none !important;
    transition:none !important;
  }
}