:root{
  --purple:#8047fe;
  --text:#FFFFFF;

  /* HEADER */
  --header-h:96px;
  --header-pad-x:24px;

  /* SITE */
  --container:1200px;
  --pad-x:clamp(16px,4vw,56px);

  /* ===== TAMAÑOS HERO (PC) ===== */
  --title: clamp(84px, 7.3vw, 150px);
  --subtitle: clamp(18px, 1.55vw, 24px);

  /* Social chips (PC) */
  --social-w: 56px;
  --social-h: 28px;
  --social-radius: 8px;
  --social-icon: 16px;

  /* Store buttons (PC) */
  --store-h: 76px;
  --store-radius: 18px;
  --store-pad-x: 40px;

  --phone-sm:clamp(170px,16vw,240px);
  --phone-md:clamp(210px,19vw,295px);

  /* mover bloque izquierdo a la derecha (PC) */
  --hero-left-shift: 60px;
  --hero-left-shift-mobile: 28px;

  /* tamaño de botones del header */
  --header-btn-w: 180px;
  --header-btn-py: 15px;
  --header-btn-px: 18px;

  /* ===== BLUR iOS encima del bg.svg ===== */
  --page-blur: 34px;                 /* fuerza del desenfoque */
  --page-dim: 0.20;                  /* oscurece un poco para legibilidad */
  --glass-border: rgba(255,255,255,0.10);
  --glass-fill: rgba(10, 6, 20, 0.18);
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;display:block;}
a{color:inherit;}
html,body{height:100%;}

body{
  font-family:"Montserrat",sans-serif;
  color:var(--text);

  /* ✅ BG global para TODO (incluye header) */
  background:
    url("./assets/bg.svg") center / cover no-repeat fixed;
  background-color:#000; /* fallback si no carga */

  overflow-x:hidden;
  padding-top:var(--header-h);

  /* layers */
  position:relative;
  isolation:isolate;
}

/* =========================================================
   BLUR encima del BG (solo desenfoca el fondo, no el contenido)
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  /* capa oscura + blur tipo iOS */
  background: rgba(0,0,0,var(--page-dim));

  -webkit-backdrop-filter: blur(var(--page-blur)) saturate(1.15) contrast(1.05);
  backdrop-filter: blur(var(--page-blur)) saturate(1.15) contrast(1.05);
}

/* (Opcional) viñeta suave para look “premium” */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 50% 40%,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 35%,
      rgba(0,0,0,0.00) 70%
    );
  opacity:.55;
}

/* Contenedor general */
.container{
  width:min(var(--container),100% - (var(--pad-x) * 2));
  margin-inline:auto;
}

/* ===== HEADER (FIXED) ===== */
.main-header{
  height:var(--header-h);

  /* ✅ ya no morado sólido: “glass” para que se vea el bg.svg detrás */
  background: var(--glass-fill);
  border-bottom:1px solid var(--glass-border);

  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);

  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
}

/* Full width SOLO en el header */
.main-header .container{
  width: 100%;
  margin: 0;
  padding-left: var(--header-pad-x);
  padding-right: var(--header-pad-x);
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* LOGO + TEXTO */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.header-logo{
  width:52px;
  height:52px;
  object-fit:contain;
}

.logo-text{
  font-weight:900;
  letter-spacing:1px;
  font-size:1.35rem;
}

/* BOTONES HEADER */
.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  justify-content:flex-end;
}

/* BOTONES HEADER */
.btn{
  text-decoration:none;
  font-weight:900;

  font-size: .95rem;
  letter-spacing:.6px;

  width: var(--header-btn-w);
  padding: var(--header-btn-py) var(--header-btn-px);

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

  white-space: normal;
  line-height: 1.05;

  border-radius:14px; /* ✅ más iOS */
  transition:transform .15s ease, opacity .15s ease;
}

.btn:hover{transform:translateY(-1px);opacity:.95;}

/* Botón “outline” con glass */
.btn-outline{
  background: rgba(10, 6, 20, 0.78);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Botón “solid” oscuro */
.btn-solid{
  background: rgba(10, 6, 20, 0.78);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ===== HERO ===== */
.hero{
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:clamp(18px,4vw,56px);
  padding-block:clamp(18px,4vh,46px);
}

/* IZQUIERDA */
.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left: var(--hero-left-shift);
}

/* Social chips */
.social-icons{
  display:flex;
  gap:12px;
  margin-bottom:18px;
}

.social{
  width:var(--social-w);
  height:var(--social-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--social-radius);
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  text-decoration:none;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.social img{
  width:var(--social-icon);
  height:var(--social-icon);
  opacity:.95;
}

.social-accent{
  background:rgba(99, 255, 92, 0.22);
  border-color:rgba(99, 255, 92, 0.50);
}

/* Title/Sub */
.main-title{
  font-weight:900;
  text-transform:uppercase;
  font-size:var(--title);
  line-height:0.86;
  letter-spacing:1px;
  margin-bottom:12px;
}

.subtitle{
  font-size:var(--subtitle);
  font-weight:500;
  opacity:.86;
  margin-bottom:22px;
}

/* Store buttons */
.store-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

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

  height: var(--store-h);
  padding-inline: var(--store-pad-x);   /* hace el botón más ALARGADO */
  border-radius: var(--store-radius);

  overflow:hidden;
  border:1px solid rgba(255,255,255,0.30);
  background: rgba(0,0,0,0.18);
  text-decoration:none;
}

.store img{
  height: calc(var(--store-h) - 16px); /* escala el badge más grande */
  width:auto;
  margin: 0;                           /* ya no lo necesitamos */
}

/* DERECHA */
.hero-right{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bg-graphic{
  position:absolute;
  right:-10%;
  bottom:-22%;
  width:min(560px,72%);
  opacity:.35;
  transform:rotate(-14deg);
  pointer-events:none;
  z-index:0;
}

.phones-stage{
  position:relative;
  width:100%;
  height:min(520px, calc(100svh - var(--header-h) - 70px));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}

.phone{
  position:absolute;
  border-radius:34px;
  box-shadow:0 25px 55px rgba(0,0,0,0.65);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* POSICIONAMIENTO */
.phone-1{
  width:var(--phone-sm);
  transform:translateX(-42%) translateY(10%) rotate(-12deg) scale(0.95);
  opacity:.92;
  z-index:2;
}

.phone-2{
  width:var(--phone-md);
  transform:translateY(-4%);
  z-index:4;
  box-shadow:0 0 70px rgba(128,71,254,0.18), 0 25px 55px rgba(0,0,0,0.65);
}

.phone-3{
  width:var(--phone-sm);
  transform:translateX(42%) translateY(16%) rotate(12deg) scale(0.95);
  opacity:.92;
  z-index:3;
}

/* PANTALLAS BAJITAS */
@media (max-height: 820px){
  :root{
    --title: clamp(72px, 7vw, 120px);
    --hero-left-shift: 40px;
  }
  .hero-right{min-height:460px;}
  .phones-stage{height:min(460px, calc(100svh - var(--header-h) - 60px));}
}

/* TABLET / MÓVIL */
@media (max-width: 980px){
  :root{
    --header-h: 96px;
    --header-pad-x: 14px;

    --title: clamp(64px, 14vw, 120px);
    --subtitle: clamp(18px, 4.2vw, 22px);

    --social-w: 58px;
    --social-h: 28px;
    --social-icon: 16px;

    --store-h: 54px;

    --header-btn-w: 185px;
    --header-btn-py: 16px;
    --header-btn-px: 16px;

    --page-blur: 28px;
  }

  body{ overflow-y:auto; }

  .nav-buttons{
    flex-wrap:wrap;
    gap:10px;
  }

  .btn{
    width: var(--header-btn-w);
    padding: var(--header-btn-py) var(--header-btn-px);
    font-size: .78rem;
  }

  .hero{
    overflow:visible;
    min-height:auto;
    padding-bottom:36px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    padding-block:22px 10px;
  }

  .hero-left{
    text-align:left;
    align-items:flex-start;
    padding-left: var(--hero-left-shift-mobile);
    padding-right: 12px;
  }

  .social-icons{justify-content:flex-start;}
  .store-buttons{justify-content:flex-start;}

  .hero-right{
    min-height:460px;
    margin-top:10px;
  }

  .bg-graphic{
    right:-12%;
    bottom:-26%;
    width:min(520px,86%);
  }

  .phones-stage{height:460px;}
  .phone-1{transform:translateX(-36%) translateY(10%) rotate(-12deg) scale(0.92);}
  .phone-2{transform:translateY(-4%) scale(0.98);}
  .phone-3{transform:translateX(36%) translateY(16%) rotate(12deg) scale(0.92);}
}

@media (max-width: 520px){
  .header-logo{width:34px;height:34px;}
  .logo-text{font-size:1rem;}
  .phones-stage{height:420px;}
  :root{ --hero-left-shift-mobile: 18px; }
}