/* ============================================================================
   blog.css — la hoja del blog y de las paginas estaticas de TurisLink.

   REESCRITA DE CERO el 2026-08-18. Pedido de Ricardo: «que es rediseño? hacerlo
   de nuevo, entiende eso. no quiero ese diseño actual, revisa como hacen
   empresas profesionales». Lo anterior se parchaba; esto se rehizo.

   CERO JavaScript, a proposito. Incluido el menu del telefono, que usa
   <details>/<summary> — HTML nativo, sin una linea de script.

   Los tokens salen de la portada. No se invento una paleta nueva.
   ============================================================================ */

@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/blog/fuentes/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/blog/fuentes/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/blog/fuentes/poppins-700.woff2') format('woff2'); }

:root {
  /* 🔴 TOKENS COPIADOS DE LA PORTADA (`web/index.html`), no del CRM.
     Corrección del 2026-08-18: primero los tomé de `app/src/lib/tokens.css` y saqué el modo oscuro
     citando su regla «la marca es clara». **Ese archivo gobierna la APLICACIÓN, no la web pública.**
     La portada —que es la vecina del blog— SÍ tiene modo oscuro, con esta paleta. El blog usa la
     de la portada para que sean el mismo sitio. */
  --bg:#FCFCFB; --bg2:#F4F5F3; --card:#ffffff;
  --line:#E3E5E2; --line2:#CBD2CD;
  --text:#141614; --muted:#4A514C; --suave:#68706A;
  --g:#1EB47E; --gsoft:#ECF8F3; --gtext:#12805A;
  --o:#F0721E; --osoft:#FDF0E7;
  /* La portada trae #B45311, que da 4,49:1 — un pelo POR DEBAJO del mínimo. El CRM ya lo había
     corregido a #A94D0E (5,01:1) y acá se usa el corregido. */
  --otext:#A94D0E;
  --btn:#0B1F17; --btn-text:#F1F4F2;
  /* El velo del hero: TOKEN y no un color fijo. En claro aclara la foto para que el texto oscuro se
     lea; en oscuro la OSCURECE para que se lea el texto claro. Con un valor fijo, el modo oscuro
     habría quedado con velo blanco y letras blancas encima. */
  --velo1:rgba(252,252,251,.94); --velo2:rgba(252,252,251,.90);
  --velo3:rgba(252,252,251,.82);
  --display:'Poppins', system-ui, sans-serif;
  --body:'Poppins', system-ui, -apple-system, sans-serif;
  --r-card:14px; --r-fila:11px; --r-pastilla:999px;
  --sombra:0 1px 2px rgba(20,22,20,.04), 0 18px 44px -12px rgba(20,22,20,.14);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --barra:64px;
}

/* ── MODO OSCURO — los tokens son los de la portada, verbatim ────────────────
   `web/index.html` los declara así, y el blog los repite para que el sitio entero cambie junto.
   Los tres que la portada no define (`--line2`, `--suave`, `--btn`) se agregaron MIDIENDO su
   contraste sobre el fondo real: suave 6,62:1 · muted 8,92:1 · gtext 8,68:1 · otext 6,33:1. */
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#111312; --bg2:#171A18; --card:#1B1F1D;
    --line:#292E2A; --line2:#3A413C;
    --text:#F1F4F2; --muted:#AEB5B0; --suave:#949C96;
    --gtext:#38C795; --otext:#F0721E;
    --gsoft:#152C26; --osoft:#2B1F17;
    /* El botón oscuro sería invisible sobre fondo oscuro: se invierte. */
    --btn:#F1F4F2; --btn-text:#111312;
    --velo1:rgba(15,17,16,.90); --velo2:rgba(15,17,16,.84);
    --velo3:rgba(15,17,16,.72);
    --sombra:0 18px 44px -12px rgba(0,0,0,.6);
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Con la barra pegajosa, un ancla dejaria el titulo TAPADO debajo de la barra.
   `scroll-margin-top` es lo que lo evita, y va en el elemento al que se salta. */
[id] { scroll-margin-top: calc(var(--barra) + 18px); }
body {
  background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }

/* 🔴 AIRE BAJO LA BARRA PARA LAS PÁGINAS QUE NO SON DEL BLOG.
   Lo cazó la revisión independiente y se verificó en el navegador: `/precios/` y la
   landing de Costa Rica tenían **0 px** entre el borde de la barra y su título —
   el título arrancaba pegado. Las páginas del blog traen su propio espacio
   (`.cabecera`, `.miga`, `.hero`), pero esas dos ponen el `<h1>` directo dentro de
   `<main>` y dependían de un margen que existía en la hoja anterior.
   Se le da el aire al <main> de esas dos y NO a un `*`, para no empujar las del
   blog, que ya lo tienen. */
main.ancho-precios, main.ancho { padding-top:44px; }

/* ── El ancho ─────────────────────────────────────────────────────────────── */
.ancho { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
@media (min-width:720px) { .ancho { padding:0 32px; } }
.lectura { width:100%; max-width:68ch; }

/* ════════════════════════════════════════════════════════════════════════════
   LA BARRA SUPERIOR — una sola, igual en TODAS las paginas.

   🔴 Esto es lo que Ricardo pidio y no estaba: antes cada pagina tenia su
   cabecera y ninguna era la barra del sitio. Ahora es PEGAJOSA (se queda arriba
   al bajar, como la portada), tiene el mismo alto en todas, y su CTA es el mismo.
   ════════════════════════════════════════════════════════════════════════════ */
.barra {
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
/* 🔴 FONDO SOLIDO, Y ES UNA DECISION CON DATO: de los seis referentes medidos, el
   unico con desenfoque es Linear, y su barra vive sobre fotos oscuras. Aca la
   barra convive con el verde #1EB47E del boton; el desenfoque lo ensucia y baja
   su contraste. Vercel —el mas parecido a este caso— la tiene solida a 64 px.
   Menos codigo, cero riesgo de jank en iOS, y nada que degradar. */
.barra-fila { height:var(--barra); display:flex; align-items:center; gap:16px; }
.marca {
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.02em; color:var(--text); text-decoration:none; white-space:nowrap;
}
.marca span { color:var(--gtext); }

/* Los enlaces: al medio en escritorio, escondidos en el telefono */
.barra-enlaces { display:none; }
@media (min-width:860px) {
  .barra-enlaces { display:flex; align-items:center; gap:28px; margin-left:38px; }
}
.barra-enlaces a {
  font-size:.9375rem; color:var(--muted); text-decoration:none;
  padding:6px 0; position:relative;
  transition:color 160ms var(--ease);
}
.barra-enlaces a:hover { color:var(--text); }
/* La pagina actual se marca con una linea abajo, no con negrita: la negrita
   cambia el ancho del texto y mueve los otros enlaces. */
.barra-enlaces a[aria-current="page"] { color:var(--text); }
.barra-enlaces a[aria-current="page"]::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--g); border-radius:2px;
}
.barra-acciones { margin-left:auto; display:flex; align-items:center; gap:10px; }
.boton {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--g); color:#0B1F17;      /* letra oscura FIJA: --btn se invierte en oscuro */
  font-size:.9063rem; font-weight:500; padding:9px 16px;
  border-radius:10px; text-decoration:none; white-space:nowrap; border:0;
  transition:background-color 160ms var(--ease), transform 160ms var(--ease);
}
.boton:hover { background:#19a271; }
.boton:active { transform:scale(.97); }
.boton-plano {
  background:transparent; color:var(--text); border:1px solid var(--line);
}
.boton-plano:hover { background:var(--bg2); border-color:var(--muted); }

/* ── El menu del telefono, SIN JavaScript ──────────────────────────────────
   <details> abre y cierra solo. Es la unica forma honesta de tener un menu
   desplegable en un sitio que decidio no cargar JavaScript. */
.menu-movil { position:relative; }
@media (min-width:860px) { .menu-movil { display:none; } }
.menu-movil summary {
  list-style:none; cursor:pointer;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background-color 160ms var(--ease);
}
.menu-movil summary::-webkit-details-marker { display:none; }
.menu-movil summary:hover { background:var(--bg2); }
/* 🔴 ACA HABIA UNA REGLA `.menu-movil summary span { display:none }` QUE BORRABA
   LAS TRES RAYAS. La escribi para matar el triangulito que algunos navegadores
   ponen en <summary>, pero `summary span` (clase + 2 elementos) le gana por
   especificidad a `.rayas` (una clase), asi que el boton salia VACIO — y encima
   el fondo y el borde si se aplicaban, o sea que a ojo parecia un boton hecho.
   Es la SEGUNDA vez en esta tanda que la especificidad me muerde igual: la
   primera fue `.cta-nav` perdiendo contra `.nav a`. El marcador ya se apaga con
   `list-style:none` + `::-webkit-details-marker`, asi que la regla no hacia falta.
   Las tres rayas se dibujan con bordes, no con un icono ni un emoji. */
.rayas { width:17px; height:11px; border-top:1.5px solid var(--text); border-bottom:1.5px solid var(--text); position:relative; }
.rayas::after { content:''; position:absolute; left:0; right:0; top:50%; margin-top:-.75px; height:1.5px; background:var(--text); }
.menu-movil[open] summary { background:var(--bg2); }
.menu-panel {
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:206px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(20,22,20,.04), 0 18px 44px -12px rgba(20,22,20,.16);
  padding:8px; display:grid; gap:2px;
}
.menu-panel a {
  display:block; padding:10px 12px; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:.9375rem;
  transition:background-color 140ms var(--ease);
}
.menu-panel a:hover { background:var(--bg2); }
.menu-panel a[aria-current="page"] { color:var(--gtext); font-weight:500; }
.menu-panel hr { border:0; border-top:1px solid var(--line); margin:6px 4px; }

a:focus-visible, summary:focus-visible {
  outline:2px solid var(--gtext); outline-offset:3px; border-radius:var(--r-chip);
}


/* ════════════════════════════════════════════════════════════════════════════
   EL BLOG — «TABLERO». Elegida por Ricardo el 2026-08-18 entre dos propuestas.

   LA IDEA: el blog con la MISMA CARA que el CRM. Tarjetas blancas de borde fino,
   radio 14, filas agrupadas y números tabulares. Quien ya usa TurisLink reconoce
   la casa; el blog deja de leerse como una pieza pegada de otro sitio.

   🔴 DE DÓNDE SALE CADA DECISIÓN (nada es a ojo):
   · Los tokens están copiados de `app/src/lib/tokens.css`. Ningún color ni radio
     inventado. Antes el blog tenía paleta y radios propios.
   · La maqueta del artículo (texto ~700px + índice pegajoso al costado) sale de
     MEDIR referentes con navegador el 2026-08-18: supabase.com 647px de texto con
     índice de 276px · attio.com 656px con columna de 348px · linear.app 624px.
   · El hero difuminado del artículo lo pidió Ricardo tomándolo de la propuesta 2,
     y a su vez viene del hero fotográfico de la landing (turislink.com).

   🔴 LO QUE CORRIGIÓ LA AUDITORÍA (GPT-5.6 por la Compuerta) Y ESTÁ APLICADO:
   El color de esta marca es SEMÁNTICO: verde = plata que entró / va bien, naranja
   = esto te necesita. Las dos propuestas coloreaban cosas que no son ninguna de
   las dos. Se neutralizaron:
     · los puntos de color por tema (una categoría NO es un estado) → van sin punto
     · «hace 1 día» en naranja fingía una alerta → se quitó (y en HTML estático un
       texto relativo envejece mal: queda la fecha absoluta)
     · los metadatos en verde → gris
   Lo que SÍ queda en verde, y con prueba: el botón principal y los enlaces. El
   demo usa «Ver todas →» en verde y la landing tiene el botón «Ver TurisLink con
   mi operación» en verde sólido. La auditoría marcó eso como violación; se
   descartó ese punto porque el producto real lo hace.
   ════════════════════════════════════════════════════════════════════════════ */

/* El contenedor: el mismo ancho que usa el CRM para su contenido. */
.ancho-blog { width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }
@media (min-width:720px) { .ancho-blog { padding:0 32px; } }

.eti {
  font-family:var(--display); font-size:.71875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave);
}

/* ── La cabecera del índice ───────────────────────────────────────────────── */
.cabecera { padding:52px 0 0; display:grid; gap:28px; }
@media (min-width:1000px) { .cabecera { grid-template-columns:1fr 372px; gap:56px; align-items:end; } }
.cabecera h1 {
  font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.04;
  margin-top:12px; text-wrap:balance; font-size:clamp(2.25rem, 4.4vw, 3rem);
}
.cabecera-bajada { color:var(--muted); font-size:1.0625rem; line-height:1.6; margin-top:14px; max-width:50ch; }

/* Las dos fichas de estado. Son datos FACTUALES: cuántos hay y cuál fue el último.
   No hay ninguna métrica inventada, que es lo que marcó la auditoría. */
.fichas { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ficha {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px;
}
.ficha-n {
  font-family:var(--display); font-size:1.75rem; font-weight:700; letter-spacing:-.03em;
  margin-top:6px; line-height:1; font-variant-numeric:tabular-nums;
}
.ficha-s { font-size:.71875rem; color:var(--suave); margin-top:5px; }

/* ── El destacado ─────────────────────────────────────────────────────────── */
.destacado {
  margin-top:40px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; display:grid;
  transition:border-color 200ms var(--ease);
}
.destacado:hover { border-color:var(--line2); }
@media (min-width:900px) { .destacado { grid-template-columns:1fr 1fr; align-items:stretch; } }
.destacado-foto { display:block; overflow:hidden; }
/* `aspect-ratio` con `height:auto`: la foto es vertical (1000x1500) y con `height:100%`
   dentro de una grilla toma su proporción natural y estira la tarjeta a ~900px. Medido. */
.destacado-foto img {
  display:block; width:100%; height:auto; aspect-ratio:5/4;
  object-fit:cover; object-position:50% 40%; transition:transform 600ms var(--ease);
}
.destacado:hover .destacado-foto img { transform:scale(1.015); }
.destacado-texto { padding:28px; }
@media (min-width:900px) { .destacado-texto { padding:40px; display:flex; flex-direction:column; justify-content:center; } }
.destacado h2 {
  font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.1;
  margin-top:12px; text-wrap:balance; font-size:clamp(1.5rem, 2.6vw, 2rem);
}
.destacado h2 a { color:inherit; text-decoration:none; }
.destacado:hover h2 a { color:var(--gtext); }
.destacado-bajada { color:var(--muted); font-size:1rem; line-height:1.6; margin-top:12px; }
.leer {
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font-family:var(--display); font-weight:600; font-size:.875rem;
  color:var(--gtext); text-decoration:none;
}
.leer svg { width:15px; height:15px; transition:transform 180ms var(--ease); }
.destacado:hover .leer svg, .leer:hover svg { transform:translateX(3px); }

/* ── El catálogo: CUADROS con filtro por categoría ─────────────────────────
   Pedido de Ricardo (2026-08-18): «en todos los artículos, podemos hacerlos como
   cuadritos, con filtros de categoría».

   🔴 EL FILTRO FUNCIONA DE VERDAD Y NO USA UNA LÍNEA DE JAVASCRIPT.
   Son `<input type="radio">` escondidos —pero NO con `display:none`, que los
   sacaría del recorrido del teclado— y el selector de hermano general (`~`) apaga
   los cuadros que no son del tema elegido. Es el mismo mecanismo con el que el
   menú del teléfono se abre sin script.

   Por qué esto SÍ y no las etiquetas que el Tribunal había frenado: aquel reparo
   era contra *páginas de categoría* con un solo artículo adentro — abrís un enlace
   y aterrizás en una página casi vacía. Acá no se va a ningún lado: el filtro
   ordena lo que ya está a la vista, y el contador dice de antemano cuántos hay.
   Al llegar a 15 artículos, cada tema puede además tener su página propia sin
   tocar nada de esto.

   ⚠️ Y ESCALA SOLA: un artículo nuevo es un cuadro más con su clase de tema. Si el
   tema ya existe, no hay que tocar el filtro. */
.catalogo { margin-top:40px; }
.catalogo-cabezal {
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline;
  padding-bottom:14px; border-bottom:1px solid var(--line2);
}
.catalogo-cabezal h2 { font-family:var(--display); font-size:1rem; font-weight:600; }
.catalogo-cabezal .eti { margin-left:auto; }

/* Los radios: invisibles pero NAVEGABLES con el teclado. `display:none` los
   sacaría del tabulador y el filtro dejaría de existir para quien no usa mouse. */
.f-radio {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.filtros { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.filtros label {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pastilla);
  padding:7px 14px; font-family:var(--display); font-size:.8125rem; font-weight:600;
  color:var(--muted); transition:border-color 160ms var(--ease), color 160ms var(--ease),
    background 160ms var(--ease);
}
.filtros label:hover { border-color:var(--line2); color:var(--text); }
.filtros label span {
  font-size:.6875rem; font-weight:600; color:var(--suave); font-variant-numeric:tabular-nums;
}
/* El estado elegido: verde suave. Acá el verde SÍ significa «éste está activo»,
   que es el mismo uso que la barra superior le da a la sección actual. */
#f-todos:checked        ~ .filtros label[for="f-todos"],
#f-cotizaciones:checked ~ .filtros label[for="f-cotizaciones"],
#f-cobros:checked       ~ .filtros label[for="f-cobros"],
#f-herramientas:checked ~ .filtros label[for="f-herramientas"] {
  background:var(--gsoft); border-color:var(--g); color:var(--gtext);
}
#f-todos:checked        ~ .filtros label[for="f-todos"] span,
#f-cotizaciones:checked ~ .filtros label[for="f-cotizaciones"] span,
#f-cobros:checked       ~ .filtros label[for="f-cobros"] span,
#f-herramientas:checked ~ .filtros label[for="f-herramientas"] span { color:var(--gtext); }
/* El foco del teclado tiene que verse en la PASTILLA, no en el radio escondido. */
#f-todos:focus-visible        ~ .filtros label[for="f-todos"],
#f-cotizaciones:focus-visible ~ .filtros label[for="f-cotizaciones"],
#f-cobros:focus-visible       ~ .filtros label[for="f-cobros"],
#f-herramientas:focus-visible ~ .filtros label[for="f-herramientas"] {
  outline:2px solid var(--gtext); outline-offset:3px;
}

.cuadros { display:grid; gap:14px; margin-top:18px; }
@media (min-width:720px) { .cuadros { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } }
.cuadro {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  transition:border-color 160ms var(--ease);
}
.cuadro:hover { border-color:var(--line2); }
.cuadro > a {
  display:flex; flex-direction:column; gap:8px; height:100%;
  padding:18px 20px 20px; text-decoration:none; color:inherit;
}
.cuadro-tema { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.cuadro h3 {
  font-family:var(--display); font-size:1.0625rem; font-weight:600; letter-spacing:-.015em;
  line-height:1.32; text-wrap:balance; transition:color 160ms var(--ease);
}
.cuadro > a:hover h3 { color:var(--gtext); }
.cuadro p { color:var(--muted); font-size:.8125rem; line-height:1.55; }
.cuadro-pie {
  margin-top:auto; padding-top:12px; display:flex; gap:10px; align-items:baseline;
  font-variant-numeric:tabular-nums;
}

/* EL FILTRO, en una línea por tema. */
#f-cotizaciones:checked ~ .cuadros .cuadro:not(.t-cotizaciones),
#f-cobros:checked       ~ .cuadros .cuadro:not(.t-cobros),
#f-herramientas:checked ~ .cuadros .cuadro:not(.t-herramientas) { display:none; }

/* ── El cierre ────────────────────────────────────────────────────────────── */
.cierre {
  margin-top:24px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:24px; display:grid; gap:16px;
}
@media (min-width:860px) { .cierre { grid-template-columns:1fr auto; align-items:center; gap:40px; } }
.cierre h2 { font-family:var(--display); font-size:1.125rem; font-weight:600; letter-spacing:-.015em; }
.cierre p { color:var(--muted); font-size:.875rem; line-height:1.55; margin-top:5px; max-width:60ch; }
.cierre-acciones { display:flex; flex-wrap:wrap; gap:10px; }


/* ════════════════════════════════════════════════════════════════════════════
   EL ARTÍCULO — hero difuminado + dos columnas.

   El hero lo pidió Ricardo tomándolo de la propuesta 2: la foto detrás y un velo
   que la funde con el fondo de la página, con el título encima. Es el mismo gesto
   de la portada de turislink.com.

   ⚠️ EL VELO NO ES DECORACIÓN, ES LEGIBILIDAD: el texto es casi-negro sobre una
   foto clara, y sin el velo el contraste depende de qué parte de la foto quede
   detrás de cada letra. Va de .94 arriba a .82 abajo y cierra en el fondo sólido.
   ════════════════════════════════════════════════════════════════════════════ */
.hero { position:relative; overflow:hidden; background:var(--bg2); }
.hero > img {
  display:block; width:100%; height:340px; object-fit:cover; object-position:50% 42%;
}
@media (min-width:900px) { .hero > img { height:400px; } }
.hero-velo {
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--velo1) 0%, var(--velo2) 38%, var(--velo3) 66%, var(--bg) 100%);
}
.hero-texto { position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:22px; }
.hero-texto .ancho-blog { width:100%; }
.hero h1 {
  font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.06;
  margin-top:12px; text-wrap:balance; max-width:19ch;
  font-size:clamp(1.875rem, 3.8vw, 2.75rem);
}
.hero-meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; }
.hero-bajada { color:var(--muted); font-size:1.0625rem; line-height:1.55; margin-top:14px; max-width:56ch; }
/* Sin foto: el hero se cae y queda un cabezal normal sobre el fondo de página. */
.cabezal-sin-foto { padding:40px 0 0; }
.cabezal-sin-foto h1 {
  font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.06;
  margin-top:12px; text-wrap:balance; max-width:19ch; font-size:clamp(1.875rem, 3.8vw, 2.75rem);
}

.miga { padding-top:26px; }
.miga a { color:var(--suave); text-decoration:none; font-family:var(--display);
  font-size:.71875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.miga a:hover { color:var(--gtext); }
.miga span { color:var(--suave); font-family:var(--display);
  font-size:.71875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

.columnas { margin-top:34px; display:grid; gap:34px; padding-bottom:20px; }
@media (min-width:1080px) {
  /* Índice flotante a la IZQUIERDA y texto a la derecha (Ricardo, 2026-08-18:
     «el índice mejor a la izquierda»). Supabase y Attio lo ponen a la derecha,
     pero es preferencia del dueño y el mecanismo es el mismo. */
  .columnas { grid-template-columns:292px minmax(0,1fr); gap:48px; align-items:start; }
}
.cuerpo { min-width:0; max-width:700px; }

/* El índice flotante */
.indice { display:none; }
@media (min-width:1080px) {
  .indice { display:grid; gap:16px; position:sticky; top:calc(var(--barra) + 22px); }
}
.indice-caja { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; }
.indice-caja ol { list-style:none; margin-top:12px; display:grid; gap:10px; }
.indice-caja a {
  display:block; font-size:.875rem; line-height:1.4; color:var(--muted); text-decoration:none;
  border-left:2px solid var(--line); padding-left:11px;
  transition:color 160ms var(--ease), border-color 160ms var(--ease);
}
.indice-caja a:hover { color:var(--text); border-left-color:var(--g); }
.promo { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; }
.promo p { color:var(--muted); font-size:.8125rem; line-height:1.55; margin-top:8px; }
.promo .boton { display:block; text-align:center; margin-top:12px; }

/* ── La prosa ─────────────────────────────────────────────────────────────── */
.prosa { font-size:1.0625rem; line-height:1.72; }
.prosa > * + * { margin-top:1.15rem; }
.prosa h2 {
  font-family:var(--display); font-weight:600; font-size:1.375rem; letter-spacing:-.02em;
  line-height:1.25; text-wrap:balance;
  /* `atelier`: un título lleva >=1.5x más aire arriba que abajo. */
  margin-top:2.6rem; margin-bottom:-.3rem;
}
.prosa h3 {
  font-family:var(--display); font-weight:600; font-size:1.0625rem; letter-spacing:-.01em;
  line-height:1.35; margin-top:1.9rem; margin-bottom:-.45rem;
}
.prosa p, .prosa ul, .prosa ol { text-wrap:pretty; }
.prosa ul, .prosa ol { padding-left:1.35rem; }
.prosa li + li { margin-top:.4rem; }
.prosa strong { font-weight:600; }
.prosa a { color:var(--gtext); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prosa a:hover { text-decoration-thickness:2px; }
.aparte {
  background:var(--gsoft); border:1px solid var(--line); border-radius:var(--r-fila);
  padding:16px 18px; margin-top:1.7rem; font-size:1rem; line-height:1.6;
}
.aparte > * + * { margin-top:.6rem; }
.prosa table { width:100%; border-collapse:collapse; font-size:.9375rem; margin-top:1.8rem; }
.prosa th, .prosa td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.prosa th {
  font-family:var(--display); font-weight:600; font-size:.71875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--suave); border-bottom:1px solid var(--line2);
}
.prosa tr:last-child td { border-bottom:0; }

/* El CTA del final: solo en teléfono, porque en escritorio vive en la columna. */
.cta-articulo { margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
@media (min-width:1080px) { .cta-articulo { display:none; } }
.cta-articulo p { color:var(--muted); font-size:.9375rem; line-height:1.55; }
.cta-articulo .boton { margin-top:14px; }

/* ── También te puede servir ──────────────────────────────────────────────────
   Enlaces internos de verdad al final del artículo. La auditoría lo puso como el
   mecanismo PRINCIPAL del SEO interno de un sitio estático: más que cualquier
   etiqueta del JSON-LD, lo que pesa es que los artículos se enlacen entre sí. */
.servir { margin-top:44px; }
.servir h2 {
  font-family:var(--display); font-size:.71875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--suave); padding-bottom:12px; border-bottom:1px solid var(--line2);
}
.servir-lista { list-style:none; display:grid; gap:12px; margin-top:16px; }
@media (min-width:720px) { .servir-lista { grid-template-columns:1fr 1fr; } }
.servir-lista a {
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:16px 18px; text-decoration:none; color:inherit;
  transition:border-color 160ms var(--ease);
}
.servir-lista a:hover { border-color:var(--line2); }
.servir-lista h3 {
  font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.01em; line-height:1.3;
  margin-top:6px; transition:color 160ms var(--ease);
}
.servir-lista a:hover h3 { color:var(--gtext); }


/* ── El pie ──────────────────────────────────────────────────────────────── */
.pie { border-top:1px solid var(--line); margin-top:88px; padding:34px 0 48px; color:var(--muted); font-size:.875rem; }
.pie-fila { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.pie a { color:var(--muted); text-decoration:none; transition:color 160ms var(--ease); }
.pie a:hover { color:var(--text); }
.pie-enlaces { display:flex; flex-wrap:wrap; gap:10px 20px; margin-left:auto; }


@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}