/* ═══════════════════════════════════════════════════
   DIGITAL VIEW — Blog

   Sólo usa los tokens de styles.css (--bg, --ink, --line, --lime…).
   Esos tokens ya se redefinen enteros dentro de body[data-theme="light"],
   así que todo lo de acá funciona en los dos temas sin escribir una
   sola regla de light: si acá aparece un color fijo, es un bug.
═══════════════════════════════════════════════════ */

/* UN SOLO EJE PARA TODO.
   `--ancho-lectura` lo define el contenedor y lo respetan todos los
   hijos directos: migas, artículo, índice. Antes cada bloque traía su
   propio max-width y las migas —que están afuera del <article>— se
   alineaban con el borde del wrap en vez de con el título: 244px de
   desfasaje en pantalla ancha, que es el margen raro que se veía. */
.blog-wrap{
  --ancho-lectura:760px;
  padding:0 var(--pad-x) 100px;
}
.blog-wrap > *{
  max-width:var(--ancho-lectura);
  margin-inline:auto;
}

/* ─────────── Migas ─────────── */
.migas{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-4);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:32px 0 0;
}
.migas a{color:var(--ink-4);}
.migas a:hover{color:var(--lime);}
.migas .sep{color:var(--ink-6);}
.migas [aria-current]{color:var(--ink-2);}

/* ─────────── Cabecera del artículo ───────────
   El ancho de `.art` lo pone `.blog-wrap > *`. El panel interno lo
   ensancha más abajo, porque sus tablas no entran en la columna de
   lectura. */
.art-head{
  padding:44px 0 34px;
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
}
.art-kicker{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lime);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.art-kicker .punto{
  width:5px;height:5px;border-radius:50%;
  background:var(--lime);
  display:inline-block;
}
.art h1{
  font-family:var(--f-display);
  font-weight:800;
  /* El mínimo baja a 27px y crece con el viewport: con 30px fijo, un
     título con una palabra larga ("departamento:") no entra en 332px de
     ancho útil y se sale de la pantalla. */
  font-size:clamp(27px, 7vw, 46px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:22px;
  text-wrap:balance;
}

/* Red de seguridad para los titulares: una palabra que no entra se corta
   en vez de empujar el ancho de la página entera. `text-wrap: balance`
   reparte las líneas pero NO evita el desborde de una sola palabra larga.

   `break-word` va siempre porque sólo actúa cuando no queda otra.
   `hyphens:auto` NO: combinado con `text-wrap:balance` corta palabras
   aunque sobre espacio —en desktop partía "departa-mento" al medio del
   título— así que vive sólo en el media query de mobile, que es donde
   hace falta. */
.art h1, .art-cuerpo h2, .art-cuerpo h3,
.blog-head h1, .blog-seccion h2, .post-t,
.cta-form h2, .cf-texto h2{
  overflow-wrap:break-word;
}
.art-bajada{
  font-size:clamp(16px, 2.2vw, 19px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:62ch;
}
.art-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:28px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-4);
}
.art-meta strong{color:var(--ink-3);font-weight:500;}

/* ─────────── Cuerpo ─────────── */
.art-cuerpo{
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.art-cuerpo > * + *{margin-top:24px;}
.art-cuerpo h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(21px, 3vw, 27px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-top:60px;
  padding-top:6px;
  text-wrap:balance;
}
.art-cuerpo h3{
  font-family:var(--f-sans);
  font-weight:600;
  font-size:17px;
  color:var(--ink);
  margin-top:38px;
}
.art-cuerpo strong{color:var(--ink);font-weight:600;}
.art-cuerpo a{
  color:var(--lime);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.art-cuerpo a:hover{color:var(--lime-d);}
.art-cuerpo ul,.art-cuerpo ol{padding-left:20px;}
.art-cuerpo li + li{margin-top:10px;}
.art-cuerpo li::marker{color:var(--ink-5);}

/* La cifra que abre el artículo */
.art-lede{
  border-left:2px solid var(--lime);
  padding:2px 0 2px 22px;
  font-size:clamp(18px, 2.6vw, 21px);
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
}

/* ─────────── Tablas de datos ───────────
   Envueltas en .tabla-scroll: en mobile la tabla scrollea sola y la
   página nunca scrollea horizontal. */
.tabla-scroll{
  overflow-x:auto;
  border:1px solid var(--line);
  background:var(--bg-2);
  -webkit-overflow-scrolling:touch;
}
.tabla-scroll table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--f-mono);
  font-size:13px;
  min-width:520px;
}
.tabla-scroll caption{
  caption-side:top;
  text-align:left;
  padding:16px 18px 12px;
  font-family:var(--f-sans);
  font-size:13.5px;
  color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
/* El caption arranca con el nombre de la tipología, que viene de la base
   en minúscula ("departamentos en Beccar"). Se corrige acá y no en el
   dato: en el cuerpo del texto la minúscula es la correcta. */
.tabla-scroll caption::first-letter{text-transform:uppercase;}
.tabla-scroll th,.tabla-scroll td{
  padding:11px 18px;
  text-align:right;
  white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
}
.tabla-scroll th:first-child,.tabla-scroll td:first-child{
  text-align:left;
  font-family:var(--f-sans);
}
.tabla-scroll thead th{
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-4);
  font-weight:600;
  background:var(--bg-3);
  position:sticky;
  top:0;
}
.tabla-scroll tbody tr:last-child td{border-bottom:0;}
.tabla-scroll td.destacado{color:var(--ink);font-weight:600;}
.tabla-scroll tbody tr:hover td{background:var(--bg-3);}
.tabla-nota{
  font-size:13px;
  color:var(--ink-4);
  line-height:1.5;
}

/* ─────────── Fila de cifras ─────────── */
.cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);
  background:var(--bg-2);
}
.cifra{
  padding:22px 20px;
  border-right:1px solid var(--line);
}
.cifra:last-child{border-right:0;}
.cifra-n{
  font-family:var(--f-mono);
  font-size:clamp(21px, 3vw, 26px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  display:block;
  line-height:1.15;
}
.cifra-l{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink-4);
}

/* ─────────── Aviso / metodología ─────────── */
.nota{
  border:1px solid var(--line);
  border-left:2px solid var(--ink-5);
  background:var(--bg-2);
  padding:22px 24px;
  font-size:14.5px;
  line-height:1.62;
  color:var(--ink-3);
}
.nota h3{margin-top:0 !important;font-size:14px;}
.nota > * + *{margin-top:14px;}

/* ─────────── CTA ─────────── */
.cta{
  margin-top:70px;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  padding:38px 34px;
}
.cta h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(21px, 3vw, 26px);
  line-height:1.18;
  color:var(--ink);
  margin:0 0 14px;
  text-wrap:balance;
}
.cta p{
  color:var(--ink-3);
  font-size:15.5px;
  line-height:1.6;
  margin:0 0 24px;
  max-width:56ch;
}
.cta-botones{display:flex;flex-wrap:wrap;gap:12px;}

/* ─────────── Pie del artículo ─────────── */
.art-pie{
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-4);
  line-height:1.6;
}
.art-pie a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;}
.art-pie a:hover{color:var(--lime);}

/* ─────────── Relacionados ─────────── */
.relacionados{margin-top:56px;}
.relacionados h2{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:18px;
}
.rel-lista{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.rel-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding:16px 20px;
  background:var(--bg);
  transition:background .15s ease;
}
.rel-item:hover{background:var(--bg-2);}
.rel-item .t{font-size:14.5px;color:var(--ink-2);}
.rel-item:hover .t{color:var(--ink);}
.rel-item .n{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--ink-4);
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════
   ÍNDICE DEL BLOG
═══════════════════════════════════════════════════ */
/* Sin max-width propio: hereda el de `.blog-wrap > *` para que el
   índice y los artículos compartan el mismo eje. Con 900 acá y 760 en
   el artículo, el ojo saltaba cada vez que se entraba a una nota. */
.blog-head{
  margin:0 auto;
  padding:52px 0 44px;
  border-bottom:1px solid var(--line);
}
.blog-head h1{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(32px, 6vw, 54px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:22px;
}
.blog-head p{
  font-size:clamp(16px, 2.2vw, 19px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:64ch;
}
.blog-lista{
  /* Mismo eje que el resto: lo pone `.blog-wrap > *`. */
}
.blog-seccion{margin-top:56px;}
.blog-seccion > h2{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-4);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.post{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 28px;
  align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid var(--line-soft);
}
.post:hover .post-t{color:var(--lime);}
.post-t{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(17px, 2.4vw, 21px);
  line-height:1.25;
  color:var(--ink);
  transition:color .15s ease;
  text-wrap:balance;
}
.post-d{
  grid-column:1 / -1;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-3);
  max-width:70ch;
}
.post-f{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-5);
  white-space:nowrap;
}

@media (max-width:720px){
  .blog-wrap{padding:0 20px 72px;}
  /* Acá sí: con 350px de ancho útil, una palabra larga no entra de
     ninguna forma y el guión es mejor que el desborde. */
  .art h1, .blog-head h1, .post-t, .cf-texto h2{hyphens:auto;}
  .cta{padding:28px 22px;}
  .cifra{border-right:0;border-bottom:1px solid var(--line);}
  .cifra:last-child{border-bottom:0;}
  .tabla-scroll th,.tabla-scroll td{padding:10px 14px;}
  .post{grid-template-columns:1fr;}
  .post-f{order:-1;}
}

/* El panel interno tiene tablas más anchas que un artículo: la columna
   de lectura de 760px las obligaría a scrollear siempre. */
.art-ancho{max-width:1060px;}
.art-ancho .art-bajada{max-width:70ch;}
.art-cuerpo code{
  font-family:var(--f-mono);
  font-size:.88em;
  background:var(--bg-3);
  border:1px solid var(--line);
  padding:1px 5px;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════
   FORMULARIO DENTRO DEL ARTÍCULO
   El que terminó de leer está en el punto más alto de intención que va
   a tener. Mandarlo a la home a buscar el form pierde a la mayoría.
═══════════════════════════════════════════════════ */
.cta-form{
  margin-top:72px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
}
.cf-texto{padding:36px 34px;border-right:1px solid var(--line);}
.cf-texto h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(21px,3vw,27px);
  line-height:1.15;
  color:var(--ink);
  margin:0 0 14px;
  text-wrap:balance;
}
.cf-texto p{
  color:var(--ink-3);
  font-size:15px;
  line-height:1.6;
  margin:0 0 14px;
}
.cf-nota{font-size:13px !important;color:var(--ink-4) !important;margin-bottom:0 !important;}

.cf-form{padding:32px 34px;display:flex;flex-direction:column;gap:16px;}
.cf-campo{display:flex;flex-direction:column;gap:6px;}
.cf-campo label{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-4);
}
.cf-campo input,.cf-campo textarea{
  font-family:var(--f-sans);
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line-strong);
  padding:11px 13px;
  width:100%;
  resize:vertical;
  transition:border-color .15s ease;
}
.cf-campo input::placeholder,.cf-campo textarea::placeholder{color:var(--ink-5);}
.cf-campo input:focus,.cf-campo textarea:focus{
  outline:none;
  border-color:var(--lime);
}
/* Honeypot: invisible para personas, tentador para bots. No usa
   display:none porque algunos bots lo detectan y lo saltean. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-error{
  font-size:13.5px;
  color:var(--live-d, #B8E600);
  line-height:1.5;
  margin:0;
}
body[data-theme="light"] .cf-error{color:#9A6B00;}
.cf-ok{
  font-size:15px;
  color:var(--ink);
  line-height:1.55;
  margin:0;
  font-weight:500;
}

@media (max-width:820px){
  .cta-form{grid-template-columns:1fr;}
  .cf-texto{border-right:0;border-bottom:1px solid var(--line);padding:28px 22px;}
  .cf-form{padding:26px 22px;}
}