/* ============================================================
   11-servicios.css · Explorador interactivo de servicios (#servicios)
   Desktop (>768px): rail (col 1) + panel sticky (col 2).
   Móvil (≤768px): acordeón inline (head→su panel), vía contents + order.
   ============================================================ */

.services { position: relative; }
.services > .container { position: relative; z-index: 1; }
.services .accent-motif { opacity: 0.05; }

.svc-explorer { margin-top: var(--space-lg); }

/* ── Head (botón del servicio) ── */
.svc-item__head {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; text-align: left;
  padding: var(--space-md);
  min-height: 64px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-ink);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.svc-item__num {
  font-family: var(--font-display); font-weight: 200; font-size: 1.5rem;
  letter-spacing: -0.04em; line-height: 1; color: var(--color-accent-2);
  flex-shrink: 0; min-width: 2.4ch;
}
.svc-item__name { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.svc-item__badge {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 9px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--vp-lavanda); color: var(--vp-azul-profundo);
  border-radius: 999px;
}
.svc-item__head:hover { background: rgba(63, 52, 119, 0.05); border-color: var(--vp-lavanda); }
.svc-item__head.is-active {
  background: var(--vp-azul-profundo); color: #fff; border-color: var(--vp-azul-profundo);
}
.svc-item__head.is-active .svc-item__num { color: var(--vp-lavanda); }
.svc-item__head:focus-visible { outline: 3px solid var(--vp-azul-ejecutivo); outline-offset: 2px; }

/* ── Panel (detalle) ── */
.svc-item__media { border-radius: var(--radius-lg); }
.svc-item__tagline {
  font-size: 1.1rem; line-height: 1.55; font-weight: 500;
  color: var(--color-ink); margin-bottom: var(--space-md);
}
.svc-item__includes { margin-bottom: var(--space-md); }
.svc-item__includes li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 0.98rem; line-height: 1.4; color: var(--color-ink-soft);
}
.svc-item__includes li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 12px; height: 1.5px; background: var(--color-accent);
}
.svc-item__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-item__ctas .btn { min-height: 44px; }

/* ── DESKTOP (>768px): rail compacto (col 1) + panel sticky (col 2) ── */
@media (min-width: 769px) {
  .svc-explorer {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
  .svc-explorer__rail { display: flex; flex-direction: column; gap: 10px; }

  /* Panel: contenedor sticky con offset por el nav; los 6 paneles se
     superponen en una sola celda (display:grid + grid-area:1/1) → altura
     estable (la del más alto), el activo aparece con fade EN SU SITIO. */
  .svc-explorer__panels {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-md));
    display: grid;
  }
  .svc-item__panel {
    grid-area: 1 / 1;
    background: var(--color-dominant);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-med), transform var(--t-med);
  }
  .svc-item__panel.is-active { opacity: 1; visibility: visible; transform: none; }
  /* Imagen acotada para balance rail↔panel */
  .svc-item__media { aspect-ratio: 16 / 9; max-height: 240px; margin-bottom: var(--space-md); }
}

/* ── MÓVIL (≤768px): acordeón — head seguido de SU panel ── */
@media (max-width: 768px) {
  .svc-explorer { display: flex; flex-direction: column; border-top: 1px solid var(--color-line); }
  /* Disolver rail y panels para intercalar head_i + panel_i con order */
  .svc-explorer__rail, .svc-explorer__panels { display: contents; }
  .svc-explorer__rail > .svc-item__head:nth-child(1)   { order: 1; }
  .svc-explorer__panels > .svc-item__panel:nth-child(1){ order: 2; }
  .svc-explorer__rail > .svc-item__head:nth-child(2)   { order: 3; }
  .svc-explorer__panels > .svc-item__panel:nth-child(2){ order: 4; }
  .svc-explorer__rail > .svc-item__head:nth-child(3)   { order: 5; }
  .svc-explorer__panels > .svc-item__panel:nth-child(3){ order: 6; }
  .svc-explorer__rail > .svc-item__head:nth-child(4)   { order: 7; }
  .svc-explorer__panels > .svc-item__panel:nth-child(4){ order: 8; }
  .svc-explorer__rail > .svc-item__head:nth-child(5)   { order: 9; }
  .svc-explorer__panels > .svc-item__panel:nth-child(5){ order: 10; }
  .svc-explorer__rail > .svc-item__head:nth-child(6)   { order: 11; }
  .svc-explorer__panels > .svc-item__panel:nth-child(6){ order: 12; }

  .svc-item__head { border: none; border-bottom: 1px solid var(--color-line); border-radius: 0; min-height: 56px; }
  .svc-item__panel { display: none; padding: var(--space-xs) var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-line); }
  .svc-item__panel.is-active { display: block; }
  .svc-item__media { aspect-ratio: 16 / 10; margin-bottom: var(--space-sm); }
  .svc-item__ctas .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-item__panel { transition: none !important; transform: none !important; }
}