/* ============================================================
   PIE ÚNICO DE cesarbaz.com — 19-ago-2026

   🔴 POR QUÉ EXISTE

   Había CINCO pies distintos en 33 páginas:

     · 29 páginas          identidad + 11 enlaces + barra legal  ← el bueno
     · marca-propia        10 enlaces (faltaba «Sistema de Revenue»)
     · influencers         9 enlaces (faltaban «Franquicias» y «Marca Propia»)
     · diagnostico         UNA LÍNEA de texto plano, sin un solo enlace
     · presentacion-servicios   SIN <footer>

   Las dos últimas son las que importaban de verdad: `diagnostico/`
   es una de las TRES puertas de captación del sitio. Quien
   terminaba el diagnóstico y dejaba su correo —el punto de mayor
   intención de toda la visita— se quedaba sin ninguna salida.

   🔴 POR QUÉ UNA HOJA PROPIA Y NO LAS REGLAS DE `styles.css`

   El pie bueno vivía en `.footer.site-footer`, definido en
   `styles.css`. Pero `diagnostico/` y `presentacion-servicios`
   NO CARGAN `styles.css`: traen sus estilos incrustados. Copiarles
   el marcado habría puesto el pie en el DOM sin que se viera —el
   fallo exacto que la doctrina llama «que el contenido esté no
   prueba que se vea».

   Por eso el componente es autónomo: prefijo `cb-ft-`, colores
   LITERALES y todo lo que no quiere heredar declarado aquí. Así
   se comporta igual en las 33, carguen la hoja que carguen.

   ⚠️ NO ESCRIBIR RUTAS CON COMODÍN EN ESTE COMENTARIO: un
   asterisco seguido de barra cierra el bloque aquí mismo y se
   pierde la primera regla que venga detrás.
   ============================================================ */

/* 🔴 COLORES LITERALES, NUNCA `var(--…)`

   `styles.css` define `--ink`, `--coral` y `--sans`, pero las páginas
   del diagnóstico y del deck tienen su propio bloque de variables con
   otros valores. Un `var(--ink, #0b1717)` no salva: si la variable
   existe con otro valor, el respaldo no entra nunca. Es lo que dejó el
   pie de Omnidata con contraste 2.17:1 en su propio home. */
.cb-ft {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #0b1717;
  color: #fff;
  border-top: 5px solid #ff6f4f;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  /* 🔴 `font-weight` explícito: sin él, el pie de `diagnostico/` salía en 500
     porque esa página define su propio `body` y el componente lo heredaba.
     Un peso distinto no rompe nada visible de golpe — simplemente hace que
     el mismo pie pese distinto en una página de cada treinta y tres. */
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.cb-ft * { text-align: inherit; text-transform: none; letter-spacing: normal; }
.cb-ft a { text-decoration: none; color: inherit; }

/* 🔴 LA TIPOGRAFÍA VA BLINDADA, Y NO ES CELO DE MÁS

   `solutions-redesign.css` trae esta regla, que cargan seis páginas:

       .solution-page p { font-family: var(--body) !important }

   Alcanza a CUALQUIER `<p>` dentro de esas páginas —incluidos los epígrafes
   de las columnas y los de la barra legal de este pie— y `--body` es
   'DM Sans'. Resultado: seis pies con el marcado idéntico al de los otros
   veintisiete y la tipografía cambiada. No se ve roto; se ve *distinto*, que
   es justo lo que ningún verificador de texto detecta.

   Contra un `!important` por etiqueta no hay especificidad que valga: la
   única defensa es declarar la familia del componente igual de fuerte. */
.cb-ft,
.cb-ft p,
.cb-ft a,
.cb-ft nav,
.cb-ft strong,
.cb-ft small,
.cb-ft span {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.cb-ft-main {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 58px clamp(28px, 5vw, 76px) 50px;
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) minmax(170px, .55fr) minmax(280px, .8fr);
  gap: clamp(42px, 5vw, 78px);
  align-items: start;
}

/* ---------- Identidad ---------- */
.cb-ft-id { max-width: 470px; }
.cb-ft-marca {
  display: inline-flex; align-items: center; gap: 13px;
  margin-bottom: 28px; color: #fff;
}
.cb-ft-marca span {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #ff6f4f; color: #0b1717;
  font: 800 11px 'Manrope', system-ui, sans-serif;
}
.cb-ft-marca strong {
  font: 700 20px 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em; color: #fff;
}
.cb-ft-id > p {
  max-width: 440px; margin: 0 0 26px;
  color: #c0ccc8; font-size: 16px; line-height: 1.7;
}
.cb-ft-id > small {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font: 600 10px 'Manrope', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .12em;
}
/* Punto vivo: dice «hay alguien al otro lado» sin escribirlo. */
.cb-ft-id > small::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #51c681; box-shadow: 0 0 0 5px rgba(81, 198, 129, .12);
  flex: 0 0 auto;
}

/* ---------- Columnas ---------- */
.cb-ft-nav, .cb-ft-contacto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
}
.cb-ft-nav > p, .cb-ft-contacto > p {
  margin: 0 0 14px; color: #ff6f4f;
  font: 700 9px 'Manrope', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
}
.cb-ft-nav a, .cb-ft-contacto a {
  position: relative; color: #d7dfdc;
  font: 500 13px 'Manrope', system-ui, sans-serif; line-height: 1.45;
  /* 24px de alto mínimo: el objetivo táctil de WCAG 2.5.8 lo daba antes
     una regla de `styles.css` que ya no alcanza a este componente. */
  min-height: 24px; display: flex; align-items: center;
  padding-bottom: 3px;
  transition: color .2s ease, transform .2s ease;
}
.cb-ft-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: #ff6f4f; transition: right .25s ease;
}
.cb-ft-nav a:hover { color: #fff; }
.cb-ft-nav a:hover::after { right: 0; }

.cb-ft-contacto { gap: 17px; }
.cb-ft-contacto a {
  width: 100%; padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  justify-content: space-between; gap: 16px;
  overflow-wrap: anywhere;
}
/* 🔴 La flecha se marca con SU PROPIA CLASE, no con `a span`.

   El pie anterior metía el texto directamente en el `<a>` y sólo la flecha
   en un `<span>`, así que `a span{color:coral}` acertaba. Al envolver el
   texto en otro `<span>` —hacía falta para que el motor de idioma pudiera
   traducirlo sin llevarse la flecha por delante— esa regla pasó a pintar
   también el texto: «Cuéntame tu proyecto» salía en coral, como si fuera
   un enlace distinto de los otros dos.

   Estaba en las 33 páginas por igual, y por eso ninguna comparación ENTRE
   páginas podía verlo: el defecto uniforme sólo aparece mirando una. */
.cb-ft-contacto a .cb-ft-flecha { color: #ff6f4f; }
.cb-ft-contacto a:hover { color: #fff; transform: translateX(4px); }
.cb-ft-wa { color: #fff; }

/* ---------- Barra legal ---------- */
.cb-ft-bar {
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding: 22px clamp(28px, 5vw, 76px) 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 30px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.cb-ft-bar p {
  margin: 0; color: #8fa09b;
  font: 500 9px 'Manrope', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .11em;
}

@media (max-width: 1024px) {
  .cb-ft-main { grid-template-columns: 1fr 1fr; padding-top: 50px; }
  .cb-ft-id { grid-column: 1 / -1; max-width: 600px; }
}
@media (max-width: 640px) {
  .cb-ft-main { grid-template-columns: 1fr; gap: 38px; padding: 44px 22px 38px; }
  .cb-ft-id { grid-column: auto; }
  .cb-ft-bar { padding: 20px 22px 26px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Las páginas que traen su propia hoja ocultan `.footer` al imprimir.
   Este componente ya no lleva esa clase: declara su comportamiento. */
@media print { .cb-ft { display: none !important; } }