/* ============================================================
   M&P — Home por paneles

   El home entero es una secuencia de pantallas completas: cada
   una se queda quieta, la siguiente la tapa subiendo desde
   abajo, y el texto entra escalonado. Algunos paneles son foto
   y otros son 3D.

   Solo aplica dentro de .panels, así que las demás páginas
   siguen con style.css sin enterarse.
   ============================================================ */

.panels {
  position: relative;
  background: #12171F;
}

.panel {
  margin: 0;
  position: relative;
  background: #12171F;
  overflow: hidden;
}

.panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.panel-media picture { position:absolute; inset:0; display:block; }

.panel-media img,
.panel-media canvas,
.panel-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El lienzo se renderiza con la proporción exacta del panel, así
   que acá se estira a fondo. Con "contain" o "cover" quedaba
   dependiendo de que las dos proporciones coincidieran al pixel,
   y cuando no coincidían aparecían las bandas negras. */
.panel[data-tipo="3d"] .panel-media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #12171F;
}

/* ---------- paneles de video ----------

   "contain" y no "cover", en todos los tamaños.

   Con "cover" la toma llenaba el panel, pero en una pantalla ancha
   —1920 de ancho contra 900 de alto— para cubrir el ancho tenia que
   agrandarse tanto que se comia el 40% del alto: la herramienta
   quedaba cortada arriba y abajo. Eso era lo que se veia mal
   encuadrado.

   Con "contain" entra siempre entera y centrada, sea cual sea la
   forma de la pantalla, y queda un sobrante a los costados.

   Ese sobrante lo pinta el propio video: un lienzo por detras estira
   la columna de pixeles del borde hacia afuera, cuadro a cuadro, asi
   que a los dos lados del empalme hay exactamente el mismo color y
   no se ve ninguna linea vertical.

   Antes iba un color plano —--marco, que cada panel declara— y el
   corte si se veia: el borde de estas tomas no es constante, cambia
   con la luz de la escena a lo largo del video (el del cabezal
   arranca casi blanco y despues baja a gris), y ningun color fijo le
   puede seguir el paso. El color plano queda igual abajo de todo,
   por si el lienzo no llega a armarse.

   Los videos ademas vienen reencodeados en 5:4 estirando su propio
   fondo hacia los costados, asi que el sobrante a pintar es poco. */
.panel[data-tipo="video"] .panel-media {
  background: var(--marco, #F8F9FB);
}

.panel[data-tipo="video"] .panel-media video {
  object-fit: contain;
  object-position: center;
  /* transparente: lo que se ve en el sobrante es el lienzo de atras */
  background: transparent;
}

/* El lienzo del sobrante. Lleva la misma proporcion que el panel y
   se estira a fondo (fill, no cover): asi el borde que dibuja cae
   justo donde termina el video y el empalme no se corre de lugar.

   El z-index negativo es lo que lo manda atras del video sin tocar
   nada mas. .panel-media ya arma su propio contexto de apilado —es
   absoluto y con z-index: 0— asi que el -1 no se escapa del panel:
   queda arriba del color plano de respaldo, abajo del video, y sobre
   todo abajo de la rampa oscura del texto, que es un ::after de
   .panel-media. Se probo al reves —el video posicionado y el lienzo
   en cero— y salia mal: el video pasaba a un nivel mas alto que esa
   rampa, la rampa dejaba de oscurecerlo y quedaba oscureciendo solo
   el sobrante. Eso dibujaba una banda oscura a la izquierda, con un
   corte vertical justo donde empieza el video, y ademas le sacaba al
   texto el respaldo que lo hace legible. */
.panel[data-tipo="video"] .panel-media canvas.panel-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* El velo general esta pensado para las escenas 3D, que son oscuras.
   Sobre estas tomas claras tapa de mas, asi que va apenas marcado. */
.panel[data-tipo="video"]::after {
  background: linear-gradient(180deg,
    rgba(18, 23, 31, .20) 0%,
    rgba(18, 23, 31, 0) 22%,
    rgba(18, 23, 31, 0) 66%,
    rgba(18, 23, 31, .26) 100%);
}

/* El fondo del texto: una sola rampa lateral que entra por el borde
   izquierdo y se apaga antes de la mitad. De lejos parece la luz de
   la escena y no una caja.

   Va sobre .panel-media, que ocupa el panel completo, y no sobre
   .panel-copy: ese esta limitado a 1180 px y centrado, asi que en una
   pantalla de 1920 la rampa terminaba en un rectangulo con bordes a
   la vista en el medio de la imagen. */
.panel[data-tipo="video"] .panel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(101deg,
    rgba(16, 21, 29, .60) 0%,
    rgba(16, 21, 29, .46) 20%,
    rgba(16, 21, 29, .24) 38%,
    rgba(16, 21, 29, .07) 54%,
    rgba(16, 21, 29, 0) 66%);
}

.panel[data-tipo="video"] .panel-copy h2,
.panel[data-tipo="video"] .panel-copy .panel-bajada,
.panel[data-tipo="video"] .panel-copy .panel-lectura,
.panel[data-tipo="video"] .panel-copy .panel-credito {
  text-shadow:
    0 1px 2px rgba(12, 16, 23, .92),
    0 0 14px rgba(12, 16, 23, .78),
    0 0 36px rgba(12, 16, 23, .55);
}

.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,23,31,.58) 0%, rgba(18,23,31,.05) 32%, rgba(18,23,31,.88) 100%);
  pointer-events: none;
}

.panel-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 0 24px 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--blanco, #f5f5f5);
}

.panel-servicio {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-acento-texto, #E76B71);
  margin-bottom: 12px;
}

.panel h1,
.panel h2 {
  color: var(--blanco, #f5f5f5);
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  line-height: 0.97;
  margin: 0 0 14px;
  max-width: 15ch;
}

.panel-bajada {
  font-size: clamp(0.98rem, 1.5vw, 1.18rem);
  color: #C8D0D8;
  max-width: 42ch;
  margin: 0 0 20px;
}

.panel-credito {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7C8894;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 12px;
  max-width: 34ch;
}

/* El botón crece con la pantalla, como el título y la bajada. Con la
   medida fija de style.css (14 px y 14/28 de relleno) quedaba de
   199 × 55 al lado de un título de 70 px en un monitor grande. Abajo
   de 1280 px no cambia nada: los mínimos son los valores de siempre. */
.panel-copy .btn {
  align-self: flex-start;
  margin-top: 8px;
  /* En una ventana baja el contenido supera la altura del panel y la
     columna flex encoge a quien puede: los textos tienen mínimo
     automático, pero el botón lleva overflow: hidden (style.css) y su
     mínimo es cero, así que se aplastaba y el texto quedaba cortado. */
  flex-shrink: 0;
  font-size: clamp(0.9rem, 0.85vw, 1.15rem);
  padding: clamp(14px, 1vw, 20px) clamp(28px, 2vw, 42px);
}

/* lectura de los paneles 3D */
.panel-lectura {
  font-family: var(--font-mono, monospace);
  margin-bottom: 16px;
}

.panel-lectura .valor {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.panel-lectura .valor small {
  font-size: .32em;
  color: #7C8894;
  letter-spacing: .16em;
  margin-left: 8px;
}

.panel-lectura .etiqueta {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7C8894;
}

/* ---------- sin JS: los paneles quedan uno abajo del otro ---------- */
.panel { height: 68vh; }
.panels-indice { display: none; }

/* ---------- con JS: se apilan y se reemplazan ---------- */
.js-ready .panels-stage {
  position: sticky;
  top: 76px;
  height: calc(100svh - 76px);
  overflow: hidden;
}

.js-ready .panel {
  position: absolute;
  inset: 0;
  height: auto;
  will-change: transform;
  transform: translate3d(0, 100%, 0);
}

.js-ready .panel-servicio,
.js-ready .panel h1,
.js-ready .panel h2,
.js-ready .panel-bajada,
.js-ready .panel-lectura,
.js-ready .panel-credito,
.js-ready .panel-copy .btn {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.js-ready .panel.quieta .panel-servicio { opacity: 1; transform: none; transition-delay: .04s; }
.js-ready .panel.quieta h1,
.js-ready .panel.quieta h2             { opacity: 1; transform: none; transition-delay: .15s; }
.js-ready .panel.quieta .panel-lectura { opacity: 1; transform: none; transition-delay: .22s; }
.js-ready .panel.quieta .panel-bajada  { opacity: 1; transform: none; transition-delay: .28s; }
.js-ready .panel.quieta .panel-credito { opacity: 1; transform: none; transition-delay: .38s; }
.js-ready .panel.quieta .btn           { opacity: 1; transform: none; transition-delay: .44s; }

/* ---------- índice lateral ---------- */
.js-ready .panels-indice {
  display: grid;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  gap: 9px;
}

.panels-indice span {
  width: 2px;
  height: 22px;
  background: rgba(255,255,255,.22);
  transition: background .3s ease;
}

.panels-indice span.activa { background: var(--rojo, #b3282d); }

@media (max-width: 720px) {
  .panel-copy { padding-bottom: 38px; }
  .panel-bajada { font-size: .95rem; }
  .panels-indice { right: 10px; }
}

/* ---------- menos movimiento: galería simple ---------- */
@media (prefers-reduced-motion: reduce) {
  /* html:not(.mp-movimiento) en cada regla: si alguien pidió la
     versión completa desde el enlace de abajo a la izquierda, su
     decisión pesa más que la preferencia del sistema.

     Sin espacio antes de .js-ready: esa clase la lleva el propio
     <html>, así que "html:not(...) .js-ready" pediría un descendiente
     y no engancharía nunca. */
  html:not(.mp-movimiento).js-ready .panels-stage { position: static; height: auto; overflow: visible; }

  /* Alto por contenido, no 68vh clavado.

     Acá estaba el problema que se veía en una notebook de 1366x768:
     con la barra de marcadores y la de pestañas, la ventana queda en
     607 px de alto, y 68vh son 413 px. El texto de un panel mide más
     que eso. Como .panel-copy es una columna flex alineada al final,
     lo que no entra se sale por ARRIBA, no por abajo: el título
     aparecía cortado y pisando el panel anterior. "Los ocho bulones,
     en secuencia cruzada", que ocupa tres líneas, empezaba 233 px por
     encima del borde de su propio panel.

     Con alto automático el panel crece con su texto, y el contenido
     se alinea desde arriba. El min-height mantiene el ritmo de
     pantalla casi completa en monitores grandes. */
  html:not(.mp-movimiento).js-ready .panel { position: relative; inset: auto; height: auto; min-height: 56vh; transform: none; opacity: 1; }
  html:not(.mp-movimiento).js-ready .panel-copy { height: auto; padding-top: clamp(40px, 7vh, 72px); justify-content: flex-start; }
  /* Los de video conservan el texto abajo: ahí el poster es el fondo
     y el bloque de texto apoyado al pie es la composición buscada. */
  html:not(.mp-movimiento).js-ready .panel[data-tipo="video"] .panel-copy { min-height: 56vh; justify-content: flex-end; }

  html:not(.mp-movimiento).js-ready .panel-servicio,
  html:not(.mp-movimiento).js-ready .panel h1,
  html:not(.mp-movimiento).js-ready .panel h2,
  html:not(.mp-movimiento).js-ready .panel-bajada,
  html:not(.mp-movimiento).js-ready .panel-lectura,
  html:not(.mp-movimiento).js-ready .panel-credito,
  html:not(.mp-movimiento).js-ready .panel-copy .btn { opacity: 1; transform: none; transition: none; }
  html:not(.mp-movimiento).js-ready .panels-indice { display: none; }
  /* sin escena dibujada, el lienzo vacío no aporta nada */
  html:not(.mp-movimiento).js-ready .panel[data-tipo="3d"] .panel-media canvas { display: none; }
}

/* ---------- paneles dibujados ----------
   Cuando no hay una foto a la altura, el panel se dibuja. Mismo
   lenguaje que las portadas interiores. */
.panel[data-tipo="dibujo"] {
  background:
    radial-gradient(120% 100% at 74% 22%, rgba(179,40,45,.18) 0%, rgba(179,40,45,0) 56%),
    linear-gradient(165deg, #1C2531 0%, #141B24 64%, #12171F 100%);
}

.panel-dibujo {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42%, 420px);
  aspect-ratio: 1;
}

.panel-dibujo svg { width: 100%; height: 100%; display: block; }
.panel-dibujo .fino  { fill: none; stroke: #55677C; stroke-width: 1.1; }
.panel-dibujo .medio { fill: none; stroke: #8FA3B8; stroke-width: 1.8; }
.panel-dibujo .rojo  { fill: none; stroke: #b3282d; stroke-width: 2.4; }
.panel-dibujo .tenue { fill: none; stroke: #2B3746; stroke-width: 1; }

@media (max-width: 820px) {
  .panel-dibujo { width: 62%; right: -8%; opacity: .5; }
}

/* ============================================================
   Salida de los paneles

   Al terminar el último panel el fondo pasaba de negro a la
   sección siguiente de golpe. Esta franja hace de bisagra.
   ============================================================ */
.panels-salida {
  height: 140px;
  background: linear-gradient(180deg, #12171F 0%, #141A22 42%, #151C26 100%);
}

/* ============================================================
   Cierre del home — los seis servicios
   ============================================================ */
.cierre-servicios {
  background:
    radial-gradient(90% 70% at 82% 4%, rgba(179,40,45,.13) 0%, rgba(179,40,45,0) 60%),
    linear-gradient(180deg, #151C26 0%, #0E141D 100%);
  padding: clamp(64px, 10vh, 112px) 0 clamp(72px, 12vh, 128px);
  color: #A9B8C7;
}

.cierre-head { max-width: 46ch; margin-bottom: clamp(38px, 6vh, 62px); }
.cierre-head .eyebrow { display: block; color: var(--mp-acento-texto, #E76B71); margin-bottom: 14px; }
.cierre-head h2 { color: #FFFFFF; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.03; margin-bottom: 14px; }
.cierre-head p { color: #98A7B7; font-size: 1.05rem; }

/* ============================================================
   Hileras de servicio

   Cada servicio ocupa una fila de dos columnas que alternan de
   lado: texto y motivo dibujado, motivo y texto. Es donde se
   cuentan los datos concretos que el panel 3D no puede dar
   porque no lleva texto adentro del lienzo.

   Sin numerar. La etiqueta de arriba dice qué tipo de trabajo
   es, que es información; un "01 / 06" no es información.
   ============================================================ */

.hileras {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vh, 48px);
}

/* Aparición propia, no la .reveal de style.css.

   Esa tiene una red de seguridad que a los 1200 ms marca visible
   todo lo que quedó pendiente. Acá las hileras están al final de
   una página larguísima: para cuando alguien llega, la red ya
   disparó hace rato y no se animaría ninguna. */
.surge { opacity: 1; transform: none; }

.js-ready .surge {
  opacity: 0;
  transform: translateY(16px);
  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; }

@media (prefers-reduced-motion: reduce) {
  html:not(.mp-movimiento).js-ready .surge { transform: none; transition: opacity .2s ease; }
}

/* ---------- el motivo se dibuja, y sigue ----------

   La misma idea que las portadas de las páginas interiores: el
   trazo entra dibujándose en vez de aparecer hecho. Con dos
   diferencias que acá importan.

   Una: allá arranca al cargar la página, porque la portada está
   arriba de todo; acá arranca cuando la fila entra en pantalla,
   que es cuando alguien la mira.

   Dos: no se detiene. El ciclo dibuja, deja el dibujo quieto un
   rato largo —más de la mitad del tiempo— y después la línea sale
   por el otro extremo y vuelve a empezar. La salida va en la misma
   dirección que la entrada: si volviera sobre sus pasos se vería
   como un rebobinado.

   Cinco segundos y medio por vuelta. Lo suficientemente pausado
   para no competir con el texto, pero sin que haya que esperar a
   que arranque.

   Quedan afuera las figuras rellenas: una forma con fill y sin
   stroke no se puede dibujar, y si se le pone dasharray
   desaparece. */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .hilera .hilera-marca svg line,
  .js-ready .hilera .hilera-marca svg path,
  .js-ready .hilera .hilera-marca svg rect,
  .js-ready .hilera .hilera-marca svg circle,
  .js-ready .hilera .hilera-marca svg polyline {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
  }

  .js-ready .hilera .hilera-marca svg .rojo-lleno,
  .js-ready .hilera .hilera-marca svg .lleno-rojo,
  .js-ready .hilera .hilera-marca svg .lleno-claro {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity .5s ease .7s;
  }

  /* El retardo va por variables y no por selectores más específicos.

     La forma abreviada "animation:" pisa animation-delay y lo deja
     en cero, así que cualquier regla que quisiera correr el arranque
     tenía que ganarle además en especificidad. Con dos variables que
     se heredan —una por servicio, otra por capa del dibujo— la suma
     se hace acá adentro y no hay pelea de selectores. */
  .js-ready .hilera.visible .hilera-marca svg line,
  .js-ready .hilera.visible .hilera-marca svg path,
  .js-ready .hilera.visible .hilera-marca svg rect,
  .js-ready .hilera.visible .hilera-marca svg circle,
  .js-ready .hilera.visible .hilera-marca svg polyline {
    animation: trazar-marca 5.5s cubic-bezier(.33, 0, .2, 1) infinite;
    animation-delay: calc(var(--mp-fila, 0s) + var(--mp-capa, 0s));
  }

  .js-ready .hilera.visible .hilera-marca svg .rojo-lleno,
  .js-ready .hilera.visible .hilera-marca svg .lleno-rojo,
  .js-ready .hilera.visible .hilera-marca svg .lleno-claro { opacity: 1; }

  /* Escalonado por grupos: el dibujo se arma por capas en vez de
     salir todo de una. Con el bucle, este desfase se mantiene toda
     la vuelta, así que las capas nunca se sincronizan del todo y el
     movimiento no se vuelve mecánico. */
  /* Capas del dibujo. Puesto sobre el grupo, se hereda a todo lo
     que tenga adentro, así que no hace falta nombrar los hijos. */
  .js-ready .hilera-marca svg > *:nth-child(2)    { --mp-capa: .2s; }
  .js-ready .hilera-marca svg > *:nth-child(3)    { --mp-capa: .4s; }
  .js-ready .hilera-marca svg > *:nth-child(n+4)  { --mp-capa: .55s; }

  /* Y cada servicio arranca corrido del anterior: si los seis
     dibujaran al mismo tiempo, la página entera latiría. Los
     retardos se reparten dentro de una vuelta, así que nunca se
     sincronizan. */
  .js-ready .hilera:nth-child(2) { --mp-fila: .9s; }
  .js-ready .hilera:nth-child(3) { --mp-fila: 1.8s; }
  .js-ready .hilera:nth-child(4) { --mp-fila: 2.7s; }
  .js-ready .hilera:nth-child(5) { --mp-fila: 3.6s; }
  .js-ready .hilera:nth-child(6) { --mp-fila: 4.5s; }
}

@keyframes trazar-marca {
  0%        { stroke-dashoffset: 900; }
  30%       { stroke-dashoffset: 0; }
  78%       { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: -900; }
}

/* El texto se lleva más ancho que la ficha: el dibujo es una marca,
   no una foto, y a media pantalla quedaba enorme y con aire de
   sobra adentro. */
.hilera {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(22px, 3.5vw, 48px);
  align-items: center;
}

/* La que va invertida manda el texto a la derecha. Además da
   vuelta el ancho de las columnas: si no, el dibujo se quedaba con
   la columna ancha y en las filas pares se veía el doble de grande
   que en las impares. */
.hilera.invertida { grid-template-columns: 0.75fr 1.25fr; }
.hilera.invertida .hilera-texto  { order: 2; }
.hilera.invertida .hilera-marca { order: 1; }

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

.hilera-servicio {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mp-acento-texto, #E76B71);
  margin-bottom: 14px;
}

.hilera h3 {
  color: #FFFFFF;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.08;
  margin: 0 0 10px;
  max-width: 20ch;
}

.hilera p {
  color: #9AAABB;
  font-size: .97rem;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 50ch;
}

/* ---------- los datos ---------- */

.hilera-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px;
  background: var(--linea, #28323F);
  border: 1px solid var(--linea, #28323F);
  margin-bottom: 16px;
}

.hilera-dato {
  background: var(--fondo, #151C26);
  padding: 9px 12px;
}

.hilera-dato .lbl {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7C8CA0;
  margin-bottom: 5px;
}

.hilera-dato .val {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: .92rem;
  color: #E8EDF3;
  line-height: 1.2;
}

.hilera-ir {
  font-family: var(--font-mono, monospace);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mp-acento-texto, #E76B71);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .2s ease;
}

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

@media (hover: hover) and (pointer: fine) {
  .hilera-ir:hover { border-bottom-color: var(--mp-acento-texto, #E76B71); }
}

/* ---------- la marca ----------

   Acá había un marco con barra, tres puntitos y una capa de hover:
   una ventana falsa. Aparte de no significar nada en una empresa de
   servicios de pozo, era el elemento más de plantilla de toda la
   página, y las cajas terminaban de alturas distintas porque cada
   una dependía del largo de su propio texto.

   Ahora no hay caja. El motivo se dibuja suelto sobre el fondo, al
   mismo tamaño para los seis. Sin borde, sin panel y sin cromo: se
   ve el dibujo y nada más. Lo que ordena la lista es un filete
   entre servicio y servicio, no un recuadro alrededor de cada uno. */

.hilera-marca {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 8px 0;
}

.hilera-marca svg {
  width: min(100%, 208px);
  height: auto;
  display: block;
  overflow: visible;
}

.hilera-marca .fino   { fill: none; stroke: #5F7186; stroke-width: 2.4; }
.hilera-marca .medio  { fill: none; stroke: #93A7BC; stroke-width: 3; }
.hilera-marca .fuerte { fill: none; stroke: #C6D2DE; stroke-width: 3.4; }
.hilera-marca .rojo   { fill: none; stroke: #b3282d; stroke-width: 3.2; }
.hilera-marca .rojo-lleno { fill: #b3282d; stroke: none; }

/* Estructura sin encajonar: una línea separa un servicio del
   siguiente y todos quedan del mismo peso visual. */
.hilera + .hilera {
  border-top: 1px solid #28323F;
  padding-top: clamp(26px, 4vh, 48px);
}

/* ---------- angosto ---------- */

@media (max-width: 780px) {
  /* .invertida va nombrada aparte: lleva su propio
     grid-template-columns con más especificidad y sin esto se
     quedaba en dos columnas mientras el resto se apilaba. */
  .hilera,
  .hilera.invertida {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* En una sola columna el zigzag no existe, y dejar el motivo
     arriba en unas sí y en otras no queda desprolijo: va siempre
     el texto primero. */
  .hilera.invertida .hilera-texto,
  .hilera.invertida .hilera-marca { order: 0; }

  .hilera-marca { min-height: 150px; }
  .hilera-marca svg { width: min(60%, 170px); }
  .hilera h3 { max-width: 100%; }
}
/* ============================================================
   Viñeta en los paneles con video

   Los renders del BOP y del casing vienen sobre plato blanco, y en
   un sitio grafito ese rectángulo claro a pantalla completa es lo
   primero que salta. La rampa lateral de arriba protege el texto,
   pero los bordes del video seguían chocando contra el fondo oscuro
   de las secciones vecinas.

   Una viñeta radial oscurece las esquinas y los bordes y deja el
   centro, donde está la pieza, como estaba. Va sumada al velo
   vertical que ya tenía este tipo de panel: mismo pseudoelemento,
   dos capas. Así el video se lee como una foto de producto con luz
   propia y no como una ventana blanca.
   ============================================================ */
.panel[data-tipo="video"]::after {
  background:
    radial-gradient(118% 92% at 50% 44%,
      rgba(18, 23, 31, 0) 46%,
      rgba(18, 23, 31, .28) 72%,
      rgba(18, 23, 31, .72) 100%),
    linear-gradient(180deg,
      rgba(18, 23, 31, .26) 0%,
      rgba(18, 23, 31, 0) 22%,
      rgba(18, 23, 31, 0) 62%,
      rgba(18, 23, 31, .34) 100%);
}

/* ============================================================
   Texto secundario sobre los paneles con video

   La rampa lateral deja el plato blanco en un gris medio, y ahí los
   grises de siempre —el ojal rojo apagado, el crédito y la etiqueta
   en #7C8894— se funden con el fondo: en "Contános qué necesitás" el
   teléfono de operaciones no se leía, y "Presupuestos" desaparecía.

   Dos cosas. La rampa entra más oscura y se apaga más lejos, así la
   columna de texto queda sobre grafito de verdad y no sobre gris. Y
   los textos chicos suben de tono solo acá, donde el fondo lo pide;
   en los paneles 3D, sobre negro, siguen como estaban.
   ============================================================ */
.panel[data-tipo="video"] .panel-media::after {
  background: linear-gradient(101deg,
    rgba(16, 21, 29, .82) 0%,
    rgba(16, 21, 29, .70) 22%,
    rgba(16, 21, 29, .44) 40%,
    rgba(16, 21, 29, .14) 56%,
    rgba(16, 21, 29, 0) 68%);
}

.panel[data-tipo="video"] .panel-copy .panel-servicio {
  color: #F08A8F;
  text-shadow: 0 1px 2px rgba(12, 16, 23, .9), 0 0 12px rgba(12, 16, 23, .7);
}
.panel[data-tipo="video"] .panel-copy .panel-credito,
.panel[data-tipo="video"] .panel-copy .panel-lectura .etiqueta,
.panel[data-tipo="video"] .panel-copy .panel-lectura .valor small {
  color: #C4CED8;
}
.panel[data-tipo="video"] .panel-copy .panel-bajada { color: #E4E9EE; }

/* En pantallas angostas la columna de texto ocupa todo el ancho y
   la rampa lateral no alcanza: el velo vertical de abajo se refuerza
   para que el bloque de texto, que en móvil se apoya en el borde
   inferior, tenga fondo. */
@media (max-width: 720px) {
  .panel[data-tipo="video"] .panel-media::after {
    background:
      linear-gradient(180deg,
        rgba(16, 21, 29, 0) 30%,
        rgba(16, 21, 29, .55) 58%,
        rgba(16, 21, 29, .86) 100%),
      linear-gradient(101deg,
        rgba(16, 21, 29, .55) 0%,
        rgba(16, 21, 29, .2) 50%,
        rgba(16, 21, 29, 0) 80%);
  }
}

/* ============================================================
   Los datos de las hileras, en pantallas angostas

   Tres celdas de 104 px en una columna de 327 px dejan 80 px de
   texto por celda, y en mono "Recuperación" o "Casing y tubing"
   no entran: se cortaban por la mitad. Abajo de 560 px las celdas
   pasan a filas, con la etiqueta a la izquierda y el valor a la
   derecha, que es como se lee una ficha en un teléfono.
   ============================================================ */
@media (max-width: 560px) {
  .hilera-datos { grid-template-columns: 1fr; }
  .hilera-dato {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 14px;
  }
  .hilera-dato .lbl { margin-bottom: 0; }
  .hilera-dato .val { text-align: right; }
}

/* El ojal del panel de presupuestos cae en la esquina más clara del
   plato, donde ni la rampa ni el velo de arriba llegan. Un fondo
   chico detrás de la etiqueta lo resuelve sin oscurecer el render. */
.panel[data-tipo="video"] .panel-copy .panel-servicio {
  width: fit-content;
  padding: 5px 9px 4px;
  margin-left: -9px;
  background: rgba(16, 21, 29, .62);
  border-radius: 2px;
  text-shadow: none;
}

/* "Operaciones — +54 387 341-5146" mide 30 caracteres, pero con el
   espaciado de .14em supera los 34ch y el número se partía en
   "341-" y "5146". Con 40ch entra en una línea; en 375 px también. */
.panel-credito { max-width: 40ch; }

/* Si la placa de video se rindió y hubo que apagar el 3D, el lienzo
   se esconde: vacío no aporta nada y con basura adentro es peor que
   nada. El panel se queda con su fondo, su título y su texto. */
.panels-stage.sin-3d .panel[data-tipo="3d"] .panel-media canvas { display: none; }


/* ============================================================
   Modo sobrio

   Las mismas reglas que "menos movimiento", pero colgadas de la
   clase que inicio.html pone en <html> cuando detecta que la placa
   dibuja por software, o cuando alguien entra con ?sobrio. Una
   máquina así no puede con seis capas de pantalla completa
   moviéndose: se apilan quietas, a 68vh cada una, con su fondo y su
   texto, y el lienzo del 3D ni se crea.
   ============================================================ */
html.mp-sobrio.js-ready .panels-stage { position: static; height: auto; overflow: visible; }
/* Mismas medidas que el bloque de "menos movimiento" de más arriba, y
   por el mismo motivo: con 68vh y el texto pegado abajo, un título de
   tres líneas se sale por arriba y queda cortado. Va repetido porque
   una consulta de medios y una clase no se pueden juntar en una sola
   regla; si se toca una, tocar la otra. */
html.mp-sobrio.js-ready .panel { position: relative; inset: auto; height: auto; min-height: 56vh; transform: none; opacity: 1; }
html.mp-sobrio.js-ready .panel-copy { height: auto; padding-top: clamp(40px, 7vh, 72px); justify-content: flex-start; }
html.mp-sobrio.js-ready .panel[data-tipo="video"] .panel-copy { min-height: 56vh; justify-content: flex-end; }
html.mp-sobrio.js-ready .panel-servicio,
html.mp-sobrio.js-ready .panel h1,
html.mp-sobrio.js-ready .panel h2,
html.mp-sobrio.js-ready .panel-bajada,
html.mp-sobrio.js-ready .panel-lectura,
html.mp-sobrio.js-ready .panel-credito,
html.mp-sobrio.js-ready .panel-copy .btn { opacity: 1; transform: none; transition: none; }
html.mp-sobrio.js-ready .panels-indice { display: none; }
html.mp-sobrio.js-ready .surge { transform: none; transition: opacity .2s ease; }
/* sin escena, el lienzo vacío no tiene nada que mostrar */
html.mp-sobrio .panel[data-tipo="3d"] .panel-media canvas { display: none; }


/* ============================================================
   La salida de la versión liviana

   Un enlace chico abajo a la izquierda, del lado contrario al botón
   de WhatsApp. Solo aparece cuando el inicio se está mostrando
   quieto, y explica en una línea por qué. Antes no había ninguna
   pista: quien caía en la versión liviana se quedaba ahí sin saber
   que existía otra.
   ============================================================ */
.vista-aviso {
  display: none;
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 998;
  max-width: min(78vw, 340px);
  padding: 8px 13px;
  background: oklch(from var(--mp-hondo, #12171F) l c h / .92);
  border: 1px solid var(--mp-linea, #28323F);
  border-radius: 3px;
  color: var(--mp-suave, #8E9DAE);
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.vista-aviso b { color: var(--mp-acento-texto, #E76B71); font-weight: 400; }
.vista-aviso:hover,
.vista-aviso:focus-visible { color: var(--mp-texto, #B9C6D3); border-color: var(--mp-linea-viva, #37455A); }

html.mp-sobrio .vista-aviso { display: block; }
@media (prefers-reduced-motion: reduce) {
  html:not(.mp-movimiento) .vista-aviso { display: block; }
}