/* Componente de proceso público: estructura, iconos, preparación y variantes.
   Único propietario de sv-process-*. Colores y medidas usan los tokens de marca. */
.sv-process-flow {
  --sv-process-mark-size:60px;
  --sv-process-gap:32px;
}
.sv-process-flow .sv-process-grid {
  display:grid;
  width:100%;
  min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sv-process-gap);
  padding:0;
  margin-bottom:0;
  margin-inline:0;
  list-style:none;
}
.sv-process-grid { margin-top:48px; }
.sv-centered { text-align:left; }
.sv-centered .sv-eyebrow { justify-content:flex-start; }
.sv-home .sv-process-compact { padding-block:56px; }
.sv-home .sv-process-compact .sv-centered { display:block; text-align:left; }
.sv-home .sv-process-compact .sv-eyebrow { margin-bottom:16px; justify-content:flex-start; flex-shrink:0; }
.sv-home .sv-process-compact h2 { font-size:30px; letter-spacing:-.9px; }
.sv-home .sv-process-grid { margin-top:30px; }
.sv-interior .sv-process-compact { padding-block:48px; }
.sv-interior .sv-process-compact h2 { font-size:32px; }
.sv-interior .sv-process-grid { margin-top:28px; }
.sv-process-step { position:relative; min-width:0; }
.sv-process-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:var(--sv-process-mark-size);
  height:var(--sv-process-mark-size);
  margin-bottom:24px;
  border:1px solid var(--sv-sand-line);
  border-radius:18px;
  background:var(--sv-surface);
  color:var(--sv-blue);
}
.sv-tone-surface .sv-process-mark { background:var(--sv-white); }
.sv-process-mark > .sv-icon { width:32px; height:32px; stroke-width:1.4; }
.sv-process-number {
  position:absolute;
  right:-7px;
  bottom:-6px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid var(--sv-sand-line);
  border-radius:50%;
  background:var(--sv-white);
  color:var(--sv-sand-ink);
  font-size:11px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.sv-process-copy h3 {
  margin-bottom:8px;
  font-family:var(--sv-sans);
  font-size:16px;
  font-weight:700;
  letter-spacing:0;
}
.sv-process-copy { min-width:0; overflow-wrap:anywhere; }
.sv-process-copy p { max-width:320px; color:var(--sv-muted); font-size:13px; line-height:1.7; }
.sv-process-connector {
  position:absolute;
  top:calc(var(--sv-process-mark-size)/2 - 8px);
  left:calc(var(--sv-process-mark-size) + 18px);
  right:calc(18px - var(--sv-process-gap));
  height:16px;
  pointer-events:none;
}
.sv-process-connector::before {
  content:"";
  position:absolute;
  inset:8px 6px auto 0;
  height:1px;
  background:var(--sv-line);
}
.sv-process-connector > .sv-icon { position:absolute; top:0; right:0; width:16px; height:16px; color:var(--sv-accent); }
.sv-process-preparation {
  width:100%;
  max-width:none;
  min-width:0;
  margin-top:32px;
  border-top:1px solid var(--sv-line);
  border-bottom:1px solid var(--sv-line);
}
.sv-process-preparation summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:56px;
  padding:16px 6px 16px 0;
  list-style:none;
  cursor:pointer;
  color:var(--sv-navy);
  font-size:14px;
  font-weight:700;
}
.sv-process-preparation summary::-webkit-details-marker { display:none; }
.sv-process-preparation summary::marker { content:""; }
.sv-process-preparation summary > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.sv-process-preparation summary > .sv-icon { width:18px; height:18px; flex-shrink:0; color:var(--sv-accent); }
.sv-process-preparation[open] summary > .sv-icon { transform:rotate(45deg); }
.sv-process-preparation-body { min-width:0; padding-bottom:22px; color:var(--sv-muted); font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.sv-process-preparation-body p { max-width:850px; margin:0 0 12px; }
.sv-process-preparation-body ul { max-width:850px; margin:0; padding-left:20px; }
.sv-process-preparation-body li + li { margin-top:7px; }
@media (max-width:950px) {
  .sv-process-flow { --sv-process-gap:24px; }
  .sv-home .sv-process-compact .sv-eyebrow { margin-bottom:14px; }
}
@media (max-width:680px) {
  .sv-process-flow { --sv-process-gap:26px; }
  .sv-process-grid { margin-top:34px; }
  .sv-home .sv-process-compact { padding-block:42px; }
  .sv-home .sv-process-compact h2 { font-size:28px; }
  .sv-home .sv-process-grid { margin-top:24px; }
  .sv-interior .sv-process-compact { padding-block:40px; }
  .sv-interior .sv-process-compact h2 { font-size:28px; }
  .sv-process-flow .sv-process-grid { grid-template-columns:1fr; }
  .sv-process-step { display:grid; grid-template-columns:var(--sv-process-mark-size) minmax(0,1fr); gap:20px; }
  .sv-process-mark { margin-bottom:0; }
  .sv-process-copy { padding-top:3px; }
  .sv-process-copy p { max-width:none; }
  .sv-process-preparation { margin-top:28px; }
  .sv-process-preparation summary { gap:14px; }
  .sv-process-preparation-body { font-size:13px; }
  .sv-process-connector {
    top:calc(var(--sv-process-mark-size) + 8px);
    bottom:calc(8px - var(--sv-process-gap));
    left:calc(var(--sv-process-mark-size)/2 - 8px);
    right:auto;
    width:16px;
    height:auto;
  }
  .sv-process-connector::before { inset:0 auto 6px 8px; width:1px; height:auto; }
  .sv-process-connector > .sv-icon { top:auto; bottom:0; transform:rotate(90deg); }
}