.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* === Suavizado de fuente, igual que en la pagina y la cabecera ===
   El mockup usa antialiased; sin el, el mismo peso 400 se ve mas grueso. */

.elementor-element-fa6d9a3,
.elementor-element-fa6d9a3 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.elementor-element-fa6d9a3 svg { display: block; }

/* Mismo arreglo en el pie: los contenedores-enlace no deben estirarse. */

.elementor-element-fa6d9a3 a.e-con {
  width: fit-content !important;
  flex: 0 0 auto !important;
}

/* Tipografia en rem, igual que el resto del sistema. 16px = 1rem. */
.elementor-element-cf00004 { font-size: 1.5rem !important; }   /* marca del pie */
.elementor-element-cf00011,
.elementor-element-cf00021 { font-size: 0.7rem !important; }   /* EXPLORAR / PROYECTO */
.elementor-element-cf00031,
.elementor-element-cf00032 { font-size: 0.75rem !important; }  /* barra legal */

/* Correccion: las reglas de arriba usaban los ids de mi payload, pero
   import-template los regenera. Estos son los reales. 16px = 1rem. */

.elementor-element-70559ee { font-size: 1.5rem !important; }   /* marca del pie */
.elementor-element-b1f6c78,
.elementor-element-722a3c2 { font-size: 0.7rem !important; }   /* EXPLORAR / PROYECTO */
.elementor-element-95a8e04 > * { font-size: 0.75rem !important; }  /* barra legal */
/* ===================================================================
   Pie en pantallas estrechas (1/9, 14:10)
   Tres arreglos, en orden de importancia:
   1. El padding lateral era de 40px en movil, contra los 20 del mockup:
      a 390px eso deja solo 295 de contenido y todo se comprime.
   2. Entre 768 y 900 las columnas caian a 169px y los enlaces largos
      («Politica de privacidad») se partian en dos lineas.
   3. En una sola columna el pie medía 912px de alto — mas que la pantalla.
      Las dos listas pasan a ir en paralelo, que es lo que pide el contenido:
      son dos menus cortos, no un texto corrido.
   =================================================================== */

/* --- 768 a 900: dos columnas en vez de tres apretadas --- */
@media (max-width: 900px) {
  .elementor-3662 .e-fc6a2f8-9793e6f {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 40px !important;
    row-gap: 48px !important;
  }
  /* la marca ocupa el ancho completo, encima de los dos menus */
  .elementor-3662 .e-70559ee-5777212 { grid-column: 1 / -1; }
}

/* --- Por debajo de 768: padding del mockup y menus en paralelo --- */
@media (max-width: 767px) {
  .elementor-3662 .e-fa6d9a3-10f5db2 { padding: 64px 20px !important; }
  .elementor-3662 .e-fc6a2f8-9793e6f {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    row-gap: 40px !important;
  }
  .elementor-3662 .e-70559ee-5777212 { grid-column: 1 / -1; }
  /* Los enlaces se aprietan un poco: 12px de separacion es mucho cuando
     hay diez en pantalla */
  .elementor-3662 .e-b1f6c78-3995759,
  .elementor-3662 .e-722a3c2-fa35af7 { gap: 10px !important; }
}

/* --- Muy estrecho: si los dos menus ya no caben, se apilan --- */
@media (max-width: 380px) {
  .elementor-3662 .e-fc6a2f8-9793e6f { grid-template-columns: 1fr !important; }
}

/* La linea de creditos se parte en dos lineas antes de desbordar */
@media (max-width: 520px) {
  .elementor-3662 .e-95a8e04-a5bd633 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* Los iconos de las redes, en el bloque de la marca del pie. Elementor reescribe
   el fill del SVG a currentColor, así que hay que devolverle el fill: none o los
   iconos de trazo salen macizos. */
#tl-redes { display: flex; flex-direction: row; gap: 14px; padding: 0; margin-top: 24px; min-width: 0; }
#tl-redes > a {
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(246, 243, 236, .18);
  color: rgba(246, 243, 236, .68);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
#tl-redes > a:hover, #tl-redes > a:focus-visible {
  color: var(--color-ink); background-color: var(--color-gold); border-color: var(--color-gold);
}
#tl-redes svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; }
@media (max-width: 767px) { #tl-redes { margin-top: 20px; } }

#tl-redes > a { width: 38px !important; flex: 0 0 38px !important; }/* End custom CSS */