/* ============================================================
   NINOT — tema G "digital" (15/10/2026)
   Se carga DESPUÉS de styles.css en todas las páginas.
   Parte 1: re-skin de los componentes existentes (oscuro, Montserrat, rojo NINOT).
   Parte 2: componentes de la home nueva (prefijo g-).
   Las demos de formatos (.phone, .fake) y las maquetas de panel siguen claras:
   imitan la página real de un medio y la interfaz real del dashboard.
   ============================================================ */

@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --g-space: #0b0b0f;
  --g-space-2: #121218;
  --g-card: #18181f;
  --g-card-2: #1f1f28;
  --g-line: #2c2c38;
  --g-white: #fff;
  --g-off: #f6f6f9;
  --g-muted: #a3a3ae;
  --g-muted-2: #c9c9d2;
  --g-cyan: #ff5a36;
  --g-accent: #ff4d2e;
  --g-accent-2: #ff7a3d;
  --g-accent-deep: #c8360f;
  --g-btn: #d83a12;
  --g-accent-soft: rgba(255, 77, 46, .11);
  --g-glow: rgba(255, 77, 46, .32);
  --g-ok: #4ee0b5;
  --g-f: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --g-r: 14px;
  --g-ease: cubic-bezier(.22, 1, .36, 1);

  /* tokens viejos reasignados al tema oscuro */
  --serif: var(--g-f);
  --sans: var(--g-f);
  --paper: var(--g-space);
  --paper-2: var(--g-space-2);
  --ink: #fff;
  --ink-2: var(--g-card);
  --ink-60: rgba(255, 255, 255, .68);
  --ink-30: rgba(255, 255, 255, .32);
  --accent: var(--g-accent);
  --hair: 1px solid rgba(255, 255, 255, .09);
  --hair-dark: 1px solid rgba(255, 255, 255, .09);
  --wrap: 1240px;
}
/* Las maquetas claras recuperan la paleta original de papel y tinta. */
.phone, .fake, .dlive__ui, .shot__frame, .dash, .player, .kw-pop, .bsearch-pop {
  --paper: #fbfaf7; --paper-2: #f3f1ea; --ink: #141311; --ink-2: #1d1b18;
  --ink-60: rgba(20, 19, 17, .62); --ink-30: rgba(20, 19, 17, .30);
  --hair: 1px solid rgba(20, 19, 17, .16);
}
/* La página de diario de las demos conserva su tipografía de diario. */
.phone, .fake { --serif: Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, sans-serif; }
.phone h1, .phone h2, .phone h3, .fake h1, .fake h2, .fake h3, .fake__h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0; line-height: 1.14; }
/* La maqueta del panel usa la tipografía de la marca. */
.dlive__ui, .dash { --serif: var(--g-f); --sans: var(--g-f); }

/* ---------- Base ---------- */
html { background: var(--g-space); }
body { background: var(--g-space); color: #fff; font-family: var(--g-f); font-size: 16px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--g-f); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
h3 { font-weight: 700; letter-spacing: -.015em; }
::selection { background: var(--g-accent); color: #fff; }
:focus-visible { outline: 3px solid var(--g-cyan); outline-offset: 3px; border-radius: 6px; }
.skip { background: #fff; color: var(--g-space); border-radius: 8px; }
em { font-style: italic; }

/* ---------- Header ---------- */
.site-head {
  background: rgba(11, 11, 15, .78);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  min-height: 72px;
}
.brand { color: #fff; }
.brand__logo { height: 18px; }
.brand__logo rect { fill: var(--g-accent); }
.site-nav a { font-family: var(--g-f); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.site-nav a:hover, .site-nav a[aria-current] { color: #fff; }
.lang { border: 0; gap: 2px; }
.lang button { font-family: var(--g-f); font-weight: 700; font-size: 12px; color: var(--g-muted); padding: 10px 6px; min-height: 40px; border: 0 !important; background: none !important; }
.lang button[aria-pressed="true"] { color: var(--g-cyan); }
.lang button:hover { color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px; border: 0;
  background: var(--g-btn); color: #fff; font-family: var(--g-f); font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .14s var(--g-ease), box-shadow .22s var(--g-ease), background .22s;
}
.btn:hover { background: #e4431a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.btn:active { transform: scale(.97); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 13px; }
.btn--big { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn--paper { background: var(--g-btn); color: #fff; }
.btn--paper:hover { background: var(--g-btn); }
.btn--ghost { background: rgba(255, 255, 255, .04); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn--ghost:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ---------- Hero de páginas internas ---------- */
.hero { position: relative; padding-top: clamp(64px, 12vh, 132px); }
/* Brillo de fondo de las páginas internas: en el fondo del body, para no desbordar en ancho. */
body:not(.g-home) {
  background:
    radial-gradient(ellipse 60% 520px at 12% 0, var(--g-accent-soft), transparent 70%) no-repeat,
    radial-gradient(ellipse 45% 420px at 92% 260px, rgba(255, 77, 46, .07), transparent 70%) no-repeat,
    var(--g-space);
}
.kicker {
  display: flex; width: fit-content; align-items: center; gap: 8px;
  font-family: var(--g-f); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-accent-2);
}
.hero__title { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.hero__title em { font-style: normal; font-weight: 800; color: var(--g-accent); }
.section__lead, .hero__note { color: var(--g-muted-2); font-size: 17px; }

/* ---------- Secciones ---------- */
.section__head, .section--dark .section__head { border-bottom: 0; padding-bottom: 0; }
.dlive__toggle, .section--dark .dlive__toggle { color: #fff; border-color: rgba(255, 255, 255, .3); border-radius: 10px; font-family: var(--g-f); }
.section__head h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.section__num { font-family: var(--g-f); font-style: normal; font-weight: 700; font-size: 14px; color: var(--g-cyan); }
.section--tint { background: var(--g-space-2); }
.section--dark { background: var(--g-space); color: #fff; }
.section--dark .section__lead { color: var(--g-muted-2); }

/* Columnas y pasos: tarjetas con borde luminoso */
.cols { gap: 18px; }
.col {
  border-top: 0 !important; padding: 26px 24px !important; border-radius: var(--g-r);
  background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line);
  transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease);
}
.col:hover { box-shadow: inset 0 0 0 1px #3a3a48; }
.col h3 { font-size: 18px; color: #fff; margin-bottom: 8px; }
.col p { color: var(--g-muted); font-size: 15px; }
.about-values .col h3 { color: #fff; }
.steps { counter-reset: gstep; }
.steps--list .step, .step {
  border-top: 0 !important; border-radius: 12px; padding: 20px 22px 20px 72px !important; position: relative;
  background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); margin-bottom: 12px;
}
.step::before {
  counter-increment: gstep; content: counter(gstep, decimal-leading-zero);
  position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--g-btn);
}
.step h3 { font-size: 18px; color: #fff; }
.step p { color: var(--g-muted); }

/* Checklist */
.checklist li { border-color: rgba(255, 255, 255, .09) !important; color: var(--g-muted-2); }
.checklist li::before { width: 8px; height: 8px; border-radius: 50%; top: 1.15em; background: var(--g-cyan); }

/* Bloque de contacto final */
.section--contact {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 10% 30%, #2a0d07, transparent 70%),
              radial-gradient(ellipse 60% 70% at 95% 90%, rgba(255, 77, 46, .1), transparent 70%), var(--g-space-2) !important;
}
.contact__lead { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 800; }

/* ---------- Footer ---------- */
.site-foot, .site-foot--dark { background: var(--g-space); color: var(--g-muted); border-top: 1px solid rgba(255, 255, 255, .07); font-family: var(--g-f); font-size: 13px; }
.site-foot .brand { color: #fff; }
.foot-links a { color: var(--g-muted-2); }
.foot-links a:hover { color: #fff; }

/* ---------- Página de formato ---------- */
.fmt-hero { background: radial-gradient(ellipse 60% 70% at 12% 30%, var(--g-accent-soft), transparent 65%), var(--g-space) !important; }
.crumb { color: var(--g-muted); font-family: var(--g-f); }
.crumb:hover { color: #fff; }
.fmt-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.75rem); font-weight: 800; }
.fmt-hero__tag { font-family: var(--g-f); font-style: normal; font-weight: 700; font-size: 20px; color: var(--g-accent-2); }
.fmt-hero__long { color: var(--g-muted-2); }
.layouts__btn { font-family: var(--g-f); border-radius: 10px !important; }
.fmt-link { border-color: rgba(255, 255, 255, .09) !important; font-family: var(--g-f); }
.fmt-link__name { font-family: var(--g-f) !important; font-weight: 700; }
.fmt-link:hover .fmt-link__name { color: var(--g-accent-2); }
.demo__stage > p, .demo__stage .size { color: var(--g-muted); }

/* ---------- Blog ---------- */
.posts { gap: 20px; }
.post-card {
  border-top: 0 !important; padding: 24px !important; border-radius: var(--g-r);
  background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line);
  transition: transform .3s var(--g-ease), box-shadow .3s var(--g-ease);
}
.post-card:hover { box-shadow: inset 0 0 0 1px #3a3a48; }
.post-card__tag { font-family: var(--g-f) !important; font-style: normal !important; font-size: 12px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent-2) !important; }
.post-card__title { font-family: var(--g-f) !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.3 !important; color: #fff; }
.post-card:hover .post-card__title { color: #fff; }
.post-card__x { color: var(--g-muted) !important; font-size: 14px !important; }
.post-card .card__go { color: var(--g-cyan); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.post { max-width: 72ch; }
.post h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); font-weight: 800; line-height: 1.08; }
.post__meta { color: var(--g-muted); }
.post p, .post li { color: #dcdce3; font-size: 17px; line-height: 1.72; }
.post h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin: 1.8em 0 .5em; }
.post a { color: var(--g-cyan); }
.post blockquote { border-left: 3px solid var(--g-accent); margin-left: 0; padding-left: 20px; color: #fff; }
.post .btn, .post__cta .btn { color: #fff; }
.sources { color: var(--g-muted); border-color: rgba(255, 255, 255, .09) !important; }
.sources a { color: var(--g-muted-2); }

/* ---------- Contacto ---------- */
.cform { padding: 28px; border-radius: var(--g-r); background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); }
.cform label { font-family: var(--g-f); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #cfcfd8; }
.cform input, .cform textarea, .cform select {
  font-family: var(--g-f); font-size: 15px; color: #fff; background: #0f0f14 !important;
  border: 1px solid #33333f !important; border-radius: 8px !important; padding: 13px 14px; min-height: 48px;
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--g-accent) !important; box-shadow: 0 0 0 4px var(--g-accent-soft); }
.cform .btn { width: 100%; }
.cf-err { color: #ff8a73; }
.cform__status.is-ok { color: var(--g-ok); }
.cform__status.is-err { color: #ff8a73; }
.who, .contact__mails a { color: #fff; }

/* ---------- Páginas legales ---------- */
.legal p, .legal li { color: var(--g-muted-2); }
.legal a { color: var(--g-cyan); }

/* ---------- Dashboard (página de plataforma) ---------- */
.mods { gap: 18px; }
.mod { border-top: 0 !important; padding: 22px !important; border-radius: 12px; background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); }
.mod h3 { color: #fff; }
.mod p { color: var(--g-muted); }
.dlive__ui { border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.shot__frame { border-radius: 14px; overflow: hidden; }

/* Ticker / bandas viejas */
.band { background: var(--g-card); color: var(--g-muted-2); border-color: rgba(255, 255, 255, .07); }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .col, .post-card, .btn { transition: none !important; }
}

/* =====================================================================
   PARTE 2 — HOME (componentes g-)
   ===================================================================== */
.g-home .site-head { position: fixed; left: 0; right: 0; top: 0; z-index: 100; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s; }
.g-home .site-head.is-scrolled { background: rgba(11, 11, 15, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, .06); }
.g-wrap { width: min(100% - 2 * clamp(20px, 4vw, 48px), 1240px); margin-inline: auto; }
.g-hl { color: var(--g-accent); }
.g-hl-i { font-style: italic; }
.g-t { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.g-lead { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--g-muted); max-width: 58ch; }
.g-sec { padding: clamp(88px, 10vw, 140px) 0; position: relative; }
.g-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.g-btn-ghost { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.g-btn-ghost:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.btn svg { width: 16px; height: 16px; transition: transform .2s var(--g-ease); }
.btn:hover svg { transform: translateX(3px); }

/* hero */
.g-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 112px 0 40px;
  background: radial-gradient(ellipse 70% 60% at 18% 28%, var(--g-accent-soft), transparent 60%), radial-gradient(ellipse 60% 50% at 88% 75%, rgba(255, 77, 46, .12), transparent 60%), var(--g-space); }
.g-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; display: block; }
.g-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(180deg, transparent, var(--g-space)); pointer-events: none; }
.g-hero .g-wrap { position: relative; z-index: 2; }
.g-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; color: #dcdce3; margin: 0; }
.g-pill b { background: var(--g-btn); color: #fff; border-radius: 4px; padding: 3px 9px; font-size: 11px; }
.g-hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); font-weight: 700; letter-spacing: -.012em; word-spacing: .04em; line-height: 1.02; margin: 0 0 22px; max-width: 20ch; }
.g-hero h1 .g-hl { display: block; }
.g-hero .g-lead { color: var(--g-muted-2); font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); }
.g-hero .g-lead strong { color: var(--g-cyan); font-weight: 600; }
.g-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.g-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: clamp(36px, 6vh, 64px) 0 0; padding: 0; list-style: none; }
.g-kpi { padding: 18px 20px; border-radius: 10px; background: rgba(24, 24, 31, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.g-kpi b { display: flex; align-items: baseline; gap: 6px; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; color: var(--g-cyan); letter-spacing: -.03em; line-height: 1; }
.g-kpi b small { font-size: 13px; font-weight: 600; color: var(--g-muted); letter-spacing: 0; }
.g-kpi .d { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #e9e9ef; }

/* cinta de medios */
.g-trust { padding: 34px 0 30px; border-block: 1px solid rgba(255, 255, 255, .06); }
.g-trust p { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); margin: 0 0 18px; }
.g-trust p a { color: #dcdce3; }
.g-marq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.g-marq-t { display: flex; align-items: center; gap: 64px; width: max-content; animation: g-marq 40s linear infinite; }
.g-marq:hover .g-marq-t { animation-play-state: paused; }
@keyframes g-marq { to { transform: translateX(-50%); } }

/* tarjetas de cifras */
.g-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.g-stat { position: relative; padding: 30px 28px; border-radius: var(--g-r); background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); overflow: hidden; transition: box-shadow .4s var(--g-ease), transform .4s var(--g-ease); }
.g-stat::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--g-accent), transparent 45%, transparent 60%, rgba(255, 77, 46, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .3; pointer-events: none; }
.g-stat:hover { box-shadow: inset 0 0 0 1px #3a3a48; }
.g-stat .n { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); font-weight: 500; letter-spacing: -.04em; color: var(--g-cyan); line-height: 1; }
.g-stat .n { gap: 12px; }
.g-stat .n small { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); font-weight: 700; font-style: normal; color: #e9e9ef; letter-spacing: -.01em; }
.g-stat hr { border: 0; height: 1px; background: var(--g-line); margin: 16px 0 14px; }
.g-stat h3 { font-size: 17px; line-height: 1.3; margin: 0 0 8px; }
.g-stat p { font-size: 14px; color: var(--g-muted); margin: 0; }

/* pasos (sección clara) */
.g-light { background: var(--g-off); color: #121212; overflow: hidden; }
.g-light .g-lead { color: #5d5d66; }
.g-light .g-lead strong { color: #121212; }
.g-steps { display: grid; grid-template-columns: 330px 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 48px; align-items: start; }
.g-tabs { display: grid; gap: 10px; }
.g-tab { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 46px; padding: 0 20px 0 16px; border-radius: 10px; border: 0; background: #fff; box-shadow: 0 1px 3px rgba(12, 12, 13, .08), inset 0 0 0 1px #e6e6ec; font: 600 14px/1 var(--g-f); color: #3a3a42; cursor: pointer; transition: background .22s, color .22s, box-shadow .22s, transform .14s; }
.g-tab span { font-size: 11px; font-weight: 700; color: #6f6f78; }
.g-tab:hover { box-shadow: 0 4px 14px -4px rgba(12, 12, 13, .18), inset 0 0 0 1px #d6d6de; }
.g-tab:active { transform: scale(.97); }
.g-tab[aria-selected="true"] { background: var(--g-btn); color: #fff; box-shadow: none; width: min(100%, 280px); }
.g-tab[aria-selected="true"] span { color: #fff; }
.g-tab-desc { font-size: 14px; color: #5d5d66; max-width: 30ch; padding: 4px 0 6px 16px; margin: 0; }
.g-tab-desc b { color: #121212; }
.g-app { border-radius: var(--g-r); background: #fff; color: #121212; box-shadow: 0 30px 80px -30px rgba(12, 12, 13, .35), inset 0 0 0 1px #e6e6ec; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; }
.g-app-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f7f7fa; border-bottom: 1px solid #ececf2; font-size: 12px; font-weight: 600; color: #6f6f78; }
.g-app-top i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.g-app-top i:nth-child(2) { background: #febc2e; } .g-app-top i:nth-child(3) { background: #28c840; }
.g-app-top em { font-style: normal; margin-left: 8px; }
.g-app-body { flex: 1; padding: 24px; }
.g-pane { animation: g-pane .45s var(--g-ease); }
.g-pane[hidden] { display: none; }
@keyframes g-pane { from { opacity: 0; transform: translateY(10px); } }
.g-p-h { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.g-p-s { font-size: 13px; color: #6f6f78; margin: 0 0 18px; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { padding: 8px 12px; border-radius: 8px; background: #f3f3f7; font-size: 13px; font-weight: 600; color: #3a3a42; }
.g-chip.on { background: var(--g-accent-soft); color: #b2300d; box-shadow: inset 0 0 0 1px var(--g-accent); }
.g-rows { display: grid; gap: 8px; margin-top: 16px; }
.g-rows div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f7f7fa; font-size: 13.5px; font-weight: 600; }
.g-rows div span:last-child { font-weight: 700; color: #6f6f78; font-size: 12.5px; text-align: right; }
.g-rows .ok { color: #0f8a6b !important; }
.g-code { font: 500 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f0f14; color: #e7e7ee; border-radius: 12px; padding: 16px 18px; overflow-x: auto; white-space: pre; margin: 0; }
.g-code .k { color: var(--g-cyan); } .g-code .c { color: #8d8d9a; } .g-code .a { color: var(--g-accent-2); }
.g-status { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; font-weight: 700; color: #0f8a6b; }
.g-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #18b290; box-shadow: 0 0 0 4px rgba(24, 178, 144, .18); }
.g-dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.g-dash div { padding: 12px; border-radius: 12px; background: #f7f7fa; }
.g-dash small { display: block; font-size: 11.5px; font-weight: 600; color: #6f6f78; }
.g-dash b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.g-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.g-bars li { display: grid; grid-template-columns: 120px 1fr 64px; gap: 12px; align-items: center; font-size: 12.5px; font-weight: 600; }
.g-bars i { display: block; height: 9px; border-radius: 9px; background: #efeff4; overflow: hidden; }
.g-bars i::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--g-accent); transform-origin: left; animation: g-grow 1s var(--g-ease) both; }
.g-bars b { text-align: right; font-variant-numeric: tabular-nums; }
@keyframes g-grow { from { transform: scaleX(0); } }
.g-demo { font-size: 11.5px; color: #7a7a85; margin: 14px 0 0; }

/* formatos */
.g-fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.g-fmt { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: var(--g-r); background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); text-decoration: none; color: #fff; transition: box-shadow .3s var(--g-ease), transform .3s var(--g-ease), background .3s; }
.g-fmt:hover { background: var(--g-card-2); box-shadow: inset 0 0 0 1px rgba(255, 77, 46, .55); }
.g-fmt h3 { font-size: 17px; margin: 0 0 4px; }
.g-fmt p { font-size: 13.5px; color: var(--g-muted); line-height: 1.45; margin: 0; }
.g-fmt .go { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--g-cyan); letter-spacing: .04em; text-transform: uppercase; }
.g-ph { flex: none; width: 74px; height: 132px; border-radius: 10px; background: #0f0f14; box-shadow: inset 0 0 0 2px #34343f; position: relative; overflow: hidden; padding: 16px 9px 8px; }
.g-ph i { display: block; height: 4px; border-radius: 3px; background: #3a3a46; margin-bottom: 5px; }
.g-ph i.s { width: 60%; }
.g-ph .im { display: block; height: 24px; border-radius: 4px; background: #2a2a35; margin-bottom: 6px; position: relative; }
.g-ph em { position: absolute; display: block; background: var(--g-accent); border-radius: 2px; animation: g-blink 2.6s ease-in-out infinite alternate; }
@keyframes g-blink { 0%, 35% { opacity: .6; } 100% { opacity: 1; } }
.e-anchor { left: 5px; right: 5px; bottom: 5px; height: 12px; }
.e-header { left: 5px; right: 5px; top: 5px; height: 10px; }
.e-video { position: relative !important; height: 28px; margin: 4px 0 6px; }
.e-inimage { left: 4px; right: 4px; bottom: 3px; height: 6px; }
.e-native { position: relative !important; height: 22px; margin-top: 4px; background: none !important; box-shadow: none !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 3px; }
.e-native::before, .e-native::after { content: ""; background: var(--g-accent); border-radius: 2px; }
.e-inter { inset: 0; border-radius: 0 !important; }
.e-rew { left: 8px; right: 8px; top: 36px; height: 46px; }
.e-search { position: relative !important; height: 14px; margin: 4px 0 6px; }
.e-kw { position: relative !important; width: 30px; height: 6px; margin: 2px 0 6px 10px; }

/* panel / factura */
.g-feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 18px; background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); }
.g-feature .g-t { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); }
.g-feature .g-lead { margin-top: 18px; }
.g-checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.g-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 500; color: #e2e2e8; }
.g-checks svg { flex: none; width: 22px; height: 22px; color: var(--g-cyan); margin-top: 1px; }
.g-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; font-size: 14px; color: var(--g-cyan); text-decoration: none; min-height: 44px; }
.g-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.g-link svg { width: 16px; height: 16px; flex: none; }
.g-screen { border-radius: var(--g-r); background: #101012; box-shadow: inset 0 0 0 1px #2e2e3a, 0 30px 70px -40px rgba(0, 0, 0, .9); padding: 20px; overflow: hidden; }
.g-screen .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12.5px; font-weight: 700; color: var(--g-muted); }
.g-screen .top span:last-child { padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.g-screen .big { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.g-screen .big small { display: block; font-size: 12.5px; font-weight: 600; color: var(--g-muted); letter-spacing: 0; margin-bottom: 4px; }
.g-chart { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin: 10px 0 16px; }
.g-chart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--g-accent); height: var(--h); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--g-ease); transition-delay: calc(var(--i) * 45ms); opacity: .92; }
.is-in .g-chart i, .no-js .g-chart i { transform: none; }
.g-chart i:last-child { background: #fff; }
.g-paid { display: grid; gap: 8px; }
.g-paid div { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: #17171e; font-size: 13.5px; font-weight: 600; }
.g-paid div span:last-child { color: var(--g-ok); }

/* calidad */
.g-qual { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 52px; }
.g-q { padding: 26px 22px; border-radius: var(--g-r); background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); }
.g-q svg { width: 40px; height: 40px; color: var(--g-accent); margin-bottom: 18px; }
.g-q h3 { font-size: 16px; margin: 0 0 8px; }
.g-q p { font-size: 14px; color: var(--g-muted); margin: 0; }

/* cita */
.g-quote { text-align: center; padding: clamp(80px, 9vw, 120px) 0; }
.g-quote .mark { font-size: 140px; line-height: .6; font-weight: 800; color: var(--g-accent); opacity: .45; height: 64px; }
.g-quote blockquote { margin: 0 auto; max-width: 30ch; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: #d9d9e0; }
.g-quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted); }

/* blog en la home */
.g-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.g-post { display: flex; flex-direction: column; border-radius: var(--g-r); overflow: hidden; background: var(--g-card); box-shadow: inset 0 0 0 1px var(--g-line); text-decoration: none; color: #fff; transition: transform .3s var(--g-ease), box-shadow .3s var(--g-ease); }
.g-post:hover { box-shadow: inset 0 0 0 1px #3a3a48; }
.g-post .art { height: 170px; background: #101017; }
.g-post .art svg { width: 100%; height: 100%; display: block; }
.g-post .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.g-post small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent-2); }
.g-post h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.g-post p { font-size: 14px; color: var(--g-muted); flex: 1; margin: 0; }
.g-post .go { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-cyan); }

/* contacto en la home */
.g-contact { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 80% at 10% 30%, #2a0d07, transparent 70%), radial-gradient(ellipse 60% 60% at 95% 90%, rgba(255, 77, 46, .12), transparent 70%), var(--g-space-2); padding: clamp(88px, 10vw, 130px) 0; }
.g-contact .g-wave { inset: auto 0 0 0; height: 60%; opacity: .55; }
.g-contact .g-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.g-contact .g-lead { color: var(--g-muted-2); margin-top: 18px; }
.g-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; font-size: 15px; color: var(--g-muted-2); }
.g-mail a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); }
.g-mail a:hover { text-decoration-color: var(--g-accent); }
.g-mail svg { width: 20px; height: 20px; color: var(--g-accent); }
.g-contact .cform { background: rgba(18, 18, 24, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -40px rgba(0, 0, 0, .7); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g-contact .cform__field { display: grid; gap: 6px; margin: 0; }
.g-contact .cform__field--w { grid-column: 1 / -1; }
.g-contact .cform textarea { min-height: 110px; resize: vertical; }
.g-contact .cform .btn, .g-contact .cform__status, .g-contact .cform__note { grid-column: 1 / -1; }
.g-contact .cform__note { font-size: 12.5px; color: var(--g-muted); margin: 0; }
.cform__hp { position: absolute; left: -9999px; }

/* footer de la home y de todo el sitio cuando use g-foot */
.g-foot { padding: 72px 0 34px; background: var(--g-space); border-top: 1px solid rgba(255, 255, 255, .06); }
.g-foot-g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.g-foot .brand__logo { height: 20px; }
.g-foot-g > div:first-child p { margin-top: 16px; font-size: 15px; font-weight: 600; max-width: 28ch; color: #e2e2e8; }
.g-foot h2 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted); }
.g-foot ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.g-foot ul a { text-decoration: none; font-size: 14px; font-weight: 600; color: #d8d8df; min-height: 34px; display: inline-flex; align-items: center; }
.g-foot ul a:hover { color: #fff; }
.g-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; color: var(--g-muted); }

/* entradas */
.js .g-rv { opacity: 0; transform: translateY(26px); }
.js .g-rv.is-in { opacity: 1; transform: none; transition: opacity .7s var(--g-ease), transform .8s var(--g-ease); transition-delay: calc(var(--i, 0) * 80ms); }

@media (max-width: 1180px) { .g-qual { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1060px) { .g-qual { grid-template-columns: 1fr 1fr; } .g-fmts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .g-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .g-stats, .g-posts { grid-template-columns: 1fr; }
  .g-steps { grid-template-columns: 1fr; }
  .g-feature, .g-contact .g-wrap { grid-template-columns: 1fr; }
  .g-foot-g { grid-template-columns: 1fr 1fr; }
  .g-foot-g > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .g-hero { padding: 132px 0 28px; min-height: 0; }
  .g-hero h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); margin: 16px 0 14px; }
  .g-hero .g-lead { font-size: 15.5px; }
  .g-ctas { margin-top: 20px; } .g-ctas .btn { flex: 1 1 100%; }
  .g-kpis { margin-top: 26px; }
  .g-kpi { padding: 14px; } .g-kpi b { font-size: 1.75rem; } .g-kpi .d { font-size: 12.5px; }
  .g-pill { font-size: 12px; }
  .g-fmts, .g-qual { grid-template-columns: 1fr; }
  .g-contact .cform { grid-template-columns: 1fr; padding: 20px; }
  .g-bars li { grid-template-columns: 92px 1fr 56px; }
  .g-dash { grid-template-columns: 1fr 1fr; } .g-dash div:last-child { grid-column: 1 / -1; }
  .g-app-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-marq-t, .g-ph em, .g-bars i::after, .g-pane { animation: none !important; }
  .js .g-rv { opacity: 1; transform: none; }
  .g-chart i { transform: none; }
  .g-stat, .g-fmt, .g-post { transition: none; }
}

/* =====================================================================
   HEADER RESPONSIVE (15/10/2026)
   Una sola línea en todos los anchos. Menú completo desde 1200 px; por debajo, botón de menú
   (nav-g.js) con panel. Ningún texto del header se parte en dos líneas.
   Sin JS (.js ausente) el menú queda como fila deslizable, como antes.
   ===================================================================== */
.site-head {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 20px;
  min-height: 72px; padding: 0 clamp(16px, 3.4vw, 48px);
  position: sticky; top: 0; z-index: 100;
}
.g-home .site-head { position: fixed; }
.site-head .brand { flex: none; }
.site-nav { flex-wrap: nowrap; gap: clamp(16px, 1.6vw, 28px); margin-inline: auto; min-width: 0; }
.site-nav a { white-space: nowrap; font-size: 14px; padding: 10px 0; }
.head-right { flex: none; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.site-head .btn, .lang button, .lang a { white-space: nowrap; }
.site-head .btn { min-height: 42px; padding: 0 18px; font-size: 13.5px; }

.menu-toggle {
  display: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .2s;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .12); }
.menu-toggle i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .22s var(--g-ease), opacity .2s; }
.menu-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--g-space);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  padding: 12px clamp(16px, 3.4vw, 48px) 28px;
  max-height: calc(100svh - 72px); overflow-y: auto;
  animation: g-menu .28s var(--g-ease);
}
.menu-panel[hidden] { display: none; }
@keyframes g-menu { from { opacity: 0; transform: translateY(-8px); } }
.menu-panel__links { display: grid; }
.menu-panel__links a {
  display: flex; align-items: center; min-height: 54px; text-decoration: none;
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.menu-panel__links a:hover, .menu-panel__links a[aria-current] { color: var(--g-accent-2); }
.menu-panel__langs { display: flex; gap: 8px; margin: 20px 0 0; }
.menu-panel__langs a {
  min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px; color: var(--g-muted-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.menu-panel__langs a[aria-current] { color: #fff; background: var(--g-btn); box-shadow: none; }
.menu-panel .menu-panel__cta { display: flex; width: 100%; margin-top: 20px; min-height: 52px; font-size: 15px; }
.site-head.menu-open { background: var(--g-space); }
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* Menú compacto: debajo de 1200 px */
@media (max-width: 1199px) {
  .js .site-nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
}
/* Tablet: se mantienen idiomas y botón de contacto en la barra */
@media (max-width: 1199px) and (min-width: 700px) {
  .site-head .head-right .btn { display: inline-flex; }
}
/* Teléfono: barra mínima (logo + menú); idiomas y contacto pasan al panel.
   Anula el header de dos filas de styles.css (@700px). */
@media (max-width: 699px) {
  .js .site-head {
    position: sticky; flex-wrap: nowrap; gap: 12px; min-height: 64px; padding-block: 0;
    background: rgba(11, 11, 15, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .js.g-home .site-head, .js .g-home .site-head { position: fixed; }
  .js .site-head .lang, .js .site-head .head-right .btn { display: none; }
  .menu-panel { max-height: calc(100svh - 64px); min-height: calc(100svh - 64px); }
  .js .g-hero { padding-top: 104px; }
}
/* Sin JS en teléfono: el menú queda como fila deslizable (styles.css) pero sin cortar textos. */
@media (max-width: 699px) {
  html:not(.js) .site-nav a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none; }
  .menu-toggle i { transition: none; }
}

/* Botones con texto largo (CTA al final de cada artículo): en pantallas chicas pasan a bloque
   de ancho completo, texto centrado y equilibrado, en vez de una píldora deformada. */
.btn { text-wrap: balance; text-align: center; }
@media (max-width: 600px) {
  .post__cta .btn, .contact__cta .btn, .hero__cta .btn {
    display: flex; width: 100%; min-height: 52px; height: auto; padding: 13px 22px;
    line-height: 1.35; border-radius: 10px; white-space: normal;
  }
}

/* =====================================================================
   15/10/2026, lista do dono da Ninot sobre o redesenho
   Faixa de meios com logotipos em texto, "X" nos formatos que o leitor fecha, in-image com foto,
   painel de demonstração com a estrutura do dashboard real, e-mail único no contato.
   ===================================================================== */

/* Logotipos em texto: a forma da letra de cada marca, em tom claro; a cor da marca só nos detalhes. */
.wm { display: inline-flex; align-items: baseline; white-space: nowrap; color: rgba(255, 255, 255, .78); font-size: 30px; line-height: 1; }
.wm-ambito { font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif; font-weight: 400; letter-spacing: -.01em; font-size: 34px; }
.wm-paparazzi { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; font-style: italic; letter-spacing: -.015em; font-size: 33px; }
.wm-gente { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .01em; font-size: 36px; transform: scaleX(.86); }
.wm-minutouno { font-family: var(--g-f); font-weight: 900; letter-spacing: -.05em; }
.wm-minutouno .b { color: #e8463b; }
.wm-topicnews { font-family: var(--g-f); font-style: italic; font-weight: 800; letter-spacing: -.03em; }
.wm-topicnews .b { font-weight: 300; }
.wm-billiken { font-family: var(--g-f); font-weight: 800; letter-spacing: -.01em; }
.wm-billiken .b { color: #f28c1a; }
.wm-peru21 { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 27px; letter-spacing: -.01em; color: #fff; background: #0b4f9e; padding: 4px 9px 5px; border-radius: 2px; }
.wm-peru21 .b { color: #f5c400; }
.wm-libero { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 28px; letter-spacing: .01em; }
.wm-libero .b { color: #fff; background: #ff2841; padding: 2px 4px 0; margin-right: 2px; }
.wm-colombia { font-family: var(--g-f); font-weight: 700; letter-spacing: -.03em; }
.wm-colombia .b { font-weight: 800; background: conic-gradient(from 200deg, #f5d32b, #4a6cff, #e8463b, #f5d32b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-colombia .c { font-size: .5em; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .55); margin-left: 2px; }
.wm-perfil { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .06em; font-size: 28px; align-items: center; }
.wm-perfil::before { content: ""; width: .82em; height: .82em; border-radius: 50%; background: #4f78a8; margin-right: .3em; }
@media (max-width: 600px) { .wm { font-size: 24px; } .wm-ambito, .wm-paparazzi { font-size: 27px; } .wm-gente { font-size: 29px; } .wm-peru21, .wm-libero, .wm-perfil { font-size: 22px; } }

/* "X" de fechar nos formatos que o leitor fecha (anchor, header, in-image, interstitial) */
.g-ph .x { position: absolute; display: block; width: 9px; height: 9px; border-radius: 50%; background: #fff; text-decoration: none; }
.g-ph .x::before, .g-ph .x::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 1.2px; background: #16161c; transform: rotate(45deg); }
.g-ph .x::after { transform: rotate(-45deg); }
.e-anchor .x { right: 2px; top: -5px; }
.e-header .x { right: 2px; bottom: -5px; }
.e-inimage .x { right: 2px; top: -5px; }
.e-inter .x { right: 6px; top: 10px; width: 11px; height: 11px; }
.e-inter .x::before, .e-inter .x::after { top: 5px; }
.e-header { height: 11px; }
/* In-image: uma foto de verdade (céu e morro) com a faixa do anúncio por cima, no terço de baixo. */
.g-ph .im--photo { height: 44px; margin: 4px 0 7px; border-radius: 3px; overflow: visible;
  background: radial-gradient(circle at 74% 32%, #ffd27a 0 5px, transparent 6px), linear-gradient(170deg, transparent 58%, #2f4a3a 59%), linear-gradient(185deg, transparent 66%, #3e6550 67%), linear-gradient(180deg, #5d7fa6, #9db6cf); }
.e-inimage { left: 4px; right: 4px; bottom: 4px; height: 9px; opacity: 1; }

/* Passo 1: dois grupos de linhas */
.g-grp { margin: 16px 0 -6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a94; }

/* Painel de demonstração (mesma estrutura do dashboard real do publisher) */
.g-sc-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-bottom: 10px; }
.g-sc-row--3 { grid-template-columns: 1fr 1fr; }
.g-sc-sal, .g-sc-card { padding: 13px 14px; border-radius: 8px; background: #18181d; box-shadow: inset 0 0 0 1px #26262e; min-width: 0; }
.g-sc-sal { background: var(--g-btn); box-shadow: none; }
.g-sc-sal small, .g-sc-card small { display: block; font-size: 11.5px; font-weight: 600; color: var(--g-muted); }
.g-sc-sal small { color: rgba(255, 255, 255, .82); }
.g-sc-card small em { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .07); font-size: 10.5px; }
.g-sc-sal b, .g-sc-card b { display: block; margin-top: 4px; font-size: clamp(1.15rem, .9rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-sc-card b.ok { color: var(--g-ok); }
.g-sc-card > span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--g-muted); }
.g-sc-meter { height: 5px; border-radius: 3px; background: #2a2a33; overflow: hidden; margin-top: 10px !important; }
.g-sc-meter i { display: block; height: 100%; width: var(--w); background: var(--g-ok); }
.g-sc-h { margin: 16px 0 0; font-size: 12px; font-weight: 700; color: #dcdce3; }
.g-sc-t { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.g-sc-t th { text-align: left; font-weight: 600; color: var(--g-muted); padding: 6px 6px 6px 0; border-bottom: 1px solid #26262e; }
.g-sc-t td { padding: 7px 6px 7px 0; border-bottom: 1px solid #1e1e25; color: #dcdce3; }
.g-sc-t th:nth-child(n+4), .g-sc-t td:nth-child(n+4) { text-align: right; padding-right: 0; padding-left: 6px; }
@media (max-width: 600px) { .g-sc-t th:nth-child(2), .g-sc-t td:nth-child(2) { display: none; } .g-sc-row { grid-template-columns: 1fr; } }

.g-kpi b .sx { font-style: normal; margin-left: -6px; }

/* Formatos no celular (16/10): carrossel como fotos no telefone. Arrasta para o lado ou toca na seta; cada card
   encaixa, o próximo aparece na borda, as bolinhas dizem onde você está. No computador a grade continua. */
.g-carr-nav { display: none; }
@media (max-width: 700px) {
  .g-carr { margin-top: 36px; }
  .g-carr .g-fmts {
    display: flex; gap: 12px; margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); padding: 4px clamp(20px, 4vw, 48px) 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(20px, 4vw, 48px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .g-carr .g-fmts::-webkit-scrollbar { display: none; }
  .g-carr .g-fmt { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 168px; }
  .js .g-carr .g-fmt.g-rv { opacity: 1; transform: none; }
  .g-carr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
  .g-carr-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
  .g-carr-btn svg { width: 18px; height: 18px; }
  .g-carr-btn[data-dir="-1"] svg { transform: scaleX(-1); }
  .g-carr-btn:disabled { opacity: .35; cursor: default; }
  .g-carr-dots { display: flex; gap: 7px; }
  .g-carr-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: width .2s, background .2s; }
  .g-carr-dots i.on { width: 20px; border-radius: 4px; background: var(--g-accent); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .g-carr .g-fmts { scroll-behavior: auto; } .g-carr-dots i { transition: none; } }

/* E-mail no rodapé */
.g-foot-g > div:first-child p.g-foot-mail { margin-top: 10px; font-size: 14px; }
.g-foot-mail a { color: var(--g-muted-2); text-decoration: none; }
.g-foot-mail a:hover { color: #fff; text-decoration: underline; }