/* ============================================================================
   claudionavarro.net · Taller de yWriter — estilos locales
   ----------------------------------------------------------------------------
   Capa 0 y Capa 1 quedan intactas: aquí solo se compone esta página.
   Sello en uso: Capa 1.5 (Chronos), el verde de utilidad que comparten
   la herramienta y los talleres.
   La página es un cuaderno de taller: la columna de lectura deambula, las
   capturas se escalonan y ninguna pieza cae en el mismo eje que la anterior.
   ============================================================================ */

/* -------------------------------------------------------------------- HERO */
/* El dial de osadía de Capa 0, subido para esta página. El hero (.taller-hero)
   y los bloques osados viven en assets/css/capa0.css: los comparte la página del sistema. */
.taller-ywriter{ --osadia:1.4; }

/* La cita (.cita) vive en assets/css/capa0.css: la comparten este taller, el de Mapa vs
   Brújula y la página del sistema. */

/* ------------------------------------------------------------------ CÓDIGO */
.mod code, .taller-hero code, .cierre code{
  font-family:var(--fuente-mono); font-size:0.9em; line-height:1.4;
  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;
}

/* -------------------------------------------------- REGLA TRAZADA A MANO */
.trazo{
  height:0.25rem; margin-block:var(--space-5); max-width:52ch;
  background-color:var(--color-linea);
  -webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:7.5rem 0.25rem; mask-size:7.5rem 0.25rem;
}

/* ------------------------------------------------- CUATRO PIEZAS DEL MÉTODO */
/* ------------------------------------------------------------------- MANUAL */
.mod{ position:relative; padding-block:var(--space-6); }
.mod::after{ content:''; display:block; clear:both; }
/* La franja alterna en lugar de una línea de separación: agrupa sin cortar. */
.mod--franja::before{
  content:''; position:absolute; inset-block:0; left:50%; width:100vw; margin-left:-50vw;
  background-color:color-mix(in srgb, var(--sello-acento) var(--tinte-franja,5%), var(--color-fondo));
  z-index:-1;
}
.mod__in{ max-width:var(--ancho,58rem); margin-inline-start:var(--sangria,0); }
.mod__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);
}
.mod__t{ font-family:var(--fuente-display); font-size:1.55rem; font-weight:700; line-height:1.14; max-width:30ch; margin-top:var(--space-1); }
.mod__sub{ font-family:var(--fuente-cuerpo); font-weight:600; font-size:1.0625rem; line-height:1.3; margin-top:var(--space-5); margin-bottom:var(--space-2); }
.mod p{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; max-width:60ch; }
.mod p + p{ margin-top:var(--space-3); }
.mod ul, .mod ol{ margin-top:var(--space-3); max-width:60ch; }
.mod 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; }
.mod ul > li::before{
  content:''; position:absolute; left:0; top:0.6em; width:0.4rem; height:0.4rem;
  background:var(--sello-acento); transform:rotate(45deg);
}
.mod ol{ counter-reset:paso; }
.mod ol > li{ counter-increment:paso; }
.mod 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);
}
.mod a{ border-bottom:var(--linea) solid var(--sello-acento); padding-bottom:0.05rem; }
.mod a:hover{ color:var(--sello-acento); }

/* Capturas: cada una con su ancho, su desnivel y su giro. Las que flotan
   dejan que el texto se les acerque por el lado contrario. */
.mod figure{
  margin-block:var(--space-4); width:var(--w,100%); margin-inline-start:var(--off,0);
  transform:rotate(calc(var(--giro,0deg) * var(--osadia)));
}
.mod figure img{
  width:100%; height:auto;
  background:var(--color-superficie);
  border:var(--linea) solid var(--color-linea);
  box-shadow:0.3rem 0.42rem 0 rgba(0,0,0,.12);
}
.mod figcaption{ font-family:var(--fuente-mono); font-size:var(--fs-xs); line-height:1.5;
  color:var(--color-texto-secundario); margin-top:var(--space-2); max-width:40ch; }
@media (min-width:64em){
  .mod .fig--der{ float:right; clear:right; width:var(--w,22rem); margin:0 0 var(--space-4) var(--space-5); }
  .mod .fig--izq{ float:left;  clear:left;  width:var(--w,22rem); margin:0 var(--space-5) var(--space-4) 0; }
}

/* Avisos técnicos: la ficha del sistema, con su esquina cortada. */
.alerta{ margin-block:var(--space-5); max-width:54ch; }
.alerta .t-label{ display:block; color:var(--sello-acento); margin-bottom:var(--space-2); }
.alerta p{ font-size:1rem; max-width:none; }
.ficha--ancha .ficha__fila{ grid-template-columns:11rem 1fr; }

/* ------------------------------------------------------------------ CIERRE */
.cierre{ padding:var(--space-5); }
.cierre h2{ font-family:var(--fuente-display); font-weight:700; font-size:var(--fs-lg); line-height:1.12; }
.cierre 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:63.99em){
  .mod__in{ max-width:none; margin-inline-start:0; }
  .mod figure{ width:100%; margin-inline-start:0; transform:none; }

}