/* ============================================================================
   claudionavarro.net · Taller «Mapa y Brújula» — estilos locales
   ----------------------------------------------------------------------------
   Capa 0 y Capa 1 intactas. Sello en uso: Capa 1.5 (Chronos).
   La página es el argumento: el mapa se compone recto y justificado; la
   brújula se tuerce, se desnivela y respira desigual. El dial --osadia de
   Capa 0 es literal aquí: 0 para una mitad, alto para la otra.
   ============================================================================ */

/* -------------------------------------------------------------------- HERO */
/* El dial de osadía de Capa 0, subido para esta página. */
.taller-mapa{ --osadia:1.5; }
.mb-hero{ padding-block:var(--space-6) var(--space-7); }
.mb-hero__rotulo{ font-family:var(--fuente-display); font-size:clamp(1.35rem,2.8vw,1.9rem); color:var(--color-texto-secundario); max-width:30ch; }
.mb-hero__t{ margin-top:var(--space-2); }
.mb-hero__bru{
  font-style:italic; color:var(--sello-acento); display:inline-block;
  transform:rotate(calc(-2.4deg * var(--osadia))) translateY(calc(0.12rem * var(--osadia)));
  transform-origin:0 100%;
}
.mb-hero__vs{ font-family:var(--fuente-mono); font-size:0.45em; font-weight:500; color:var(--color-texto-secundario); }
.mb-hero__baja{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; max-width:50ch; margin-top:var(--space-5); }
.mb-hero__cta{ margin-top:var(--space-5); }

/* --------------------------------------------------- EL CAOS Y EL ORDEN */
.par{ display:grid; gap:var(--space-5); }
@media (min-width:60em){ .par{ grid-template-columns:1fr 1fr; align-items:start; gap:var(--space-6); } }
.par__lado{
  border:var(--linea) solid var(--color-linea);
  background:var(--color-superficie);
  padding:var(--space-5) var(--space-4);
}
/* El mapa: todo a escuadra. La mancha justificada es su firma. */
.par__lado--mapa{ --osadia:0; box-shadow:var(--sombra); }
.par__lado--mapa p{ text-align:justify; hyphens:auto; }
/* La brújula: entra torcida y más abajo, como quien llega sin brújula. */
.par__lado--brujula{
  background:color-mix(in srgb, var(--sello-acento) 8%, var(--color-fondo));
  transform:rotate(calc(1.1deg * var(--osadia))) translateY(calc(1.6rem * var(--osadia)));
  box-shadow:0.45rem 0.6rem 0 rgba(0,0,0,.13);
}
.par__rotulo{ display:block; font-family:var(--fuente-mono); font-size:var(--fs-xs);
  font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--sello-tinta); }
.par__lado h2{ font-family:var(--fuente-display); font-size:1.45rem; font-weight:700; line-height:1.15; margin-top:var(--space-2); }
.par p{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; margin-top:var(--space-3); }

/* La cita (.cita) vive en assets/css/capa0.css: la comparten este manual, el taller de
   yWriter y la página del sistema. */

/* -------------------------------------------------------- LAS METODOLOGÍAS */
.metodo{ max-width:var(--ancho,52rem); margin-inline-start:var(--sangria,0);
  transform:rotate(calc(var(--giro,0deg) * var(--osadia))); }
.metodo + .metodo{ margin-top:var(--space-5); }
.metodo__n{ display:block; font-family:var(--fuente-mono); font-size:var(--fs-xs);
  font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--sello-acento); }
.metodo h3{ font-family:var(--fuente-display); font-size:1.5rem; font-weight:700; line-height:1.15; max-width:28ch; margin-top:var(--space-1); }
.metodo h4{ font-family:var(--fuente-cuerpo); font-weight:600; font-size:1.0625rem; line-height:1.3; margin-top:var(--space-4); margin-bottom:var(--space-2); }
.metodo p{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; max-width:58ch; }
.metodo p + p{ margin-top:var(--space-3); }
.metodo ul, .metodo ol{ margin-top:var(--space-3); max-width:58ch; }
.metodo li{ position:relative; padding-left:var(--space-4); margin-bottom:var(--space-2);
  font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; }
.metodo ul > li::before{
  content:''; position:absolute; left:0; top:0.6em; width:0.4rem; height:0.4rem;
  background:var(--sello-acento); transform:rotate(45deg);
}
.metodo ol{ counter-reset:paso; }
.metodo ol > li{ counter-increment:paso; }
.metodo ol > li::before{
  content:counter(paso); position:absolute; left:0; top:0.1em;
  font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700; color:var(--sello-acento);
}
.metodo code{ font-family:var(--fuente-mono); font-size:0.9em;
  background-color:color-mix(in srgb, var(--sello-acento) 9%, var(--color-fondo));
  border:var(--linea) solid var(--color-linea); padding:0.08em 0.34em; }

/* ------------------------------------------------- EL BOTIQUÍN DE EMERGENCIA */
/* Sin rojo nuevo: el aviso se grita con la tinta más oscura de Capa 0. */
.botiquin{ background:var(--color-censura); color:var(--color-superficie); }
.botiquin__kicker{
  font-family:var(--fuente-mono); font-size:var(--fs-sm); font-weight:700; letter-spacing:0.1em;
  color:color-mix(in srgb, var(--sello-acento) 58%, var(--color-superficie));
}
.botiquin h2{
  font-family:var(--fuente-display); font-weight:800; letter-spacing:-0.02em; line-height:1.02;
  font-size:clamp(1.9rem,4.6vw,3.2rem); color:var(--color-superficie); max-width:24ch; margin-top:var(--space-2);
}
.botiquin__baja{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7;
  color:rgba(246,243,234,.8); max-width:48ch; margin-top:var(--space-3); }
.botiquin__rejilla{ display:grid; gap:var(--space-5) var(--space-4); margin-top:var(--space-6); }
@media (min-width:40em){ .botiquin__rejilla{ grid-template-columns:1fr 1fr; } }
@media (min-width:72em){ .botiquin__rejilla{ grid-template-columns:1.15fr 1fr 1.06fr 0.94fr; } }
.tactica{
  background:var(--color-superficie); color:var(--color-texto); padding:var(--space-4);
  transform:rotate(calc(var(--giro,0deg) * var(--osadia))) translateY(calc(var(--y,0rem) * var(--osadia)));
  box-shadow:0.4rem 0.5rem 0 rgba(0,0,0,.45);
}
.tactica h3{ font-family:var(--fuente-mono); font-size:var(--fs-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--sello-acento); }
.tactica p{ font-family:var(--fuente-display); font-size:0.9375rem; line-height:1.6; margin-top:var(--space-2); }

/* ------------------------------------------------------------------ CIERRE */
.apuntes{ padding:var(--space-5); }
.apuntes h2{ font-family:var(--fuente-display); font-weight:700; font-size:var(--fs-lg); line-height:1.12; }
.apuntes p{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; max-width:52ch; margin-top:var(--space-3); }

/* ----------------------------------------------------------------- MÓVIL */
@media (max-width:59.99em){
  .par__lado--brujula{ transform:none; }
  .metodo{ max-width:none; margin-inline-start:0; transform:none; }
  .tactica{ transform:none; }
  .mb-hero__bru{ transform:none; }
}