/* ═══════════════════════════════════════════════════════════════════════════
   SERV-B · `#servicios` REDISEÑADA — sin vídeo, sin explicación, sólo texto
   con marcas dibujadas. NO es el sitio: copia del index con `assets` y `media`
   enlazados al v3 real, y con ESTA sección reescrita entera en el marcado.

   🔴 NO ES UN CAMBIO DE PIEL. La de producción está construida alrededor de una
      PELÍCULA: marco de cartel, vídeo al pasar el cursor, barra de progreso,
      pestañas de tablist y una segunda fila de columnas debajo con la
      descripción. Meterle dibujos a línea dentro de ese chasis dejaba cada
      dibujo nadando en un marco pensado para otra cosa. Aquí la maquinaria se
      quita DEL MARCADO, no se esconde con CSS — así que tampoco quedan clases
      `peli` que el CSS y el JS de la tira puedan seguir agarrando.

   🔴 TRES RENGLONES, NO TRES COLUMNAS. Primera versión: tres columnas de prosa
      de 38ch con un icono de 70px encima. Plano — y con razón: al quitar la
      imagen, la sección perdió su única fuente de ESCALA y se quedó con tres
      bloques idénticos del mismo tamaño y del mismo tono. El ancho completo es
      lo que la devuelve: el nombre puede ir a tamaño de titular, la marca puede
      medir 128px, y los tres registros —nombre / por qué / qué recibes— caen en
      columnas distintas, que es jerarquía de verdad y no sangrías.

   🔴 LA DESCRIPCIÓN YA NO LISTA LOS ENTREGABLES. Decía «Va con tienda completa,
      cobro en línea, correos de venta y la capacitación» y esa misma lista es
      ahora la cuarta columna: la misma cosa dos veces en el mismo renglón. El
      párrafo se queda con el PORQUÉ; la lista, con el QUÉ.

   ⚠️ EL TITULAR ES UNA DECISIÓN DE CONTENIDO. Decía «No te lo contamos. TE LO
      ENSEÑAMOS.» y la entradilla prometía «tres películas». Sin vídeo eso es
      mentira. Titular nuevo, entradilla fuera — paco tiene que aprobar la frase.
   ═══════════════════════════════════════════════════════════════════════════ */

#servicios{ position:relative; isolation:isolate }

/* ── EL VELO ───────────────────────────────────────────────────────────────
   El eclipse es el motivo de la sección y en la cabecera funciona. Detrás de
   los renglones no: el halo caía justo bajo la columna del medio y el texto
   competía con una fuente de luz. Se apaga DESDE donde empiezan los renglones,
   con la transición larga para que no se vea una línea de corte. */
.ofis-velo{
  position:absolute; left:0; right:0; top:20%; bottom:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,9,12,0) 0%, rgba(8,9,12,.86) 18%, var(--tinta) 42%, var(--tinta) 100%);
}

/* ── EL RENGLÓN ───────────────────────────────────────────────────────────── */
#servicios .ofis{
  display:grid; gap:0;
  margin-top:clamp(48px, 6vw, 96px);
}

#servicios .ofi{
  position:relative;
  display:grid;
  grid-template-columns:
    clamp(84px, 8.5vw, 128px)      /* la marca */
    minmax(150px, .8fr)            /* nombre + plazo */
    minmax(0, 1.35fr)              /* por qué */
    minmax(0, 1fr);                /* qué recibes */
  align-items:start;
  gap:clamp(20px, 3vw, 56px);
  padding:clamp(30px, 3.4vw, 52px) 0 clamp(34px, 3.8vw, 58px);
  /* la línea de tiempo del propio renglón: cada uno se revela cuando le toca,
     no los tres a la vez. Va con NOMBRE porque `view()` a secas mide el
     elemento donde se declara y eso deja a los hijos midiéndose solos. */
  view-timeline:--ofi-fila block;
}
/* el último cierra el bloque: sin él la sección termina en un renglón abierto */
#servicios .ofi:last-child{ border-bottom:1px solid var(--tx-linea) }

/* el filo de arriba se DIBUJA de izquierda a derecha; es el mismo gesto que ya
   usa la costura del respiro, y evita que los tres aparezcan de golpe */
#servicios .ofi__filo{
  position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--tx-linea);
  transform-origin:0 50%; scale:0 1;
  animation:ofi_filo linear both;
  animation-timeline:--ofi-fila;
  animation-range:entry 24% cover 34%;
  transition:background .45s var(--curva);
}
@keyframes ofi_filo{ to{ scale:1 1 } }

/* ── LA MARCA ──────────────────────────────────────────────────────────────
   Dibujo a línea con el vocabulario del sitio —la pantalla, el filo encendido,
   los carriles que convergen, la pila de piezas—, no un icono de librería. Y se
   DIBUJA: `pathLength="1"` normaliza todos los trazos a la misma longitud, así
   que un solo par de valores sirve para los doce y no hay que medir ninguno. */
#servicios .ofi__marca{ display:block; align-self:start }
#servicios .ofi__marca svg{ display:block; width:100%; height:auto }
#servicios .ofi__marca path,
#servicios .ofi__marca circle{
  stroke-dasharray:1 1; stroke-dashoffset:1; stroke-width:.035em;
  vector-effect:non-scaling-stroke;
  animation:ofi_traza linear both;
  animation-timeline:--ofi-fila;
  animation-range:entry 30% cover 44%;
}
@keyframes ofi_traza{ to{ stroke-dashoffset:0 } }
#servicios .ofi__marca .t1  { stroke:rgba(237,239,243,.66); stroke-width:1.7 }
#servicios .ofi__marca .t2  { stroke:rgba(237,239,243,.36); stroke-width:1.3 }
#servicios .ofi__marca .t3  { stroke:rgba(237,239,243,.20); stroke-width:1.1 }
#servicios .ofi__marca .oro { stroke:var(--oro);            stroke-width:2.2 }
/* 🔴 EL PLANO DE DELANTE VA RELLENO DE TINTA. Sin relleno, los carriles de
   Sistemas y los dos planos de atrás de Contenido se ven ATRAVESANDO el de
   delante: el dibujo deja de leerse como tres objetos a distintas distancias y
   pasa a ser una maraña de líneas. El relleno es el mismo negro de la página,
   así que no se ve — sólo TAPA, que es todo lo que tiene que hacer. */
#servicios .ofi__marca .fondo{ fill:var(--tinta) }

/* ── LOS TRES REGISTROS ────────────────────────────────────────────────────
   La jerarquía se hace SUBIENDO DE TONO y cambiando de familia, no engordando:
   el nombre en display sobre `--tx-1`, el plazo en mono sobre `--tx-3`, el
   porqué en texto sobre `--tx-2`, y los entregables otra vez en `--tx-1` porque
   son la respuesta a la pregunta que trae quien lee esto. */
#servicios .ofi__id{ align-self:start }
#servicios .ofi__nom{
  font-family:var(--display); font-weight:var(--p-voz);
  font-size:clamp(1.75rem, 2.6vw, 2.375rem); line-height:1.05;
  letter-spacing:-.025em; color:var(--tx-1); margin:0;
}
#servicios .ofi__plazo{
  font-size:var(--t6); letter-spacing:.04em; color:var(--tx-3);
  margin:.7em 0 0;
}
#servicios .ofi__dicho{
  font-size:var(--t4); line-height:1.55; color:var(--tx-2);
  margin:0; max-width:42ch;
}
#servicios .ofi__entrega{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.55em;
  font-size:var(--t5); line-height:1.35; color:var(--tx-1);
}
#servicios .ofi__entrega li{
  position:relative; padding-left:1.15em;
}
/* el guion es un FILO CORTO, no un punto: el punto de viñeta es mobiliario de
   documento y aquí el vocabulario ya es la línea */
#servicios .ofi__entrega li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:.6em; height:1px; background:var(--tx-3);
}

/* la entrada del texto: sube y aparece, escalonada por columna dentro del mismo
   renglón — así el ojo lee nombre → porqué → entrega en ese orden */
#servicios .ofi__id,
#servicios .ofi__dicho,
#servicios .ofi__entrega{
  animation:ofi_sube linear both;
  animation-timeline:--ofi-fila;
}
#servicios .ofi__id     { animation-range:entry 28% cover 40% }
#servicios .ofi__dicho  { animation-range:entry 34% cover 46% }
#servicios .ofi__entrega{ animation-range:entry 40% cover 52% }
@keyframes ofi_sube{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}

/* ── EL RENGLÓN VIVO ───────────────────────────────────────────────────────
   No es un botón —no lleva a ningún lado— así que el estado es de LECTURA: el
   filo se calienta y la marca sube de tono. Nada se mueve de sitio. */
#servicios .ofi:hover .ofi__filo{ background:rgba(216,197,140,.5) }
#servicios .ofi:hover .ofi__marca .t1{ stroke:rgba(237,239,243,.85) }
#servicios .ofi__marca .t1,
#servicios .ofi__marca .t2{ transition:stroke .45s var(--curva) }

/* ── MÓVIL ────────────────────────────────────────────────────────────────
   Cuatro columnas no caben en 390. Se apilan, y al apilarse el filo de arriba
   pasa a ser el separador entre oficios. La marca baja de tamaño pero NO
   desaparece: es lo único gráfico que le queda a la sección. */
@media (max-width:900px){
  #servicios .ofi{
    grid-template-columns:clamp(64px, 16vw, 88px) 1fr;
    gap:clamp(16px, 4vw, 26px) clamp(18px, 5vw, 28px);
    align-items:center;
  }
  #servicios .ofi__marca{ grid-row:1; grid-column:1 }
  #servicios .ofi__id   { grid-row:1; grid-column:2 }
  #servicios .ofi__dicho,
  #servicios .ofi__entrega{ grid-column:1 / -1; align-self:start }
  #servicios .ofi__dicho{ max-width:none }
  .ofis-velo{ top:30% }
}

/* ── SIN LÍNEA DE TIEMPO DE SCROLL ─────────────────────────────────────────
   `animation-timeline` no está en todas partes. Donde no está, `both` deja los
   fotogramas iniciales puestos y la sección se queda en `opacity:0` — invisible
   y sin un error que lo diga. Esta consulta la enciende entera. */
@supports not (animation-timeline: view()){
  #servicios .ofi__filo{ scale:1 1 }
  #servicios .ofi__marca path,
  #servicios .ofi__marca circle{ stroke-dashoffset:0 }
  #servicios .ofi__id,
  #servicios .ofi__dicho,
  #servicios .ofi__entrega{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  #servicios .ofi__filo{ animation:none; scale:1 1 }
  #servicios .ofi__marca path,
  #servicios .ofi__marca circle{ animation:none; stroke-dashoffset:0 }
  #servicios .ofi__id,
  #servicios .ofi__dicho,
  #servicios .ofi__entrega{ animation:none; opacity:1; transform:none }
}