/* ==========================================================
   FIBERPRADO PAGO.CSS V2
   BLOQUE 1/4
   BASE + ESTRUCTURA + IMÁGENES
========================================================== */


/* ==========================================================
   01. VARIABLES
========================================================== */

:root{
  --pay-line:rgba(255,255,255,.10);
}


/* ==========================================================
   02. BASE PAGOS
========================================================== */

.pago-main{
  min-height:100vh;
}

.pagina-pago{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:25px;
  padding:20px;
}


/* ==========================================================
   03. IMÁGENES LATERALES
========================================================== */

.imagen-lateral{
  width:270px;
  height:480px;
  aspect-ratio:9/16;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 0 35px rgba(0,80,255,.35);
}

.imagen-lateral img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.imagen-lateral::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.80));
}

.texto-lateral{
  position:absolute;
  bottom:25px;
  left:15px;
  right:15px;
  z-index:2;
  text-align:center;
  font-size:20px;
  font-weight:900;
  text-shadow:0 4px 15px #000;
}


/* ==========================================================
   04. CONTENEDOR PRINCIPAL
========================================================== */

.pago-container{
  width:500px;
  padding:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
}

.form-pago{
  display:block;
}


/* ==========================================================
   05. LOGO PAGOS
========================================================== */

.form-pago .logo{
  display:block;
  width:170px;
  margin:0 auto 15px;
}


/* ==========================================================
   FIN BLOQUE 1/4
========================================================== */

/* ==========================================================
   FIBERPRADO PAGO.CSS V2
   BLOQUE 2/4
   FORMULARIO + DATOS + PLANES
========================================================== */


/* ==========================================================
   06. TITULOS
========================================================== */

h1{
  margin:0;
  text-align:center;
  font-size:28px;
  font-weight:900;
}

.pago-container>p{
  text-align:center;
  color:rgba(255,255,255,.70);
  margin:10px 0 20px;
  font-weight:700;
}

h2{
  font-size:20px;
  margin:22px 0 15px;
  padding-bottom:8px;
  border-bottom:1px solid var(--pay-line);
}


/* ==========================================================
   07. DATOS CLIENTE
========================================================== */

.datos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

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

label{
  display:block;
  font-size:12px;
  font-weight:900;
  margin-bottom:5px;
}

input{
  width:100%;
  height:36px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--pay-line);
  background:rgba(255,255,255,.05);
  color:white;
  font-size:14px;
}

input:focus{
  outline:none;
  border-color:#00ffff;
}


/* ==========================================================
   08. PLANES
========================================================== */

.planes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.plan-pago{
  height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  border-radius:16px;

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

  border:
  1px solid var(--pay-line);

  cursor:pointer;

  transition:.25s;
}

.plan-pago:hover{
  border-color:var(--orange);
}

.plan-pago.activo{
  border:2px solid var(--orange);

  background:
  rgba(255,109,0,.12);
}

.plan-pago h3{
  margin:0;
  font-size:15px;
}

.plan-pago span{
  margin-top:5px;
  color:var(--orange);
  font-size:21px;
  font-weight:900;
}

.plan-pago input{
  width:70px;
  height:30px;
  text-align:center;
}


/* ==========================================================
   FIN BLOQUE 2/4
========================================================== */

/* ==========================================================
   FIBERPRADO PAGO.CSS V2
   BLOQUE 3/4
   TOTAL + BOTON PAGO + WHATSAPP
========================================================== */


/* ==========================================================
   09. TOTAL A PAGAR
========================================================== */

.monto{
  margin:18px 0;
  padding:15px;
  text-align:center;
  border-radius:18px;

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

  font-weight:900;
}

.monto strong{
  display:block;
  font-size:30px;
}


/* ==========================================================
   10. BOTON PAGAR
========================================================== */

.btn-pagar{
  width:100%;
  height:50px;

  border:none;

  border-radius:50px;

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

  color:white;

  font-size:16px;

  font-weight:900;

  cursor:pointer;

  transition:.25s ease;
}

.btn-pagar:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,59,187,.35);
}


/* Botón procesando */

.btn-pagar.procesando{

  background:
  linear-gradient(
  90deg,
  #00a86b,
  #00d084
  );

  transform:scale(.97);

  box-shadow:
  0 0 25px rgba(0,208,132,.6);

}

.btn-pagar:disabled{
  cursor:not-allowed;
}


/* ==========================================================
   11. AYUDA WHATSAPP
========================================================== */

.ayuda{
  margin-top:15px;

  padding:12px;

  text-align:center;

  border-radius:15px;

  background:
  rgba(37,211,102,.10);

  border:
  1px solid rgba(37,211,102,.30);
}

.ayuda p{
  margin:0 0 10px;
  font-weight:900;
}


.btn-whatsapp{

  display:inline-block;

  padding:10px 22px;

  border-radius:50px;

  background:#25D366;

  color:white;

  font-weight:900;

  text-decoration:none;

  transition:.2s ease;
}

.btn-whatsapp:hover{

  transform:scale(1.03);

}


/* ==========================================================
   FIN BLOQUE 3/4
========================================================== */

/* ==========================================================
   FIBERPRADO PAGO.CSS V2
   BLOQUE 4/4
   FOOTER + RESPONSIVE
========================================================== */


/* ==========================================================
   12. FOOTER COMPARTIDO
========================================================== */

.site-footer{
  margin-top:60px;
}


/* Mantiene el footer del styles.css */

.site-footer .foot{
  width:100%;
}


/* Libro de reclamaciones */

.footer-libro{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-libro-icono img,
.icono-footer{
  width:90px;
  height:auto;
}


/* ==========================================================
   13. RESPONSIVE
========================================================== */


@media(max-width:1150px){

  .imagen-lateral{
    display:none;
  }

}


@media(max-width:980px){

  .pagina-pago{
    gap:15px;
  }

  .pago-container{
    width:100%;
    max-width:500px;
  }

}


@media(max-width:700px){

  .pagina-pago{
    padding:15px;
    align-items:center;
  }

  .pago-container{
    width:100%;
    padding:18px;
  }

  .datos-grid,
  .planes{
    grid-template-columns:1fr;
  }

  h1{
    font-size:24px;
  }

  h2{
    font-size:18px;
  }

  .monto strong{
    font-size:26px;
  }

}


@media(max-width:560px){

  .pago-container{
    border-radius:18px;
  }

  .form-pago .logo{
    width:140px;
  }

  .plan-pago{
    height:60px;
  }

  .btn-pagar{
    height:48px;
    font-size:15px;
  }

}


/* ==========================================================
   FIN PAGO.CSS V2
========================================================== */