/* ============================================================
   M&P — Catálogo de servicios

   Esta página es para encontrar rápido, no para leer. Se ve de
   un vistazo: una grilla densa, oscura, con la miniportada
   dibujada de cada servicio y el dato que lo define.

   El desarrollo largo de cada servicio vive en el home y en la
   ficha propia. Acá manda la velocidad de lectura.

   Es el mismo lenguaje del cierre del home (.serv-card): filete
   de 1px, filete rojo que crece al pasar por encima, motivo
   dibujado. style.css no se toca.
   ============================================================ */

:root {
  --sv-fondo:      #151C26;
  --sv-fondo-alt:  #19212C;
  --sv-panel:      #1D2634;
  --sv-linea:      #28323F;
  --sv-linea-viva: #37455A;
  --sv-titulo:     #FFFFFF;
  --sv-texto:      #9AAABB;
  /* Los datos chicos son texto que hay que poder leer, no
     decoración: sube hasta pasar 4.5:1 contra el fondo. */
  --sv-tenue:      #7C8CA0;
  --sv-acento:     #b3282d;
  --sv-azul-luz:   rgba(64, 104, 168, .16);
  --sv-trazo-fino: #55677C;
  --sv-trazo-med:  #8FA3B8;
  --sv-trazo-alto: #C6D2DE;
}

body { background: var(--sv-fondo); }

/* ============================================================
   La grilla
   ============================================================ */

.sv-cuerpo {
  background: var(--sv-fondo);
  padding: clamp(40px, 6vh, 72px) 0 clamp(52px, 8vh, 96px);
}

/* ============================================================
   Filas

   Sin cajas: cada servicio ocupa el ancho completo y lo único
   que lo separa del siguiente es un filete de 1px. Se lee como
   una hoja de especificaciones, que es lo que esta página es.
   ============================================================ */

.sv-lista {
  border-top: 1px solid var(--sv-linea);
}

.sv-fila {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: clamp(20px, 3.5vw, 46px);
  align-items: center;
  padding: clamp(22px, 3.2vh, 34px) 0;
  border-bottom: 1px solid var(--sv-linea);
  text-decoration: none;
  color: inherit;
  transition: background .25s ease;
}

/* El filete rojo entra desde la izquierda. Es el mismo gesto que
   la barra de las tarjetas del home, girado 90 grados. */
.sv-fila::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--sv-acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

@media (hover: hover) and (pointer: fine) {
  .sv-fila:hover { background: var(--sv-panel); }
  .sv-fila:hover::before { transform: scaleY(1); }
  .sv-fila:hover .sv-portada .fino  { stroke: #7C8EA3; }
  .sv-fila:hover .sv-portada .medio { stroke: var(--sv-trazo-alto); }
  .sv-fila:hover .sv-ir { color: #FFFFFF; }
}

.sv-fila:focus-visible {
  outline: 2px solid var(--sv-acento);
  outline-offset: -2px;
}

.sv-fila:focus-visible::before { transform: scaleY(1); }
.sv-fila:active { background: var(--sv-panel); }

/* ---------- la portada ---------- */

/* Es el mismo dibujo que abre la ficha del servicio, en chico.
   Los trazos están medidos para un lienzo de 400 px: reducidos a
   116 quedarían en menos de medio píxel y desaparecerían. Con
   non-scaling-stroke el grosor se mide en píxeles de pantalla y
   no lo toca la escala, así que el dibujo achica pero la línea
   se mantiene. */
.sv-portada {
  width: 116px;
  height: 116px;
  padding: 8px;
  border: 1px solid var(--sv-linea);
  background: var(--sv-fondo-alt);
}

.sv-portada svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sv-portada svg * { vector-effect: non-scaling-stroke; }

.sv-portada .fino   { fill: none; stroke: var(--sv-trazo-fino); stroke-width: 1.3; transition: stroke .25s ease; }
.sv-portada .medio  { fill: none; stroke: var(--sv-trazo-med);  stroke-width: 1.9; transition: stroke .25s ease; }
.sv-portada .fuerte { fill: none; stroke: var(--sv-trazo-alto); stroke-width: 2.4; }
.sv-portada .rojo   { fill: none; stroke: var(--sv-acento);     stroke-width: 2.2; }
.sv-portada .tenue  { fill: none; stroke: #2B3746; stroke-width: 1; }
.sv-portada .lleno-rojo  { fill: var(--sv-acento); stroke: none; }
.sv-portada .lleno-claro { fill: var(--sv-trazo-alto); stroke: none; }

/* Las etiquetas de los dibujos están pensadas para 400 px: acá
   quedarían en dos píxeles de alto y solo ensucian. */
.sv-portada text { display: none; }

/* ---------- texto ---------- */

.sv-fila h2 {
  color: var(--sv-titulo);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.14;
  margin: 0 0 8px;
}

.sv-fila p {
  color: var(--sv-texto);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 58ch;
}

/* ---------- dato y flecha ---------- */

.sv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.sv-dato {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--sv-tenue);
  white-space: nowrap;
}

.sv-ir {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* el rojo aclarado: como texto, el institucional no llega a
     4,5:1 sobre grafito */
  color: var(--mp-acento-texto, #E76B71);
  transition: color .25s ease;
  white-space: nowrap;
}

.sv-ir::after { content: ' →'; }

/* ============================================================
   Cierre
   ============================================================ */

.sv-cierre {
  background:
    radial-gradient(80% 120% at 84% 8%, var(--sv-azul-luz) 0%, transparent 62%),
    var(--sv-fondo-alt);
  border-top: 1px solid var(--sv-linea);
  padding: clamp(44px, 7vh, 76px) 0;
}

.sv-cierre .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.sv-cierre h2 {
  color: var(--sv-titulo);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin: 0;
  max-width: 30ch;
}

/* ============================================================
   Aparición

   No usa .reveal de style.css: esa tiene una red de seguridad
   que a los 1200 ms marca visible todo lo pendiente. Acá alcanza
   con algo más corto y con menos recorrido.
   ============================================================ */

.surge { opacity: 1; transform: none; }

.js-ready .surge {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .3s cubic-bezier(.22, 1, .36, 1),
    transform .3s cubic-bezier(.22, 1, .36, 1);
}

.js-ready .surge.visible { opacity: 1; transform: none; }

/* Escalonado corto: las filas entran de a una sin hacer esperar
   a la última. */
.js-ready .sv-lista .surge:nth-child(2) { transition-delay: .05s; }
.js-ready .sv-lista .surge:nth-child(3) { transition-delay: .1s; }
.js-ready .sv-lista .surge:nth-child(4) { transition-delay: .15s; }

/* ---------- lo que pasa adentro de la fila ----------

   La fila entera entrando con un fundido alcanzaba para que no
   apareciera de golpe, pero se quedaba ahí. Ahora, cuando entra,
   adentro pasan tres cosas escalonadas: el recuadro de la portada
   se abre desde el filete, el dibujo se traza —el mismo gesto que
   la portada grande de esa página— y el texto llega un instante
   después.

   El orden importa: primero el continente, después el dibujo,
   último la palabra. Al revés se lee como un rebote. */
@media (prefers-reduced-motion: no-preference) {

  .js-ready .sv-fila .sv-portada {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s cubic-bezier(.22, 1, .36, 1) .05s;
  }

  .js-ready .sv-fila.visible .sv-portada { clip-path: inset(0 0 0 0); }

  .js-ready .sv-fila .sv-portada svg line,
  .js-ready .sv-fila .sv-portada svg path,
  .js-ready .sv-fila .sv-portada svg rect,
  .js-ready .sv-fila .sv-portada svg circle,
  .js-ready .sv-fila .sv-portada svg polyline {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
  }

  .js-ready .sv-fila.visible .sv-portada svg line,
  .js-ready .sv-fila.visible .sv-portada svg path,
  .js-ready .sv-fila.visible .sv-portada svg rect,
  .js-ready .sv-fila.visible .sv-portada svg circle,
  .js-ready .sv-fila.visible .sv-portada svg polyline {
    animation: sv-trazar 1.5s cubic-bezier(.22, .61, .36, 1) .28s forwards;
  }

  .js-ready .sv-fila .sv-portada svg .lleno-rojo,
  .js-ready .sv-fila .sv-portada svg .lleno-claro {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity .45s ease .9s;
  }

  .js-ready .sv-fila.visible .sv-portada svg .lleno-rojo,
  .js-ready .sv-fila.visible .sv-portada svg .lleno-claro { opacity: 1; }

  /* el texto y el dato llegan detrás del dibujo */
  .js-ready .sv-fila .sv-texto,
  .js-ready .sv-fila .sv-meta {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .38s cubic-bezier(.22, 1, .36, 1) .16s,
      transform .38s cubic-bezier(.22, 1, .36, 1) .16s;
  }

  .js-ready .sv-fila .sv-meta { transition-delay: .26s; }

  .js-ready .sv-fila.visible .sv-texto,
  .js-ready .sv-fila.visible .sv-meta { opacity: 1; transform: none; }
}

@keyframes sv-trazar { to { stroke-dashoffset: 0; } }

/* ============================================================
   Angosto
   ============================================================ */

@media (max-width: 860px) {
  /* El dato y la flecha pasan abajo del texto, no a la derecha:
     en angosto la tercera columna aprieta el título contra el
     dibujo. */
  .sv-fila {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 18px 20px;
    align-items: start;
  }

  .sv-portada { width: 84px; height: 84px; padding: 6px; }

  .sv-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    gap: 14px;
  }

  .sv-dato { white-space: normal; }
}

@media (max-width: 460px) {
  .sv-fila { grid-template-columns: 1fr; }
  .sv-meta { grid-column: 1; }
  .sv-portada { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .surge {
    transform: none;
    transition: opacity .2s ease;
  }
  .js-ready .sv-lista .surge { transition-delay: 0s; }
  .sv-fila, .sv-fila::before,
  .sv-portada .fino, .sv-portada .medio, .sv-ir { transition: none; }

  /* El dibujo aparece hecho y el texto no se mueve. */
  .js-ready .sv-fila .sv-portada { clip-path: none; transition: none; }
  .js-ready .sv-fila .sv-portada svg * { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; opacity: 1; }
  .js-ready .sv-fila .sv-texto,
  .js-ready .sv-fila .sv-meta { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Dato y flecha, uno debajo del otro en el teléfono

   A 375 px la fila de dato y flecha comparte 327 px entre "Casing y
   tubing — todas las medidas" y "Ver el servicio →": el dato se
   partía en tres líneas apretadas contra el enlace. En columna
   cada uno tiene el ancho entero y la flecha queda como último
   renglón de la ficha, que es donde el pulgar la busca.
   ============================================================ */
@media (max-width: 560px) {
  .sv-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}