:root{
  --bg:#07140e;
  --bg2:#0b1f14;
  --text:#ecfff3;
  --muted:rgba(236,255,243,.72);
  --muted2:rgba(236,255,243,.56);
  --line:rgba(236,255,243,.12);

  --green:#55d64a;
  --green2:#b7ff5a;
  --red:#d11b1b;

  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --radius:16px;
}

/* RESET */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(85,214,74,.18), transparent 60%),
    radial-gradient(900px 650px at 100% 15%, rgba(209,27,27,.12), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg) 70%);
  color: var(--text);
}

a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ================= HEADER ================= */

.topbar{
  position: sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(7,20,14,.55);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand__logo{
  width:48px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

.brand__name{
  font-weight:900;
  letter-spacing:.4px;
}

.brand__mx{
  font-weight:900;
}

.brand__tag{
  font-size:12px;
  color:var(--muted2);
}

/* ================= BUTTONS ================= */

.btn{
  padding:12px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color:#05110b;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

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

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow:none;
}

.btn--ghost:hover{
  background: rgba(236,255,243,.08);
}

/* ================= HERO ================= */

.hero{
  padding:56px 0 40px;
}

.hero__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:flex-start;
}

/* LOGO SUTIL (SELL0 HISTÓRICO) */
.pill--logo{
  padding:6px 10px;
  margin-bottom:12px;
  display:inline-block;
}

.pill__logo{
  width:72px;   /* tamaño correcto */
  opacity:.95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* TEXTO PRINCIPAL */
h1{
  margin:10px 0 10px;
  font-size: clamp(36px, 4vw, 56px);
  line-height:1.05;
}

.lead{
  color:var(--muted);
  font-size:18px;
  margin-bottom:22px;
}

.cta{
  display:flex;
  gap:12px;
}

/* ================= PANEL DERECHO ================= */

.hero__panel .panel{
  border:1px solid var(--line);
  background:
    radial-gradient(700px 350px at 0% 0%, rgba(85,214,74,.14), transparent 55%),
    radial-gradient(700px 350px at 100% 0%, rgba(209,27,27,.10), transparent 60%),
    rgba(236,255,243,.03);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
}

.panel__head{
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
}

.panel__title{
  font-weight:900;
}

.panel__sub{
  font-size:12px;
  color:var(--muted2);
}

.badge{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(209,27,27,.35);
  background: rgba(209,27,27,.10);
}

/* ================= TILES ================= */

.tiles{
  display:grid;
  gap:12px;
}

.tile{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(236,255,243,.04);
  text-decoration:none;
}

.tile:hover{
  background: rgba(236,255,243,.07);
}

.tile__t{
  font-weight:900;
}

.tile__s{
  font-size:12px;
  color:var(--muted2);
}

/* ================= SECTIONS ================= */

.section{
  padding:48px 0;
}

.section--alt{
  background: rgba(236,255,243,.03);
  border-top:1px solid var(--line);
}

.section__head h2{
  margin:0 0 6px;
}

.section__head p{
  margin:0;
  color:var(--muted);
}

/* ================= CONTACT ================= */

.contact{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact__box{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background: rgba(236,255,243,.03);
}

.contact__label{
  font-size:12px;
  color:var(--muted2);
}

.contact__value{
  font-weight:900;
  text-decoration:none;
}

.contact__small{
  font-size:12px;
  color:var(--muted2);
}

/* ================= FOOTER ================= */

.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  color:var(--muted2);
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer__right{
  display:flex;
  gap:14px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){
  .hero__inner{
    grid-template-columns:1fr;
  }
  .contact{
    grid-template-columns:1fr;
  }
}