/* ====== Tokens ====== */
:root{
  --bg:#F2F3F7;
  --ink:#3B3562;
  --ink-weak:#6A6792;
  --brand:#372773;
  --accent:#14B5FF;
  --icon:#6C4CCF;
  --r-xl:24px;
  --r-full:9999px;
  --shadow-soft:0 10px 24px rgba(23,16,61,.12);
  --shadow-pill:0 6px 14px rgba(23,16,61,.18);
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body.theme--light{
  background:var(--bg) !important;
  color:var(--ink) !important;
  display:block;                /* quitamos centrado absoluto del layout viejo */
  font-family:'Open Sans', sans-serif;
  text-align:center;
  min-height:auto;
  align-items:unset;
  justify-content:unset;
  padding-bottom:80px;          /* espacio para footer pill */
}

/* ====== Topbar (cápsula) ====== */
.topbar{
  width:min(1200px,94%);
  margin:24px auto 0;
  background:var(--brand);
  color:#fff;
  border-radius:var(--r-full);
  box-shadow:var(--shadow-pill);
}
.topbar__content{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.brand__logo{height:28px; display:block}
.actions{display:flex; align-items:center; gap:12px}
.actions__link{color:#D9D7F5; text-decoration:none; font-weight:600}
.actions__link:hover{color:#fff}
.btn{
  display:inline-block; border:none; border-radius:var(--r-full);
  padding:10px 16px; font-weight:700; text-decoration:none;
  background:var(--accent); color:#fff;
  box-shadow:0 6px 14px rgba(20,181,255,.35);
}
.btn:hover{opacity:.9}

/* ====== Hero ====== */
.contenedor{
  display:flex; flex-direction:column;
  width:100%; max-width:920px; margin:64px auto 0; padding:0 16px;
  align-items:center; text-align:center;
}
.logo-QRC{width:min(520px,90%); max-width:520px; margin:0 auto 8px; height:auto}
.tagline{
  font-size:20px; line-height:1.2; margin:6px 0 18px;
  color:var(--ink-weak); font-weight:600; letter-spacing:.2px;
}

/* ====== Fila de íconos ====== */
.Animacion{
  display:flex; gap:36px; justify-content:center; align-items:center;
  background:transparent; border:none; box-shadow:none;
  width:auto; max-width:none; padding:0; margin:4px auto 24px; border-radius:0;
}
.Animacion div{display:grid; place-items:center; flex:0 0 auto}
.feature__icon{width:72px; height:72px; color:var(--icon)}
.Animacion p.etiqueta{display:none}          /* ocultamos textos debajo de íconos */

/* ====== CTA ====== */
a.generarQR{
  display:inline-block; text-decoration:none; background:var(--accent); color:#fff;
  padding:14px 28px; border-radius:var(--r-full); font-weight:700; font-size:18px;
  box-shadow:0 10px 24px rgba(20,181,255,.35); transition:opacity .2s ease;
  margin-top:4px;
}
a.generarQR:hover, a.generarQR:focus{opacity:.92; color:#fff}

/* ====== Footer píldora ====== */
.footer-pill{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:#fff; color:var(--ink-weak);
  border-radius:var(--r-full); padding:10px 18px; box-shadow:var(--shadow-soft);
  font-size:16px;
}

/* ====== Responsive ====== */
@media (max-width: 768px){
  .topbar{width:94%}
  .contenedor{margin:40px auto 0}
  .feature__icon{width:64px; height:64px}
  a.generarQR{width:min(420px,88%)}
}
@media (max-width: 430px){
  .topbar__content{padding:10px 12px}
  .brand__logo{height:24px}
  .actions__link{font-size:13px}
  .btn{padding:8px 14px; font-size:13px}
  .feature__icon{width:58px; height:58px}
  .footer-pill{bottom:16px; padding:9px 14px; font-size:12px}
}