:root {
  --space-medium: 60px;
  --space-high: 80px;
  --space-global: 30px;
  --border-px: 10px;
  --air-alabaster-grey: #dcdcddff;
  --air-pale-slate: #c5c3c6ff;
  --air-iron-grey: #46494cff;
  --air-blue-slate: #4c5c68ff;
  --air-pacific-cyan: #1985a1ff;
  --air-fresh-sky: #00a8e8ff;
  --air-jet-black: #022b3aff;
  --air-black-title: #4a5568;
  --air-gray-subtitle: #a0aec0;
  --air-gray-text: #5f6f7f;
}
/* FuturaPTLight - OpenType */
@font-face {
  font-family: "FuturaPTLight";
  src: url("fonts/futuraPT/FuturaPTLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* FuturaPTDemi - OpenType */
@font-face {
  font-family: "FuturaPTDemi";
  src: url("fonts/futuraPT/FuturaPTDemi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* FuturaPTMedium - OpenType */
@font-face {
  font-family: "FuturaPTMedium";
  src: url("fonts/futuraPT/FuturaPTMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* FuturaPTBook - OpenType */
@font-face {
  font-family: "FuturaPTBook";
  src: url("fonts/futuraPT/FuturaPTBook.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "FuturaPTMedium", sans-serif;
  font-weight: 400; /* Medium */
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "FuturaPTDemi", sans-serif;
  font-weight: 600; /* Demi */
}
.btn-air {
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  font-family: "FuturaPTMedium";
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  /* ========== BOTÓN NORMAL ========== */
  &.btn-normal {
    background-color: var(--air-pacific-cyan);
    color: white;
    box-shadow: 0 2px 8px rgba(25, 133, 161, 0.3);

    &:hover {
      background-color: var(--air-fresh-sky); /* Más brillante */
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 168, 232, 0.4);
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(25, 133, 161, 0.3);
    }
  }

  /* ========== BOTÓN OUTLINE ========== */
  &.btn-outline {
    border: 1px solid var(--air-pacific-cyan);
    background-color: transparent;
    color: var(--air-pacific-cyan);
    box-shadow: none;

    &:hover {
      background-color: var(--air-pacific-cyan);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(25, 133, 161, 0.3);
      border-color: var(--air-pacific-cyan);
    }

    &:active {
      transform: translateY(0);
      box-shadow: none;
    }
  }

  /* ========== BOTÓN BLANCO ========== */
  &.btn-white {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--air-jet-black);
    letter-spacing: 1px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

    &:hover {
      background: rgba(255, 255, 255, 1);
      border-color: var(--air-pacific-cyan);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      color: var(--air-pacific-cyan);
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
  }
}
header {
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 var(--space-global);
  & > nav {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    & .nav-item {
      margin-right: 10px;
    }
  }
}
main {
  /* @GLOBAL */
  .title-h {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    &:is(h3) {
      font-size: 2rem;
    }
    &:is(h2) {
      font-size: 2.3rem;
    }
  }
  .subtitle {
    font-family: "FuturaPTBook", sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #a0aec0;
    margin-bottom: 2.5rem;
    letter-spacing: 2px;
  }
  .text-normal {
    color: var(--air-gray-text);
    font-family: "FuturaPTBook";
  }
  .wrap-head-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    & > * {
      max-width: 800px;
    }
  }
  & > #hero {
    padding: 0px var(--space-global);
    & > .wrap-hero {
      background-image: url(images/home.webp);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--border-px);
      overflow: hidden;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--air-jet-black);
        opacity: 0.7;
        z-index: 1;
      }
      .left-text {
        position: relative;
        z-index: 2;
        max-width: 800px;
        padding: 2rem;
        text-align: center;
        color: #ffffff;
        & h1 {
          /* font-family: 'FuturaPT', sans-serif; */
          /* font-weight: 600; */
          font-size: clamp(2.4rem, 5vw, 4.8rem);
          max-width: 880px;
          line-height: 1.05;
          margin-bottom: 1.5rem;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        & p {
          /* font-family: 'FuturaPT', sans-serif; */
          font-weight: 500;
          font-size: 1.125rem;
          line-height: 1.7;
          margin-bottom: 2rem;
          opacity: 0.9;
        }
        /* & button{
                    font-family: 'FuturaPTMedium', sans-serif;
                    font-weight: 600;
                    background-color: #ffffff;
                    color: #1a365d;
                    border: none;
                    padding: 0.875rem 2.5rem;
                    font-size: 1rem;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    &:hover {
                        background-color: #e2e8f0;
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                    }
                } */
      }
      .img-hero {
        width: 100%;
        position: absolute;
        inset: 0;
        background-color: var(--air-pacific-cyan);
        padding: var(--space-global);
        & > img {
          width: 100%;
          opacity: 0.3;
        }
      }
    }
  }
  & > #trust-bar {
    padding: 4rem 0;
    background-color: #f7fafc;
    text-align: center;
    & > .container {
      max-width: 1200px;
      margin-bottom: var(--space-medium);
      padding: 0 1.5rem;
      h3 {
        /* font-family: 'FuturaPT', sans-serif; */
        font-weight: 600;
        font-size: 2rem;
        color: #4a5568;
        margin-bottom: 0.5rem;
      }
      .subtitle {
        font-family: "FuturaPTBook", sans-serif;
        /* font-weight: bold; */
        font-size: 1rem;
        color: #a0aec0;
        margin-bottom: 2.5rem;
        letter-spacing: 2px;
      }
      .trust-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 3rem;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-family: "FuturaPTDemi", sans-serif;
          /* font-weight: 500; */
          font-size: 1.3rem;
          color: #718096; /* Gris medio */
          transition: color 0.2s ease;
          .svg-inline--fa {
            font-size: 1.35rem;
            color: #4a5568;
            width: 1.5rem;
            height: 1.5rem;
            flex-shrink: 0;
            transition: color 0.2s ease;
          }
        }
      }
    }
  }
  #core-services {
    padding: 0 var(--space-global) var(--space-high);
    & > #container-services {
      display: grid;
      grid-template-columns: repeat(auto-fit, 250px);
      /* grid-auto-rows: 250px; */
      gap: 30px;
      padding: var(--padding-global);
      justify-content: center;
      margin-bottom: var(--space-medium);
      overflow: hidden;
      row-gap: 20px;
      & > .card {
        row-gap: 20px;
        overflow: hidden;
        & > img {
          width: 100%;
          object-fit: cover;
          aspect-ratio: 1/1;
        }
        & > .info-service {
          padding: 0 20px;
          & > h4 {
            color: var(--air-fresh-sky);
            font-size: 1.2rem;
          }
          & > p {
            font-size: 0.9rem;
            color: var(--air-jet-black);
          }
        }
      }
    }
    & > .container-b {
      display: flex;
      justify-content: center;
    }
  }
  #framework {
    padding: var(--space-medium) var(--space-global);
    & > #key-control-areas {
      background: #0a0e17; /* Fondo oscuro */
      /* padding: 4rem 0; */
      min-height: 500px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: var(--border-px);
      & > .container-key {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        width: 100%;
        gap: 2rem;
        align-items: center;
        & > .key-content {
          flex: 0 0 50%;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          & > p {
            font-size: 2rem;
            margin: 0;
            line-height: normal;
          }
          & > .area-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-family: "FuturaPTDemi", sans-serif;
            font-weight: 500;
            font-size: 1.3rem;
            color: var(--air-alabaster-grey);
            & .svg-inline--fa {
              font-size: 1.4rem;
              color: var(--air-pale-slate);
              width: 1.5rem;
              height: 1.5rem;
              flex-shrink: 0;
            }
          }
        }
        & > .key-image {
          flex: 0 0 50%;
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          min-height: 400px;
          &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(
              to right,
              #0a0e17 0%,
              transparent 20%,
              transparent 100%
            );
            pointer-events: none;
          }
          & > img {
            width: 100%;
            height: 100%;
            min-height: 400px;
            object-fit: cover;
            display: block;
            opacity: 0.8;
          }
        }
      }
      /* ==========================================
        RESPONSIVE
        ========================================== */

      @media (max-width: 992px) {
        padding: 3rem 0;
        min-height: auto;

        .container-key {
          flex-direction: column;
          gap: 2rem;
          padding: 0 1.5rem;

          .key-content {
            flex: 0 0 100%;
            width: 100%;
            gap: 0.8rem;

            .area-item {
              padding: 0.9rem 1.2rem;

              span {
                font-size: 0.95rem;
              }
            }
          }

          .key-image {
            flex: 0 0 100%;
            width: 100%;
            min-height: 300px;
            /* 👇 En tablet: degradado de arriba hacia abajo */
            mask-image: linear-gradient(
              to bottom,
              transparent 0%,
              #000 25%,
              #000 100%
            );
            -webkit-mask-image: linear-gradient(
              to bottom,
              transparent 0%,
              #000 25%,
              #000 100%
            );

            img {
              min-height: 300px;
            }
          }
        }
      }

      @media (max-width: 600px) {
        padding: 2.5rem 0;

        .container-key {
          padding: 0 1rem;
          gap: 1.5rem;

          .key-content {
            gap: 0.6rem;

            .area-item {
              padding: 0.7rem 1rem;
              border-radius: 8px;

              &:hover {
                transform: translateX(2px);
              }

              span {
                font-size: 0.875rem;
                gap: 0.6rem;
              }

              i {
                font-size: 1rem;
                width: 1.5rem;
              }
            }
          }

          .key-image {
            min-height: 200px;
            border-radius: 8px;
            /* 👇 En móvil: degradado más suave desde arriba */
            mask-image: linear-gradient(
              to bottom,
              transparent 0%,
              #000 15%,
              #000 100%
            );
            -webkit-mask-image: linear-gradient(
              to bottom,
              transparent 0%,
              #000 15%,
              #000 100%
            );

            img {
              min-height: 200px;
            }
          }
        }
      }
    }
  }
  #portfolio {
    padding: var(--space-medium) var(--space-global) var(--space-high);
    & > .wrap-portfolio {
      display: grid;
      grid-template-columns: repeat(3, 300px);
      grid-template-rows: repeat(4, 250px);
      gap: 30px;
      justify-content: center;
      & > div {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #000;
      }

      /* Posicionamiento original del grid (sin cambios) */
      .div1 {
        grid-row: span 2 / span 2;
      }
      .div3 {
        grid-row: span 2 / span 2;
      }
      .div4 {
        grid-column-start: 1;
        grid-row-start: 3;
      }
      .div5 {
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 2;
      }
      .div6 {
        grid-column-start: 3;
        grid-row-start: 3;
      }
      .div7 {
        grid-column: span 2 / span 2;
        grid-row-start: 4;
      }
      .div8 {
        grid-column-start: 3;
        grid-row-start: 4;
      }

      /* ============================================
               SNIP1136 - ESTILOS ADAPTADOS (INVERTIDOS)
               ============================================ */

      figure.snip1136 {
        font-family: "FuturaPT", "Raleway", Arial, sans-serif;
        color: #fff;
        position: relative;
        overflow: hidden;
        margin: 0;
        width: 100%;
        height: 100%;
        background: #0a0e17;
        text-align: center;
        cursor: pointer;

        * {
          box-sizing: border-box;
        }

        /* Imagen: siempre visible, pero con overlay de color */
        img {
          opacity: 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition:
            opacity 0.5s ease,
            transform 0.5s ease,
            filter 0.5s ease;
          /* Invertimos: sin filtro en estado normal */
          filter: none;
          -webkit-filter: none;
        }

        /* Figcaption: ocupa todo el espacio */
        figcaption {
          position: absolute;
          inset: 0;
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 1rem;
          pointer-events: none;
          z-index: 2;

          & > div {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* height: 50%; */
            overflow: hidden;
          }

          /* Título y párrafo: siempre visibles (estado normal) */
          h2,
          p {
            margin: 0;
            padding: 0 1rem;
            width: 100%;
            position: relative;
            opacity: 1;
            transform: translate3d(0, 0, 0) rotate(0deg);
            transition:
              opacity 0.5s ease,
              transform 0.5s ease;
          }

          h2 {
            font-size: 1.5rem;
            letter-spacing: 1px;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

            span {
              font-weight: 300;
              display: block;
              font-size: 1.8rem;
              color: #facc15;
            }
          }

          p {
            font-weight: 500;
            font-size: 1rem;
            line-height: 1.5;
            color: #e2e8f0;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
            max-width: 90%;
          }

          /* Enlace invisible que cubre todo (para interacción) */
          a {
            position: absolute;
            inset: 0;
            z-index: 10;
            color: transparent;
            background: transparent;
            pointer-events: auto;
            cursor: pointer;
          }
        }

        /* ==========================================
                   OVERLAY DE COLOR - SIEMPRE ACTIVO
                   ========================================== */
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
          background: rgba(37, 99, 235, 0.6);
          transition: opacity 0.5s ease;
          pointer-events: none;
        }

        /* ==========================================
                   ESTADO HOVER (Y CLASE .hover para táctil)
                   ========================================== */
        &:hover,
        &.hover {
          /* 1. Overlay desaparece */
          &::after {
            opacity: 0;
          }

          /* 2. Imagen se aclara y se vuelve a escala normal */
          img {
            opacity: 1; /* Mantiene opacidad total */
            transform: scale(1.05); /* Efecto zoom suave */
            filter: none;
            -webkit-filter: none;
          }

          /* 3. Título y párrafo se ocultan con desplazamiento y rotación */
          figcaption {
            h2 {
              opacity: 0;
              transform: translate3d(0, 150%, 0) rotate(20deg);
            }
            p {
              opacity: 0;
              transform: translate3d(0, -150%, 0) rotate(20deg);
            }
          }
        }
      }
    }
    /* ==========================================
       RESPONSIVE
       ========================================== */

    /* 📱 Tablet (≤1024px) */
    @media (max-width: 1024px) {
      .wrap-portfolio {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        padding: 0 1.5rem;

        /* Resetear posiciones específicas para que todos los divs sean iguales */
        .div1,
        .div2,
        .div3,
        .div4,
        .div5,
        .div6,
        .div7,
        .div8 {
          grid-row: auto;
          grid-column: auto;
          height: 280px;
        }

        /* Ajustar altura de los que antes eran más grandes */
        .div1,
        .div3,
        .div5 {
          height: 280px;
        }
      }
    }

    /* 📱 Móvil (≤600px) */
    @media (max-width: 600px) {
      padding: 2.5rem 0;

      .wrap-head-title {
        margin-bottom: 2rem;

        .title-h {
          font-size: 2rem;
        }
        .subtitle {
          font-size: 1rem;
          padding: 0 1rem;
        }
      }

      .wrap-portfolio {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 1rem;

        & > div {
          height: 220px;
          border-radius: 8px;
        }

        .div1,
        .div2,
        .div3,
        .div4,
        .div5,
        .div6,
        .div7,
        .div8 {
          grid-row: auto;
          grid-column: auto;
          height: 220px;
        }
      }
    }
  }
  /* ============================================
    ABOUT US - FLEXBOX LAYOUT
   ============================================ */
  #about {
    padding: 4rem 0;
    background-color: var(--air-alabaster-grey);
    position: relative; /* Para contexto de posicionamiento */

    & > .wrap-sec {
      display: flex;
      align-items: center;
      gap: 4rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    & .about-us {
      flex: 1;
      max-width: 55%;
    }

    & .mv {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-width: 45%;
      position: relative; /* Para contener la imagen absoluta */
      padding: 0.5rem; /* Pequeño espacio para que la imagen no toque los bordes */

      /* ----- Contenedor de la imagen (fondo decorativo) ----- */
      .mv-image-wrapper {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          /* Máscara degradada: fusión con el fondo gris */
          mask-image: radial-gradient(
            ellipse at 70% 50%,
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 0.6) 70%,
            rgba(0, 0, 0, 0) 100%
          );
          -webkit-mask-image: radial-gradient(
            ellipse at 70% 50%,
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 0.6) 70%,
            rgba(0, 0, 0, 0) 100%
          );
        }

        /* Capa de degradado adicional para suavizar aún más */
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            to bottom,
            transparent 30%,
            var(--air-alabaster-grey) 100%
          );
          pointer-events: none;
          opacity: 0.6;
        }
      }

      /* Cards: ahora tienen fondo semi-transparente para ver la imagen */
      & .card {
        position: relative;
        z-index: 1;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.4);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
          border-color: #cbd5e1;
          background: rgba(255, 255, 255, 0.95);
        }

        & > h2 {
          color: var(--air-pacific-cyan);
        }
      }
    }

    /* ==========================================
        RESPONSIVE (ajustes)
        ========================================== */
    @media (max-width: 992px) {
      & > .wrap-sec {
        flex-direction: column;
        gap: 2.5rem;
        padding: 0 1.5rem;
      }

      & .about-us {
        max-width: 100%;
        text-align: center;
      }

      & .mv {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem;

        .mv-image-wrapper {
          border-radius: 16px;
          /* En tablet la máscara se puede ajustar */
          img {
            mask-image: radial-gradient(
              ellipse at 60% 50%,
              rgba(0, 0, 0, 1) 30%,
              rgba(0, 0, 0, 0.4) 70%,
              rgba(0, 0, 0, 0) 100%
            );
            -webkit-mask-image: radial-gradient(
              ellipse at 60% 50%,
              rgba(0, 0, 0, 1) 30%,
              rgba(0, 0, 0, 0.4) 70%,
              rgba(0, 0, 0, 0) 100%
            );
          }
        }

        & .card {
          flex: 1 1 280px;
          text-align: center;
          background: rgba(255, 255, 255, 0.88);
        }
      }
    }

    @media (max-width: 600px) {
      padding: 2.5rem 0;

      & .about-us {
        & .title-h {
          font-size: 1.75rem;
        }
        & .text-normal {
          font-size: 1rem;
        }
      }

      & .mv {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0.25rem;

        .mv-image-wrapper {
          border-radius: 12px;
          img {
            mask-image: radial-gradient(
              ellipse at 50% 40%,
              rgba(0, 0, 0, 1) 20%,
              rgba(0, 0, 0, 0.3) 60%,
              rgba(0, 0, 0, 0) 100%
            );
            -webkit-mask-image: radial-gradient(
              ellipse at 50% 40%,
              rgba(0, 0, 0, 1) 20%,
              rgba(0, 0, 0, 0.3) 60%,
              rgba(0, 0, 0, 0) 100%
            );
          }
        }

        & .card {
          flex: 1 1 auto;
          padding: 1.5rem;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);

          & h2 {
            font-size: 1.25rem;
          }
          & p {
            font-size: 0.9375rem;
          }
        }
      }
    }
  }
  /* ============================================
    CONTACT US
   ============================================ */

  #contact-us {
    padding: 4rem 0;
    background: #f8fafc;
    h4 {
      margin: 0;
      color: var(--air-fresh-sky);
      font-size: 1.2rem;
    }
    h2 {
      color: var(--air-pacific-cyan);
    }
    .container-contact {
      display: flex;
      gap: 3rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      align-items: stretch;
    }

    /* ----- COLUMNA IZQUIERDA: CARDS ----- */
    .contact-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-width: 380px;

      .info-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: #ffffff;
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        border: 1px solid #e9edf2;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }

        .icon-wrapper {
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          background: #eef2ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--air-fresh-sky);
          font-size: 1.25rem;
        }

        .info-content {
          flex: 1;

          h4 {
            font-family: "FuturaPT", sans-serif;
            font-weight: 600;
            font-size: 1rem;
            color: #0a0e17;
            margin: 0 0 0.15rem 0;
          }

          p {
            font-family: "FuturaPT", sans-serif;
            font-weight: 500;
            font-size: 0.875rem;
            color: #64748b;
            margin: 0 0 0.25rem 0;
          }

          a,
          address {
            font-family: "FuturaPT", sans-serif;
            font-weight: 500;
            font-size: 0.95rem;
            color: #1e293b;
            text-decoration: none;
            font-style: normal;
            line-height: 1.4;
          }

          a:hover {
            color: #2563eb;
          }
        }
      }
    }

    /* ----- COLUMNA DERECHA: FORMULARIO ----- */
    .contact-form {
      flex: 2;
      background: #ffffff;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      border: 1px solid #e9edf2;

      form {
        .form-label {
          font-family: "FuturaPT", sans-serif;
          font-weight: 600;
          font-size: 0.9rem;
          color: #0a0e17;
          margin-bottom: 0.25rem;
        }

        .form-control,
        .form-select {
          font-family: "FuturaPT", sans-serif;
          font-weight: 500;
          border-radius: 8px;
          border: 1px solid #d1d9e6;
          padding: 0.6rem 0.9rem;
          transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;

          &:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
          }
        }

        .form-check-input {
          margin-top: 0.2rem;

          &:checked {
            background-color: #2563eb;
            border-color: #2563eb;
          }
        }

        .form-check-label {
          font-family: "FuturaPT", sans-serif;
          font-weight: 500;
          font-size: 0.9rem;
          color: #1e293b;
        }

        .btn-contact-us {
          font-family: "FuturaPT", sans-serif;
          font-weight: 600;
          background: #1e293b;
          color: #fff;
          border: none;
          padding: 0.7rem 2.5rem;
          border-radius: 8px;
          transition:
            background 0.2s ease,
            transform 0.2s ease;
          width: 100%;

          &:hover {
            background: #0f172a;
            transform: translateY(-2px);
          }
        }
      }
    }

    /* ==========================================
        RESPONSIVE
        ========================================== */

    @media (max-width: 992px) {
      .container-contact {
        flex-direction: column;
        gap: 2rem;
      }

      .contact-info {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        .info-card {
          flex: 1 1 280px;
          max-width: 100%;
        }
      }

      .contact-form {
        padding: 1.5rem;
      }
    }

    @media (max-width: 600px) {
      padding: 2.5rem 0;

      .container-contact {
        padding: 0 1rem;
      }

      .contact-info {
        flex-direction: column;
        align-items: stretch;

        .info-card {
          flex: 1 1 auto;
        }
      }

      .contact-form {
        padding: 1rem;

        form .row .col-4 {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
    }
  }
}
/* ============================================
   FOOTER
   ============================================ */

#main-footer {
  background-color: #0a1628;
  color: #e2e8f0;
  padding: 3.5rem 0 1.5rem;
  font-family: "FuturaPT", sans-serif;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
  }

  .col-md-4 {
    flex: 1 1 200px;
    min-width: 200px;
  }

  /* ----- Columna 1: Logo y descripción ----- */
  .footer-brand {
    img {
      width: 150px;
      border-radius: 20px;
      margin-bottom: 20px;
    }

    p {
      font-weight: 500;
      font-size: 0.95rem;
      line-height: 1.5;
      color: #94a3b8;
      max-width: 260px;
    }
  }

  .social-links {
    margin-top: 1.5rem;

    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #1e293b;
      color: #ffffff;
      transition:
        background 0.3s ease,
        transform 0.2s ease;

      &:hover {
        background: #2563eb;
        transform: translateY(-2px);
      }

      i {
        font-size: 1.1rem;
      }
    }
  }

  /* ----- Columna 2: Menú ----- */
  h5 {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin-bottom: 0.7rem;
    }

    a {
      color: #cbd5e1;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;

      &:hover {
        color: #60a5fa;
      }
    }
  }

  /* ----- Columna 3: Contacto ----- */
  .contact-info {
    p {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: #cbd5e1;
      margin-bottom: 1rem;

      i {
        color: #60a5fa;
        width: 1.25rem;
        text-align: center;
      }

      a {
        color: #cbd5e1;
        text-decoration: none;
        transition: color 0.2s;

        &:hover {
          color: #60a5fa;
        }
      }
    }

    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: #25d366;
      color: #ffffff;
      padding: 0.6rem 1.8rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.95rem;
      text-decoration: none;
      transition:
        background 0.3s,
        transform 0.2s;

      &:hover {
        background: #128c7e;
        transform: scale(1.03);
      }

      i {
        font-size: 1.2rem;
      }
    }
  }

  /* ----- Línea divisoria ----- */
  hr {
    border: 0;
    border-top: 1px solid #1e293b;
    margin: 2.5rem 0 1.5rem;
    opacity: 0.6;
  }

  /* ----- Footer inferior ----- */
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #94a3b8;

    p {
      margin: 0;
    }

    a {
      color: #94a3b8;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: #60a5fa;
      }
    }
  }

  /* ==========================================
       RESPONSIVE
       ========================================== */
  @media (max-width: 992px) {
    .row {
      flex-direction: column;
      gap: 2rem;
    }

    .col-md-4 {
      flex: 1 1 100%;
      text-align: center;
    }

    .footer-brand p {
      max-width: 100%;
    }

    .social-links {
      justify-content: center;
    }

    .footer-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0 1.5rem;

      li {
        margin-bottom: 0.5rem;
      }
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        justify-content: center;
      }
    }

    .footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.3rem;
    }
  }

  @media (max-width: 480px) {
    padding: 2.5rem 0 1rem;

    .container {
      padding: 0 1rem;
    }

    .footer-brand h2 {
      font-size: 1.5rem;
    }

    .footer-menu {
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
    }

    .btn-whatsapp {
      width: 100%;
      justify-content: center;
    }
  }
}

/* ==========================================
    MODAL - OVERLAY Y CONTENEDOR
    ========================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 43, 58, 0.75); /* --air-jet-black con opacidad */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 1.5rem;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-container {
  position: relative;
  background: rgba(220, 220, 221, 0.12); /* --air-alabaster-grey con opacidad */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 60px rgba(2, 43, 58, 0.5);
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
  will-change: transform, opacity;
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Botón cerrar */
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  background: rgba(2, 43, 58, 0.6); /* --air-jet-black */
  border: none;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: rgba(25, 133, 161, 0.8); /* --air-pacific-cyan */
    transform: rotate(90deg);
  }
}

/* Contenido del modal */
.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal-image-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  flex-shrink: 0;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Filtro sutil para darle calidez */
    filter: saturate(1.1) contrast(1.05) brightness(0.95);
  }

  /* Overlay de color (filtro) sobre la imagen */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(2, 43, 58, 0.1) 0%,
      /* --air-jet-black */ rgba(2, 43, 58, 0.5) 100%
    );
    pointer-events: none;
  }
}

.modal-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(
    to top,
    rgba(2, 43, 58, 0.85) 0%,
    /* --air-jet-black */ transparent 100%
  );
  z-index: 2;
  pointer-events: none;

  h2 {
    font-family: "FuturaPTDemi", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(2, 43, 58, 0.4);
    letter-spacing: -0.02em;
    /* Toque de color con el cian */
    span {
      color: var(--air-pacific-cyan);
    }
  }
}

.modal-description-wrapper {
  padding: 1.8rem 2rem 2rem;
  overflow-y: auto;
  flex: 1;
  background: rgba(220, 220, 221, 0.08); /* --air-alabaster-grey */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  p {
    font-family: "FuturaPTBook", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--air-alabaster-grey);
    margin: 0;
    text-shadow: 0 1px 4px rgba(2, 43, 58, 0.3);
    white-space: pre-wrap;
  }
}

/* Flechas de navegación */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(2, 43, 58, 0.6); /* --air-jet-black */
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: var(--air-pacific-cyan);
    transform: translateY(-50%) scale(1.05);
  }

  &.modal-prev {
    left: 12px;
  }
  &.modal-next {
    right: 12px;
  }
}

/* Contador */
.modal-counter {
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 10;
  font-family: "FuturaPT", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--air-alabaster-grey);
  background: rgba(2, 43, 58, 0.5);
  padding: 4px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================
    RESPONSIVE DEL MODAL
    ========================================== */
@media (max-width: 768px) {
  .modal-container {
    max-width: 95%;
    max-height: 95vh;
    border-radius: 16px;
  }

  .modal-image-wrapper {
    height: 220px;
  }

  .modal-title-overlay {
    padding: 1rem 1.2rem;
    h2 {
      font-size: 1.4rem;
    }
  }

  .modal-description-wrapper {
    padding: 1.2rem 1.2rem 1.5rem;
    p {
      font-size: 0.9rem;
    }
  }

  .modal-nav {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .modal-image-wrapper {
    height: 160px;
  }

  .modal-title-overlay {
    padding: 0.8rem 1rem;
    h2 {
      font-size: 1.2rem;
    }
  }

  .modal-description-wrapper {
    padding: 1rem;
    p {
      font-size: 0.85rem;
    }
  }

  .modal-counter {
    bottom: 8px;
    right: 12px;
    font-size: 0.75rem;
    padding: 2px 10px;
  }
}