/* ============================================================
   DYRECO · p-sub.css — lo propio de las SUBPÁGINAS de división
   ------------------------------------------------------------
   Seis páginas hijas (29-sep-2026): /uniformidad/personalizacion,
   /uniformidad/hosteleria-y-hoteles, /uniformidad/epis,
   /ferreteria/copia-de-llaves, /rotulacion/vehiculos y
   /rotulacion/vinilos-y-escaparates.

   Cada hija carga la hoja de SU división (p-uniformidad.css,
   p-rotulacion.css o p-ferreteria.css) y reutiliza sus componentes
   tal cual: el hero de división (estilos.css §30), el raíl (§33),
   la banda destacada (§32), las otras divisiones (§35), la FAQ
   (§18) y el cierre (§31). Aquí solo vive lo que NO existía:
     §1 · la división madre marcada en la navegación
     §2 · (retirado el 29-sep-2026: las migas ya no se ven en el hero)
     §3 · la tabla de consulta (.stabla)
     §4 · el bloque de texto a dos columnas (.stexto)
   Nada de esta hoja toca a las páginas de división.
   ============================================================ */


/* --- §1 · La división madre en la navegación ---------------
   Las hijas marcan su división con aria-current="true" (no es la
   página actual, es la sección en la que está): se pinta igual que
   el aria-current="page" de estilos.css §05 y §20. */
.cab__lista a[aria-current="true"] { color: var(--amarillo); }
.cab__lista a[aria-current="true"]::after { transform: scaleX(1) skewX(-30deg); }
.panel__nav a[aria-current="true"] { color: var(--amarillo); }
.pie__col a[aria-current="true"] { color: var(--texto); }


/* --- §2 · Migas de pan: retiradas (29-sep-2026) ---------------
   Juan las quitó del hero de las seis hijas: el H1 abre el hero como en
   los hubs. La ruta sigue en el JSON-LD (BreadcrumbList). */


/* --- §3 · Tabla de consulta ---------------------------------
   Es la tabla de los artículos (p-articulo.css, .art__tabla) traída a
   una página comercial: cabecera en amarillo con el registro del
   kicker, celdas en --apagado y la primera columna en --texto, que es
   la que se busca con la vista. Por debajo de 760 px cada fila pasa a
   ficha y cada celda lleva su etiqueta (data-et), así no hay scroll
   lateral en el móvil. */
.stabla { padding-block: var(--sec-y); }
.stabla__caja { border-top: 1px solid var(--linea-alta); }
.stabla__t {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(.9375rem, 1vw, 1rem);
  line-height: var(--lh-corto);
  text-align: left;
}
.stabla__t th {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1.4;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: bottom;
}
.stabla__t td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--linea);
  color: var(--apagado);
  vertical-align: top;
}
.stabla__t td:first-child {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto);
}
.stabla__t th:last-child,
.stabla__t td:last-child { padding-right: 0; }
.stabla__pie {
  max-width: var(--medida-l);
  margin-top: var(--pieza);
  color: var(--apagado);
  font-size: var(--fs-sm);
}
@media (max-width: 760px) {
  .stabla__t, .stabla__t tbody, .stabla__t tr, .stabla__t td { display: block; }
  .stabla__t thead { display: none; }
  .stabla__t tr { padding-block: 18px; border-bottom: 1px solid var(--linea); }
  .stabla__t td { border: 0; padding: 0; }
  .stabla__t td + td { margin-top: 10px; }
  .stabla__t td:first-child { margin-bottom: 12px; }
  .stabla__t td:not(:first-child)::before {
    content: attr(data-et);
    display: block;
    margin-bottom: 2px;
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--amarillo);
  }
}


/* --- §4 · Texto a dos columnas -------------------------------
   Titular y entrada a la izquierda, fija mientras pasa el texto;
   párrafos y lista a la derecha, a la medida de lectura del cuerpo.
   Es la forma de los bloques que responden una pregunta concreta
   (lunas y normativa, por dentro o por fuera del cristal…): el
   párrafo que abre la columna derecha es la respuesta y se entiende
   arrancado de la página. */
.stexto { padding-block: var(--sec-y); }
.stexto__int {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 72px) var(--gap);
  align-items: start;
}
.stexto__cab {
  grid-column: 1 / span 5;
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--alto-cab) + 32px);
}
.stexto__cab .h2 { max-width: 16ch; }
.stexto__entrada {
  margin-top: var(--pieza);
  max-width: var(--medida);
  color: var(--apagado);
}
.stexto__cuerpo { grid-column: 7 / span 6; max-width: 620px; }
.stexto__cuerpo > * + * { margin-top: 1.1em; }
.stexto__cuerpo p { color: var(--apagado); }
.stexto__cuerpo p:first-child { color: var(--texto); font-size: clamp(1.0625rem, 1.2vw, 1.25rem); line-height: 1.6; }
.stexto__cuerpo h3 {
  margin-top: clamp(28px, 2.6vw, 40px);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}
.stexto__lista { display: grid; gap: 12px; }
.stexto__lista li {
  position: relative;
  padding-left: 26px;
  color: var(--apagado);
}
.stexto__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 12px; height: 2px;
  background: var(--amarillo);
}
.stexto__lista strong { color: var(--texto); font-weight: 600; }
@media (max-width: 900px) {
  .stexto__cab { grid-column: 1 / -1; position: static; }
  .stexto__cuerpo { grid-column: 1 / -1; }
}


/* --- Enlaces dentro de la prosa ------------------------------
   `.enlace-sub` (estilos.css) es el subrayado de la casa; dentro de
   un párrafo en --apagado el enlace sube a --texto para que se vea
   que lo es sin necesidad de color. */
.stexto__cuerpo .enlace-sub,
.stabla__pie .enlace-sub,
.faq__r .enlace-sub { color: var(--texto); }