/* =====================================================================
   Guías de la landing (2026-10-07). Las páginas las arma generar-guias.js; esta hoja se
   edita a mano. Mismos colores y tipografías que la landing; el modo oscuro es el mismo
   switch (tema-sitio.js, localStorage['tema']) con la paleta oscura del sistema.
   ===================================================================== */
:root {
  --g-bg: #FAF8F3; --g-sup: #FFFFFF; --g-borde: #EAE3D3; --g-texto: #22332F; --g-titulo: #1E3934;
  --g-suave: #55625D; --g-tenue: #66716B; --g-verde: #2E5C54; --g-verde-hover: #24463f; --g-link: #2E5C54;
  --g-ambar: #E8A33D; --g-cta-bg: #2E5C54; --g-cta-txt: #FAF8F3; --g-cta-suave: #C9DAD4;
  --g-barra: rgba(250, 248, 243, .94); --g-pie: #1E3934;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --g-bg: #111816; --g-sup: #1A2320; --g-borde: #2A3632; --g-texto: #ECE8DF; --g-titulo: #ECE8DF;
  --g-suave: #A3ADA8; --g-tenue: #8C9892; --g-verde: #2B6A58; --g-verde-hover: #3A8A72; --g-link: #8FB8A6;
  --g-cta-bg: #16231F; --g-cta-txt: #ECE8DF; --g-cta-suave: #A3ADA8;
  --g-barra: rgba(17, 24, 22, .92); --g-pie: #0B110F;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--g-bg); }
body { font-family: Inter, 'Helvetica Neue', Arial, sans-serif; color: var(--g-texto); line-height: 1.65; overflow-x: hidden; }
a { color: var(--g-link); }

/* ---- Barra ---- */
.g-barra { position: sticky; top: 0; z-index: 20; background: var(--g-barra); backdrop-filter: blur(8px); border-bottom: 1px solid var(--g-borde); }
.g-barra-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 12px clamp(16px, 5vw, 48px); }
.g-logo img { height: 32px; width: auto; display: block; }
.logo-oscuro { display: none !important; }
:root[data-theme="dark"] .logo-claro { display: none !important; }
:root[data-theme="dark"] .logo-oscuro { display: block !important; }
.g-nav { display: flex; align-items: center; gap: 14px; }
.g-nav-link { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--g-suave); }
.g-btn { font-family: Sora, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; padding: 9px 18px; border-radius: 30px; white-space: nowrap; display: inline-block; }
.g-btn-borde { color: var(--g-link); border: 2px solid var(--g-verde); }
.g-btn-lleno { color: #FAF8F3; background: var(--g-verde); }
.g-btn-lleno:hover { background: var(--g-verde-hover); }
.g-btn-ambar { color: #1A2320; background: var(--g-ambar); padding: 13px 26px; font-size: 15px; }

/* El switch de sol y luna (el mismo de la landing y el sistema). */
.tema-switch { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 54px; height: 28px; padding: 0 7px; margin: 0; flex: none; cursor: pointer; border-radius: 999px; border: 1px solid #D5CDBC; background: #ECE8DE; }
.tema-switch .ts-ic { position: relative; z-index: 1; display: flex; color: #9AA39D; }
.tema-switch .ts-perilla { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .22s cubic-bezier(.2, .7, .2, 1), background .2s; }
.tema-switch[aria-pressed="false"] .ts-sol { color: #C98B2A; }
.tema-switch[aria-pressed="true"] { background: #23302C; border-color: #3A4A44; }
.tema-switch[aria-pressed="true"] .ts-perilla { transform: translateX(26px); background: #4A5B55; }
.tema-switch[aria-pressed="true"] .ts-luna { color: #F1E3B5; }

/* ---- Contenido ---- */
.g-main { max-width: 1180px; margin: 0 auto; padding: 20px clamp(16px, 5vw, 48px) 56px; }
.g-migas { font-size: 13px; color: var(--g-tenue); margin-bottom: 18px; }
.g-migas a { color: var(--g-tenue); }
.g-art { max-width: 740px; }
.g-art h1 { font-family: Sora, sans-serif; font-weight: 700; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.15; color: var(--g-titulo); margin: 0 0 10px; letter-spacing: -.01em; }
.g-fecha { font-size: 13px; color: var(--g-tenue); margin: 0 0 26px; }
.g-art h2 { font-family: Sora, sans-serif; font-weight: 700; font-size: clamp(20px, 2.6vw, 25px); color: var(--g-titulo); margin: 36px 0 10px; line-height: 1.3; }
.g-art p, .g-art li { font-size: 17px; }
.g-art p { margin: 0 0 16px; }
.g-art ul, .g-art ol { padding-left: 22px; margin: 0 0 18px; }
.g-art li { margin-bottom: 8px; }
.g-art strong { color: var(--g-titulo); }

/* ---- Llamado a probar ---- */
.g-cta { max-width: 740px; margin: 40px 0; padding: 26px clamp(20px, 4vw, 32px); border-radius: 18px; background: var(--g-cta-bg); color: var(--g-cta-txt); }
.g-cta h2 { font-family: Sora, sans-serif; color: var(--g-cta-txt) !important; margin: 0 0 8px !important; font-size: 22px !important; }
.g-cta p { color: var(--g-cta-suave); font-size: 16px !important; margin: 0 0 18px !important; }
.g-cta-nota { display: block; margin-top: 12px; font-size: 13px; color: var(--g-cta-suave); }

/* ---- Preguntas frecuentes ---- */
.g-faq details { border: 1px solid var(--g-borde); background: var(--g-sup); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.g-faq summary { cursor: pointer; font-weight: 600; color: var(--g-titulo); font-size: 16px; }
.g-faq details p { margin: 10px 0 0; font-size: 16px; color: var(--g-suave); }

/* ---- Otras guías ---- */
.g-mas h2 { font-family: Sora, sans-serif; font-size: 22px; color: var(--g-titulo); margin: 48px 0 16px; }
.g-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.g-tarjetas-indice { margin-top: 28px; }
.g-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--g-borde); background: var(--g-sup); text-decoration: none; color: var(--g-texto); transition: transform .15s ease, border-color .15s ease; }
.g-tarjeta:hover { transform: translateY(-2px); border-color: var(--g-verde); }
.g-tarjeta b { font-family: Sora, sans-serif; font-size: 17px; line-height: 1.35; color: var(--g-titulo); }
.g-tarjeta span { font-size: 14.5px; color: var(--g-suave); line-height: 1.5; }

/* ---- Pie ---- */
.g-pie { background: var(--g-pie); padding: 44px clamp(16px, 5vw, 48px) 28px; color: #9FB3AC; }
.g-pie-in { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.g-pie-logo { height: 24px; width: auto; filter: brightness(0) invert(1); display: block; margin-bottom: 12px; }
.g-pie p { font-size: 14px; margin: 0; max-width: 260px; }
.g-pie-col { display: flex; flex-direction: column; gap: 7px; }
.g-pie-col b { font-family: Sora, sans-serif; font-size: 13px; color: #FAF8F3; margin-bottom: 4px; }
.g-pie-col a { color: #9FB3AC; text-decoration: none; font-size: 14px; }
.g-pie-copy { text-align: center; font-size: 13px; color: #8FA89C; margin: 32px 0 0 !important; max-width: none !important; }

/* ---- Celular ---- */
@media (max-width: 600px) {
  .g-solo-ancho, .g-nav-link { display: none; }
  .g-logo img { height: 24px; }
  .g-nav { gap: 10px; }
  .g-btn { padding: 8px 14px; font-size: 13px; }
  .g-art p, .g-art li { font-size: 16px; }
}