/* =======================
seccion div 2 que es
======================= */

/* Contenedor principal */
.about-section {
max-width: 1800px;
margin: 0 auto;
padding: 1.5rem 1.5rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;

}
@media (min-width: 768px) {
.about-section {
 grid-template-columns: 1fr 1fr;
 align-items: center;
 gap: 2rem;
}
}

@media (max-width: 767px) {
    .about-section {
      padding: 0 !important;
    }
  }
/* --------------------------------------------
LADO IZQUIERDO: Imágenes superpuestas
-------------------------------------------- */
.left-images {
position: relative;
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: -150px;
}
/* Imagen principal grande */
/* yty656: img-large cover */
.img-large {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem;
    display: block;
    object-fit: contain;
    height: 100%; /* Asegura que el cover funcione correctamente */
}

@media screen and (max-width: 840px) {
.left-images {
 justify-content: center;
 margin-top: -100px;
}
}
/* Badge “30+ years of experience” */
.experience-badge {
    position: absolute;
    top: 12rem;
    left: 1rem;
    background: linear-gradient(135deg, #03354a, #348CB2); /* Degradado (green-start → green-end) */
    color: #FFFFFF;                                       /* Equivalente a var(--white) */
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 9000;
}

/* yty658: Ajuste de top para .experience-badge en vista móvil */
@media (max-width: 767px) {
    .experience-badge {
        top: 0rem;
    }
}
.experience-badge svg {
width: 30px;
height: 30px;
fill: #FFFFFF;   /* Equivalente a var(--white) */
flex-shrink: 0;
}
/* Texto vertical “5200+ FIVE STAR REVIEWS” */
.vertical-text {
position: absolute;
bottom: 150px;
left: -1rem;
transform: translateY(-50%) rotate(-90deg);
transform-origin: left bottom;
font-size: 1rem;
font-weight: 400;
color: #0D1B17;   /* Equivalente a var(--text-dark) */
letter-spacing: 0.05em;
}
/* yty656: Imagen secundaria pequeña centrada */
.img-small {
    position: absolute;
    left: 50%;
    bottom: -1rem;
    transform: translateX(-50%);
    width: 200px;
    border-radius: 1rem;
    border-top: 10px solid rgb(255, 255, 255);
    border-left: 10px solid rgb(255, 255, 255);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.515); */
}

/* yty659: Filtro gris para .img-small */
.img-small {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Hover: recuperamos el color original */
.img-small:hover {
filter: grayscale(0%);
}

/* yty656: Ajuste de tamaño para .img-small en vista móvil */
@media (max-width: 767px) {
    .img-small {
        width: 100px;
    }
}


/* --------------------------------------------
LADO DERECHO: Texto y contenido
-------------------------------------------- */
.about-content {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* “ABOUT US” pequeño encabezado */
.about-label {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
color: #000000;  /* Equivalente a var(--green-start) */
}
/* Título principal */
.about-title {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
color: #0D1B17;  /* Equivalente a var(--text-dark) */
}
/* Parte en verde del título */
.about-title .highlight {
background: linear-gradient(90deg, #03354a, #66bfe5); /* Degradado (green-start → green-end) */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Párrafo descriptivo */
.about-text {
font-size: 1rem;
color: #5A5A5A;  /* Equivalente a var(--text-medium) */
max-width: 500px;
}
/* Lista de puntos con check */
.check-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.check-list li {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'poiret_oneregular', Arial, sans-serif;
font-size: 1.5rem;
color: #0D1B17;  /* Equivalente a var(--text-dark) */
font-weight: 600;
}
.check-list li::before {
content: '✔';
color: #03354A; /* Equivalente a var(--green-start) */
font-size: 1rem;
flex-shrink: 0;
}

/* Avatares de clientes satisfechos */
.client-row {
display: flex;
/* align-items: center; */
/* gap: -0.75rem; */
margin-top: 0.5rem;
}
.client-row img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #FFFFFF; /* Equivalente a var(--white) */
object-fit: cover;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

.client-row + p {
margin-left: 1rem;
font-size: 0.9rem;
color: #0D1B17; /* Equivalente a var(--text-dark) */
font-weight: 500;
}

/* Línea divisoria */
.divider {
height: 1px;
background-color: #D8D8D8; /* Equivalente a var(--divider) */
margin: 0.5rem 0;
border: none;
}

/* Bloque de icono “Creative Result” */
.creative-block {
display: flex;
align-items: center;
gap: 1rem;
}
.creative-block svg {
width: 40px;
height: 40px;
fill: #A174FF; /* Equivalente a var(--green-start) */
flex-shrink: 0;
}
.creative-block .creative-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.creative-block .creative-text .title {
font-size: 1rem;
font-weight: 600;
color: #0D1B17; /* Equivalente a var(--text-dark) */
}
.creative-block .creative-text .subtitle {
font-size: 0.9rem;
color: #5A5A5A; /* Equivalente a var(--text-medium) */
}


/* nuevas imagenes en linea */

 .imgs-linea {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .imgs-linea-wrap {
     width: 75px;
     height: 75px;
     margin-right: -15px; /* Negative margin for 10px overlap */
 }

 .imgs-linea-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%; /* Optional: makes images circular */
     transition: all 0.3s ease; /* Smooth transition for hover effect */
 }

 .imgs-linea-wrap img:hover {
     filter: brightness(1.2); /* Increase brightness on hover */
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Subtle glow effect */
     border: 1px solid black; /* Add 1px solid black border on hover */
 }

 /* Ensure the last image doesn't have a negative margin */
 .imgs-linea-wrap:last-child {
     margin-right: 0;
 }

 /* yty657: fondo principal gif */
.bg-air-home-map {
    background-image: url('../img/air-home-map.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 800px;
    width: 100%;
}
@media (max-width: 767px) {
    /* yty657: altura móvil para .bg-air-home-map */
    .bg-air-home-map {
        height: 300px;
    }
}

 /* yty657: fondo principal gif */
 .bg-air-img2 {
  background-image: url('../img/stands-development-1.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 800px;
  width: 100%;
}
@media (max-width: 767px) {
  /* yty657: altura móvil para .bg-air-img2 */
  .bg-air-img2 {
      height: 500px;
  }
}

 /* yty657: fondo principal gif */
 .bg-air-img3 {
  background-image: url('../img/montaje-stands.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 800px;
  width: 100%;
}
@media (max-width: 767px) {
  /* yty657: altura móvil para .bg-air-img2 */
  .bg-air-img3 {
      height: 500px;
  }
}

.bg-air-img4 {
  background-image: url('../img/graficas-para-eventos.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 800px;
  width: 100%;
}
@media (max-width: 767px) {
  /* yty657: altura móvil para .bg-air-img2 */
  .bg-air-img4 {
      height: 500px;
  }
}



    /* ---------------------------------------------------
       SECCIÓN 1: Hero Text (fondo azul oscuro)
    ---------------------------------------------------- */
    .bg-dark-blue {
        background-color: #348CB2;
        color: #FFFFFF;
      }
      .hero-text {
        padding: 1rem 0;
        padding-left: 10px;
      }
      .hero-text--left p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0;
      }    
    
    /* ---------------------------------------------------
       SECCIÓN 2: Servicios (degradado 50 % azul / 50 % blanco)
    ---------------------------------------------------- */
    .services {
        background: linear-gradient(
          to bottom,
          #348CB2 50%,
          #FFFFFF 50%
        );
        padding-top: 0;
        padding-bottom: 0;
      }
      .services .wrapper {
        padding-top: 0rem;
        padding-bottom: 3rem;
      }

      .services-2 {
        background: linear-gradient(
          to bottom,
          #348CB2 50%,
          #d2d2d2 50%
        );
        padding-top: 0;
        padding-bottom: 0;
      }
      .services-2 .wrapper {
        padding-top: 0rem;
        padding-bottom: 3rem;
      }

      .grid {
        display: grid;
        gap: 1.5rem;
      }
      .grid-3-cols {
        grid-template-columns: 1fr;
      }
      @media (min-width: 768px) {
        .grid-3-cols {
          grid-template-columns: repeat(4, 1fr);
        }
      }
     
      @media (max-width: 767px) {
        .wrapper.grid.grid-3-cols {
          gap: 40px !important;
          background: #348CB2 !important;
        }
      }

      
      /* este estilo es para el div 3 un grid de 3 pastillas */
      .grid-2-cols {
        grid-template-columns: 1fr;
      }
      @media (min-width: 768px) {
        .grid-2-cols {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .grid-2-cols > * {
          max-width: 500px;
          margin-left: auto;
          margin-right: auto;
        }
      }
     
      @media (max-width: 767px) {
        .wrapper.grid.grid-2-cols {
          gap: 40px !important;
          background: #03354A !important;
        }
        .grid-2-cols > * {
          margin-left: auto;
          margin-right: auto;
        }
      }

   

      .service-card {
        position: relative;
        overflow: visible;
      }
      .service-card img {
        width: 80%;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 0.35rem;
        display: block;
      }
      .service-card .caption {
        position: absolute;
        bottom: -1.5rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: #FFFFFF;
        padding: 0.5rem 0.5rem;
        border-radius: 0.25rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.507);
        font-size: 1.1rem;
        font-weight: 300;
        color: #03354A;
        text-align: center;
        white-space: nowrap;
      }    

/* Movimiento vertical puro en .caption al hacer hover sobre .service-card [yty656] */
.service-card .caption {
  transition: transform 0.5s cubic-bezier(.77,0,.18,1);
}
.service-card:hover .caption {
  transform: translateX(-50%) translateY(-10px);
}