/* =============================================================
   Dentlion · hero.css  ·  Portada de la página de Inicio
   ============================================================= */
.hero {
  position: relative; isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);     /* el hero sube bajo el header translúcido */
  min-height: min(94vh, 780px);
  display: flex; align-items: center;
  color: #eaf6f8; background: var(--grad-hero); overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.26; filter: saturate(1.05);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 78% 16%, rgba(65, 204, 217, 0.28), transparent 55%),
    linear-gradient(120deg, rgba(5, 29, 54, 0.92), rgba(11, 108, 122, 0.4));
}
.hero__inner {
  padding-block: calc(var(--nav-h) + 2.5rem) 3rem;
  max-width: 880px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(65, 204, 217, 0.14);
  border: 1px solid rgba(65, 204, 217, 0.35);
  color: var(--teal-200);
  padding: 0.45rem 0.95rem; border-radius: var(--r-pill);
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400);
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}
.hero h1 { color: #fff; margin-bottom: 1rem; max-width: 14ch; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--teal-400), var(--gold-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
  font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.9);
  max-width: 60ch; margin-bottom: 1.75rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero__trust {
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem;
}
.hero__trust-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__trust-item strong {
  font-family: var(--font-head); font-size: 1.7rem; font-weight: 700;
  color: var(--teal-200); line-height: 1;
}
.hero__trust-item span {
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 420px) {
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (min-width: 560px) {
  .hero__actions .btn { flex: 0 0 auto; }
}