/* ===== Colores base (sin tocar el topbar) ===== */
  :root {
      --brand-topbar: #0A6A73;
      /* barra superior correo/teléfono */
      --navbar-bg: #F6F6F7;
      /* fondo menú Productos/Servicios */
      --navbar-text: #00637A;
      /* texto menú */
      --brand-green: #B6E22E;
      /* verde título y botón */
  }

  @font-face {
      font-family: "Monument Extended";
      src: url("../fonts/MonumentExtended-Regular.otf") format("opentype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: "Monument Extended";
      src: url("../fonts/MonumentExtended-Ultrabold.otf") format("opentype");
      font-weight: 800;
      font-style: normal;
      font-display: swap;
  }


  body {
      font-family: Poppins;
  }

  /* Texto azul */
  .text-blue {
      color: #00637A;
  }

  /* ===== HERO ===== */
  .hero-landing {
      position: relative;
      overflow: hidden;
  }

  /* Fondo con imagen + degradado (SIN cuña) */
  .hero-landing-bg {
      position: relative;
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      min-height: clamp(520px, 65vh, 760px);
  }

  .hero-landing-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, 0) 64%);
      z-index: 0;
      pointer-events: none;
  }

  /* Contenido por encima */
  .hero-landing .hero-body {
      position: relative;
      z-index: 1;
      padding: 4rem 0;
  }

  /* Tipos y botón */
  .hero-landing .title {
      color: var(--brand-green);
      font-weight: 400;
      letter-spacing: .5px;
  }

  .hero-landing .subtitle {
      color: #fff;
  }

  .hero-landing .subtitle strong {
      font-weight: 400;
  }

  .button.btn-brand {
      background: var(--brand-green) !important;
      color: #00637A !important;
      border: none !important;
      padding: .95rem 1.25rem;
      font-weight: 400;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(182, 226, 46, .35);
      white-space: nowrap;
  }

  /* Mover más a la izquierda el bloque de texto */
  @media (min-width:1024px) {
      .hero-copy {
          margin-left: -42px;
          max-width: 640px;
      }
  }

  @media (min-width:1216px) {
      .hero-copy {
          margin-left: -56px;
      }
  }

  /* Botón lateral “Prueba demo gratis” visible */
  .side-label {
      position: fixed;
      right: -54px;
      top: 45%;
      transform: rotate(-90deg) translateY(-50%);
      transform-origin: right top;
      z-index: 1000;
  }

  .side-label .tag {
      background: #0B6C78;
      color: #fff;
      padding: .75rem 1rem;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
  }

  /* Video full-width debajo del hero */
  .video-band {
      margin-top: 14px;
  }

  /* “poquito” de separación */
  @media (min-width: 1024px) {
      .video-band {
          margin-top: 18px;
      }
  }

  .responsive-video {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      /* 16:9 */
  }

  .responsive-video video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* recorta sin deformar */
      display: block;
  }

  /* ===== Banda de pregunta ===== */
  :root {
      --brand-teal: #00637A;
      /* izquierda */
      --brand-lime: #B7D533;
      /* derecha */
  }

  .band-cta-wrap {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
  }

  .band-cta-split-grid {
      display: grid;
      grid-template-columns: minmax(280px, 70%) 1fr;
      align-items: center;
      min-height: 14rem;
  }

  .band-cta-wrap-left {
      background: var(--brand-lime);
      color: var(--brand-teal);
  }

  .band-cta-wrap-right {
      background: var(--brand-teal);
      color: #fff;
  }

  .band-cta-tagline {
      display: inline-block;
      font-weight: 400;
      letter-spacing: .2px;
      font-size: 1.8rem;
  }

  .band-cta-inner {
      padding: 2rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 6rem;
  }

  .band-cta-left .band-cta-inner {
      justify-content: center;
  }

  .band-cta-right .band-cta-inner {
      justify-content: center;
      padding: 0;

  }

  /* En móvil  */
  @media (max-width: 768px) {
      .band-cta-split-grid {
          grid-template-columns: minmax(255px, 37%) 1fr;
      }

      .band-cta-right .band-cta-inner {
          justify-content: center;
          /* botón alineado a la izquierda en mobile */
      }

      .band-cta-tagline {
          font-size: 16px;
      }
  }

  /* ===== Tarjetas ===== */
  .card.product {
      height: 100%;
      border: none;
      border-radius: 12px;
      background: #F6F6F7;
      overflow: hidden;
  }

  .card.product .brand {
      padding: 1rem 1rem 0;
  }

  .card.product .brand img {
      height: 28px;
      margin-bottom: 1rem;
      /* logo pequeño tipo “NET/WA/ERP” */
      width: auto;
  }

  .card.product .card-image {
      padding: 0 1rem;
      width: auto;
  }

  .card.product .card-image .image {
      border-radius: 10px;
      overflow: hidden;
  }

  .card.product .card-content {
      padding: 1rem 1rem 1.25rem;
  }

  .card.product .title {
      margin-bottom: .35rem;
  }

  .card.product .content {
      font-size: .95rem;
  }

  .card.product .rule {
      height: 1px;
      background: #00637A;
      margin: .75rem 0 1rem;
  }

  .card .cta-link {
      font-weight: 400;
      color: #00637A;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
  }

  /* ===== CTA full-bleed  ===== */
  :root {
      --brand-teal: #00637A;
      /* izquierda */
      --brand-lime: #B7D533;
      /* derecha */
  }

  /* Full-bleed: ocupa el ancho completo aunque esté dentro de un container */
  .cta-split-band {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
  }

  /* Grid de dos lados */
  .cta-split-grid {
      display: grid;
      grid-template-columns: minmax(280px, 40%) 1fr;
      /* 40/60 aprox del mock */
      align-items: center;
      min-height: 14rem;
  }

  /* Lado izquierdo */
  .cta-left {
      background: var(--brand-teal);
      color: var(--brand-lime);
  }

  .cta-tagline {
      display: inline-block;
      font-weight: 400;
      letter-spacing: .2px;
      font-size: 1.8rem;
  }

  /* Lado derecho */
  .cta-right {
      background: var(--brand-lime);
  }

  /* Padding interno alineado a tu grid principal */
  .cta-inner {
      padding: .9rem 1.25rem;
      display: flex;
      align-items: center;
      height: 6rem;
  }

  .cta-left .cta-inner {
      justify-content: center;
  }

  .cta-right .cta-inner {
      justify-content: center;
      padding: 0;

  }

  /* ====== Responsive ====== */
  @media (max-width: 768px) {
      .cta-split-grid {
          grid-template-columns: minmax(255px, 37%) 1fr;
      }

      .cta-right .cta-inner {
          justify-content: center;
          /* botón alineado a la izquierda en mobile */
      }

      .cta-tagline {
          font-size: 16px;
      }
  }

  /* ===== Título y logos Marcas ===== */
  .clients-title {
      font-family: "Monument Extended", sans-serif;
      color: #00637A;
      font-weight: 400;
      font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  }



  /* Romper el container y ocupar todo el viewport */
  .clients-bleed {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
  }

  /* Grid responsivo y centrado */
  .logos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: clamp(16px, 3vw, 56px);
      align-items: center;
      padding: 1.25rem clamp(16px, 6vw, 72px);
  }

  /* Celda para centrar vertical/horizontalmente cada logo */
  .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 84px;
  }

  /* Imágenes centradas y contenidas */
  .logos-grid img {
      max-width: min(200px, 90%);
      max-height: 8rem;
      /* controla altura uniforme */
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
  }

  .logos-grid img:hover {
      opacity: .85;
      filter: grayscale(0%);
  }

  /* Opcional: dar más aire entre bloques en mobile */
  @media (max-width: 768px) {
      .logos-grid {
          gap: clamp(16px, 6vw, 40px);
      }

      .logo-item {
          min-height: 72px;
      }

      .logos-grid img {
          max-height: 40px;
      }
  }