/* ======= PANEL SERVICES ======= */
.panel--services {
   overflow-y: auto;
  height: 100vh;
  display: flex;
  align-items: start;     /* 👈 evita centrar verticalmente */
  justify-content: center;
  /*scroll-behavior: smooth;*/
}

/* ======= GRID PRINCIPAL ======= */
.services-canvas {
  width: 1200px;
  margin: 0 auto;
  padding: 120px 80px;
  display: grid;
  grid-template-columns: 60% 32%;
column-gap: 80px;
  grid-template-rows: auto auto auto; /* tres bloques horizontales */
  column-gap: 60px;
  row-gap: 60px;
  align-items: start;
  position: relative;
}

/* ==== Columna izquierda ==== */
.services-visual {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: relative;
}

.visual-layer--primary {
  width: 75%;
  max-width: 820px;
  opacity: 0.9;
  z-index: 3;
  mix-blend-mode: normal;
}

/* ==== Columna derecha ==== */
.services-content {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
 margin-right: 120px;
}

/* --- Encabezado --- */
.services-header {
   margin-top: 30vh; /* baja el título  */
  margin-bottom: 4vh; /* respirito */
  position: relative;
  margin-bottom: 2rem;
    grid-column: 2;
  grid-row: 1;
}

.services-title-bg {

  width: 300px;
  opacity: 0.95;
  display: block;
}

.services-title {
  position: absolute;
  top: 35%;
  left: 55%;
  transform: translate(-50%, -50%);
  font-family: "archivo narrow", sans-serif;
  line-height: 1.5;
  font-size: .9rem;
  font-weight: 100;
  letter-spacing: 0.5em;
  color: #f6f4ef;
  mix-blend-mode: none;
  margin-left: -20px; /* mueve un poco el párrafo sin romper el grid */
}




/* === PNG blanco inferior (ajustado a la izquierda) === */
.services-visual-bottom {
  grid-column: 1 / span 3;
  grid-row: 3;
  display: flex;
  justify-content: flex-start;   /* 👈 en lugar de center */
  align-items: center;
  position: relative;
  z-index: 0;
  margin-top: -140px;            /* mantiene el ascenso */
  margin-left: 60px;             /* 👈 corre un poco hacia la izquierda */
}

.visual-layer--bottom {
  width: 850px;
  max-width: 90%;
  opacity: 0.45;
  mix-blend-mode: normal;
  transform: translate(-160px, -10px); /* 👈 ligero corrimiento al eje del PNG izquierdo */
}

/* --- Texto descriptivo --- */
.services-intro {
  font-family: "DM Mono", monospace;
  font-size: 0.9rem;
  line-height: 2;
  opacity: 0.9;
  width: 300px;
  margin: 3rem 1rem 1rem 0rem;
  background-color: rgba(255, 155, 48, 0.594);
    box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
   display: inline;
}

.services-block {
   grid-column: 1 / span 3;
  grid-row: 4;
  margin: 0 auto;
  padding-top: 2vh;
  column-count: 2;
  column-gap: 4rem;
  max-width: 900px;
}



.services-list li {
  margin-bottom: 2em;
  margin-top: 2em;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.1em;
  line-height: .8;
  font-size: 0.9rem;
  background-color: rgba(255, 119, 0, 0.84);
}
/* .services-list li::before {
  content: "—";
  position: relative;
  left: 0;
  color: var(--fg);
}*/

/* === Remate: línea + cubo (basado en About) === */
.services-remate {
  grid-column: 1 / span 3;
  grid-row: 5;                  /* debajo de la lista */
  display: flex;
  justify-content: flex-end;    /* línea extendida hacia la derecha */
  align-items: center;
  margin-top: 40px;
  z-index: 3;
}

.services-line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--fg);
  opacity: 0.4;
  /* margin-right: 20px; */
  max-width: 950px;             /* ajusta longitud */
}

.services-cube {
  width: 36px;
  height: 36px;
  background-color: var(--fg);
  opacity: 0.1;
}