/* ==========================================================================
   LANDING  (Figma 457:2) y landings de ciudad (612:2, 619:2)
   ========================================================================== */

/* Píldora de teléfono sobre el hero de la landing */
.hero-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-gold-light);
  background: rgba(17, 22, 33, 0.6);
  border: 1px solid rgba(209, 172, 97, 0.5);
  border-radius: 100px;
}

.hero-pill::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--color-red);
  border-radius: 50%;
}

.hero-pill a {
  color: inherit;
}

/* El hero de la landing usa el título de la home con acento dorado */
.hero__title .gold,
.page-hero__title .gold {
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Mi Renta Segura  (Figma 459:2)
   Foto a la izquierda y copy a dos columnas justificadas.
   -------------------------------------------------------------------------- */

.renta-segura {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--color-section-light), var(--color-gray-100));
}

.renta-segura__inner {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.renta-segura__photo {
  position: relative;
  flex: 0 0 520px;
  height: 500px;
  overflow: hidden;
  border-radius: 18px;
}

.renta-segura__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.renta-segura__photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(14, 35, 64, 0) 0%,
    rgba(14, 35, 64, 0.35) 50%,
    rgba(14, 35, 64, 0.92) 100%
  );
}

.renta-segura__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}

.renta-segura__title {
  font-family: var(--font-display);
  font-size: 47px;
  font-weight: 400;
  line-height: 0.98;
  color: var(--color-navy);
}

.renta-segura__cols {
  display: flex;
  gap: 34px;
  padding-top: 8px;
}

.renta-segura__cols > div {
  flex: 1 1 0;
  min-width: 0;
}

.renta-segura__cols p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
  color: var(--color-gray-700);
}

.renta-segura__cols strong {
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

/* Cierre con barra dorada.
   La barra va en un ::before absoluto para que el párrafo siga siendo texto
   corrido: con flex, cada fragmento y cada <strong> se volvían ítems sueltos. */
.renta-segura__cierre {
  position: relative;
  margin-top: 10px;
  padding-left: 20px;
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  line-height: 1.72;
  color: var(--color-navy);
}

.renta-segura__cierre::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-dark));
}

.renta-segura__cierre strong {
  font-weight: var(--fw-bold);
  color: var(--color-red);
}

/* --------------------------------------------------------------------------
   Protecciones incluyen  (Figma 459:19)
   Reutiliza .coberturas/.cobertura--card con cuatro tarjetas.
   -------------------------------------------------------------------------- */

.incluyen {
  padding: 92px 0 96px;
  background: linear-gradient(180deg, var(--color-hero-bg), var(--color-navy));
}

.incluyen .sec-head {
  margin-bottom: 40px;
  gap: 13px;
}

.incluyen .sec-head__title {
  font-size: 48px;
  color: var(--color-white);
}

.incluyen .sec-head__lead {
  max-width: none;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

.incluyen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.incluyen__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 28px 26px;
  background: var(--color-card-dark);
  border: 1px solid var(--color-gold-light);
  border-radius: 14px;
}

.incluyen__icon {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.4px solid var(--color-gold-light);
  border-radius: 6px;
}

.incluyen__icon img {
  width: 22px;
  height: 22px;
}

.incluyen__card h3 {
  font-size: 15.5px;
  font-weight: var(--fw-bold);
  line-height: 1.32;
  color: var(--color-white);
}

.incluyen__card p {
  font-size: 12.8px;
  line-height: 1.8;
  color: var(--color-gray-100);
  opacity: 0.76;
}

/* --------------------------------------------------------------------------
   Conozca nuestras protecciones  (Figma 460:2)
   Cuatro tarjetas con foto, viñetas y botón.
   -------------------------------------------------------------------------- */

.rack {
  padding: 96px 0 100px;
  background: linear-gradient(180deg, var(--color-white), var(--color-section-light) 55%, var(--color-gray-100));
}

.rack .sec-head {
  margin-bottom: 44px;
  gap: 13px;
}

.rack .sec-head__lead {
  max-width: 660px;
  font-size: 15px;
  line-height: 1.6;
}

.rack__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.rack-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #dadde0;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(14, 35, 64, 0.1);
}

.rack-card--destacada {
  border: 4px solid var(--color-gold-light);
}

.rack-card__badge {
  padding: 8px;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.945px;
  text-align: center;
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold-dark));
}

.rack-card__photo {
  position: relative;
  height: 152px;
  /* Línea dorada al pie de la foto */
  border-bottom: 4px solid transparent;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(90deg, var(--color-gold-light), var(--color-gold-dark)) border-box;
}

.rack-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rack-card__photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(11, 14, 20, 0), rgba(17, 22, 33, 0.7));
}

.rack-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  padding: 22px;
}

.rack-card__kind {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.rack-card__body h3 {
  margin-bottom: 10px;
  font-size: 16.5px;
  font-weight: var(--fw-bold);
  line-height: 1.26;
  color: var(--color-navy);
}

.rack-card__body > div > p {
  font-size: 12.6px;
  line-height: 1.72;
  color: var(--color-gray-700);
}

.rack-bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 14px;
}

.rack-bullets li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-navy);
  opacity: 0.86;
}

.rack-bullets li::before {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--color-red);
  border-radius: 50%;
}

.rack-card .btn {
  justify-content: center;
  width: 100%;
  padding: 12px;
  gap: 7px;
  font-size: 13.5px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Quiénes Somos  (Figma 461:2)
   -------------------------------------------------------------------------- */

.quienes {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--color-hero-bg), #0b1d37);
}

.quienes__top {
  display: flex;
  gap: 72px;
  align-items: center;
  margin-bottom: 46px;
}

.quienes__intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}

.quienes__title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
}

.quienes__intro p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--color-gray-100);
  opacity: 0.85;
}

.quienes__intro strong {
  font-weight: var(--fw-bold);
  color: var(--color-gold-light);
  opacity: 1;
}

.quienes__stats {
  display: grid;
  flex: 0 0 470px;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.quienes__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 121px;
  padding: 24px 24px 24px 24px;
  border: 1.6px solid var(--color-gold-light);
  border-radius: 14px;
  filter: drop-shadow(0 16px 17px rgba(14, 35, 64, 0.16));
}

.quienes__value {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--color-white);
}

.quienes__label {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.735px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* Chips de beneficios */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chips li {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 18px 12px 16px;
  font-size: 12.8px;
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background: var(--color-card-dark);
  border: 1px solid rgba(209, 172, 97, 0.3);
  border-radius: 100px;
}

.chips li::before {
  display: flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  color: var(--color-red);
  content: "✓";
  border: 1.4px solid var(--color-red);
  border-radius: 9px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .renta-segura__inner {
    flex-direction: column;
  }

  .renta-segura__photo {
    flex: 1 1 auto;
    width: 100%;
    height: 360px;
  }

  .renta-segura__title {
    font-size: 38px;
  }

  .incluyen__grid,
  .rack__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .incluyen .sec-head__title {
    font-size: 36px;
  }

  .quienes__top {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .quienes__stats {
    flex: 1 1 auto;
  }

  .quienes__title {
    font-size: 42px;
  }
}

@media (max-width: 639px) {
  .renta-segura,
  .incluyen,
  .rack,
  .quienes {
    padding: 64px 0;
  }

  .renta-segura__cols {
    flex-direction: column;
    gap: 0;
  }

  .renta-segura__title {
    font-size: 32px;
  }

  .incluyen__grid,
  .rack__grid,
  .quienes__stats {
    grid-template-columns: 1fr;
  }

  .incluyen .sec-head__title,
  .quienes__title {
    font-size: 30px;
  }

  .quienes__value {
    font-size: 42px;
  }
}

/* ==========================================================================
   LANDINGS DE CIUDAD  (Monterrey 612:2, Guadalajara 619:2)
   ========================================================================== */

/* Chips de contacto bajo el hero (Tel · WhatsApp · Horario) */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.hero-chips li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background: rgba(11, 14, 20, 0.55);
  border: 1px solid rgba(209, 172, 97, 0.55);
  border-radius: 999px;
}

.hero-chips li::before {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--color-red);
  border-radius: 50%;
}

.hero-chips a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Presencia local  (Figma 613:2 / 619:43)
   -------------------------------------------------------------------------- */

.presencia {
  padding: 96px 0 100px;
  background: linear-gradient(180deg, var(--color-section-light), var(--color-gray-100));
}

.presencia__inner {
  display: flex;
  gap: 72px;
  align-items: center;
}

.presencia__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}

.presencia__copy .eyebrow {
  letter-spacing: 1.04px;
}

.presencia__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.46px;
  color: var(--color-navy);
}

.presencia__copy > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-gray-700);
}

.presencia__copy strong {
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

.presencia__stats {
  display: flex;
  gap: 26px;
  align-items: center;
  padding-top: 14px;
}

.presencia__value {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--color-red);
}

.presencia__label {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.735px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #6b7280;
}

li.presencia__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-dark));
}

/* Foto de la ciudad con etiqueta al pie */
.presencia__photo {
  position: relative;
  display: flex;
  flex: 0 0 480px;
  align-items: flex-end;
  height: 430px;
  padding: 24px;
  overflow: hidden;
  border-radius: 18px;
}

.presencia__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presencia__photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(14, 35, 64, 0) 17%,
    rgba(14, 35, 64, 0.3) 42%,
    rgba(14, 35, 64, 0.92) 88%
  );
}

.presencia__caption {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px 8px 14px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.24px;
  color: var(--color-white);
  background: rgba(11, 14, 20, 0.55);
  border: 1px solid rgba(209, 172, 97, 0.55);
  border-radius: 999px;
}

.presencia__caption::before {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--color-red);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Respaldo legal  (Figma 615:2 / 619:121)
   -------------------------------------------------------------------------- */

.respaldo-legal {
  padding: 96px 0 100px;
  background: linear-gradient(180deg, var(--color-section-light), var(--color-gray-100));
}

.respaldo-legal__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 36px;
}

.respaldo-legal__head .eyebrow {
  letter-spacing: 1.04px;
}

.respaldo-legal__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.46px;
  color: var(--color-navy);
}

.respaldo-legal__head > p {
  max-width: 860px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-gray-700);
}

.valores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.valor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 32px 28px;
  background: var(--color-white);
  border: 1px solid #e4e6ea;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(14, 35, 64, 0.1);
}

.valor__icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-gold-light);
  border-radius: 12px;
}

.valor__icon img {
  width: 24px;
  height: 24px;
}

.valor h3 {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-navy);
}

.valor__rule {
  width: 40px;
  height: 3px;
  margin: 0;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-dark));
  border: 0;
}

.valor p {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--color-gray-700);
}

/* --------------------------------------------------------------------------
   Dónde encontrarnos  (Figma 616:2 / 619:154)
   -------------------------------------------------------------------------- */

.sucursal {
  padding: 96px 0 100px;
  background: linear-gradient(180deg, var(--color-navy), var(--color-hero-bg));
}

.sucursal__inner {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.sucursal__datos {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}

.sucursal__datos .eyebrow {
  letter-spacing: 1.04px;
}

.sucursal__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.46px;
  color: var(--color-white);
}

.sucursal__datos > p {
  font-size: 16px;
  line-height: 1.75;
  color: #a8b2bf;
}

.datos-lista {
  width: 100%;
  padding-top: 10px;
}

.datos-lista li {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.datos-lista li + li {
  border-top: 1px solid #29303d;
}

.datos-lista__icon {
  display: flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1.2px solid var(--color-gold-light);
  border-radius: 10px;
}

.datos-lista__icon img {
  width: 20px;
  height: 20px;
}

.datos-lista__kind {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.735px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.datos-lista__value {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--color-white);
}

.datos-lista__value a {
  color: inherit;
}

.datos-lista__value a:hover {
  color: var(--color-gold-light);
}

/* Tarjeta "Visítenos" con foto de fondo */
.visitenos {
  position: relative;
  display: flex;
  flex: 0 0 460px;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  min-height: 430px;
  padding: 32px 30px;
  overflow: hidden;
  border: 1px solid rgba(209, 172, 97, 0.5);
  border-radius: 18px;
}

.visitenos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitenos::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(11, 14, 20, 0.5) 0%,
    rgba(11, 14, 20, 0.86) 67%,
    rgba(11, 14, 20, 0.97) 100%
  );
}

.visitenos > *:not(img) {
  position: relative;
  z-index: 1;
}

.visitenos h3 {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.26;
  color: var(--color-white);
}

.visitenos p {
  font-size: 14px;
  line-height: 1.72;
  color: #a8b2bf;
}

.btn--gold-outline {
  justify-content: center;
  padding: 15px 24px;
  gap: 10px;
  font-size: 15px;
  color: var(--color-gold-light);
  border: 1.5px solid var(--color-gold-light);
  border-radius: 6px;
}

.btn--gold-outline:hover {
  color: var(--color-white);
  background: rgba(209, 172, 97, 0.15);
}

/* --------------------------------------------------------------------------
   Responsive — landings de ciudad
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .presencia__inner,
  .sucursal__inner {
    flex-direction: column;
    gap: 40px;
  }

  .presencia__photo,
  .visitenos {
    flex: 1 1 auto;
    width: 100%;
  }

  .valores {
    grid-template-columns: 1fr;
  }

  .presencia__title,
  .respaldo-legal__title,
  .sucursal__title {
    font-size: 36px;
  }
}

@media (max-width: 639px) {
  .presencia,
  .respaldo-legal,
  .sucursal {
    padding: 64px 0;
  }

  .presencia__title,
  .respaldo-legal__title,
  .sucursal__title {
    font-size: 30px;
  }

  .presencia__stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  li.presencia__divider {
    display: none;
  }

  .presencia__photo {
    height: 300px;
  }

  .visitenos {
    min-height: 340px;
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   CATÁLOGO DE PROTECCIONES  (sucursales)
   Cabecera alineada a la izquierda sobre el fondo oscuro de .coberturas. Antes
   reutilizaba .paso__head, que vive en contratar.css y no se carga aquí, por
   lo que quedaba sin separación respecto a la rejilla.
   -------------------------------------------------------------------------- */

.catalogo__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 40px;
}

.catalogo__head .eyebrow {
  letter-spacing: 1.04px;
}

.catalogo__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.46px;
  color: var(--color-white);
}

.catalogo__head > p {
  max-width: 860px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-gray-500);
}

/* Cuatro columnas solo en escritorio. Iba en un style inline, que ganaba a las
   media queries de .coberturas__grid y dejaba cuatro columnas en móvil. */
@media (min-width: 1024px) {
  .coberturas__grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 639px) {
  .catalogo__title {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   FOTO DEL BANNER DE SUCURSAL
   En el diseño la fotografía sólo ocupa la banda diagonal central del banner
   (el resto son los paneles opacos del overlay). Se coloca justo ahí en lugar
   de estirarla a los 1240 px completos, que era lo que dejaba a la vista un
   encuadre equivocado. Los límites 27 %–76 % cubren el paralelogramo por
   ambos extremos: el overlay recorta lo que sobra.
   -------------------------------------------------------------------------- */

.cta__photo--banda {
  left: 27%;
  width: 49%;
  object-position: center;
  filter: none;
}

@media (max-width: 1023px) {
  /* Sin overlay la foto vuelve a ser el fondo completo de la tarjeta. */
  .cta__photo--banda {
    left: 0;
    width: 100%;
    filter: brightness(0.3);
  }
}