/* ============================================================
   ALL FLAMENCO — los cinco enlaces del PIE, en dos renglones

   Carlos, 28-ago-2026: «en el footer que no haya mas de 2 renglones para los
   enlaces. Terminos y condiciones cabe junto a las cookies y privacidad en el
   mismo. Si hace falta, reduce el tamano de su letra».

   🔴 POR QUE ESTA HOJA EXISTE APARTE. `af-blog-formato.css` solo se encola en
   `is_singular('post')` —comprobado: sale en /blog/<slug>/ y NO en la portada
   ni en /contacto/—. El pie es de TODAS las paginas, asi que una regla suya ahi
   dejaria el pie bien en el blog y mal en el resto: peor que dejarlo mal
   entero, porque nadie lo notaria. La encola `af_pie_legal_enqueue()`.

   🔴 Y POR QUE ESTOS SELECTORES TAN LARGOS, que es donde fallo el primer
   intento. Divi imprime sus reglas asi:

       body #page-container .et_pb_section .et_pb_button_2_tb_footer
           { font-size:16px; padding-right:1em!important; padding-left:1em!important }

   Eso es especificidad (1,2,1) —un id y dos clases— y ademas `!important` en el
   relleno. Mis reglas iban con (0,3,0) y no ganaban: la hoja se cargaba, las
   reglas estaban ahi y no hacian NADA. Se ve en la captura, no en el fichero.
   Aqui se usa el mismo prefijo mas una clase, o sea (1,3,1), que si gana.
   ============================================================ */

/* La columna reparte en FILA con salto. Ojo: `.et_pb_section` esta DENTRO de
   `.et-l--footer`, no al reves — el orden del selector importa.            */
body #page-container .et-l--footer .et_pb_section .et_pb_column_1_tb_footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .3rem .6rem !important;
}

/* Los envoltorios de Divi son bloques con su propio ancho; en fila tienen que
   encogerse a su contenido o cada uno se comeria un renglon entero.        */
body #page-container .et-l--footer .et_pb_section .et_pb_button_module_wrapper {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Y la letra y el relleno, que son los que deciden si caben cinco en dos
   renglones. El relleno de Divi es 1em a cada lado: 32 px por enlace, 160 px
   solo de aire en cinco enlaces.                                           */
body #page-container .et-l--footer .et_pb_section .et_pb_button {
  font-size: 13px !important;
  padding-right: .3em !important;
  padding-left: .3em !important;
  padding-top: .2em !important;
  padding-bottom: .2em !important;
  white-space: nowrap !important;    /* que ninguno se parta por la mitad */
}

/* En movil no se comprime: ahi es normal que caigan en varias lineas y
   apretarlos solo los haria ilegibles.                                     */
@media (max-width: 820px) {
  body #page-container .et-l--footer .et_pb_section .et_pb_column_1_tb_footer {
    justify-content: flex-start !important;
  }
  body #page-container .et-l--footer .et_pb_section .et_pb_button {
    font-size: 13px !important;
  }
}