/* ============================================================
   Guía privada de servicios y Color Grading
   Se apoya en las variables de styles.css (Cinematic Noir):
   --bg, --bg-soft, --bg-card, --line, --ink, --ink-2, --ink-3,
   --teal, --teal-deep, --maxw. No redefine ninguna.
   ============================================================ */

.g-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
/* En monitores grandes el contenedor crece para no dejar el contenido
   encajonado en una columna estrecha con medio monitor vacío al lado. */
@media (min-width:1400px){ .g-wrap{max-width:1400px;padding:0 40px} }
@media (min-width:1700px){ .g-wrap{max-width:1640px} }

/* ---------- Cabecera ---------- */
.g-hero{padding:120px 0 44px;border-bottom:1px solid var(--line)}
.g-hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);border:1px solid var(--line-strong);
  border-radius:999px;padding:6px 14px;margin-bottom:22px}
.g-hero h1{font-size:clamp(30px,5vw,54px);margin:0 0 16px}
.g-hero__bajada{font-size:clamp(15px,1.6vw,19px);color:var(--ink-2);max-width:760px}
.g-hero__privado{margin-top:20px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start}

/* ---------- Disposición: índice + contenido ---------- */
.g-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:56px;padding:48px 0 110px;align-items:start}
/* A partir de 1400 px entra una tercera columna con el índice de la sección
   y el contacto: el texto no se estira de más y la pantalla se llena. */
@media (min-width:1400px){
  .g-layout{grid-template-columns:280px minmax(0,1fr) 300px;gap:52px}
}
@media (min-width:1700px){
  .g-layout{grid-template-columns:300px minmax(0,1fr) 320px;gap:64px}
}
.g-side{position:sticky;top:96px;max-height:calc(calc(100vh * var(--zv,1)) - 130px);overflow-y:auto;padding-right:6px}
.g-side::-webkit-scrollbar{width:5px}
.g-side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.g-side__t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.g-side a{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:9px;
  font-size:13.5px;color:var(--ink-2);line-height:1.4;transition:background .15s ease,color .15s ease}
.g-side a:hover{background:rgba(255,255,255,.045);color:var(--ink)}
.g-side a.is-active{background:rgba(42,144,224,.13);color:var(--ink);box-shadow:inset 2px 0 0 var(--teal)}
.g-side__n{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:17px}

/* ---------- Índice en tarjetas (portada de la guía) ---------- */
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(264px,100%),1fr));gap:16px;margin-top:8px}
.g-card{display:block;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.g-card:hover{border-color:var(--line-strong);transform:translateY(-2px);background:#15151c}
.g-card__ico{font-size:22px;line-height:1;margin-bottom:12px;height:48px;display:flex;align-items:center}
.g-card__ico img{width:48px;height:48px;border-radius:11px}
.g-side__ico{width:20px;height:20px;border-radius:5px;flex:0 0 auto;margin-top:1px}
.g-main__titulo{display:flex;align-items:center;gap:14px}
.g-main__ico{width:52px;height:52px;border-radius:12px;flex:0 0 auto}
.g-card__n{font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.g-card h3{font-size:18px;margin:6px 0 8px}
.g-card p{font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* ---------- Contenido ---------- */
.g-main{min-width:0}
.g-main__head{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.g-main__n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.g-main h2{font-size:clamp(26px,3.6vw,40px);margin:8px 0 10px}
.g-main__resumen{color:var(--ink-2);font-size:16px;max-width:70ch}

.g-h3{font-size:clamp(19px,2.2vw,24px);margin:38px 0 12px;color:var(--ink)}
.g-h4{font-size:16px;margin:26px 0 8px;color:var(--ink);font-weight:600}
.g-p{color:var(--ink-2);margin:0 0 14px;max-width:78ch;font-size:15.5px}
@media (min-width:1400px){ .g-p{font-size:16px;line-height:1.7} }
.g-p code,.g-lista code,.g-tabla code,.g-pasos code{background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;color:var(--ink)}
.g-p strong,.g-lista strong,.g-pasos strong,.g-tabla strong{color:var(--ink);font-weight:600}

.g-clave{margin:22px 0;padding:18px 22px;border-left:3px solid var(--teal);background:rgba(42,144,224,.07);
  border-radius:0 12px 12px 0;font-size:17px;color:var(--ink);font-weight:500;max-width:78ch}

.g-lista{margin:0 0 16px;padding-left:20px;max-width:78ch}
.g-lista li{color:var(--ink-2);margin-bottom:9px;font-size:15.5px;line-height:1.6}
.g-lista li::marker{color:var(--teal)}

.g-pasos{margin:0 0 18px;padding-left:0;list-style:none;counter-reset:g-paso;max-width:78ch}
.g-pasos li{counter-increment:g-paso;position:relative;padding-left:44px;margin-bottom:13px;
  color:var(--ink-2);font-size:15.5px;line-height:1.6}
.g-pasos li::before{content:counter(g-paso);position:absolute;left:0;top:1px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(42,144,224,.14);border:1px solid rgba(42,144,224,.34);
  color:var(--teal);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Tablas ---------- */
.g-tabla-scroll{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px}
.g-tabla{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.g-tabla th{text-align:left;padding:13px 16px;background:rgba(255,255,255,.04);color:var(--ink);
  font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.g-tabla td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.55}
.g-tabla tr:last-child td{border-bottom:none}
.g-tabla tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- Cajas ---------- */
.g-caja{margin:20px 0;padding:16px 20px;border-radius:12px;font-size:15px;line-height:1.6;max-width:78ch}
.g-caja--nota{background:rgba(42,144,224,.08);border:1px solid rgba(42,144,224,.24);color:var(--ink-2)}
.g-caja--nota::before{content:"i";display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--teal);color:#04263f;font-weight:800;
  font-size:12px;margin-right:9px;vertical-align:-3px;font-family:"Archivo",sans-serif}
.g-caja--aviso{background:rgba(255,140,66,.09);border:1px solid rgba(255,140,66,.28);color:var(--ink-2)}
.g-caja--aviso::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--orange);color:#2a1400;font-weight:800;
  font-size:12px;margin-right:9px;vertical-align:-3px;font-family:"Archivo",sans-serif}
.g-caja strong{color:var(--ink)}

.g-ascii{margin:18px 0;padding:18px 20px;background:#08080b;border:1px solid var(--line);border-radius:12px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;
  color:var(--ink-2);overflow-x:auto;white-space:pre}

.g-scroll-wrap{margin:22px 0 30px}
.g-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.g-scroll::-webkit-scrollbar{height:9px}
.g-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.g-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:99px}
.g-scroll > *{scroll-snap-align:start;flex:0 0 auto}
.g-scroll-pista{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}

.g-color{width:380px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding-bottom:20px}
.g-color__tira{display:flex;height:66px}
.g-color__tira span{flex:1}
.g-color__cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:15px 20px 8px}
.g-color__cab h4{font-size:23px;margin:0;color:var(--ink)}
.g-color__cab code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.g-color__linea{margin:0;padding:10px 22px 0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.g-color__rot{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:3px}

/* ---------- Paletas copiables ---------- */
.g-paleta{width:340px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding-bottom:18px}
.g-paleta__tira{display:flex;height:110px}
.g-chip{flex:1;border:0;padding:0;cursor:pointer;position:relative;transition:flex .22s ease}
.g-chip:hover{flex:1.6}
.g-chip span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:.05em;color:rgba(0,0,0,.6);
  background:rgba(255,255,255,.55);border-radius:3px;padding:1px 3px;
  opacity:0;transition:opacity .18s ease;white-space:nowrap}
.g-chip:hover span{opacity:1}
.g-paleta__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px 4px}
.g-paleta__cab h4{font-size:18px;margin:0;color:var(--ink)}
.g-paleta__copiar{background:transparent;border:1px solid var(--line-strong);color:var(--ink-3);border-radius:7px;
  font-size:11px;padding:5px 10px;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;flex:0 0 auto}
.g-paleta__copiar:hover{color:var(--teal);border-color:var(--teal)}
.g-paleta__desc{margin:7px 0 0;padding:0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* Aviso de copiado */
.g-copiado{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;
  background:var(--teal);color:#04263f;font-weight:700;font-size:13px;padding:10px 18px;border-radius:9px;
  font-family:ui-monospace,Consolas,monospace;box-shadow:0 8px 26px rgba(0,0,0,.5)}

.g-fig{margin:22px 0 26px;max-width:100%}
.g-fig img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#0d0d11}
.g-fig figcaption{margin-top:9px;font-size:13px;color:var(--ink-3);line-height:1.5}

.g-fuente{margin:6px 0 18px;font-size:12.5px;color:var(--ink-3)}
.g-fuente a{color:var(--teal);border-bottom:1px solid transparent;transition:border-color .15s}
.g-fuente a:hover{border-bottom-color:var(--teal)}

/* ---------- Navegación entre secciones ---------- */
.g-nav{display:flex;gap:14px;justify-content:space-between;margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.g-nav a{flex:1;max-width:300px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s ease,background .2s ease}
.g-nav a:hover{border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.g-nav__lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.g-nav__tit{font-size:15px;color:var(--ink);font-weight:500}
.g-nav a:last-child{text-align:right}

/* ---------- Barra superior propia ---------- */
.g-top{position:sticky;top:0;z-index:60;background:rgba(10,10,12,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.g-top__in{display:flex;align-items:center;gap:18px;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:13px 28px}
.g-top__brand{display:flex;align-items:center;gap:11px}
.g-top__brand img{width:30px;height:30px}
.g-top__brand b{font-family:"Archivo",sans-serif;font-size:14.5px;display:block;line-height:1.2}
.g-top__brand small{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.g-lang{display:flex;gap:3px;flex-wrap:wrap}
.g-lang a{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;
  font-size:12px;color:var(--ink-3);transition:background .15s,color .15s}
.g-lang a:hover{background:rgba(255,255,255,.06);color:var(--ink-2)}
.g-lang a.is-active{background:rgba(42,144,224,.16);color:var(--ink)}
.g-lang img{width:17px;height:12px;border-radius:2px}

/* ---------- Pie ---------- */
.g-foot{border-top:1px solid var(--line);padding:40px 0 60px;text-align:center}
.g-foot__creds{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.g-foot__pill{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.g-foot__cp{font-size:12px;color:var(--ink-3)}
.g-foot__cta{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:12px 24px;
  border-radius:10px;background:var(--teal);color:#04263f;font-weight:700;font-size:14px}
.g-foot__cta:hover{background:#3aa0f0}

/* ---------- Página de enlace no válido ---------- */
.g-404{min-height:calc(78vh * var(--zv,1));display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 28px;gap:14px}
.g-404 h1{font-size:clamp(24px,4vw,38px)}
.g-404 p{color:var(--ink-2);max-width:52ch}

/* ---------- Móvil ---------- */
@media (max-width:900px){
  .g-layout{grid-template-columns:1fr;gap:0;padding-top:30px}
  .g-side{position:static;max-height:none;margin-bottom:34px;padding:16px;border:1px solid var(--line);border-radius:12px}
  .g-hero{padding:70px 0 34px}
  .g-nav{flex-direction:column}
  .g-nav a{max-width:none}
  .g-nav a:last-child{text-align:left}
}
@media print{
  .g-top,.g-side,.g-nav,.g-foot__cta{display:none}
  .g-layout{grid-template-columns:1fr}
  body{background:#fff;color:#111}
  .g-p,.g-lista li,.g-tabla td{color:#333}
}

/* ---------- Columna derecha (solo en pantallas anchas) ---------- */
.g-aside{display:none}
@media (min-width:1400px){
  .g-aside{display:block;position:sticky;top:96px;max-height:calc(calc(100vh * var(--zv,1)) - 130px);overflow-y:auto;padding-left:4px}
  .g-aside::-webkit-scrollbar{width:5px}
  .g-aside::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
}
.g-aside__t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.g-aside__nav a{display:block;padding:7px 12px;border-radius:8px;font-size:13px;color:var(--ink-3);
  line-height:1.45;border-left:2px solid transparent;transition:color .15s ease,background .15s ease}
.g-aside__nav a:hover{color:var(--ink-2);background:rgba(255,255,255,.035)}
.g-aside__nav a.is-active{color:var(--ink);border-left-color:var(--teal);background:rgba(42,144,224,.09)}
.g-aside__card{margin-top:26px;padding:18px;border:1px solid var(--line);border-radius:13px;background:var(--bg-card)}
.g-aside__card h4{font-size:14.5px;margin:0 0 7px;color:var(--ink)}
.g-aside__card p{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0 0 12px}
.g-aside__card a{display:block;text-align:center;padding:9px 14px;border-radius:9px;background:var(--teal);
  color:#04263f;font-weight:700;font-size:13px}
.g-aside__card a:hover{background:#3aa0f0}
.g-aside__meta{margin-top:18px;font-size:11.5px;color:var(--ink-3);line-height:1.6}

/* ============================================================
   MODO CLARO
   La guía es oscura por defecto (identidad de marca). Aquí se
   redefinen las MISMAS variables que usa styles.css, así que
   todo el contenido cambia sin tocar una sola regla más.
   ============================================================ */
html[data-theme="light"]{
  --bg:#f7f8fa;
  --bg-soft:#eef1f5;
  --bg-card:#ffffff;
  --line:rgba(16,24,32,.10);
  --line-strong:rgba(16,24,32,.20);
  --ink:#131a20;
  --ink-2:#3f4b55;
  --ink-3:#6b7883;
  --teal:#1a75bb;
  --teal-deep:#12588c;
  --on-accent:#ffffff;
}
html[data-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-theme="light"] .g-top{background:rgba(247,248,250,.9)}
html[data-theme="light"] .g-side a:hover,
html[data-theme="light"] .g-nav a:hover,
html[data-theme="light"] .g-aside__nav a:hover{background:rgba(16,24,32,.045)}
html[data-theme="light"] .g-side a.is-active{background:rgba(26,117,187,.10)}
html[data-theme="light"] .g-aside__nav a.is-active{background:rgba(26,117,187,.10)}
html[data-theme="light"] .g-card:hover{background:#fbfcfd}
html[data-theme="light"] .g-tabla th{background:rgba(16,24,32,.04)}
html[data-theme="light"] .g-tabla tr:hover td{background:rgba(16,24,32,.02)}
html[data-theme="light"] .g-ascii{background:#eef1f5;color:var(--ink-2)}
html[data-theme="light"] .g-p code,
html[data-theme="light"] .g-lista code,
html[data-theme="light"] .g-pasos code,
html[data-theme="light"] .g-tabla code{background:rgba(16,24,32,.06)}
html[data-theme="light"] .g-caja--nota{background:rgba(26,117,187,.07);border-color:rgba(26,117,187,.22)}
html[data-theme="light"] .g-caja--aviso{background:rgba(214,110,30,.09);border-color:rgba(214,110,30,.28)}
html[data-theme="light"] .g-caja--aviso::before{background:#d66e1e;color:#fff}
html[data-theme="light"] .g-clave{background:rgba(26,117,187,.07)}
html[data-theme="light"] .g-fig img{background:#eef1f5}
html[data-theme="light"] .g-foot__cta{color:#fff}
html[data-theme="light"] .g-aside__card a{color:#fff}
html[data-theme="light"] .g-copiado{color:#fff}
/* Las figuras y los iconos son oscuros por naturaleza: se les da un
   respaldo suave para que no floten sobre el blanco. */
html[data-theme="light"] .g-card__ico img,
html[data-theme="light"] .g-side__ico,
html[data-theme="light"] .g-main__ico{background:#131a20}

/* ---------- Botón de tema ---------- */
.g-top__acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.g-tema{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);
  font-family:inherit;font-size:12px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.g-tema:hover{color:var(--ink);border-color:var(--teal)}
.g-tema svg{width:15px;height:15px}
.g-tema__sol{display:none}
html[data-theme="light"] .g-tema__sol{display:block}
html[data-theme="light"] .g-tema__luna{display:none}
@media (max-width:560px){ .g-tema__txt{display:none} }

/* ---------- Botón de llamada a la acción dentro de una sección ---------- */
.g-boton-wrap{margin:22px 0 6px}
.g-boton{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:11px;
  background:var(--teal);color:var(--on-accent,#fff);text-decoration:none;font-weight:700;font-size:15px;
  transition:background .15s ease,transform .15s ease}
.g-boton:hover{background:var(--teal-deep);transform:translateY(-1px)}
.g-boton svg{width:17px;height:17px}