.page-template-page-qpilot .container-xxl {
  max-width: 1000px;
}

.page-template-page-qpilot .q-pilot .wpcf7-not-valid-tip {
  background: var(--bs-tertiary);
}

.page-template-page-qpilot .hero {
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-template-page-qpilot .hero::before,
.page-template-page-qpilot .cta-footer::before {
  background: rgba(0, 0, 0, 0.5);
  content: '';
  height: 100%;
  inset: 0;
  position: absolute;
  z-index: 1;
}
.page-template-page-qpilot .hero .row {
  position: relative;
  z-index: 2;
}
.page-template-page-qpilot .ff-teko {
  font-family: 'Teko', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
.page-template-page-qpilot .bg-gradient-grey {
  background: linear-gradient(66.99deg, #f3f3f3 0%, #e3e3e3 100%);
}
.page-template-page-qpilot .shadow {
  box-shadow: 0px 16px 16px -8px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
}
.page-template-page-qpilot .section-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.page-template-page-qpilot .section-title::after {
  content: url('../img/icon_arrow_orange.svg');
  display: inline-block;
  margin-left: 10px;
  width: 20px;
}
.page-template-page-qpilot .video {
  border-radius: 15px;
  width: 100%;
}

.page-template-page-qpilot .copy {
  margin: 0 auto;
  width: 100%;
}
.page-template-page-qpilot .card {
  border-radius: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 48px;
  position: relative;
}

.page-template-page-qpilot #challenge .intro {
  margin-bottom: 50px;
}
.page-template-page-qpilot .challenge {
  background: linear-gradient(64.62deg, #f8c44f 1.99%, #e09b00 100%);
  border: 2px dotted #ffe476;
}
.page-template-page-qpilot .solution {
  background: linear-gradient(64.82deg, #ed6534 1.71%, #a32b00 98.16%);
  border: 2px dotted #a32b00;
}
.page-template-page-qpilot .card .icon {
  position: absolute;
  right: 25px;
  top: 25px;
}
/* Línea punteada horizontal */
.page-template-page-qpilot .fancy-hr {
  background: repeating-linear-gradient(to right, #888 0, #888 2px, transparent 2px, transparent 6px);
  border: none;
  height: 1px;
  margin: 10px auto;

  position: relative;
}
/* Círculos */
.page-template-page-qpilot .fancy-hr::before,
.page-template-page-qpilot .fancy-hr::after {
  background: #999;
  border-radius: 50%;
  content: '';
  height: 7px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
}
/* Círculo izquierdo */
.page-template-page-qpilot .fancy-hr::before {
  left: 0;
}
/* Círculo derecho */
.page-template-page-qpilot .fancy-hr::after {
  right: 0;
}
/* Ajuste del espacio entre los círculos y la línea */
.page-template-page-qpilot .fancy-hr {
  background-position: 10px 0; /* Comienza después del círculo izquierdo */
  background-size: calc(100% - 20px) 1px; /* Ocupa el ancho menos los dos círculos */
}
/* Línea punteada vertical */
.page-template-page-qpilot .vertical-timeline {
  background-image: linear-gradient(to bottom, #0097a7 0, #0097a7 40%, transparent 40%, transparent 100%);
  background-position: center center;
  background-repeat: repeat-y;
  background-size: 2px 8px; /* patrón punteado */
  position: relative;
  width: 2px; /* grosor de la línea */
}
/* Círculo superior e inferior */
.page-template-page-qpilot .vertical-timeline::before,
.page-template-page-qpilot .vertical-timeline::after {
  background: #0097a7;
  border-radius: 50%;
  content: '';
  height: 7px;
  position: absolute;
  right: calc(50% - 3px);
  top: 0;
  width: 7px;
}
.page-template-page-qpilot .vertical-timeline::after {
  bottom: 0;
  top: auto;
}
/* Listas */
/* Delivers */
.page-template-page-qpilot #delivers .pills {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.page-template-page-qpilot #delivers .pills li {
  background-color: #fff;
  border: 2px dotted var(--bs-secondary);
  border-radius: 15px;
  color: var(--bs-secondary);
  font-weight: 700;
  margin: 15px auto;
  padding: 2px 25px;
  text-align: center;
  text-wrap: nowrap;
  width: 185px;
}
/* Impares: % desde la izquierda */
.page-template-page-qpilot #delivers .pills li:nth-child(odd) {
  transform: translateX(-25%);
}
/* Pares: % desde la derecha */
.page-template-page-qpilot #delivers .pills li:nth-child(even) {
  transform: translateX(25%);
}
/* Impact */
.page-template-page-qpilot #impact .kpi-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0 auto;
  max-width: 300px;
  padding: 0;
}
.page-template-page-qpilot #impact .kpi-item {
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(243, 243, 243, 1) 50%), linear-gradient(241.65deg, #009aac 0%, #03bfd5 96.75%);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: center;
}
.page-template-page-qpilot #impact .kpi-item p {
  margin: 0;
  padding: 10px;
}
.page-template-page-qpilot #impact .kpi-label {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
/* Includes */
.page-template-page-qpilot #includes .icon-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, 1fr); /* Cambiamos a 6 columnas para más control */
  list-style: none;
  margin: 0 auto;
  max-width: 260px;
  padding: 0;
}
.page-template-page-qpilot #includes .icon-list .icon-item:nth-child(1) {
  grid-column: 1 / 3; /* Ocupa columnas 1-2 */
}
.page-template-page-qpilot #includes .icon-list .icon-item:nth-child(2) {
  grid-column: 3 / 5; /* Ocupa columnas 3-4 */
}
.page-template-page-qpilot #includes .icon-list .icon-item:nth-child(3) {
  grid-column: 5 / 7; /* Ocupa columnas 5-6 */
}
.page-template-page-qpilot #includes .icon-list .icon-item:nth-child(4) {
  grid-column: 2 / 4; /* Centrado entre elemento 1 y 2 */
}
.page-template-page-qpilot #includes .icon-list .icon-item:nth-child(5) {
  grid-column: 4 / 6; /* Centrado entre elemento 2 y 3 */
}
.page-template-page-qpilot #includes .icon-list .icon-item {
  align-items: center;
  display: flex;
  justify-content: center;
}
.page-template-page-qpilot #includes .icon-item {
  text-align: center;
}
.page-template-page-qpilot #includes .icon-item img {
  height: 75px;
  width: auto;
}
/* Price */
.page-template-page-qpilot #price .icon-list {
  list-style: none;
  margin: 0 auto 30px;
  padding: 0;
  text-align: center;
}
.page-template-page-qpilot #price .icon-list .icon-item {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 15px;
  text-align: center;
  width: 150px;
}

.page-template-page-qpilot .cta-footer {
  background: url('../img/iStock-902856682.jpg') bottom/cover no-repeat;
  position: absolute;
  top: 0;
  left: translateX(-50%);
  width: calc(100% + (-1 * var(--bs-gutter-x)));
  height: 100%;
  z-index: 1;
}

.page-template-page-qpilot .cta-footer .cta-copy {
  padding: 20px;
  background: #efefef;
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 500px) {
  .page-template-page-qpilot .copy {
    width: 340px;
  }
}

@media screen and (min-width: 480px) {
  .page-template-page-qpilot #price .icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}