/* ═══════════════════════════════════════════════════════════════════
   SOYRAGE · tema oscuro para las páginas SSR (servicios, planes, reservar,
   labs y blog). Se enlaza la ÚLTIMA en shell() de crm/api/_blog.mjs.

   El CSS de esas páginas usa --paper como fondo y --ink como texto, pero
   también --ink como fondo de las piezas oscuras (barra, footer, CTA…) y como
   texto de los botones amarillos/azules. Así que:
   1) se invierten los tokens en toda la página;
   2) en las piezas oscuras y en los botones de color se RESTAURAN los tokens
      de siempre, con lo que siguen viéndose como estaban pensados.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --paper: #07080A;
  --ink: #EDEEF0;
  --fog: #15171C;
  --steel: #A1A7B0;
  --steel-d: #6E747E;
  --blue-ink: #7CCBF3;
  --grid: rgba(255, 255, 255, .03);
  --line: rgba(255, 255, 255, .1);
  --surface: #0B0C10;
  --font-display: 'Inter', system-ui, sans-serif;
  --soft-edge: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, 0) 85%);
}
html, html:has(body.pgs) { background: #07080A; }
body { background: #07080A !important; color: #EDEEF0; }
body::before { /* la luz de la marca desde arriba, como en la portada */
  content: ''; position: fixed; inset: 0 0 auto 0; height: 70vh; pointer-events: none; z-index: 0;
  background: radial-gradient(45% 60% at 50% -10%, rgba(42, 167, 228, .22), transparent 70%);
}
.bp { display: none !important; }
::selection { background: #2AA7E4; color: #fff; }

/* 2a · piezas oscuras: tokens de siempre, con la superficie nueva */
#pl, .topbar, .steps li::before, .post__plug, .tip, .nlmini, .cta, .foot, .mcta,
.sh, .pg-cta, .lb-flow__n--mid, .lb-rm, .sv-card__ia, .pl-yes, .sv-demo, .bk__card {
  --paper: #EDEEF0; --ink: #0B0C10; --steel: #A1A7B0; --steel-d: #8A909A; --line: rgba(255, 255, 255, .1);
}
/* 2b · botones y etiquetas de color: texto oscuro sobre amarillo/azul */
.chip.on, .topbar .back, .grid .card--feat::after, .nlmini button, .nl__row button, .cta a, .foot__cta, .mcta a,
.sticky-cta a, .pm__send, .sh__cta, .pg-tag, .pg-cta .pg-btn--a, .lb-flow__n--mid span, .lb-rm__mcp span,
.lb-rm__a, .pl-guar span, .bk__time[aria-pressed="true"] {
  --ink: #0B0C10; --paper: #EDEEF0;
}

/* barra superior: cristal, como la nav de la portada */
.topbar {
  background: rgba(11, 12, 16, .72) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid transparent; border-top: 0;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -24px rgba(0, 0, 0, .9) !important;
}
.topbar .lg { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; }
.chip.on { background: rgba(42, 167, 228, .18) !important; color: #EDEEF0 !important; box-shadow: inset 0 0 0 1px rgba(124, 203, 243, .35); }

/* botones principales con el volumen de la portada */
.topbar .back, .cta a, .foot__cta, .mcta a, .sticky-cta a, .pm__send, .sh__cta, .pg-cta .pg-btn--a, .nl__row button, .nlmini button, .lb-rm__a {
  color: #fff !important;
  background: linear-gradient(180deg, #4DB8EE 0%, #2AA7E4 48%, #1C8BCD 100%) !important;
  border: 1px solid #1677B3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 10px 26px -10px rgba(42, 167, 228, .75) !important;
  text-shadow: 0 1px 0 rgba(0, 40, 70, .35);
}

/* titulares: Inter apretada, la palabra destacada en azul claro */
h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.035em; }
em { color: #7CCBF3; }

/* contenedores con borde que se difumina (como en la portada) */
.card, .sv-card, .pg-plan, .bk__card, .post__plug, .faq details, .pg-faq details, .lb-card, .sv-step, .pg-tbl, .nlmini, .cta, .tip {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--soft-edge) border-box !important;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9) !important;
}
.pg-plan--hot {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(42, 167, 228, .2), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, rgba(124, 203, 243, .7), rgba(42, 167, 228, .15) 45%, rgba(42, 167, 228, 0) 90%) border-box !important;
}

/* campos de formulario */
input, textarea, select {
  background: rgba(255, 255, 255, .04) !important; color: #EDEEF0 !important; border-color: rgba(255, 255, 255, .14) !important;
}
input::placeholder, textarea::placeholder { color: #6E747E !important; }
input:focus, textarea:focus, select:focus { border-color: rgba(42, 167, 228, .7) !important; outline: none; box-shadow: 0 0 0 4px rgba(42, 167, 228, .15); }

/* imágenes de portada del blog y de servicios: que no deslumbren */
.card img, .post__cover img { filter: saturate(.95) brightness(.92); }

/* ── tarjetas con fondo claro escrito a mano: superficie oscura con borde que se difumina ── */
.pg-card, .pg-repo, .pg-cal, .lb-org, .lb-repo, .lb-flow__n, .sv-pick a, .pl-compare, .sv-hero__art, .sv-guar > div,
.sv-give div, .bk__box, .stat, .smini, .svclink, .tldr {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--soft-edge) border-box !important;
  color: #EDEEF0;
}
.sv-pick a:hover, .sv-pick a:focus-visible, .svclink:hover, .pg-card:hover, .lb-repo:hover {
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(42, 167, 228, .14), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, rgba(124, 203, 243, .55), rgba(124, 203, 243, 0) 85%) border-box !important;
}
.pl-compare thead th { background: rgba(255, 255, 255, .04) !important; color: #A1A7B0 !important; }
.pl-compare td, .pl-compare th { border-color: rgba(255, 255, 255, .06) !important; color: #D6D9DE; }
.pl-compare .hot, .pl-compare td.hot, .pl-compare th.hot { background: rgba(42, 167, 228, .08) !important; }
.pl-compare svg { color: #7CCBF3; }
.sv-tools span, .bkx-chip, .bk__nav button, .share a, .share button, .pm__x {
  background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #EDEEF0 !important;
}
.bk__c.is-free, .bk__time { background: rgba(255, 255, 255, .05) !important; color: #EDEEF0 !important; border-color: rgba(255, 255, 255, .12) !important; }
.bk__c.is-free:hover, .bk__time:hover { background: rgba(42, 167, 228, .14) !important; border-color: rgba(124, 203, 243, .5) !important; }
.checklist li::before { background-color: rgba(42, 167, 228, .16) !important; }
.pm .pm__card { background: #0E1014 !important; color: #EDEEF0; border: 1px solid rgba(255, 255, 255, .1); }

/* ═══════════════════════════════════════════════════════════════════
   v2 · MISMO SISTEMA QUE LA PORTADA (cabecera, hero, tipografía, Labs, CTA, pie)
   ═══════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/fonts/newsreader-italic.woff2) format('woff2'); }
:root { --blue: #2AA7E4; --blue-2: #7CCBF3; --sun: #F4D738; --text: #EDEEF0; --text-2: #A1A7B0; --text-3: #6E747E; --serif: 'Newsreader', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
body::before { height: 900px; background: radial-gradient(38% 46% at 50% -6%, rgba(42, 167, 228, .34), transparent 72%), radial-gradient(14% 18% at 64% 4%, rgba(244, 215, 56, .08), transparent 70%); }

/* ── cabecera (la de la portada) ── */
.sh { position: sticky !important; top: 0; z-index: 60; padding: 12px clamp(1rem, 4vw, 2rem) 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.sh__in {
  max-width: 1200px !important; margin: 0 auto; height: 58px; padding: 0 .55rem 0 1.1rem !important; display: flex !important; align-items: center; gap: 2rem !important;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(12, 14, 18, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.sh__brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text) !important; }
.sh__brand b { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 1.05rem !important; letter-spacing: -.02em !important; }
.sh__brand img { width: 22px !important; height: 22px !important; }
.sh__nav { display: flex !important; gap: 1.6rem !important; flex: 1; }
.sh__l { position: relative; padding: .2rem 0 !important; font-size: .9rem !important; font-weight: 400 !important; color: var(--text-2) !important; background: none !important; border: 0 !important; transition: color .2s; }
.sh__l:hover, .sh__l.on { color: var(--text) !important; }
.sh__l.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--sun) !important; box-shadow: 0 0 10px rgba(244, 215, 56, .6); }
.sh__right { display: flex !important; align-items: center; gap: .55rem !important; margin-left: auto; }
.sh__lang { display: grid; place-items: center; height: 34px; min-width: 38px; padding: 0 .5rem; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1) !important; background: transparent !important; color: var(--text-2) !important; font-size: .76rem !important; font-weight: 600; }
.sh__client, .sh__book {
  display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .85rem; border-radius: 10px; font-size: .86rem; font-weight: 500; color: var(--text) !important;
  border: 1px solid transparent; background: linear-gradient(#14161B, #14161B) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03)) border-box; transition: background .2s;
}
.sh__client { padding-left: .5rem; }
.sh__client span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(42, 167, 228, .16); border: 1px solid rgba(124, 203, 243, .3); }
.sh__client svg { width: 13px; height: 13px; fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-linecap: round; }
.sh__client:hover, .sh__book:hover, .sh__book.on { background: linear-gradient(rgba(42, 167, 228, .14), rgba(42, 167, 228, .14)) padding-box, linear-gradient(180deg, rgba(124, 203, 243, .6), rgba(124, 203, 243, .05)) border-box; }
.sh__cta { display: inline-flex !important; align-items: center; height: 36px; padding: 0 1rem !important; border-radius: 10px !important; font-size: .88rem !important; font-weight: 500 !important; }
.sh__cta span { display: none; }

/* ── hero de cada página: titular como el de la portada ── */
.pg-hero, .sv-hero, .lb-hero { padding-top: clamp(3rem, 9vh, 5.5rem) !important; }
.pg-hero h1, .sv-hero h1, .lb-hero h1, .bk h1 {
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.048em !important; line-height: 1 !important;
  font-size: clamp(2.7rem, 6vw, 5.2rem) !important; color: var(--text) !important; max-width: 16ch;
}
.pg-hero h1 em, .sv-hero h1 em, .lb-hero h1 em, h2 em {
  font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -.02em !important;
  color: var(--blue-2) !important; text-shadow: 0 0 40px rgba(42, 167, 228, .4);
}
.pg-lede { color: var(--text-2) !important; font-size: clamp(1.02rem, 1.4vw, 1.16rem) !important; line-height: 1.6 !important; max-width: 58ch; }
.pg-lede b { color: var(--text) !important; font-weight: 500 !important; }
.k, .pg-plan__k { display: inline-flex !important; align-items: center; gap: .5rem; font-size: .8rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--blue-2) !important; }
.k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.pg-crumbs { font-size: .82rem !important; color: var(--text-3) !important; padding-top: 1.4rem; }
.pg-crumbs a { color: var(--text-2) !important; }

/* ── secciones ── */
.pg-sec { border-color: rgba(255, 255, 255, .06) !important; }
.pg-sec h2, .lb-hero h2, .pg-faq h2, .pg-cta h2 {
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.045em !important; line-height: 1.04 !important;
  font-size: clamp(2rem, 3.8vw, 3.1rem) !important; color: var(--text) !important;
}
.pg-sec h3, .pg-card h3, .sv-card h3, .pg-plan h3 { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.03em !important; color: var(--text) !important; }
.pg-sec p, .pg-card p, .sv-card p, .pg-list li { color: var(--text-2); }
.pg-list li b, .pg-list li strong { color: var(--text); }
.pg-btn--b { color: var(--text) !important; border: 1px solid transparent !important; box-shadow: none !important; background: linear-gradient(#14161B, #14161B) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03)) border-box !important; }
.pg-btn, .pg-btn--a { border-radius: 12px !important; }

/* FAQ */
.pg-faq details { border-radius: 14px !important; margin-bottom: .5rem; padding: 0 1.2rem; }
.pg-faq summary { color: var(--text) !important; font-weight: 500; }
.pg-faq .a, .pg-faq .a p { color: var(--text-2) !important; }

/* ── cierre: el mismo bloque que "Free website review" de la portada ── */
.pg-cta {
  position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: 1rem;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.2rem, 4vw, 3rem) !important; border-radius: 24px !important; border: 1px solid transparent !important;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(42, 167, 228, .32), transparent 70%) padding-box,
    radial-gradient(30% 40% at 85% 100%, rgba(244, 215, 56, .14), transparent 70%) padding-box,
    linear-gradient(#0B0C10, #0B0C10) padding-box,
    linear-gradient(180deg, rgba(124, 203, 243, .45), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, 0) 85%) border-box !important;
}
.pg-cta p { color: var(--text-2) !important; max-width: 52ch; }

/* ── Labs: portadas sobrias, sin rejilla ni colores chillones ── */
.lb-cover { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--cv) 22%, transparent), transparent 70%), #0D0F13 !important; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.lb-cover svg { color: var(--cv); opacity: .55; filter: saturate(.75); }
.lb-cover svg rect[fill^="url"] { display: none; }
.lb-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0B0C10); }
.lb-repo { overflow: hidden; border-radius: 18px !important; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.lb-repo:hover { transform: translateY(-4px); }
.lb-repo__nm i { color: var(--text-3) !important; font-family: 'Inter', sans-serif !important; font-style: normal; }
.lb-repo__nm b { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--text) !important; }
.lb-repo__mark { background: rgba(255, 255, 255, .06) !important; color: var(--text) !important; border-radius: 9px !important; }
.lb-repo__k { font-family: 'Inter', sans-serif !important; letter-spacing: .02em !important; color: var(--blue-2) !important; font-weight: 500 !important; }
.lb-repo p { color: var(--text-2) !important; }
.lb-repo__meta, .lb-repo__meta span { color: var(--text-3) !important; }
.lb-copy { background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 10px !important; }
.lb-copy code { color: var(--text-2) !important; }
.lb-copy:hover { border-color: rgba(124, 203, 243, .4) !important; }
.lb-gh { color: var(--text) !important; border-radius: 12px !important; border: 1px solid transparent !important; background: linear-gradient(#14161B, #14161B) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03)) border-box !important; }
.lb-org__bar { background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .06) !important; }
.lb-org__nums dt { font-family: 'Inter', sans-serif !important; font-weight: 600; letter-spacing: -.03em; color: var(--text) !important; }
.lb-org__nums dd { color: var(--text-3) !important; }
.lb-rm { border-radius: 24px !important; }

/* ── pie (el del blog y las páginas) con el aire del de la portada ── */
.foot { background: #050607 !important; border-top: 1px solid rgba(255, 255, 255, .07); border-radius: 0 !important; color: var(--text) !important; }
.foot__wm { display: none !important; }
.foot__lg { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--text) !important; }
.foot__nav a { color: var(--text-2) !important; font-weight: 400 !important; }
.foot__nav a:hover { color: var(--text) !important; }
.foot__legal, .foot__legal a, .foot__legal button, .foot__nap, .foot__bottom { color: var(--text-3) !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.foot__legal { border-color: rgba(255, 255, 255, .06) !important; }

@media (max-width: 1020px) {
  .sh__in { gap: 1rem !important; }
  .sh__client { display: none !important; }
}
@media (max-width: 760px) {
  .sh__nav { position: absolute; left: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); top: 76px; padding: .65rem 1rem; overflow-x: auto; scrollbar-width: none; background: rgba(12, 14, 18, .92); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; backdrop-filter: blur(14px); gap: 1.2rem !important; }
  .pg-crumbs { padding-top: 3.8rem; }
}
@media (max-width: 560px) {
  .sh__book { display: none !important; }
  .pg-hero h1, .sv-hero h1, .lb-hero h1 { font-size: clamp(2.3rem, 10vw, 3rem) !important; }
}

/* v3 · ajustes tras revisión */
/* la negrita "falsa": la familia Inter autoalojada solo tiene 400/500, el 700 se sintetizaba */
b, strong, .pg-lede b, .pg-list li b, h1, h2, h3, .sh__brand b, .lb-repo__nm b { font-synthesis: none; }
b, strong { font-weight: 500 !important; }
h1, h2, h3, .sh__brand b, .lb-repo__nm b, .pg-btn, .sh__cta { font-weight: 500 !important; }

/* botón principal en azul con volumen, en todas las páginas */
.pg-btn--a, .pg-cta .pg-btn--a {
  color: #fff !important; font-weight: 500 !important; border-radius: 12px !important;
  background: linear-gradient(180deg, #4DB8EE 0%, #2AA7E4 48%, #1C8BCD 100%) !important;
  border: 1px solid #1677B3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 10px 26px -10px rgba(42, 167, 228, .75) !important;
}
.pg-btn--a:hover { transform: translateY(-1px); }

/* titulares de las páginas de servicio: más contenidos (la frase es larga) */
.sv-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem) !important; max-width: 18ch; }
.pg-hero h1, .lb-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem) !important; }
.sv-hero__art { border-radius: 20px !important; overflow: hidden; }

/* v4 · blog: la misma barra de cristal y el mismo titular que el resto */
.topbar { margin: 12px clamp(1rem, 4vw, 2rem) 0; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .08) !important; }
.topbar__in { max-width: 1200px !important; padding: .55rem .6rem .55rem 1.1rem !important; }
.topbar .lg { font-size: 1.05rem !important; letter-spacing: -.02em !important; }
.topbar .lg span { color: var(--text-3) !important; font-weight: 400 !important; }
.chip { font-weight: 500 !important; color: var(--text-2) !important; }
.chip:hover { color: var(--text) !important; }
.topbar .back { border-radius: 10px !important; font-weight: 500 !important; }
.hero h1 {
  font-family: 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: -.048em !important; line-height: 1 !important;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important; color: var(--text) !important; max-width: 17ch;
}
.hero h1 em { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -.02em !important; color: var(--blue-2) !important; text-shadow: 0 0 40px rgba(42, 167, 228, .4); }
.hero p { color: var(--text-2) !important; }
.nl, .newsletter { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, .06); }

/* rótulos: línea fina + gris (nunca punto amarillo + azul) */
.k, .pg-plan__k { gap: .75rem !important; font-size: .82rem !important; color: #9AA1AB !important; }
.k::before { width: 28px !important; height: 1px !important; border-radius: 0 !important; background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.1)) !important; box-shadow: none !important; }