/* ============================================================
   DRONE INVENTORY — CONTACTO
   Estilos exclusivos de contacto.html.
   Separados del HTML para mantener una arquitectura CSS modular.
============================================================ */

/* =========================================================
       CONTACTO — CAPA VISUAL ESPECÍFICA
       Se apoya exclusivamente en la arquitectura moderna
       de droneinventory-inventory.css.
       ========================================================= */

    .contact-page {
      background: #fff;
    }

    .contact-intro {
      padding: 64px 0;
      background: #f5f7f9;
      border-bottom: 1px solid #e5e9ec;
    }

    .contact-intro__grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr 1fr;
      gap: 0;
      align-items: stretch;
      background: #fff;
      border: 1px solid #e5e9ec;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(24, 54, 78, .07);
    }

    .contact-intro__item {
      padding: 32px;
      min-height: 190px;
      border-left: 1px solid #e5e9ec;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contact-intro__item:first-child {
      border-left: 0;
    }

    .contact-intro__eyebrow,
    .contact-card__label {
      margin: 0 0 8px;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #e36b42;
    }

    .contact-intro__item h2,
    .contact-intro__item h3 {
      margin: 0 0 10px;
      color: #1f2f3d;
      line-height: 1.25;
    }

    .contact-intro__item h2 {
      font-size: 28px;
    }

    .contact-intro__item h3 {
      font-size: 18px;
    }

    .contact-intro__item p {
      margin: 0;
      color: #63717c;
      line-height: 1.7;
    }

    .contact-intro__item a {
      color: #275f8a;
      text-decoration: none;
    }

    .contact-intro__item a:hover {
      text-decoration: underline;
    }

    .contact-main {
      padding: 76px 0 86px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    }

    .contact-main__heading {
      max-width: 780px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .contact-main__heading h2 {
      margin: 8px 0 14px;
      color: #1f2f3d;
      font-size: 34px;
      line-height: 1.2;
    }

    .contact-main__heading p {
      margin: 0;
      color: #677681;
      font-size: 16px;
      line-height: 1.75;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(300px, .8fr) minmax(0, 1.45fr);
      gap: 28px;
      align-items: stretch;
    }

    .contact-card {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(24, 54, 78, .09);
    }

    .contact-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: #e36b42;
    }

    .contact-card--direct {
      padding: 38px 34px 34px;
      background: #173f61;
      color: #fff;
    }

    .contact-card--direct h3 {
      margin: 8px 0 12px;
      color: #fff;
      font-size: 24px;
      line-height: 1.25;
    }

    .contact-card--direct > p {
      margin: 0 0 24px;
      color: rgba(255,255,255,.82);
      line-height: 1.7;
    }

    .contact-card--form {
      padding: 38px 40px 30px;
      background: #fff;
      border: 1px solid #e5e9ec;
    }

    .contact-card--form h3 {
      margin: 8px 0 12px;
      color: #1f2f3d;
      font-size: 24px;
      line-height: 1.25;
    }

    .contact-card--form > p {
      margin: 0 0 24px;
      color: #677681;
      line-height: 1.7;
    }

    .contact-channel-list {
      border-top: 1px solid rgba(255,255,255,.16);
    }

    .contact-channel {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 76px;
      padding: 12px 2px;
      border-bottom: 1px solid rgba(255,255,255,.16);
      color: #fff;
      text-decoration: none;
      transition: transform .18s ease, background .18s ease;
    }

    .contact-channel:hover {
      transform: translateX(3px);
      background: rgba(255,255,255,.04);
    }

    .contact-channel__icon {
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,.11);
      border: 1px solid rgba(255,255,255,.14);
      color: #fff;
      font-weight: 700;
    }

    .contact-channel__icon--whatsapp {
      background: #fff;
      color: #239b4b;
      border-color: #fff;
    }

    .contact-channel strong,
    .contact-channel small {
      display: block;
    }

    .contact-channel strong {
      margin-bottom: 3px;
      color: #fff;
      font-size: 14px;
    }

    .contact-channel small {
      color: rgba(255,255,255,.74);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .contact-channel__arrow {
      margin-left: auto;
      color: #f2a13c;
      font-size: 21px;
    }

    .contact-note {
      margin-top: 24px;
      padding-top: 20px;
      color: rgba(255,255,255,.7);
      font-size: 12px;
      line-height: 1.6;
    }

    .contact-pipedrive-shell {
      min-height: 520px;
    }

    .contact-pipedrive-shell iframe {
      width: 100% !important;
      max-width: 100% !important;
      border: 0 !important;
    }

    .contact-pipedrive-fallback {
      margin-top: 18px;
      font-size: 13px;
      color: #6f7d87;
    }

    .contact-pipedrive-fallback a {
      color: #275f8a;
      font-weight: 600;
    }

    @media (max-width: 991px) {
      .contact-intro {
        padding: 48px 0;
      }

      .contact-intro__grid,
      .contact-layout {
        grid-template-columns: 1fr;
      }

      .contact-intro__item {
        min-height: auto;
        border-left: 0;
        border-top: 1px solid #e5e9ec;
      }

      .contact-intro__item:first-child {
        border-top: 0;
      }

      .contact-main {
        padding: 58px 0 66px;
      }

      .contact-main__heading {
        text-align: left;
      }
    }

    @media (max-width: 640px) {
      .contact-intro__item {
        padding: 26px 22px;
      }

      .contact-intro__item h2 {
        font-size: 24px;
      }

      .contact-main__heading h2 {
        font-size: 28px;
      }

      .contact-card--direct,
      .contact-card--form {
        padding: 32px 22px 26px;
      }
    }