.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;
  }
}/* End custom CSS */