:root{
  --bg:#070814;
  --text:#eaeaf4;
  --muted:rgba(234,234,244,.7);
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --accent:#ffd86b;
  --shadow: 0 20px 60px rgba(0,0,0,.55);

  --gold-1: #f7d27a;
  --gold-2: #c89b3c;

  --cta-purple: rgba(80, 40, 150, .42);
  --cta-purple-2: rgba(20, 14, 34, .55);

  /* Avatars marquee */
  --blobSize: 54px;
  --rowGap: 28px;
  --rowStep: calc(var(--blobSize) + var(--rowGap));
  --midGap: 100px;
  --rowPadX: 80px;

  --speed1: 95s;
  --speed2: 110s;
  --speed3: 100s;
  --speed4: 118s;
  --speed5: 104s;
  --speed6: 122s;
}

*{box-sizing:border-box}
html,body{height:100%}
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
.page{min-height:100%}
img, video, canvas, svg{ max-width:100%; height:auto; }

/* =========================================
   HERO BASE
========================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
@supports (height: 100svh){
  .hero{ min-height: 100svh; }
}

.hero__bg{
  position:absolute;
  inset:0;
  background:url("assets/nebula.jpg") center/cover no-repeat;
  z-index:0;
  opacity:.85;
}

.hero__media{
  position:absolute;
  inset:0;
  background: url("assets/nebula.jpg") center/cover no-repeat;
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.1) contrast(1.05);
  transform:scale(1.02);
  z-index:0;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,216,107,.12), transparent 60%),
    radial-gradient(60% 60% at 10% 20%, rgba(110,140,255,.10), transparent 60%),
    linear-gradient(to bottom, rgba(7,8,20,.35), rgba(7,8,20,.85));
  z-index:1;
}

/* =========================================
   AVATAR BACKGROUND
========================================= */
.bg-parallax{
  position:absolute;
  inset:0;
  height:100%;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  opacity:.95;
}

.bg-row{
  position:absolute;
  left:0;
  right:0;
  height: var(--blobSize);
  display:flex;
  align-items:center;
  overflow: visible;
}

.bg-track{
  display:flex;
  align-items:center;
  gap: 22px;
  padding: 0 var(--rowPadX);
  width: max-content;
  will-change: transform;
}

@keyframes scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0%,   0, 0); }
}
@keyframes scroll-left {
  from { transform: translate3d(0%,   0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.dir-right .bg-track{ animation: scroll-right var(--speed1) linear infinite; }
.dir-left  .bg-track{ animation: scroll-left  var(--speed2) linear infinite; }

/* Spread rows */
.bg-row--r1{ top: 6%; }
.bg-row--r2{ top: 18%; }
.bg-row--r3{ top: 30%; }
.bg-row--r4{ top: 56%; }
.bg-row--r5{ top: 70%; }
.bg-row--r6{ top: 84%; }

.bg-row--r1.dir-right .bg-track{ animation-duration: var(--speed1); }
.bg-row--r2.dir-left  .bg-track{ animation-duration: var(--speed2); }
.bg-row--r3.dir-right .bg-track{ animation-duration: var(--speed3); }
.bg-row--r4.dir-left  .bg-track{ animation-duration: var(--speed4); }
.bg-row--r5.dir-right .bg-track{ animation-duration: var(--speed5); }
.bg-row--r6.dir-left  .bg-track{ animation-duration: var(--speed6); }

.blob{
  position:relative;
  width:var(--blobSize);
  height:var(--blobSize);
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(255, 214, 120, .95);
  box-shadow:
    0 0 0 1px rgba(255,214,120,.28),
    0 0 10px rgba(255,214,120,.38),
    0 0 16px rgba(255,180,60,.12),
    0 12px 24px rgba(0,0,0,.40);
  filter: brightness(1.15) contrast(1.18) saturate(1.1);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.blob::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background: rgba(7,8,20,.20);
  mix-blend-mode: multiply;
  pointer-events:none;
}
.blob::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%);
  pointer-events:none;
}

.bg-row--r1 { transform: translateY(-6px); }
.bg-row--r2 { transform: translateY( 4px); }
.bg-row--r3 { transform: translateY(-3px); }
.bg-row--r4 { transform: translateY( 6px); }
.bg-row--r5 { transform: translateY(-4px); }
.bg-row--r6 { transform: translateY( 3px); }

.bg-row--r1, .bg-row--r6 { opacity: .85; }
.bg-row--r2, .bg-row--r5 { opacity: .92; }
.bg-row--r3, .bg-row--r4 { opacity: .78; }

@keyframes blob-float{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.bg-row--r1 .blob { animation: blob-float 4.8s ease-in-out infinite; }
.bg-row--r2 .blob { animation: blob-float 5.6s ease-in-out infinite; }
.bg-row--r3 .blob { animation: blob-float 5.1s ease-in-out infinite; }
.bg-row--r4 .blob { animation: blob-float 6.0s ease-in-out infinite; }
.bg-row--r5 .blob { animation: blob-float 5.4s ease-in-out infinite; }
.bg-row--r6 .blob { animation: blob-float 6.3s ease-in-out infinite; }

@media (max-width: 900px){
  :root{
    --blobSize: 46px;
    --rowGap: 10px;
    --midGap: 44px;
    --rowPadX: 30px;
  }
}

/* layer order */
.hero__content{
  position:relative;
  z-index:3;
}

/* =========================================
   BUTTONS / TEXT
========================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--stroke);
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px)}

.btn--primary{
  border-color: rgba(255,216,107,.85);
  background: linear-gradient(180deg, rgba(255,216,107,.95), rgba(200,155,60,.95));
  color: rgba(20,14,34,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,216,107,.20);
}
.btn--primary:hover{ filter: brightness(1.02); }
.btn--wide{ width:100%; justify-content:center; }

.btn--pill{
  border-radius: 999px;
  padding: 12px 20px;
  white-space: nowrap;
}
.btn[disabled],
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(.85);
}

.notify-msg{
  font-size: 12px;
  min-height: 16px;
  color: rgba(234,234,244,.75);
}
.notify-msg.is-ok{ color: rgba(120,255,190,.9); }
.notify-msg.is-err{ color: rgba(255,120,150,.95); }

/* =========================================
   FRAME (HERO)
========================================= */
.hero__content--frame{
  width:min(1200px, 94vw);
  padding:85px 0 80px;
  display:grid;
  gap:28px;
  grid-template-columns: 1fr;
  align-items:start;
}

.frame{
  max-width: 900px;
  width: min(900px, 90vw);
  margin: 0 auto;
  position:relative;
  border-radius:26px;
  padding:10px;
  background: transparent;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-1));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: .98;
  box-shadow:
    0 0 0 1px rgba(255,216,107,.25),
    0 0 25px rgba(255,216,107,.22),
    0 20px 60px rgba(0,0,0,.35);
}

.frame__inner{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,8,20,.10);
  backdrop-filter: none;
  min-height: 300px;
  height:auto;
  display:block;
}

/* Mosaic */
.mosaic{
  height:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap:10px;
  padding:10px;
  background: transparent;
}
.mosaic__cell{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.mosaic__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* CTA overlay */
.frame__center{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(440px, 86%);
  z-index:5;
}

.tilt-wrap{ width:100%; display:flex; justify-content:center; }

.tilt-card{
  width:min(420px, 92%);
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  will-change: transform;
}

.tilt-card--cta{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 20px 18px;
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(160,120,255,.22), transparent 55%),
    linear-gradient(180deg, var(--cta-purple), var(--cta-purple-2));
  border:1px solid rgba(255,216,107,.75);
  box-shadow:
    0 25px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,216,107,.18);
  backdrop-filter: blur(14px);
  transition: transform 60ms linear;
}

.tilt-card__top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0 0 12px;
}
.time{
  font-size:12px;
  color: rgba(255,255,255,.70);
  letter-spacing: .02em;
}

.cta-title{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.01em;
}
.cta-sub{
  margin:0 0 8px;
  color: rgba(234,234,244,.75);
  font-size:14px;
}

.hud-camera{
  display:grid;
  place-items:center;
  width: 36px;
  height: 26px;
  margin: 10px 0 14px;
  opacity: .92;
  color: rgba(255,216,107,.85);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.hud-camera__svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px){
  .frame__center{ top:46%; }
}

/* =========================================
   SECTIONS (base)
========================================= */
.section{
  padding:80px 0;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(to bottom, rgba(7,8,20,1), rgba(7,8,20,.98));
}
.container{
  width:min(900px, 92vw);
  margin:0 auto;
}
h2{margin:0 0 10px; font-size: clamp(24px, 2.4vw, 34px)}
p{color:var(--muted); margin:0 0 18px}

.form{display:flex; gap:10px; flex-wrap:wrap}
input{
  flex:1;
  min-width:240px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  font-size:16px;
}
.fineprint{font-size:12px; color:rgba(234,234,244,.55)}

/* =========================
   SIGNUP SCREEN
========================= */
.section--signup{
  position: relative;
  min-height: 100vh;
  border-top: 0;
  padding: 80px 0;
  background:
    radial-gradient(1200px 700px at 50% 10%, rgba(120,70,200,.35), transparent 60%),
    linear-gradient(180deg, rgba(20,14,34,1), rgba(7,8,20,1));
  overflow: hidden;
}
@supports (height: 100svh){
  .section--signup{ min-height: 100svh; }
}

.section--signup .signup-bg{
  position:absolute;
  inset:0;
  z-index: 0;
  opacity: .45;
  pointer-events:none;
}

/* keep content above background */
.section--signup .signup-shell{
  position: relative;
  z-index: 2;
}

.signup-shell{
  position: relative;
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: 56px 56px;
  border-radius: 30px;
  background: rgba(80, 40, 150, .10);
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
}

/* gold corners */
.corner{
  position:absolute;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,216,107,.85);
  border-radius: 10px;
  opacity: .95;
}
.corner--tl{top:16px; left:16px; border-right:0; border-bottom:0;}
.corner--tr{top:16px; right:16px; border-left:0; border-bottom:0;}
.corner--bl{bottom:16px; left:16px; border-right:0; border-top:0;}
.corner--br{bottom:16px; right:16px; border-left:0; border-top:0;}

/* 2 columns (desktop default) */
.signup-grid{
  display: grid;
  grid-template-columns: minmax(380px, 520px) minmax(520px, 1fr);
  gap: clamp(34px, 4vw, 64px);
  align-items: start;
}

/* LEFT */
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,0,70,.18);
  border: 1px solid rgba(255,0,70,.35);
  color: rgba(255,255,255,.9);
  width: max-content;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: .08em;
  position: relative;
  overflow: visible;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: livePillGlow 1.15s ease-in-out infinite;
}
.live-pill .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,0,70,.95);
  box-shadow: 0 0 14px rgba(255,0,70,.55);
  position: relative;
  transform: translateZ(0);
  animation: liveDotPulse 1.15s ease-in-out infinite;
}
.live-pill .dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 2px solid rgba(255,0,70,.55);
  opacity: 0;
  transform: scale(.65);
  animation: liveRing 1.15s ease-in-out infinite;
}
@keyframes liveDotPulse{
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.2); opacity: .85; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes liveRing{
  0%   { opacity: 0;   transform: scale(.65); }
  35%  { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.55); }
}
@keyframes livePillGlow{
  0%   { box-shadow: 0 0 0 rgba(255,0,70,0); }
  50%  { box-shadow: 0 0 22px rgba(255,0,70,.10); }
  100% { box-shadow: 0 0 0 rgba(255,0,70,0); }
}
@media (prefers-reduced-motion: reduce){
  .live-pill,
  .live-pill .dot,
  .live-pill .dot::after{
    animation: none !important;
  }
}

.signup-title{
  margin: 0 0 10px;
  font-size: clamp(46px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.signup-sub{
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 15px;
}

/* lower area */
.signup-lower{
  display:grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 18px;
  align-items: start;
}

.signup-btn{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  border-radius: 999px;
  padding-inline: 26px;
  width: max-content;
  margin-left: 84px;
}

.avatar-chip{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:10px;
  width: 96px;
  padding-top: 110px;
}
.avatar-chip img{
  width:58px;height:58px;border-radius:999px;
  border:2px solid rgba(255,216,107,.65);
  box-shadow: 0 0 18px rgba(255,216,107,.18);
  object-fit: cover;
  background:#111;
}
.avatar-chip .handle{
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

.phone-col{
  grid-column: 2;
  grid-row: 2;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-right: 10px;
}

.coming-soon{
  width: 260px;
  text-align: left;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  margin-top: 2px;
}

.signup-form{
  width: 260px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.signup-form input{
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  padding: 12px 14px;
}
.signup-form .btn--pill{
  align-self: flex-end;
  width: 150px;
  border-radius: 999px;
  padding: 12px 18px;
  white-space: nowrap;
}

/* PHONE MOCK */
.phone-mock{
  width: 240px;
  height: 360px;
  border-radius: 72px;
  border: 2px solid rgba(255,216,107,.85);
  position: relative;
  background: rgba(7,8,20,.55);
  box-shadow:
    0 28px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,216,107,.18),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -30px 80px rgba(0,0,0,.35);
  overflow: hidden;
}
.phone-mock::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 58px;
  border: 1px solid rgba(255,216,107,.28);
  pointer-events:none;
}
.phone-screen{
  position:absolute;
  inset: 18px;
  border-radius: 52px;
  overflow:hidden;
  background: rgba(10,10,24,.45);
  border: 1px solid rgba(255,216,107,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  display:flex;
}

.phone-live--single{
  position: relative;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.phone-live--single::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg) center/cover no-repeat;
  filter: contrast(1.05) saturate(1.05);
}

.phone-watermark{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  letter-spacing:.06em;
  color: rgba(255,216,107,.55);
  text-shadow: 0 12px 30px rgba(0,0,0,.55);
  font-size: 16px;
}

/* RIGHT */
.big-panel{
  margin-top: 120px;
  height: 420px;
  min-height: 320px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 3.2vw, 54px);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(160,120,255,.14), transparent 55%),
    rgba(7,8,20,.32);
  border: 0;
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
}
.big-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 30px;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-1));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: .98;
  box-shadow:
    0 0 0 1px rgba(255,216,107,.28),
    0 0 28px rgba(255,216,107,.22),
    0 20px 60px rgba(0,0,0,.35);
}
.big-panel::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,216,107,.18);
  pointer-events:none;
  opacity: .9;
}

.big-title{
  margin:0;
  font-size: clamp(34px, 3.1vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.big-script{
  margin: 14px 0 0;
  color: rgba(255,216,107,.30);
  font-size: clamp(18px, 1.8vw, 22px);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
}

/* inner corner */
.big-corner{
  position:absolute;
  top: 26px;
  left: 28px;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,216,107,.70);
  border-right: 0;
  border-bottom: 0;
  border-radius: 10px;
  opacity: .9;
  pointer-events:none;
}

/* tilt big panel */
#tiltBigPanel{
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 120ms ease;
}

/* SIDE RAILS */
.side-rail{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap: 18px;
  z-index: 999;
  pointer-events: none;
  opacity: .9;
  transition: opacity .35s ease, transform .35s ease;
}
.side-rail--left{ left: 18px; }
.side-rail--right{ right: 18px; }
.side-rail.is-hidden{
  opacity: 0;
  transform: translateY(-50%) scale(.95);
}
.rail-ico{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,216,107,.9);
  user-select: none;
}

/* =========================================================
   RESPONSIVE — SIGNUP
   (la clave para que móvil NO se desordene)
========================================================= */

/* Tablet / 980px "Desktop site": mantener 2 columnas */
@media (max-width: 1020px){
  .signup-shell{ padding: 36px 22px; }
  .side-rail{ display:none; }
  .big-panel{ margin-top: 60px; }
}

/* ✅ MÓVIL REAL (refuerzo): colapsa sí o sí */
@media (max-width: 860px), (max-device-width: 860px){
  .signup-grid{ grid-template-columns: 1fr !important; gap: 26px !important; }

  .signup-lower{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 14px !important;
  }

  .signup-btn{
    margin-left: 0 !important;
    justify-self: center !important;
    width: min(92vw, 360px) !important;
  }

  .avatar-chip{
    padding-top: 0 !important;
    width: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .phone-col{
    width: 100% !important;
    align-items: center !important;
    padding-right: 0 !important;
  }

  .coming-soon,
  .signup-form{
    width: min(92vw, 320px) !important;
    margin-inline: auto !important;
  }

  .signup-form .btn--pill{
    width: 100% !important;
    align-self: stretch !important;
  }

  .big-panel{
    height: auto !important;
    min-height: 240px !important;
    margin-top: 18px !important;
    padding: 22px 18px !important;
  }

  #tiltBigPanel{
    transform: none !important;
    transition: none !important;
  }
}


/* Más compacto aún */
@media (max-width: 560px), (max-device-width: 560px){
  .section--signup{ padding: 56px 0; }

  .signup-shell{
    width: 94vw;
    padding: 20px 14px;
    border-radius: 22px;
  }
}

/* =========================================================
   HERO MOBILE — show mosaic + overlay CTA
========================================================= */
@media (max-width: 768px){
  .bg-parallax{ opacity: .55; }

  .hero{ padding: 28px 0; }
  .hero__content--frame{ padding: 28px 0 50px; }

  .frame{
    width: 94vw;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 26px;
  }

  .frame__inner{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 520px;
    padding: 10px;
    background: rgba(7,8,20,.10);
  }

  .mosaic{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 160px);
    gap: 10px;
    padding: 10px;
    height: auto;
  }

  .mosaic__cell{ border-radius:16px; }
  .mosaic__media{ width:100%; height:100%; object-fit:cover; }

  .frame__center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 88%);
    z-index: 10;
  }

  .tilt-card{
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  .cta-title{ font-size: 32px; }
}

@media (max-width: 420px){
  .frame__inner{ min-height: 540px; }
  .mosaic{ grid-template-rows: repeat(2, 170px); }
  .cta-title{ font-size: 30px; }
}
/* =========================================================
   MOBILE REAL — UNIVERSAL (Android + iPhone) ✅
   - Aplica el “arreglo iPhone” a TODOS los celulares
   - OJO: va ANTES del bloque Android Desktop Site, para que
     Android Desktop Site lo pise cuando corresponda.
========================================================= */
@media (max-width: 1020px) and (hover: none) and (pointer: coarse){

  .signup-grid{ grid-template-columns: 1fr !important; gap: 26px !important; }

  .signup-lower{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 14px !important;
  }

  .signup-btn{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-left: 0 !important;
    justify-self: center !important;
    width: min(92vw, 360px) !important;
  }

  .avatar-chip{
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-top: 0 !important;
    width: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .phone-col{
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    align-items: center !important;
    padding-right: 0 !important;
  }

  .coming-soon,
  .signup-form{
    width: min(92vw, 320px) !important;
    margin-inline: auto !important;
  }

  .signup-form .btn--pill{
    width: 100% !important;
    align-self: stretch !important;
  }

  .big-panel{
    height: auto !important;
    min-height: 240px !important;
    margin-top: 18px !important;
    padding: 22px 18px !important;
  }

  #tiltBigPanel{
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ANDROID "DESKTOP SITE" FIX (solo touch + viewport grande)
   - SOLO afecta Android/Touch con “Desktop site”
   - NO toca desktop real (mouse) ni móvil normal (<768)
========================================================= */
@media (min-width: 900px) and (hover: none) and (pointer: coarse){

  /* =========================
     VARIABLES (burbujas / avatar marquee)
  ========================= */
  :root{
    --blobSize: 130px;
    --rowGap: 18px;
    --midGap: 70px;
    --rowPadX: 70px;
  }

  .hero__content--frame{
    width: min(1100px, 96vw);
    padding: 70px 0 70px;
  }

  .frame{
    width: min(1100px, 96vw);
    max-width: 1100px;
  }

  .frame__inner{
    min-height: 430px;
  }

  .mosaic{
    gap: 14px;
    padding: 14px;
  }

  .frame__center{
    width: min(560px, 90%);
  }

  .tilt-card{
    width: min(520px, 96%);
  }

  .cta-title{
    font-size: 40px;
  }

  .signup-shell{
    width: min(980px, 94vw);
    padding: 46px 34px;
  }

  .signup-grid{
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
    gap: 40px;
    align-items: start;
  }

  .signup-btn{
    margin-left: 0;
    width: 260px;
    justify-self: center;
  }

  .phone-col{
    padding-right: 0;
    align-items: center;
  }

  .signup-form{
    width: 260px;
  }

  .signup-form .btn--pill{
    width: 100%;
    align-self: stretch;
  }

  .big-panel{
    margin-top: 210px;
    height: 420px;
  }

  .signup-lower{
    column-gap: 20px;
    row-gap: 16px;
  }
}

/* =========================================================
   PC "mobile preview" FIX (Device Toolbar)
   - Solo aplica en PC (mouse): hover:hover + pointer:fine
   - Arregla el modo "celular" en el computador
   - NO toca Android/iPhone reales
   - NO toca Android con Desktop site (coarse)
========================================================= */
@media (max-width: 1020px) and (hover: hover) and (pointer: fine){

  .signup-grid{ grid-template-columns: 1fr !important; gap: 26px !important; }

  .signup-lower{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 14px !important;
  }

  .signup-btn{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-left: 0 !important;
    justify-self: center !important;
    width: min(92vw, 360px) !important;
  }

  .avatar-chip{
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-top: 0 !important;
    width: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .phone-col{
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    align-items: center !important;
    padding-right: 0 !important;
  }

  .coming-soon,
  .signup-form{
    width: min(92vw, 320px) !important;
    margin-inline: auto !important;
  }

  .signup-form .btn--pill{
    width: 100% !important;
    align-self: stretch !important;
  }

  .big-panel{
    height: auto !important;
    min-height: 240px !important;
    margin-top: 18px !important;
    padding: 22px 18px !important;
  }

  #tiltBigPanel{
    transform: none !important;
    transition: none !important;
  }
}