/* onclic.shop — Página Home */
.hero {
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--white) 100%);
  padding-block: var(--sp-7);
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-8); } }
.hero__title { margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-lg); color: var(--gray-700); max-width: 620px; margin: 0 auto var(--sp-6); }
.hero__micro { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--gray-500); }
.hero__micro .icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent-600); }
.tld-feature { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: center; margin-top: var(--sp-4); }
.tld-feature__item { font-size: var(--fs-sm); color: var(--gray-600, var(--gray-700)); }
.tld-feature__item strong { color: var(--brand-700); font-family: var(--font-mono); margin-left: var(--sp-1); }
.hero__transfer { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.hero__transfer a { font-weight: var(--fw-medium); }

/* Rejilla de extensiones populares (tarjetas con precio) */
.tldcard-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .tldcard-grid { grid-template-columns: repeat(4, 1fr); } }
.tldcard { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-5); text-decoration: none; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tldcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.tldcard__ext { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--brand-900); }
.tldcard__price { color: var(--brand-700); font-weight: var(--fw-semibold); }
.tldcard__price small { color: var(--gray-500); font-weight: var(--fw-regular); font-family: var(--font-body); margin-left: 2px; }
.tldcard__cta { color: var(--brand-600); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-top: auto; }

/* Tarjetas de producto con ilustración (one-stop-shop) */
.prodcards { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .prodcards { grid-template-columns: repeat(3, 1fr); } }
.prodcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.prodcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prodcard__art svg { width: 100%; height: auto; display: block; }
.prodcard__art--a, .prodcard__art--c { background: var(--brand-50); }
.prodcard__art--b { background: var(--accent-100); }
.prodcard__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; text-align: left; }
.prodcard__body h3 { font-size: var(--fs-xl); color: var(--brand-900); }
.prodcard__body p { color: var(--gray-700); font-size: var(--fs-sm); }
.prodcard__price { color: var(--gray-700); }
.prodcard__price strong { color: var(--brand-700); font-family: var(--font-mono); font-size: var(--fs-lg); }
.prodcard__body .btn { margin-top: auto; }

.steps { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; padding: var(--sp-5); }
.step__num {
  width: 48px; height: 48px; margin: 0 auto var(--sp-3); border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg);
}

.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-6); }
.section__head p { margin-top: var(--sp-2); }

.section--alt { background: var(--brand-50); }
.footer__tagline { color: var(--brand-100); font-size: var(--fs-sm); }