/* Guías gratis (/guias/). Complementa /styles.css con lo que solo usan los artículos.
   Sin estilos en línea ni recursos de terceros (CSP: style-src 'self'; img-src 'self' data:). */

/* ---------- Encabezado del artículo ---------- */
.guia-head { padding: 40px 0 44px; }
.guia-head h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.1rem); margin-bottom: 14px; }
.guia-head .guia-lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: rgb(230 241 237 / .9); max-width: 40em; }
.guia-meta { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: rgb(230 241 237 / .82); font-size: 1rem; font-weight: 600; }
.guia-meta li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.guia-meta .icon { color: var(--gold-400); }

/* ---------- Cuerpo ---------- */
.guia { padding-block: 32px 16px; font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 760px) { .guia { font-size: 1.125rem; padding-top: 44px; } }
.guia > p, .guia > ul, .guia > ol { color: #243632; }
.guia > h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); margin: 2.2em 0 .55em; scroll-margin-top: 84px; }
.guia > h3 { font-size: 1.25rem; margin: 1.7em 0 .45em; scroll-margin-top: 84px; }
.guia > h2 + h3 { margin-top: .9em; }
.guia li { margin-bottom: .45em; }
.guia code { font-size: 1rem; overflow-wrap: anywhere; }
.guia strong { color: var(--ink); }

.en-corto {
  background: var(--card); border: 1px solid var(--line-2); border-left: 4px solid var(--gold-500);
  border-radius: var(--r); padding: 18px 20px; margin: 0 0 24px; box-shadow: var(--shadow-sm);
}
.en-corto-titulo { margin: 0 0 8px; font-weight: 800; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.01em; }
.en-corto ul { margin: 0; padding-left: 1.15em; }
.en-corto li { margin-bottom: .35em; color: var(--ink-2); }
.en-corto li:last-child { margin-bottom: 0; }
.guia .toc { margin: 24px 0 8px; }
.guia .toc ol { padding-left: 1.3em; }

/* ---------- Fórmulas ---------- */
.formula {
  margin: 14px 0 18px; padding: 14px 16px 15px; border-radius: 14px;
  background: var(--teal-900); color: #e6f1ed; box-shadow: var(--shadow-sm);
}
.formula-cel { display: block; margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--gold-400); letter-spacing: .01em; }
.formula code {
  display: block; background: none; padding: 0; border-radius: 0; color: #fff;
  font-size: 1.0625rem; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; word-break: break-word;
}
.formula-texto {
  margin: 16px 0 20px; padding: 16px 18px; border-radius: 14px;
  background: var(--gold-50); border: 1px solid var(--gold-100); border-left: 5px solid var(--gold-500);
  color: var(--ink); font-weight: 800; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.4; letter-spacing: -.01em;
}
.formula-texto span { display: block; margin-top: 4px; font-size: 1rem; font-weight: 600; color: #5a4300; letter-spacing: 0; }

/* ---------- Tablas ---------- */
.tabla-wrap {
  margin: 16px 0 22px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.tabla caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font-weight: 750; color: var(--ink); }
.tabla th, .tabla td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.tabla thead th { background: var(--teal-50); color: var(--teal-900); font-weight: 750; border-bottom-color: var(--teal-100); }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .col-letra { font-weight: 800; color: var(--teal-700); white-space: nowrap; }
.tabla .sub td, .tabla .sub th { background: #fbfaf6; font-weight: 750; color: var(--ink); }
.tabla .total td, .tabla .total th { background: var(--teal-50); font-weight: 800; color: var(--teal-900); border-top: 2px solid var(--teal-100); }
.tabla tfoot th, .tabla tfoot td { border-bottom: 1px solid var(--line-2); }
.tabla tfoot tr:last-child > * { border-bottom: 0; }
.tabla .menos { color: #8a2a1f; }
.tabla code { font-size: 1rem; }
.tabla thead th.num { white-space: normal; }
.tabla tbody th { font-weight: 700; color: var(--ink); }
.est { display: inline-block; padding: 1px 9px; border-radius: 7px; font-weight: 800; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; }
.est-ok { background: var(--ok-bg); color: var(--ok); }
.est-alerta { background: #c4271c; color: #fff; }

/* En celular, las tablas anchas se muestran como tarjetas (una por fila). */
@media (max-width: 639px) {
  .tabla--apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla--apilada, .tabla--apilada tbody, .tabla--apilada tr, .tabla--apilada td, .tabla--apilada th { display: block; width: 100%; }
  .tabla--apilada tr { padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .tabla--apilada tbody tr:last-child { border-bottom: 0; }
  .tabla--apilada td, .tabla--apilada tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; text-align: right; }
  .tabla--apilada td::before { content: attr(data-label); flex: none; max-width: 55%; text-align: left; font-weight: 650; color: var(--ink-3); }
  .tabla--apilada .fila-titulo { display: block; padding: 0 0 6px; text-align: left; font-weight: 800; font-size: 1.0625rem; color: var(--ink); }
  .tabla--apilada .fila-titulo::before { content: none; }
  .tabla--apilada code { text-align: right; }
  .tabla--texto td { display: block; text-align: left; padding: 4px 0; }
  .tabla--texto td::before { display: block; max-width: none; font-size: 1rem; }
}

/* ---------- Etiqueta de ejemplo ---------- */
.ejemplo-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px 4px 10px;
  border-radius: 999px; background: var(--gold-50); border: 1px solid var(--gold-100);
  color: #5f4100; font-size: 1rem; font-weight: 750;
}
.ejemplo-tag .icon { color: #8a5a00; width: 1.1em; height: 1.1em; }

/* ---------- Listas ---------- */
.pasos { list-style: none; padding: 0; margin: 18px 0 24px; counter-reset: paso; display: grid; gap: 12px; }
.pasos > li {
  counter-increment: paso; position: relative; margin: 0; padding: 16px 18px 16px 62px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-sm); color: var(--ink-2);
}
.pasos > li::before {
  content: counter(paso); position: absolute; left: 16px; top: 15px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-700); color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 0 0 5px var(--teal-50);
}
.pasos strong { display: block; color: var(--ink); margin-bottom: 2px; }
.check, .errores { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 10px; }
.check li, .errores li { position: relative; margin: 0; padding-left: 36px; color: var(--ink-2); }
.check li::before, .errores li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 24px; height: 24px; border-radius: 50%;
  background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}
.check li::before {
  background-color: var(--teal-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146158' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
.errores li::before {
  background-color: #f7e7e3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3a2c' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.guia .callout { font-size: 1rem; line-height: 1.6; }
.guia .callout strong { color: var(--teal-900); }

/* ---------- Invitación a la plantilla gratis ---------- */
.cta-gratis {
  position: relative; overflow: hidden; margin: 28px 0; padding: 24px 22px; border-radius: var(--r-lg);
  background-color: var(--teal-900);
  background-image: radial-gradient(460px 240px at 100% 0%, rgb(242 179 61 / .2), transparent 70%), linear-gradient(160deg, var(--teal-800), var(--teal-900));
  color: #e6f1ed; box-shadow: var(--shadow); display: grid; gap: 22px;
}
@media (min-width: 700px) { .cta-gratis { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding: 30px 30px; } }
.cta-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--gold-400); font-weight: 750; font-size: 1rem; }
.cta-kicker::before { content: ""; width: 20px; height: 3px; border-radius: 3px; background: var(--gold-500); }
.cta-titulo { margin: 0 0 8px; font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.cta-gratis .cta-titulo { color: #fff; }
.cta-gratis p { margin: 0 0 14px; color: rgb(230 241 237 / .9); font-size: 1rem; line-height: 1.6; }
.cta-gratis strong { color: #fff; }
.cta-gratis .btn { width: 100%; }
@media (min-width: 480px) { .cta-gratis .btn { width: auto; } }
.cta-gratis .cta-nota { margin: 10px 0 0; font-size: 1rem; color: rgb(230 241 237 / .78); }
.cta-gratis .cta-kicker, .cta-kit .cta-kicker { margin: 0 0 8px; font-size: 1rem; }
.cta-gratis .cta-kicker { color: var(--gold-400); }
.cta-gratis .cta-titulo, .cta-kit .cta-titulo { margin: 0 0 10px; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.2; }
.cta-gratis .cta-titulo { color: #fff; }
.cta-kit .cta-titulo { color: var(--ink); }
.cta-gratis .mock { display: none; }
@media (min-width: 700px) { .cta-gratis .mock { display: block; } }
.cta-gratis .mock-win { border-color: rgb(255 255 255 / .25); }
.cta-gratis .mock-table .w-stock { width: 52px; }
.cta-gratis .mock-table .w-estado { width: 92px; }

/* ---------- Invitación final al kit (suave) ---------- */
.cta-kit {
  margin: 40px 0 8px; padding: 24px 22px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .cta-kit { padding: 30px 32px; } }
.cta-kit p { margin: 0 0 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.cta-kit .cta-kicker { color: var(--teal-600); }
.mods { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.mods li { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-800); font-weight: 700; font-size: 1rem; }
.cta-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (min-width: 480px) { .cta-acciones { flex-direction: row; flex-wrap: wrap; } }
.cta-kit .cta-pie { margin: 14px 0 0; color: var(--ink-3); }

/* ---------- Guías relacionadas ---------- */
.relacionadas { padding-block: 40px 72px; }
.relacionadas h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin-bottom: 16px; }
.rel-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.rel-grid li { margin: 0; }
.rel-card {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; height: 100%;
  padding: 18px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rel-card:hover { border-color: var(--teal-500); color: var(--ink); box-shadow: var(--shadow); }
.rel-card strong { display: block; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 4px; }
.rel-card span.rel-desc { display: block; color: var(--ink-3); font-size: 1rem; line-height: 1.5; }
.rel-card .rel-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--teal-600); font-weight: 750; font-size: 1rem; }

/* ---------- Índice de guías ---------- */
.guias-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .guias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .guias-lista > li:first-child { grid-column: 1 / -1; }
  .guias-lista > li:first-child .guia-card { padding: 28px 30px 24px; background: var(--teal-900); border-color: var(--teal-900); color: #e6f1ed; }
  .guias-lista > li:first-child .guia-card h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
  .guias-lista > li:first-child .guia-card p { color: rgb(230 241 237 / .88); font-size: 1.0625rem; max-width: 42em; }
  .guias-lista > li:first-child .guia-card .guia-card-min { color: rgb(230 241 237 / .78); }
  .guias-lista > li:first-child .guia-card .guia-card-ir { color: var(--gold-400); }
  .guias-lista > li:first-child .ico-badge { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: var(--gold-400); }
}
.guias-lista > li { margin: 0; }
.guia-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 22px 20px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.guia-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow); color: var(--ink); }
.guia-card h2 { font-size: 1.3125rem; line-height: 1.25; margin: 4px 0 0; }
.guia-card p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.guia-card .guia-card-pie { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 1rem; }
.guia-card .guia-card-min { color: var(--ink-3); font-weight: 600; }
.guia-card .guia-card-ir { color: var(--teal-600); font-weight: 750; display: inline-flex; align-items: center; gap: 6px; }
.guias-intro { padding-block: 36px 8px; }
.glosario { padding-block: 24px 72px; }
.tabla a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.glosario h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); }
.glosario .lead { font-size: 1.0625rem; }

/* Rediseño 2026-09-25: sin barras laterales de color ni etiquetas sobre títulos */
[class*="formula"], .tabla td.num { font-variant-numeric: tabular-nums; }
.formula { font-family: var(--mono); }
.cta-kicker { display: none; }
.cta-gratis, .cta-kit { background-image: radial-gradient(460px 240px at 100% 0%, rgb(143 227 189 / .12), transparent 70%), linear-gradient(160deg, var(--teal-800), var(--teal-900)); }
.en-corto { background: var(--teal-50); border: 1px solid var(--teal-100); box-shadow: none; }
.formula-texto { background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: var(--r); }

/* Editorial reading surface; the guide and legal content remain unchanged. */
.guia-head { padding-block:64px 72px; }
.guia-head h1 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.1; max-width:23ch; }
.guia-head .guia-lead { max-width:58ch; }
.guia { max-width:75ch; font-size:1.125rem; padding-block:56px 32px; }
.guia > h2 { font-size:clamp(1.8rem,3vw,2.5rem); margin-top:2.5em; }
.guia > h3 { font-size:1.4rem; }
.en-corto,.formula-texto { border:1px solid var(--line); background:#f7f4ec; border-radius:12px; }
.formula-texto span,.tabla .menos { color:#34463e; }
.formula { background:#0a1f19; border-radius:12px; box-shadow:none; }
.formula code { font-family:var(--mono); }
.tabla-wrap { border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.tabla { font-size:1rem; }
.guia-card { border:1px solid var(--line-2); border-radius:16px; box-shadow:none; padding:32px; background:#fff; }
.guia-card h2 { font-size:1.65rem; letter-spacing:-.03em; }
.guia-card-min,.guia-card-ir { font-size:1rem; }
.guias-intro { padding-block:64px; }
@media(hover:hover) and (pointer:fine) { .guia-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); } }
@media(prefers-reduced-motion:reduce) { .guia-card:hover { transform:none; } }