.brand small{font-size:1em;font-weight:700}
.logo-trigger{top:102px;right:4vw;bottom:auto;filter:drop-shadow(0 0 18px #e3aa3e88)}
.logo-trigger::before{inset:9%;z-index:-1;border:0;background:#d6a6462e;filter:blur(22px);animation:logoGlow 2.2s ease-in-out infinite}
.logo-trigger img{animation:logoFloat 4s ease-in-out infinite}
.logo-trigger:hover img{transform:rotateY(360deg) scale(1.1);animation:none}
@keyframes logoGlow{50%{transform:scale(1.25);opacity:.35}}
@keyframes logoFloat{50%{transform:translateY(-8px)}}
.service-grid article{min-height:430px}
.service-grid h3{margin-top:150px}
.service-grid article:nth-child(6){background-image:linear-gradient(180deg,rgba(3,5,7,.18) 0%,rgba(3,4,5,.46) 48%,rgba(5,4,3,.96) 100%),url("assets/servicio-sauna.webp");background-size:cover;background-position:center 31%}
.service-grid article:nth-child(6):hover{background-image:linear-gradient(180deg,rgba(3,5,7,.08) 0%,rgba(3,4,5,.38) 48%,rgba(12,8,3,.94) 100%),url("assets/servicio-sauna.webp")}
.service-grid article:nth-child(6) .service-top span{color:rgba(240,204,120,.72)}
.service-grid article:nth-child(6) .service-top em,.service-grid article:nth-child(6) h3,.service-grid article:nth-child(6) p,.service-grid article:nth-child(6) a{text-shadow:0 2px 8px #000}
.service-grid article:nth-child(3){background-image:linear-gradient(180deg,rgba(4,4,4,.2) 0%,rgba(4,4,4,.46) 47%,rgba(5,4,3,.97) 100%),url("assets/servicio-futbol.webp");background-size:cover;background-position:center 22%}
.service-grid article:nth-child(3):hover{background-image:linear-gradient(180deg,rgba(4,4,4,.1) 0%,rgba(4,4,4,.38) 47%,rgba(12,8,3,.95) 100%),url("assets/servicio-futbol.webp")}
.service-grid article:nth-child(5){background-image:linear-gradient(180deg,rgba(4,3,2,.16) 0%,rgba(4,3,2,.42) 48%,rgba(5,4,3,.97) 100%),url("assets/servicio-masajes.webp");background-size:cover;background-position:center 28%}
.service-grid article:nth-child(5):hover{background-image:linear-gradient(180deg,rgba(4,3,2,.08) 0%,rgba(4,3,2,.34) 48%,rgba(12,8,3,.95) 100%),url("assets/servicio-masajes.webp")}
.service-grid article:nth-child(3) .service-top span,.service-grid article:nth-child(5) .service-top span{color:rgba(240,204,120,.72)}
.service-grid article:nth-child(3) .service-top em,.service-grid article:nth-child(3) h3,.service-grid article:nth-child(3) p,.service-grid article:nth-child(3) a,.service-grid article:nth-child(5) .service-top em,.service-grid article:nth-child(5) h3,.service-grid article:nth-child(5) p,.service-grid article:nth-child(5) a{text-shadow:0 2px 8px #000}
.service-grid article:nth-child(4){background-image:linear-gradient(180deg,rgba(7,10,12,.42) 0%,rgba(6,8,10,.6) 47%,rgba(5,5,5,.98) 100%),url("assets/servicio-medico.webp");background-size:cover;background-position:center 29%}
.service-grid article:nth-child(4):hover{background-image:linear-gradient(180deg,rgba(7,10,12,.32) 0%,rgba(6,8,10,.52) 47%,rgba(7,7,6,.96) 100%),url("assets/servicio-medico.webp")}
.service-grid article:nth-child(4) .service-top span{color:rgba(240,204,120,.76)}
.service-grid article:nth-child(4) .service-top em,.service-grid article:nth-child(4) h3,.service-grid article:nth-child(4) p,.service-grid article:nth-child(4) a{text-shadow:0 2px 9px #000}
.location{display:grid;grid-template-columns:.72fr 1.28fr;min-height:560px;background:#0a0908;border-top:1px solid #2f291f}
.location-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:70px clamp(22px,7vw,105px)}
.location h2{margin:0;font-family:var(--font-display);font-size:clamp(3.4rem,6vw,6.4rem);font-weight:900;line-height:.9}
.location-copy>p:not(.kicker){color:#aaa195;font-size:1.05rem;margin:22px 0}
.map-wrap{min-height:560px;filter:grayscale(1) sepia(.25) contrast(1.15);border-left:1px solid #d6a64644;transition:.4s}
.map-wrap iframe{display:block;width:100%;height:100%;min-height:560px;border:0}
.location:hover .map-wrap{filter:grayscale(.45) sepia(.15)}
.contact .instagram{display:flex;align-items:center;gap:9px;color:var(--gold2);font-size:1.4rem}
.contact .instagram svg{width:30px;height:30px;fill:currentColor}
footer{grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;column-gap:clamp(35px,6vw,110px)}
footer .footer-logo{width:120px;justify-self:start}
footer>h2{justify-self:center}
footer .contact{align-items:flex-start;min-width:260px;justify-self:end}
footer>small{grid-column:1/-1;width:100%;justify-self:stretch}
.modal{overflow-y:auto;overscroll-behavior:contain;align-items:start}
.modal-card{max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:contain;margin:auto;scrollbar-width:thin;scrollbar-color:var(--gold) #17120b}
.modal-card::-webkit-scrollbar{width:6px}
.modal-card::-webkit-scrollbar-track{background:#17120b}
.modal-card::-webkit-scrollbar-thumb{background:var(--gold);border-radius:10px}
@media(max-width:850px){
 .service-grid article{min-height:360px}
 .service-grid h3{margin-top:130px}
 .location{grid-template-columns:1fr}
 .location-copy{padding-block:70px}
 .map-wrap,.map-wrap iframe{min-height:420px}
 .map-wrap{border-left:0;border-top:1px solid #d6a64644}
 footer{grid-template-columns:1fr;justify-content:stretch;column-gap:0}
 footer .footer-logo{width:70px;justify-self:start}
 footer>h2{justify-self:start;margin-top:20px}
 footer .contact{min-width:0}
 .modal{padding:10px}
 .modal-card{max-height:calc(100svh - 20px);padding-top:26px;padding-bottom:26px}
 .modal-card>img{width:82px}
 .modal-card .kicker{margin-bottom:10px}
 .modal-card h2{font-size:clamp(2rem,11vw,3.25rem)}
 .modal-card>p:not(.kicker){margin:12px auto;font-size:.9rem}
 .modal-actions{margin:16px 0 12px}
}

.service-grid article:nth-child(1){background-image:linear-gradient(180deg,rgba(4,4,4,.18) 0%,rgba(4,4,4,.46) 47%,rgba(5,4,3,.97) 100%),url("assets/servicio-personalizados.webp");background-size:cover;background-position:center 22%}.service-grid article:nth-child(1):hover{background-image:linear-gradient(180deg,rgba(4,4,4,.08) 0%,rgba(4,4,4,.34) 47%,rgba(5,4,3,.94) 100%),url("assets/servicio-personalizados.webp")}.service-grid article:nth-child(1) .service-top span{color:rgba(240,204,120,.72)}.service-grid article:nth-child(1) h3,.service-grid article:nth-child(1) p,.service-grid article:nth-child(1) .service-top{text-shadow:0 2px 8px #000}
.service-grid article:nth-child(2){background-image:linear-gradient(180deg,rgba(4,4,4,.2) 0%,rgba(4,4,4,.47) 47%,rgba(5,4,3,.97) 100%),url("assets/servicio-deportiva.webp");background-size:cover;background-position:center 23%}.service-grid article:nth-child(2):hover{background-image:linear-gradient(180deg,rgba(4,4,4,.1) 0%,rgba(4,4,4,.36) 47%,rgba(5,4,3,.94) 100%),url("assets/servicio-deportiva.webp")}.service-grid article:nth-child(2) .service-top span{color:rgba(240,204,120,.72)}.service-grid article:nth-child(2) h3,.service-grid article:nth-child(2) p,.service-grid article:nth-child(2) .service-top,.service-grid article:nth-child(2) a{text-shadow:0 2px 8px #000}
@media(max-width:850px){
 .logo-trigger{position:fixed;top:auto;right:12px;bottom:16px;width:68px;z-index:40;padding:0;filter:drop-shadow(0 0 13px #e3aa3e99)}
 .logo-trigger::before{inset:8%;filter:blur(14px)}
 .logo-trigger img{animation:logoFloatMobile 3.5s ease-in-out infinite}
 @keyframes logoFloatMobile{50%{transform:translateY(-5px)}}
}

/* =========================================================
   LOGO INTERACTIVO: POSICIÓN VINCULADA AL SCROLL
   Este bloque debe permanecer al final del archivo.
   ========================================================= */

.logo-trigger {
  --logo-scroll-y: 0px;
  position: fixed !important;
  top: 102px !important;
  right: clamp(18px, 4vw, 64px) !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 9999 !important;
  transform: translate3d(0, var(--logo-scroll-y), 0) !important;
  will-change: transform;
  transition: transform 120ms linear;
}

@media screen and (max-width: 850px),
       screen and (max-device-width: 850px) {
  body main .hero > .logo-trigger {
    --logo-scroll-y: 0px;
    position: fixed !important;
    top: 82px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    width: 88px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
    transform: translate3d(0, var(--logo-scroll-y), 0) !important;
    will-change: transform;
    transition: transform 120ms linear;
  }

  body main .hero > .logo-trigger img {
    display: block !important;
    width: 88px !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-trigger,
  body main .hero > .logo-trigger {
    transition: none !important;
  }
}
[hidden]{display:none!important}

/* =========================================================
   CORRECCIÓN DEFINITIVA FORZA CEAFID
   IMAGEN PRINCIPAL + DISEÑO MÓVIL
   ========================================================= */

.hero-art {
  background-image: url("assets/hero-forza.webp") !important;
}


/* =========================================================
   VERSIÓN PARA CELULARES
   ========================================================= */

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

  /* Evita el espacio enorme debajo de "Descubrí más" */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 92px 18px 42px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  /* Personaje principal */
  .hero-art {
    position: absolute !important;
    inset: 0 !important;
    background-image: url("assets/hero-forza.webp") !important;
    background-repeat: no-repeat !important;
    background-position: 72% 8% !important;
    background-size: auto 68% !important;
    opacity: 0.68 !important;
  }

  /* Contenido principal */
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 265px 0 0 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
    line-height: 0.9 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .lead {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    margin-top: 24px !important;
  }

  /* Descubrí más queda cerca del contenido */
  .scroll {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 34px auto 0 !important;
  }

  /* Logo interactivo acompañando el desplazamiento */
  .logo-trigger {
    position: fixed !important;
    top: auto !important;
    right: 14px !important;
    bottom: 18px !important;
    width: 72px !important;
    z-index: 80 !important;
    margin: 0 !important;
  }

  .logo-trigger::before {
    inset: -5px !important;
  }

  .logo-trigger img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .logo-trigger span,
  .logo-trigger small {
    display: none !important;
  }

  /* Sección de las seis áreas */
  .services {
    padding: 70px 16px !important;
  }

  .section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .section-head > div {
    max-width: 100% !important;
  }

  /* Las seis opciones quedan una debajo de la otra */
  .service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .service-grid article {
    width: 100% !important;
    min-height: 300px !important;
  }
}


/* =========================================================
   CELULARES ANGOSTOS
   ========================================================= */

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

  .hero {
    padding: 82px 16px 36px !important;
  }

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

  .hero-art {
    background-position: 68% 5% !important;
    background-size: auto 61% !important;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.9rem) !important;
  }

  .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    padding: 0 10px !important;
    font-size: 0.68rem !important;
  }

  .scroll {
    margin-top: 28px !important;
  }

  .service-grid {
    grid-template-columns: 1fr !important;
  }

  .service-grid article {
    min-height: 290px !important;
  }
}
/* =========================================================
   CORRECCIÓN MÓVIL DEFINITIVA
   FORZA CEAFID
   ========================================================= */

@media screen and (max-width: 1100px),
       screen and (max-device-width: 1100px) {

  /* ENCABEZADO */

  .nav {
    height: 66px !important;
    padding: 0 16px !important;
  }

  .navlinks {
    display: none !important;
  }

  .navcta {
    margin-left: auto !important;
    padding: 9px 12px !important;
    font-size: 0.65rem !important;
  }

  .brand img {
    width: 40px !important;
    height: 40px !important;
  }


  /* PORTADA: ELIMINA EL ESPACIO NEGRO ENORME */

  .hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 66px 18px 36px !important;
    overflow: hidden !important;
  }

  .hero-art {
    position: absolute !important;
    inset: 0 !important;

    background-image:
      url("/assets/hero-forza.webp?v=6") !important;

    background-repeat: no-repeat !important;
    background-position: 72% 45px !important;
    background-size: auto 610px !important;

    opacity: 0.72 !important;
  }

  .hero::before {
    background:
      linear-gradient(
        0deg,
        #080807 0%,
        #080807ed 25%,
        #08080788 55%,
        #08080730 80%,
        #080807 100%
      ) !important;
  }

  .hero-copy {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 440px 0 0 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(2.7rem, 11.5vw, 4.7rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .lead {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .hero-actions .button {
    width: auto !important;
  }

  .hero-metrics {
    display: none !important;
  }


  /* DESCUBRÍ MÁS SIN ESPACIO VACÍO */

  .scroll {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    margin: 34px auto 0 !important;

    transform: none !important;
  }


  /* LOGO INTERACTIVO:
     QUEDA ACOMPAÑANDO EL SCROLL ABAJO A LA DERECHA */

  .logo-trigger {
    position: fixed !important;

    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: 18px !important;

    width: 68px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 9999 !important;
  }

  .logo-trigger::before {
    inset: -5px !important;
  }

  .logo-trigger img {
    display: block !important;
    width: 68px !important;
    height: auto !important;

    filter:
      drop-shadow(0 0 9px rgba(214, 166, 70, 0.65))
      drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8)) !important;
  }

  .logo-trigger span,
  .logo-trigger small {
    display: none !important;
  }


  /* SECCIÓN DE SERVICIOS */

  .services {
    width: 100% !important;
    padding: 65px 16px !important;
  }

  .section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 36px !important;
  }

  .section-head > p,
  .section-head h2,
  .section-head > div {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-head h2 {
    font-size: clamp(2.8rem, 11vw, 4.7rem) !important;
  }

  .section-head > div {
    padding-left: 16px !important;
  }


  /* LOS SEIS BLOQUES, UNO DEBAJO DEL OTRO */

  .service-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .service-grid article {
    display: block !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 330px !important;
  }


  /* MÉTODO */

  .method {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 75px 20px !important;
  }

  .method-line {
    display: none !important;
  }

  .method-quote {
    margin-top: 70px !important;
  }


  /* BANDA DE LA APP */

  .appband {
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    gap: 20px !important;
    padding: 38px 20px !important;
  }

  .appband img {
    width: 70px !important;
  }

  .appband .button {
    grid-column: 1 / -1 !important;
  }


  /* UBICACIÓN */

  .location {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .location-copy {
    width: 100% !important;
    padding: 65px 20px !important;
  }

  .map-wrap {
    width: 100% !important;
    min-height: 380px !important;
  }

  .map-wrap iframe {
    width: 100% !important;
    height: 380px !important;
  }


  /* PIE DE PÁGINA */

  footer {
    display: grid !important;
    grid-template-columns: 75px 1fr !important;
    gap: 22px !important;
    padding: 65px 20px 28px !important;
  }

  footer .footer-logo {
    width: 75px !important;
  }

  footer h2 {
    font-size: clamp(2.7rem, 11vw, 4rem) !important;
  }

  footer .contact {
    grid-column: 1 / -1 !important;
    align-items: flex-start !important;
    margin-top: 22px !important;
  }

  footer > small {
    grid-column: 1 / -1 !important;
  }
}


/* CELULARES MÁS ANGOSTOS */

@media screen and (max-width: 480px),
       screen and (max-device-width: 480px) {

  .brand span {
    display: none !important;
  }

  .hero-art {
    background-position: 66% 42px !important;
    background-size: auto 540px !important;
  }

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

  .hero h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.8rem) !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 0.68rem !important;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .service-grid article {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 315px !important;
  }
}
/* =========================================================
   AJUSTE FINAL PORTADA Y LOGO MÓVIL
   ========================================================= */

@media screen and (max-width: 850px),
       screen and (max-device-width: 850px) {

  /* Portada más compacta: texto integrado sobre la imagen */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 66px 18px 34px !important;
  }

  .hero-art {
    background-image: url("/assets/hero-forza.webp?v=7") !important;
    background-position: 68% 15px !important;
    background-size: auto 560px !important;
    opacity: 0.75 !important;
  }

  /* Sube el texto y elimina el espacio innecesario */
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 245px !important;
    margin: 0 !important;
  }

  /* Oscurece detrás del texto para conservar legibilidad */
  .hero::before {
    background:
      linear-gradient(
        0deg,
        #080807 0%,
        #080807f5 21%,
        #080807c9 42%,
        #08080742 72%,
        #08080710 100%
      ) !important;
  }

  /* Logo interactivo grande, arriba a la derecha y acompañando el scroll */
  .logo-trigger {
    position: fixed !important;
    top: 82px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;

    width: 88px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 9999 !important;
    transform: none !important;
  }

  .logo-trigger img {
    display: block !important;
    width: 88px !important;
    height: auto !important;

    filter:
      drop-shadow(0 0 12px rgba(214, 166, 70, 0.7))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85)) !important;
  }

  .logo-trigger::before {
    inset: -6px !important;
  }

  .logo-trigger span,
  .logo-trigger small {
    display: none !important;
  }
}


/* Celulares angostos */

@media screen and (max-width: 480px),
       screen and (max-device-width: 480px) {

  .hero-art {
    background-position: 66% 10px !important;
    background-size: auto 520px !important;
  }

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

  .logo-trigger {
    top: 78px !important;
    right: 10px !important;
    width: 82px !important;
  }

  .logo-trigger img {
    width: 82px !important;
  }
}
/* =========================================================
   PORTADA DE COMPUTADORA:
   IMAGEN MÁS GRANDE Y SIN VELO GENERAL
   ========================================================= */

@media screen and (min-width: 1101px) {

  .hero-art {
    background-image: url("/assets/hero-forza.webp?v=10") !important;
    background-repeat: no-repeat !important;

    /* La imagen ocupa toda la portada */
    background-size: cover !important;
    background-position: center center !important;

    /* Elimina el aspecto apagado */
    filter: none !important;
    opacity: 1 !important;
  }

  /* Oscurece únicamente la zona izquierda donde está el texto */
  .hero::before {
    background:
      linear-gradient(
        90deg,
        #080807 0%,
        rgba(8, 8, 7, 0.98) 25%,
        rgba(8, 8, 7, 0.82) 39%,
        rgba(8, 8, 7, 0.28) 53%,
        transparent 68%
      ),
      linear-gradient(
        0deg,
        rgba(8, 8, 7, 0.72) 0%,
        transparent 20%
      ) !important;
  }
}
/* =========================================================
   AJUSTE DE ENCUADRE DEL FONDO EN COMPUTADORA
   ========================================================= */

@media screen and (min-width: 1101px) {

  .hero-art {
    /* La imagen comienza debajo del encabezado */
    top: 78px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    /* Conserva la parte superior y derecha de la imagen */
    background-position: right top !important;
    background-size: cover !important;

    filter: none !important;
    opacity: 1 !important;
  }
}
/* =========================================================
   IMAGEN DEFINITIVA PARA CELULAR
   ========================================================= */

@media screen and (max-width: 850px),
       screen and (max-device-width: 850px) {

  .hero {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 66px 18px 38px !important;
    overflow: hidden !important;
  }

  .hero-art {
    position: absolute !important;
    top: 66px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    background-image:
      url("/assets/hero-forza-mobile.webp?v=12") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;

    filter: none !important;
    opacity: 1 !important;
  }

  /* El texto comienza sobre la parte oscura de la imagen */
  .hero-copy {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 390px !important;
    margin: 0 !important;
  }

  /* Solo oscurece suavemente la zona inferior */
  .hero::before {
    background:
      linear-gradient(
        0deg,
        #080807 0%,
        rgba(8, 8, 7, 0.96) 32%,
        rgba(8, 8, 7, 0.58) 50%,
        transparent 70%
      ) !important;
  }

  /* Logo flotante visible, sin tapar la cara */
  .logo-trigger {
    position: fixed !important;
    top: 82px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    width: 82px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 9999 !important;
  }

  .logo-trigger img {
    display: block !important;
    width: 82px !important;
    height: auto !important;

    filter:
      drop-shadow(0 0 12px rgba(214, 166, 70, 0.7))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)) !important;
  }

  .logo-trigger span,
  .logo-trigger small {
    display: none !important;
  }
}
/* =========================================================
   CORRECCIÓN FINAL DEL LOGO INTERACTIVO EN CELULAR
   Acompaña el scroll y no modifica la versión de computadora
   ========================================================= */

@media screen and (max-width: 850px),
       screen and (max-device-width: 850px) {

  .logo-trigger {
    position: fixed !important;

    /* Esquina superior izquierda de la portada */
    top: 82px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;

    width: 88px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 9999 !important;
    transform: translate3d(0, var(--logo-scroll-y), 0) !important;
    will-change: transform !important;
    transition: transform 120ms linear !important;
  }

  .logo-trigger img {
    display: block !important;
    width: 88px !important;
    height: auto !important;

    filter:
      drop-shadow(0 0 12px rgba(214, 166, 70, 0.7))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)) !important;
  }

  .logo-trigger::before {
    inset: -6px !important;
  }

  .logo-trigger span,
  .logo-trigger small {
    display: none !important;
  }
}