/* =============================================================
   Hero (index.html only)
   ============================================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 1rem);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
@media (max-width: 720px) { .hero-bg { object-position: 54% 20%; } }
/* Velo premium: navy diagonal (más oscuro tras el texto, a la izquierda) +
   protección vertical arriba/abajo + un sutil resplandor dorado. Aporta
   sofisticación y disimula la resolución limitada de la foto original. */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(6,30,58,.92) 0%, rgba(6,30,58,.78) 44%, rgba(6,30,58,.48) 100%),
    linear-gradient(180deg, rgba(6,30,58,.5) 0%, rgba(6,30,58,.12) 34%, rgba(6,30,58,.5) 100%),
    radial-gradient(120% 120% at 14% 18%, rgba(169,121,43,.12) 0%, transparent 55%);
}
.hero-overlay::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 26px);
}
.hero-content { position: relative; z-index: 2; padding-bottom: 1.5rem; color: var(--bg); max-width: 720px; }

/* Especialidades como badges enlazados a los tipos de abordaje */
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.7rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border: 1px solid rgba(169,121,43,.5); border-radius: 999px;
  background: rgba(169,121,43,.08); color: var(--accent-2);
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.hero-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
.hero-badge:hover { background: rgba(169,121,43,.2); border-color: var(--accent-2); transform: translateY(-1px); }
.hero-title { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: 1.2rem; }
.hero-title em { font-style: italic; color: var(--accent-2); }
.hero-sub { font-size: 1.15rem; color: rgba(248,246,241,.86); max-width: 52ch; margin-bottom: 2rem; }
.hero-sub strong { color: var(--bg); font-weight: 600; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-actions .btn-ghost { color: var(--bg); border-color: rgba(248,246,241,.4); }
.hero-actions .btn-ghost:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* Enlaces rápidos (acceso directo + enlazado interno SEO) */
.hero-quicklinks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.7rem; }
.hero-quicklinks a {
  position: relative; color: rgba(248,246,241,.72); font-size: .84rem; font-weight: 500;
  text-decoration: none; padding-bottom: 2px; transition: color .25s var(--ease-out);
}
.hero-quicklinks a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
  background: var(--accent-2); transition: width .25s var(--ease-out);
}
.hero-quicklinks a:hover { color: var(--accent-2); }
.hero-quicklinks a:hover::after { width: 100%; }