/* ==========================================================================
   Landing — promoción de la app (hero)
   Se carga después de landing-refinements.css. Vidrio oscuro sobre el video
   del hero, QR sobre loseta blanca con marco de visor. En pantallas táctiles
   el QR no sirve (no se escanea la propia pantalla), así que se sustituye
   por el ícono de la app y el acceso directo a Google Play.
   ========================================================================== */

.hero-app {
  --app-ease: var(--refine-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --app-qr: 7.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 34rem;
  margin: 1.5rem auto 0;
  padding: 1.125rem 1.5rem 1.125rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
  animation: hero-app-in 0.9s var(--app-ease) 1.1s both;
}

/* QR: loseta blanca con zona de silencio y esquinas de visor. */
.hero-app__scan {
  position: relative;
  display: block;
  border-radius: 0.9rem;
  outline-offset: 0.5rem;
}

.hero-app__scan::before {
  --c: rgba(255, 255, 255, 0.85);
  --l: 1.1rem;
  --w: 2px;
  content: '';
  position: absolute;
  inset: -0.5rem;
  border-radius: 0.25rem;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
  transition: inset 420ms var(--app-ease), opacity 420ms ease;
}

.hero-app__qr {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--app-qr);
  aspect-ratio: 1;
  padding: 0.7rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  transition: transform 420ms var(--app-ease);
}

.hero-app__qr-code {
  display: block;
  width: 100%;
  height: 100%;
}

body .hero-left .hero-app__qr-logo {
  position: absolute;
  width: 22%;
  height: auto;
  margin: 0;
  padding: 2px;
  border-radius: 0.4rem;
  background: #fff;
  filter: grayscale(1) brightness(0.9);
}

.hero-app__beam {
  position: absolute;
  inset: 0 0 auto;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(61, 61, 61, 0), rgba(61, 61, 61, 0.14) 85%, rgba(61, 61, 61, 0.5));
  opacity: 0;
  animation: hero-app-beam 2.2s ease-in-out 2s 2;
}

.hero-app__scan:hover::before,
.hero-app__scan:focus-visible::before {
  inset: -0.3rem;
}

.hero-app__scan:hover .hero-app__qr,
.hero-app__scan:focus-visible .hero-app__qr {
  transform: scale(1.04);
}

.hero-app__scan:hover .hero-app__beam,
.hero-app__scan:focus-visible .hero-app__beam {
  animation: hero-app-beam-loop 1.8s ease-in-out infinite;
}

/* Texto */
.hero-app__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

body .hero-left .hero-app p {
  max-width: none;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  text-shadow: none;
}

body .hero-left .hero-app .hero-app__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

.hero-app__dot {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #fff;
}

.hero-app__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: hero-app-pulse 2.4s ease-out infinite;
}

.hero-app__title {
  margin: 0.3rem 0 0.25rem;
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

body .hero-left .hero-app .hero-app__hint {
  opacity: 0.82;
}

body .hero-left .hero-app .hero-app__hint--touch {
  display: none;
}

.hero-app__store {
  display: inline-block;
  margin-top: 0.85rem;
  border-radius: 0.6rem;
  outline-offset: 3px;
  transition: transform 260ms var(--app-ease), filter 260ms ease;
}

body .hero-left .hero-app__store img {
  display: block;
  width: auto;
  height: 2.75rem;
  max-width: 100%;
  margin: 0;
}

.hero-app__store:hover,
.hero-app__store:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

:is(.hero-app__scan, .hero-app__store):focus-visible {
  outline: 2px solid #fff;
}

/* Laptops de poca altura: el bloque no empuja los logos fuera del hero. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero-app {
    --app-qr: 6rem;
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 0.875rem 1.25rem 0.875rem 0.875rem;
  }

  body .hero-left .hero-app__store img {
    height: 2.4rem;
  }

  .hero-app__store {
    margin-top: 0.6rem;
  }

  body .hero-left .hero-logos img {
    height: 5.5rem;
  }

  body .hero-left p {
    margin-block: 0.5rem;
  }
}

/* Pantallas táctiles y móviles: ícono de app en lugar del QR. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .hero-app {
    --app-qr: 4rem;
    gap: 1rem;
    max-width: 30rem;
    padding: 1rem;
  }

  .hero-app__scan {
    pointer-events: none;
  }

  .hero-app__scan::before,
  .hero-app__qr-code,
  .hero-app__beam {
    display: none;
  }

  .hero-app__qr {
    padding: 0;
    border-radius: 1.1rem;
    background: #fff;
  }

  body .hero-left .hero-app__qr-logo {
    position: static;
    width: 72%;
    padding: 0;
    border-radius: 0.6rem;
  }

  body .hero-left .hero-app .hero-app__hint--scan {
    display: none;
  }

  body .hero-left .hero-app .hero-app__hint--touch {
    display: block;
  }
}

@media (max-width: 480px) {
  .hero-app {
    --app-qr: 3.25rem;
    align-items: start;
    gap: 0.875rem;
  }

  .hero-app__qr {
    border-radius: 0.85rem;
  }
}

@media (max-width: 380px) {
  .hero-app {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .hero-app__body {
    align-items: center;
  }

  body .hero-left .hero-app p {
    text-align: center;
  }
}

@keyframes hero-app-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-app-beam {
  0% { opacity: 0; transform: translateY(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(360%); }
}

@keyframes hero-app-beam-loop {
  0% { opacity: 0; transform: translateY(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(360%); }
}

@keyframes hero-app-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-app,
  .hero-app__beam,
  .hero-app__dot::after,
  .hero-app__scan:hover .hero-app__beam {
    animation: none;
  }

  .hero-app__qr,
  .hero-app__scan::before,
  .hero-app__store {
    transition: none;
  }
}