/* =======================================
   TABLET (768px – 1024px)
   Desktop layout proporcional y estable
======================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  /* ===== RESET OVERFLOW ===== */

  html,
  body {
    overflow-x: hidden;
  }

  /* ===== CONTENEDORES PRINCIPALES ===== */

  .home-inner,
  .view-content,
  .form-container {
    max-width: 95vw;
  }

  /* ===================================
     HOME
  =================================== */

  .home {
    position: relative;
    z-index: 2;
    overflow: visible;
    min-height: auto;
    padding-bottom: 2rem;
  }

  .home-content {
    gap: clamp(2rem, 3vw, 3rem);
  }

  .hero-title {
    font-size: clamp(2.6rem, 4vw, 4rem);
  }

  .authory-logo-vertical {
    width: clamp(200px, 20vw, 320px);
  }

  .home-arrow {
    width: clamp(50px, 10vw, 80px);
    top: calc(100% + 20px);
    transform: translateX(-50%);
    z-index: 20;
  }

  /* Evitar desplazamientos raros */
  .home-exclamation-left {
    right: -0.8em;
  }

  /* ===================================
     HEADER
  =================================== */

  .menu {
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0.6rem 1.5rem;
  }

  .menu a {
    font-size: clamp(14px, 1.1vw, 18px);
  }

  .nav-5 {
    font-size: clamp(14px, 1.1vw, 18px);
  }

  /* ===================================
     HOW
  =================================== */

  .how {
    padding: 2rem 4rem 2rem;
    position: relative;
    z-index: 1;
    min-height: auto;
    overflow: visible;
  }

  .how-content {
    font-size: clamp(1.5rem, 2.2vw, 2.4rem);
    margin-inline: clamp(2rem, 4vw, 4rem);
  }

  .how-text-1,
  .how-text-2,
  .how-text-3 {
    margin-right: 0;
  }

  .how-arrow {
    width: clamp(150px, 14vw, 240px);
    right: 3%;
  }

  /* ===================================
     VIEW
  =================================== */

  .view {
    padding: 4rem 4rem 2rem;

    z-index: 2;
    min-height: auto;
  }

  .view-content {
    margin-inline: auto;
    position: relative;
  }

  .view-arrow {
    position: absolute;
    top: -150px;
    left: clamp(60px, 12vw, 180px);
    width: clamp(130px, 12vw, 230px);
    z-index: 5;
  }

  .view-switch-wrapper {
    margin-left: clamp(2rem, 6vw, 6rem);
  }

  .view-image-container {
    min-height: 420px;
  }

  .view-image-text {
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    max-width: 55ch;
  }

  .view-tick {
    margin-left: 32em;
  }

  /* ===================================
     PROFESSOR CARD
  =================================== */

  .prof-card {
    max-width: 95%;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  }

  .prof-columns {
    gap: clamp(1rem, 2vw, 3rem);
    padding-inline: clamp(1rem, 2vw, 3rem);
  }

  .prof-col-right {
    transform: none;
  }

  .prof-name,
  .prof-task {
    margin-left: clamp(60px, 8vw, 80px);
  }

  .prof-subject {
    margin-left: clamp(30px, 6vw, 50px);
  }

  .prof-icon {
    width: 24px;
    height: 24px;
  }

  .prof-icon-alert {
    width: 38px;
    height: 38px;
  }

  /* ===================================
     FORM
  =================================== */

  .form {
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  .form-container {
    max-width: 95vw;
    min-height: auto;
    padding: 3rem 2rem;
    gap: 2rem;
    grid-template-columns: 1.4fr 0.6fr;
  }

  .form-left {
    transform: translateY(-30px);
  }

  .form-left h2 {
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    max-width: 10ch;
  }

  .form-underline-left {
    width: 90%;
  }

  .form-exclamation-right {
    right: clamp(-30px, -2vw, -45px);
    width: 43px;
  }

  .frc-captcha {
    transform: scale(0.65);
  }

  .form-right form {
    max-width: 250px;
    padding-right: 1rem;
  }

  .input-group,
  .form-right input[type="text"],
  .form-right input[type="email"],
  .occupation,
  .checkbox-group,
  .frc-captcha {
    max-width: 100%;
  }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .home-inner,
  .view-content,
  .form-container {
    max-width: 750px;
  }

  .how > * {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  .form-container {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .view-arrow {
    left: 180px;
  }
}