/* ==========================================================
   FIBERPRADO STYLE.LIBRO.CSS V2
   BLOQUE 1/2
   CONTENEDOR + FORMULARIO
========================================================== */


/* ==========================================================
   01. CONTENEDOR LIBRO
========================================================== */

.container{
  max-width:1000px;
  margin:40px auto;
  padding:40px;

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.08);

  border-radius:20px;

  box-shadow:0 20px 60px rgba(0,0,0,.35);
}


.container h1{
  margin:0 0 15px;

  text-align:center;

  font-size:36px;

  color:#fff;
}


.container p{
  text-align:center;

  color:rgba(255,255,255,.75);

  line-height:1.7;

  margin-bottom:40px;
}


.container h2{
  margin:35px 0 20px;

  padding-bottom:10px;

  border-bottom:2px solid rgba(255,255,255,.08);

  color:#fff;

  font-size:24px;
}


/* ==========================================================
   02. FORMULARIO RECLAMOS
========================================================== */

#reclamoForm{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:20px;
}


#reclamoForm h2{
  grid-column:1/-1;
}


.grupo{
  display:flex;
  flex-direction:column;
}


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


#reclamoForm label{
  margin-bottom:8px;

  font-size:14px;

  font-weight:700;

  color:#fff;
}


#reclamoForm input,
#reclamoForm select,
#reclamoForm textarea{

  width:100%;

  padding:14px 16px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.10);

  border-radius:12px;

  color:#fff;

  font-size:15px;

  transition:.25s;
}


#reclamoForm input:focus,
#reclamoForm select:focus,
#reclamoForm textarea:focus{

  outline:none;

  border-color:#0F5BFF;

  box-shadow:0 0 0 4px rgba(15,91,255,.20);
}


#reclamoForm textarea{

  resize:vertical;

  min-height:160px;
}


#reclamoForm select option{

  background:#111729;

  color:#fff;
}


#reclamoForm hr{

  grid-column:1/-1;

  margin:15px 0;

  border:none;

  border-top:1px solid rgba(255,255,255,.08);
}


/* ==========================================================
   FIN BLOQUE 1/2
========================================================== */


/* ==========================================================
   FIBERPRADO STYLE.LIBRO.CSS V2
   BLOQUE 2/2
   BOTON + LIBRO + RESPONSIVE
========================================================== */


/* ==========================================================
   03. BOTÓN REGISTRAR RECLAMO
========================================================== */

#reclamoForm button{
  grid-column:1/-1;

  height:55px;

  border:none;

  border-radius:50px;

  background:
  linear-gradient(
  90deg,
  var(--blue),
  var(--cyan)
  );

  color:#fff;

  font-size:17px;

  font-weight:700;

  cursor:pointer;

  transition:.25s;
}


#reclamoForm button:hover{

  transform:translateY(-2px);

  box-shadow:
  0 15px 40px rgba(0,59,187,.35);

}


/* ==========================================================
   04. LIBRO DE RECLAMACIONES FOOTER
========================================================== */

.libro-col{
  display:flex;

  align-items:center;

  justify-content:center;
}


.footer-libro{

  display:flex;

  align-items:center;

  gap:18px;

  text-decoration:none;

  color:#fff;

}


.icono-footer{

  width:90px;

  height:auto;

  object-fit:contain;

}


.footer-libro span{

  font-size:16px;

  font-weight:700;

}



/* ==========================================================
   05. RESPONSIVE
========================================================== */


@media(max-width:900px){

  .container{

    margin:20px;

    padding:25px;

  }


  #reclamoForm{

    grid-template-columns:1fr;

  }


  .grupo-full{

    grid-column:auto;

  }

}



@media(max-width:600px){

  .container{

    padding:20px;

  }


  .container h1{

    font-size:28px;

  }


  .container h2{

    font-size:20px;

  }


  .footer-libro{

    justify-content:flex-start;

  }


  .icono-footer{

    width:70px;

  }


  .footer-libro span{

    font-size:15px;

  }

}


/* ==========================================================
   FIN STYLE.LIBRO.CSS V2
========================================================== */