/* ===== MAQUETA 4 · EDITORIAL ========================================
   La que rompe dos reglas a proposito:
     1. El fondo NO es blanco. Es crema calido.
     2. NO hay ilustracion. El slot de arte esta vacio.
   Todo el peso lo lleva la tipografia y el filete. Sirve para demostrar
   que si el arte no es bueno, es mejor no ponerlo — y es la que mejor se
   ve de las cuatro (PROYECTO.md §0).

   La forma es una reticula asimetrica: el titulo de cada bloque en una
   columna fija a la izquierda, el contenido a la derecha, y un numero
   correlativo delante. Esa columna es el unico sitio donde esta maqueta
   toca el HTML, y no lo toca: se hace con `display:grid` sobre el MISMO
   marcado de seccion que usan las otras tres.

   ── Que se rehizo y por que ─────────────────────────────────────────
   La hoja anterior declaraba `.fila` y `.lista-horas` para montar esa
   reticula y NINGUNA plantilla emitia esas clases: 30 de sus 74 lineas
   eran codigo muerto y las paginas interiores se veian exactamente como
   la maqueta clasica, pero en crema. La promesa estaba escrita y no se
   cumplia. Ahora la reticula cuelga de `section`, que es lo que de
   verdad llega al navegador.
   ==================================================================== */

/* El :root que hubo aqui pisaba --acento y --acento-d con el teja
   sugerido, asi que la maqueta ignoraba el color que elegia la pareja.
   `tema.py` ya recalibra fondo, nieve y linea por maqueta: aqui no hace
   falta nada. */

.m-editorial{
  /* Alto de la barra. La clasica la pinta en dos filas y 92px; aqui es
     un cabezal de revista de una sola fila, y el numero hace falta
     suelto porque la columna de titulos se pega debajo de el. */
  --barra:64px;
  /* El ancho de la columna de titulos. Sale de la medida, no de un
     numero redondo: a menos de 200px «Como ir y volver» parte en tres
     lineas. */
  --rail:clamp(190px,20vw,270px);
}

.marco{max-width:1180px;margin:0 auto;padding:0 clamp(1.3rem,5vw,3rem)}

/* ── el cabezal ────────────────────────────────────────────────────
   Marca a la izquierda, secciones a la derecha, un filete debajo y
   nada mas. La barra compartida es una pila centrada de 92px: eso es de
   la clasica, no del sistema. */

.m-editorial nav.barra{
  flex-direction:row;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
  min-height:var(--barra);
  padding:1.1rem 0 .9rem;
}
.m-editorial nav.barra .marca{font-size:1.05rem}
.m-editorial nav.barra .links{gap:1.8rem;flex-wrap:wrap;justify-content:flex-end}

/* ── la portada ────────────────────────────────────────────────────
   Un nombre por linea y el «&» suelto entre los dos: a 8rem, los dos
   nombres en la misma linea solo caben si son cortos, y en cuanto uno
   es «Cristina» la linea se parte por donde quiere. */

.hero{
  padding:clamp(3.5rem,12vh,7rem) 0 0;
}
.hero .sobre{
  font-size:.68rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gris-cl);
}
.hero .nombres{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3.2rem,12vw,8rem);line-height:.9;
  letter-spacing:-.022em;
  color:var(--tinta);margin:1.3rem 0 0;
}
.hero .nombres .amp{
  font-style:italic;color:var(--acento);
  display:block;font-size:.42em;margin:.06em 0 .04em;
}

/* Los tres datos, como el pie de foto de una portada: filete arriba,
   etiqueta pequena y dato en serif. */
.hero .meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:clamp(2.2rem,5vw,3.2rem);
  border-top:1px solid var(--linea);
}
.hero .meta div{padding:1.25rem 1.4rem 1.3rem 0}
.hero .meta div+div{border-left:1px solid var(--linea);padding-left:1.4rem}
.hero .meta .k{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-cl);display:block;margin-bottom:.35rem;
}
.hero .meta .v{font-family:var(--serif);font-size:1.45rem;color:var(--tinta)}

/* ── cuenta atras ──
   Alineada a la izquierda con el resto, no centrada: en esta maqueta
   nada esta centrado. */
.m-editorial .cd{
  justify-content:flex-start;
  gap:clamp(1.8rem,5vw,3.2rem);
  margin:0;
  padding:1.4rem 0 0;
}
.m-editorial .cd .u{text-align:left}
.m-editorial .cd .u .n{font-size:clamp(1.6rem,4.5vw,2.1rem)}

/* ── el sumario ────────────────────────────────────────────────────
   Las «puertas» de la portada, en formato indice de revista: numero,
   titulo y un filete por entrada. Van a las OTRAS paginas; enlazar a la
   portada desde la portada es el enlace muerto del prototipo. */

.sumario{display:block;margin-top:clamp(2.6rem,7vh,4rem)}
.entrada{
  display:grid;
  grid-template-columns:3.2rem 1fr auto;
  align-items:baseline;
  gap:1rem;
  padding:1.35rem .2rem;
  border-bottom:1px solid var(--linea);
  text-decoration:none;
  transition:background .25s,padding-left .25s;
}
.entrada:first-child{border-top:1px solid var(--linea)}
.entrada:hover{background:var(--nieve);padding-left:.9rem}
.entrada .n{
  font-family:var(--serif);font-size:1.25rem;color:var(--acento);
  letter-spacing:.04em;
}
.entrada .t{
  font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1.12;color:var(--tinta);
}
/* La flecha no es texto: es decoracion, y un `→` suelto lo lee el
   lector de pantalla. */
.entrada::after{
  content:"";
  width:26px;height:1px;background:var(--linea);
  align-self:center;
  transition:width .25s,background .25s;
}
.entrada:hover::after{width:40px;background:var(--acento)}

/* ── cabecera de pagina interior ───────────────────────────────────
   Aqui el titular de la pagina es el elemento grande: el hero de los
   nombres no se repite. */

.m-editorial .cabecera{
  text-align:left;
  max-width:none;
  margin:0;
  padding:clamp(3rem,9vh,5.5rem) 0 clamp(1.8rem,4vw,2.6rem);
}
.m-editorial .cabecera h1{
  font-size:clamp(2.6rem,8vw,5rem);
  line-height:.98;
  letter-spacing:-.018em;
  margin-top:.8rem;
}
.m-editorial .cabecera .bajada{margin:1.4rem 0 0;max-width:46ch}
.m-editorial .cabecera+section{padding-top:clamp(1.6rem,4vw,2.4rem)}

/* ═══ LA RETICULA ASIMETRICA ═══════════════════════════════════════
   El titulo a la izquierda y el contenido a la derecha, sin tocar el
   HTML de las secciones: `.sec-head` cae en la columna 1 y todo lo
   demas en la 2.

   Se monta sobre `:has(> .sec-head)` porque la agenda —las tres fichas
   del dia— no trae encabezado: esa se queda a todo lo ancho, que es
   donde mejor esta, y no como una columna vacia y tres tarjetas
   estrechas al lado. */

.m-editorial .marco > section:has(> .sec-head){
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  /* El hueco entre columnas es grande y el de entre filas es CERO.
     Dos motivos, y el segundo no es evidente:
       · `gap` a secas ponia los dos a 3,5rem y cada elemento de la
         columna derecha flotaba a 56px del anterior;
       · el titulo ocupa 50 filas (ver `.sec-head`), asi que un
         `row-gap` se cobra CINCUENTA veces aunque las filas esten
         vacias: con 1,1rem la pagina pasaba de 2.748 a 5.914px de alto
         y quedaba medio metro de crema entre bloque y bloque.
     La separacion entre elementos la pone el margen de abajo. */
  column-gap:clamp(1.6rem,4vw,3.5rem);
  row-gap:0;
  max-width:none;
  padding:clamp(2.6rem,5.5vw,4.2rem) 0;
  border-top:1px solid var(--linea);
}
.m-editorial .marco > section:has(> .sec-head) > *:not(.sec-head){
  grid-column:2;
  margin-top:1.15rem;
}
/* El primero se alinea con el filete del numero, sin escalon. */
.m-editorial .marco > section:has(> .sec-head) > .sec-head + *{margin-top:0}
/* La agenda y cualquier otra sin encabezado: a todo lo ancho. */
.m-editorial .marco > section{
  max-width:none;
  padding-left:0;padding-right:0;
}
.m-editorial .marco > section+section{border-top:1px solid var(--linea)}

/* ── la columna de titulos ── */

.m-editorial .marco{counter-reset:sec}
.m-editorial .marco > section:has(> .sec-head){counter-increment:sec}

.m-editorial .sec-head{
  text-align:left;
  margin:0;
  /* Ocupa la columna entera, no solo la primera fila. Sin esto, la
     altura del titulo fijaba la altura de la PRIMERA fila de la columna
     derecha: en «Que ponerse», el rotulo «Ese dia no» flotaba en una
     caja de 130px y las prendas tachadas caian cuatro centimetros mas
     abajo sin nada en medio. El 50 es un tope holgado; ninguna seccion
     pasa de ocho elementos. */
  grid-column:1;
  grid-row:1 / span 50;
  position:sticky;
  /* El cabezal es pegajoso: sin este hueco el titulo se le mete debajo. */
  top:calc(var(--barra) + 1.6rem);
  align-self:start;
}
/* Sin ilustracion tampoco hay iconos decorativos encima de los
   titulares: el numero hace ese trabajo y dice mas. Los de las
   tarjetas, las reglas y los botones se quedan, que esos informan. */
.m-editorial .sec-head > .ic{display:none}
.m-editorial .sec-head::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1;
  letter-spacing:.06em;
  color:var(--acento);
  padding-bottom:.8rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--linea);
}
.m-editorial .sec-head .eyebrow{margin:0 0 .5rem}
/* Los eyebrow de seccion llevan `style="margin-top:1rem"` escrito en la
   plantilla —iban debajo del icono, que aqui no esta— y un estilo inline
   no lo pisa nada que no sea `!important`. Es el unico de la hoja. */
.m-editorial .sec-head .eyebrow[style]{margin-top:0!important}
.m-editorial .sec-head h2{
  font-size:clamp(1.7rem,2.6vw,2.15rem);
  line-height:1.06;
  margin-top:0;
}
.m-editorial .sec-head p{
  margin:.85rem 0 0;
  max-width:none;
  font-size:.9rem;
  color:var(--gris-cl);
}

/* ── todo lo de dentro deja de ir centrado ─────────────────────────
   El sistema centra por defecto porque la maqueta original centraba.
   Aqui nada se centra: es la diferencia que se ve de una maqueta a
   otra, y se consigue soltando los `margin:auto` y los
   `justify-content:center` de las reglas compartidas. */

.m-editorial .bloque,
.m-editorial .ideas,
.m-editorial .duo,
.m-editorial .nota,
.m-editorial .clima,
.m-editorial .fichas,
.m-editorial .aviso-previo,
.m-editorial .nota-pago,
.m-editorial .panel-bloqueo,
.m-editorial .bloqueo-hecho{margin-left:0;max-width:none}

.m-editorial .tags,
.m-editorial .btn-row,
.m-editorial .clima-fila{justify-content:flex-start}
.m-editorial .no-titulo,
.m-editorial .pregunta-personas,
.m-editorial .copiado,
.m-editorial .clima,
.m-editorial .aviso-previo,
.m-editorial .nota-pago{text-align:left}
.m-editorial .personas{margin-left:0}
/* «Ese día no» y las prendas tachadas van juntos: es un rotulo y su
   lista, no dos bloques. El rotulo ya es el primero de su columna. */
.m-editorial .tags{margin-top:.45rem}

/* El pie se alinea con todo lo demas. Centrado y a todo lo ancho, era
   lo unico de la pagina que volvia al eje. Vive fuera de `.marco` —lo
   pone `base.html`—, asi que repite su medida en vez de heredarla. */
.m-editorial footer{
  max-width:1180px;
  margin-left:auto;margin-right:auto;
  padding-left:clamp(1.3rem,5vw,3rem);
  padding-right:clamp(1.3rem,5vw,3rem);
  text-align:left;
  position:relative;
  /* Mas aire del que trae el sistema: con el margen corto, el filete
     del pie quedaba a 55px del ultimo filete de la pagina y los dos
     juntos parecian una fila de tabla vacia. */
  margin-top:clamp(4rem,10vh,7rem);
  /* El filete se pinta aparte porque un `border-top` cubre la caja
     ENTERA, relleno incluido: arrancaba 48px a la izquierda de la
     firma, mientras que el de cada seccion —que vive dentro de
     `.marco`— arranca justo encima del texto. Dos filetes desalineados
     en la misma columna se ven. */
  border-top:0;
}
.m-editorial footer::before{
  content:"";
  position:absolute;top:0;
  left:clamp(1.3rem,5vw,3rem);right:clamp(1.3rem,5vw,3rem);
  height:1px;background:var(--linea);
}
.m-editorial footer .firma{font-size:1.45rem}

/* Las tarjetas son una tabla de datos, no tres cajitas centradas:
   etiqueta arriba, dato en serif debajo, alineado al filete. */
.m-editorial .tarjeta{text-align:left;padding:1.5rem 1.4rem 1.6rem}
.m-editorial .tarjeta > .ic{display:none}
.m-editorial .reglas{text-align:left;gap:1.8rem}
.m-editorial .regla .ic{margin:0}
.m-editorial .clima{max-width:520px}

/* El bloque de dos columnas del sistema se queda pegado a la izquierda
   y sin el filete que le separaba del centro. */
.m-editorial .bloque{grid-template-columns:40px 1fr;margin:0}

/* ── responsive ────────────────────────────────────────────────────
   OJO: el selector de la reticula lleva `:has()`, que hereda la
   especificidad de su argumento —(0,3,1) contando `.sec-head`—. Una
   media query NO suma especificidad, asi que aqui se repite el selector
   entero en vez de escribir uno mas corto: con `.m-editorial section`
   (0,1,1) la columna de 270px sobrevivia al movil y el contenido se
   quedaba en 90px. Es la trampa del §4.32. */

@media (max-width:860px){
  .m-editorial .marco > section:has(> .sec-head){
    grid-template-columns:minmax(0,1fr);
    gap:1.2rem;
  }
  .m-editorial .marco > section:has(> .sec-head) > *:not(.sec-head){
    grid-column:1;
  }
  /* En una columna el titulo ya no va al lado, asi que lo que le sigue
     necesita el aire que en escritorio le daba la reticula. */
  .m-editorial .marco > section:has(> .sec-head) > .sec-head + *{
    margin-top:1.15rem;
  }
  .m-editorial .sec-head{position:static;grid-row:auto}
  .m-editorial .sec-head::before{
    display:inline-block;
    border-bottom:0;
    padding-bottom:0;
    margin:0 .7rem 0 0;
  }
  .m-editorial .sec-head h2{display:inline}
  .hero .meta div+div{border-left:0;border-top:1px solid var(--linea)}
  .hero .meta div{padding-left:0}
}

@media (max-width:640px){
  .m-editorial nav.barra{
    flex-direction:column;align-items:center;gap:.9rem;
    padding-top:.9rem;padding-bottom:.9rem;
  }
  .m-editorial nav.barra .links{justify-content:center}
  .entrada{grid-template-columns:2.4rem 1fr auto;gap:.7rem;padding:1.1rem .1rem}
}