/**
 * Footer global.
 *
 * Solo lo que los controles de Elementor no cubren: repartir los enlaces
 * legales a lo ancho. El resto (colores, tipografias, medidas) vive en la
 * plantilla y se edita desde el panel.
 */

/* El widget icon-list en modo "inline" los deja juntos a la izquierda; el
   diseno los reparte de borde a borde del contenido. */
.scala-footer__legal-lista .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 12px 24px;
}

.scala-footer__legal-lista .elementor-icon-list-item {
  margin: 0;
}

@media (max-width: 767px) {
  /* Una por linea, como en el diseno de movil.
     Flex en columna y no display:block: el modo "inline" del widget pone los
     items en inline-block con el mismo peso que cualquier regla de esta hoja,
     que se encola antes y pierde el empate. Como items de un flex quedan
     blockificados y el conflicto desaparece. */
  .scala-footer__legal-lista .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Redes a la izquierda, como el resto de la columna. */
  .scala-footer__redes .elementor-social-icons-wrapper {
    justify-content: flex-start;
    text-align: left;
  }

  /* Logo centrado. */
  .scala-footer__logo {
    text-align: center;
  }

  /* La flecha de subir va a la derecha, a la altura del primer bloque de
     enlaces; en el flujo normal caeria al final de la columna. */
  .scala-footer__enlaces {
    position: relative;
  }

  .scala-footer__enlaces > .e-con:last-child {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
  }


}

/* ---------- formulario del newsletter ---------- */

/* Una sola pastilla: el ENVOLTORIO es la capsula (filete, radio y recorte) y
   dentro van el campo y el boton pegados, sin separacion ni padding. El boton
   es el extremo derecho de la capsula: va a ras del borde y el overflow del
   envoltorio le recorta las esquinas con su mismo radio.
   align-items: stretch iguala los dos altos por construccion, sin depender de
   los tamanos predefinidos de Elementor ni de compensaciones.
   La separacion de filas se anula en el widget (row_gap 0), no aqui: ese
   control escribe la regla con la especificidad del wrapper de Elementor. */
.scala-footer__form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(240, 233, 238, .45);
  border-radius: 100px;
  overflow: hidden;
}

/* Elementor da width:100% a los grupos por su clase de columna
   (.elementor-col-100): el del campo crece y el del boton se queda con su
   ancho natural. min-width:0 permite que el campo se encoja. */
.scala-footer__form .elementor-form-fields-wrapper .elementor-field-group.elementor-field-type-email {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
}

.scala-footer__form .elementor-form-fields-wrapper .elementor-field-type-submit {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}

/* El campo, transparente y sin filete propio: la capsula la dibuja el
   envoltorio. El grupo de mas en el selector gana al padding que Elementor
   declara por tamano (.elementor-field-textual.elementor-size-sm). */
.scala-footer__form .elementor-field-group .elementor-field-textual {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 16px 12px 24px;
}

/* Sin radio propio: lo aporta el recorte de la capsula. */
.scala-footer__form .elementor-field-type-submit .elementor-button {
  width: auto;
  height: 100%;
  border-radius: 0;
  padding: 12px 28px;
}

@media (max-width: 767px) {
  /* En movil se apilan: la capsula pasa al campo y el boton va debajo, a todo
     el ancho, que es el area de toque. */
  .scala-footer__form .elementor-form-fields-wrapper {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  /* Cinco clases a proposito: el control "Borde del campo" del widget esta a 0
     (lo necesita el escritorio, donde el filete lo lleva la capsula) y
     Elementor escribe esa regla con la especificidad de su wrapper, (0,4,0).
     Con menos clases esta hoja pierde y el campo quedaba sin filete en movil. */
  .scala-footer .scala-footer__form .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual {
    border: 1px solid rgba(240, 233, 238, .45);
    border-radius: 100px;
    padding: 12px 20px;
  }

  .scala-footer__form .elementor-form-fields-wrapper .elementor-field-type-submit {
    width: 100%;
    margin-top: 10px;
  }

  /* A todo el ancho: el area de toque. El color lo define el widget (el
     cliente lo puso claro en todos los breakpoints), no esta hoja. */
  .scala-footer__form .elementor-field-type-submit .elementor-button {
    width: 100%;
    border-radius: 100px;
  }
}