/* Tema único del ecosistema SolucionesPro (.net · .org) · v2 · 2026-10-07
   Fuente única: https://solucionespro.net/assets/sp-ui/tema-ecosistema.css. Cada aplicación lo enlaza
   al FINAL de su <head>: .net (sistema.css), .org PHP (Tailwind) y la plataforma .org (Bootstrap 5.3).
   Lenguaje de red profesional: lienzo gris claro, tarjetas blancas con borde fino, tipografía del
   sistema, títulos en tipo oración, botones píldora y cifras destacadas.
   Licencias: solo fuentes del sistema operativo y paleta propia de SolucionesPro; sin logos,
   nombres, iconos, imágenes ni colores exactos de terceros. Solo cambia la presentación:
   no altera estructura, datos ni funciones. */
:root{
  --sp-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Roboto Fallback","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --sp-canvas:#f3f4f6; --sp-card:#ffffff; --sp-soft:#f7f8f9; --sp-ink:#1d2226; --sp-muted:#535a62;
  --sp-line:#dde1e6; --sp-line-strong:#c4cad1; --sp-accent:#1f52a9; --sp-accent-hover:#173f84; --sp-accent-soft:#e8eef8;
  --sp-warm:#f17c20; --sp-warm-ink:#a8500c; --sp-warm-soft:#fdf0e5; --sp-ok:#1e7a4f; --sp-ok-soft:#e6f3ec;
  --sp-loss:#b3261e; --sp-loss-soft:#fbeaea; --sp-radius:8px; --sp-shadow:0 0 0 1px var(--sp-line);
  /* Bootstrap 5.3 (plataforma .org) */
  --bs-body-font-family:var(--sp-sans); --bs-body-bg:var(--sp-canvas); --bs-body-color:var(--sp-ink);
  --bs-secondary-color:var(--sp-muted); --bs-border-color:var(--sp-line); --bs-border-radius:var(--sp-radius);
  --bs-border-radius-lg:var(--sp-radius); --bs-border-radius-xl:var(--sp-radius); --bs-link-color:var(--sp-accent);
  --bs-link-color-rgb:31,82,169; --bs-link-hover-color:var(--sp-accent-hover); --bs-primary:#1f52a9; --bs-primary-rgb:31,82,169;
  --bs-warning:#f17c20; --bs-warning-rgb:241,124,32; --bs-dark-rgb:29,34,38; --bs-light-rgb:247,248,249; --bs-card-bg:var(--sp-card);
}
@media (prefers-color-scheme:dark){:root[data-sp-ui]:not([data-sp-claro]):not([data-sp-color=light]){
  --sp-canvas:#111418; --sp-card:#1c2127; --sp-soft:#171b20; --sp-ink:#e6e8eb; --sp-muted:#a3aab4; --sp-line:rgba(255,255,255,.12);
  --sp-line-strong:rgba(255,255,255,.22); --sp-accent:#7aa5ff; --sp-accent-hover:#a3c1ff; --sp-accent-soft:rgba(122,165,255,.12);
  --sp-warm-soft:rgba(241,124,32,.14); --sp-ok-soft:rgba(30,122,79,.18); --sp-loss-soft:rgba(179,38,30,.18); --bs-light-rgb:23,27,32}}
html[data-sp-ui][data-sp-color=dark]{
  --sp-canvas:#111418; --sp-card:#1c2127; --sp-soft:#171b20; --sp-ink:#e6e8eb; --sp-muted:#a3aab4; --sp-line:rgba(255,255,255,.12);
  --sp-line-strong:rgba(255,255,255,.22); --sp-accent:#7aa5ff; --sp-accent-hover:#a3c1ff; --sp-accent-soft:rgba(122,165,255,.12);
  --sp-warm-soft:rgba(241,124,32,.14); --sp-ok-soft:rgba(30,122,79,.18); --sp-loss-soft:rgba(179,38,30,.18)}

/* .org (Bootstrap y Tailwind sin modo oscuro propio): siempre en claro, controles de formulario incluidos. */
html:not([data-sp-ui]){color-scheme:light}

/* ── .net: los tokens de sistema.css y del tema WordPress apuntan a los del ecosistema ── */
html:root[data-sp-ui]{--paper:var(--sp-canvas)!important;--raise:var(--sp-card)!important;--panel:var(--sp-soft)!important;
  --ink:var(--sp-ink)!important;--muted:var(--sp-muted)!important;--line:var(--sp-line)!important;--accent:var(--sp-accent)!important;
  --accent-deep:var(--sp-accent-hover)!important;--accent-soft:var(--sp-accent-soft)!important;--brand:var(--sp-accent)!important;
  --brand-deep:var(--sp-accent-hover)!important;--brand-soft:var(--sp-accent-soft)!important;--warm:var(--sp-warm)!important;
  --sans:var(--sp-sans)!important;--title:var(--sp-sans)!important;--r:var(--sp-radius)!important;
  --acento:var(--sp-accent)!important;--acento-solido:var(--sp-accent)!important;--tinta:var(--sp-ink)!important;--tinta2:var(--sp-muted)!important;
  --linea:var(--sp-line)!important;--linea-fuerte:var(--sp-line-strong)!important;--sup:var(--sp-card)!important;--sup2:var(--sp-soft)!important;
  --base:var(--sp-canvas)!important;--mono:var(--sp-sans)!important}

/* ── Plataforma .org: paleta por defecto = SolucionesPro. Si el usuario elige otra en el
      personalizador (html[data-redeec-theme]), se respeta su elección. ── */
html:root:not([data-redeec-theme]),html:root[data-redeec-theme="institucional"]{--pry-50:#f3f6fb;--pry-100:#e8eef8;--pry-200:#c9d6ee;--pry-300:#9bb3df;--pry-400:#5f82c4;
  --pry-500:#2f63b8;--pry-600:#1f52a9;--pry-700:#173f84;--pry-800:#12336b;--pry-900:#0d2650;--acc-500:#f17c20;
  --signal-50:#e8eef8;--signal-600:#1f52a9;--signal-700:#173f84;--redeec-blue:#173f84;--brand:#1f52a9;--c-brand:#1f52a9}

/* ── Base común ── */
html body{font-family:var(--sp-sans)!important;background:var(--sp-canvas)!important;background-image:none!important;color:var(--sp-ink)}
html body :is(h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6){font-family:var(--sp-sans)!important;font-weight:650!important;letter-spacing:-.01em!important;color:inherit}
html body h1{font-size:clamp(1.6rem,3.4vw,2.4rem)!important;line-height:1.18!important}
html body h2{font-size:clamp(1.25rem,2.4vw,1.65rem)!important;line-height:1.25!important}
html body :is(p,li,small,span,label,a,button,.badge,[class*="kicker"],[class*="eyebrow"],[class*="pill"],[class*="label"]):not(code):not(pre):not(kbd){font-family:var(--sp-sans)!important}
html body :is([class*="kicker"],[class*="eyebrow"],[class*="-label"],.text-uppercase,.uppercase,.tracking-wider,.tracking-widest){text-transform:none!important;letter-spacing:normal!important}
html body a{color:var(--sp-accent)}
html body :is(code,pre,kbd,samp){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important}

/* Cabecera blanca con borde fino (red profesional), sin desenfoques ni degradados */
html body :is(.navbar,header.site-header,body>header,#header,.spx-header,header[class*="sticky"],header[class*="fixed"]){background:var(--sp-card)!important;background-image:none!important;border-bottom:1px solid var(--sp-line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body :is(.navbar-dark .nav-link,.navbar-dark .navbar-brand,.navbar .navbar-brand){color:var(--sp-ink)!important}
html body .navbar-dark .navbar-toggler-icon{filter:invert(1)}
@media (prefers-color-scheme:dark){html body .navbar-dark .navbar-toggler-icon{filter:none}}

/* Tarjetas */
html body :is(.card,.feature-card,[class*="-card"]:not(.btn):not([class*="card-sub"]):not([class*="card-title"]):not([class*="card-stat"]):not([class*="card-saving"]):not([class*="card-cta"])){background:var(--sp-card)!important;background-image:none!important;border:1px solid var(--sp-line)!important;border-radius:var(--sp-radius)!important;box-shadow:none!important}
html body :is(.shadow,.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl){box-shadow:var(--sp-shadow)!important}
html body :is(.rounded-xl,.rounded-2xl,.rounded-3xl,.rounded-4,.rounded-5){border-radius:var(--sp-radius)!important}

/* Botones píldora: primario azul relleno; secundario con contorno */
html body :is(.btn,button[type=submit],input[type=submit],[class*="cta"]:is(a,button):not([class*="arrow"])){border-radius:999px!important;font-weight:600!important;box-shadow:none!important;background-image:none!important;text-transform:none!important;letter-spacing:normal!important}
html body :is(.btn-primary,.btn-dark,.btn-warning,.btn-success,[class*="cta-primary"],button[type=submit]:not(.btn-link)){background:var(--sp-accent)!important;border:1px solid var(--sp-accent)!important;color:#fff!important}
html body :is(.btn-primary,.btn-dark,.btn-warning,.btn-success,[class*="cta-primary"]):hover{background:var(--sp-accent-hover)!important;border-color:var(--sp-accent-hover)!important;color:#fff!important}
html body :is(.btn-outline-dark,.btn-outline-primary,.btn-outline-secondary,.btn-light,.btn-outline-warning){background:transparent!important;border:1px solid var(--sp-accent)!important;color:var(--sp-accent)!important}
html body :is(.btn-outline-dark,.btn-outline-primary,.btn-outline-secondary,.btn-light,.btn-outline-warning):hover{background:var(--sp-accent-soft)!important}

/* Secciones: sin degradados ni fondos decorativos; bandas oscuras pasan a azul sólido */
html body :is([class*="hero"],.hero,section[class*="redeec-"],[class*="bg-gradient"],[class*="gradient"]){background-image:none!important}
html body :is(.hero-section,[class*="redeec-hero"]){background:var(--sp-card)!important;border-bottom:1px solid var(--sp-line)}
html body section[style*="linear-gradient"]{background:var(--sp-accent-hover)!important}
html body .bg-light{background:var(--sp-soft)!important}
html body .bg-warning:not(.bg-opacity-10):not(.bg-opacity-25){background:var(--sp-warm)!important;color:#1d2226!important}
html body :is(.text-acc-500,.text-acc-600,.text-amber-600){color:var(--sp-warm-ink)!important}
html body .bg-warning.bg-opacity-10,html body .bg-warning.bg-opacity-25{background:var(--sp-warm-soft)!important}
html body .badge{border-radius:999px!important;font-weight:600!important}
html body .text-warning{color:var(--sp-warm-ink)!important}

/* ── .org PHP (Tailwind): la paleta pry/acc se alinea con la del ecosistema ── */
html body :is(.bg-pry-600,.bg-pry-700,.from-pry-600,.bg-acc-500){background:var(--sp-accent)!important;background-image:none!important}
html body :is(.hover\:bg-pry-700:hover,.hover\:bg-acc-600:hover){background:var(--sp-accent-hover)!important}
html body :is(.bg-pry-50,.bg-pry-100,.hover\:bg-pry-50:hover){background:var(--sp-accent-soft)!important}
html body :is(.text-pry-600,.text-pry-700,.text-pry-800,.hover\:text-pry-700:hover){color:var(--sp-accent)!important}
html body :is(.border-pry-100,.border-pry-200){border-color:var(--sp-line)!important}
html body :is(.bg-slate-50,.bg-slate-100){background:var(--sp-canvas)!important}
html body .bg-gradient-to-br,html body .bg-gradient-to-r,html body .bg-gradient-to-b{background-image:none!important;background-color:var(--sp-accent)!important}
html body :is(.text-slate-800,.text-slate-900){color:var(--sp-ink)!important}
html body :is(.text-slate-500,.text-slate-600){color:var(--sp-muted)!important}

/* ── Cifras: indicadores, costos y barras (regla: hablar el idioma del empresario) ── */
.sp-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:12px 0}
.sp-cifra{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:10px 12px}
.sp-cifra b{display:block;font-size:clamp(1.05rem,4.4vw,1.6rem);white-space:nowrap;line-height:1.1;font-weight:700;color:var(--sp-ink);font-variant-numeric:tabular-nums}
.sp-cifra small{display:block;color:var(--sp-muted);font-size:.82rem;margin-top:2px}
.sp-cifra.es-perdida b{color:var(--sp-loss)} .sp-cifra.es-ahorro b{color:var(--sp-ok)} .sp-cifra.es-costo b{color:var(--sp-warm-ink)}
.sp-barras{display:grid;gap:8px;margin:12px 0}
.sp-barra{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:.9rem}
.sp-barra i{grid-column:1/-1;display:block;height:10px;border-radius:999px;background:var(--sp-soft);overflow:hidden}
.sp-barra i::before{content:"";display:block;height:100%;width:var(--v,0%);background:var(--c,var(--sp-accent));border-radius:inherit}
html body .progress{background:var(--sp-soft)!important;border-radius:999px!important}
html body .progress-bar{background-color:var(--sp-accent)!important}
html body .progress-bar.bg-warning{background-color:var(--sp-warm)!important}
html body .progress-bar.bg-danger{background-color:var(--sp-loss)!important}
html body :is([class*="stat"] :is(strong,b,.h2,.h3,.h4,.display-6),[class*="kpi"] :is(strong,b),[class*="saving"] :is(strong,b)){font-variant-numeric:tabular-nums}

/* Foco visible y accesible en todo el ecosistema */
html body :is(a,button,.btn,input,select,textarea,summary):focus-visible{outline:2px solid var(--sp-accent)!important;outline-offset:2px}
@media print{#sp-ecobar{display:none}}

/* ── Dato de impacto (primer elemento de las portadas; siempre con fuente) ── */
.sp-dato{display:flex;gap:12px;align-items:flex-start;background:var(--sp-loss-soft);border:1px solid var(--sp-line);border-left:4px solid var(--sp-loss);border-radius:var(--sp-radius);padding:12px 14px;margin:0 0 16px;text-align:left;color:var(--sp-ink)}
.sp-dato>b{flex:none;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1;font-weight:800;color:var(--sp-loss);font-variant-numeric:tabular-nums}
.sp-dato span{display:block;font-size:.98rem;line-height:1.4}
.sp-dato small{display:block;margin-top:4px;font-size:.78rem;color:var(--sp-muted)}
.sp-dato small a{color:var(--sp-muted);text-decoration:underline}

/* Botones primarios de .net (barra fija y portada): contraste AA en claro y oscuro */
html body :is(.sp-btn-conv,.spx-btn-primary,.spx-btn.spx-btn-primary){background:var(--sp-accent)!important;border-color:var(--sp-accent)!important;color:#fff!important}
@media (prefers-color-scheme:dark){html[data-sp-ui]:not([data-sp-claro]):not([data-sp-color=light]) body :is(.sp-btn-conv,.spx-btn-primary,.btn-primary,[class*="cta-primary"]){color:#0b1120!important}}
html[data-sp-ui][data-sp-color=dark] body :is(.sp-btn-conv,.spx-btn-primary,.btn-primary,[class*="cta-primary"]){color:#0b1120!important}
.sp-dato-banda{padding:20px 0!important;background:transparent!important}
.sp-dato-cont{max-width:1080px;margin:0 auto;padding:0 16px}
.sp-dato-banda .sp-dato{margin:0}
html body .sp-dato .sp-dato-cta{display:inline-flex;margin-top:10px;min-height:44px;align-items:center}
@media (max-width:520px){.sp-dato{flex-direction:column;gap:6px}html body .sp-dato .sp-dato-cta{width:100%;justify-content:center}}

/* ── Argumento con datos: problema → causa → qué funciona (portadas) ── */
.sp-argumento{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:14px;margin:0 0 18px;text-align:left;color:var(--sp-ink)}
.sp-arg-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:720px){.sp-arg-pasos{grid-template-columns:1fr}}
.sp-arg{border-left:4px solid var(--sp-line-strong);padding:4px 0 4px 10px}
.sp-arg small.sp-arg-et{display:block;font-size:.75rem;font-weight:700;color:var(--sp-muted);margin:0}
.sp-arg b{display:block;font-size:clamp(1.5rem,6vw,2rem);line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}
.sp-arg span{display:block;font-size:.92rem;line-height:1.4}
.sp-arg small.sp-arg-f{display:block;margin-top:3px;font-size:.74rem;color:var(--sp-muted)}
.sp-arg small.sp-arg-f a{color:var(--sp-muted);text-decoration:underline}
.sp-arg.es-problema{border-left-color:var(--sp-loss)}.sp-arg.es-problema b{color:var(--sp-loss)}
.sp-arg.es-causa{border-left-color:var(--sp-warm)}.sp-arg.es-causa b{color:var(--sp-warm-ink)}
.sp-arg.es-solucion{border-left-color:var(--sp-ok)}.sp-arg.es-solucion b{color:var(--sp-ok)}
.sp-arg-cierre{margin:12px 0 0;font-weight:600;font-size:1rem}
html body .sp-argumento .sp-dato-cta{display:inline-flex;margin-top:10px;min-height:44px;align-items:center}
@media (max-width:520px){html body .sp-argumento .sp-dato-cta{width:100%;justify-content:center}}
@media (max-width:720px){
  .sp-argumento{padding:10px 12px}
  .sp-arg-pasos{gap:8px}
  .sp-arg{display:grid;grid-template-columns:4.6rem 1fr;column-gap:10px;align-items:start;padding:2px 0 2px 8px}
  .sp-arg b{grid-column:1;grid-row:1 / span 3;font-size:1.45rem;align-self:center}
  .sp-arg small.sp-arg-et,.sp-arg span,.sp-arg small.sp-arg-f{grid-column:2}
  .sp-arg span{font-size:.88rem}
  .sp-arg-cierre{margin-top:8px;font-size:.95rem}
}

/* ── Inicio v2: dolores → datos (tarjetas cortas, fuente en la cifra) → alternativa → acción ── */
.sp-arg-t{margin:0 0 6px;font-weight:700;font-size:.95rem;color:var(--sp-ink)}
.sp-dolores{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.sp-dolores li{background:var(--sp-loss-soft);border:1px solid var(--sp-line);border-radius:999px;padding:6px 10px;font-size:.85rem;line-height:1.25}
.sp-tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.sp-tj{background:var(--sp-soft);border:1px solid var(--sp-line);border-top:3px solid var(--sp-line-strong);border-radius:var(--sp-radius);padding:8px 10px}
.sp-tj a.sp-tj-n{display:block;font-size:clamp(1.3rem,5.5vw,1.9rem);line-height:1.1;font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums;color:var(--sp-ink)}
.sp-tj a.sp-tj-n:hover,.sp-tj a.sp-tj-n:focus-visible{text-decoration:underline dotted}
.sp-tj span{display:block;font-size:.8rem;line-height:1.3;color:var(--sp-ink)}
.sp-tj.es-problema{border-top-color:var(--sp-loss)}.sp-tj.es-problema a.sp-tj-n{color:var(--sp-loss)}
.sp-tj.es-causa{border-top-color:var(--sp-warm)}.sp-tj.es-causa a.sp-tj-n{color:var(--sp-warm-ink)}
.sp-tj.es-solucion{border-top-color:var(--sp-ok)}.sp-tj.es-solucion a.sp-tj-n{color:var(--sp-ok)}
.sp-soluciones{list-style:none;display:grid;gap:6px;margin:0 0 4px;padding:0}
.sp-soluciones li{border-left:3px solid var(--sp-accent);padding:2px 0 2px 10px;font-size:.92rem;line-height:1.35}
.sp-soluciones li b{display:block}
/* banda de sección: una tarjeta corta + acción */
.sp-dato a.sp-tj-n{text-decoration:none;color:inherit}

/* ── Inicio v3: cada tarjeta = dolor → dato → nuestra solución (enlace) ── */
.sp-arg-tit{margin:0 0 10px;font-size:1rem;line-height:1.35;font-weight:600}
.sp-arg-tit a.sp-tj-n{display:inline;font-size:1.25rem;font-weight:800;color:var(--sp-loss);text-decoration:none}
.sp-tj{display:flex;flex-direction:column;gap:4px}
.sp-tj .sp-tj-dolor{font-size:.8rem;font-weight:700;color:var(--sp-muted);line-height:1.25}
.sp-tj .sp-tj-dolor::before{content:"“"}.sp-tj .sp-tj-dolor::after{content:"”"}
.sp-tj a.sp-tj-sol{margin-top:auto;padding-top:6px;border-top:1px solid var(--sp-line);font-size:.86rem;font-weight:700;line-height:1.3;color:var(--sp-accent);text-decoration:none}
.sp-tj a.sp-tj-sol::after{content:" →"}
.sp-tj a.sp-tj-sol:hover{text-decoration:underline}
.sp-arg-pie{margin:10px 0 0;font-size:.92rem;line-height:1.4}
@media (max-width:720px){.sp-tarjetas{grid-template-columns:1fr}.sp-tj{display:grid;grid-template-columns:4.4rem 1fr;column-gap:10px;row-gap:2px}
  .sp-tj > a.sp-tj-n{grid-column:1;grid-row:1 / span 4;align-self:center}.sp-tj > .sp-tj-dolor,.sp-tj > span,.sp-tj > a.sp-tj-sol{grid-column:2}}

/* ── Mini gráficas de datos (CSS puro, accesibles) ── */
.sp-g{display:block;margin:6px 0 2px}
.sp-g-barra{position:relative;height:10px;border-radius:999px;background:var(--sp-line);overflow:hidden}
.sp-g-barra i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:999px;background:var(--c,var(--sp-loss))}
.sp-g-barra.mas i::after{content:"";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(90deg,var(--c,var(--sp-loss)) 0 2px,transparent 2px 4px)}
.sp-g-cmp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3px 6px;font-size:.72rem;color:var(--sp-muted)}
.sp-g-cmp .sp-g-barra{height:8px}
.sp-g-cmp b{font-size:.72rem;font-weight:700;color:var(--sp-ink)}
.sp-g-pie{display:block;font-size:.7rem;color:var(--sp-muted);margin-top:2px}
.sp-arg-tit .sp-g{max-width:520px}

.sp-g-barra{display:block}
.sp-g-cmp{display:grid!important}
.sp-g-cmp > span:not(.sp-g-barra){white-space:nowrap}

/* ── Calculadora de pérdidas con gráfica grande (.net) ── */
.sp-perdidas{max-width:1080px;margin:0 auto;padding:0 16px}
.sp-perdidas-in{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:16px}
.sp-perdidas h2{margin:0 0 4px}
.sp-perdidas .sp-sub{margin:0 0 12px;color:var(--sp-muted);font-size:.92rem}
.sp-perdidas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}
@media (max-width:760px){.sp-perdidas-grid{grid-template-columns:1fr}}
.sp-perdidas label{display:block;font-size:.88rem;font-weight:600;margin:0 0 10px}
.sp-perdidas input{display:block;width:100%;margin-top:4px;min-height:44px;padding:8px 10px;border:1px solid var(--sp-line-strong);border-radius:var(--sp-radius);font:inherit;background:var(--sp-card);color:var(--sp-ink)}
.sp-pg{display:grid;gap:10px}
.sp-pg-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:end}
.sp-pg-fila span{font-size:.88rem}
.sp-pg-fila b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.sp-pg-barra{grid-column:1 / -1;height:22px;border-radius:6px;background:var(--sp-soft);overflow:hidden;border:1px solid var(--sp-line)}
.sp-pg-barra i{display:block;height:100%;width:0;border-radius:6px;background:var(--c);transition:width .4s ease}
.sp-pg-total{border-top:1px solid var(--sp-line);padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sp-pg-total b{font-size:clamp(1.6rem,6vw,2.2rem);color:var(--sp-loss);font-variant-numeric:tabular-nums}
.sp-pg-nota{font-size:.78rem;color:var(--sp-muted);margin:8px 0 0}
.sp-pg-nota a{color:var(--sp-muted)}
html body .sp-dato-cta{text-align:center;justify-content:center}
.sp-banda-dato{padding:12px 0;background:var(--sp-canvas)}
.sp-banda-dato .sp-dato{margin:0;background:var(--sp-card)}
html body a.sp-dato-cta,html body a.sp-dato-cta:hover{text-decoration:none!important;color:#fff!important}

/* ══ Sección de datos v4 (2026-10-08): fuera del encabezado, limpia y consistente ══ */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--sp-accent);color:#fff!important;font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none!important;text-align:center;border:0}
.sp-btn:hover{background:var(--sp-accent-hover)}
.sp-dolores{padding:40px 16px;background:var(--sp-canvas)}
.sp-dolores-in{max-width:1120px;margin:0 auto}
.sp-dolores h2{margin:0 0 6px;font-size:clamp(1.35rem,2.6vw,1.75rem)!important;line-height:1.2!important;color:var(--sp-ink)}
.sp-dolores-sub{margin:0 0 20px;color:var(--sp-muted);font-size:.95rem;max-width:62ch}
.sp-dolores-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.sp-dolores-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sp-dolores-grid{grid-template-columns:1fr;gap:12px}.sp-dolores{padding:28px 16px}}
.sp-dc{display:flex;flex-direction:column;background:var(--sp-card);border:1px solid var(--sp-line);border-top:3px solid var(--c,var(--sp-accent));border-radius:var(--sp-radius);padding:16px}
.sp-dc-dolor{margin:0 0 10px;font-size:.88rem;font-weight:600;color:var(--sp-muted);line-height:1.35}
.sp-dc-cifra{margin:0;line-height:1.1}
.sp-dc-cifra a{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:700;color:var(--sp-ink)!important;text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:1px dotted var(--sp-line-strong)}
.sp-dc-txt{margin:6px 0 10px;font-size:.9rem;line-height:1.45;color:var(--sp-ink)}
.sp-dc .sp-g{margin:0 0 12px}
.sp-dc .sp-g-cmp{font-size:.78rem}.sp-dc .sp-g-cmp b{font-size:.78rem}
.sp-dc-sol{margin-top:auto;padding-top:10px;border-top:1px solid var(--sp-line);font-weight:600;font-size:.9rem;color:var(--sp-accent)!important;text-decoration:none!important}
.sp-dc-sol::after{content:" →"}
.sp-dolores-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:20px}
.sp-dolores-pie p{margin:0;font-size:1rem;max-width:60ch;color:var(--sp-ink)}
/* Franja de página: una fila delgada */
.sp-franja{background:var(--sp-canvas);padding:12px 16px}
.sp-franja-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 16px;background:var(--sp-card);border:1px solid var(--sp-line);border-left:3px solid var(--c,var(--sp-accent));border-radius:var(--sp-radius);padding:12px 16px}
.sp-franja-n a{font-size:1.6rem;font-weight:700;color:var(--sp-ink)!important;text-decoration:none;border-bottom:1px dotted var(--sp-line-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-franja-t{font-size:.92rem;line-height:1.4;color:var(--sp-ink)}
.sp-franja-t .sp-g{margin:6px 0 0;max-width:420px}
@media (max-width:640px){.sp-franja-in{grid-template-columns:auto minmax(0,1fr)}.sp-franja-in .sp-btn{grid-column:1 / -1;width:100%}}
/* v5 (2026-10-09): pie de las páginas con .sp-footer en claro y legible (sistema.css le quitaba el fondo oscuro). */
.sp-footer{background:var(--sp-card)!important;color:var(--sp-ink)!important;border-top:1px solid var(--sp-line)}
.sp-footer a,.sp-footer__title{color:var(--sp-ink)!important}
.sp-footer__text,.sp-footer__legal,.sp-footer .sp-legal{color:var(--sp-muted)!important}
.sp-footer__legal{border-top-color:var(--sp-line)!important}
.sp-footer a:hover{color:var(--sp-accent)!important;background:var(--sp-accent-soft)}
/* v5: planes y precios + bloque plegado «Cómo trabajamos, en detalle» */
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-btn-sec{background:var(--sp-card);color:var(--sp-accent)!important;box-shadow:inset 0 0 0 1.5px var(--sp-accent)}
.sp-btn-sec:hover{background:var(--sp-accent-soft)}
.sp-planes{padding:40px 16px;background:var(--sp-card);border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line)}
.sp-planes-in{max-width:1120px;margin:0 auto}
.sp-planes h2{margin:0 0 6px;font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:700;color:var(--sp-ink)}
.sp-planes-sub{margin:0 0 20px;color:var(--sp-muted);max-width:640px}
.sp-planes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.sp-plan{position:relative;display:flex;flex-direction:column;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:20px}
.sp-plan-dest{border:2px solid var(--sp-accent);box-shadow:0 4px 16px rgba(31,82,169,.12)}
.sp-plan-tag{position:absolute;top:-12px;left:20px;margin:0;padding:2px 10px;border-radius:999px;background:var(--sp-accent);color:#fff;font-size:.78rem;font-weight:600}
.sp-plan h3{margin:0;font-size:1.2rem;font-weight:700;color:var(--sp-ink)}
.sp-plan-para{margin:4px 0 12px;color:var(--sp-muted);font-size:.92rem;min-height:2.6em}
.sp-plan-precio{margin:0 0 14px;color:var(--sp-muted);font-size:.95rem}
.sp-plan-precio b{font-size:2.3rem;line-height:1;color:var(--sp-ink);font-weight:700}
.sp-plan-lista-t{margin:0 0 6px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sp-muted)}
.sp-plan-lista{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;flex:1}
.sp-plan-lista li{display:grid;grid-template-columns:18px 1fr;gap:6px;font-size:.92rem;line-height:1.35;color:var(--sp-ink)}
.sp-plan-lista .sp-ico{color:var(--sp-ok);font-weight:700}
.sp-plan-lista li.no{color:#686e75}.sp-plan-lista li.no .sp-ico{color:#686e75}
.sp-plan .sp-btn{width:100%}
.sp-planes-pie{margin:18px 0 0;color:var(--sp-muted);font-size:.9rem}
.sp-planes-pie a{color:var(--sp-accent)}
@media (max-width:900px){.sp-planes-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}.sp-plan-dest{order:-1}.sp-plan-para{min-height:0}}
.sp-mas{padding:16px;background:var(--sp-canvas)}
.sp-mas-det{max-width:1120px;margin:0 auto;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.sp-mas-det>summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:var(--sp-ink);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.sp-mas-det>summary::-webkit-details-marker{display:none}
.sp-mas-det>summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sp-accent-soft);color:var(--sp-accent)}
.sp-mas-det[open]>summary::before{content:"–"}
.sp-mas-det>summary span{font-weight:400;color:var(--sp-muted);font-size:.9rem}
/* auditoría 2026-10-09: barras de filtros de la plataforma que se salían del ancho en el celular */
@media (max-width:576px){main .d-flex.gap-2{flex-wrap:wrap}main .table{min-width:0}}
/* auditoría 2026-10-09: etiquetas del formulario de consulta legibles (antes #8e949b, 3:1) */
#spxLeadForm label>span,#spxLeadForm .sp-consent,#spxLeadForm .sp-consent span,#spxLeadForm .sp-consent a{color:var(--sp-muted)!important;opacity:1!important;font-size:.85rem}
#spxLeadForm .sp-consent a{text-decoration:underline}
/* auditoría 2026-10-09: botón azul claro con texto blanco (3,85:1) → azul de marca */
a.button{background:var(--sp-accent)!important;color:#fff!important;border-color:var(--sp-accent)!important}
/* Fuente propia (2026-10-10): Roboto variable, subconjunto latino, alojada en el sitio (OFL 1.1, ver fonts/LICENCIA-ROBOTO.txt).
   Solo se descarga si el equipo no tiene -apple-system ni Segoe UI (p. ej. Linux); local() evita descargarla en Android. */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-display:swap;
  src:local("Roboto"),url("fonts/roboto-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Portada ligera (2026-10-10): sin la CSS de Kubio, WordPress aplica su separación global de bloques; se conserva la de antes */
.wp-site-blocks>.entry-content{margin-top:0!important}
.entry-content>main.spx-home{margin-top:16px!important}
/* Rendimiento (2026-10-10): las secciones bajo el primer pantallazo se maquetan cuando se acercan a la vista */
@supports (content-visibility:auto){
  main.spx-home>section:not(.spx-hero):not(#sp-dato-impacto):not(#sp-perdidas):not(#spx-lead){content-visibility:auto;contain-intrinsic-size:auto 900px}
}
/* Titular con dato (2026-10-10): la cifra enlaza a su fuente */
html body .spx-hero h1.sp-h1-dato,html body h1.sp-h1-dato{font-size:clamp(1.6rem,3vw,2.3rem)!important;line-height:1.18!important;letter-spacing:-.01em;max-width:620px}
.sp-h1-dato .sp-h1-cifra{text-decoration:underline dotted 2px;text-underline-offset:6px;white-space:nowrap}
.sp-h1-dato .sp-h1-cifra:hover{text-decoration:underline;text-underline-offset:4px}
.sp-h1-fuente{margin:10px 0 14px;font-size:.92rem;color:var(--sp-muted);max-width:640px}
.sp-h1-fuente em{font-style:normal;font-weight:600}
/* Cabecera integrada (2026-10-10): un solo logotipo para .net y .org — insignia SP plana + SolucionesPro + sufijo */
.sp-sufijo{color:var(--sp-accent);font-weight:600}
.sp-logo-sp,.spx-brand-mark,.sp-unified-mark{background:var(--sp-accent)!important;color:#fff!important;border-radius:6px!important;box-shadow:none!important;background-image:none!important}
.navbar-brand .sp-logo-sp{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;font-size:.8rem;font-weight:700;vertical-align:middle}
/* R7 (2026-10-10): fuente visible en pequeño en cada franja de datos */
.sp-fuente-mini{display:block;margin-top:4px;font-size:.75rem;color:var(--sp-muted)!important;text-decoration:underline;text-underline-offset:2px}
.sp-fuente-mini:hover{color:var(--sp-accent)!important}
/* Titular con dato en .org (2026-10-10): la cifra enlaza a su fuente, como en .net */
.hero-section h1 .sp-h1-cifra{color:var(--sp-accent);text-decoration:underline dotted 2px;text-underline-offset:6px;white-space:nowrap}

/* ===================================================================================
   CAPA EJECUTIVA (2026-10-10) · .net y .org · tema claro y fuente del sistema (decisión del dueño)
   Formas sobrias (4–6 px), filetes en vez de sombras, botones rectos en azul profundo, color solo como señal,
   cifras tabulares, epígrafes en versalitas y sin animaciones decorativas.
   =================================================================================== */
:root{--sp-ejec-boton:#173f84;--sp-ejec-boton-h:#0f2f66;--sp-ejec-radio:6px;--sp-ejec-radio-b:4px}
/* Sin animaciones de aparición por bloque */
html:root:root body .js-anim .spx-rev,html:root:root body .spx-rev,html:root:root body .redeec-motion-section,html:root:root body .redeec-motion-hero *:not(h1){animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
/* Cifras con números tabulares */
.sp-dc-cifra,.sp-plan-precio b,.sp-franja-n,.sp-perdidas-total,.sp-h1-cifra,[data-impact-output]{font-variant-numeric:tabular-nums}
/* Botones: rectos, azul profundo, sin sombras */
html:root:root body .spx-btn,html:root:root body .sp-btn,html:root:root body .btn:not(.btn-link):not(.navbar-toggler):not(.btn-close){border-radius:var(--sp-ejec-radio-b)!important;box-shadow:none!important;letter-spacing:.005em}
html:root:root body .spx-btn-primary,html:root:root body .sp-btn:not(.sp-btn-sec),html:root:root body .btn-primary{background:var(--sp-ejec-boton)!important;border-color:var(--sp-ejec-boton)!important;color:#fff!important}
html:root:root body .spx-btn-primary:hover,html:root:root body .sp-btn:not(.sp-btn-sec):hover,html:root:root body .btn-primary:hover{background:var(--sp-ejec-boton-h)!important;border-color:var(--sp-ejec-boton-h)!important}
html:root:root body .sp-btn-sec,html:root:root body .btn-outline-primary,html:root:root body .btn-outline-dark{border-radius:var(--sp-ejec-radio-b)!important}
/* Prioridades del encabezado .net: lista de texto, no fichas */
html:root:root body #sp-entrada-ejecutiva-v2{gap:2px 0!important;align-items:baseline}
html:root:root body #sp-entrada-ejecutiva-v2 a.spx-btn-secondary{background:none!important;border:0!important;padding:4px 0!important;min-height:0!important;color:var(--sp-accent)!important;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html:root:root body #sp-entrada-ejecutiva-v2 a.spx-btn-secondary:not(:last-child)::after{content:"·";color:var(--sp-muted);margin:0 12px;text-decoration:none;display:inline-block}
html:root:root body #sp-entrada-ejecutiva-v2::before{content:"Prioridades";display:block;width:100%;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-muted);margin-bottom:2px}
/* Tarjetas y secciones: esquinas sobrias y filetes, sin sombras */
html:root:root body .sp-dc,html:root:root body .sp-plan,html:root:root body .sp-mod,html:root:root body .sp-hero-arbol,html:root:root body .spx-offer,html:root:root body .sp-franja-in,html:root:root body .sp-mas-det,
html:root:root body .spx-band,html:root:root body .spx-hero,html:root:root body .spx-tool,html:root:root body .card,html:root:root body .redeec-exec-preview,html:root:root body .sp-perdidas,html:root:root body .spx-lead-grid form{border-radius:var(--sp-ejec-radio)!important;box-shadow:none!important}
html:root:root body .sp-dc{border-top-width:2px!important}
html:root:root body .sp-plan-dest{box-shadow:none!important;border-width:1px!important;outline:1px solid var(--sp-accent);outline-offset:-1px}
html:root:root body .sp-plan-tag{border-radius:2px!important;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem!important}
/* Epígrafes y títulos de sección */
html:root:root body .spx-kicker,html:root:root body .redeec-section-kicker,html:root:root body .sp-plan-lista-t,html:root:root body p.spx-pill{font-size:.72rem!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--sp-muted)!important;background:none!important;border:0!important;padding:0!important}
html:root:root body .sp-dolores h2,html:root:root body .sp-planes h2,html:root:root body .spx-h2,html:root:root body main h2{letter-spacing:-.012em}
html:root:root body .sp-dolores-in>h2,html:root:root body .sp-planes-in>h2{padding-top:14px;border-top:2px solid var(--sp-ink);display:inline-block}
/* .org: fondo del encabezado sin decoración, etiquetas sin forma de píldora */
html:root:root body .redeec-motion-hero::before,html:root:root body .redeec-motion-hero::after{opacity:.25!important}
html:root:root body .rounded-pill:not(.navbar-toggler),html:root:root body .badge{border-radius:3px!important}
html:root:root body .hero-section .btn-lg{font-size:1rem!important;padding:.7rem 1.15rem!important}
/* Ritmo de lectura */
html:root:root body .spx-home p,html:root:root body .sp-dolores p,html:root:root body .sp-planes p{line-height:1.6}
html:root:root body .sp-btn-sec{border:1px solid var(--sp-ejec-boton)!important;color:var(--sp-ejec-boton)!important;background:var(--sp-card)!important}
html:root:root body .sp-btn-sec:hover{background:var(--sp-accent-soft)!important}

/* ===================================================================================
   CAPA DE ESTILO (2026-10-10 · tomada SOLO como referencia de la paleta y el movimiento del kit «Permata Ayu»;
   CSS propio, sin copiar código ni recursos). Solo colores, transiciones y animaciones: no cambia estructura,
   contenido ni la fuente del sistema. Contraste AA verificado: el azul brillante es acento, no texto.
   =================================================================================== */
:root{
  --sp-ref-tinta:#151515; --sp-ref-texto:#434343; --sp-ref-lienzo:#fcfcfc; --sp-ref-linea:#e5e5e5;
  --sp-ref-acento:#34a5e1;   /* decorativo: filetes, bordes, foco y fondo al pasar (con texto oscuro) */
  --sp-ref-enlace:#1c6fa0;   /* mismo tono, oscurecido para texto: 5,5:1 sobre blanco */
  --sp-ref-sombra:0 4px 20px rgba(0,0,0,.06); --sp-ref-sombra-h:0 8px 40px rgba(0,0,0,.08);
  --sp-ref-trans:all .3s ease;
}
/* Paleta monocromática con acento azul */
html:root:root body{--sp-ink:var(--sp-ref-tinta);--sp-canvas:var(--sp-ref-lienzo);--sp-line:var(--sp-ref-linea);--sp-accent:var(--sp-ref-enlace);--bs-link-color:var(--sp-ref-enlace);--bs-body-color:var(--sp-ref-tinta)}
html:root:root body .spx-home p:not(.sp-ha-n):not(.sp-plan-tag),html:root:root body .sp-dolores-sub,html:root:root body .sp-planes-sub,html:root:root body .sp-dc-txt,html:root:root body .sp-plan-para{color:var(--sp-ref-texto)}
html:root:root body h1,html:root:root body h2,html:root:root body h3,html:root:root body .sp-dc-cifra a,html:root:root body .sp-plan-precio b{color:var(--sp-ref-tinta)}
html:root:root body .spx-grad,html:root:root body .sp-h1-cifra,html:root:root body .hero-section h1 .sp-h1-cifra{color:var(--sp-ref-enlace)!important;-webkit-text-fill-color:currentColor;text-decoration-color:var(--sp-ref-acento)!important}
/* Enlaces: color con transición y subrayado en el azul de acento */
html:root:root body a{transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
html:root:root body main a:not([class*=btn]):hover{color:var(--sp-ref-tinta);text-decoration-color:var(--sp-ref-acento)}
/* Botones: rectos, mayúsculas espaciadas; negro → azul al pasar (texto oscuro, AA) */
html:root:root body .spx-btn,html:root:root body .sp-btn,html:root:root body .btn:not(.btn-link):not(.navbar-toggler):not(.btn-close):not(.btn-sm){border-radius:0!important;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600;transition:var(--sp-ref-trans)!important}
html:root:root body .spx-btn-primary,html:root:root body .sp-btn:not(.sp-btn-sec),html:root:root body .btn-primary,html:root:root body .btn-dark{background:var(--sp-ref-tinta)!important;border-color:var(--sp-ref-tinta)!important;color:#fff!important}
html:root:root body .spx-btn-primary:hover,html:root:root body .spx-btn-primary:focus-visible,html:root:root body .sp-btn:not(.sp-btn-sec):hover,html:root:root body .sp-btn:not(.sp-btn-sec):focus-visible,html:root:root body .btn-primary:hover,html:root:root body .btn-primary:focus-visible,html:root:root body .btn-dark:hover,html:root:root body .btn-dark:focus-visible{background:var(--sp-ref-acento)!important;border-color:var(--sp-ref-acento)!important;color:var(--sp-ref-tinta)!important}
html:root:root body .sp-btn-sec,html:root:root body .spx-btn-secondary:not(#sp-entrada-ejecutiva-v2 a),html:root:root body .btn-outline-primary,html:root:root body .btn-outline-dark{background:transparent!important;border:1px solid var(--sp-ref-tinta)!important;color:var(--sp-ref-tinta)!important}
html:root:root body .sp-btn-sec:hover,html:root:root body .spx-btn-secondary:not(#sp-entrada-ejecutiva-v2 a):hover,html:root:root body .btn-outline-primary:hover,html:root:root body .btn-outline-dark:hover{background:var(--sp-ref-tinta)!important;color:#fff!important}
/* Tarjetas: sin esquinas, sombra suave y elevación al pasar */
html:root:root body .sp-dc,html:root:root body .sp-plan,html:root:root body .sp-mod,html:root:root body .spx-tool,html:root:root body .spx-offer,html:root:root body .redeec-chat-row,html:root:root body .card,html:root:root body .sp-bandeja-lista{border-radius:0!important;border-color:var(--sp-ref-linea)!important;box-shadow:var(--sp-ref-sombra)!important;transition:var(--sp-ref-trans)}
html:root:root body .sp-dc:hover,html:root:root body .sp-plan:hover,html:root:root body .sp-mod:hover,html:root:root body .spx-tool:hover,html:root:root body .spx-offer:hover{transform:translateY(-3px)!important;box-shadow:var(--sp-ref-sombra-h)!important}
html:root:root body .sp-plan-dest{outline:2px solid var(--sp-ref-acento)!important;outline-offset:-2px}
html:root:root body .sp-plan-tag,html:root:root body .sp-bandeja-n,html:root:root body .sp-bandeja-badge{background:var(--sp-ref-tinta)!important;border-radius:0!important}
/* Títulos de sección: barra corta de acento azul */
html:root:root body .sp-dolores-in>h2,html:root:root body .sp-planes-in>h2{border-top:0!important;padding-top:18px;position:relative}
html:root:root body .sp-dolores-in>h2::before,html:root:root body .sp-planes-in>h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--sp-ref-acento)}
html:root:root body .spx-kicker,html:root:root body .redeec-section-kicker,html:root:root body p.spx-pill,html:root:root body .sp-plan-lista-t{letter-spacing:.18em!important;color:var(--sp-ref-texto)!important}
/* Formularios: sin esquinas; foco con el azul de acento */
html:root:root body .form-control,html:root:root body .form-select,html:root:root body .spx-lead-form input,html:root:root body .sp-perdidas input{border-radius:0!important;border-color:var(--sp-ref-linea)!important;transition:var(--sp-ref-trans)}
html:root:root body .form-control:focus,html:root:root body .form-select:focus,html:root:root body .spx-lead-form input:focus,html:root:root body .sp-perdidas input:focus{border-color:var(--sp-ref-acento)!important;box-shadow:0 0 0 3px rgba(52,165,225,.22)!important;outline:none}
html:root:root body :focus-visible{outline:2px solid var(--sp-ref-acento);outline-offset:2px}
/* Barra común del ecosistema: acento azul en la cara activa */
#sp-ecobar a.sp-eb-f[aria-current]{border-bottom-color:var(--sp-ref-acento)!important}
/* Movimiento: entrada del titular y de las tarjetas al aparecer (solo desplazamiento, sin opacidad: el contraste nunca baja) */
@keyframes sp-ref-subir{from{transform:translateY(26px)}to{transform:none}}
@keyframes sp-ref-latido{0%,100%{box-shadow:0 0 0 0 rgba(52,165,225,0)}50%{box-shadow:0 0 0 8px rgba(52,165,225,.22)}}
@media (prefers-reduced-motion:no-preference){
  html:root:root body .spx-hero h1,html:root:root body .hero-section h1{animation:sp-ref-subir .8s cubic-bezier(.2,.7,.2,1) both!important}
  html:root:root body .spx-hero .spx-btn-primary,html:root:root body .hero-section .btn-primary{animation:sp-ref-latido 2.4s ease-in-out .9s 2!important}
  @supports (animation-timeline:view()){
    html:root:root body .sp-dc,html:root:root body .sp-plan,html:root:root body .sp-mod,html:root:root body .spx-tool,html:root:root body .spx-offer,html:root:root body .redeec-motion-section .card{
      animation:sp-ref-subir linear both!important;animation-timeline:view()!important;animation-range:entry 0% entry 55%!important}
  }
}
@media (prefers-reduced-motion:reduce){html:root:root body *{animation:none!important;transition:none!important}}
html:root:root body .sp-dc{border-top:3px solid var(--c,var(--sp-ref-acento))!important}
/* Rendimiento .org (2026-10-10): sin saltos al cargar y sin bucles decorativos que ocupan el procesador.
   1) «Roboto Fallback»: Arial/Liberation ajustada a las medidas de Roboto; el cambio de fuente ya no mueve el texto.
   2) Espacio reservado para la barra del ecosistema mientras ecobar.js la inserta.
   3) Las animaciones infinitas del hero quedan en su primer cuadro: el aspecto no cambia. */
@font-face{font-family:"Roboto Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo");
  ascent-override:92.49%;descent-override:24.34%;line-gap-override:0%;size-adjust:100.3%}
html.sp-eco-reserva body:not(:has(>#sp-ecobar))::before{content:"";display:block;height:41px;background:#f3f4f6;border-bottom:1px solid #dde1e6}
@media (max-width:720px){html.sp-eco-reserva body:not(:has(>#sp-ecobar))::before{height:45px}}
@media print{html.sp-eco-reserva body::before{display:none}}
html:root:root body .redeec-motion-hero::before,html:root:root body .redeec-motion-hero::after,html:root:root body .hero-panel::before{animation:none!important}
html:root:root body .redeec-motion-section .badge::after{animation:none!important}