/* ================================
   HERO SECTION
================================ */
.hero {
  background: radial-gradient(
    circle at top left,
    rgba(0, 70, 200, 0.9) 20%,
    rgba(0, 45, 120, 0.9) 60%,
    var(--color-dark) 100%
  );
  color: #fff;
  text-align: center;
  padding: 100px 20px 160px;

  .hero__inner {
    max-width: 800px;
    margin: 0 auto;

    .hero__logo {
      margin-bottom: 25px;
      object-fit: contain;
    }

    .hero__subtitle {
      font-size: 1.2rem;
      font-weight: 400;
      color: color-mix(in srgb, #fff, #0095ff 35%);
    }
  }
}

/* ================================
   MAIN FORM SECTION
================================ */
.landing-main {
  background: var(--color-bg-light);
  display: flex;
  justify-content: center;
  padding: 60px 20px 100px;

  .form-section {
    width: 100%;
    max-width: var(--max-width);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-top: -140px;
    padding: 60px;
    text-align: center;
    z-index: 1;
    transition: all 0.2s ease;

    .form-header {
      margin-bottom: 40px;
    }

    .form-section__title {
      font-size: 1.9rem;
      color: var(--color-dark);
      font-weight: 700;
      margin-bottom: 10px;
    }

    .form-section__text {
      color: #555;
      font-size: 1rem;
      margin: 0;
      text-wrap: pretty;
    }

    &:hover {
      transform: translateY(-5px);
    }

    /* === FORMULARIO DEMO === */
    .form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(47%, 1fr));
      gap: 1.5rem;
      max-width: 100%;
      margin: 2rem auto;
      padding: 0;

      /* === Grupo de inputs === */
      .form__group {
        display: flex;
        flex-direction: column;

        input,
        select.nice-select {
          width: 100%;
          padding: 10px;
          border: 1px solid var(--color-border);
          border-radius: var(--radius-md);
          font-size: 0.95rem;
          transition: var(--transition);

          &::placeholder {
            font-size: 12px;
            text-transform: uppercase;
          }

          &:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 4px rgba(30, 144, 255, 0.3);
          }
        }
        
      }

      .form__group.full:has(.separador) {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        position: relative;

        div.separador::after {
          content: "";
          width: 100%;
          height: 1px;
          background-color: var(--color-border);
          position: absolute;
          top: 50%;
          transform: translateX(-50%);
          z-index: 0;
        }

        span {
          width: fit-content;
          padding: 0 15px;
          z-index: 1;
          background-color: #fff;
          margin: 0;
        }
      }

      .form__group.full {
        grid-column: 1 / -1;
      }

      /* === Checkboxes === */
      .form-checkbox {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        font-size: var(--font-small);
        color: var(--color-text);

        label {
          display: flex;
          align-items: center;
          line-height: 1.4em;
          cursor: pointer;
          color: #555;

          input[type="checkbox"] {
            margin-right: 5px;
            font-size: inherit;
            min-height: 20px;
            min-width: 20px;
            border-radius: var(--radius);
            accent-color: var(--color-primary);
            cursor: pointer;
            transition: filter 0.2s ease;

            &:hover {
              filter: brightness(1.2);
            }

            &:focus-visible {
              outline: 2px solid var(--color-primary);
              outline-offset: 2px;
            }
          }
        }

        a {
          margin-left: 5px;
          color: #103d8a;
          text-decoration: underline;
          text-underline-offset: 2px;
          transition: color 0.2s ease;

          &:hover {
            color: color-mix(in srgb, var(--color-primary), #000 20%);
          }
        }
      }

      /* === Botón === */
      .btn {
        width: 100%;
        padding: 12px;
        border-radius: var(--radius-md);
        border: 1px solid #103d8a;
        background: rgba(0, 153, 255, 0.363);
        color: #103d8a;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.9px;
        cursor: pointer;
        transition: var(--transition);

        &.full {
          grid-column: 1 / -1;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(30, 144, 255, 0.25);
          background: #0b1736;
          color: #fff;
        }

        &:active {
          transform: translateY(0);
          box-shadow: 0 3px 10px rgba(30, 144, 255, 0.2);
        }
      }
    }
  }
}

#previewNombreDominio {
  margin-top: 3px;
  font-size: 0.90rem;
  text-align: left;
  pointer-events: none; /* no interfiere con el input */
}

/* ================================
   RESPONSIVE
================================ */
@media (width <=900px) {
  .hero {
    padding: 70px 20px 50px;

    .hero__inner {
      .hero__title {
        font-size: 1.8rem;
      }

      .hero__subtitle {
        font-size: 1rem;
      }
    }
  }

  .landing-main {
    padding: 40px 15px 70px;

    .form-section {
      padding: 35px 20px;
      margin-top: 0;

      .form {
        .form-checkbox {
          text-align: left;
          font-size: 0.7rem;
        }
      }
    }
  }
}