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

   🔴 POR QUÉ EXISTE

   Había SEIS pies distintos en 18 páginas, y once de ellas
   terminaban en una sola línea con un enlace:

     · index.html + calculadora   4 columnas + CTA a despachos
     · aviso-legal / privacidad   índice legal largo
     · metodologia                bloque propio
     · fuentes                    «← Volver al inicio»
     · profesionales              «← Volver al sitio para trabajadores»
     · 404                        «← Volver al inicio»
     · las 9 guías y calculadoras «← Ver todas las guías»   ← 9 de 18

   El pie es la última pantalla de cada visita, y en este sitio
   casi todo el tráfico entra por una guía desde buscadores —no
   por el home—. Quien terminaba de leer «Me despidieron» sólo
   tenía una salida: volver a la biblioteca. Ni las calculadoras,
   ni los plazos, ni la puerta comercial de despachos.

   Se sube al nivel del de cesarbaz.com y Omnidata —identidad,
   navegación en tres columnas, franja comercial y barra legal—
   con la línea gráfica del sitio: negro, verde IMSS e Inter.

   🔴 Clases con prefijo `sdl-ft-`: `styles.css` ya define
   `.footer`, `.footer-grid`, `.footer-note`, `.footer-cta` y
   `.footer-legal-link`, y el componente no debe heredarlas.

   ⚠️ 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.
   ============================================================ */

/* 🔴 EL COMPONENTE DECLARA TODO LO QUE NO QUIERE HEREDAR

   Y LOS COLORES VAN EN LITERAL, NO EN `var(--…)`: este pie vive en
   páginas que cargan `styles.css` sola y en otras que además cargan
   `calculadora.css`. Apoyarse en una variable es apostar a que
   significa lo mismo en las 18 — el fallo que dejó el pie de Omnidata
   con contraste 2.17:1 en su home. */
.sdl-ft {
  margin: 0;
  padding: 0;
  background: #000;
  color: #d4dddb;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.sdl-ft * { text-align: inherit; }
.sdl-ft a { text-decoration: none; }

.sdl-ft-in {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 38px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
}

/* ---------- Identidad ---------- */
.sdl-ft-id { max-width: 340px; }
.sdl-ft-marca {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 18px; color: #fff;
}
.sdl-ft-marca img { width: 44px; height: 44px; object-fit: contain; display: block; flex: 0 0 44px; }
.sdl-ft-marca strong { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: #fff; }
.sdl-ft-marca small { display: block; font-size: 11px; color: #8fc8be; margin-top: 3px; }
.sdl-ft-id p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: #abb7b5; }

/* Sello de independencia: en un dominio que contiene «imss» es la
   afirmación que más se repite del sitio, así que va marcada, no suelta. */
.sdl-ft-sello {
  display: block; border-left: 3px solid #75b8ad; padding-left: 14px;
  font-size: 12px; line-height: 1.5; color: #9fb0ad;
}

/* ---------- Columnas ---------- */
.sdl-ft-col h2 {
  margin: 0 0 15px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .12em;
  text-transform: uppercase; color: #8fc8be;
}
.sdl-ft-col a {
  display: block; margin: 0 0 10px; min-height: 24px;
  font-size: 13.5px; line-height: 1.5; color: #d4dddb;
  transition: color .2s;
}
.sdl-ft-col a:hover { color: #fff; }

/* ---------- Franja comercial ---------- */
/* La única puerta de negocio del sitio vivía en 2 de 18 páginas. */
.sdl-ft-pro {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0;
  border-top: 1px solid #2a2f2e;
  display: grid; grid-template-columns: 1fr auto;
  gap: 26px; align-items: center;
}
.sdl-ft-pro span {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 850; letter-spacing: .11em;
  text-transform: uppercase; color: #8fc8be;
}
.sdl-ft-pro strong { display: block; font-size: 17px; line-height: 1.3; color: #fff; }
.sdl-ft-pro p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: #abb7b5; max-width: 640px; }
.sdl-ft-pro .sdl-ft-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px; border-radius: 8px;
  background: #006455; border: 1px solid #006455; color: #fff;
  font-size: 14px; font-weight: 750; white-space: nowrap;
  transition: background .2s;
}
.sdl-ft-pro .sdl-ft-cta:hover { background: #004d42; }

/* ---------- Barra legal ---------- */
.sdl-ft-bar {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0 34px;
  border-top: 1px solid #2a2f2e;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.sdl-ft-bar p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8e9a98; }
/* 🔴 24×24 mínimo (WCAG 2.5.8). Un enlace en línea dentro de un párrafo
   hereda la altura de la línea —aquí 15px— y la suite del proyecto lo
   marca. `inline-flex` con `min-height` le da el área sin sacarlo del
   texto ni cambiarle la etiqueta. */
.sdl-ft-bar a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: #b9c5c3; font-size: 11.5px;
}
.sdl-ft-bar a:hover { color: #fff; }
.sdl-ft-nota { max-width: 720px; }

@media (max-width: 900px) {
  .sdl-ft-in { grid-template-columns: 1fr 1fr; gap: 34px 28px; padding: 44px 0 30px; }
  .sdl-ft-id { grid-column: 1 / -1; max-width: none; }
  .sdl-ft-pro { grid-template-columns: 1fr; gap: 16px; }
  .sdl-ft-pro .sdl-ft-cta { justify-self: start; }
}
@media (max-width: 620px) {
  .sdl-ft-in { grid-template-columns: 1fr; gap: 30px; }
  .sdl-ft-in, .sdl-ft-pro, .sdl-ft-bar { width: min(1180px, calc(100% - 24px)); }
  /* En una sola columna los enlaces necesitan área tocable, no sólo texto. */
  .sdl-ft-col a { margin-bottom: 14px; }
  .sdl-ft-bar { justify-content: flex-start; }
}

/* `styles.css` oculta `.footer` al imprimir. Este pie ya no lleva esa
   clase, así que se declara su propio comportamiento en vez de heredarlo. */
@media print { .sdl-ft { display: none !important; } }