:root{
  /* Guinda institucional (Morena) */
  --guinda:#AF272F;
  --guinda-700:#8f1f26;

  --bg:#f3f4f6;
  --ink:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
}

*{ font-family:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

body{ background: var(--bg); color: var(--ink); }

/* Sticky footer layout */
.layout{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}
.content{
  flex: 1 0 auto;
}

/* Topbar */
.topbar{
  background: linear-gradient(90deg, var(--guinda), var(--guinda-700));
}
.brand-badge{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.14);
  color:#fff;
  font-size: 1.15rem;
}
.pill{
  color:#fff;
  font-size:.85rem;
  padding:.4rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(175,39,47,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg));
}
.hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
}
.hero-kicker{
  display:inline-block;
  font-weight:900;
  letter-spacing:.08em;
  font-size:.72rem;
  color: var(--guinda);
}
.hero-title{
  font-weight: 900;
  letter-spacing: .02em;
}
.hero-sub{ color: var(--muted); }

/* Inputs clave */
.clave-input{
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--border);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.hint{
  text-align:center;
  font-size:.75rem;
  color: var(--muted);
  margin-top:.35rem;
}

/* Buttons */
.btn-guinda{
  background: var(--guinda);
  border-color: var(--guinda);
  color:#fff;
  border-radius: 16px;
  padding: .9rem 1.35rem;
  font-weight: 900;
}
.btn-guinda:hover{
  background: var(--guinda-700);
  border-color: var(--guinda-700);
  color:#fff;
}
.btn-outline-guinda{
  border-radius: 16px;
  border: 2px solid var(--guinda);
  color: var(--guinda);
  font-weight: 900;
  padding: .85rem 1rem;
}
.btn-outline-guinda:hover{
  background: var(--guinda);
  color:#fff;
}

/* Help section (arriba del footer) */
.help-section{
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(175,39,47,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f7f7);
  border-top: 1px solid var(--border);
}
.help-title{
  font-weight: 900;
  color: var(--ink);
  letter-spacing: .01em;
  font-size: 1.1rem;
}
.help-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.8rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid rgba(175,39,47,.45);
  background:#fff;
  color: var(--guinda);
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.help-btn i{ font-size: 1.05rem; }
.help-btn:hover{
  background: var(--guinda);
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
@media (max-width: 768px){
  .help-btn{ width: 100%; }
}

/* Footer */
.footer{
  background:#fff;
  border-top: 1px solid var(--border);
}
.footer-title{
  font-weight: 900;
  margin-bottom: .5rem;
}
.footer-item{
  color: var(--muted);
  margin-bottom: .35rem;
}
.footer a{
  color: var(--guinda);
  text-decoration:none;
  font-weight: 700;
}
.footer a:hover{ text-decoration: underline; }
.footer-note{
  color: var(--muted);
  font-size: .9rem;
}

/* Social buttons */
.social{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .75rem;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--ink);
  text-decoration:none;
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

/* WhatsApp floating button */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.78rem 1.05rem;
  border-radius: 999px;
  background: #25D366;
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.wa-float i{ font-size: 1.35rem; }
.wa-float:hover{ filter: brightness(.95); color:#fff; }