/* ============================================================
   COECO CREATIVE — Página Servicios
   Todo va prefijado .svc- para no chocar con los estilos globales
   ============================================================ */

.svc-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
  z-index: 950;
  transition: width .08s linear;
}

.svc-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-px);
}

.svc-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 80px;
}

/* ── Secciones ── */
.svc-sec {
  padding: clamp(80px, 12vw, 168px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.svc-dark {
  background: var(--brown-dark);
  color: #fff;
}

.svc-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  display: block;
  margin-bottom: 22px;
}
.svc-kicker--lg {
  font-size: clamp(16px, 2.1vw, 22px);
  letter-spacing: .13em;
  margin-bottom: 20px;
}

.svc-giant {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
  font-size: clamp(38px, 6.4vw, 92px);
}
.svc-giant--sm { font-size: clamp(34px, 5.2vw, 74px); }

.svc-lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  opacity: .66;
  max-width: 34ch;
  margin: 24px auto 0;
}
.svc-dark .svc-lead { opacity: .62; }

.svc-hero .svc-giant { font-size: clamp(42px, 7.4vw, 104px); }

/* Títulos que deben quedar en líneas fijas, sin partirse:
   cada <span> es una línea; la letra se ajusta al ancho de pantalla. */
.svc-giant--lineas span { display: block; white-space: nowrap; }
.svc-hero .svc-giant--lineas { font-size: clamp(22px, 8vw, 88px); }
.svc-giant--1linea { white-space: nowrap; font-size: clamp(22px, 7vw, 80px); }
.svc-hero .svc-lead  { max-width: 38ch; }
.svc-hero .svc-frame { aspect-ratio: 16 / 9; }

/* ── Animación de entrada ── */
.rv {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  transition: opacity 1.05s cubic-bezier(.16, 1, .3, 1),
              transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * .1s);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ── Imágenes ── */
.svc-media {
  margin: clamp(46px, 6vw, 82px) auto;
  max-width: min(1080px, 100%);
}
.svc-media--full { max-width: min(1200px, 100%); }

.svc-frame {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--imgbg);
  box-shadow: 0 34px 74px -54px rgba(63, 39, 24, .5);
}
.svc-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}

.svc-imgcap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}
.svc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ── Enlaces y botones ── */
.svc-links {
  margin-top: 34px;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.svc-alink {
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .3s cubic-bezier(.16, 1, .3, 1);
}
.svc-alink:hover { gap: 12px; }

.svc-btns {
  margin-top: 38px;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1),
              background .3s, border-color .3s;
}
.svc-btn--primary {
  background: var(--orange);
  color: #fff;
}
.svc-btn--primary:hover {
  background: var(--brown);
  transform: translateY(-3px);
}
.svc-btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid var(--line);
}
.svc-dark .svc-btn--ghost { border-color: var(--line-dark); }
.svc-btn--ghost:hover {
  transform: translateY(-3px);
  border-color: currentColor;
}

/* ── Ficha técnica ── */
.svc-specs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(26px, 3.6vw, 54px);
  max-width: 1040px;
  margin: clamp(42px, 5vw, 60px) auto 0;
  text-align: left;
}
.svc-srow {
  flex: 1 1 0;
  min-width: 158px;
  max-width: 235px;
}
.svc-sk {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}
.svc-sv {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1.42;
  color: var(--brown);
  margin-top: 11px;
}
.svc-dark .svc-sv { color: #fff; }

/* ── Serigrafía inmersiva ── */
.svc-immersive {
  position: relative;
  height: 440vh;
  background: #140d08;
}
.svc-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #140d08;
}
.svc-ivideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
}
.svc-knock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.svc-ktext {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 215px;
  letter-spacing: -6px;
  fill: #000;
  transform-box: fill-box;
  transform-origin: center;
}
.svc-iscroll {
  position: absolute;
  bottom: 34px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  z-index: 3;
}

/* ── Proceso ── */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 44px);
  margin: clamp(44px, 6vw, 72px) auto 0;
  max-width: 1000px;
  text-align: left;
}
.svc-pn {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}
.svc-step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -.01em;
  color: var(--brown);
  margin-top: 16px;
}
.svc-dark .svc-step h3 { color: #fff; }
.svc-step p {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  opacity: .62;
  margin-top: 9px;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .svc-steps { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .svc-specs { gap: 24px 28px; }
  .svc-srow { flex: 1 1 40%; min-width: 140px; max-width: none; }
  .svc-ktext { font-size: 150px; letter-spacing: -4px; }
}
@media (max-width: 440px) {
  .svc-steps { grid-template-columns: 1fr; }
}

/* ── Accesibilidad: sin animación si el sistema lo pide ── */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .svc-frame img,
  .svc-ivideo { transform: none !important; }
}