/* Arreglos de diseño sobre la copia de tecniva.mx.
   Se agregan aquí, nunca a mano en public/. construir.py enlaza esta hoja
   después de las hojas de Elementor y la versiona con ?v=.
   Lleva !important a propósito: es la capa de arreglos y el CSS de cada
   página de Elementor usa selectores más largos. */

/* 1. Cajas de icono de Elementor con el icono a un lado: portada, /contacto/
      y /nosotros/ ("Más que experiencia: resultados comprobables" y
      "Contáctanos"). El icono quedaba pegado al texto porque el sitio tenía
      el espacio en 0; ya pasaba igual en el sitio vivo. 20 px en escritorio,
      14 px a 767 px o menos, y el icono arriba, a la altura de la primera
      línea del título. */
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-wrapper {
  gap: 20px !important;
  align-items: flex-start !important;
}

@media (max-width: 767px) {
  .elementor-widget-icon-box.elementor-mobile-position-inline-start .elementor-icon-box-wrapper,
  .elementor-widget-icon-box.elementor-mobile-position-inline-end .elementor-icon-box-wrapper {
    gap: 14px !important;
  }
}

/* 2. En esas mismas cajas, el título y la descripción iban justificados y en
      celular abrían huecos grandes entre palabras. Se alinean a la izquierda. */
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-title,
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-description,
.elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-title,
.elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-description {
  text-align: left !important;
}

/* Puertas a las landings en la portada (/): dos botones justo debajo del bloque
   de sectores (el carrusel de la portada, que ocupa la primera pantalla y lleva
   el encabezado encima, por eso no se puede poner antes). construir.py inserta
   el bloque; aqui solo su estilo. El boton reusa el estilo del "¡Conocer más a
   Tecniva!" (azul #33759C, texto 600, hover #33759CDB). Centrados en escritorio;
   a 767 px o menos, uno debajo del otro a todo lo ancho. Al menos 44 px de alto. */
.tv-puertas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 5%;
  background: #fff;
}

.tv-puertas .elementor-button {
  background-color: #33759C;
  font-weight: 600;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
}

.tv-puertas .elementor-button:hover,
.tv-puertas .elementor-button:focus {
  background-color: #33759CDB;
}

@media (max-width: 767px) {
  .tv-puertas {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 28px 24px;
  }

  .tv-puertas .elementor-button-wrapper,
  .tv-puertas .elementor-button {
    width: 100%;
  }
}