/* ---------------------------------------------------------
   Vito Martínez — hoja de las "Grandes ideas" (las entradas).

   Se carga DESPUÉS de styles.css y sólo AÑADE. No redefine nada
   del sistema visual: el negro, el cero-radio, la display en
   mayúsculas, el acento y el serif cursivo vienen tal cual de
   allí, así que cambiar --accent sigue repintando también estas
   páginas.

   El criterio de diseño: la portada grita, el ensayo susurra.
   Mismos materiales, distinto volumen. El cuerpo baja a una
   sola columna con medida de lectura (~62 caracteres) y el
   contraste del texto se rebaja, porque aquí el trabajo del
   diseño es desaparecer y dejar leer.

   Nota deliberada: el cuerpo del ensayo NO usa .reveal. En la
   portada esconder y revelar es un efecto; en una página cuyo
   único contenido es texto, sería apostar la legibilidad a que
   el JS cargue. El reveal se queda en la cabecera y las tarjetas.
--------------------------------------------------------- */

/* ---------- Barra de progreso de lectura ---------- */

/* Va por encima de la cabecera fija (z-index 100). Es la única
   pieza nueva de "interfaz" del artículo: dice cuánto queda sin
   ocupar sitio ni pedir atención. */
.read-progress{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  z-index:150;
  pointer-events:none;
}

/* ---------- Cabecera del artículo ---------- */

/* La cabecera es la misma .site-header; aquí sólo se marca cuál
   es la sección activa. */
.site-nav a.is-current{ color:var(--white); }

/* ---------- Portada del ensayo ---------- */

.idea-hero{
  padding:112px 0 52px;
  border-bottom:1px solid var(--hair);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:46px;
  transition:color .2s var(--ease);
}
.back-link:hover{ color:var(--accent); }
.back-link .chev{ transition:transform .25s var(--ease); }
.back-link:hover .chev{ transform:translateX(-5px); }

.idea-title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(38px, 8.6vw, 92px);
  line-height:0.86;
  letter-spacing:-0.035em;
  margin:0;
  max-width:15ch;
}

/* Entradilla: la frase del propio texto que fija la tesis.
   Serif cursiva, igual que el lede del hero de la portada. */
.idea-standfirst{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(19px, 2.8vw, 28px);
  line-height:1.32;
  color:var(--muted);
  margin:30px 0 0;
  max-width:620px;
}

.idea-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin:46px 0 0;
  padding-top:22px;
  border-top:1px solid var(--hair);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--faint);
}
.idea-meta .accent{ color:var(--accent); }

/* ---------- Cuerpo ---------- */

.idea-body{
  max-width:660px;
  padding:60px 0 90px;
}

.idea-body p{
  font-size:clamp(17px, 2.1vw, 19px);
  line-height:1.75;
  color:rgba(255,255,255,0.76);
  margin:0 0 26px;
}

/* Primer párrafo: entra más alto para hacer de puente entre el
   titular gigante y el cuerpo. */
.idea-body p.lead{
  font-size:clamp(20px, 2.6vw, 24px);
  line-height:1.5;
  color:var(--white);
  margin-bottom:34px;
}

.idea-body h2{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 30px);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.0;
  letter-spacing:-0.025em;
  margin:56px 0 20px;
}

.idea-body em{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--white);
}

.idea-body strong{ font-weight:600; color:var(--white); }

/* Sin subrayado nativo: la línea propia se puede llevar al acento
   en hover sin depender de text-decoration-color.
   Va acotado a `p a` a propósito: si fuera `.idea-body a` alcanzaría
   también a .idea-card, que es un <a> y tiene su propio borde. */
.idea-body p a{
  color:var(--accent);
  border-bottom:1px solid var(--hair);
  transition:border-color .2s var(--ease);
}
.idea-body p a:hover{ border-bottom-color:var(--accent); }

/* ---------- Destacado ---------- */

/* OJO con la especificidad: el destacado, la tarjeta y la firma son
   <p> dentro de .idea-body, así que `.idea-body p` (0,1,1) les gana
   a las clases sueltas (0,1,0) y se renderizarían como texto de
   cuerpo. Por eso todo lo que sea un <p> aquí dentro lleva el
   prefijo .idea-body — no es redundancia, es lo que hace que la
   regla aplique. */
.idea-body .idea-quote{
  margin:56px 0;
  padding:34px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(24px, 4.6vw, 38px);
  line-height:0.94;
  letter-spacing:-0.03em;
  color:var(--accent);
}

.idea-body .idea-quote em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-0.01em;
  color:var(--accent);
}

/* ---------- Tarjeta de enlace (vídeo, otra entrada) ---------- */

.idea-card{
  display:block;
  margin:52px 0;
  padding:28px;
  border:1px solid var(--hair);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.idea-card:hover{
  border-color:var(--accent);
  background:rgba(255,255,255,0.03);
}

.idea-body .card-kicker{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent);
  line-height:1.3;
  margin:0 0 12px;
}

.idea-body .card-title{
  font-family:var(--font-display);
  font-size:clamp(19px, 2.8vw, 24px);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--white);
  margin:0 0 14px;
}

.card-go{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.idea-card:hover .chev{ transform:translateX(5px); }

/* ---------- Firma ---------- */

.idea-sign{
  margin-top:54px;
  padding-top:30px;
  border-top:1px solid var(--hair);
}

.idea-body .sign-name{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--white);
  margin:0;
}

.idea-body .idea-ps{
  font-size:15.5px;
  line-height:1.65;
  color:var(--muted);
  margin:24px 0 0;
}

/* ---------- Siguiente idea ---------- */

/* Reutiliza .rows / .row de styles.css: la navegación entre
   ensayos y el índice de la portada son la misma pieza. */
.idea-next{
  border-top:1px solid var(--hair);
  padding:80px 0 96px;
}
.idea-next .kicker{ margin-bottom:32px; }

/* ---------- Desktop ---------- */

@media (min-width:1000px){
  .idea-hero{ padding:150px 0 60px; }
  .idea-body{ padding:78px 0 110px; }
  .idea-next{ padding:110px 0 130px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  .read-progress{ display:none; }
  .back-link .chev, .idea-card .chev{ transition:none; }
}