/* =========================================================
   ESTRALIA · SERVICIOS.CSS
   Página: /servicios/
   Versión: template-compliant v9

   Este archivo solo contiene estilos propios del <main> de Servicios.
   No redefine header, menú, footer, cookies, WhatsApp ni clases comunes.
   ========================================================= */

:root {
  --svc-blue: rgb(15, 98, 254);
  --svc-blue-dark: rgb(10, 78, 210);
  --svc-ink: #111827;
  --svc-text: #1f2937;
  --svc-muted: #64748b;
  --svc-line: #e5e7eb;
  --svc-soft: #f5f7fb;
  --svc-dark: #111827;
  --svc-radius: 0;
  --svc-wrap: 1180px;
}

.page-servicios .site-main {
  background: #fff;
  color: var(--svc-text);
}

.svc-wrap {
  width: min(var(--svc-wrap), calc(100% - 40px));
  margin: 0 auto;
}

.svc-eyebrow {
  margin: 0 0 12px;
  color: var(--svc-blue);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(118px, 16vw, 170px) 0 clamp(70px, 9vw, 110px);
  background: #111827;
  color: #fff;
}

.svc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.svc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(17,24,39,0.92), rgba(17,24,39,0.74));
  pointer-events: none;
}

.svc-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 34px;
}

.svc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.76);
}

.svc-breadcrumb a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
}

.svc-breadcrumb a:hover {
  color: #fff;
}

.svc-hero__content {
  max-width: 860px;
}

.svc-hero h1 {
  margin: 0;
  max-width: 800px;
  color: #fff;
  font-size: clamp(2.35rem, 5.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.svc-hero__lead,
.svc-hero__sublead {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--svc-radius);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.svc-btn::after {
  content: '→';
  font-weight: 700;
}

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

.svc-btn--primary {
  background: var(--svc-blue);
  color: #fff;
}

.svc-btn--primary:hover {
  background: var(--svc-blue-dark);
  color: #fff;
}

.svc-btn--secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}

.svc-btn--secondary:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.svc-section {
  padding: clamp(70px, 9vw, 108px) 0;
}

.svc-section--soft {
  background: var(--svc-soft);
}

.svc-section--dark {
  background: var(--svc-dark);
  color: #fff;
}

.svc-section--dark .svc-eyebrow,
.svc-section--dark h2,
.svc-section--dark p {
  color: #fff;
}

.svc-section__head {
  max-width: 840px;
  margin-bottom: 34px;
}

.svc-section__head h2,
.svc-moment h2,
.svc-systems__grid h2,
.svc-final h2 {
  margin: 0;
  color: var(--svc-ink);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.svc-section--dark h2 {
  color: #fff;
}

.svc-section__head p,
.svc-moment p,
.svc-systems__grid p,
.svc-final p {
  margin: 16px 0 0;
  max-width: 760px;
  color: var(--svc-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.svc-section--dark .svc-section__head p {
  color: rgba(255,255,255,0.76);
}

.svc-section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: end;
  max-width: none;
}

.svc-section__head--split > p {
  margin: 0;
}

.svc-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--svc-line);
  border-left: 1px solid var(--svc-line);
}

.svc-entry {
  min-height: 270px;
  padding: clamp(24px, 3vw, 34px);
  border-right: 1px solid var(--svc-line);
  border-bottom: 1px solid var(--svc-line);
  color: var(--svc-text);
  text-decoration: none;
  background: #fff;
  transition: background-color .2s ease, transform .2s ease;
}

.svc-entry:hover {
  background: #f8fafc;
  transform: translateY(-2px);
}

.svc-entry__num {
  display: block;
  margin-bottom: 42px;
  color: var(--svc-blue);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1;
}

.svc-entry strong {
  display: block;
  margin-bottom: 12px;
  color: var(--svc-ink);
  font-size: 1.22rem;
  line-height: 1.25;
}

.svc-entry span:last-child {
  display: block;
  color: var(--svc-muted);
  line-height: 1.65;
}

.svc-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--svc-line);
  background: #fff;
}

.svc-list a {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  color: var(--svc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--svc-line);
}

.svc-list a::after {
  content: '→';
  color: var(--svc-blue);
  font-weight: 700;
}

.svc-list strong {
  color: var(--svc-ink);
  line-height: 1.3;
}

.svc-list span {
  color: var(--svc-muted);
  line-height: 1.55;
}

.svc-list a:hover strong,
.svc-list a:hover::after {
  color: var(--svc-blue-dark);
}

/* Refuerzo de interacción en el listado principal de servicios */
.svc-list a {
  padding-left: 16px;
  padding-right: 16px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.svc-list a:hover {
  background: rgba(15, 98, 254, 0.045);
  transform: translateX(2px);
}

.svc-moment__grid,
.svc-systems__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}

.svc-moment__cards,
.svc-system-cards {
  display: grid;
  gap: 14px;
}

.svc-moment__cards a,
.svc-system-cards a {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--svc-line);
  color: var(--svc-text);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.svc-moment__cards a::after,
.svc-system-cards a::after {
  content: '→';
  color: var(--svc-blue);
  font-weight: 700;
}

.svc-moment__cards a:hover,
.svc-system-cards a:hover {
  border-color: rgba(15, 98, 254, 0.45);
  transform: translateY(-1px);
}

.svc-system-card {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--svc-line);
  color: var(--svc-text);
}

.svc-moment__cards strong,
.svc-system-cards strong {
  color: var(--svc-ink);
  line-height: 1.3;
}

.svc-moment__cards span,
.svc-system-cards span {
  color: var(--svc-muted);
  line-height: 1.55;
}

.svc-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.svc-chip-grid a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
  font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease;
}

.svc-chip-grid a::after {
  content: '→';
  color: rgba(255,255,255,0.9);
}

.svc-chip-grid a:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.42);
}

.svc-final {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #0b0d12;
  color: #fff;
}

.svc-final__box {
  max-width: 860px;
}

.svc-final h2 {
  color: #fff;
}

.svc-final p {
  color: rgba(255,255,255,0.82);
}

.svc-final .svc-eyebrow {
  color: #fff;
}

.svc-final__note {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.72) !important;
}

@media (max-width: 980px) {
  .svc-wrap {
    width: min(100% - 28px, var(--svc-wrap));
  }

  .svc-hero {
    padding-top: 150px;
  }

  .svc-entry-grid,
  .svc-section__head--split,
  .svc-moment__grid,
  .svc-systems__grid {
    grid-template-columns: 1fr;
  }

  .svc-entry {
    min-height: auto;
  }

  .svc-entry__num {
    margin-bottom: 22px;
  }

  .svc-list a,
  .svc-moment__cards a,
  .svc-system-cards a {
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
  }

  .svc-list span,
  .svc-moment__cards span,
  .svc-system-cards span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .svc-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-btn {
    width: 100%;
  }

  .svc-hero h1 {
    font-size: clamp(2.1rem, 14vw, 3.5rem);
  }

  .svc-section {
    padding: 58px 0;
  }
}

.svc-hero__sublead {
  margin-top: 14px;
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
}

/* =========================================================
   SERVICIOS · HERO A ALTURA DE VENTANA · ESCRITORIO
   Ajuste quirúrgico: el hero ocupa exactamente el viewport
   sin alterar el responsive existente de tablet/móvil.
   ========================================================= */

@media (min-width: 981px) {
  .svc-hero {
    min-height: 100svh;
    height: 100svh;
    display: grid;
    place-items: center;
    padding: 0;
  }

  .svc-hero__inner {
    padding-top: var(--nav-h);
  }
}