/* Servicios de la home: una figura por servicio (js/serv-fig.js).
   Fila: número + glifo | título, texto y etiquetas | figura | flecha. */
.serv { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.05fr) 56px; }
.serv__main .serv__tags { margin-top: 20px; padding-top: 0; }
.serv__fig { position: relative; align-self: center; max-width: 560px; width: 100%; justify-self: center; }

/* las etiquetas son la lista de la anatomía: la que está encendida se marca en lima */
.serv__tags li[data-k] { cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.serv__tags li[data-k].is-on { border-color: var(--lime); color: var(--ink); background: var(--lime); }
.serv__tags li[data-k]:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---------- anatomía isométrica ---------- */
.sf { display: block; width: 100%; height: auto; overflow: visible; }
.sf polygon, .sf polyline, .sf path { stroke-linejoin: round; stroke-linecap: round; }
.sf polyline { fill: none; }
.sf-t, .sf-l, .sf-r { stroke: rgba(255, 255, 255, 0.3); stroke-width: 0.8; transition: stroke 0.35s ease; }
.sf-t { fill: #222; } .sf-r { fill: #181818; } .sf-l { fill: #131313; }
.sf-claro.sf-t { fill: #E9E8E3; } .sf-claro.sf-r { fill: #C9C8C2; } .sf-claro.sf-l { fill: #B3B2AC; }
.sf-claro { stroke: rgba(255, 255, 255, 0.55); }
.sf-mapa.sf-t { fill: #26302A; }
.sf-barra.sf-t { fill: #3A3A3A; }
.sf-tope.sf-t, .sf-tope.sf-r, .sf-tope.sf-l { fill: var(--lime); }
.sf-ink { fill: #111; }
.sf-lima { fill: var(--lime); }
.sf-img { fill: #9E9D97; }
.sf-card { fill: rgba(128, 128, 128, 0.32); }
.sf-pant { fill: #0B0B0B; }
.sf-key { fill: var(--lime); }
.sf-ln { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.6; }
.sf-lnk { stroke: #2A2A2A; stroke-width: 2.2; }
.sf-g { stroke-width: 3.4; }
.sf-lima-ln { stroke: var(--lime); }
.sf-dash { stroke-dasharray: 3 5; }
.sf-vidrio { fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; stroke-dasharray: 4 4; }
.sf-cursor { fill: #fff; stroke: #111; stroke-width: 0.8; }
.sf-lente { fill: rgba(170, 238, 33, 0.08); }
.sf-aro { fill: none; stroke: #fff; stroke-width: 3; }
.sf-mango { stroke: #fff; stroke-width: 6; }
.sf-calle { stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; }
.sf-pin { fill: var(--lime); stroke: #111; stroke-width: 1.2; }
.sf-pin-o { fill: #111; }

/* una sola pieza encendida: las demás se apagan y la elegida sube un poco con borde lima */
.sf-p { transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.sf.is-uno .sf-p:not(.is-on) { opacity: 0.34; }
.sf-p.is-on { transform: translateY(-6px); }
.sf-p.is-on :is(.sf-t, .sf-l, .sf-r) { stroke: var(--lime); stroke-width: 1.1; }
.sf.is-todo .sf-p :is(.sf-t, .sf-l, .sf-r) { stroke: var(--lime); }

/* puntos sobre cada pieza (también se pueden señalar) */
.sf-punto { cursor: pointer; transition: opacity 0.4s ease; }
.sf-punto circle:last-child { fill: rgba(255, 255, 255, 0.75); stroke: #111; stroke-width: 1.5; transition: fill 0.3s ease; }
.sf-halo { fill: none; stroke: var(--lime); stroke-width: 1.5; opacity: 0; }
.sf-punto.is-on circle:last-child { fill: var(--lime); }
.sf-punto.is-on .sf-halo { animation: sf-halo 1.6s var(--ease-out) infinite; }
@keyframes sf-halo { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.8); } }
.sf-halo { transform-box: fill-box; transform-origin: center; }

/* armado: las capas bajan desde arriba hasta su lugar cuando la figura aparece */
.sf-a { transition: transform 0.9s var(--ease-out), opacity 0.6s ease; transition-delay: calc(var(--i) * 110ms); }
.serv__fig:not(.is-armada) .sf-a { opacity: 0; transform: translateY(calc(-40px - var(--z) * 0.35px)); }
.serv__fig:not(.is-armada) .sf-punto { opacity: 0; }

/* la lectura: qué es la pieza encendida */
.sf-lectura { min-height: 4.6em; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--mute); }
.sf-lectura b { display: block; margin-bottom: 4px; font: 600 16px/1.2 var(--f-brand); color: var(--paper); }

/* ---------- diagnóstico: la conversación ---------- */
.dg { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #141414; font-size: 14px; }
.dg-q { display: grid; gap: 8px; margin: 0; }
.dg-k, .dg-nota { font: 500 11px/1 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.dg-qt { min-height: 1.5em; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #222; font: 500 15px/1.5 var(--f-text); color: var(--paper); }
.dg-qt::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lime); animation: dg-cursor 1s steps(2) infinite; }
@keyframes dg-cursor { 50% { opacity: 0; } }
.dg-r { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dg-r li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #1B1B1B; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.dg-r li.is-on { opacity: 1; transform: none; }
.dg-r b { font: 600 13px/1 var(--f-brand); }
.dg-r span { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-r i { padding: 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font: 500 12px/1 var(--f-text); font-style: normal; color: var(--mute); }
.dg-r em { grid-column: 2; font: 500 12px/1.2 var(--f-text); font-style: normal; color: #FF8A80; }
.dg-r em::before { content: "✕ "; }
.dg-res { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--lime); color: var(--ink); line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.dg-res.is-on { opacity: 1; transform: none; }
.dg-res b { font: 700 16px/1 var(--f-brand); }
.dg-nota { margin: 0; text-transform: none; letter-spacing: 0; }

@media (max-width: 1000px) {
  .serv { grid-template-columns: 104px minmax(0, 1fr) 52px; }
  .serv__fig { grid-column: 2 / 3; grid-row: 2; justify-self: start; max-width: 520px; }
}
@media (max-width: 760px) {
  .serv { grid-template-columns: 1fr 52px; }
  .serv__fig { grid-column: 1 / -1; grid-row: 3; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-a, .sf-p, .dg-r li, .dg-res { transition: none; }
  .dg-qt::after { animation: none; }
}