:root{
  --pink:#d81b60;
  --orange:#f39c12;
  --ink:#222;

  --logoW: clamp(220px, 52vw, 340px);
  --logoTop: 90px;     /* SUBE EL LOGO - QUITA EL ESPACIO */
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  height:100%;
  font-family:system-ui;
}



/* =======================
   OVERLAY ESCRITORIO
======================= */
.overlay{
  position:fixed; inset:0;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hidden{ display:none; }

/* tarjeta desktop */
.card{text-align:center;}
.card .logo{height:120px; margin-bottom:14px}
.card h1{margin:8px 0 6px; font-size:24px; font-weight:600; color:#222}
.card p{margin:0 0 14px; color:#555}
.card .qr{width:220px}

/* =========================================
      HERO (clipPath REAL con curva U)
========================================= */
.hero{
  position:relative;
  width:100%;
  height:48vh;
  min-height:380px;
  overflow:hidden;
  margin-top:0 !important;   /* ✅ fuerza cero */
  padding-top:0 !important;  /* ✅ fuerza cero */
}


/* ✅ curva U vía SVG */
.hero--u{
  -webkit-clip-path: url(#clip-u);
          clip-path: url(#clip-u);
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  z-index:1;
  top:0;          /* ✅ ya no subas nada */
  transform:none; /* ✅ elimina ajustes */
}

/* LOGO arriba sobre la foto */
.hero-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:var(--logoTop);
  width:var(--logoW);
  z-index:4;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.4));
}

/* ============================
       PANEL (recto)
============================ */
.panel{
  background:#fff;
  padding:40px 22px 50px;
  text-align:center;

  /* levanta para mostrar la curva */
  margin-top:-40px;
}

/* ============================
        BOTONES
============================ */
.btn{
  display:block; width:100%;
  padding:16px 0; margin-bottom:18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700; font-size:17px;
  color:white;
  max-width: 300px;
  margin-left:auto;
  margin-right:auto;
}
.btn-pink{ background:var(--pink);  }
.btn-orange{ background:var(--orange);  }

/* ============================
        FOOTER
============================ */
.footer{
  position:fixed;
  left:0; right:0; bottom:24px;
  display:flex; flex-direction:column;
  align-items:center;
  gap:20px;
  pointer-events:none;
}

.langbar{
  display:flex;
  gap:12px;
  justify-content:center;
  pointer-events:auto;
}

.lang{
  width:34px; height:34px;
  border:none; background:none; padding:0;
  cursor:pointer;
  border-radius:50%;
  overflow:hidden;
}
.lang img{ width:100%; height:100%; object-fit:cover; }

.lang.active{
  outline:2px solid #111;
  outline-offset:2px;
}

.arlab{
  width:85px;
  opacity:.45;
  pointer-events:none;
}

/* ✅ Cuando el bloque desktop está activo, ocultamos footer completo */
#desktop-block:not(.hidden) ~ .footer {
  display: none !important;
}