/* ==================================================
   VARIABLES Y CONFIGURACIÓN GENERAL
================================================== */

:root {
  --white: #ffffff;
  --blue-dark: #00106d;
  --blue-primary: #001b91;
  --blue-light: #00aeef;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: var(--white);
  background: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

.is-loading {
  opacity: 0;
}


/* ==================================================
   VERSIÓN PARA COMPUTADORAS
================================================== */

.desktop-page {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;
  padding: 30px;

  overflow: hidden;

  color: #051662;

  background:
    radial-gradient(
      circle at 20% 90%,
      rgba(0, 174, 239, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(0, 51, 170, 0.12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f8fbff,
      #edf3ff
    );
}

.desktop-message {
  position: relative;
  z-index: 3;

  width: min(100%, 520px);
  padding: 44px 54px 50px;

  border: 1px solid rgba(4, 41, 145, 0.1);
  border-radius: 34px;

  background: rgba(255, 255, 255, 0.9);

  box-shadow:
    0 28px 70px
    rgba(0, 37, 126, 0.13);

  text-align: center;

  animation:
    desktopEntrance 0.7s
    ease both;
}

.desktop-message > img {
  display: block;

  width: 118px;
  height: 118px;
  margin: 0 auto;

  object-fit: contain;
}

.desktop-message > p {
  margin: 24px 0 8px;

  color: #1686d4;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.desktop-message h1 {
  margin: 0 0 13px;

  color: #051662;

  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.8px;
}

.desktop-message > span {
  display: block;

  color: #5d6685;

  font-size: 15px;
  line-height: 1.6;
}

.desktop-phone {
  position: relative;

  width: 58px;
  height: 90px;
  margin: 16px auto 0;

  border: 3px solid #081c72;
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 12px 25px
    rgba(4, 39, 135, 0.14);
}

.desktop-phone::before {
  content: "";

  position: absolute;
  top: 6px;
  left: 19px;

  width: 15px;
  height: 3px;

  border-radius: 8px;
  background: #081c72;
}

.desktop-phone::after {
  content: "";

  position: absolute;
  bottom: 5px;
  left: 24px;

  width: 5px;
  height: 5px;

  border: 1px solid #081c72;
  border-radius: 50%;
}

.desktop-phone i {
  position: absolute;
  inset: 13px 5px;

  border-radius: 5px;

  background:
    linear-gradient(
      160deg,
      #00aeef,
      #092aa7 60%,
      #061367
    );
}

.desktop-phone span {
  position: absolute;
  top: 15px;
  right: -10px;

  width: 18px;
  height: 18px;

  border-radius: 50%;
  background: #09aeea;
}

.desktop-orb {
  position: absolute;
  border-radius: 50%;
}

.orb-a {
  bottom: -140px;
  left: -110px;

  width: 330px;
  height: 330px;

  opacity: 0.15;

  background:
    linear-gradient(
      145deg,
      #0fa7e8,
      #09279e
    );
}

.orb-b {
  top: -40px;
  right: -55px;

  width: 190px;
  height: 190px;

  border:
    32px solid
    rgba(4, 75, 188, 0.08);
}


/* ==================================================
   PÁGINA MÓVIL
================================================== */

.mobile-page {
  position: relative;

  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;

  overflow: hidden;

  background: #ffffff;

  transition: opacity 0.2s ease;
}


/* ==================================================
   PARTE SUPERIOR
================================================== */

.top-scene {
  position: relative;
  z-index: 5;

  width: 100%;
  height: 100%;

  overflow: visible;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 88%,
      #f3f7ff 100%
    );
}

/*
   El logo independiente permanece oculto.
*/

.main-logo {
  display: none !important;
}


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

.phones-stage {
  position: absolute;
  z-index: 20;

  top: max(
    18px,
    env(safe-area-inset-top)
  );

  right: 0;
  bottom: -26px;
  left: 50%;

  width: min(92vw, 440px);
  height: auto;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  transform: translateX(-50%);

  pointer-events: none;

  animation:
    phonesEntrance 0.9s
    cubic-bezier(0.16, 0.84, 0.24, 1)
    both;
}

.phones-float {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  animation:
    phonesFloating 5.5s 1s
    ease-in-out infinite;
}

.phones-stage img {
  display: block;

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center bottom;

  filter:
    drop-shadow(
      0 17px 20px
      rgba(0, 20, 100, 0.18)
    );
}


/* ==================================================
   CÍRCULOS DECORATIVOS
================================================== */

.circle,
.circle-ring {
  position: absolute;
  z-index: 2;

  border-radius: 50%;

  pointer-events: none;
}

.circle {
  background:
    linear-gradient(
      145deg,
      #1228a9,
      #06a6ee
    );

  box-shadow:
    0 14px 28px
    rgba(0, 54, 172, 0.18);
}

.circle-one {
  top: 27%;
  left: -42px;

  width: 100px;
  height: 100px;

  animation:
    circleMoveOne 7s
    ease-in-out infinite;
}

.circle-two {
  top: 31%;
  right: 7%;

  width: 34px;
  height: 34px;

  background:
    linear-gradient(
      145deg,
      #08b8f3,
      #1238c8
    );

  animation:
    circleMoveTwo 5s
    ease-in-out infinite;
}

.circle-three {
  top: 54%;
  right: -32px;

  width: 72px;
  height: 72px;

  background:
    linear-gradient(
      145deg,
      #061783,
      #0988e4
    );

  animation:
    circleMoveOne 6.2s 0.7s
    ease-in-out infinite;
}

.circle-four {
  top: 63%;
  left: 8%;

  width: 24px;
  height: 24px;

  background: #00aeef;

  animation:
    circleMoveTwo 4.8s 0.4s
    ease-in-out infinite;
}

.circle-five {
  top: 73%;
  right: 14%;

  width: 14px;
  height: 14px;

  background: #1735c1;

  box-shadow:
    0 0 0 7px
    rgba(0, 174, 239, 0.09);

  animation:
    circleMoveOne 4.2s
    ease-in-out infinite;
}

.circle-ring {
  border:
    2px solid
    rgba(0, 76, 189, 0.14);
}

.ring-one {
  top: 13%;
  right: -88px;

  width: 148px;
  height: 148px;
}

.ring-two {
  top: 65%;
  left: -63px;

  width: 110px;
  height: 110px;

  border-color:
    rgba(0, 174, 239, 0.17);
}


/* ==================================================
   FONDO INFERIOR
================================================== */

.blue-panel {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;

  padding:
    105px 16px
    calc(18px + env(safe-area-inset-bottom));

  overflow: hidden;

  color: #ffffff;
  text-align: center;



  background-image:
    linear-gradient(
      180deg,
      rgba(0, 20, 120, 0.02),
      rgba(0, 8, 80, 0.16)
    ),
    url("assets/fondo_down.png?v=20260815-12");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.blue-panel::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 8, 85, 0.08) 45%,
      rgba(0, 5, 65, 0.15) 100%
    );

  pointer-events: none;
}


/* ==================================================
   CONTENIDO INFERIOR
================================================== */

.blue-content {
  position: relative;
  z-index: 6;

  width: 100%;
  max-width: 440px;
  margin: 0 auto;

  transform: translateY(2px);

  animation:
    contentEntrance 0.8s 0.45s
    ease both;
}


/* ==================================================
   TEXTO
================================================== */

.lead {
  margin: 0 auto 8px;

  color: #ffffff;

  font-size: clamp(13px, 3.8vw, 17px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;

  text-shadow:
    0 2px 5px
    rgba(0, 5, 60, 0.9),
    0 0 12px
    rgba(0, 5, 60, 0.65);
}

.blue-content h1 {
  margin: 0 0 15px;

  color: #ffffff;

  font-size: clamp(22px, 6vw, 29px);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;

  text-shadow:
    0 2px 6px
    rgba(0, 5, 60, 0.9),
    0 0 14px
    rgba(0, 5, 60, 0.65);
}


/* ==================================================
   BOTONES DE LAS TIENDAS
================================================== */

.store-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  width: 100%;
  gap: 9px;
}

.store-row a {
  display: block;

  flex: 0 1 180px;

  width: calc(50% - 5px);
  max-width: 180px;
  margin: 0;
  padding: 0;

  border-radius: 7px;

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.store-row a:hover,
.store-row a:active {
  transform:
    translateY(-2px)
    scale(1.015);

  filter:
    drop-shadow(
      0 7px 10px
      rgba(0, 0, 0, 0.2)
    );
}

.store-row a:focus-visible {
  outline: 3px solid #22c5ff;
  outline-offset: 3px;
}

.store-row img {
  display: block;

  width: 100%;
  height: auto;
  margin: 0;

  object-fit: contain;
}


/* ==================================================
   MÓVILES: PANTALLA FIJA SIN SCROLL
================================================== */

@media (max-width: 820px) {

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    overscroll-behavior: none;

    background: #ffffff;
  }

  body {
    position: fixed;
    inset: 0;
  }

  .desktop-page {
    display: none !important;
  }

  .mobile-page {
    position: fixed;
    inset: 0;

    display: grid;
    grid-template-rows: 58% 42%;

    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;

    overflow: hidden;

    background: #ffffff;
    box-shadow: none;
  }

  .top-scene {
    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: visible;
  }

  .blue-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}


/* ==================================================
   IPHONES PEQUEÑOS
================================================== */

@media (max-width: 390px) {

  .mobile-page {
    grid-template-rows: 57% 43%;
  }

  .phones-stage {
    top: max(
      14px,
      env(safe-area-inset-top)
    );

    bottom: -20px;

    width: 94vw;
  }

  .blue-panel {
    padding:
      92px 13px
      calc(14px + env(safe-area-inset-bottom));
  }

  .lead {
    margin-bottom: 6px;
    font-size: 13px;
  }

  .blue-content h1 {
    margin-bottom: 12px;
    font-size: 22px;
  }

  .store-row {
    gap: 7px;
  }

  .store-row a {
    width: calc(50% - 4px);
  }
}


/* ==================================================
   TELÉFONOS CON POCA ALTURA
================================================== */

@media (max-height: 700px) and (max-width: 820px) {

  .mobile-page {
    grid-template-rows: 56% 44%;
  }

  .phones-stage {
    top: 10px;
    bottom: -15px;

    width: min(86vw, 390px);
  }

  .blue-panel {
    padding:
      70px 13px
      calc(10px + env(safe-area-inset-bottom));
  }

  .lead {
    margin-bottom: 5px;

    font-size: 12px;
    line-height: 1.25;
  }

  .blue-content h1 {
    margin-bottom: 9px;
    font-size: 20px;
  }

  .store-row a {
    max-width: 155px;
  }
}


/* ==================================================
   ANIMACIONES
================================================== */

@keyframes phonesEntrance {

  from {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(65px)
      scale(0.94);
  }

  to {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }
}

@keyframes phonesFloating {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes contentEntrance {

  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes circleMoveOne {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(8px, -11px);
  }
}

@keyframes circleMoveTwo {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-7px, 9px);
  }
}

@keyframes desktopEntrance {

  from {
    opacity: 0;

    transform:
      translateY(18px)
      scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* ==================================================
   ACCESIBILIDAD
================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}