/*
Theme Name: El Aletz — Muro
Theme URI: https://elaletz.com
Author: Aletz Carrillo
Description: Tema del sitio de El Aletz. Portada tipo muro (collage punk que se acomoda solo), entrada de blog a una columna y plantilla de página con banda negra. Sustituye al child theme de Genesis: ya no hay que capturar columnas ni filas a mano.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: elaletz
*/

/* ==========================================================================
   1. TOKENS
   Los hex salen del handoff de diseno. No inventar otros.
   ========================================================================== */
:root {
  --naranja:      #e07822;
  --negro:        #0d0b0a;
  --rosa:         #ff1e7e;
  --limon:        #c6f000;
  --amarillo:     #ffe800;
  --crema:        #f4ece0;
  --texto:        #241a12;  /* 5.59:1 sobre naranja. NO usar #3d2c1d: da 4.36:1 */
  --tenue:        #cfc3b7;  /* texto sobre negro */
  --borde-tenue:  #4a4137;
  --input-fondo:  #171310;

  --stencil: 'Big Shoulders Stencil Display', 'Stardos Stencil', sans-serif;
  --titulo:  Oswald, sans-serif;
  --cuerpo:  Archivo, sans-serif;

  --pad-x:   clamp(30px, 7.5vw, 100px);
  --gap:     26px;          /* separacion del muro (denso) */
  --medida:  640px;         /* medida de lectura: 62 caracteres. No subirla */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--naranja);
}

body {
  font-family: var(--cuerpo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--negro); text-decoration: none; }
a:hover { color: var(--rosa); }
img { max-width: 100%; }
button { font: inherit; }
::selection { background: var(--limon); color: var(--negro); }

/* Nada redondeado, ninguna sombra: la profundidad la dan las rotaciones. */
* { border-radius: 0; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--negro); color: var(--limon);
  font-family: var(--titulo); font-weight: 700; padding: 12px 18px;
}
.salta-al-contenido:focus { left: 0; }

:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }

@keyframes tickr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker-pista { animation: none !important; }
  * { transition: none !important; }
}

/* ==========================================================================
   3. EL LIENZO: marco desgarrado + textura
   ========================================================================== */
.sitio {
  position: relative;
  min-height: 100vh;
  background: var(--naranja);
  overflow-x: hidden;
  padding-bottom: clamp(40px, 6vw, 70px);
}

.textura {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--negro) .9px, transparent 1.1px);
  background-size: 5px 5px;
  opacity: .13;
}

.marco { position: absolute; pointer-events: none; }
.marco-izq   { top: 0; bottom: 0; left: 0;  width: clamp(24px,7vw,93px); z-index: 3; }
.marco-der   { top: 0; bottom: 0; right: 0; width: clamp(24px,7vw,93px); z-index: 3; }
.marco-arriba{ top: 0; left: 0; right: 0; height: clamp(52px,12.5vw,160px); z-index: 4; }
.marco-abajo { bottom: 0; left: 0; right: 0; height: clamp(24px,5.5vw,70px); z-index: 4; }

/* Toda la capa de contenido va por encima del marco lateral. */
.capa { position: relative; z-index: 5; }

.franja { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ==========================================================================
   4. ENCABEZADO
   ========================================================================== */
.encabezado { padding: clamp(64px,10vw,132px) var(--pad-x) 0; }

.encabezado-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px,3vw,40px); flex-wrap: wrap;
}

.marca { display: flex; flex-direction: column; gap: 14px; }
.marca img, .marca svg { display: block; width: clamp(215px,32vw,430px); height: auto; }

.marca-texto {
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(40px,7vw,86px); line-height: .85;
  color: var(--negro); text-transform: uppercase; margin: 0;
}

.tagline {
  margin: 0; max-width: 520px;
  font-family: var(--titulo); font-weight: 600;
  font-size: clamp(14px,1.5vw,19px); line-height: 1.25;
  color: var(--negro); text-transform: uppercase;
}

.menu { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; margin: 0; list-style: none; }
.menu li { margin: 0; }
.menu a, .menu button {
  display: inline-block;
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(12px,1.15vw,14px); letter-spacing: .1em; text-transform: uppercase;
  background: var(--negro); color: var(--crema);
  padding: 11px 16px; border: 0; cursor: pointer;
}
.menu a:hover, .menu button:hover,
.menu a.is-on, .menu button.is-on { background: var(--limon); color: var(--negro); }

/* ==========================================================================
   5. FORMULARIO DE CONTACTO (desplegable)
   ========================================================================== */
.contacto { padding: clamp(22px,3vw,30px) var(--pad-x) 0; }
.contacto[hidden] { display: none; }

.contacto-panel {
  position: relative; background: var(--negro);
  padding: clamp(24px,3vw,32px) clamp(20px,3vw,30px) clamp(24px,3vw,30px);
  transform: rotate(-.35deg);
}

.contacto-cerrar {
  position: absolute; top: 16px; right: 18px;
  background: transparent; border: 3px solid var(--borde-tenue); color: var(--crema);
  font-family: var(--titulo); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 7px 11px; cursor: pointer;
}

.contacto h2 {
  margin: 0 0 8px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(38px,5.5vw,64px); line-height: .88;
  color: var(--limon); text-transform: uppercase;
}
.contacto-copy {
  margin: 0 0 24px; max-width: 560px;
  font-size: 16px; line-height: 1.5; color: var(--tenue);
}

.contacto-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contacto label { display: flex; flex-direction: column; gap: 7px; }
.contacto label > span {
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--limon);
}
.contacto input, .contacto textarea {
  font-family: var(--cuerpo); font-size: 16px; line-height: 1.5;
  color: var(--crema); background: var(--input-fondo);
  border: 3px solid var(--borde-tenue); padding: 13px 14px;
}
.contacto textarea { resize: vertical; }
.contacto .campo-ancho { margin-bottom: 20px; }
.contacto-enviar {
  background: var(--limon); color: var(--negro);
  font-family: var(--titulo); font-weight: 700; font-size: 17px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 26px; border: 0; cursor: pointer;
}
.contacto-aviso {
  margin: 0 0 18px; padding: 12px 14px;
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
}
.contacto-aviso.ok    { background: var(--limon); color: var(--negro); }
.contacto-aviso.error { background: var(--rosa);  color: var(--negro); }
/* Trampa para robots: invisible para gente, irresistible para bots. */
.contacto-trampa { position: absolute; left: -9999px; }

/* ==========================================================================
   6. BANDA QUE CORRE (ticker)
   Ver README: las dos mitades miden SU contenido (flex:none; width:auto),
   nunca 50% de un contenedor de 200%, o la costura no cae en el translate.
   ========================================================================== */
.ticker {
  margin: clamp(20px,3vw,34px) 0 0;
  background: var(--negro); overflow: hidden;
  height: clamp(34px,4vw,46px);
  transform: rotate(-.35deg);
}
.ticker-pista { display: flex; width: max-content; height: 100%; animation: tickr 26s linear infinite; }
.ticker-mitad {
  display: flex; align-items: center; flex: none; width: auto;
  gap: clamp(18px,2vw,26px);
  padding-right: clamp(18px,2vw,26px);   /* el aire de la costura va aqui, no en padding-left */
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(19px,2vw,26px); letter-spacing: .1em;
  color: var(--limon); white-space: nowrap;
}
.ticker-sep { color: var(--rosa); }

/* ==========================================================================
   7. ROTULOS  ◤
   ========================================================================== */
.rotulo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rotulo > span:first-child {
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(15px,1.4vw,17px); letter-spacing: .2em; color: var(--negro);
}
.rotulo-linea { flex: 1; height: 3px; background: var(--negro); }

/* ==========================================================================
   8. FIJO ARRIBA
   align-items:stretch + margin-top:auto en el boton del CTA: sin eso la
   tarjeta de WhatsApp era la mas corta y dejaba 255px de naranja vacio.
   ========================================================================== */
.fijos-seccion { padding: clamp(30px,4vw,44px) var(--pad-x) 0; }
.fijos-container { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gap); align-items: stretch; }
.fijos-container > * { min-width: 0; }

/* ==========================================================================
   9. FILTROS
   ========================================================================== */
.filtros-seccion { padding: clamp(30px,4vw,46px) var(--pad-x) 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.filtros .rotulo { margin: 0 6px 0 0; }
.filtro {
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 9px 15px; border: 3px solid var(--negro);
  background: transparent; color: var(--negro); cursor: pointer;
}
.filtro.is-on { background: var(--negro); color: var(--naranja); }

/* ==========================================================================
   10. EL MURO
   grid-auto-rows AUTO a proposito: si el JS no corre, esto sigue siendo un
   grid de columnas correcto. El JS lo pone en 8px como su primera escritura.
   align-items:start es imprescindible: de eso depende que la altura de una
   tarjeta no dependa de su span, y de eso depende poder medirla.
   ========================================================================== */
.muro-seccion { padding: 30px var(--pad-x) 0; }
.homepage-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  row-gap: 0;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  align-items: start;
}
.home-col { margin-bottom: var(--gap); min-width: 0; }

/* ==========================================================================
   11. TARJETAS — piezas compartidas
   ========================================================================== */
.chip {
  display: inline-block;
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .15em; text-transform: uppercase;
  background: var(--negro); color: var(--amarillo);
  padding: 5px 10px;
}
.chip-rosa    { background: var(--rosa);     color: var(--negro); }
.chip-limon   { background: var(--limon);    color: var(--negro); }
.chip-amarillo{ background: var(--amarillo); color: var(--negro); }

.enlace-sub {
  display: inline-block;
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 3px solid var(--negro); padding-bottom: 2px;
}
.enlace-sub-limon { color: var(--limon);    border-bottom-color: var(--limon); }
.enlace-sub-rosa  { color: var(--rosa);     border-bottom-color: var(--rosa); }
.enlace-sub-amar  { color: var(--amarillo); border-bottom-color: var(--amarillo); }

/* Borde rasgado de las imagenes de collage. */
.rasgado {
  clip-path: polygon(0 2%,8% 0,21% 2%,35% .3%,49% 2.2%,63% 0,77% 1.9%,90% .4%,100% 2%,
                     100% 98%,91% 100%,78% 98%,64% 99.7%,50% 97.7%,36% 100%,22% 98%,9% 99.6%,0 97.8%);
}
.rasgado-b {
  clip-path: polygon(0 1.8%,9% 0,22% 1.8%,36% .2%,50% 2%,64% 0,78% 1.8%,91% .4%,100% 1.8%,
                     100% 98.2%,90% 100%,77% 98%,63% 99.7%,49% 97.8%,35% 100%,21% 98%,8% 99.7%,0 97.8%);
}

/* Portada de libro: COMPLETA, sin recorte. A una portada no se le corta nada. */
.img-portada { display: block; width: 100%; height: auto; }
/* Collage: se llena desde arriba y lo que sobra se corta por abajo,
   que es donde suele quedar aire. El encabezado nunca se pierde.
   `height:auto` NO es decorativo: WordPress escupe width="" y height="" en cada
   <img>, y con una altura explicita el `aspect-ratio` no aplica — la imagen sale
   con su proporcion original y el recorte cuadrado nunca ocurre. */
.img-collage { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; object-position: top center; }
/* Sin recorte: para carteles que traen su titulo abajo. Se probo el cuadrado en
   Maria de todos los Angeles y le cortaba justo el nombre, igual que le pasaba
   al Libro Vaquero con 16:10. Si el contenido esta abajo, no se recorta. */
.img-completa { display: block; width: 100%; height: auto; }

/* --- Formato: ENLACE (regla de 5px arriba) --- */
.t-enlace { border-top: 5px solid var(--negro); padding-top: 11px; }
.t-enlace h3 {
  margin: 0 0 8px;
  font-family: var(--titulo); font-weight: 700; font-size: 25px; line-height: 1.06;
  color: var(--negro); text-transform: uppercase;
}
.t-enlace p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--texto); text-wrap: pretty; }

/* --- Formato: PANEL de color --- */
.t-panel { background: var(--negro); padding: 22px 20px 20px; }
.t-panel h3 {
  margin: 0 0 8px;
  font-family: var(--stencil); font-weight: 900; font-size: 42px; line-height: .92;
  color: var(--crema); text-transform: uppercase;
}
.t-panel .chip { margin-bottom: 11px; }
.t-panel p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--tenue); }
.t-panel.acento-limon h3    { color: var(--limon); }
.t-panel.acento-rosa h3     { color: var(--rosa); }
.t-panel.acento-amarillo h3 { color: var(--amarillo); }
.t-panel.acento-crema h3    { color: var(--crema); }
/* Titulo chico: para nombres largos, donde el stencil grande no cabe. */
.t-panel.titulo-chico h3 { font-family: var(--titulo); font-size: 25px; line-height: 1.06; }
/* Panel sobre fondo limon (Pelea y Escribe) */
.t-panel.fondo-limon { background: var(--limon); padding: 18px 0 20px; overflow: hidden; }
.t-panel.fondo-limon h3 { color: var(--negro); margin: 10px 18px 0; font-size: 34px; }
.t-panel.fondo-limon p  { color: var(--texto); margin: 8px 18px 0; }
.t-panel.fondo-limon .enlace-sub { margin: 12px 18px 0; }
/* El sello sangra por los lados a proposito: el original esta cortado abajo y
   asi el corte se lee intencional. Ver "Pendientes" del handoff. */
.t-panel.fondo-limon img { display: block; width: 114%; height: auto; margin: 0 -7% -2px; }

/* --- Formato: LIBRO (portada en marco negro) --- */
.t-libro .marco-libro { background: var(--negro); padding: 7px 7px 9px; }
.t-libro .marco-libro > span {
  display: block; margin-top: 7px;
  font-family: var(--titulo); font-weight: 700; font-size: 21px;
  color: var(--crema); text-transform: uppercase;
}

/* --- Formato: IMAGEN de collage --- */
.t-imagen .titulo {
  display: block; margin-top: 10px;
  font-family: var(--titulo); font-weight: 700; font-size: 21px; line-height: 1.1;
  color: var(--negro); text-transform: uppercase;
}
.t-imagen .pie { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--texto); }
.t-imagen .chip { margin-top: 7px; }
.t-imagen .titulo-arriba {
  display: block; margin-bottom: 8px;
  font-family: var(--titulo); font-weight: 700; font-size: 22px;
  color: var(--negro); text-transform: uppercase;
}

/* --- Formato: VIDEO --- */
.t-video { background: var(--negro); padding: 9px 9px 12px; }
.t-video .marco-video {
  position: relative; width: 100%; aspect-ratio: 9/16;
  background: #231c17; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* El degradado se ve mientras la miniatura carga, y cuando no hay miniatura. */
.t-video .marco-video::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 42%, #3b2f26 0%, var(--negro) 78%);
}
/* La miniatura de TikTok viene 1080x1920, o sea 9:16 exacto: llena sin recortar.
   `height:auto` + aspect-ratio por lo mismo que las de collage: WordPress y el
   atributo height le ganan al CSS si no se pone. */
.t-video .video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.t-video .play {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: var(--rosa); border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.t-video .play::after {
  content: ''; width: 0; height: 0; margin-left: 7px;
  border-left: 26px solid var(--negro);
  border-top: 16px solid transparent; border-bottom: 16px solid transparent;
}
.t-video .play:hover { transform: scale(1.08); }
.t-video .titulo {
  display: block; margin-top: 9px;
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  letter-spacing: .13em; color: var(--limon); text-transform: uppercase;
}

/* Reproduciendo: la tarjeta crece para darle su alto al reproductor de TikTok,
   que trae su propio pie. Aqui el blanco ya no estorba: es el player. */
.t-video.tocando .marco-video { aspect-ratio: 9/17.6; background: var(--negro); }
.t-video.tocando .marco-video::before { display: none; }
.t-video .marco-video iframe,
.t-video .marco-video blockquote {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; margin: 0;
  display: block;
}

/* --- Formato: CITA --- */
.t-cita {
  position: relative; background: var(--rosa); padding: 30px 26px 32px;
  clip-path: polygon(0 2%,7% 0,19% 1.5%,32% 0,46% 2%,59% .4%,72% 2.2%,85% .6%,95% 2%,100% .8%,
                     100% 97%,93% 100%,80% 98%,67% 99.6%,54% 97.6%,41% 100%,28% 98%,15% 99.6%,5% 97.8%,0 99%);
}
.t-cita .halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--negro) 1px, transparent 1.2px);
  background-size: 6px 6px;
  opacity: .1;   /* .1 es el techo: arriba de eso ensucia el texto */
}
.t-cita blockquote, .t-cita .texto {
  position: relative; margin: 0 0 16px;
  font-family: var(--stencil); font-weight: 900;
  font-size: 34px; line-height: 1.02;
  color: var(--negro);   /* NUNCA naranja calado sobre rosa: ilegible */
  text-transform: uppercase; text-wrap: pretty;
}
.t-cita .firma {
  position: relative; display: inline-block;
  background: var(--negro); color: var(--limon);
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; padding: 5px 11px;
}
/* Los tres tratamientos. El diseno eligio spray; los otros dos quedan disponibles. */
.cita-cartel { background: var(--negro); }
.cita-cartel .texto, .cita-cartel blockquote { color: var(--crema); }
.cita-cartel .halftone { opacity: 0; }
.cita-cartel .firma { background: var(--limon); color: var(--negro); }

.cita-papel { background: var(--crema); }
.cita-papel .texto, .cita-papel blockquote { color: var(--negro); }
.cita-papel .halftone { opacity: .2; }
.cita-papel .firma { background: transparent; color: var(--negro); border: 3px solid var(--negro); }

/* --- Formato: LLAMADA GRANDE (el CTA de WhatsApp) --- */
.t-cta {
  display: flex; flex-direction: column; position: relative;
  background: var(--negro);
  padding: clamp(22px,2.5vw,28px) clamp(18px,2vw,24px) clamp(20px,2vw,24px);
  height: 100%;
}
.t-cta .chip-saliente {
  position: absolute; top: -11px; left: 26px;
  background: var(--rosa); color: var(--negro);
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px;
}
.t-cta h2 {
  margin: 6px 0 14px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(50px,7vw,92px); line-height: .85; letter-spacing: .01em;
  color: var(--limon); text-transform: uppercase;
}
.t-cta p { margin: 0 0 18px; max-width: 400px; font-size: 16px; line-height: 1.45; color: var(--crema); }
.t-cta .lista-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.t-cta .lista-chips span {
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .11em; text-transform: uppercase;
  border: 2px solid var(--borde-tenue); color: var(--crema); padding: 6px 11px;
}
.t-cta .boton-ancho {
  display: block; margin-top: auto;   /* pega el boton abajo: ver comentario en .fijos-container */
  text-align: center; background: var(--limon); color: var(--negro);
  font-family: var(--titulo); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; text-transform: uppercase; padding: 17px 20px;
}

/* Las rotaciones nunca pasan de 1.2deg: arriba de eso se ve descuidado, no punk. */

/* ==========================================================================
   12. ENTRADA DE BLOG
   ========================================================================== */
.regla-header { margin-top: clamp(20px,3vw,30px); height: 6px; background: var(--negro); }

.entrada-seccion { padding: clamp(28px,4vw,40px) var(--pad-x) 0; }

.volver {
  display: inline-block; margin-bottom: 24px; padding: 0 0 3px;
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--negro); border-bottom: 3px solid var(--negro);
  background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}

.entrada { max-width: var(--medida); }

.kicker { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.kicker .chip { background: var(--negro); color: var(--limon); font-size: 12px; letter-spacing: .16em; padding: 5px 10px; }
.kicker .meta {
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--negro);
}

.entrada h1 {
  margin: 0 0 20px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(48px,7.5vw,82px); line-height: .86; letter-spacing: .005em;
  color: var(--negro); text-transform: uppercase; text-wrap: pretty;
}

.bajada {
  margin: 0 0 26px;
  font-weight: 500; font-size: clamp(19px,2vw,22px); line-height: 1.45;
  color: var(--texto); text-wrap: pretty;
}

.regla-5 { height: 5px; background: var(--negro); margin-bottom: 28px; }

/* --- El cuerpo. 640px = 62 caracteres por renglon. A 732px daban 84: muy arriba
       del rango comodo de 45-75. No subirlo. --- */
.cuerpo { font-size: 18px; line-height: 1.65; color: var(--texto); }
.cuerpo p { margin: 0 0 20px; text-wrap: pretty; }
.cuerpo a { border-bottom: 3px solid var(--negro); }
.cuerpo a:hover { border-bottom-color: var(--rosa); }
.cuerpo h2 {
  margin: 28px 0 14px;
  font-family: var(--titulo); font-weight: 700;   /* Oswald, NO stencil: dentro de un
      texto largo el stencil compite consigo mismo */
  font-size: clamp(27px,3.2vw,34px); line-height: 1.1;
  color: var(--negro); text-transform: uppercase;
}
.cuerpo h3 {
  margin: 24px 0 12px;
  font-family: var(--titulo); font-weight: 700; font-size: clamp(22px,2.6vw,27px);
  line-height: 1.15; color: var(--negro); text-transform: uppercase;
}
.cuerpo figure, .cuerpo .wp-block-image { margin: 0 0 28px; }
.cuerpo figure img, .cuerpo .wp-block-image img {
  display: block; width: 100%; height: auto;
  clip-path: polygon(0 1.8%,9% 0,22% 1.8%,36% .2%,50% 2%,64% 0,78% 1.8%,91% .4%,100% 1.8%,
                     100% 98.2%,90% 100%,77% 98%,63% 99.7%,49% 97.8%,35% 100%,21% 98%,8% 99.7%,0 97.8%);
}
.cuerpo figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--texto); }

/* Listas: cuadrito negro en lugar de bolita, sangria de bandera. */
.cuerpo ul { margin: 0 0 30px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.cuerpo ul > li { display: flex; gap: 12px; font-size: 18px; line-height: 1.55; }
.cuerpo ul > li::before { content: ''; flex: none; width: 11px; height: 11px; background: var(--negro); margin-top: 8px; }
.cuerpo ol { margin: 0 0 30px; padding-left: 22px; }
.cuerpo ol > li { margin-bottom: 11px; }

/* Cita destacada dentro del texto: el mismo bloque rosa del muro. */
.cuerpo blockquote, .cuerpo .wp-block-quote {
  position: relative; background: var(--rosa);
  padding: 30px 26px 32px; margin: 0 0 28px; transform: rotate(-1deg);
  clip-path: polygon(0 2%,7% 0,19% 1.5%,32% 0,46% 2%,59% .4%,72% 2.2%,85% .6%,95% 2%,100% .8%,
                     100% 97%,93% 100%,80% 98%,67% 99.6%,54% 97.6%,41% 100%,28% 98%,15% 99.6%,5% 97.8%,0 99%);
  border: 0;
}
.cuerpo blockquote p, .cuerpo .wp-block-quote p {
  margin: 0;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(30px,4vw,40px); line-height: 1;
  color: var(--negro); text-transform: uppercase; text-wrap: pretty;
}
.cuerpo blockquote cite, .cuerpo .wp-block-quote cite {
  display: inline-block; margin-top: 14px; font-style: normal;
  background: var(--negro); color: var(--limon);
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; padding: 5px 11px;
}

.cuerpo pre {
  background: var(--negro); color: var(--crema); padding: 20px;
  overflow-x: auto; font-size: 14px; line-height: 1.5;
}
.cuerpo code { background: var(--negro); color: var(--limon); padding: 2px 5px; font-size: .9em; }
.cuerpo pre code { background: transparent; padding: 0; }
.cuerpo table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 16px; }
.cuerpo th, .cuerpo td { border: 3px solid var(--negro); padding: 10px 12px; text-align: left; }
.cuerpo th { font-family: var(--titulo); font-weight: 700; text-transform: uppercase; }
.cuerpo iframe, .cuerpo video { max-width: 100%; }

.firma-autor {
  max-width: var(--medida); margin-top: 34px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 5px solid var(--negro); padding-top: 16px;
}
.firma-autor .rotulo-chico {
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--negro);
}
.firma-autor .nombre {
  font-family: var(--titulo); font-weight: 700; font-size: 20px;
  color: var(--negro); text-transform: uppercase;
}
.firma-autor .frase { font-size: 14px; line-height: 1.4; color: var(--texto); }

/* --- CTA del pie --- */
.cta-pie {
  margin-top: 40px; background: var(--negro);
  padding: clamp(26px,3.5vw,34px) clamp(20px,3vw,30px) clamp(24px,3vw,32px);
  transform: rotate(-.4deg);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: center;
}
.cta-pie h3 {
  margin: 0 0 10px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(40px,6vw,60px); line-height: .86;
  color: var(--limon); text-transform: uppercase;
}
.cta-pie .chip { margin-bottom: 12px; }
.cta-pie p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tenue); }
.cta-pie .boton {
  display: block; text-align: center; background: var(--limon); color: var(--negro);
  font-family: var(--titulo); font-weight: 700; font-size: 19px;
  letter-spacing: .1em; text-transform: uppercase; padding: 22px 20px;
}

/* --- LO QUE SIGUE --- */
.lo-que-sigue { margin-top: 44px; }
.siguiente-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.siguiente-grid > a { display: block; border-top: 5px solid var(--negro); padding-top: 11px; }
.siguiente-grid .titulo {
  display: block;
  font-family: var(--titulo); font-weight: 700; font-size: 23px; line-height: 1.1;
  color: var(--negro); text-transform: uppercase;
}
.siguiente-grid .resumen { display: block; margin-top: 7px; font-size: 15px; line-height: 1.5; color: var(--texto); }

/* ==========================================================================
   13. PAGINA
   El orden de los tracks importa: minmax(0,1fr) minmax(230px,300px).
   Al reves el texto se queda con sus 720px ANTES de que la barra reciba
   nada, y entre 760 y 1220px de viewport la barra se moria en 54px.
   ========================================================================== */
.banda-titulo {
  margin-top: clamp(22px,3.5vw,34px);
  background: var(--negro);
  padding: clamp(30px,4.5vw,40px) var(--pad-x) clamp(28px,4vw,38px);
  transform: rotate(-.3deg);
}
.banda-titulo .chip { margin-bottom: 14px; }
.banda-titulo h1 {
  margin: 0 0 16px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(54px,9vw,104px); line-height: .84;
  color: var(--crema); text-transform: uppercase; text-wrap: pretty;
}
.banda-titulo .bajada { margin: 0; max-width: 720px; font-size: clamp(19px,2.2vw,23px); line-height: 1.4; color: var(--limon); }

.pagina-seccion { padding: clamp(30px,4.5vw,44px) var(--pad-x) 0; }
.pagina-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,300px); gap: 48px; align-items: start; }
.pagina-grid > * { min-width: 0; }
/* Sin barra no se reserva la columna: si no, quedan 300px de naranja vacio al
   costado del texto, que es justo lo que el rediseno le quito a la entrada. */
.pagina-grid.sin-barra { grid-template-columns: 1fr; }
/* El texto lleva su propia medida aunque el track sea ancho: a 892px daban 115
   caracteres por renglon, muy arriba del rango comodo de 45-75. */
.pagina-grid .cuerpo { max-width: 720px; }
.pagina-barra { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.pagina-barra img {
  display: block; width: 100%; height: auto;
  clip-path: polygon(0 1.5%,9% 0,22% 1.6%,36% .2%,50% 1.8%,64% 0,78% 1.6%,91% .4%,100% 1.6%,
                     100% 98.4%,90% 100%,77% 98.2%,63% 99.7%,49% 98%,35% 100%,21% 98.2%,8% 99.7%,0 98%);
}
.pagina-barra p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto); }

.boton-solido {
  display: inline-block; background: var(--negro); color: var(--limon);
  font-family: var(--titulo); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; text-transform: uppercase; padding: 17px 24px;
}
.boton-solido:hover { background: var(--rosa); color: var(--negro); }

/* ==========================================================================
   14. INDICE DE BLOG, BUSQUEDA, 404
   ========================================================================== */
.indice-seccion { padding: clamp(28px,4vw,40px) var(--pad-x) 0; }
.indice-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) 26px; }
.indice-lista > article { border-top: 5px solid var(--negro); padding-top: 11px; }
.indice-lista h2 {
  margin: 0 0 8px;
  font-family: var(--titulo); font-weight: 700; font-size: 25px; line-height: 1.06;
  color: var(--negro); text-transform: uppercase;
}
.indice-lista .meta {
  display: block; margin-bottom: 8px;
  font-family: var(--titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--negro);
}
.indice-lista p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.indice-lista img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: top center; margin-bottom: 11px; }

.paginacion { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; }
.paginacion .page-numbers {
  display: inline-block;
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border: 3px solid var(--negro); color: var(--negro);
}
.paginacion .page-numbers.current,
.paginacion a.page-numbers:hover { background: var(--negro); color: var(--limon); }

.buscador { display: flex; gap: 0; max-width: 520px; margin-bottom: 30px; }
.buscador input[type=search] {
  flex: 1; min-width: 0;
  font-family: var(--cuerpo); font-size: 16px; color: var(--negro);
  background: var(--crema); border: 3px solid var(--negro); padding: 13px 14px;
}
.buscador button {
  background: var(--negro); color: var(--limon); border: 3px solid var(--negro);
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; padding: 13px 20px; cursor: pointer;
}

/* ==========================================================================
   15. PIE
   ========================================================================== */
.pie { margin-top: clamp(44px,6vw,70px); padding: 0 var(--pad-x); }
.pie-caja { border-top: 5px solid var(--negro); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: baseline; }
.pie-caja p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto); }
.pie-caja nav { display: flex; flex-wrap: wrap; gap: 14px; }
.pie-caja nav a {
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ==========================================================================
   16. RESPONSIVE
   Sin media queries para el muro: eso lo hace el JS midiendo el CONTENEDOR,
   no window.innerWidth (el padding es un clamp, la ventana no dice cuanto
   espacio hay adentro). Aqui solo lo que el JS no toca.
   ========================================================================== */
@media (max-width: 900px) {
  .fijos-container { grid-template-columns: 1fr 1fr; }
  .fijos-container > *:first-child { grid-column: span 2; }
  .pagina-grid { grid-template-columns: 1fr; gap: 34px; }
  .pagina-barra { max-width: none; }
  .siguiente-grid { grid-template-columns: repeat(2, 1fr); }
  .indice-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fijos-container { grid-template-columns: 1fr; }
  .fijos-container > *:first-child { grid-column: auto; }
  .cta-pie { grid-template-columns: 1fr; gap: 22px; }
  .contacto-fila { grid-template-columns: 1fr; }
  .siguiente-grid { grid-template-columns: 1fr; }
  .indice-lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. ADMIN / EDITOR
   ========================================================================== */
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.alignleft  { float: left;  margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto 20px; }