/* IASOLUCIONA · Blog — misma marca que la landing (azul medianoche + oro, Newsreader + Hanken Grotesk),
   pero con papel claro para leer cómodo. Todo el texto va en el HTML (sin JavaScript): lo leen Google y las IA. */

:root {
  --navy: #0F1B2D;
  --paper: #F6F7F9;
  --ink: #142033;
  --ink-2: #44506A;
  --line: #DCE1E8;
  --gold: #D9B45A;
  --gold-ink: #8A6416;   /* oro oscuro para enlaces sobre papel (contraste AA) */
  --on-gold: #0B1424;
  --r: 8px;
  --gut: clamp(20px, 4vw, 56px);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px; }

/* Cabecera y pie en azul de marca */
.top { background: var(--navy); color: #F2F4F8; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gut); }
.top img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.top nav { display: flex; gap: 26px; font-size: .98rem; font-weight: 500; }
.top nav a { color: #F2F4F8; text-decoration: none; }
.top nav a.cta { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.top nav a[aria-current="page"] { color: var(--gold); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut); }
.crumbs { font-size: .9rem; color: var(--ink-2); padding-top: 34px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 8px; }

/* ---------- Artículo ---------- */
.article { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut) clamp(72px, 9vw, 120px); }
.article header { padding: 22px 0 8px; }
.article h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.meta { margin-top: 16px; color: var(--ink-2); font-size: .95rem; }
.answer { margin: 34px 0 10px; padding: 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 1.12em; line-height: 1.6; }
.answer p { margin: 0; }
.article h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; margin: 2.2em 0 .5em; text-wrap: balance; }
.article h3 { font-family: var(--sans); font-weight: 600; font-size: 1.12em; margin: 1.8em 0 .4em; }
.article p, .article ul, .article ol { margin: 0 0 1.05em; }
.article li { margin-bottom: .45em; }
.article strong { font-weight: 600; color: var(--ink); }

/* Tablas de precios y comparativas */
.tabla { width: 100%; border-collapse: collapse; margin: 1.4em 0 1.6em; font-size: .97em; background: #fff; border-radius: var(--r); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla th { font-family: var(--sans); font-weight: 600; background: #EEF1F5; color: var(--ink); }
.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; font-family: var(--serif); font-size: 1.08em; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla-wrap { overflow-x: auto; }

/* Caja de llamada a la acción */
.cta-box { margin: 3em 0 0; padding: clamp(26px, 4vw, 40px); background: var(--navy); color: #F2F4F8; border-radius: 14px; }
.cta-box h2 { color: #F2F4F8; margin-top: 0 !important; }
.cta-box p { color: #C9D0DB; }
.cta-box a.btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none; padding: 18px 28px; border-radius: var(--r); }
.cta-box a.btn:hover { background: #E8C979; }
.cta-box a.alt { color: #F2F4F8; margin-left: 18px; }

/* «Sigue leyendo» (enlazado entre artículos hermanos) */
.related { margin-top: 3.2em; border-top: 1px solid var(--line); padding-top: 1.6em; }
.related h2 { margin-top: 0; font-size: 1.5rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.related a { font-family: var(--serif); font-size: 1.25rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--gold); }
.related a:hover { color: var(--gold-ink); }

/* ---------- Portada del blog ---------- */
.hub-head { padding: 40px 0 10px; max-width: 44rem; }
.hub-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.hub-head p { color: var(--ink-2); margin-top: 18px; font-size: 1.1em; }
.hub-list { list-style: none; padding: 0; margin: 40px 0 clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); }
.hub-list li { border-bottom: 1px solid var(--line); }
.hub-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; padding: 28px 0; text-decoration: none; color: var(--ink); }
.hub-list b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.25; }
.hub-list span { grid-column: 1; color: var(--ink-2); font-size: .98rem; }
.hub-list em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 500; color: var(--gold-ink); }
.hub-list a:hover b { color: var(--gold-ink); }

.foot { background: var(--navy); color: #8794A8; font-size: .92rem; padding: 40px var(--gut) 48px; }
.foot .row { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.foot a { color: #C9D0DB; text-decoration: none; }
.foot a:hover { color: #fff; }

@media (max-width: 640px) {
  /* tablas: en el móvil cada fila es una ficha y cada dato lleva su etiqueta (data-label del HTML) */
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .tabla tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: 3px 0; text-align: left; }
  .tabla td.num { text-align: left; white-space: normal; }
  .tabla td[data-label]::before { content: attr(data-label); display: block; margin-top: 8px; font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
  .tabla td:first-child { font-weight: 600; font-size: 1.05em; }
  .tabla td:first-child::before { display: none; }
  .tabla tbody th { display: block; padding: 0 0 4px; background: none; border: 0; font-size: 1.05em; }
  .top nav { gap: 16px; font-size: .92rem; }
  .top nav .hide-s { display: none; }
  .cta-box a.alt { display: block; margin: 16px 0 0; }
  .hub-list a { grid-template-columns: 1fr; }
  .hub-list em { grid-row: auto; grid-column: 1; }
}