/* ═══════════════════════════════════════════════════════════════════════
   LA PREGUNTA DEL PIE · 09/10/2026
   17/10/2026: la pregunta pasó de «¿Qué es un plug?» a «¿Qué es el neomarketing?». La hoja y
   las clases (.pie-plug…) se quedan con su nombre para no tocar las páginas ni la copia del móvil.

   La misma pregunta, en el pie de todas las páginas. Pliegue de una sola
   pregunta, a juego con las columnas del pie: la etiqueta pequeña y
   espaciada de siempre, y la respuesta debajo, a lectura cómoda.

   Un solo fichero para todas: el pie de cada página lleva su estilo
   puesto a mano, y esto se añade encima sin tocar el de ninguna. Los
   colores salen de las variables de la casa (--gray, --graphite, --red,
   --ink); si una página no las define, valen estos mismos de aquí.

   · .pie-plug             el pliegue, dentro del pie, entre las columnas
                           y la fila de la marca
   · .pie-plug--suelto     el mismo, en las páginas que no tienen pie
                           de columnas (datos, flujos): sin raya propia
   · .pie-plug--oscuro     el mismo, sobre fondo negro (enlaces)

   En el móvil —la versión app, con el pie apagado— no se ve este:
   aima-app-movil.js copia la pregunta dentro de la app (plugApp).
   ═══════════════════════════════════════════════════════════════════════ */

.pie-plug{border-bottom:1px solid var(--pie-plug-raya,rgba(11,11,13,.1))}
.pie-plug details{max-width:780px}
.pie-plug summary{
  display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none;
  padding:22px 0;
  font:600 11px 'Poppins',sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gray,#8A8D8F); transition:color .3s;
  -webkit-tap-highlight-color:transparent;
}
.pie-plug summary::-webkit-details-marker{display:none}
.pie-plug summary::marker{content:""}
.pie-plug summary::after{
  content:"+"; font:400 20px/1 'Poppins',sans-serif; letter-spacing:0;
  color:var(--red,#C1272D);
}
.pie-plug details[open] summary::after{content:"–"}
.pie-plug summary:hover{color:var(--ink,#0B0B0D)}
.pie-plug summary:focus-visible{outline:2px solid var(--red,#C1272D); outline-offset:4px; border-radius:2px}
.pie-plug-r{
  max-width:66ch; padding:0 0 28px;
  font:400 13.5px/1.75 'Montserrat',sans-serif; letter-spacing:0; text-transform:none;
  color:var(--graphite,#3A3A3C);
}
.pie-plug-r b{font-weight:600; color:var(--ink,#0B0B0D)}

/* sin pie de columnas: datos y flujos. La raya de arriba la pone la
   propia página (datos) o no hace falta (flujos). */
.pie-plug--suelto{border-bottom:0; margin:clamp(20px,3vw,34px) 0 0}
.pie-plug--suelto summary{padding:18px 0}

/* sobre negro: enlaces. Una tarjeta más de la lista, con la misma piel
   (fondo y borde de las tarjetas de esa página). */
.pie-plug--oscuro{
  max-width:560px; margin:30px auto 0; padding:0 18px;
  border:1px solid rgba(242,242,240,.11); border-radius:13px;
  background:rgba(242,242,240,.045);
}
.pie-plug--oscuro summary{justify-content:space-between; padding:18px 0; color:rgba(242,242,240,.72)}
.pie-plug--oscuro summary:hover{color:#F2F2F0}
.pie-plug--oscuro summary::after{color:#E8686F}
.pie-plug--oscuro .pie-plug-r{color:rgba(242,242,240,.8); padding-bottom:22px}
.pie-plug--oscuro .pie-plug-r b{color:#F2F2F0}

@media (max-width:560px){
  .pie-plug summary{padding:20px 0; letter-spacing:.18em}
  .pie-plug-r{font-size:13px; padding-bottom:24px}
}
@media (prefers-reduced-motion:reduce){ .pie-plug summary{transition:none} }