/* AIFER · Cómo trabajamos (#proceso) y Preguntas (#preguntas): fase de consideración. */

/* ---------- Cómo trabajamos ---------- */
.proceso__rejilla { display: grid; gap: var(--s-8); }
.proceso__intro .entradilla { margin-top: var(--s-5); }

/* La línea de tiempo: el trazo baja por los pasos y termina en un punto suelto */
.pasos {
  --col-num: 2.75rem;
  --col-linea: 1.75rem;
  --punto: 14px;
  --punto-y: calc(var(--t-3) * 0.6 - var(--punto) / 2);
  position: relative; display: grid; gap: var(--s-7);
  margin: 0; padding: 0 0 var(--s-7); list-style: none;
}
.pasos::before {
  content: ""; position: absolute;
  left: calc(var(--col-num) + var(--col-linea) / 2 - 1.5px);
  top: calc(var(--punto-y) + var(--punto) / 2); bottom: 0; width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--lima), var(--menta) 55%, var(--cian));
}
.pasos::after {
  content: ""; position: absolute;
  left: calc(var(--col-num) + var(--col-linea) / 2 - 4px);
  bottom: -1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--cian);
}

.paso {
  display: grid; align-items: start;
  grid-template-columns: var(--col-num) var(--col-linea) minmax(0, 1fr);
}
.paso__num {
  font-family: var(--f-display); font-weight: 800; font-size: 2.75rem;
  line-height: 0.8; color: var(--grafito); font-variant-numeric: lining-nums;
  margin-top: -0.05em;
}
.paso__punto {
  justify-self: center; position: relative; z-index: 1;
  width: var(--punto); height: var(--punto); margin-top: var(--punto-y);
  border-radius: 50%; background: var(--grafito);
  box-shadow: 0 0 0 5px var(--niebla);
}
.paso__cuerpo { padding-left: var(--s-3); max-width: 36rem; }
.paso__cuerpo p { margin-top: var(--s-3); }
.paso__cuerpo .paso__tu { margin-top: var(--s-4); font-size: var(--t-small); color: var(--grafito-suave); }
.paso__tu strong { color: var(--pino); font-weight: 650; }

@media (min-width: 40em) {
  .pasos { --col-num: 4rem; --col-linea: 2.5rem; }
  .paso__num { font-size: 4rem; }
}

/* Y después: mantenimiento, propiedad e IA, en una franja tranquila */
.proceso__despues {
  padding-top: var(--s-6);
  border-top: 1px solid var(--linea-clara);
}
.proceso__despues-titulo { font-size: var(--t-3); font-weight: 650; line-height: 1.2; }
.proceso__despues-lista {
  display: grid; gap: var(--s-4); margin-top: var(--s-5);
  font-size: var(--t-small); line-height: 1.55; color: var(--grafito-suave);
}
.proceso__despues-lista strong { display: block; color: var(--grafito); font-weight: 650; font-size: var(--t-base); }

@media (min-width: 46em) {
  .proceso__despues-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

/* Escritorio: los cuatro pasos en fila, unidos por el trazo horizontal */
@media (min-width: 62em) {
  .proceso__rejilla { gap: var(--s-8); }
  .proceso__intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
  .proceso__intro .entradilla { margin-top: 0; }
  .pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6); padding: 0;
  }
  .pasos::before {
    left: 0; right: var(--s-6); top: calc(var(--punto) / 2 - 1.5px); bottom: auto;
    width: auto; height: 3px;
    background: var(--trazo);
  }
  .pasos::after { left: auto; right: calc(var(--s-6) - 1.25rem); top: calc(var(--punto) / 2 - 4px); bottom: auto; }
  .paso { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .paso__punto { grid-row: 1; justify-self: start; margin-top: 0; }
  .paso__num { grid-row: 2; margin-top: var(--s-5); font-size: 4.5rem; }
  .paso__cuerpo { grid-row: 3; padding-left: 0; margin-top: var(--s-4); }
}

/* ---------- Preguntas ---------- */
.preguntas :focus-visible { outline-color: var(--pino); }
.preguntas__rejilla { display: grid; gap: var(--s-7); }
.preguntas__intro .entradilla { margin-top: var(--s-5); }

.preguntas__lista { border-bottom: 1px solid var(--linea-clara); }
.pregunta { border-top: 1px solid var(--linea-clara); }

.pregunta > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 3.5rem; padding-block: var(--s-5);
  list-style: none; cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); font-weight: 620; line-height: 1.3;
  transition: color .2s var(--ease);
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary::marker { content: ""; }
.pregunta[open] > summary { color: var(--pino); }
@media (hover: hover) { .pregunta > summary:hover { color: var(--pino); } }

/* Marcador propio: dos tramos redondeados; al abrir, el vertical se tumba y queda un «menos» */
.pregunta__marca { position: relative; flex: none; width: 1.125rem; height: 1.125rem; }
.pregunta__marca::before,
.pregunta__marca::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 3px; margin-top: -1.5px;
  border-radius: var(--r-pill); background: currentColor;
  transition: transform .25s var(--ease);
}
.pregunta__marca::after { transform: rotate(90deg); }
.pregunta[open] .pregunta__marca::after { transform: rotate(0deg); }

/* Respuesta: el trazo, fino, a su izquierda */
.pregunta__r {
  position: relative; max-width: 62ch;
  padding: 0 var(--s-2) var(--s-6) var(--s-5);
}
@media (min-width: 40em) { .pregunta__r { padding-right: var(--s-6); } }
.pregunta__r::before {
  content: ""; position: absolute; left: 0; top: 0.3em; bottom: calc(var(--s-6) + 0.3em);
  width: 3px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--lima), var(--menta) 55%, var(--cian));
}

/* Apertura suave donde el navegador lo admite; si no, se abre sin más */
@supports selector(::details-content) {
  .pregunta { interpolate-size: allow-keywords; }
  .pregunta::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .3s var(--ease), content-visibility .3s var(--ease) allow-discrete;
  }
  .pregunta[open]::details-content { block-size: auto; }
}

.preguntas__cierre { margin-top: var(--s-6); }
.preguntas__otra { color: var(--grafito-suave); }
.preguntas__otra .enlace { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

.preguntas__accion {
  position: relative; margin-top: var(--s-7); padding-top: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6);
}
.preguntas__accion::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: min(12rem, 40%); height: 4px; border-radius: var(--r-pill); background: var(--trazo);
}
.preguntas__accion .titulo-3 { flex: 1 1 18rem; max-width: 26ch; }

@media (min-width: 62em) {
  .preguntas__rejilla {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s-9); align-items: start;
  }
  .preguntas__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}