/* Agustín Rolón. Dos tipografías como máximo (regla de Agustín del 31/10/2026). Desde el 14/11/2026, las de farhanhossain.com,
   elegidas por Agustín en una prueba sobre la portada ("la tipografía me gustó mucho"): Young Serif para los títulos
   (--titulo; tiene un solo peso, 400) y Figtree para leer, botones y rótulos (--texto y --ui). Antes eran Mulish para
   títulos, botones y rótulos y Crimson Pro para el texto. Las dos son libres (SIL Open Font License) y se sirven desde
   /fonts, sin pedirle nada a Google. Piazzolla queda solo dentro del logo, que es un dibujo y no se carga en la web.
   "Figtree Texto" es Figtree al 90%: así los tamaños pensados para Crimson Pro, que tiene la letra más chica, se ven
   como Figtree a 18 px, que es lo que usa él para leer.
   Color 60/30/10 (31/10/2026, regla de Agustín): 60 blanco, 30 negro y 10 naranja. El naranja vivo (#FF7C1F desde el
   12/11/2026) va en lo que se toca o se marca (botón de suscripción, subrayados, dibujos, play); nunca en texto sobre
   blanco, porque no llega al contraste. Para eso está la tinta naranja (#C84D0E, 4,6 a 1), solo en los links de texto
   sobre blanco ("naranja con tinta", elegida por Agustín el 14/11/2026). El negro pesa en la banda, el cierre y el pie.
   Los grises y el negro son los de farhanhossain.com desde el 14/11/2026: #1E1E1E, #555555, #F3F3F2 y rayas al 10%.
   Los estilos base son para celular (360 px) y se agrandan con min-width. */
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree Texto"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; size-adjust: 90%; }
@font-face { font-family: "Figtree Texto"; src: url("/fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; size-adjust: 90%; }
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --sheet: #f3f3f2;
  --ink: #1e1e1e;
  --text: #1e1e1e;
  --muted: #555555;
  --rule: rgba(0, 0, 0, .1);
  /* Naranja (12/11/2026, elegido por Agustín en la maqueta del rediseño): más naranja que rojo y un poco más claro que
     el #FE5000 (Pantone 021 C) de antes, que le parecía "demasiado colorfull". Tono 25°, lejos del #FF9000 */
  --acento: #ff7c1f;
  --acento-hover: #ff9142;
  /* La tinta naranja (14/11/2026): el naranja más vivo que todavía se lee como texto sobre blanco (4,6 a 1). Solo en
     links de texto sobre blanco; sobre el gris de las tapas no llega (4,2 a 1) */
  --tinta: #c84d0e;
  --error: #9b1c0e;
  --night-text: #f4f4f4;
  --night-muted: #a6a6a6;
  --night-rule: rgba(255, 255, 255, .2);
  --titulo: "Young Serif", Georgia, "Times New Roman", serif;
  --texto: "Figtree Texto", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--texto);
  font-size: 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--acento); color: var(--ink); }
img, svg { display: block; }
a { color: inherit; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--ui); font-size: 15px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* El subrayado naranja, con las puntas inclinadas como la barra del logo */
.subrayado {
  font-style: normal;
  background-image: linear-gradient(100deg, transparent .2em, var(--acento) .2em, var(--acento) calc(100% - .2em), transparent calc(100% - .2em));
  background-repeat: no-repeat;
  background-size: 100% .15em;
  background-position: 0 90%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .08em;
  margin: 0 -.08em;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: -.005em;
  text-decoration: none; background: var(--ink); color: var(--paper);
  border: 0; border-radius: 4px; transition: background-color .15s ease-out;
}
.btn:hover { background: #333333; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* Encabezado */
.site-header { border-bottom: 1px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand {
  display: inline-block; line-height: 44px; white-space: nowrap;
  text-decoration: none; color: var(--ink);
  font-family: var(--texto); font-weight: 650; font-size: 24px; letter-spacing: -.01em;
}
/* El logo: el subrayado naranja con puntas inclinadas, por debajo de la cola de la g */
.brand-u { position: relative; display: inline-block; line-height: 1; }
.brand-u::after {
  content: ""; position: absolute; left: .02em; right: -.02em; bottom: -.24em;
  height: max(.07em, 2px); background: var(--acento);
  clip-path: polygon(.12em 0, 100% 0, calc(100% - .12em) 100%, 0 100%);
}
.nav { display: flex; align-items: center; gap: 24px; font-family: var(--ui); font-size: 15px; }
.nav-link { display: none; text-decoration: none; padding: 12px 0; color: var(--ink); }
.nav-link:hover { text-decoration: underline; text-decoration-color: var(--acento); }
.nav .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.nav-link, .nav .btn { white-space: nowrap; }

/* La caja "Sobre ..." (30/10/2026, maqueta 6 elegida por Agustín): reemplaza a "Ediciones" y al botón del menú.
   La caja y "Sobre" no se mueven nunca: todas las palabras ocupan la misma celda, así que el ancho es siempre el
   de la más larga, y la que se ve gira sobre sí misma como un tambor (sobre.js). Con cada edición se suma su palabra */
.sobre {
  display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 16px 2px;
  line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: inset 0 -4px 0 var(--acento);
  transition: background-color .15s ease-out;
}
.sobre:hover { background: var(--sheet); }
.sobre-pre { font-weight: 500; }
.sobre-rueda { display: inline-grid; perspective: 320px; }
.sobre-palabra {
  grid-area: 1 / 1; justify-self: start; font-weight: 800;
  opacity: 0; transform: rotateX(-90deg); transform-origin: 50% 50% -.65em; backface-visibility: hidden;
}
.sobre-palabra.activa { opacity: 1; transform: none; }
.sobre-palabra.saliendo { opacity: 0; transform: rotateX(90deg); }

/* Portada */
.hero { padding: 40px 0 56px; }
h1 {
  font-family: var(--ui); font-weight: 750;
  font-size: clamp(38px, 8.6vw, 54px); line-height: 1.08; letter-spacing: -.025em;
  max-width: 14ch; margin: 0 0 24px;
}
h1 .subrayado { white-space: nowrap; } /* que la frase subrayada no se parta en dos renglones */
/* La palabra subrayada va derecha, sin inclinar (27/10/2026, pedido de Agustín) */
h1 .subrayado { display: inline-block; }
/* El título manda; debajo de una raya van la bajada y la suscripción, sin tarjeta (28/10/2026) */
.hero h1 { max-width: none; }
.hero-pie { display: grid; gap: 32px; border-top: 1.5px solid var(--ink); padding-top: 24px; }
.lead { font-size: 22px; line-height: 1.45; color: var(--text); max-width: 34ch; margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--ink); text-wrap: balance; }
.signup-pitch { font-size: 20px; line-height: 1.45; color: var(--ink); max-width: 38ch; margin: 0 0 14px; }
.signup-pitch:has(+ .suscribir.listo) { display: none; }
.signup { display: flex; flex-wrap: wrap; max-width: 440px; }
.signup input[type="email"] {
  flex: 1 1 0; min-width: 0; height: 48px; padding: 0 14px;
  font-family: var(--ui); font-size: 17px; color: var(--ink);
  background: #fff; border: 1px solid var(--ink); border-right: 0; border-radius: 4px 0 0 4px;
}
.signup input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
/* El botón de suscripción es lo único que va en naranja lleno: es lo que más importa tocar */
.signup .btn { flex: none; padding: 0 16px; border-radius: 0 4px 4px 0; background: var(--acento); color: var(--ink); }
.signup .btn:hover { background: var(--acento-hover); }
.signup .btn:disabled { opacity: .7; cursor: progress; }
.signup .trampa { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.signup-error { flex-basis: 100%; margin: 10px 0 0; font-family: var(--ui); font-size: 15px; line-height: 1.4; color: var(--error); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.signup-note { font-family: var(--ui); font-size: 14px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: 44ch; }
.hero .lead { margin-bottom: 0; border-top: 0; padding-top: 0; }
.hero .signup-pitch { text-wrap: balance; }

/* Preguntas que rotan al pie del hero (28/10/2026, preguntas.js): una por vez, con una raya por pregunta */
.hero-preguntas { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.hero-preguntas-rotulo { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--muted); }
/* Todas ocupan la misma celda: el alto no salta al cambiar de una a otra */
.hero-preguntas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.hero-preguntas-lista li {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); line-height: 1.3;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s;
}
.hero-preguntas-lista li.activa { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.hero-preguntas-lista a { color: var(--ink); text-decoration: none; }
.pregunta { font-family: var(--texto); font-size: 22px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .15s; }
.hero-preguntas-lista a:hover .pregunta, .hero-preguntas-lista a:focus-visible .pregunta { text-decoration-color: var(--acento); }
/* La edición y la flecha van pegadas al final de la pregunta, también cuando ocupa dos o tres renglones */
.pregunta-ed { display: inline-block; margin-left: .6em; font-family: var(--ui); font-weight: 750; font-size: 15px; white-space: nowrap; }
.pregunta-ed::after { content: "→" / ""; display: inline-block; margin-left: .35em; transition: transform .2s ease-out; }
.hero-preguntas-lista a:hover .pregunta-ed::after { transform: translateX(4px); }
/* La raya de la pregunta que se ve se llena de naranja; tocar una raya muestra esa pregunta */
.hero-preguntas-marcas { display: flex; gap: 6px; }
.hero-preguntas-marcas button { position: relative; width: 32px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-preguntas-marcas button::before, .hero-preguntas-marcas button::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.hero-preguntas-marcas button::before { right: 0; background: var(--rule); }
.hero-preguntas-marcas button::after { width: 0; background: var(--acento); }
.hero-preguntas-marcas button.activa::after { width: 100%; }

/* La última edición, como una hoja impresa con un señalador inclinado */
.issue {
  position: relative; display: flex; flex-direction: column;
  background: var(--sheet); border: 1px solid var(--rule); border-top: 5px solid var(--ink);
  padding: 18px 20px 20px;
}
.issue::before {
  content: ""; position: absolute; top: -26px; right: 28px; width: 13px; height: 42px;
  background: var(--acento); transform: rotate(11deg); transform-origin: top center;
}
.issue-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--ui); font-size: 14px; color: var(--muted);
  padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.issue-head strong { color: var(--ink); font-weight: 700; }
.issue-title { font-family: var(--ui); font-weight: 750; font-size: clamp(23px, 2.4vw, 27px); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 12px; }
.issue-title a { text-decoration: none; }
.issue-title a::after { content: ""; position: absolute; inset: 0; }
.issue:hover .issue-title a { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 3px; }
.issue-dek { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
.issue-hook { font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.35; color: var(--ink); margin: 0 0 28px; text-indent: -.42em; }
.issue-partes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.issue-partes li:last-child { border-bottom: 0; }
.issue-partes li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.issue-partes b { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--ink); }
.issue-partes span { font-size: 18px; line-height: 1.4; color: var(--text); }
.issue-stat { margin: auto 0 20px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.stat-num { font-family: var(--texto); font-weight: 500; font-style: italic; font-size: 58px; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.issue-stat figcaption { font-family: var(--ui); font-size: 14px; line-height: 1.45; color: var(--muted); }
.issue-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; font-family: var(--ui); font-size: 15px; color: var(--muted); }
.issue-cta { font-weight: 700; color: var(--ink); white-space: nowrap; }
.issue-cta span { display: inline-block; transition: transform .2s ease-out; }
.issue:hover .issue-cta span { transform: translateX(4px); }

/* Secciones */
.section { padding: 64px 0; border-top: 1px solid var(--ink); }
h2 {
  font-family: var(--ui); font-weight: 750;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.022em;
  margin: 0 0 16px;
}
.section-intro { color: var(--muted); max-width: 38ch; margin: 0 0 32px; }
.split { display: grid; gap: 8px; }

/* Llevalo a tu caso: la pregunta de la última edición, en una caja que se ve como la de un chat con una IA.
   Alineado a la izquierda desde el 31/10/2026 (antes centrado), por la grilla: ver "Grilla de 12 columnas" */
.llevalo-bajada { margin: 0 0 32px; color: var(--muted); text-wrap: balance; }
.llevalo-bajada a { color: var(--ink); }
.caja-ia { max-width: 860px; margin: 0; padding: 22px 22px 18px; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; }
.caja-ia-texto { margin: 0 0 22px; font-family: var(--ui); font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
/* El cursor naranja del final, como si la pregunta recién terminara de escribirse */
.caja-ia-texto::after { content: ""; display: inline-block; width: 3px; height: .95em; margin-left: 6px; vertical-align: -.12em; background: var(--acento); }
.caja-ia .copiar { justify-content: flex-end; margin-top: 0; }
/* Lo que se completa entre corchetes, marcado como con resaltador (en la portada y en la edición) */
.marca { background: none; color: inherit; box-shadow: inset 0 -.42em 0 rgba(255, 124, 31, .25); }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Banda oscura: un recuadro alineado con el contenido, con el logo en grande y una frase de la edición */
/* Desde el 31/10/2026 arranca como las demás secciones, con la raya y el mismo aire arriba (ritmo parejo) */
.band { padding: 64px var(--gutter); border-top: 1px solid var(--ink); }
.band .wrap { max-width: calc(var(--wrap) - 2 * var(--gutter)); background: var(--ink); color: var(--night-text); overflow: hidden; padding: 48px 24px 56px; display: grid; gap: 32px; }
.band-mark { height: 84px; width: auto; overflow: visible; }
.band-mark .line { transform-box: fill-box; transform-origin: 0 50%; }
/* El título va afuera de la banda, arriba y alineado con su borde izquierdo, para que no quede pegado a la frase */
.nombre-rotulo { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto 32px; }
.nombre-frase { font-family: var(--texto); font-weight: 500; font-size: clamp(38px, 6vw, 72px); line-height: 1.06; letter-spacing: -.015em; color: var(--night-text); margin: 0 0 28px; max-width: 14ch; text-wrap: balance; }
.nombre-frase em { font-style: normal; color: var(--acento); }
.nombre-pie { font-size: 21px; line-height: 1.45; color: var(--night-text); margin: 0; max-width: 38ch; }

/* Qué te llevás y quién escribe */
.about { display: grid; gap: 56px; }
.about-lead { font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0 0 24px; max-width: 36ch; }
.ficha { margin: 0; border-top: 1px solid var(--ink); }
.ficha div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ficha dt { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--ink); }
.ficha dd { margin: 0; font-size: 19px; line-height: 1.5; color: var(--text); }
.author p { margin: 0 0 16px; max-width: 46ch; }
.byline { display: flex; align-items: center; gap: 14px; margin: 28px 0 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.byline .byline-mark { flex: none; width: 52px; height: 52px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); display: grid; place-items: center; }
.byline-mark svg { height: 26px; width: auto; }
/* La foto de Agustín en la firma: cuadrada, en blanco y negro, ocupa todo el recuadro */
.byline-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.byline strong { display: block; font-family: var(--ui); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); }
.byline span { display: block; font-family: var(--ui); font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Cierre y pie en negro, como un solo bloque al final de la página (31/10/2026, para el 30 de negro) */
.cta { border-top: 1px solid var(--ink); background: var(--ink); color: var(--night-text); }
.cta h2 { color: var(--night-text); }
.cta .signup input[type="email"] { border-color: var(--paper); }
.cta .signup-note { color: var(--night-muted); }
.cta .signup-error { color: #ff9f80; }
.cta .wrap { padding-top: 64px; padding-bottom: 64px; display: grid; gap: 28px; }
.cta h2 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; max-width: 13ch; margin: 0; }

.cta p { margin: 0 0 24px; max-width: 40ch; }

/* Suscripción: el formulario se pliega y en su lugar se despliega la bienvenida */
.plegable { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.plegable > div { min-height: 0; overflow: hidden; }
/* Margen para que el recorte no corte el contorno de foco del formulario */
.plegable-form > div { padding: 4px; margin: -4px; }
.plegable-panel { grid-template-rows: 0fr; opacity: 0; }
.suscribir.listo .plegable-form { grid-template-rows: 0fr; opacity: 0; }
.suscribir.listo .plegable-panel { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
.suscribir.listo + .signup-note, .cta p:has(+ .suscribir.listo) { display: none; }

.bienvenida { max-width: 520px; padding: 22px 22px 20px; background: var(--sheet); border-top: 3px solid var(--ink); color: var(--text); }
.bienvenida-titulo { margin: 0 0 4px; font-family: var(--ui); font-weight: 750; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); outline: none; }
/* El subrayado naranja se dibuja de izquierda a derecha, como en la banda oscura */
.trazo { position: relative; white-space: nowrap; }
.trazo::after {
  content: ""; position: absolute; left: .02em; right: -.02em; bottom: -.1em; height: .12em; background: var(--acento);
  clip-path: polygon(.18em 0, 100% 0, calc(100% - .18em) 100%, 0 100%);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .45s;
}
.suscribir.listo .trazo::after { transform: scaleX(1); }
.bienvenida-sub { margin: 0 0 20px; font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--muted); }
.bienvenida-pregunta { margin: 0 0 12px; font-family: var(--ui); font-weight: 700; font-size: 17px; color: var(--ink); }
.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Con cinco opciones, la última ocupa la fila entera */
.perfiles button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.perfiles button {
  min-height: 48px; padding: 10px 14px; text-align: left; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}
.suscribir.listo .perfiles button { animation: aparecer .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.6s + var(--i) * 70ms); }
.perfiles:not(.elegido) button:hover { background: var(--paper); }
.perfiles button[aria-pressed="true"] { background: var(--ink); color: var(--paper); cursor: default; }
/* Una vez elegida una opción, las demás se desvanecen y queda solo esa */
.perfiles button.saliendo { opacity: 0; transform: scale(.97); transition: opacity .24s ease, transform .24s ease; pointer-events: none; }
.perfiles.una { grid-template-columns: 1fr; }
.perfil-texto { grid-template-rows: 0fr; opacity: 0; }
.perfil-texto.activo { grid-template-rows: 1fr; opacity: 1; }
.perfil-texto > div > p { margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.perfil-texto a { font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--ink); }
/* El podcast de Recursos que le toca a cada perfil */
.perfil-texto a.perfil-pod {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-weight: 400; line-height: 1.45; color: var(--muted); text-decoration: none;
}
.perfil-pod-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-radius: 2px; }
.perfil-pod-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.perfil-pod .play { left: 6px; bottom: 6px; width: 24px; height: 24px; }
.perfil-pod .play::before { margin-left: 2px; border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
.perfil-pod-etiqueta { display: block; margin-bottom: 2px; font-weight: 700; font-size: 14px; color: var(--ink); }
.perfil-pod strong { color: var(--ink); font-weight: 750; }
.perfil-pod:hover strong { text-decoration: underline; text-decoration-color: var(--acento); }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

/* Pie */
.site-footer { border-top: 1px solid var(--ink); padding: 48px 0 36px; font-family: var(--ui); font-size: 15px; color: var(--night-muted); background: var(--ink); }
.cta + .site-footer { border-top-color: var(--night-rule); }
.site-footer .brand { color: var(--night-text); }
.footer-grid { display: grid; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--night-rule); }
.footer-tag { font-family: var(--texto); font-size: 19px; line-height: 1.5; color: var(--night-text); margin: 10px 0 0; max-width: 32ch; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.footer-nav a { display: inline-block; padding: 11px 0; color: var(--night-text); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--acento); }
.colophon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
.colophon p { margin: 0; }
.legales { display: flex; gap: 20px; }
.legales a { display: inline-block; padding: 11px 0; color: var(--night-muted); text-decoration: none; }
.legales a:hover { color: var(--night-text); text-decoration: underline; text-decoration-color: var(--acento); }

/* Páginas legales y 404 */
.legal { padding: 48px 0 80px; }
.legal .inner { max-width: 68ch; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); max-width: none; margin: 0 0 10px; }
.legal .updated { font-family: var(--ui); font-size: 15px; color: var(--muted); margin: 0 0 36px; padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.legal h2 { font-size: 22px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--muted); }
.notfound { padding: 72px 0 120px; }
.notfound h1 { max-width: 12ch; margin-bottom: 32px; }
.notfound .lead { margin-bottom: 32px; }

/* Edición en la web */
.ed { padding: 40px 0 0; }
/* Centrada en la página (31/10/2026, a pedido de Agustín): antes quedaba recostada a la izquierda.
   640 px (antes 720) para que el renglón tenga unos 70 caracteres y no 80 a 85 (Bringhurst: entre 45 y 75) */
.ed-inner { max-width: 640px; margin-left: auto; margin-right: auto; }
.ed-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-family: var(--ui); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ed-meta strong { color: var(--ink); font-weight: 700; }
.ed h1 { font-size: clamp(32px, 5.4vw, 50px); line-height: 1.1; max-width: 20ch; margin: 0 0 20px; }
.ed-dek { font-size: 22px; line-height: 1.5; color: var(--muted); margin: 0 0 28px; max-width: 42ch; }
.ed-partes { display: flex; flex-wrap: wrap; gap: 0 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: 15px; }
.ed-partes a { display: inline-block; padding: 12px 0; color: var(--ink); text-decoration: none; }
.ed-partes a:hover { text-decoration: underline; text-decoration-color: var(--acento); }
.ed-body { padding: 36px 0 64px; }
.ed-body p, .ed-body li { font-size: 21px; line-height: 1.6; }
.ed-body p { margin: 0 0 1.05em; }
.ed-body strong { color: var(--ink); font-weight: 650; }
.ed-body .ed-abre { font-style: italic; font-size: clamp(24px, 2.8vw, 29px); line-height: 1.4; color: var(--ink); margin-bottom: 1.2em; }
.ed-body h2 { font-size: clamp(24px, 2.6vw, 28px); margin: 1.9em 0 .6em; }
.ed-body ol { margin: 0 0 1.3em; padding-left: 1.5em; }
.ed-body li { margin-bottom: .55em; padding-left: .2em; }
.ed-body li::marker { font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--muted); }
.ed-body ul { margin: 0 0 1.3em; padding-left: 1.2em; }
/* Una imagen dentro de la edición, como el cuadro de la N.º 2 */
.ed-fig { margin: 1.6em 0 1.8em; }
.ed-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.ed-body .ed-pregunta { font-weight: 700; font-size: clamp(23px, 2.6vw, 27px); line-height: 1.35; color: var(--ink); margin: 1.2em 0 .35em; padding-left: 16px; border-left: 3px solid var(--acento); }

/* Llevalo a tu negocio: el ejercicio de la edición */
.ejercicio-intro { font-size: 21px; max-width: 52ch; margin: 0 0 40px; }
.paso { margin: 0 0 48px; }
.paso:last-child { margin-bottom: 0; }
.paso-titulo { display: flex; align-items: baseline; gap: 12px; font-family: var(--ui); font-weight: 750; font-size: clamp(21px, 2.2vw, 24px); line-height: 1.2; margin: 0 0 14px; }
.paso-titulo span { font-family: var(--texto); font-style: italic; font-weight: 400; color: var(--muted); font-variant-numeric: lining-nums; }
.paso-intro { max-width: 52ch; margin: 0 0 18px; }
.paso-nota { max-width: 52ch; margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--acento); font-size: 19px; line-height: 1.5; color: var(--ink); }
.llevar-pregunta { max-width: 30ch; margin: 0; font-family: var(--ui); font-weight: 750; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.3; color: var(--ink); }
.paso-cuando { margin: 16px 0 0; color: var(--muted); }
.llevar-pregunta + .llevar-pregunta { margin-top: 22px; }
.pedido {
  margin: 0; padding: 18px 20px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 18px; line-height: 1.5; color: var(--ink);
  background: var(--sheet); border-top: 3px solid var(--ink);
}
.copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.copiado { font-family: var(--ui); font-size: 14px; color: var(--muted); }
.copiar .btn { display: none; }
.con-js .copiar .btn { display: inline-flex; }

/* Para seguir y la firma de la edición */
.recurso { border-top: 1px solid var(--ink); padding-top: 18px; }
.recurso-tipo { margin: 0 0 8px; font-family: var(--ui); font-size: 14px; color: var(--muted); }
.recurso h3 { font-family: var(--ui); font-weight: 750; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; margin: 0 0 12px; }
.recurso p:last-child { margin: 0; max-width: 60ch; }
.recurso + .recurso { margin-top: 40px; }
/* Recursos: los podcasts que le gustaron a Agustín. Una portada por episodio y una línea debajo */
.pods { display: grid; gap: 32px 24px; margin-top: 32px; }
.pods-pagina { padding-bottom: 72px; }
.pod { margin: 0; scroll-margin-top: 16px; }
.pod figcaption { margin: 12px 0 0; font-family: var(--ui); font-size: 16px; line-height: 1.45; color: var(--muted); }

/* La portada: la miniatura del video, con el botón de play encima */
.portada {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink); text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.portada:hover { box-shadow: 0 16px 30px -22px rgba(20, 20, 20, .8); }
.portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--acento); display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35); transition: transform .2s ease-out;
}
.play::before { content: ""; margin-left: 4px; border-left: 16px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.portada:hover .play { transform: scale(1.06); }
.pod figcaption strong { color: var(--ink); font-weight: 750; }
.pod-quien { margin: 0; }
.pod-de-que { margin: 6px 0 0; font-family: var(--texto); font-size: 19px; line-height: 1.45; color: var(--text); }
.pod iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ink); }
/* En la portada, el título de los podcasts va arriba de las miniaturas */
.recursos-portada h2 { margin-bottom: 32px; }

/* Marcas de borrador para revisar en local: no se publica ninguna página que tenga una */
.pendiente { display: block; margin: 12px 0 0; padding: 9px 13px; font-family: var(--ui); font-size: 15px; line-height: 1.45; color: var(--ink); background: #ffece3; border: 1.5px dashed var(--acento); }
.pendiente::before { content: "Pendiente · "; font-weight: 800; }
span.pendiente { display: inline; margin: 0; padding: 0 5px; }
span.pendiente::before { content: none; }

.ed-autor { padding: 48px 0; }
.ed-autor .byline { margin-top: 0; padding-top: 0; border-top: 0; }
.author-links { display: flex; flex-wrap: wrap; gap: 12px; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plegable, .perfiles button, .perfiles button.saliendo, .trazo::after { transition: none; animation: none; }
  .btn, .issue-cta span { transition: none; }
}

@media (min-width: 560px) {
  :root { --gutter: 28px; }
  .ficha div { grid-template-columns: 8.5rem 1fr; gap: 16px; align-items: baseline; }
  .issue { padding: 22px 28px 26px; }
  .issue-stat { grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
}

/* Con Recursos, el menú completo entra recién desde 840 px */
@media (min-width: 840px) {
  .nav-link { display: inline-block; }
}
.nav-link[aria-current] { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 6px; }

@media (min-width: 720px) {
  .site-header .wrap { min-height: 72px; }
  .brand { font-size: 24px; }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; }
  /* La portada llena la primera pantalla (menos el encabezado) y centra el contenido en el alto */
  /* El título con la bajada quedan centrados en el alto y las preguntas, al pie de la primera pantalla */
  .hero { min-height: calc(100svh - 73px); display: flex; padding: 56px 0 32px; }
  .hero > .wrap { width: 100%; display: flex; flex-direction: column; }
  .hero-main { margin-top: auto; }
  .hero-pie { margin-bottom: 48px; }
  /* Alineadas por el primer renglón: la celda tiene el alto de la pregunta más larga, que ocupa dos */
  .hero-preguntas { margin-top: auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 28px; padding-top: 20px; }
  .hero-preguntas-marcas { align-self: start; margin-top: 4px; }
  .pregunta { font-size: 24px; }
  /* Tamaño atado al ancho para que "sin la versión cómoda" entre en un renglón */
  .hero h1 { font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: -.035em; margin-bottom: 48px; }
  .hero-pie { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; padding-top: 32px; }
  .hero-pie .lead { font-size: 27px; max-width: 30ch; }
  .hero .signup { max-width: none; }
  .hero .signup input[type="email"] { height: 56px; font-size: 18px; }
  .hero .signup .btn { min-height: 56px; padding: 0 24px; font-size: 17px; }
  h1 { font-size: clamp(54px, 4.8vw, 62px); margin-bottom: 32px; }
  .lead { font-size: 24px; }
  .section { padding: 96px 0; }
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .split-head { position: sticky; top: 32px; }
  .band { padding-top: 96px; padding-bottom: 96px; }
  .band .wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; padding: 88px 72px; gap: 56px; }
  .band-mark { order: 2; height: 300px; justify-self: center; }
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .about > div:first-child { padding-right: 56px; }
  .about > div:last-child { padding-left: 56px; border-left: 1px solid var(--rule); }
  .cta .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 72px; padding-top: 96px; padding-bottom: 96px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .legal { padding: 72px 0 104px; }
  .ed { padding-top: 64px; }
  .ed-body p, .ed-body li { font-size: 22px; }
}

@media (min-width: 560px) {
  .pods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .pods-pagina { gap: 48px 32px; padding-bottom: 96px; }
}

/* Movimiento (26/10/2026), con la web de Lando Norris (OFF+BRAND) como referencia lejana: pocos detalles,
   todos al servicio de lo que se lee. Si la persona pidió menos movimiento en su sistema, nada se mueve. */

/* De una página a otra, un fundido corto; el encabezado queda quieto */
@view-transition { navigation: auto; }
.site-header { view-transition-name: cabecera; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes trazo { to { background-size: 100% .15em; } }
@keyframes llenar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: no-preference) {
  /* La portada de la web entra de a partes al cargar */
  .hero-main > *, .hero-pie .lead, .hero-suscribir { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-pie .lead { animation-delay: .08s; }
  .hero-suscribir { animation-delay: .2s; }
  .hero-preguntas { animation: subir .7s cubic-bezier(.2, .7, .2, 1) .3s both; }

  /* Cuando la raya naranja termina de llenarse, preguntas.js pasa a la siguiente; con el mouse encima, se pausa */
  .hero-preguntas-marcas button.activa::after { animation: llenar 5s linear both; }
  .hero-preguntas:hover button.activa::after, .hero-preguntas:focus-within button.activa::after { animation-play-state: paused; }

  /* El subrayado naranja se dibuja de izquierda a derecha, como el trazo del logo */
  h1 .subrayado { background-size: 0% .15em; animation: trazo .8s cubic-bezier(.2, .7, .2, 1) .5s forwards; }
  .subrayado.por-trazar { background-size: 0% .15em; }
  .subrayado.trazado { transition: background-size .8s cubic-bezier(.2, .7, .2, 1) .25s; }

  /* Lo que está más abajo aparece al llegar (movimiento.js) */
  .por-aparecer { opacity: 0; transform: translateY(18px); }
  .aparecio { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--orden, 0) * 90ms); }

  /* La banda oscura entra como el resto, subiendo un poco mientras aparece; después aparece la S,
     su barra naranja se dibuja y el tramo en naranja de la frase se pinta de izquierda a derecha.
     Hasta el 28/10/2026 se abría desde un recuadro y la S giraba: a Agustín le pareció invasivo */
  .band.por-abrir .wrap { opacity: 0; transform: translateY(24px); }
  .band.abierta .wrap { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .band.por-abrir .band-mark { opacity: 0; }
  .band.abierta .band-mark { transition: opacity .6s ease .3s; }
  .band.por-abrir .band-mark .line { transform: scaleX(0); }
  .band.abierta .band-mark .line { transition: transform .7s cubic-bezier(.2, .7, .2, 1) .6s; }
  .band .nombre-frase em {
    background: linear-gradient(90deg, var(--acento) 50%, var(--night-text) 50%) 0 0 / 200% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .band.por-abrir .nombre-frase em { background-position: 100% 0; }
  .band.abierta .nombre-frase em { transition: background-position 1.2s cubic-bezier(.2, .7, .2, 1) .7s; }

  .caja-ia-texto::after { animation: parpadeo 1.1s steps(1) infinite; }

  /* La palabra de la caja "Sobre ..." sale hacia arriba y la siguiente entra desde abajo, en el mismo lugar */
  .sobre-palabra.activa, .sobre-palabra.saliendo { transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .45s ease; }

  /* En las portadas de los podcasts, la imagen se acerca un poco */
  .portada img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .portada:hover img { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* Portada con Agustín arriba (31/10/2026, de la maqueta de agustinrolon.com que eligió Agustín). El hero lo presenta
   con su foto al lado del título (en celular, arriba); el newsletter se muestra con sus ediciones en la banda oscura, y
   abajo va una sola línea con el link a la carta (/carta) */
.hero-persona { padding: 32px 0 64px; }
.persona-cabeza { display: grid; gap: 20px; margin-bottom: 32px; }
.persona-hero-foto { display: block; width: 88px; height: 88px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--rule); }
.hero-persona h1 { font-size: clamp(34px, 8.4vw, 46px); line-height: 1.08; max-width: 18ch; margin: 0; }
/* Con un botón largo, en pantallas angostas el botón baja abajo del mail para que el campo no quede chico */
@media (max-width: 479px) {
  .hero .signup input[type="email"] { flex-basis: 100%; border-right: 1px solid var(--ink); border-radius: 4px 4px 0 0; }
  .hero .signup .btn { flex: 1 1 100%; min-height: 48px; border-radius: 0 0 4px 4px; }
}
@media (min-width: 960px) {
  .hero.hero-persona { display: block; min-height: 0; padding: 72px 0 96px; }
  .persona-cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 64px; margin-bottom: 48px; }
  .persona-hero-foto { order: 2; width: 240px; height: 240px; }
  .hero-persona h1 { font-size: clamp(52px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.03em; max-width: 17ch; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .persona-cabeza > * { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
  .persona-cabeza h1 { animation-delay: .06s; }
}

/* La frase y las ediciones, sobre la banda oscura */
.otro-frase { font-family: var(--texto); font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.01em; color: var(--night-text); margin: 0; max-width: 22ch; text-wrap: balance; }
.otro-ediciones { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--night-rule); }
.otro-ediciones li { border-bottom: 1px solid var(--night-rule); }
.otro-ediciones a { display: grid; gap: 4px; padding: 18px 0; color: var(--night-text); text-decoration: none; }
.otro-num { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--acento); }
.otro-tit { font-family: var(--texto); font-size: 24px; line-height: 1.25; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.otro-ediciones a:hover .otro-tit { text-decoration-color: var(--acento); }
.otro-bajada { font-size: 16px; line-height: 1.45; color: var(--night-muted); }

/* La línea sobre Agustín, con el link a la carta y al mail */
/* La carta va a la derecha, en serif y entre filetes, para que pese más que el mail */
.corta-grilla { display: grid; gap: 32px; }
.corta-linea { max-width: 24ch; margin: 0; font-family: var(--texto); font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.01em; }
.corta-links { display: grid; justify-items: start; gap: 4px; }
.corta-carta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; width: 100%;
  padding: 18px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule);
  font-family: var(--texto); font-weight: 500; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; color: var(--ink); text-decoration: none;
}
.corta-carta span:first-child { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.corta-flecha { transition: transform .15s ease-out; }
.corta-carta:hover .corta-flecha { transform: translateX(4px); }
.corta-mail { display: inline-block; padding: 12px 0; font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 840px) {
  .corta-grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; gap: 64px; }
}

/* La carta (/carta): una columna angosta para leer, con las posturas y la firma */
.carta-pagina .wrap { max-width: 720px; padding-top: 56px; padding-bottom: 80px; }
.carta-pagina h1 { max-width: 16ch; margin: 0 0 28px; font-size: clamp(36px, 5vw, 56px); }
.carta-pagina p { margin: 0 0 18px; font-size: 20px; line-height: 1.6; color: var(--text); }
.carta-pagina .carta-lead { font-size: 24px; line-height: 1.5; color: var(--ink); }
.carta-pagina h2 { margin: 44px 0 10px; font-size: 26px; }
.creo { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--ink); }
.creo li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.creo strong { display: block; margin-bottom: 6px; font-family: var(--texto); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; color: var(--ink); }
.creo span { display: block; color: var(--muted); }
.firma { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.firma img { flex: none; width: 56px; height: 56px; object-fit: cover; }
.firma p { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 17px; color: var(--ink); }
.firma span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }

/* Grilla de 12 columnas (31/10/2026, skill de diseño). Desde 960 px, las secciones se apoyan en las mismas 12 columnas
   con el mismo espacio entre ellas, así los bordes coinciden de una sección a otra: lo de la izquierda va de la columna
   1 a la 7 y lo de la derecha arranca siempre en la 8. Los títulos de sección van a la izquierda, donde arranca el
   barrido de la vista (NN/g: el 80% del tiempo se mira la mitad izquierda de la página). En celular, una sola columna */
@media (min-width: 960px) {
  :root { --col-gap: 32px; }
  .persona-cabeza, .hero-pie, .band .wrap, .llevalo-portada .wrap, .corta-grilla, .cta .wrap, .footer-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  }
  .persona-cabeza h1 { grid-column: 1 / span 9; grid-row: 1; }
  .persona-hero-foto { grid-column: 10 / span 3; grid-row: 1; justify-self: end; width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; }
  .hero-pie .lead { grid-column: 1 / span 6; }
  .hero-suscribir { grid-column: 8 / span 5; }
  /* La banda ocupa las 12 columnas; el texto arranca en la 2 y la S va de la 9 a la 12 */
  .band .wrap { padding: 88px 0; }
  .band .otro { grid-column: 2 / span 7; grid-row: 1; }
  .band-mark { grid-column: 9 / span 4; grid-row: 1; }
  .llevalo-portada .wrap > * { grid-column: 1 / -1; }
  .llevalo-portada .caja-ia { grid-column: 1 / span 9; max-width: none; }
  .corta-linea { grid-column: 1 / span 7; }
  .corta-links { grid-column: 8 / span 5; }
  .cta h2 { grid-column: 1 / span 7; }
  .cta .wrap > div { grid-column: 8 / span 5; }
  .cta .signup { max-width: none; }
  .footer-grid > div { grid-column: 1 / span 7; }
  .footer-nav { grid-column: 8 / span 5; }
}


/* Rediseño de la portada (12/11/2026, publicado con el ok de Agustín). La portada pasa a ser un lugar con contenido:
   arriba, el título a pantalla completa y la suscripción; después, las ediciones (como tapas con un dibujo por tema
   desde la segunda vuelta del 12/11, al final de este archivo); en la banda oscura, una pregunta de cada edición; los podcasts; y abajo,
   Agustín con su foto. Detalle en la historia de la web, en notas/ */
/* Arriba: llena la primera pantalla (segunda vuelta, 12/11/2026). El título manda; al pie, sobre una raya,
   la bajada y la suscripción, como el hero del 31/10 */
.inicio { display: flex; min-height: calc(100svh - 65px); padding: 40px 0 40px; }
.inicio > .wrap { width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.inicio h1 { font-size: clamp(40px, 10.4vw, 56px); line-height: 1.04; letter-spacing: -.03em; max-width: 14ch; margin: auto 0; }
.inicio-pie { display: grid; gap: 24px; padding-top: 24px; border-top: 1.5px solid var(--ink); }
.inicio-bajada { font-size: 22px; line-height: 1.45; color: var(--ink); margin: 0; max-width: 30ch; text-wrap: balance; }

/* El título con la palabra que gira (12/11/2026, frase 5 de la maqueta C, elegida por Agustín). Todas las palabras
   ocupan la misma celda, así el ancho es el de la más larga y el resto del título no se mueve; la que se ve gira
   sobre sí misma como un tambor, igual que la caja "Sobre" que había en el menú (gira.js). La segunda oración va
   en su propio renglón, para que el hueco que dejan las palabras cortas quede al final de un renglón */
.gira { display: inline-grid; perspective: 600px; }
.gira-item {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  opacity: 0; transform: rotateX(-90deg); transform-origin: 50% 50% -.5em; backface-visibility: hidden;
}
.gira-item.activa { opacity: 1; transform: none; }
.gira-item.saliendo { opacity: 0; transform: rotateX(90deg); }
/* El subrayado naranja con las puntas inclinadas, como .subrayado */
.gira-subrayado {
  background-image: linear-gradient(100deg, transparent .2em, var(--acento) .2em, var(--acento) calc(100% - .2em), transparent calc(100% - .2em));
  background-repeat: no-repeat; background-size: 100% .15em; background-position: 0 90%; padding: 0 .08em;
}
.gira-despues { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gira-item.activa, .gira-item.saliendo { transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .45s ease; }
}

/* Llevalo a tu caso, en la banda oscura: una pregunta de cada edición */
.preguntas h2 { color: var(--night-text); margin: 0 0 8px; }
.preguntas-bajada { margin: 0 0 32px; font-size: 20px; color: var(--night-muted); }

/* Quién escribe (12/11/2026): la foto de perfil grande, a media página; el título, el texto y los links al lado.
   En celular, la foto arriba y a todo el ancho */
.quien-alto { display: grid; gap: 32px; }
.quien-alto-foto { order: -1; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.quien-alto-texto p { margin: 24px 0 32px; font-size: 21px; line-height: 1.5; color: var(--text); max-width: 40ch; }
.quien-alto .corta-linea { font-size: clamp(34px, 4.6vw, 56px); }
.corta-links { align-self: end; }

@media (min-width: 960px) {
  .inicio { min-height: calc(100svh - 73px); padding: 56px 0 48px; }
  .inicio h1 { font-size: clamp(60px, 6.2vw, 100px); line-height: 1.02; letter-spacing: -.035em; max-width: 19ch; }
  .inicio-pie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .inicio-pie { padding-top: 32px; align-items: start; }
  .inicio-bajada { grid-column: 1 / span 6; font-size: 27px; }
  .inicio-suscribir { grid-column: 8 / span 5; }
  .inicio .signup { max-width: none; }
  .inicio .signup input[type="email"] { height: 56px; font-size: 18px; }
  .inicio .signup .btn { min-height: 56px; padding: 0 24px; font-size: 17px; }
  .band-preguntas .preguntas { grid-column: 2 / span 10; }
  .quien-alto { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .quien-alto-texto { grid-column: 1 / span 6; }
  .quien-alto-foto { order: 0; grid-column: 7 / span 6; }
  .quien-alto-texto p { font-size: 23px; }
}

/* El contorno de foco: negro sobre blanco, porque el naranja #FF7C1F sobre blanco no llega al 3 a 1; naranja sobre negro */
:focus-visible { outline-color: var(--ink); }
.cta :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color: var(--acento); }

/* Detalles de terminación (12/11/2026, elegidos por Agustín en la maqueta: "esta bueno"). Salen de los videos de
   Kole Jain (skill diseno, "Terminación"); el texto de los links y de los botones lo prepara detalles.js */
:root { --acento-presionado: #f06d10; } /* el naranja del botón al presionarlo: negro sobre él da 6 a 1 */

/* El subrayado del logo en los links: se dibuja de izquierda a derecha al pasar el mouse y al salir sigue de largo */
.nav-link, .footer-nav a { text-decoration: none !important; }
.raya {
  --grosor: max(2px, .085em);
  background-image: linear-gradient(100deg, transparent .2em, var(--acento) .2em, var(--acento) calc(100% - .2em), transparent calc(100% - .2em));
  background-repeat: no-repeat; background-size: 0% var(--grosor); background-position: 100% 100%;
}
a:hover .raya, a:focus-visible .raya, .nav-link[aria-current] .raya { background-size: 100% var(--grosor); background-position: 0 100%; }

/* Los botones con sus estados: el texto sube y entra otra copia desde abajo; al presionar, se achica y se oscurece */
.rodillo { display: inline-grid; overflow: hidden; line-height: 1.3; }
.rodillo > span { grid-area: 1 / 1; }
.rodillo-b { transform: translateY(105%); }
.btn:hover .rodillo-a { transform: translateY(-105%); }
.btn:hover .rodillo-b { transform: none; }
.btn:active { transform: scale(.97); background: #000; }
.signup .btn:active { background: var(--acento-presionado); }
.btn-line:active { color: var(--paper); }

/* El menú queda arriba: se esconde cuando bajás y vuelve en cuanto subís (detalles.js) */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.site-header.escondido { transform: translateY(-100%); }

/* El mail a la vista, con un botón para copiarlo */
.mail-copia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.mail-dir {
  display: inline-block; padding: 12px 0;
  font-family: var(--ui); font-weight: 700; font-size: 16px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.mail-copiar {
  min-height: 44px; padding: 0 14px; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 4px;
}
.mail-copiar:hover { background: var(--sheet); }
.mail-copiar:active { transform: scale(.97); }
.mail-copiar.copiado { background: var(--ink); color: var(--paper); }

/* La etiqueta en la foto: sube con un rebote al pasar el mouse (en celular, al tocarla) */
.foto-caja { position: relative; }
.foto-caja img { display: block; width: 100%; height: 100%; object-fit: cover; }
.etiqueta {
  position: absolute; left: 7%; bottom: 9%;
  padding: 9px 14px 10px; border-radius: 4px; background: var(--ink); color: var(--paper);
  font-family: var(--ui); font-weight: 750; font-size: 17px; line-height: 1.2; white-space: nowrap;
  box-shadow: inset 0 -4px 0 var(--acento), 0 10px 24px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(14px); pointer-events: none;
}
.foto-caja:hover .etiqueta, .foto-caja.ver .etiqueta { opacity: 1; transform: translateY(0) rotate(-4deg); }

/* Desde dónde escribe, con la hora de ahí, en el pie */
.reloj { margin: 8px 0 0; font-family: var(--ui); font-size: 15px; line-height: 1.5; color: var(--night-muted); font-variant-numeric: tabular-nums; }
.reloj time { color: var(--night-text); font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .raya { transition: background-size .5s cubic-bezier(.2, .7, .2, 1); }
  .rodillo > span { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
  .btn { transition: background-color .15s ease-out, transform .12s ease-out; }
  .site-header { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .mail-copiar { transition: background-color .15s ease-out, transform .12s ease-out; }
  .etiqueta { transition: opacity .2s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); }
}

/* Arriba (12/11/2026): el título va envuelto para poner los dibujos de las ediciones a su derecha (al final del archivo).
   El folio de diario que iba arriba ("Buenos Aires, [fecha]" y el estado del newsletter) salió el mismo día, a pedido de Agustín */
.inicio-cuerpo { margin: auto 0; }
.inicio .inicio-cuerpo h1 { margin: 0; }

/* Ediciones (12/11/2026, las tapas de la maqueta v2 con un dibujo por tema, elegidas por Agustín). Cada edición es la
   tapa clara de un libro, con el dibujo de su tema en trazo negro y un acento naranja. Las tapas son grises claras y no
   negras, así no quedan dos bloques negros seguidos con la banda de "Llevalo a tu caso" */
.ediciones-cabeza { display: grid; gap: 8px; margin-bottom: 32px; }
.ediciones-cabeza h2 { margin: 0; }
.ediciones-cabeza p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--muted); }
.ediciones-cabeza strong { color: var(--ink); font-weight: 600; }
.ediciones-cabeza a { color: var(--ink); font-family: var(--ui); font-weight: 750; font-size: 15px; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; }
.tapas a { display: grid; gap: 16px; color: var(--ink); text-decoration: none; }
.tapa-libro {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px 24px 26px;
  background: var(--sheet); color: var(--ink); border-radius: 2px; box-shadow: inset 0 0 0 1px #e4e4e4;
}
.tapa-arriba { display: flex; justify-content: space-between; gap: 12px; font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--muted); }
.tapa-n { color: var(--ink); font-weight: 800; }
.tapa-dibujo { width: 168px; height: auto; margin: 0 auto; color: var(--ink); overflow: visible; }
.tapa-dibujo .dibujo-lleno { fill: var(--acento); }
.tapa-dibujo .dibujo-hueco { fill: var(--sheet); }
.tapa-dibujo .dibujo-trazo { stroke: var(--acento); }
.tapa-tit { font-family: var(--ui); font-weight: 750; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.tapa-pie { display: grid; gap: 4px; }
.tapa-fecha { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--muted); }
.tapa-bajada { font-size: 17px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .tapa-libro { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
  .tapa-dibujo { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
}
.tapas a:hover .tapa-libro { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #e4e4e4, 0 18px 30px -22px rgba(0, 0, 0, .55); }
.tapas a:hover .tapa-dibujo { transform: rotate(-4deg) scale(1.04); }

@media (min-width: 560px) and (max-width: 959px) {
  .tapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .ediciones-cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .ediciones-cabeza h2 { grid-column: 1 / span 6; }
  .ediciones-cabeza p { grid-column: 7 / span 6; }
  .tapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tapa-libro { aspect-ratio: 4 / 5; padding: 24px 26px 28px; }
  .tapa-dibujo { width: 64%; }
}

/* La biblioteca de ediciones (/ediciones/, 12/11/2026): el título de la página y lo que viene, arriba de las tapas */
.biblioteca { padding-bottom: 96px; }
.biblioteca-cabeza h1 { margin: 0; }
@media (min-width: 960px) {
  .biblioteca-cabeza h1 { grid-column: 1 / span 5; }
}

/* Llevalo a tu caso (12/11/2026, "Una más", elegida por Agustín): una fila por edición con el dibujo de su tapa, sobre la
   banda oscura (trazo claro y el hueco del color del fondo). "Una más" despliega la siguiente pregunta de la edición */
.dibujo { display: block; height: auto; overflow: visible; color: var(--night-text); }
.dibujo .dibujo-lleno { fill: var(--acento); }
.dibujo .dibujo-hueco { fill: var(--ink); }
.dibujo .dibujo-trazo { stroke: var(--acento); }
.sigs { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--night-rule); }
/* En celular, el dibujo arriba de la pregunta, para que el renglón no quede angosto */
.sig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0 24px; border-top: 1px solid var(--night-rule); }
.sig .dibujo { width: 52px; margin-top: 4px; }
.sig-de { margin: 0 0 8px; font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--acento); }
.sig-pregunta { margin: 0 0 14px; font-family: var(--texto); font-weight: 500; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; color: var(--night-text); max-width: 34ch; text-wrap: balance; }
.sig-mas {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; cursor: pointer;
  font-family: var(--ui); font-weight: 750; font-size: 14px; color: var(--night-text);
  background: transparent; border: 1px solid var(--night-rule); border-radius: 4px; transition: border-color .2s ease;
}
.sig-mas[hidden] { display: none; }
.sig-mas:hover { border-color: var(--night-text); }
.sig-signo { position: relative; width: 12px; height: 12px; }
.sig-signo::before, .sig-signo::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: var(--acento); transition: transform .3s ease; }
.sig-signo::after { transform: rotate(90deg); }
.sig-mas[aria-expanded="true"] .sig-signo::after { transform: rotate(0deg); }
.sig-extra { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--acento); max-width: 60ch; }
.sig-extra[hidden] { display: none; }
.sig-extra p { margin: 0 0 10px; font-size: 20px; line-height: 1.45; color: var(--night-text); }
.sig-extra .sig-pedido { padding: 12px 14px; background: rgba(255, 255, 255, .06); border-radius: 4px; font-family: var(--ui); font-size: 16px; }
.sig-copiar { min-height: 44px; margin: 0 0 12px; padding: 0 16px; cursor: pointer; font-family: var(--ui); font-weight: 750; font-size: 14px; color: var(--ink); background: var(--acento); border: 0; border-radius: 4px; }
.sig-copiar[hidden] { display: none; }
.sig-copiar:hover { background: var(--acento-hover); }
.sig-link { display: inline-flex; gap: 10px; padding: 10px 0; font-family: var(--ui); font-weight: 750; font-size: 14px; color: var(--night-text); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sig-link:hover .corta-flecha { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .sig-extra:not([hidden]) { animation: aparecer .45s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (min-width: 720px) {
  .sig { grid-template-columns: 80px minmax(0, 1fr); gap: 32px; }
  .sig .dibujo { width: 80px; }
}

/* Los dibujos de las ediciones al margen del título (12/11/2026, idea de Agustín). Chicos y en gris para no competir con
   el título (el dial de los temas "desvía la atención"). Sueltos en triángulo, cada uno con su inclinación y flotando
   despacio, desfasados entre sí ("no que estén uno arriba de otro y aburrido"). Con el mouse encima toman color, se
   inclinan un poco más y aparece la etiqueta con la edición, como la de la foto. Solo desde 960 px, donde está el margen */
.margen-ediciones { display: none; }
.margen-ediciones a { position: absolute; display: block; padding: 6px; color: var(--ink); text-decoration: none; }
.margen-ediciones a:nth-child(1) { left: 40%; top: 0; --giro: -14deg; --demora: 0s; }
.margen-ediciones a:nth-child(2) { right: 0; top: 150px; --giro: 12deg; --demora: -2.4s; }
.margen-ediciones a:nth-child(3) { left: 4%; top: 196px; --giro: -8deg; --demora: -4.3s; }
.flota { display: block; }
.dibujo-margen { display: block; width: 72px; height: auto; overflow: visible; transform: rotate(var(--giro, 0deg)); filter: grayscale(1) opacity(.6); }
.dibujo-margen .dibujo-lleno { fill: var(--acento); }
.dibujo-margen .dibujo-hueco { fill: var(--paper); }
.dibujo-margen .dibujo-trazo { stroke: var(--acento); }
.margen-ediciones a:hover .dibujo-margen, .margen-ediciones a:focus-visible .dibujo-margen { filter: none; transform: rotate(calc(var(--giro, 0deg) - 6deg)) scale(1.1); }
/* La etiqueta va debajo del dibujo y derecha, aunque el dibujo esté girado */
.margen-etiqueta {
  position: absolute; left: 50%; top: 100%; z-index: 2; padding: 7px 12px 8px; border-radius: 4px;
  background: var(--ink); color: var(--paper); box-shadow: inset 0 -3px 0 var(--acento);
  font-family: var(--ui); font-weight: 750; font-size: 14px; line-height: 1.2; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 0); pointer-events: none;
}
.margen-ediciones a:hover .margen-etiqueta, .margen-ediciones a:focus-visible .margen-etiqueta { opacity: 1; transform: translate(-50%, 6px); }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  .flota { animation: flotar 6.5s ease-in-out var(--demora, 0s) infinite; }
  .dibujo-margen { transition: filter .25s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .margen-etiqueta { transition: opacity .2s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
}
@media (min-width: 960px) {
  .inicio-cuerpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .inicio .inicio-cuerpo h1 { grid-column: 1 / span 10; grid-row: 1; }
  /* Ocupan de la columna 10 a la 12: el título llega hasta la 10, pero sus renglones terminan antes (el más largo, cerca de 960 px) */
  .margen-ediciones { display: block; position: relative; z-index: 1; height: 300px; grid-column: 10 / span 3; grid-row: 1; }
}
/* La etiqueta del dibujo de la derecha se alinea a su borde derecho, para no pasarse del margen */
.margen-ediciones a:nth-child(2) .margen-etiqueta { left: auto; right: 0; transform: none; }
.margen-ediciones a:nth-child(2):hover .margen-etiqueta, .margen-ediciones a:nth-child(2):focus-visible .margen-etiqueta { transform: translateY(6px); }

/* Llevalo a tu caso sin dibujos en compu (12/11/2026, pedido de Agustín): desde 960 px los dibujos ya están al margen del
   título y en las tapas, y a la tercera vez se repiten. En celular quedan, porque ahí no están arriba */
@media (min-width: 960px) {
  .sig { grid-template-columns: minmax(0, 1fr); }
  .sig .dibujo { display: none; }
}

/* Contado desde adentro (13/11/2026, "Lista con retrato", elegida por Agustín): la miniatura chica y en blanco y negro, como
   la foto de Agustín, y al lado quién es, de qué se trata y en qué programa. El color vuelve al pasar el mouse. Las
   miniaturas de YouTube a color traían sus propios rojos y azules y rompían el blanco, negro y naranja */
.retratos { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--ink); }
.retratos li { border-bottom: 1px solid var(--rule); }
.retratos a { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; color: var(--ink); text-decoration: none; }
.retrato { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-radius: 2px; }
.retrato img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.retratos a:hover .retrato img, .retratos a:focus-visible .retrato img { filter: none; transform: scale(1.05); }
.retrato .play { left: 8px; bottom: 8px; width: 28px; height: 28px; box-shadow: none; }
.retrato .play::before { margin-left: 2px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.retrato-texto { display: grid; gap: 6px; }
.retrato-quien { font-family: var(--ui); font-size: 16px; line-height: 1.35; color: var(--muted); }
.retrato-quien strong { color: var(--ink); font-weight: 750; }
.retrato-deque { font-family: var(--texto); font-size: 20px; line-height: 1.35; color: var(--ink); }
.retrato-prog { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .retrato img { transition: filter .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
}
/* En celular, la miniatura y el nombre en un renglón, y de qué se trata abajo, a todo el ancho */
@media (max-width: 559px) {
  .retratos a { grid-template-columns: 112px minmax(0, 1fr); gap: 10px 14px; }
  .retrato-texto { display: contents; }
  .retrato-quien { align-self: center; }
  .retrato-deque, .retrato-prog { grid-column: 1 / -1; }
}
@media (min-width: 560px) {
  .retratos a { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 960px) {
  .retratos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .retratos a { grid-template-columns: 180px minmax(0, 1fr); }
}

/* ¿Por dónde empiezo? (13/11/2026, elegida por Agustín): cinco perfiles y, al tocar uno, qué leer y qué escuchar primero.
   Sin raya arriba ni debajo de los botones: "esos divisores le sacan flow" (Agustín) */
.section.empiezo { border-top: 0; padding-top: 32px; }
.empiezo-cabeza { display: grid; gap: 8px; margin-bottom: 24px; }
.empiezo-cabeza h2 { margin: 0; }
.empiezo-cabeza p { margin: 0; font-size: 20px; color: var(--muted); }
.empiezo-perfiles { display: flex; flex-wrap: wrap; gap: 8px; }
.empiezo-perfiles button {
  min-height: 48px; padding: 0 18px; cursor: pointer;
  font-family: var(--ui); font-weight: 750; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px;
}
.empiezo-perfiles button:hover { background: var(--sheet); }
.empiezo-perfiles button:active { transform: scale(.97); }
.empiezo-perfiles button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--acento); }
.empiezo-vacio { margin: 28px 0 0; font-size: 19px; color: var(--muted); }
.empiezo-vacio[hidden] { display: none; }
.empiezo-res { display: grid; gap: 20px; padding-top: 36px; }
.empiezo-res[hidden] { display: none; }
.empiezo-texto p { margin: 0 0 12px; font-family: var(--texto); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; color: var(--ink); text-wrap: pretty; }
.empiezo-leer { display: inline-flex; gap: 10px; font-family: var(--ui); font-weight: 750; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.empiezo-leer:hover .corta-flecha { transform: translateX(4px); }
.empiezo-tapa { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; background: var(--sheet); border-radius: 2px; box-shadow: inset 0 0 0 1px #e4e4e4; color: var(--ink); text-decoration: none; }
.empiezo-tapa:hover { transform: translateY(-3px); }
.empiezo-tapa > span { display: grid; gap: 4px; }
.empiezo-tapa .otro-num { color: var(--muted); }
.empiezo-dibujo { width: 76px; height: auto; overflow: visible; color: var(--ink); }
.empiezo-dibujo .dibujo-lleno { fill: var(--acento); }
.empiezo-dibujo .dibujo-hueco { fill: var(--sheet); }
.empiezo-dibujo .dibujo-trazo { stroke: var(--acento); }
.empiezo-tit { font-family: var(--ui); font-weight: 750; font-size: 19px; line-height: 1.2; }
.empiezo-pod { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--ink); text-decoration: none; }
.empiezo-pod:hover .retrato img { filter: none; }
.empiezo-pod-texto { font-family: var(--texto); font-size: 17px; line-height: 1.4; color: var(--text); }
.empiezo-pod-texto strong { font-family: var(--ui); font-weight: 750; color: var(--ink); }
.empiezo-rotulo { display: block; margin-bottom: 2px; font-family: var(--ui); font-weight: 750; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .empiezo-perfiles button { transition: background-color .2s ease, color .2s ease, transform .12s ease-out; }
  .empiezo-res:not([hidden]) { animation: aparecer .5s cubic-bezier(.2, .7, .2, 1) both; }
  .empiezo-tapa { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
}
@media (min-width: 960px) {
  .section.empiezo { padding-top: 48px; }
  .empiezo-cabeza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .empiezo-cabeza h2 { grid-column: 1 / span 6; }
  .empiezo-cabeza p { grid-column: 7 / span 6; }
  .empiezo-res { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .empiezo-texto { grid-column: 1 / span 5; }
  .empiezo-tapa { grid-column: 6 / span 3; grid-template-columns: 1fr; justify-items: start; }
  .empiezo-pod { grid-column: 9 / span 4; grid-template-columns: 1fr; }
}

/* Títulos en Young Serif (14/11/2026, de la prueba con farhanhossain.com: "la tipografía me gustó mucho, aplicala").
   Todo lo que es título pasa a Young Serif, que tiene un solo peso (400) y casi no se le achica el espacio entre letras.
   Van con :root adelante para que pesen más que las reglas de arriba, que los ponían en Mulish 750 */
:root :is(h1, h2, h3, .brand, .tapa-tit, .issue-title, .empiezo-tit, .corta-linea, .corta-carta, .otro-frase, .otro-tit, .nombre-frase, .sig-pregunta, .empiezo-texto p, .bienvenida-titulo, .creo strong, .ed-titulo, .stat-num) {
  font-family: var(--titulo); font-weight: 400; letter-spacing: -.005em; font-style: normal;
}
.brand { font-size: 21px; }
:root h1 { line-height: 1.08; }
:root .inicio h1 { letter-spacing: -.012em; }
:root h2 { line-height: 1.15; }
:root .tapa-tit { line-height: 1.18; }
/* Young Serif es más ancha que Mulish: el cierre necesita más renglón para que "mail" no quede solo */
.cta h2 { max-width: 17ch; }
/* En Figtree, los botones bajan de 700-750 a 600 */
:root .btn, :root .empiezo-perfiles button { font-weight: 600; }

/* Más aire (14/11/2026, de la prueba con farhanhossain.com: "el aire también es interesante, suma mucho, agregalo").
   Lo compacto no venía del espacio entre secciones (96 px, casi el de él) sino de las rayas negras entre secciones y de
   los espacios chicos adentro de cada una. Las rayas pasan al 10% de negro, como las de él, y la cabecera va sin raya.
   Las secciones, de 80 a 144 px según el ancho (él usa clamp(64px, 10vw, 120px)), y 56 px bajo cada título */
:root .site-header { border-bottom-color: transparent; }
:root .site-header .wrap { min-height: 76px; }
:root .section, :root .band, :root .cta { border-top-color: rgba(0, 0, 0, .1); }
:root .inicio-pie { border-top: 1px solid rgba(0, 0, 0, .1); }
:root .retratos { border-top-width: 1px; border-top-color: rgba(0, 0, 0, .1); }
:root .corta-carta { border-top-width: 1px; }

:root .section, :root .band { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
:root .section.empiezo { padding-top: clamp(48px, 6vw, 96px); }
:root .cta .wrap { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
:root .ediciones-cabeza, :root .empiezo-cabeza { margin-bottom: 56px; gap: 16px; }
:root .preguntas h2 { margin-bottom: 56px; }
:root .recursos-portada h2 { margin-bottom: 56px; }
:root .nombre-rotulo { margin-bottom: 56px; }

:root .tapas { gap: 56px 40px; }
:root .tapas a { gap: 24px; }
:root .empiezo-perfiles { gap: 12px; }
:root .empiezo-res { padding-top: 56px; gap: 32px; }
:root .sig { padding: 40px 0 36px; }
:root .sig-pregunta { margin-bottom: 20px; }
:root .retratos a { padding: 32px 0; gap: 28px; }
:root .quien-alto-texto p { margin: 32px 0 40px; }
:root .site-footer { padding: 80px 0 48px; }
:root .footer-grid { padding-bottom: 48px; gap: 40px; }

/* El título de arriba respira más y el texto se abre un poco (de 1,55 a 1,65) */
:root body { line-height: 1.65; }
:root .inicio { padding-top: 72px; padding-bottom: 56px; }
:root .inicio > .wrap { gap: 72px; }
:root .inicio-pie { padding-top: 40px; }

@media (min-width: 960px) {
  :root { --gutter: 48px; --col-gap: 40px; }
  :root .band .wrap { padding: 120px 0; }
  :root .inicio-pie { padding-top: 48px; }
}

/* Naranja con tinta (14/11/2026, elegida por Agustín entre seis paletas): los links de texto sobre blanco van en la tinta
   naranja; el subrayado sigue en el naranja vivo. Las tapas grises llevan un borde al 7% de negro */
:root :is(.ediciones-cabeza a, .empiezo-leer, .corta-carta span:first-child, .corta-mail, .ed-body a, .carta-pagina p a, .legal a) { color: var(--tinta); }
/* El mail de la portada, en negro y con el subrayado en negro (14/11/2026, pedido de Agustín: en naranja "le roba
   atención" a "Por qué hago esto", que está arriba) */
:root .mail-dir { color: var(--ink); text-decoration-color: var(--ink); text-decoration-thickness: 1px; }
:root .tapa-libro, :root .empiezo-tapa { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.tapas a:hover .tapa-libro { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), 0 18px 30px -22px rgba(0, 0, 0, .55); }

/* Lo que aparece con el interés de quien mira (14/11/2026, pedido de Agustín: "otras no es cuestión de eliminarlas, sino
   de que aparezcan con el interés expreso del usuario [...] cuando hace hover"). La bajada de cada tapa, el programa de
   cada podcast, de qué edición es cada pregunta, el botón de copiar el mail y "Gratis y en español" quedan escondidos
   hasta que se pasa el mouse, se llega con el teclado o se toca el campo del mail. Guardan su lugar, así nada salta.
   En celular, donde no hay mouse, los textos se van (siguen para lectores de pantalla) y el botón de copiar queda */
.tapa-bajada, .retrato-prog, .sig-de, .mail-copiar, .inicio-suscribir .signup-note { opacity: 0; transform: translateY(4px); }
.tapas a:is(:hover, :focus-visible) .tapa-bajada,
.retratos a:is(:hover, :focus-visible) .retrato-prog,
.sig:is(:hover, :focus-within) .sig-de, .sig:has(.sig-mas[aria-expanded="true"]) .sig-de,
.mail-copia:is(:hover, :focus-within) .mail-copiar,
.inicio-suscribir:is(:hover, :focus-within) .signup-note { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .tapa-bajada, .retrato-prog, .sig-de, .mail-copiar, .inicio-suscribir .signup-note { transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
}
@media (hover: none) {
  .tapa-bajada, .retrato-prog, .sig-de { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mail-copiar { opacity: 1; transform: none; }
}