/* Blog / Guías. Se apoya en legal.css: aquí solo lo propio de las guías. */

.dochead .dsub{margin-top:14px;color:var(--muted);font-size:18px;max-width:52ch;line-height:1.5}
.gatras{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--muted);text-decoration:none;margin-bottom:20px}
.gatras:hover{color:var(--acc-ink)}

/* Índice de guías */
.gguias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:44px 0 20px}
@media(max-width:900px){.gguias{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.gcard:hover{border-color:var(--faint);transform:translateY(-2px);box-shadow:var(--shadow)}
.gmeta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.getiq{font-size:11.5px;font-weight:700;color:var(--acc-ink);background:var(--acc-soft);
  border-radius:20px;padding:4px 11px}
.gmin{font-size:12px;color:var(--faint)}
.gcard h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:9px}
.gcard p{font-size:14.5px;color:var(--muted);line-height:1.55;flex:1}
.gver{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;
  font-weight:600;color:var(--acc-ink)}
.gvacio{color:var(--muted);padding:30px 0}

/* Artículo: columna estrecha, pensada para leer */
.garticulo{max-width:65ch;padding:40px 0 10px;font-size:17px;line-height:1.75}
.garticulo h2{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.15;
  margin:42px 0 14px;text-wrap:balance}
.garticulo h3{font-size:19px;font-weight:700;margin:30px 0 10px}
.garticulo p{color:var(--ink-soft);margin-bottom:18px}
.garticulo strong{color:var(--ink);font-weight:700}
.garticulo a{color:var(--acc-ink);font-weight:600}
.garticulo ul,.garticulo ol{display:flex;flex-direction:column;gap:11px;margin:6px 0 22px;padding-left:4px}
.garticulo ul{list-style:none}
.garticulo ol{list-style:none;counter-reset:g}
.garticulo li{color:var(--ink-soft);position:relative;padding-left:26px;line-height:1.65}
.garticulo ul li::before{content:"";position:absolute;left:5px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--faint)}
.garticulo ol li{counter-increment:g}
.garticulo ol li::before{content:counter(g) ".";position:absolute;left:0;top:0;
  font-weight:700;color:var(--acc-ink);font-size:15px}
.garticulo blockquote{border-left:3px solid var(--acc);background:var(--acc-soft);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:6px 0 22px}
.garticulo blockquote p{margin:0;color:var(--ink);font-size:16.5px}
.garticulo code{font-family:var(--mono);font-size:.88em;background:var(--line-2);
  border-radius:5px;padding:2px 6px}
.garticulo hr{border:none;border-top:1px solid var(--line);margin:34px 0}

/* Llamada al final del artículo */
.gcta{max-width:65ch;background:var(--btn);color:var(--on-btn);border-radius:20px;
  padding:34px 32px;margin:38px 0 10px}
/* En el índice ocupa el ancho de las tarjetas, no el de una columna de texto.
   Y en dos columnas —texto a un lado, botón al otro—: apilado dejaba un
   bloque negro de 270 px de alto con la mitad derecha en blanco. */
.gcta-ancho{max-width:none;margin:44px 0 60px;padding:38px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.gcta-ancho .gcta-txt{max-width:62ch}
.gcta-ancho p{margin:10px 0 0}
.gcta-ancho .btn{flex:none}
.gcta h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--on-btn)}
.gcta p{color:color-mix(in srgb,var(--on-btn) 72%,transparent);margin:12px 0 22px;font-size:15.5px}
/* La marca es blanco y negro, así que el botón de acento es negro: sobre esta
   tarjeta negra desaparecía y quedaba un texto suelto con una flecha. Aquí se
   invierte y vuelve a parecer un botón. */
.gcta .btn-acc{background:var(--on-btn);color:var(--btn)}
.gcta .btn-acc:hover{filter:brightness(.9)}

/* ── Página de artículo: una columna de lectura, centrada ────────────────
   El texto estaba anclado a la izquierda dentro de un contenedor de 1320 px:
   junto a la columna quedaba media pantalla en blanco y la página parecía a
   medio hacer. Un artículo se lee en UNA columna —lo demás es hueco—, y esa
   columna va en el centro, como en cualquier sitio que se lea de verdad.

   Se estrecha el contenedor en vez de centrar cada pieza por separado: así
   el título, la fecha, el texto, la llamada y «sigue leyendo» caen todos en
   la misma vertical sin tener que acordarse de cada uno. */
.lectura .wrap,
.lectura.wrap{max-width:760px}
/* El ancho lo manda SOLO el contenedor. Con el artículo poniéndose además su
   propio `max-width:65ch`, sobraban 70 px por la derecha y el texto salía
   descentrado respecto al título: dos reglas peleándose por lo mismo. */
.lectura .garticulo,
.lectura .gcta{max-width:none}

.gmas{padding:30px 0 60px;border-top:1px solid var(--line);margin-top:50px}
.gmas > h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.gmas .gguias{padding:22px 0 0;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.gmas .gguias{grid-template-columns:1fr}}

@media(max-width:640px){
  .gguias{padding:30px 0 10px;gap:14px}
  .gcard{padding:20px;border-radius:16px}
  .garticulo{font-size:16.5px;padding:28px 0 10px}
  .garticulo h2{font-size:23px;margin:32px 0 12px}
  .gcta{padding:26px 22px;border-radius:18px}
}