/* 2026-10-02 — Correcciones exclusivas de celular.
   No altera la presentación de escritorio. */
@media (max-width: 767px) {

  /* INICIO: encuadre móvil específico para evitar el centro gris del fondo.
     El canvas líquido se desactiva sólo en celular para que Safari/Chrome móvil
     siempre muestren la imagen aprobada. */
  body.native-home-flow .hero#inicio {
    background-image: url("../assets/hero-architecture-mobile.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  body.native-home-flow .hero#inicio .hero-liquid-canvas {
    display: none !important;
    opacity: 0 !important;
  }
  body.native-home-flow .hero#inicio .hero-shade {
    background:
      linear-gradient(180deg, rgba(4,31,64,.10) 0%, rgba(4,31,64,.02) 42%, rgba(4,31,64,.22) 100%) !important;
  }

  /* INICIO: la pirinola debe quedar visible incluso si el observer o el autoplay
     móvil tarda en activarse. El JPG es sólo respaldo visual mientras carga MP4. */
  body.native-home-flow .why-image {
    position: relative !important;
    overflow: hidden !important;
    background:
      #e9e2d8 url("../assets/pirinola-mobile-poster.jpg") center center / cover no-repeat !important;
  }
  body.native-home-flow .why-image.lf-scroll-item,
  body.native-home-flow .why-image.lf-scroll-item:not(.is-revealed) {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body.native-home-flow .why-image > video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
  }

  /* NOSOTROS — móvil: MISMA portada de escritorio, reencuadrada sin zoom exagerado.
     La imagen ocupa la franja superior y el título respira sobre navy para evitar
     el aspecto recortado/gris de Safari en formato vertical. */
  html body .about-hero.lf-reference-cover {
    position: relative !important;
    height: 326px !important;
    min-height: 326px !important;
    background: #041f40 !important;
    background-image: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }
  html body .about-hero.lf-reference-cover::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 190px !important;
    background-image: url("../assets/nosotros-hero-portada.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: auto 190px !important;
    background-position: left top !important;
    opacity: 1 !important;
  }
  html body .about-hero.lf-reference-cover::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(4,31,64,.44) 0%,
      rgba(4,31,64,.18) 32%,
      rgba(4,31,64,.10) 47%,
      rgba(4,31,64,.82) 60%,
      #041f40 72%,
      #041f40 100%
    ) !important;
  }
  html body .about-hero.lf-reference-cover h1 {
    z-index: 4 !important;
    left: 50% !important;
    right: auto !important;
    top: 226px !important;
    transform: translateX(-50%) !important;
    width: min(330px, calc(100% - 34px)) !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(35px, 10vw, 43px) !important;
    line-height: .98 !important;
    letter-spacing: -.018em !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
  html body .about-hero.lf-reference-cover .hero-ornament {
    z-index: 4 !important;
    top: 186px !important;
  }
  /* CASOS DE ÉXITO: la E estaba heredando -webkit-text-fill-color: transparent.
     Se le da su propio relleno metálico sólo en móvil para que la letra y el acento
     permanezcan visibles y del mismo tamaño que el resto del título. */
  body.cases-page .services-cover-hero h1 .lf-accented-e {
    color: #c9a84c !important;
    background-image: var(--lf-cover-gold) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font: inherit !important;
    font-size: 1em !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    overflow: visible !important;
  }
  body.cases-page .services-cover-hero h1 .lf-accented-e::after {
    display: block !important;
    opacity: 1 !important;
    background: #c9a84c !important;
  }
}


/* Video móvil: fallback táctil sólo si el navegador bloquea autoplay. */
@media (max-width: 767px) {
  body.native-home-flow .why-image .mobile-video-play-fallback {
    position:absolute !important;
    inset:50% auto auto 50% !important;
    z-index:4 !important;
    width:58px !important;
    height:58px !important;
    padding:0 !important;
    transform:translate(-50%,-50%) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:50% !important;
    background:rgba(4,31,64,.72) !important;
    color:#fff !important;
    display:grid !important;
    place-items:center !important;
    -webkit-backdrop-filter:blur(8px) !important;
    backdrop-filter:blur(8px) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
  }
  body.native-home-flow .why-image .mobile-video-play-fallback[hidden] { display:none !important; }
  body.native-home-flow .why-image .mobile-video-play-fallback span {
    font-size:20px !important;
    line-height:1 !important;
    transform:translateX(2px) !important;
  }

  /* SERVICIOS: título principal legible, completo y máximo en dos líneas. */
  html body.services-page .services-cover-hero.lf-reference-cover .services-cover-hero__inner {
    box-sizing:border-box !important;
    width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
    overflow:visible !important;
  }
  html body.services-page .services-cover-hero.lf-reference-cover h1 {
    width:min(330px, 92vw) !important;
    max-width:330px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 0 8px !important;
    font-size:clamp(38px, 10.8vw, 44px) !important;
    line-height:.98 !important;
    letter-spacing:-.018em !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-wrap:balance !important;
  }
}