/* SkyHeads · Guías (índice y artículos). Se carga solo en /guias/. Usa los tokens de site.css.
   Portadas: ilustraciones generativas hechas con CSS. Cada guía define --a --b --c (colores)
   y una variante (data-v). El cursor mueve la luz (--gx/--gy), desplaza la forma (--px/--py)
   y enciende la retícula de puntos a su alrededor (--mx/--my). guias.js actualiza esas variables. */

/* ================= Portada: la hora del día a través de vidrio estriado radial =================
   Todo es CSS. Cada hora define su degradado (--cielo), dónde está la luz (--sx, --sy), su color
   (--sol, nunca blanco puro) y un segundo resplandor (--sol2 en --b2x, --b2y). Desde la luz salen
   estrías en 360° que se van desvaneciendo hacia los bordes. Al pasar el cursor no gira nada:
   se enciende la estría que apunta hacia él (el haz) y un brillo suave donde está el cursor.
   guias.js solo mueve transformaciones; las estrías del haz se contrarrotan para quedar alineadas. */
.g-cover { --sx: 50%; --sy: 50%; --sol: #FFD27A; --sol2: #7AB8E0; --b2x: 25%; --b2y: 60%; --sombra: #0A0F3A; --p: 7.2deg;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 10; contain: paint;
  background:
    radial-gradient(130% 110% at var(--sx) var(--sy), transparent 32%, color-mix(in srgb, var(--sombra) 60%, transparent) 100%),
    radial-gradient(55% 60% at var(--b2x) var(--b2y), color-mix(in srgb, var(--sol2) 72%, transparent), transparent 72%),
    var(--cielo, linear-gradient(180deg, #2B4FD1, #7AB8E0)); }
.g-cover > * { position: absolute; pointer-events: none; }
/* La luz: el punto más claro, sin llegar a blanco */
.g-sol { left: var(--sx); top: var(--sy); width: 130%; aspect-ratio: 1; z-index: 0; mix-blend-mode: screen; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--sol) 0%, color-mix(in srgb, var(--sol) 78%, transparent) 9%, color-mix(in srgb, var(--sol) 38%, transparent) 30%, color-mix(in srgb, var(--sol) 12%, transparent) 55%, transparent 80%); }
/* Estrías radiales: volumen (::after) y luz que las atraviesa cerca del sol (::before) */
.g-vidrio, .g-haz { left: var(--sx); top: var(--sy); width: 250%; aspect-ratio: 1; z-index: 1; transform: translate(-50%, -50%); }
.g-vidrio::before, .g-vidrio::after { content: ""; position: absolute; inset: 0; }
.g-vidrio::before { mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--sol) 14%, transparent) calc(var(--p) * .45), color-mix(in srgb, var(--sol) 55%, transparent) calc(var(--p) * .9), transparent var(--p));
  -webkit-mask-image: radial-gradient(closest-side, transparent 2%, #000 9%, rgba(0,0,0,.5) 17%, rgba(0,0,0,.16) 27%, transparent 38%); mask-image: radial-gradient(closest-side, transparent 2%, #000 9%, rgba(0,0,0,.5) 17%, rgba(0,0,0,.16) 27%, transparent 38%); }
.g-vidrio::after { mix-blend-mode: soft-light;
  background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.2) 0deg, rgba(255,255,255,.26) calc(var(--p) * .18), rgba(255,255,255,.07) calc(var(--p) * .5), rgba(0,0,0,.07) calc(var(--p) * .8), rgba(0,0,0,.22) var(--p));
  -webkit-mask-image: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0,0,0,.62) 20%, rgba(0,0,0,.26) 30%, rgba(0,0,0,.08) 40%, transparent 50%); mask-image: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0,0,0,.62) 20%, rgba(0,0,0,.26) 30%, rgba(0,0,0,.08) 40%, transparent 50%); }
/* El haz: una cuña que apunta al cursor; dentro, las mismas estrías, más claras */
.g-haz { opacity: 0; mix-blend-mode: screen; transition: opacity .35s ease, transform .16s ease-out;
  -webkit-mask-image: conic-gradient(from -12deg, transparent 0deg, #000 8deg, #000 16deg, transparent 24deg), radial-gradient(closest-side, transparent 3%, #000 10%, rgba(0,0,0,.62) 22%, rgba(0,0,0,.2) 34%, transparent 46%);
  -webkit-mask-composite: source-in; mask-image: conic-gradient(from -12deg, transparent 0deg, #000 8deg, #000 16deg, transparent 24deg), radial-gradient(closest-side, transparent 3%, #000 10%, rgba(0,0,0,.62) 22%, rgba(0,0,0,.2) 34%, transparent 46%); mask-composite: intersect; }
.g-haz::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from -12deg, transparent 0deg, color-mix(in srgb, var(--sol) 34%, transparent) 12deg, transparent 24deg); }
.g-haz i { position: absolute; inset: 0; transition: transform .16s ease-out;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--sol) 40%, transparent) calc(var(--p) * .3), color-mix(in srgb, var(--sol) 85%, transparent) calc(var(--p) * .85), transparent var(--p)); }
/* Brillo suave donde está el cursor (color de la luz, no blanco) */
.g-chispa { left: 0; top: 0; width: 200px; height: 200px; z-index: 2; opacity: 0; mix-blend-mode: screen; transition: opacity .3s ease;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sol) 55%, transparent), color-mix(in srgb, var(--sol) 16%, transparent) 55%, transparent); }
/* Estrellas: la misma retícula, dibujada en canvas solo mientras el cursor está encima */
.g-estrellas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; }
.is-estrellas > .g-estrellas { opacity: 1; }
.is-estrellas > .g-cover-puntos { opacity: 0; }
/* Grano fino, como fotografía */
.g-grano { inset: 0; z-index: 2; opacity: 0.2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Retícula de puntos de la marca (en reposo). Con el cursor encima la sustituye el canvas .g-estrellas */
.g-cover-puntos { inset: 0; z-index: 2; background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), #000); mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), #000); }
.g-cover-num { left: 12px; bottom: 12px; z-index: 3; padding: 6px 9px 5px; border-radius: var(--r-full); font: 600 10px/1 var(--font-label); letter-spacing: 0.1em; color: #fff; text-transform: uppercase;
  background: rgba(8, 10, 28, 0.3); backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
.is-luz .g-haz { opacity: 1; }
.is-luz .g-chispa { opacity: 1; }
.is-luz .g-haz, .is-luz .g-haz i, .is-luz .g-chispa { will-change: transform; }
.g-cover--xl { --p: 6deg; }
.g-card.is-l .g-vidrio, .g-card.is-l .g-haz, .g-card.is-xl .g-vidrio, .g-card.is-xl .g-haz { width: 330%; }

/* --- Las diez horas: cielos fotografiables, saturados; la luz nunca es blanca --- */
.g-cover[data-cielo="alba"]       { --cielo: linear-gradient(180deg, #1B1464 0%, #4A2BA8 34%, #B04FC4 62%, #FF7FA8 82%, #FFC2A1 100%); --sx: 62%; --sy: 90%; --sol: #FFB7A6; --sol2: #FF5FB0; --b2x: 20%; --b2y: 72%; --sombra: #120C45; }
.g-cover[data-cielo="amanecer"]   { --cielo: linear-gradient(180deg, #1638A8 0%, #4F7BFF 32%, #FF9EB1 64%, #FFB36B 84%, #FFE08A 100%); --sx: 30%; --sy: 80%; --sol: #FFD27A; --sol2: #FF6FA3; --b2x: 78%; --b2y: 58%; --sombra: #0E2477; }
.g-cover[data-cielo="manana"]     { --cielo: linear-gradient(180deg, #0A3FD1 0%, #1F7BFF 42%, #45BEFF 78%, #B8ECFF 100%); --sx: 76%; --sy: 18%; --sol: #B6EEFF; --sol2: #1ED3FF; --b2x: 24%; --b2y: 72%; --sombra: #062A8F; }
.g-cover[data-cielo="mediodia"]   { --cielo: linear-gradient(180deg, #06238F 0%, #0F55F0 40%, #1FA2FF 75%, #7FE3FF 100%); --sx: 50%; --sy: 14%; --sol: #9FEBFF; --sol2: #22E1FF; --b2x: 64%; --b2y: 74%; --sombra: #041866; }
.g-cover[data-cielo="tarde"]      { --cielo: linear-gradient(180deg, #1D3FB8 0%, #5B6CF0 34%, #F08BC0 62%, #FFB45C 82%, #FFE08A 100%); --sx: 72%; --sy: 62%; --sol: #FFD27A; --sol2: #FF5E9C; --b2x: 22%; --b2y: 44%; --sombra: #16287E; }
.g-cover[data-cielo="dorada"]     { --cielo: linear-gradient(180deg, #1C3BB0 0%, #7A5CE0 34%, #FF7A59 66%, #FFB347 84%, #FFE9A8 100%); --sx: 60%; --sy: 70%; --sol: #FFD166; --sol2: #FF4F7B; --b2x: 18%; --b2y: 40%; --sombra: #15267A; }
.g-cover[data-cielo="atardecer"]  { --cielo: linear-gradient(180deg, #1A1459 0%, #5A1E8C 30%, #E0357A 58%, #FF6A2B 80%, #FFC04D 100%); --sx: 44%; --sy: 86%; --sol: #FFA040; --sol2: #FF2D78; --b2x: 82%; --b2y: 52%; --sombra: #120D40; }
.g-cover[data-cielo="crepusculo"] { --cielo: linear-gradient(180deg, #0D1257 0%, #3B2AA8 38%, #A43FC0 64%, #FF6F9E 84%, #FFB08A 100%); --sx: 68%; --sy: 90%; --sol: #FF97B6; --sol2: #7B5CFF; --b2x: 20%; --b2y: 52%; --sombra: #090C3E; }
.g-cover[data-cielo="horaazul"]   { --cielo: linear-gradient(180deg, #041A6B 0%, #0B3FD6 40%, #2F7BFF 68%, #7FB8FF 88%, #C9DEFF 100%); --sx: 34%; --sy: 90%; --sol: #8FC4FF; --sol2: #16C8FF; --b2x: 78%; --b2y: 44%; --sombra: #02113F; }
.g-cover[data-cielo="anochecer"]  { --cielo: linear-gradient(180deg, #080E4A 0%, #1E23A0 38%, #5B2BC0 64%, #C23FA8 84%, #FF7A8A 100%); --sx: 30%; --sy: 92%; --sol: #FF7FA6; --sol2: #3D6BFF; --b2x: 76%; --b2y: 40%; --sombra: #050833; }

/* ================= Índice: masthead editorial ================= */
.g-mast { position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h, 64px) + clamp(64px, 11vh, 132px)) 20px clamp(44px, 6vh, 64px); text-align: center; }
.g-mast-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.g-mast-halo { position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 0%, rgba(122,184,224,0.12), transparent 70%); }
.g-mast-luz { position: absolute; left: 0; top: 0; width: 620px; height: 440px; margin: -220px 0 0 -310px; background: radial-gradient(closest-side, rgba(57,101,250,0.16), transparent);
  transform: translate(50vw, 30%); transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.g-mast .g-mast.is-luz .g-mast .g-cover-puntos { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 1px, transparent 1.5px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 80%); opacity: .6; }

.g-mast-in { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.g-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface);
  font: 600 12px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.g-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.g-pill b { color: var(--text-muted); font-weight: 500; }
.g-mast-t { margin: 26px 0 18px; font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.g-mast-t em { display: block; font-style: normal; color: var(--accent-text); }
.g-mast-sub { max-width: 58ch; margin: 0 auto; color: var(--text-muted); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.65; text-wrap: balance; }
.g-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(28px, 4vh, 40px); }
.g-chip { padding: 10px 17px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  font: 600 var(--text-sm)/1 var(--font-body); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s; }
.g-chip:hover { border-color: color-mix(in srgb, var(--text) 40%, var(--border)); transform: translateY(-1px); }
.g-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-chip.is-on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ================= Tarjetas (bento) ================= */
.g-indice { padding: 8px clamp(16px, 4vw, 40px) clamp(64px, 9vh, 104px); }
.g-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.g-card { --gx: 50%; --gy: 50%; grid-column: span 2; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  box-shadow: 0 1px 2px rgba(23,25,29,0.04); transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s, border-color 0.35s; }
.g-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px color-mix(in srgb, var(--a) 18%, transparent); border-color: color-mix(in srgb, var(--a) 35%, var(--border)); }
.g-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.g-card-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 10px 10px; flex: 1; }
.g-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: var(--r-full); font: 600 12px/1.2 var(--font-body);
  background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--text); }
.g-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 22%, transparent); }
.g-tag b { color: var(--text-muted); font-weight: 400; }
.g-card-titulo { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.14rem, 1.35vw, 1.28rem); line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; }
.g-card-resp { margin: 0; color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-leer { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--text) 30%, var(--border)); border-radius: var(--r-full);
  font: 600 13px/1 var(--font-body); color: var(--text); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.g-card:hover .g-leer { background: var(--text); color: var(--bg); border-color: var(--text); }
/* Grande: portada a la izquierda, texto a la derecha */
.g-card.is-l, .g-card.is-xl { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.g-card.is-xl { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.g-card.is-l .g-cover, .g-card.is-xl .g-cover { aspect-ratio: auto; height: 100%; min-height: 340px; }
.g-card.is-l .g-card-txt, .g-card.is-xl .g-card-txt { justify-content: center; padding: 20px clamp(14px, 2vw, 28px); gap: 16px; }
.g-card.is-l .g-card-titulo, .g-card.is-xl .g-card-titulo { font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.1; letter-spacing: -0.025em; }
.g-card.is-l .g-card-resp, .g-card.is-xl .g-card-resp { font-size: 1rem; -webkit-line-clamp: 4; }
.g-card.is-l .g-leer, .g-card.is-xl .g-leer { margin-top: 6px; }
.g-bento .g-card.is-oculta { display: none; }
.g-bento .g-card.g-entra { animation: gEntra 0.6s cubic-bezier(.22,1,.36,1) both; }
@keyframes gEntra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.g-bento--3 .g-card { grid-column: span 2; }

/* ================= Artículo ================= */
.g-borrador { display: inline-block; margin-left: 10px; padding: 4px 10px; border: 1.5px dashed var(--accent); border-radius: var(--r-full); color: var(--accent-text); font: 700 10.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
.g-progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1200; pointer-events: none; }
.g-progreso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--a, var(--accent)), var(--c, #7AB8E0)); }
.g-art { max-width: 1180px; margin: 0 auto; padding: calc(var(--header-h, 64px) + clamp(40px, 8vh, 88px)) clamp(16px, 4vw, 40px) clamp(40px, 6vh, 72px); }
.g-art-head { margin: 0 0 clamp(28px, 4vh, 40px) calc(240px + 64px); max-width: 860px; }
.g-migas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--text-muted); }
.g-migas a { color: var(--text-muted); text-decoration: none; }
.g-migas a:hover { color: var(--accent-text); }
.g-art-titulo { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; margin: 18px 0 20px; text-wrap: balance; }
.g-art-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; font-size: 14px; color: var(--text-muted); }
.g-art-meta span + span::before { content: "·"; margin: 0 10px; }
.g-art-portada { margin: 0 0 clamp(40px, 6vh, 64px); }
.g-cover--xl { aspect-ratio: 21 / 8; border-radius: var(--r-lg); }
.g-art-portada figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.g-art-portada figcaption span:first-child { font-family: var(--font-heading); font-style: normal; font-size: 1rem; color: var(--text); font-weight: 600;}
.g-art-portada figcaption span:last-child { font: 600 11px/1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
.g-art-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }

.g-toc { position: sticky; top: calc(var(--header-h, 64px) + 32px); font-size: 14px; }
.g-toc-titulo { margin: 0 0 12px; font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.g-toc ol { list-style: none; margin: 0; padding: 0; }
.g-toc li a { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 0 7px 12px; border-left: 2px solid var(--border); color: var(--text-muted); text-decoration: none; line-height: 1.4; transition: color 0.2s, border-color 0.2s; }
.g-toc li a span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding-top: 2px; opacity: .7; }
.g-toc li a:hover { color: var(--text); }
.g-toc li a.is-activo { color: var(--text); border-color: var(--a, var(--accent)); font-weight: 600; }
.g-toc-cta { display: block; margin-top: 26px; padding: 16px 18px; border-radius: var(--r-md); text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(57,101,250,0.10), rgba(122,184,224,0.10)); border: 1.5px solid rgba(57,101,250,0.28); transition: border-color 0.25s, transform 0.25s; }
.g-toc-cta:hover { border-color: var(--accent); transform: translateY(-2px); }
.g-toc-cta strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.g-toc-cta span { color: var(--accent-text); font-weight: 600; font-size: 13px; }
.g-toc-det > summary { list-style: none; pointer-events: none; }
.g-toc-det > summary::-webkit-details-marker { display: none; }
.g-toc-det > summary span { display: none; }

.g-cuerpo { max-width: 70ch; font-size: 1.08rem; line-height: 1.6; color: var(--text); }
.g-cuerpo > p, .g-cuerpo li { text-wrap: pretty; }
.g-cuerpo p { margin: 0 0 1.15em; }
.g-cuerpo p.g-capitular::first-letter { float: left; font-family: var(--font-heading); font-weight: 600; font-size: 4.1em; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: var(--a, var(--accent-text)); }
.g-cuerpo h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.55rem, 2.4vw, 2.05rem); line-height: 1.18; letter-spacing: -0.014em; margin: 2.6em 0 0.7em; text-wrap: balance; scroll-margin-top: calc(var(--header-h, 64px) + 24px); }
.g-h2-num { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 12px/1 var(--font-body); letter-spacing: 0.16em; color: var(--accent-text); }
.g-h2-num::before { content: ""; width: 32px; height: 1.5px; background: linear-gradient(90deg, var(--a, var(--accent)), var(--c, #7AB8E0)); }
.g-cuerpo h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.12rem; margin: 1.8em 0 0.5em; }
.g-cuerpo ul, .g-cuerpo ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.g-cuerpo li { margin: 0.45em 0; padding-left: 0.2em; }
.g-cuerpo li::marker { color: var(--accent-text); font-weight: 700; }
.g-cuerpo strong { font-weight: 700; }
.g-cuerpo a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.g-cuerpo a:hover { text-decoration-thickness: 2px; }

.g-respuesta { margin: 0 0 2.4em; padding: 24px 28px; border-radius: var(--r-lg); font-size: 1.12rem; line-height: 1.62; position: relative; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 10%, transparent), color-mix(in srgb, var(--c) 10%, transparent)), var(--surface);
  border: 1px solid color-mix(in srgb, var(--a) 32%, var(--border)); }
.g-respuesta p { margin: 0; }
.g-respuesta .g-respuesta-label { margin: 0 0 8px; font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }

/* Citas destacadas */
.g-cita { margin: 2.6em 0; padding: 30px 0 28px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; }
.g-cita::before { content: "“"; position: absolute; top: -0.42em; left: 0; padding-right: 12px; background: var(--bg); font-family: var(--font-heading); font-size: 3.4rem; line-height: 1; color: var(--a, var(--accent-text)); font-weight: 600;}
.g-cita p { margin: 0 0 14px; font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.28; letter-spacing: -0.01em; text-wrap: balance; }
.g-cita cite { display: inline-flex; align-items: center; gap: 10px; font: 700 11.5px/1 var(--font-label); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.g-cita cite::before { content: "SH"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, var(--a, var(--accent)), var(--c, #7AB8E0)); }

/* Figuras con crédito */
.g-fig { margin: 2.4em 0; }
.g-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--surface-hover); }
.g-fig figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.g-credito { flex: none; font: 700 10.5px/1.4 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.g-fig--vertical { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; align-items: end; }
.g-fig--vertical figcaption { flex-direction: column; align-items: flex-start; margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.45; color: var(--text); font-weight: 600;}
.g-fig--vertical .g-credito { font-family: var(--font-body); }
.g-ad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-ad > div { position: relative; }
.g-ad img { aspect-ratio: 16 / 10; object-fit: cover; }
.g-ad span { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: var(--r-full); background: rgba(6,7,13,0.62); color: #fff; font: 600 11.5px/1.2 var(--font-body); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.g-ad > div + div span { background: var(--accent); }

/* Diagramas */
.g-diag { margin: 2.4em 0; padding: 22px 24px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.g-cuerpo .g-diag-t { margin: 0 0 18px; font: 700 11.5px/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.g-diag figcaption { margin-top: 16px; display: flex; justify-content: space-between; gap: 18px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.g-rangos { display: grid; gap: 12px; }
.g-rango { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 150px; gap: 14px; align-items: center; font-size: 13.5px; line-height: 1.3; }
.g-rango-l { color: var(--text); }
.g-rango-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-rango-track { position: relative; height: 10px; border-radius: var(--r-full); background: var(--surface-hover); }
.g-rango-track i { position: absolute; top: 0; bottom: 0; left: var(--i); width: calc(var(--f) - var(--i)); border-radius: var(--r-full); background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.g-rango-track i.is-abierto { background: linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 55%, transparent) 70%, transparent); }
.g-rango.is-sky .g-rango-track i { background: linear-gradient(90deg, var(--a, var(--accent)), var(--c, #7AB8E0)); box-shadow: 0 0 14px color-mix(in srgb, var(--a, var(--accent)) 45%, transparent); }
.g-rango.is-sky .g-rango-l { font-weight: 700; }
.g-rangos-eje { position: relative; height: 18px; margin-left: calc(min(190px, 30%) + 14px); margin-right: 164px; border-top: 1px dashed var(--border); }
.g-rangos-eje span { position: absolute; left: var(--p); top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.g-rangos-eje span:last-child { transform: translateX(-100%); }
.g-reparto { display: grid; gap: 14px; }
.g-reparto-fila { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.g-reparto-l { font-weight: 700; font-size: 13.5px; }
.g-reparto-barra { display: flex; gap: 3px; height: 54px; }
.g-reparto-barra span { flex: 0 0 var(--w); display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.2; font-weight: 600; overflow: hidden; }
.g-reparto-barra .is-a { background: linear-gradient(135deg, var(--a, var(--accent)), color-mix(in srgb, var(--a, var(--accent)) 70%, var(--c, #7AB8E0))); color: #fff; }
.g-reparto-barra .is-b { background: var(--surface-hover); color: var(--text); }
.g-reparto-barra .is-c { background: color-mix(in srgb, var(--c, #7AB8E0) 22%, var(--surface-hover)); color: var(--text); }
.g-linea { display: flex; gap: 3px; margin-bottom: 10px; }
.g-linea span { flex: 0 0 calc(var(--w) - 3px); display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 8px 10px; border-radius: var(--r-sm); overflow: hidden; }
.g-linea b { font-size: 13px; line-height: 1.15; }
.g-linea small { font-size: 11.5px; opacity: .8; }
.g-linea .is-1 { background: linear-gradient(135deg, var(--a, var(--accent)), color-mix(in srgb, var(--a, var(--accent)) 60%, var(--b, #5478FF))); color: #fff; }
.g-linea .is-2 { background: color-mix(in srgb, var(--a, var(--accent)) 22%, var(--surface-hover)); }
.g-linea .is-3 { background: var(--surface-hover); }
.g-linea .is-3b { background: color-mix(in srgb, var(--c, #7AB8E0) 18%, var(--surface-hover)); }
.g-linea .is-4 { background: var(--text); color: var(--bg); }
.g-linea--sem span { text-align: center; align-items: center; }
.g-linea--sem b { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
.g-pantallas { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 5vw, 56px); padding: 6px 0 4px; }
.g-pantalla { position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); border: 2px solid var(--text); overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--a, var(--accent)) 16%, var(--surface)), var(--surface)); }
.g-pantalla--916 { width: 160px; aspect-ratio: 9 / 16; }
.g-pantalla--45 { width: 200px; aspect-ratio: 4 / 5; }
.g-pantalla em { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font: 600 12px/1.2 var(--font-body); font-style: normal; color: var(--text-muted); }
.g-pantallas { padding-bottom: 36px; }
.g-pantalla { overflow: visible; }
.g-zona { display: grid; place-items: center; padding: 6px; text-align: center; font-size: 10.5px; line-height: 1.25; font-weight: 600; color: var(--text);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--error) 22%, transparent) 0 6px, color-mix(in srgb, var(--error) 8%, transparent) 6px 12px); }
.g-zona--arriba { height: 14%; border-radius: var(--r-md) var(--r-md) 0 0; }
.g-zona--abajo { height: 35%; border-radius: 0 0 var(--r-md) var(--r-md); }
.g-zona--fina { height: 6%; }
.g-zona--media { height: 20%; }
.g-zona-ok { flex: 1; display: grid; place-items: center; font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); outline: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -8px; }
.g-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-etapas > div { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--surface-hover); }
.g-etapas > div.is-sky { background: linear-gradient(135deg, color-mix(in srgb, var(--a, var(--accent)) 22%, var(--surface-hover)), color-mix(in srgb, var(--c, #7AB8E0) 16%, var(--surface-hover))); }
.g-etapas b { font-size: 14.5px; }
.g-etapas small { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.g-medidor { display: flex; gap: 4px; }
.g-medidor i { width: 26px; height: 6px; border-radius: var(--r-full); background: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.g-medidor[style*="--n:1"] i:nth-child(-n+1), .g-medidor[style*="--n:2"] i:nth-child(-n+2), .g-medidor[style*="--n:3"] i:nth-child(-n+3) { background: var(--a, var(--accent)); }

.g-tabla { margin: 1.6em 0 2em; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.g-tabla:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-tabla table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
.g-tabla th { text-align: left; padding: 12px 16px; background: var(--surface-hover); font: 700 12.5px/1.3 var(--font-body); letter-spacing: 0.04em; color: var(--text-muted); }
.g-tabla td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: top; }
.g-tabla td:first-child { font-weight: 600; }
.g-nota { margin: 1.8em 0; padding: 14px 20px; border-left: 3px solid var(--a, var(--accent)); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface); font-size: 0.99rem; line-height: 1.65; }
.g-nota p:last-child { margin-bottom: 0; }
.g-sky { position: relative; isolation: isolate; overflow: hidden; margin: 2.6em 0 0; padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: radial-gradient(320px 240px at 100% 0%, color-mix(in srgb, var(--a, var(--accent)) 14%, transparent), transparent 70%), var(--surface); font-size: 1rem; line-height: 1.65; }
.g-sky::before { content: "En SkyHeads"; display: block; margin-bottom: 8px; font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.g-sky p:last-child { margin-bottom: 0; }
.g-cuerpo .g-sky a.g-boton { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 18px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-body); text-decoration: none; transition: background 0.2s, transform 0.2s; }
.g-cuerpo .g-sky a.g-boton:hover { background: var(--accent-hover); transform: translateY(-1px); }
.g-cuerpo ul.g-check { list-style: none; padding-left: 0; }
.g-cuerpo ul.g-check li { position: relative; padding-left: 34px; }
.g-cuerpo ul.g-check li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.g-cuerpo ul.g-check li::after { content: ""; position: absolute; left: 7px; top: calc(0.3em + 4px); width: 5px; height: 9px; border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* «Lo que hemos visto»: experiencia propia dentro del texto */
.g-exp { position: relative; margin: 2em 0; padding: 20px 24px 20px 26px; border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 3px solid var(--a, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--a, var(--accent)) 8%, transparent), transparent 80%), var(--surface); font-size: 1.02rem; line-height: 1.7; }
.g-exp::before { content: "Lo que hemos visto"; display: block; margin-bottom: 8px; font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.g-exp p:last-child { margin-bottom: 0; }
/* Autoría al final de la guía */
.g-autor { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; margin: 3em 0 0; padding-top: 28px; border-top: 1px solid var(--border); font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }
.g-autor-sello { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font: 700 14px/1 var(--font-body); letter-spacing: 0.06em; background: linear-gradient(135deg, var(--a, var(--accent)), var(--c, #7AB8E0)); }
.g-autor strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: 2px; }
.g-autor p { margin: 0; }

/* Más entradas */
.g-mas { background: var(--surface-hover); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.g-mas-in { max-width: 1180px; margin: 0 auto; padding: 34px clamp(16px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.g-mas-t { font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.g-mas-a { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; }
.g-mas-a.is-sig { text-align: right; align-items: flex-end; }
.g-mas-a small { font: 600 12px/1 var(--font-body); color: var(--text-muted); }
.g-mas-a small::before { content: "← "; }
.g-mas-a.is-sig small::before { content: none; }
.g-mas-a.is-sig small::after { content: " →"; }
.g-mas-a span { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3; max-width: 34ch; text-wrap: balance; font-weight: 600;}
.g-mas-a:hover span { color: var(--accent-text); }
.g-rel { padding-top: clamp(48px, 7vh, 80px); }
.g-rel-todas { text-align: center; margin: 28px 0 0; }
.g-rel-todas a { color: var(--accent-text); font-weight: 600; text-decoration: none; }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
  .g-art-head { margin-left: 0; }
  .g-art-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .g-toc { position: static; max-width: 70ch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .g-toc-cta { display: none; }
  .g-toc-det > summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; }
  .g-toc-det > summary span { display: inline; margin-left: auto; font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 12.5px; }
  .g-toc-det > summary::after { content: ""; width: 8px; height: 8px; border: solid var(--text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; flex: none; }
  .g-toc-det[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .g-toc-det ol { padding: 0 20px 14px; }
}
@media (max-width: 980px) {
  .g-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-card, .g-bento--3 .g-card { grid-column: span 1; }
  .g-card.is-l, .g-card.is-xl { grid-column: 1 / -1; }
  .g-bento--3 .g-card:last-child { display: none; }
}
@media (max-width: 720px) {
  .g-card.is-l, .g-card.is-xl { display: flex; }
  .g-card.is-l .g-cover, .g-card.is-xl .g-cover { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .g-card.is-l .g-card-txt, .g-card.is-xl .g-card-txt { padding: 16px 10px 10px; }
  .g-cover--xl { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
  .g-rango { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .g-rango-track { grid-column: 1 / -1; grid-row: 2; }
  .g-rangos-eje { margin-left: 0; margin-right: 0; }
  .g-fig--vertical { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 18px; }
  .g-fig--vertical figcaption { font-size: 1rem; }
  .g-etapas { grid-template-columns: 1fr; }
  .g-reparto-fila { grid-template-columns: 1fr; gap: 6px; }
  .g-reparto-barra span { font-size: 11px; padding: 0 8px; }
  .g-linea b { font-size: 11.5px; } .g-linea small { font-size: 10.5px; } .g-linea span { padding: 6px; }
  .g-linea--sem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-linea--sem span { flex: none; }
  .g-mas-in { grid-template-columns: 1fr 1fr; } .g-mas-t { display: none; }
  .g-fig figcaption, .g-diag figcaption { flex-direction: column; gap: 6px; }
  .g-credito { white-space: normal; }
}
@media (max-width: 640px) {
  .g-bento, .g-bento--3 { grid-template-columns: minmax(0, 1fr); }
  .g-bento--3 .g-card:last-child { display: flex; }
  .g-art-meta { flex-direction: column; gap: 2px; }
  .g-art-meta span + span::before { content: none; }
  .g-filtros { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; }
  .g-filtros::-webkit-scrollbar { display: none; }
  .g-chip { flex: none; }
  .g-cuerpo { font-size: 1.03rem; }
  .g-respuesta { padding: 18px 20px; font-size: 1.05rem; }
  .g-borrador { margin: 10px 0 0; display: table; }
  .g-pantalla--916 { width: 120px; } .g-pantalla--45 { width: 150px; }
  .g-zona { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-card, .g-chip { transition: none; }
  .g-bento .g-card.g-entra { animation: none; }
}

/* ===== Rango de precios + llamada a cotizar (oct 2026) ===== */
.g-precio { margin: 1.6em 0 2em; padding: 24px 26px 26px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); text-align: center; }
.g-cuerpo .g-precio p.g-precio-k { margin: 0 0 16px; font: 700 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.g-precio-escala { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 18px; }
.g-precio-escala::before { content: ""; position: absolute; left: 16%; right: 16%; top: 4px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #9CCBEA, var(--accent)); }
.g-precio-escala span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-precio-escala span::before { content: ""; position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.g-precio-escala b { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.g-precio-escala .is-mid b { color: var(--accent-text); }
.g-precio-escala small { font-size: 13px; line-height: 1.35; color: var(--text-muted); max-width: 18ch; }
.g-cuerpo .g-precio p.g-precio-nota { margin: 18px auto 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.g-cuerpo .g-precio a.g-boton--grande { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 16px 34px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font: 700 17px/1 var(--font-body); text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
.g-cuerpo .g-precio a.g-boton--grande:hover { background: var(--accent-hover); transform: translateY(-1px); }
@media (max-width: 560px) { .g-precio { padding: 20px 16px 22px; } .g-precio-escala small { font-size: 12px; } }
.g-cuerpo .g-precio p.g-precio-mxn { margin: 14px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }

/* Ajustes editoriales (11 oct 2026): medida de unos 66 caracteres en el cuerpo de las guías (Bringhurst). */
.g-cuerpo > p, .g-cuerpo > ul, .g-cuerpo > ol, .g-cuerpo > h2, .g-cuerpo > h3 { max-width: 36rem; }
.g-cuerpo > p.g-respuesta { max-width: 40rem; line-height: 1.55; }
.g-mast-sub { max-width: 36rem; line-height: 1.55; }
.g-exp, .g-sky { max-width: 40rem; line-height: 1.55; }
.g-autor { line-height: 1.5; } .g-autor p { max-width: 36rem; }

/* ===== Investigación, notas y fuentes (11 oct 2026) =====
   Tres voces en cada guía: lo que dice la investigación (.g-inv, neutro, con regla arriba),
   lo que hemos visto (.g-exp, en azul) y nuestra lectura o recomendación (texto normal). */
.g-metodo { max-width: 36rem; margin: 0 0 2em; padding-left: 14px; border-left: 2px solid var(--border); font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); }
.g-inv { max-width: 40rem; margin: 2em 0; padding: 16px 0 2px; border-top: 2px solid var(--text); font-size: 1.02rem; line-height: 1.6; }
.g-inv::before { content: "Lo que dice la investigación"; display: block; margin-bottom: 10px; font: 500 11.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.g-inv p { margin: 0 0 0.9em; }
.g-inv p:last-child { margin-bottom: 0; }
.g-inv .g-inv-nota { font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); padding-top: 10px; border-top: 1px solid var(--border); }
.g-cuerpo p.g-pie { margin: -1.2em 0 2em; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.g-obra { color: var(--text); font-weight: 600; }
.g-ref { line-height: 0; font-size: 0.72em; vertical-align: super; }
.g-cuerpo .g-ref a { display: inline; margin-left: 1px; padding: 2px 4px 1px; border-radius: var(--r-xs); font: 500 1em/1 var(--font-label); color: var(--accent-text); background: var(--accent-soft); text-decoration: none; }
.g-cuerpo .g-ref a:hover { background: var(--accent); color: var(--on-accent); }
[id^="fuente-"], [id^="cita-"], #fuentes { scroll-margin-top: 110px; }
.g-fuentes { max-width: 40rem; margin: 3.2em 0 0; padding-top: 1.6em; border-top: 1px solid var(--border); }
.g-cuerpo .g-fuentes h2.g-fuentes-t { margin: 0 0 0.8em; font: 500 12px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.g-cuerpo .g-fuentes ol { margin: 0; padding: 0; list-style: none; counter-reset: fte; font-size: 0.93rem; line-height: 1.55; color: var(--text-muted); }
.g-fuentes li { position: relative; counter-increment: fte; margin: 0 0 0.6em -10px; padding: 6px 10px 6px 42px; border-radius: var(--r-sm); transition: background .3s; }
.g-fuentes li::before { content: counter(fte); position: absolute; left: 10px; top: 7px; min-width: 22px; padding: 3px 0 2px; border-radius: var(--r-xs); text-align: center; font: 500 11.5px/1 var(--font-label); color: var(--accent-text); background: var(--accent-soft); }
.g-fuentes li:target { background: var(--accent-soft); }
.g-fuentes b { color: var(--text); font-weight: 600; }
.g-fuentes .g-obra { font-weight: 500; }
.g-cuerpo .g-fuentes a.g-volver { margin-left: 4px; font: 500 11px/1 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; }

/* ===== Línea del tiempo textual (.g-crono), 12 oct 2026 ===== */
.g-cuerpo ol.g-crono { list-style: none; max-width: 36rem; margin: 1.6em 0 1.4em; padding: 0; position: relative; }
.g-crono::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 14px; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); border-radius: 2px; }
.g-crono li { position: relative; padding: 0 0 1.3em 34px; }
.g-crono li:last-child { padding-bottom: 0; }
.g-crono li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box; }
.g-crono li.is-lanza::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.g-crono .g-crono-t { display: block; margin-bottom: 3px; font: 500 11.5px/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.g-crono b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--text); }
.g-crono p { margin: 4px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--text-muted); }

/* FORMAS: los botones de las guías siguen el sistema (--r-sm), no son pastilla */
.g-cuerpo .g-sky a.g-boton, .g-cuerpo .g-precio a.g-boton--grande { border-radius: var(--r-sm); }