/* ==========================================================================
   Todoesdata — PIE (tdd-pie-*)
   Archivo NUEVO del tema. Sin dependencias.

   POR QUE UN ARCHIVO APARTE Y NO DENTRO DE secciones.css: aquel se encola solo
   en las paginas con plantilla MarketingNew y en la home, porque pesa 40 KB y no
   hace falta en el resto. El pie esta en TODAS las paginas, asi que necesita un
   archivo propio, pequeno, encolado en todo el sitio. Y tampoco va incrustado en
   footer.php: un <style> en cada pagina no lo cachea el navegador entre paginas,
   que es la leccion del snippet de 48 KB del 2026-09-16.

   Diseno aprobado por Pablo el 2026-09-22 (theme/styleguide/pie-propuesta.html):
   fondo TINTA, marca en NARANJA, identidad a la izquierda y columnas con titulo.
   ========================================================================== */

/* EL SELECTOR LLEVA `footer .bottom-footer` A PROPOSITO. El tema pinta
   `footer .bottom-footer { background-color: var(--very-light-gray) }` (style.css:3978),
   que con su elemento gana a un `.tdd-pie` suelto: la primera version salio gris. */
footer .bottom-footer.tdd-pie {
  --tdd-pie-fondo:   #0A0A0A;
  --tdd-pie-naranja: #FF7008;
  --tdd-pie-linea:   rgba(255, 255, 255, .14);
  --tdd-pie-escalon: 2rem;

  position: relative;
  background: var(--tdd-pie-fondo);
  color: #fff;
  padding: 4.5rem 6vw 2.2rem;
  font-family: Inter, system-ui, sans-serif;
}

/* EL ESCALON YA LO TRAE EL TEMA. `footer .bottom-footer::before` (style.css:3985) lo
   dibuja a la derecha, con su transicion. No se duplica: solo se le cambia el color,
   que es lo unico que hacia falta. */
footer .bottom-footer.tdd-pie::before { background-color: var(--tdd-pie-fondo); }

.tdd-pie__rejilla {
  display: grid;
  gap: 3rem 4%;
  grid-template-columns: 1.55fr 1fr 1fr 1fr;
  align-items: start;
}

/* ------------------------------------------------------------- identidad */
.tdd-pie__marca { margin: 0 0 1.25rem; line-height: 0; display: inline-block; }
.tdd-pie__marca img { width: 168px; height: auto; display: block; }

.tdd-pie__claim {
  font: 400 .97rem/1.55 Inter, sans-serif;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 1.7rem;
  max-width: 30ch;
}

.tdd-pie__dato {
  font: 400 .9rem/1.6 Inter, sans-serif;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 .75rem;
}
.tdd-pie__dato a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.tdd-pie__dato a:hover,
.tdd-pie__dato a:focus-visible { border-bottom-color: var(--tdd-pie-naranja); color: #fff; }

.tdd-pie__redes { display: flex; gap: .7rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.tdd-pie__redes a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: rgba(255, 255, 255, .55);
  transition: background .2s, color .2s, border-color .2s;
}
.tdd-pie__redes a:hover,
.tdd-pie__redes a:focus-visible {
  background: var(--tdd-pie-naranja);
  border-color: var(--tdd-pie-naranja);
  color: #fff;
}
.tdd-pie__redes svg { width: 17px; height: 17px; fill: currentColor; }

/* -------------------------------------------------------------- columnas */
.tdd-pie__col h2 {
  font: 700 .74rem/1 Inter, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tdd-pie-naranja);      /* 7,14:1 sobre la tinta: AA y AAA */
  margin: .35rem 0 1.15rem;
}
.tdd-pie__col ul { list-style: none; margin: 0; padding: 0; }
.tdd-pie__col li { margin: 0 0 .62rem; }
.tdd-pie__col a {
  font: 400 .92rem/1.45 Inter, sans-serif;
  color: rgba(255, 255, 255, .80);    /* 12,58:1 */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
}
.tdd-pie__col a:hover,
.tdd-pie__col a:focus-visible { color: #fff; border-bottom-color: var(--tdd-pie-naranja); }

/* Dos grupos en la misma columna (Empresa y Legal comparten la cuarta). */
.tdd-pie__col + .tdd-pie__col { margin-top: 2.1rem; }

/* ------------------------------------------------------------------ pata */
.tdd-pie__pata {
  margin-top: 3.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tdd-pie-linea);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  align-items: baseline;
  font: 400 .82rem/1.5 Inter, sans-serif;
  color: rgba(255, 255, 255, .60);    /* 7,30:1 */
}
.tdd-pie__pata .tdd-pie__der { margin-left: auto; }

@media (max-width: 1100px) {
  .tdd-pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tdd-pie__rejilla { grid-template-columns: 1fr; gap: 2.2rem; }
  .tdd-pie { padding: 3rem 6vw 1.8rem; }
  .tdd-pie__pata { flex-direction: column; }
  .tdd-pie__pata .tdd-pie__der { margin-left: 0; }
}