/* hero.css — Sección hero y preview card */

.hero{
  min-height:88vh; display:flex; align-items:center;
  padding:6rem 2.5rem 4rem; max-width:1100px; margin:0 auto;
  gap:4rem; flex-wrap:wrap;
}
.hero-l{ flex:1; min-width:300px }
.hero-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:2rem }
.k-dot{ width:6px; height:6px; border-radius:50%; background:var(--k) }
.k-txt{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--g4); font-weight:500 }

.hero h1{
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight:700; line-height:1; letter-spacing:-2px; margin-bottom:1.5rem;
}
.hero h1 .dim{ font-weight:200; color:var(--g3) }
.hero-desc{ font-size:15px; color:var(--g4); line-height:1.8; max-width:420px; margin-bottom:2.5rem }
.hero-btns{ display:flex; gap:10px; flex-wrap:wrap }

/* Hero pills */
.hero-value-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.5rem }
.hvp{
  font-size:11px; color:var(--g4); letter-spacing:.5px;
  background:var(--g1); border:1px solid var(--g2); padding:5px 12px; border-radius:20px;
}

/* Hero right card */
.hero-r{ flex:0 0 360px }
.hero-card{
  background:var(--g1); border-radius:16px; padding:1.5rem; border:1px solid var(--g2);
}
.hc-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem }
.hc-label{ font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--g4); font-weight:500 }
.hc-badge-new{
  font-size:9px; font-weight:700; background:var(--k); color:white;
  padding:3px 8px; border-radius:4px; letter-spacing:.5px; text-transform:uppercase;
}
.preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.prev-item{
  background:white; border-radius:8px; border:1px solid var(--g2);
  overflow:hidden; cursor:pointer; transition:transform .2s;
}
.prev-item:hover{ transform:translateY(-2px) }
.prev-item img{ width:100%; height:100px; object-fit:cover }
.prev-info{ padding:8px }
.prev-ref{ font-size:9px; color:var(--g4) }
.prev-name{ font-size:11px; font-weight:600; color:var(--k) }

.hc-promo{
  display:flex; align-items:center; gap:12px; margin-top:1rem;
  padding:10px 14px; background:var(--g1); border-radius:8px; border:1px solid var(--g2);
}
.hc-promo-icon{
  width:32px; height:32px; background:var(--k); color:white; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0;
}
.hc-promo-title{ font-size:12px; font-weight:700; color:var(--k) }
.hc-promo-sub{ font-size:11px; color:var(--g4) }

/* Botones generales */
.btn-solid{
  background:var(--k); color:white; border:none;
  padding:13px 28px; border-radius:var(--r); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.btn-solid:hover{ background:var(--k2); transform:translateY(-1px) }
.btn-line{
  background:white; color:var(--k); border:1px solid var(--g2);
  padding:13px 28px; border-radius:var(--r); font-size:13px; cursor:pointer; transition:all .2s;
}
.btn-line:hover{ border-color:var(--g3); transform:translateY(-1px) }
.btn-white{
  background:white; color:var(--k); border:none;
  padding:14px 32px; border-radius:var(--r); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.btn-white:hover{ background:var(--g1); transform:translateY(-1px) }