/* Guías (10-oct, SEO): /guias y /whatsapp-para-corralones. Encima de como-funciona.css, con el mismo lenguaje: fondo
   claro, texto negro, el rojo solo de acento (lo que va en <em>, la raya de "En corto"), tablas blancas y un solo botón
   principal a la vista. Texto para leer: columna angosta y letra cómoda. Probada a 375 y a 1280. */
.guia .cabecera-acciones { gap: 20px; }

.guia-migas { padding-top: 18px; font-size: 14px; color: var(--apagado); }
.guia-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.guia-migas li + li::before { content: '›'; margin-right: 8px; color: var(--linea-fuerte); }
.guia-migas a { color: var(--tinta-2); text-underline-offset: 3px; }

.guia-cab { padding: 22px 0 8px; }
@media (min-width: 1024px) { .guia-cab { padding: 40px 0 12px; } }
.guia-cab h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.02; max-width: 20ch; }
.guia-cab .cf-bajada { max-width: 46ch; margin-bottom: 14px; }
.guia-fecha { margin: 0; font-size: 13.5px; color: var(--apagado); }

/* El texto en una columna angosta, alineada con el resto de la página; tablas y números usan el ancho entero. */
.guia-texto > :is(p, ul, ol, h2, h3, .guia-corto, .guia-nota, .guia-descarga) { max-width: 760px; }
.guia-texto > .guia-tabla { max-width: 980px; }
.guia article > .seccion { border-top: 0; padding-top: 12px; }
.guia-texto > h2 { margin: 44px 0 0; font-size: clamp(25px, 4vw, 34px); line-height: 1.08; max-width: 26ch; }
.guia-texto > h2:first-child { margin-top: 0; }
.guia-texto > h3 { margin: 26px 0 0; font-size: 20px; font-weight: 800; }
.guia-texto > p, .guia-texto > ul, .guia-texto > ol { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--tinta-2); }
.guia-texto > ul, .guia-texto > ol { padding-left: 22px; }
.guia-texto li + li { margin-top: 8px; }
.guia-texto strong { color: var(--tinta); }
.guia-texto a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--rojo); }
.guia-texto a:hover { color: var(--rojo); }

/* En corto: la respuesta arriba de todo, la que se lleva un buscador */
.guia-corto { margin: 26px 0 0; padding: 20px 22px; background: var(--papel); border: 1px solid var(--linea); border-left: 5px solid var(--rojo); border-radius: 16px; }
.guia-corto p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--tinta); }
.guia-corto .guia-corto-rotulo { display: block; margin-bottom: 8px; font: 500 12.5px/1.2 var(--f-codigo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }

/* Tablas: se deslizan de costado en el celular */
.guia-tabla { margin: 20px 0 0; }
.guia-tabla table.tabla { font-size: 15px; min-width: 520px; }
.guia-tabla .tabla th { position: static; }
.guia-tabla.corta table.tabla { min-width: 0; }   /* 2 o 3 columnas: entran en el celular sin deslizar */
.guia-tabla .tabla td { vertical-align: top; }
.guia-tabla .tabla td:first-child { min-width: 150px; font-weight: 600; color: var(--tinta); }
.guia-tabla .tabla td.n, .guia-tabla .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guia-tabla .tabla tr.destacada td { background: var(--rojo-suave); }
.guia-tabla caption { caption-side: bottom; padding: 10px 12px; text-align: left; font-size: 13.5px; color: var(--apagado); }
.guia-desliza { display: block; margin: 8px 0 0; font-size: 13px; color: var(--apagado); }
@media (min-width: 760px) { .guia-desliza { display: none; } }

.guia-nota { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--papel-2); font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }

/* Números medidos */
.guia .cf-numeros { margin-top: 22px; }
@media (min-width: 900px) { .guia .cf-numeros.de-3 { grid-template-columns: repeat(3, 1fr); } }
.guia .cf-numeros b { font-size: clamp(30px, 7vw, 48px); }

/* La descarga de la plantilla: botón secundario (el principal es el de Magnus) */
.guia-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 20px 0 0; }
.guia-descarga .btn { min-height: 48px; }
.guia-descarga span { font-size: 14px; color: var(--apagado); }

/* Preguntas */
.guia .faq { margin-top: 18px; }

/* Otras guías */
.guia-mas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .guia-mas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .guia-mas.de-3 { grid-template-columns: repeat(3, 1fr); } }
.guia-mas a { display: block; height: 100%; padding: 20px 20px 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; color: var(--tinta); text-decoration: none; transition: border-color .2s; }
.guia-mas a:hover { border-color: var(--tinta-2); }
.guia-mas strong { display: block; font: 800 19px/1.2 var(--f-titulo); letter-spacing: -.01em; }
.guia-mas strong::before { content: ''; display: block; width: 22px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rojo); }
.guia-mas span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--tinta-2); }

/* El cierre: ¿tenés un corralón? */
.guia-cierre { border-top: 1px solid var(--linea); }
.guia-cierre .cf-cierre-fila h2 { font-size: clamp(28px, 4.6vw, 42px); line-height: 1.04; max-width: 22ch; margin-bottom: 12px; }
.guia-cierre .cf-cierre-fila p.cf-nota { margin: 0 0 22px; }