/* =====================================================
   SERVICIOS
===================================================== */


/* ---------- CONTENEDOR ---------- */

.sv-shell {
  padding-left: 2rem;
  padding-right: 2rem;
}


/* =====================================================
   HERO
===================================================== */

.sv-hero {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.sv-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;

  color: var(--muted-foreground);
}

.sv-kicker > span:first-child {
  display: inline-block;

  width: 2rem;
  height: 1px;

  background: currentColor;

  opacity: .4;
}

.sv-title {
  margin-top: 2.5rem;

  max-width: 56rem;

  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;

  line-height: .95;
  letter-spacing: -.005em;

  text-transform: uppercase;
}

.sv-title i {
  font-family: var(--font-display);
  font-weight: 400;
}

.sv-intro {
  margin-top: 2.5rem;

  max-width: 36rem;

  padding-left: 1.5rem;

  border-left: 1px solid var(--border);

  color: var(--muted-foreground);

  font-size: 1rem;
  line-height: 1.65;
}


/* =====================================================
   NAVEGACIÓN DE ÁREAS
===================================================== */

.sv-area-nav {
  margin-top: 4rem;

  display: grid;
  gap: 1rem;
}

.sv-area-nav-card {
  position: relative;

  min-height: 220px;

  padding: 1.5rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;

  transition:
    filter .3s ease,
    transform .3s ease;
}

.sv-area-nav-card:hover {
  filter: brightness(1.05);
  transform: translateY(-4px);
}

.sv-area-nav-bottom {
  margin-top: 2.5rem;
}

.sv-area-nav-bottom strong {
  display: block;

  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;

  line-height: .95;
  letter-spacing: -.005em;

  text-transform: uppercase;
}

.sv-area-nav-bottom .label-eyebrow {
  margin-top: .75rem;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  opacity: .7;

  transition: transform .25s ease;
}

.sv-area-nav-bottom .label-eyebrow i {
  display: inline-block;

  width: 1rem;
  height: 1px;

  background: currentColor;

  transition: width .25s ease;
}

.sv-area-nav-card:hover .sv-area-nav-bottom .label-eyebrow {
  transform: translateX(4px);
}

.sv-area-nav-card:hover .sv-area-nav-bottom .label-eyebrow i {
  width: 1.5rem;
}

.sv-gmark {
  position: absolute;

  top: 1rem;
  right: 1rem;

  display: flex;
  align-items: baseline;

  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;

  opacity: .1;
}

.sv-gmark span {
  width: 2px;
  height: 1rem;

  background: currentColor;
}

.sv-gmark b {
  margin: 0 .25rem;
}


/* =====================================================
   ÁREAS DETALLADAS
===================================================== */

.sv-area {
  scroll-margin-top: 6rem;
}

.sv-area-grid {
  display: grid;
  grid-template-columns: 1fr;
}


/* ---------- BLOQUE DE COLOR ---------- */

.sv-area-main {
  position: relative;

  padding: 5rem 2rem;

  overflow: hidden;
}

.sv-area-big-g {
  position: absolute;

  top: 1.5rem;
  right: 1.5rem;

  display: flex;
  align-items: baseline;

  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;

  opacity: .15;
}

.sv-area-big-g span {
  width: 2px;
  height: 1.5rem;

  background: currentColor;
}

.sv-area-big-g b {
  margin: 0 .35rem;
}

.sv-area-number {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sv-area-number i {
  display: inline-block;

  width: 2.5rem;
  height: 1px;

  background: currentColor;

  opacity: .3;
}

.sv-area-main h2 {
  margin-top: 2rem;

  max-width: 30rem;

  font-size: 2.5rem;
  line-height: .95;
}

.sv-area-intro {
  margin-top: 2rem;

  max-width: 30rem;

  color: color-mix(in oklab, var(--ink) 80%, transparent);

  font-size: .95rem;
  line-height: 1.65;
}


/* El original usa el mismo color del área
   como highlight sobre sí mismo. Para que
   visualmente se mantenga el gesto sin perder
   legibilidad, dejamos el texto sólido. */

.sv-highlight-teal,
.sv-highlight-yellow,
.sv-highlight-orange {
  padding: 0 .05em;

  color: var(--ink);
}

.sv-teal-dot {
  color: var(--brand-teal);
}

.sv-yellow-dot {
  color: var(--brand-yellow);
}

.sv-orange-dot {
  color: var(--brand-orange);
}


/* ---------- PARA QUIÉN ---------- */

.sv-forwho {
  margin-top: 2.5rem;
}

.sv-tags {
  margin-top: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.sv-tags span {
  padding: .375rem .75rem;

  border: 1px solid color-mix(
    in oklab,
    var(--ink) 20%,
    transparent
  );

  font-size: .75rem;
  line-height: 1;

  letter-spacing: .08em;
  text-transform: uppercase;

  transition:
    background .2s ease,
    color .2s ease;
}

.sv-tags span:hover {
  background: var(--ink);
  color: var(--cream);
}


/* =====================================================
   SERVICIOS INCLUIDOS
===================================================== */

.sv-area-services {
  padding: 4rem 2rem;
}

.sv-services-list {
  margin-top: 2.5rem;

  display: grid;
  gap: 2rem;
}

.sv-service {
  padding-bottom: 2rem;

  border-bottom: 1px solid var(--border);

  transition: border-color .25s ease;
}

.sv-service:hover {
  border-color: var(--ink);
}

.sv-service {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.sv-service-icon {
  flex: 0 0 auto;

  margin-top: .15rem;

  font-size: 1.25rem;
  line-height: 1;
}

.sv-service-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sv-service-title h3 {
  font-size: 1.125rem;
  line-height: 1.05;
}

.sv-service p {
  margin-top: .75rem;

  max-width: 32rem;

  color: var(--muted-foreground);

  font-size: .875rem;
  line-height: 1.65;
}


/* ---------- COLORES DE ÁREA ---------- */

.sv-teal {
  color: var(--brand-teal);
}

.sv-yellow {
  color: var(--brand-yellow);
}

.sv-orange {
  color: var(--brand-orange);
}


/* =====================================================
   METODOLOGÍA
===================================================== */

.sv-method {
  background: var(--ink);
  color: var(--cream);
}

.sv-method .sv-shell {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.sv-method-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;

  color: color-mix(
    in oklab,
    var(--cream) 60%,
    transparent
  );
}

.sv-method-kicker > span:first-child {
  display: inline-block;

  width: 2rem;
  height: 1px;

  background: currentColor;
}

.sv-method h2 {
  margin-top: 2.5rem;

  max-width: 48rem;

  font-size: 2rem;
  line-height: .95;

  color: var(--cream);
}

.sv-method-grid {
  margin-top: 4rem;

  display: grid;
  gap: 2rem;
}

.sv-method-card {
  padding-top: 1.5rem;

  border-top: 1px solid color-mix(
    in oklab,
    var(--cream) 15%,
    transparent
  );
}

.sv-method-card > span {
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: 300;

  color: var(--brand-yellow);
}

.sv-method-card h3 {
  margin-top: 1rem;

  font-size: 1.125rem;
  line-height: 1.05;

  color: var(--cream);
}

.sv-method-card p {
  margin-top: .75rem;

  color: color-mix(
    in oklab,
    var(--cream) 70%,
    transparent
  );

  font-size: .875rem;
  line-height: 1.65;
}


/* =====================================================
   DEMO
===================================================== */

.sv-demo {
  scroll-margin-top: 6rem;
}

.sv-demo .sv-shell {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.sv-demo-grid {
  display: grid;
  gap: 3.5rem;
}

.sv-demo h2 {
  margin-top: 2rem;

  max-width: 36rem;

  font-size: 2.5rem;
  line-height: .95;
}

.sv-demo > .sv-shell p,
.sv-demo-grid > div:first-child > p {
  margin-top: 2rem;

  max-width: 30rem;

  color: color-mix(
    in oklab,
    var(--ink) 80%,
    transparent
  );

  font-size: .875rem;
  line-height: 1.65;
}


/* =====================================================
   CTA FINAL
===================================================== */

.sv-final-cta .sv-shell {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.sv-final-cta-grid {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: space-between;

  gap: 2.5rem;
}

.sv-final-cta-grid > div {
  max-width: 42rem;
}

.sv-final-cta h2 {
  margin-top: 1.5rem;

  max-width: 24ch;

  font-size: 2rem;
  line-height: .95;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (min-width: 768px) {

  .sv-title {
    font-size: 3.75rem;
  }

  .sv-intro {
    font-size: 1.125rem;
  }

  .sv-area-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sv-area-nav-card {
    min-height: 250px;
  }

  .sv-area-nav-bottom strong {
    font-size: 2.25rem;
  }

  .sv-area-main h2 {
    font-size: 3rem;
  }

  .sv-area-intro,
  .sv-service p {
    font-size: 1rem;
  }

  .sv-service-title h3 {
    font-size: 1.25rem;
  }

  .sv-method h2 {
    font-size: 3rem;
  }

  .sv-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-demo h2 {
    font-size: 3rem;
  }

  .sv-demo-grid > div:first-child > p {
    font-size: 1rem;
  }

  .sv-final-cta h2 {
    font-size: 3rem;
  }

}


@media (min-width: 1024px) {

  .sv-shell {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .sv-hero {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sv-title {
    font-size: 4.5rem;
  }

  .sv-area-nav-card {
    padding: 2rem;
  }

  .sv-gmark {
    top: 1.5rem;
    right: 1.5rem;

    font-size: 1.6rem;
  }

  .sv-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-area-main {
    padding: 7rem 4rem;
  }

  .sv-area-big-g {
    top: 2.5rem;
    right: 2.5rem;

    font-size: 2.5rem;
  }

  .sv-area-main h2 {
    font-size: 3.75rem;
  }

  .sv-area-services {
    padding: 7rem 4rem;
  }

  .sv-method .sv-shell {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sv-method-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sv-demo .sv-shell {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sv-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6rem;
  }

  .sv-demo h2 {
    font-size: 3rem;
  }

  .sv-final-cta .sv-shell {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sv-final-cta-grid {
    flex-direction: row;
    align-items: flex-end;
  }

}