/* ==========================================================================
   propio.css — EL ESTILO DE LAS PÁGINAS PROPIAS DE LULOPIX (/la-metafora y las
   páginas de cada habilidad). Vivía en interiores/interiores.css de la plantilla
   del motor; salió el 2026-10-08 junto con sus dos plantillas, porque solo sirve a
   esta web. Lo cargan esas dos plantillas (wp_enqueue_style, después de la hoja
   común): ninguna otra página lo pide.
   Servidor: wp-content/themes/campamento/propio/propio.css
   ========================================================================== */

/* ==========================================================================
   La metáfora — el REGISTRO FIGURADO (template-la-metafora.php). Narrativa en
   prosa + recorrido de 6 etapas con sus habilidades. Reutiliza .prosa, los
   badges y el glow cian del resto de la hoja; solo añade la cita-ancla, las
   tarjetas de etapa y las filas de habilidad.
   ========================================================================== */

/* La cita-ancla de los bloques narrativos: Chakra Petch, borde lima, grande —
   la frase que remata un bloque. Pisa la .prosa blockquote (caja cian tenue):
   aquí no hay caja, el peso lo lleva la tipografía y el filo lima. */
.prosa .metafora-cita,
.metafora-cita {
  font-family: var(--fuente-display);
  font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 600; line-height: 1.35;
  color: var(--texto);
  border-left: 3px solid var(--lima);
  padding: 0.3rem 0 0.3rem 1.25rem;
  margin: 1.9rem 0; max-width: 22em;
  background: none; box-shadow: none; border-radius: 0;
}

/* El recorrido: etapas numeradas, cada una con sus habilidades. */
.metafora-etapas { list-style: none; display: grid; gap: 1.5rem; margin-top: 2rem; }
.metafora-etapa {
  position: relative;
  background: rgba(43, 184, 198, 0.08);
  border: 1px solid rgba(43, 184, 198, 0.35);
  box-shadow: 0 0 18px rgba(43, 184, 198, 0.16);
  border-radius: 16px;
  padding: 1.5rem 1.6rem 1.6rem;
}
.metafora-etapa-cab { display: flex; align-items: baseline; gap: 0.75rem 0.9rem; flex-wrap: wrap; }
.metafora-etapa-num {
  font-family: var(--fuente-display); font-weight: 800;
  font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--lima);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.metafora-etapa-nombre { margin: 0; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
.metafora-etapa-fig {
  margin: 0.7rem 0 0; font-size: 1.02rem; line-height: 1.55;
  color: var(--gris-claro); font-style: italic;
}
.metafora-habilidades { list-style: none; margin: 1.2rem 0 0; display: grid; gap: 0; }
.metafora-hab { padding: 0.85rem 0; border-top: 1px solid rgba(43, 184, 198, 0.18); }
.metafora-hab:first-child { border-top: 0; padding-top: 0.4rem; }
.metafora-hab-nombre {
  display: block;
  font-family: var(--fuente-display); font-weight: 700;
  font-size: 1.02rem; color: var(--lima); line-height: 1.25;
}
/* El título de la habilidad enlaza a su página dedicada (/<slug>/): subrayado
   lima tenue para leerse como enlace; al pasar, blanco. */
.metafora-hab-nombre a {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(207, 224, 74, 0.5);
}
.metafora-hab-nombre a:hover { color: var(--texto); text-decoration-color: var(--texto); }
/* La metáfora: lead en cursiva (el alma); el detalle: qué hace, en gris de cuerpo. */
.metafora-hab-frase { display: block; margin-top: 0.25rem; font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--texto); }
.metafora-hab-detalle { display: block; margin-top: 0.45rem; font-size: 0.95rem; line-height: 1.6; color: var(--gris-claro); }
.metafora-etapa-nota {
  margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 1px dashed rgba(43, 184, 198, 0.3);
  font-size: 0.92rem; line-height: 1.55; color: var(--gris-claro);
}
/* Dos columnas de habilidades desde tablet: las etapas largas (hasta 14) se leen
   en dos columnas en vez de una tira infinita. Las dos de la fila superior no
   llevan línea; el resto sí, marcando las filas. */
@media (min-width: 900px) {
  .metafora-habilidades { grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem; }
  .metafora-hab:nth-child(2) { border-top: 0; }
}

/* El puente al registro literal (/sistema). */
.metafora-puente {
  margin-top: 2rem; font-size: 1.05rem; line-height: 1.6;
  padding: 1.1rem 1.4rem;
  background: rgba(43, 184, 198, 0.10);
  border: 1px solid rgba(43, 184, 198, 0.35);
  box-shadow: 0 0 18px rgba(43, 184, 198, 0.18);
  border-radius: 12px;
}

/* ==========================================================================
   Página de HABILIDAD (template-skill.php): cabecera + el SKILL.md renderizado
   (ParsedownExtra). Reutiliza .prosa; añade el comando, tablas, bloques de
   código y h4 que la prosa base no estiliza.
   ========================================================================== */
.skill-comando { margin-top: 0.75rem; }
.skill-comando code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem; color: var(--lima);
  background: rgba(43, 184, 198, 0.15);
  border: 1px solid rgba(43, 184, 198, 0.40);
  padding: 0.2em 0.65em; border-radius: 6px;
}
.skill-descripcion { max-width: 46em; }

/* El cuerpo markdown: encabezados menores, código e hilos que .prosa no cubre. */
.skill-cuerpo h4 { font-family: var(--fuente-display); font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.skill-cuerpo h5, .skill-cuerpo h6 { font-family: var(--fuente-display); font-size: 0.98rem; margin: 1.3rem 0 0.4rem; color: var(--gris-claro); }
.skill-cuerpo code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em;
  background: rgba(255, 255, 255, 0.08); padding: 0.12em 0.42em; border-radius: 5px;
  overflow-wrap: anywhere;
}
.skill-cuerpo pre {
  background: rgba(10, 18, 30, 0.65);
  border: 1px solid rgba(43, 184, 198, 0.28);
  border-radius: 10px; padding: 1rem 1.15rem; overflow-x: auto; margin: 1.3rem 0;
}
.skill-cuerpo pre code { background: none; padding: 0; font-size: 0.85rem; line-height: 1.55; color: var(--gris-claro); }

/* Tablas: envueltas en .tabla-scroll (el template lo inyecta) para que una tabla
   ancha se deslice dentro de su caja y nunca empuje el ancho de la página. */
.tabla-scroll { overflow-x: auto; margin: 1.3rem 0; -webkit-overflow-scrolling: touch; }
.skill-cuerpo table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.skill-cuerpo th, .skill-cuerpo td {
  border: 1px solid rgba(43, 184, 198, 0.30);
  padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; line-height: 1.5;
}
.skill-cuerpo thead th { background: rgba(43, 184, 198, 0.12); font-family: var(--fuente-display); }
.skill-vacio { color: var(--gris-claro); font-style: italic; }