.alt-row {
  align-items: center;
}

.alt-row img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.divider-line {
  border: none;
  border-top: 4px solid var(--color-accent);
  width: 100%;
  opacity: inherit !important;
}

.static-article {
  max-width: 820px;
  margin: 0 auto;
}

.static-article img {
  border-radius: var(--radius-lg);
  margin-top: 2rem;
}

/* Botón Descargar Brochure — original Elementor: texto NEGRO 19px/700 Nunito,
   fondo naranja #F88C03, radio 11px, padding 12px 24px, sin borde */
.brochure-btn {
  margin-top: 1rem;
  background-color: var(--color-accent-2);
  border: 0;
  border-radius: 11px;
  color: #000;
  font-size: 19px;
  font-weight: 700;
  padding: 12px 24px;
}

.btn.brochure-btn:hover,
.btn.brochure-btn:focus {
  background-color: var(--color-accent-hover);
  color: #000;
}

/* ===== Corporativo: bloques alternados texto/imagen =====
   Réplica del Elementor original (post-3386): contenedor boxed de 1140px,
   título Alexandria 30px #511653 centrado, línea divisoria naranja #F08501
   de 4.1px al ancho completo de la columna, texto justificado 20px/33px
   seminegrita, imagen con radio de 15px y columnas centradas verticalmente. */

/* Título script "El mundo al alcance de tu empresa":
   15px (sección) + 33px (columna) + 4px (widget) por encima en el original */
.corp-lead {
  padding-top: 52px;
}

/* Separación entre bloques: 53px de margen + 10px de padding de columna
   a cada lado en el original (73px); "Nuestra misión" usa 30px (50px) */
.corp-block {
  margin-top: 73px;
}

.corp-block--tight {
  margin-top: 50px;
}

/* Sección boxed de Elementor: columnas de 570px (contenido de 130 a 1270
   en un viewport de 1400px, igual que el original) */
.corp-block .container {
  max-width: 1144px;
}

/* Gap de columnas default de Elementor: 10px por lado */
.corp-block .alt-row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

/* La columna de texto lleva margen lateral de 20px y sin padding en el
   original (contenido de texto de 530px por columna de 570px) */
.corp-block__text {
  padding-left: 20px;
  padding-right: 20px;
}

/* El original declara "Alexandria" pero nunca carga esa fuente:
   cae al sans-serif del sistema (Arial), que es lo que se ve realmente */
.corp-block__text h2 {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

/* Divisoria: padding-block 15px + margen de widget 20px = 35px arriba/abajo.
   opacity 1 anula el opacity .25 que Bootstrap aplica a los <hr> */
.corp-block__text .divider-line {
  border: none;
  border-top: 4.1px solid #F08501;
  width: 100%;
  margin: 35px 0;
  opacity: 1;
}

/* "Nuestra misión" acerca la línea al título (margen -24px/-7px del original) */
.corp-block--tight .divider-line {
  margin: 11px 0 28px;
}

/* Divisoria de la intro de Franquicias: opacity 1 anula el opacity .25 de
   Bootstrap y el margin-top la separa del texto/imagen de arriba */
.franchises-intro__divider {
  opacity: 1;
  margin: 40px 0 0;
}

/* En el original sólo "Nuestra misión" envuelve el texto en <p> real
   (margen inferior de 12.5px del theme): en mobile agranda el hueco
   texto→imagen y en desktop la columna más alta hace que el bloque
   centrado quede 12px más arriba respecto de la imagen */
.corp-block--tight .corp-block__text {
  padding-bottom: 12px;
}

@media (min-width: 768px) {
  .corp-block--tight .corp-block__text {
    padding-bottom: 24px;
  }
}

.corp-block__text p {
  font-size: 20px;
  font-weight: 600;
  line-height: 33px;
  text-align: justify;
  margin: 0;
}

#introText p {
  text-align: justify;
  font-size: 20px;
  font-weight: 600;
  line-height: 33px;
}

.corp-block img {
  border-radius: 15px;
}

/* ===== Contacto =====
   Hero: título Satisfy 54px a 41px del header, línea gris (line.jpg 100x2,
   #A0A9BA) a 17px, subtítulo Nunito 20px/22px 600 a 15px y 52px hasta
   la franja de tarjetas. La marca de agua usa opacity .19 en esta página. */
.contact-hero::before {
  opacity: 0.19;
}

.contact-hero section {
  padding: 41px 0 52px;
}

.contact-hero__line {
  width: 100px;
  border-top: 2px solid #A0A9BA;
  opacity: 1;
  margin: 17px auto 15px;
}

.contact-hero__subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  color: var(--color-text);
}

/* Franja de 3 columnas full-width (sección stretched del original):
   fondo #F5F2F2, form 40%, cada sucursal 30%, 32px hasta el footer */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: #F5F2F2;
  margin-bottom: 32px;
}

.contact-strip__col {
  display: flex;
}

.contact-strip__col--form {
  width: 40%;
}

.contact-strip__col--branch {
  width: 30%;
}

@media (max-width: 767px) {
  /* En el original el título "Contacto" conserva los 54px en mobile */
  .contact-hero .script-title {
    font-size: 54px;
  }

  .contact-hero section {
    padding-bottom: 35px;
  }

  /* La línea queda pegada arriba del subtítulo (16px/1.6) en mobile */
  .contact-hero__line {
    margin: 18px auto -3px;
  }

  .contact-hero__subtitle {
    font-size: 16px;
    line-height: 1.6;
  }

  .contact-strip__col--form,
  .contact-strip__col--branch {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .corp-lead {
    padding-top: 19px;
  }

  .corp-block {
    margin-top: 20px;
  }

  .corp-block--tight {
    margin-top: 50px;
  }

  .corp-block__text h2 {
    font-size: 22px;
    line-height: 1.3em;
  }

  .corp-block__text p {
    font-size: 16px;
    line-height: 1.6em;
  }

  /* El texto sube 23px en mobile en el original */
  .corp-block__text .divider-line {
    margin-bottom: 12px;
  }

  .corp-block--tight .divider-line {
    margin-bottom: 5px;
  }
}