/* =========================================================
   MOBILE.CSS - AJUSTES PARA CELULAR Y TABLET
   ========================================================= */

/* ================= TABLET / LAPTOP PEQUEÑO ================= */

@media (max-width: 1200px){
  .right{
    width:42%;
    min-width:360px;
    padding:30px 26px;
  }
}

@media (max-width: 1024px){
  .right{
    width:44%;
    min-width:340px;
  }
}

/* ================= TABLET PORTRAIT ================= */

@media (max-width: 900px){
  .app{
    flex-direction:column;
    align-items:stretch;
  }

  .left{
    width:100%;
    position:relative;
    min-height:unset;
    height:auto;
    aspect-ratio:16 / 9;
    max-height:360px;
    overflow:hidden;
  }

  .left::before{
    transform:scale(1.12);
    filter:blur(20px) brightness(.74) saturate(115%);
  }

  .left img{
    width:auto;
    max-width:100%;
    max-height:100%;
    height:auto;
    object-fit:contain;
  }

  .social-glass{
    bottom:14px;
    padding:8px 14px;
  }

  .social-card{
    width:40px;
    height:40px;
    transform:scale(.88);
  }

  .social-card i{
    font-size:14px;
  }

  .social-container{
    gap:12px;
  }

  .right{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:auto;
    padding:30px 26px 34px;
  }
}

/* ================= MÓVIL ESTÁNDAR ================= */

@media (max-width: 768px){
  .left{
    aspect-ratio:16 / 10;
    max-height:320px;
  }

  .acciones-bottom{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
  }

  .send-btn,
  .secondary-btn{
    width:auto;
    min-width:fit-content;
    max-width:100%;
  }

  .btn-group{
    gap:8px;
  }

  .btn-group button{
    padding:11px 16px;
    font-size:13px;
  }

  .right h1{
    font-size:23px;
  }

  .subtitle{
    font-size:13px;
    line-height:1.5;
    margin-bottom:22px;
  }

  .form-personal{
    gap:20px;
  }

  .pregunta-num{
    font-size:14.5px;
  }

  .text-line textarea{
    font-size:13.5px;
    min-height:80px;
  }

  .mensaje-personalizado{
    padding:18px 16px;
    font-size:13.5px;
  }
}

/* ================= iPhone / MÓVIL PEQUEÑO ================= */

@media (max-width: 480px){
  .left{
    aspect-ratio:16 / 10;
    max-height:270px;
  }

  .social-glass{
    bottom:10px;
    padding:6px 12px;
    border-radius:24px;
  }

  .social-card{
    width:34px;
    height:34px;
    transform:scale(.85);
  }

  .social-card i{
    font-size:13px;
  }

  .social-container{
    gap:10px;
  }

  .right{
    padding:24px 18px 28px;
  }

  .right h1{
    font-size:21px;
    line-height:1.25;
  }

  .subtitle{
    font-size:12.5px;
    margin-bottom:18px;
  }

  .send-btn{
    height:48px;
    padding:0 22px;
  }

  .send-btn span{
    font-size:13.5px;
    letter-spacing:.3px;
  }

  .btn-group button{
    padding:10px 14px;
    font-size:12.5px;
  }

  .pregunta-num{
    font-size:14px;
  }

  .text-line textarea{
    font-size:13px;
    min-height:80px;
  }

  #nombreCompleto,
  .input-line,
  #opcionesDinamicas .input-full,
  #opcionesDinamicas select{
    width:100%;
    max-width:100%;
  }

  #grupoInput{
    width:50px;
  }

  .titulo-final{
    font-size:20px;
    line-height:1.3;
  }

  .mensaje-personalizado{
    padding:16px 14px;
    font-size:13px;
    line-height:1.55;
  }

  .mensaje-final{
    font-size:13px;
  }

  .mensaje-exito h2{
    font-size:20px;
  }

  .mensaje-exito p{
    font-size:12.5px;
  }

  .checkmark{
    width:64px;
    height:64px;
  }

  .lock-title{
    font-size:20px;
  }

  .lock-text{
    font-size:13.5px;
  }
}

/* ================= iPhone SE / MUY PEQUEÑO ================= */

@media (max-width: 380px){
  .right h1{
    font-size:19px;
  }

  .right{
    padding:22px 16px 26px;
  }

  .send-btn{
    padding:0 16px;
  }

  .send-btn span{
    font-size:12px;
  }

  .btn-group button{
    padding:9px 11px;
    font-size:12px;
  }

  .pregunta-num{
    font-size:13.5px;
  }

  .text-line textarea{
    font-size:12.5px;
  }
}