/* ═══════════════════════════════════════════════════════════════════════════
   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;
  /* 🔴 ERAN CUATRO COLUMNAS Y AHORA SON TRES. La cuarta eran los entregables,
     que repetian lo que ya decia la tercera. Cuatro celdas por renglon obligan
     a leer de izquierda a derecha y volver: eso es una hoja de calculo, no una
     pagina, y es exactamente lo que se sentia. */
  grid-template-columns:
    clamp(84px, 8.5vw, 128px)      /* la marca */
    minmax(160px, .7fr)            /* el nombre */
    minmax(0, 1.9fr);              /* la frase */
  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;
  /* 🔴 EL RANGO NO PUEDE ACABAR EN `cover`. Ver la nota de `.ofi__nom`. */
  animation-range:entry 15% entry 80%;
  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 25% entry 95%;
}
@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 .ofi__canto { stroke:var(--acento);            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. */
/* CAPA 6 · sep-2026 · el nombre del oficio corría a 38 px arriba y 28 abajo.
   El 28 es token; el 38 no lo es y no existe en ningún otro sitio del sistema.
   🔴 SUBIO A 48 Y FUE UN ERROR — paco: «se ve muy grande, cero estetico».
   El razonamiento («con dos capas, 28 y 19 quedan a un escalon y el renglon se
   lee plano») estaba mal planteado: la jerarquia de esta lista NO tenia que
   venir del tamano. Con 48 el nombre pesa mas que el titular de varias
   secciones y compite con la cabecera que esta cuatro centimetros arriba; la
   referencia no pone un titulo de 48 en una lista de servicios ni una sola vez.
   Vuelve a `--t3` (28), y la separacion con la frase la pone el TONO, que es la
   regla de la casa: nombre en `--tx-1`, frase en `--tx-2`. */
#servicios .ofi__nom{
  font-family:var(--display); font-weight:var(--p-voz);
  font-size:var(--t3); line-height:1.05;
  letter-spacing:-.025em; color:var(--tx-1); margin:0;
}
/* La frase vuelve al cuerpo (19). Lo que la sacaba de «celda de tabla» no era
   el tamano: era que ya no tiene una lista de entregables al lado compitiendo
   por el mismo renglon. Sola y en `--tx-2` bajo un nombre en `--tx-1`, se lee
   como lo que es. */
#servicios .ofi__dicho{
  font-size:var(--t4); line-height:1.5; color:var(--tx-2);
  margin:0; max-width:44ch;
}
/* EL CAMINO AL DETALLE. Doce renglones de lista se cambiaron por este enlace:
   los entregables viven en `/que-hacemos`, mas completos, y esta seccion no
   enlazaba alli desde ninguna parte. */
#servicios .ofis__mas{
  margin:clamp(28px, 3vw, 44px) 0 0;
  padding-left:calc(clamp(84px, 8.5vw, 128px) + clamp(20px, 3vw, 56px));
  font-size:var(--t5);
}

/* ── LA ENTRADA DEL TEXTO ──────────────────────────────────────────────────
   🔴 ERA UN FADE-UP DE 16 px Y ESO ES EL GESTO MÁS GENÉRICO QUE EXISTE (paco,
   sep-2026: «no son wow, no están trabajadas, no está personalizado»). Medido
   en todo el sitio: 16 px de recorrido de mediana con opacidad. A esa distancia
   no hay nada que seguir — el texto ya está puesto antes de que el ojo llegue.

   Subir el número no era la respuesta: el código documenta que el recorrido se
   bajó de 46 px a 14 A PROPÓSITO («46 era un fade-up de plantilla»). Un fade-up
   más largo sigue siendo un fade-up.

   Lo que cambia es el GESTO: el texto ya no aparece, SALE de detrás de una
   máscara. Y no es inventar vocabulario — el sitio ya lo tiene y sólo lo usaba
   en dos sitios: los titulares de los pines corren con `SplitText`
   (`mask:'lines'`) a `yPercent:108`, las imágenes abren con `.cortina`, y el
   filo de este mismo renglón se DIBUJA. Extenderlo aquí es hacerlo suyo.

   La caja (`.ofi__nom` / `.ofi__dicho`) es la máscara: recorta. El `<span
   class="ofi__ln">` de dentro es lo que viaja, desde 112% de su propia altura.
   La opacidad NO participa: una máscara que además se desvanece vuelve a ser un
   fade con pasos extra. Se ve o no se ve.

   ⚠️ EL 112 NO ES 100. A 100 el borde inferior de la caja y la línea base del
   texto coinciden, y las colas de la «q» y la «y» de `.ofi__dicho` asoman un
   par de píxeles por debajo de la máscara en reposo. El 12% extra es el hueco
   del descendente. */
#servicios .ofi__nom,
#servicios .ofi__dicho{ overflow:clip }
#servicios .ofi__ln{ display:block }

/* 🔴 EL REPOSO CUELGA DE `.ofis--armado`, QUE PONE EL JS. Ver la nota larga al
   final de `caliber.js`: si el script no corre, el texto se ve. Escondiendo
   desde aqui y dependiendo del JS para mostrar, el dia que algo falle la
   seccion se queda con tres renglones vacios y ni un error que lo diga.

   Y el gesto ya NO va por scroll: iba con `animation-timeline: --ofi-fila` y
   medido en produccion duraba 120 px y terminaba en el borde inferior de la
   pantalla. Un rango que acaba en `entry 100%` no puede durar mas que la altura
   del elemento, y acabar despues es recrear el bug de «a veces si y a veces
   no». Va por TIEMPO, que es como lo hace la referencia. */
#servicios .ofis--armado .ofi .ofi__ln{
  transform:translateY(112%);
  /* `will-change` se declara EN EL REPOSO, no al disparar: puesto en el mismo
     cuadro en que arranca la transicion, el navegador ya compuso el primero sin
     capa y el arranque se ve a tirones. */
  will-change:transform;
}

/* ── 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(237,239,243,.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 ────────────────────────────────────────────────────────────────
   Tres 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__nom  { grid-row:1; grid-column:2 }
  #servicios .ofi__dicho{ grid-column:1 / -1; align-self:start; max-width:none }
  /* la frase de 28 px es de escritorio: en 390 con `--t3` un renglon cabe en
     seis palabras y el bloque se vuelve una escalera. Vuelve al cuerpo. */
  #servicios .ofi__dicho{ font-size:var(--t4); line-height:1.45 }
  #servicios .ofis__mas{ padding-left:0 }
  .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 }
  /* ⚠️ Aqui quedaron huerfanos `.ofi__id` y `.ofi__entrega` al colapsar las
     capas. Una regla huerfana no falla: simplemente deja de aplicar, y el dia
     que alguien reutilice el nombre hereda un estado que no pidio. */
  /* 🔴 CON MÁSCARA ESTE RESPALDO IMPORTA MÁS QUE ANTES. Con el fade-up, no
     encender dejaba el texto a `opacity:0` — invisible. Con la máscara lo deja
     además DESPLAZADO 112% dentro de una caja que recorta: no es que no se vea,
     es que el renglón mide lo mismo y está vacío. Se apaga el recorte también,
     no sólo la animación. */
  #servicios .ofi__nom,
  #servicios .ofi__dicho{ overflow:visible }
  #servicios .ofi__ln{ 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__nom,
  #servicios .ofi__dicho{ overflow:visible }
  #servicios .ofi__ln{ transform:none; will-change:auto }
}