/* ==========================================================================
   Servicios
   ========================================================================== */

/* ---- Índice de la página ------------------------------------------------- */

.indice {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.indice-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.indice-enlace {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  transition: background-color .2s, color .2s;
}

.indice-enlace:last-child { border-right: 1px solid var(--line); }

.indice-enlace:hover {
  background: var(--paper);
  color: var(--c3);
}

.indice-num {
  color: var(--c3);
  font: 500 .74rem/1 var(--ff-mono);
  letter-spacing: .1em;
}

.indice-enlace .icono {
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform .3s var(--ease), color .2s;
}

.indice-enlace:hover .icono {
  color: var(--c3);
  transform: rotate(90deg) translateX(3px);
}

/* ---- Ficha de servicio: columna lateral fija ----------------------------- */

.ficha { border-bottom: 1px solid var(--line); }

.ficha-grilla {
  display: grid;
  grid-template-columns: .32fr .68fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.ficha-lado {
  position: sticky;
  top: 116px;
}

/* El número es texto SVG para poder trazar su contorno y luego rellenarlo */
.ficha-num {
  display: block;
  width: clamp(150px, 16vw, 208px);
  height: auto;
  overflow: visible;
}

.ficha-num-texto {
  fill: var(--c3);
  stroke: var(--c3);
  stroke-width: 1.2;
  font-family: var(--ff-display);
  font-size: 132px;
  font-style: italic;
  letter-spacing: -.02em;
}

.js [data-draw] .ficha-num-texto {
  fill-opacity: 0;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}

.js [data-draw].in .ficha-num-texto { animation: dibujar 2.2s var(--ease-draw) forwards, rellenar .9s ease 1.5s forwards; }

.ficha-ilustra {
  display: grid;
  place-items: center;
  aspect-ratio: 20 / 11;
  margin-top: 28px;
  padding: 8% 7% 6%;
}

.ficha-etiqueta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--ink-3);
  font: 700 .72rem/1.4 var(--ff-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ficha-etiqueta .icono {
  width: 18px;
  height: 18px;
  color: var(--c3);
}

.ficha-bajada {
  max-width: 54ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 1.14rem;
}

.ficha-datos {
  margin-top: 36px;
  border-top: 1px solid var(--line-strong);
}

.ficha-datos div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-block: 18px;
}

.ficha-datos .forma--linea::after { background: var(--line); }

.ficha-datos dt {
  color: var(--c3);
  font: 500 .72rem/1.4 var(--ff-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ficha-datos dd {
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 500;
}

.ficha-secuencia,
.ficha-foto,
.ficha-pieza { margin-block: 40px; }

/* Secuencia de piezas unidas por flechas */
.ficha-secuencia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.ficha-secuencia li { position: relative; }

.ficha-secuencia li + li::before {
  content: "→";
  position: absolute;
  left: -26px;
  top: calc(50% - 22px);
  color: var(--c3);
  font-size: 1.1rem;
  line-height: 1;
}

.ficha .escena {
  overflow: hidden;
  border-radius: 22px;
}

.ficha-secuencia .espec { aspect-ratio: 1 / 1; }

.ficha-pie {
  display: block;
  margin-top: 14px;
  color: var(--ink-3);
  font: 500 .72rem/1.4 var(--ff-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ficha-foto {
  overflow: hidden;
  border-radius: 24px;
}

.ficha-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 35%;
}

.ficha-pieza .espec { aspect-ratio: 16 / 8; }

/* ---- Respaldo técnico ---------------------------------------------------- */

.respaldo {
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(61, 87, 219, .42) 0%, transparent 62%),
    var(--c5);
}

.respaldo-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.respaldo-item {
  padding: 30px 28px 34px;
  border: 1px solid var(--linea-2);
  border-radius: var(--r-lg);
  background: rgba(192, 191, 237, .07);
}

.respaldo-icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--c1);
  color: var(--c5);
}

.respaldo-icono .icono {
  width: 25px;
  height: 25px;
}

.respaldo-item h3 {
  margin-top: 28px;
  font-family: var(--ff-display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.08;
}

.respaldo-item p {
  margin-top: 12px;
  color: var(--txt-2);
  font-size: .97rem;
}

/* ---- Adaptación ---------------------------------------------------------- */

@media (max-width: 991.98px) {
  .ficha-grilla { grid-template-columns: 1fr; gap: 26px; }

  .ficha-lado {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px 20px;
  }

  .ficha-num { width: 130px; }
  .ficha-etiqueta { margin: 0 0 14px; }
  .ficha-ilustra { flex: 1 1 100%; max-width: 460px; margin-top: 20px; }
  .respaldo-grilla { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .indice-fila { grid-template-columns: 1fr; padding-inline: 0; }
  .indice-enlace { border-inline: 0 !important; border-top: 1px solid var(--line); padding-inline: var(--gutter); }
  .indice-enlace:first-child { border-top: 0; }

  .ficha-datos div { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
  .ficha-secuencia { grid-template-columns: 1fr; gap: 28px; max-width: 360px; }
  .ficha-secuencia li + li::before { display: none; }
  .ficha-foto img { aspect-ratio: 4 / 3; }
  .ficha-pieza .espec { aspect-ratio: 4 / 3; }
  .ficha-cuerpo > .pm-btn { width: 100%; }
}