/* ══════════════════════════════════════════════════════════════════════
   INSPECCIÓN — LAS CINCO ZONAS
   ──────────────────────────────────────────────────────────────────────
   Hereda todo de moderna.css. Aquí sólo va lo que esa hoja no tiene:
   el dibujo del camión, el riel de zonas y la lista de componentes.

   Dos reglas que me impuse y conviene no romper:

   1. NADA de reusar los colores de clase de licencia (A ámbar, B verde,
      C azul) para las zonas. Significan otra cosa — la licencia que
      compras — y repetirlos aquí confunde las dos ideas. Las zonas se
      distinguen por POSICIÓN en el camión, no por color.

   2. NADA de tarjetas con sombra para agrupar. Lo que agrupa es una
      regla fina y aire, igual que el resto del sitio.
   ══════════════════════════════════════════════════════════════════════ */

.insp-encabezado{ padding:56px 0 24px; }
.insp-encabezado p{ max-width:62ch; }

/* ── El camión ──────────────────────────────────────────────────────── */
.camion{ margin:28px 0 8px; }
.camion svg{ width:100%; height:auto; display:block; }
.camion .cuerpo{ fill:none; stroke:var(--azul-700); stroke-width:2.5;
                 stroke-linejoin:round; }
.camion .llanta{ fill:var(--papel); stroke:var(--azul-700); stroke-width:2.5; }
.camion .maza{ fill:var(--azul-400); }
.camion .suelo{ stroke:var(--linea-2); stroke-width:2; }
.camion .corchete{ fill:none; stroke:var(--azul-600); stroke-width:2.5; }
/* La letra y el texto van en un solo <text> centrado. Si fueran dos
   elementos, 'middle' centraría cada uno por su cuenta y se encimarían. */
.camion .zona-rotulo{ text-anchor:middle; }
.camion .zona-rotulo .let{ font-family:var(--dato); font-size:27px;
                           font-weight:500; fill:var(--ambar); }
.camion .zona-rotulo .txt{ font-family:var(--texto); font-size:23px;
                           fill:var(--tinta-2); }
.camion .cabina-caja{ fill:none; stroke:var(--ambar); stroke-width:2.5;
                      stroke-dasharray:7 5; }
/* 'start', no 'middle': centrada se salía por la izquierda del lienzo. */
.camion .cabina-txt{ font-family:var(--dato); font-size:22px; fill:var(--ambar);
                     text-anchor:start; letter-spacing:.06em; }

/* El eje que se repite: se marca en el dibujo con un anillo, para que se
   vea de un golpe que los tres grupos de ruedas piden lo mismo. */
.camion .eje-repetido{ fill:none; stroke:var(--ambar); stroke-width:3.5;
                       stroke-dasharray:7 6; }

.camion-pie{ font-size:.86rem; color:var(--tinta-2); margin:4px 0 0;
             max-width:68ch; }

/* ── Riel de zonas ──────────────────────────────────────────────────── */
/* Rejilla, no flex: con flex el quinto se caía de renglón en cuanto el
   nombre de una zona crecía. Cinco columnas iguales y se acabó. */
.zonas{ display:grid; grid-template-columns:repeat(5,1fr); gap:0;
        border-top:1px solid var(--linea);
        margin:36px 0 0; padding:0; list-style:none; }
.zonas li{ border-bottom:1px solid var(--linea);
           border-right:1px solid var(--linea); }
.zonas li:last-child{ border-right:0; }
.zonas button{ width:100%; text-align:left; background:none; border:0;
               padding:16px 18px; cursor:pointer; font:inherit; color:inherit;
               display:block; transition:background .15s; }
.zonas button:hover{ background:var(--papel-2); }
.zonas button[aria-current="true"]{ background:var(--azul-900); color:#fff; }
.zonas .let{ font-family:var(--dato); font-size:.8rem; letter-spacing:.08em;
             color:var(--ambar); display:block; }
.zonas button[aria-current="true"] .let{ color:var(--ambar-vivo); }
.zonas .nom{ display:block; font-family:var(--display); font-size:1.02rem;
             line-height:1.25; margin-top:5px; }
.zonas .cuenta{ display:block; font-family:var(--dato); font-size:.72rem;
                color:var(--tinta-2); margin-top:7px; }
.zonas button[aria-current="true"] .cuenta{ color:var(--azul-200); }

/* ── Dónde se para el alumno ────────────────────────────────────────── */
.donde{ border-left:3px solid var(--ambar); padding:2px 0 2px 16px;
        margin:30px 0 0; }
/* La franja sí dice algo: "párate aquí". No es adorno. */
.donde b{ font-family:var(--dato); font-size:.74rem; letter-spacing:.09em;
          text-transform:uppercase; color:var(--ambar); display:block; }
.donde p{ margin:5px 0 0; max-width:62ch; }

/* ── Grupos y componentes ───────────────────────────────────────────── */
.grupo{ margin:34px 0 0; }
.grupo > h3{ font-family:var(--display); font-size:1.32rem; font-weight:500;
             margin:0; padding-bottom:9px; border-bottom:1px solid var(--linea-2);
             display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.grupo .num{ font-family:var(--dato); font-size:.76rem; color:var(--tinta-2); }
.grupo .repite{ font-family:var(--dato); font-size:.68rem; letter-spacing:.07em;
                text-transform:uppercase; color:var(--ambar);
                border:1px solid currentColor; padding:2px 7px; border-radius:2px; }
.nota-eje{ font-size:.9rem; color:var(--tinta-2); margin:11px 0 0;
           max-width:66ch; }

/* Foto a la izquierda, texto a la derecha. Sin tarjeta ni sombra: lo que
   separa un componente del siguiente es una regla fina, como en todo el
   sitio. Si la foto aún no existe, .sin-foto devuelve el texto a todo lo
   ancho en vez de dejar un hueco. */
.pieza{ border-bottom:1px solid var(--linea); padding:17px 0;
        display:grid; grid-template-columns:132px 1fr; gap:18px;
        align-items:start; }
.pieza.sin-foto{ grid-template-columns:1fr; }
.pieza.sin-foto .pieza__img{ display:none; }
.pieza__img{ width:132px; height:132px; object-fit:cover; display:block;
             border-radius:2px; background:var(--papel-2); }
.pieza:last-child{ border-bottom:0; }
.pieza__t{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pieza__t h4{ margin:0; font-size:1.02rem; font-weight:600; }
.pieza__es{ color:var(--tinta-2); font-size:.95rem; }
.pieza ul{ margin:9px 0 0; padding-left:19px; max-width:70ch; }
.pieza li{ margin:4px 0; }
.pieza .es li{ color:var(--tinta-2); }
.pieza .es{ margin-top:7px; }

.oir{ margin-left:auto; font-family:var(--dato); font-size:.72rem;
      letter-spacing:.06em; background:none; border:1px solid var(--linea-2);
      color:var(--azul-700); padding:5px 11px; border-radius:2px;
      cursor:pointer; white-space:nowrap; }
.oir:hover{ border-color:var(--ambar); color:var(--ambar); }
.oir[disabled]{ opacity:.45; cursor:default; border-style:dashed; }
.oir[disabled]:hover{ border-color:var(--linea-2); color:var(--azul-700); }
.oir.sonando{ background:var(--azul-900); border-color:var(--azul-900);
              color:#fff; }

@media (max-width:1000px){ .zonas{ grid-template-columns:repeat(3,1fr); }
  .zonas li:nth-child(3n){ border-right:0; } }
@media (max-width:640px){
  .pieza{ grid-template-columns:1fr; }
  .pieza__img{ width:100%; height:200px; }
  .zonas{ grid-template-columns:1fr; }
  .zonas li{ border-right:0; }
  .oir{ margin-left:0; }
}

/* ── Sistemas desarmados ───────────────────────────────────────────────
   Imagen a la izquierda con marcadores numerados; leyenda a la derecha.
   Los marcadores son ámbar con la letra del fondo hondo, igual que las
   etiquetas del resto del sitio: el ámbar es la única señal de "mira aquí". */
.sistemas{ margin:84px 0 0; border-top:1px solid var(--linea); padding-top:56px; }
.sistemas__intro{ max-width:62ch; color:var(--tinta-2); }
.sistema{ margin:56px 0 0; }
.sistema > h3{ font-family:var(--display); font-size:1.5rem; font-weight:500; margin:0 0 18px;
               padding-bottom:10px; border-bottom:1px solid var(--linea-2); }
.sistema > h3 .es{ font-family:var(--texto); font-size:.95rem; font-weight:400; color:var(--tinta-2); margin-left:10px; }
/* La imagen va a todo el ancho (es panorámica) y la leyenda en dos columnas debajo. */
.sistema__cuerpo{ display:block; }
.sistema__fig{ position:relative; margin:0; background:#f4f6f8; border:1px solid var(--linea); }
.sistema__fig img{ display:block; width:100%; height:auto; }
.sistema__fig .marca{ position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
                      border-radius:50%; background:var(--ambar); color:#fff;
                      font-family:var(--dato); font-size:.78rem; font-weight:500;
                      display:flex; align-items:center; justify-content:center;
                      border:2px solid #fff; box-shadow:0 0 0 1px rgba(10,27,48,.35); }
.sistema__leyenda{ list-style:none; margin:26px 0 0; padding:0; column-count:2; column-gap:44px; }
.sistema__leyenda li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea);
                      break-inside:avoid; }
.sistema__leyenda li:last-child{ border-bottom:0; }
.sistema__leyenda .num{ flex:0 0 24px; height:24px; border-radius:50%; background:var(--ambar); color:#fff;
                        font-family:var(--dato); font-size:.72rem; display:flex; align-items:center;
                        justify-content:center; margin-top:2px; }
.sistema__leyenda b{ font-weight:600; }
.sistema__leyenda i{ font-style:normal; color:var(--tinta-2); font-size:.92rem; margin-left:6px; }
.sistema__leyenda .dice{ display:block; font-size:.88rem; line-height:1.4; margin-top:3px; }
.sistema__leyenda .dice.es{ color:var(--tinta-2); }
@media (max-width:860px){ .sistema__leyenda{ column-count:1; } }

/* ── La oración modelo (lo que SE DICE) y el manual debajo ─────────────── */
.oracion{ font-family:var(--display); font-size:1.2rem; line-height:1.5; margin:12px 0 0; max-width:66ch; }
.oracion.es{ font-family:var(--texto); font-size:.98rem; line-height:1.5; color:var(--tinta-2); margin-top:7px; }
.oracion .dilo{ display:inline-block; font-family:var(--dato); font-size:.64rem; letter-spacing:.1em;
                text-transform:uppercase; color:var(--ambar); border:1px solid currentColor; border-radius:2px;
                padding:1px 6px; margin-right:10px; vertical-align:2px; }
.oracion.es .dilo{ color:var(--tinta-2); }
.manual{ margin-top:12px; font-size:.9rem; }
.manual summary{ cursor:pointer; font-family:var(--dato); font-size:.7rem; letter-spacing:.07em;
                 text-transform:uppercase; color:var(--tinta-2); padding:4px 0; }
.manual[open] summary{ color:var(--ambar); }
.manual ul{ margin:8px 0 0; }
.oir-or{ margin-left:auto; }
.oir--m{ margin-left:10px; padding:3px 9px; }

/* Diagrama dentro del grupo (ya no es una sección aparte) */
.grupo > .sistema{ margin:20px 0 6px; padding:16px 0 4px; border-top:1px dashed var(--linea-2); }
.sistema h5{ font-family:var(--dato); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
             font-weight:500; color:var(--ambar); margin:0 0 12px; }
.sistema h5 .es{ color:var(--tinta-2); margin-left:8px; text-transform:none; letter-spacing:0; font-family:var(--texto); font-size:.86rem; }