*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:#f4f4f4;
  font-family:'Work Sans',sans-serif;
}

/* BARRA SUPERIOR */

.top{
  background:#3367c7;
  height:32px;
  display:flex;
  align-items:center;
  position:relative;
  padding-left:267px;
}

.gov-logo{
  height:19px;
}

.lang-btn{
  position:absolute;
  right:270px;
  top:6px;

  width:20px;
  height:20px;

  border:none;
  border-radius:5px;

  background:white;
  color:#3367c7;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
  padding:0;
}

.lang-btn:hover{
  background:#f2f2f2;
}

/* HERO */

.hero{
    background:url("../img/fondo.jpg") no-repeat;

    background-size:cover;

    background-position:center -225px;

    min-height:315px;

    padding:20px 18%;
}

.logos{
  width:65%;
  margin:auto;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo-left{
  width:300px;
  margin-left:-133px;
}

.logo-right{
  width:260px;
  margin-right:-50px;
}

/* CARD */

.card{
  width:460px;
  height:130px;

  background:#f3f3f3;

  border-radius:18px;

  padding-top:14px;

  text-align:center;

  margin-top:60px;
  margin-left:45px;
}

.card h1{
  font-family:'Montserrat',sans-serif;

  color:#1d9b47;

  font-size:28px;
  font-weight:600;

  letter-spacing:-0.5px;

  margin-top:30px;
  margin-bottom:6px;
}

.buttons{
  display:flex;
  justify-content:center;
  gap:28px;
}

.buttons a{
  background:#008f6f;
  color:white;

  text-decoration:none;

  padding:9px 20px;

  border-radius:20px;

  font-family:'Montserrat',sans-serif;

  font-size:10px;
  font-weight:630;

  letter-spacing:.3px;
}

/* FOOTER */

.footer{
  background:#3367c7;
  color:white;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  gap:0;

  padding:35px 0 90px 0;

  min-height:290px;
}

.footer-box{
  position:relative;
  height:225px;
  padding:0 24px;
}

.footer-box:not(:last-child)::after{
  content:"";

  position:absolute;
  right:0;
  top:0;

  width:1px;
  height:100%;

  background:rgba(255,255,255,.75);
}

/* LOGOS FOOTER */

.logo-box{
  width:180px;
  text-align:center;
  padding-top:18px;
}

.gov-footer{
  width:105px;
  margin-top:-17px;
}

.co-logo{
  width:42px;
}

/* MINISTERIO */

.ministerio{
  width:355px;
}

.ministerio h2{
  font-family:'Work Sans',sans-serif;

  font-size:18px;
  font-weight:530;

  color:white;

  margin:0 0 10px 0;
}

.ministerio p{
  font-family:'Work Sans',sans-serif;

  font-size:11px;
  font-weight:400;

  color:white;

  line-height:1.45;

  margin:0 0 4px 0;
}

/* REDES */

.social{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  column-gap:38px;
  row-gap:10px;

  margin-top:18px;
}

.social a{
  width:62px;

  text-align:center;
  text-decoration:none;

  color:white;

  font-family:'Work Sans',sans-serif;

  font-size:11px;
  font-weight:500;
}

.social i{
  width:34px;
  height:34px;

  background:white;
  color:#3367c7;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 4px auto;

  font-size:17px;
}

.social img{
  width:34px;
  height:34px;

  display:block;

  margin:0 auto 4px auto;
}

/* CONTACTO */

.contacto{
  width:265px;
}

.contacto h2{
  font-family:'Work Sans',sans-serif;

  font-size:18px;
  font-weight:530;

  color:white;

  margin:0 0 10px 0;
}

.contacto p{
  font-family:'Work Sans',sans-serif;

  font-size:11px;
  font-weight:400;

  color:white;

  line-height:1.55;

  margin:0 2px 0 0;
}

/* BOTON VOLVER ARRIBA */

#topBtn{
  position:fixed;

  right:12px;
  bottom:0;

  width:38px;
  height:32px;

  border:none;

  border-radius:10px 10px 0 0;

  background:#1aa36f;
  color:white;

  font-size:18px;

  cursor:pointer;

  z-index:9999;

  display:none;
}

#topBtn:hover{
  background:#148d60;
}

#hoverBox{
  position:fixed;

  right:55px;
  bottom:0;

  height:32px;

  background:white;

  color:#2f5ea7;

  font-size:12px;

  display:flex;
  align-items:center;

  padding:0 14px;

  border-radius:8px 8px 0 0;

  box-shadow:0 1px 4px rgba(0,0,0,.25);

  opacity:0;
  visibility:hidden;

  transition:.15s;

  z-index:9998;
}

#topBtn:hover + #hoverBox{
  opacity:1;
  visibility:visible;
}

/* LOGIN / FACTURA */

.login-box{
  width:330px;

  margin:70px auto;

  background:white;

  padding:35px;

  border-radius:12px;

  box-shadow:0 0 10px #ccc;

  text-align:center;
}

input{
  width:100%;

  padding:10px;

  margin:8px 0;
}

.oculto{
  display:none;
}

.panel{
  margin-top:25px;
}

.factura{
  background:white;

  width:500px;

  margin:80px auto;

  padding:40px;

  border-radius:12px;

  box-shadow:0 0 10px #ccc;
}

/*apartado login*/
/* SOLO ADMIN */

.admin-page{
    zoom:1.40;
}
.admin-page .gov-logo{
  height: 18px;
    margin-left:-190px;
}
.admin-page .lang-btn{
    margin-right:-175px;

    width:18px;
    height:18px;

    font-size:10px;

    border-radius:5px;

    padding:0;
}

.admin-header{
  height:70px;
  background:white;
  border-bottom:3px solid #00866b;

  display:flex;
  justify-content:center;
  align-items:center;

  gap:180px;
}

.admin-logo-left{
  width:295px;
  margin-left: -80px;
}

.admin-logo-right{
  width:260px;
}


.login-section{
  background:white;
  min-height:365px;
  position:relative;
  padding-top:25px;
}

.breadcrumb{
  width:850px;
  margin:0 auto 45px auto;
  font-size:10px;
  color:#333;
}
.breadcrumb a{
    color:#00866b;
    text-decoration:none;
}

.breadcrumb a:hover{
    text-decoration:underline;
}
.breadcrumb i{
    font-size:7px;
}

.login-card{
  width:335px;
  margin:0 auto;

  background:white;
  border:1px solid #bbc6d3;
  border-radius:14px;

  box-shadow:0 4px 12px rgba(0,0,0,.22);
  overflow:hidden;
}

.login-card h2{
    color:#005ca8;

    font-family:'Work Sans',sans-serif;

    font-size:24px;   /* igual que tienes */

    font-weight:300;  /* más delgado */

    line-height:1.5;  /* más aire */

    text-align:center;

    margin:28px 0 34px;
}
.login-card form{
  padding:0 52px 22px;
}

.login-card label{
  display:block;
  font-size:11px;
  font-weight:400;
  margin-bottom:0;
  letter-spacing:-0.2px;
}

.login-card input{
  width:100%;
  height:22px;
  border:1px solid #ced4da;
  border-radius:3px;
  margin-bottom:15px;
  padding-left:8px;
  font-size:10px;
}
.login-card input:focus{
    border-color:#86b7fe;

    outline:0;

  
}

.login-card button{
  display:block;
  margin:0 auto;

  background:#00866b;
  color:white;

  border:none;
  border-radius:16px;
  font-family: 'Work Sans',sans-serif;

  width:80px;
  height:23px;

  font-size:9px;
  font-weight:600;
  cursor:pointer;
}

.recover{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#e7f0fb;
  color:#005ca8;

  height:49px;

  text-decoration:none;

  font-size:11px;
  font-weight:500;

  cursor:pointer;
}

.recover:hover{
  text-decoration:underline;
}
/* AJUSTES EXTRA ADMIN */

.login-card{
  margin-bottom:0;
}

.login-section{
  padding-bottom:20px;
}

.admin-tools{
  width:800px;
  margin:18px auto 0 auto;

  display:flex;
  gap:25px;

  color:#00866b;
  font-size:16px;
}
.admin-tools button{
  background:none;
  border:none;
  color:#00866b;
  font-size:16px;
  cursor:pointer;
  padding:0;
}



/* ==========================================
   TABLETS GRANDES (IPAD PRO)
========================================== */
@media screen and (max-width: 1200px){

  .top{
    padding-left:20px;
  }

  .lang-btn{
    right:20px;
  }

  .hero{
    padding:20px 8%;
    background-position:center;
  }

  .logos{
    width:100%;
  }

  .logo-left{
    width:280px;
    margin-left:0;
  }

  .logo-right{
    width:240px;
    margin-right:0;
  }

  .card{
    width:550px;
    height:auto;
    padding:20px;
    margin:50px auto 0;
  }

  .footer{
    flex-wrap:wrap;
    padding:40px 20px;
  }

  .footer-box{
    padding:0 15px;
  }

  .ministerio{
    width:320px;
  }

  .contacto{
    width:260px;
  }

  .admin-page{
    zoom:1;
  }

}


/* ==========================================
   TABLETS
========================================== */
@media screen and (max-width: 1024px){

  .top{
    padding-left:20px;
  }

  .lang-btn{
    right:20px;
  }

  .hero{
    padding:20px 5%;
    background-position:center;
  }

  .logos{
    width:100%;
  }

  .logo-left{
    margin-left:0;
    width:240px;
  }

  .logo-right{
    margin-right:0;
    width:210px;
  }

  .card{
    width:500px;
    margin-left:auto;
    margin-right:auto;
  }

  .footer{
    flex-wrap:wrap;
    justify-content:center;
    padding:40px 20px;
  }

  .footer-box{
    width:45%;
    margin-bottom:30px;
    height:auto;
  }

  .footer-box:not(:last-child)::after{
    display:none;
  }

  .admin-page{
    zoom:1;
  }

  .admin-header{
    gap:50px;
  }

  .breadcrumb{
    width:90%;
  }

  .admin-tools{
    width:90%;
  }

}


/* ==========================================
   MOVILES Y TABLETS PEQUEÑAS
========================================== */
@media screen and (max-width: 768px){

  .top{
    height:80px;
    padding-left:20px;
  }

  .gov-logo{
    height:28px;
  }

  .lang-btn{
    right:35px;
    top:48px;

    width:28px;
    height:28px;

    font-size:14px;
  }

  .hero{
    min-height:auto;
    padding:15px 10px 40px;
    background-position:center;
  }

  .logos{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .logo-left{
    width:320px;
    max-width:95%;
    margin:0;
  }

  .logo-right{
    width:280px;
    max-width:90%;
    margin:0;
  }

  .card{
    width:85%;
    height:auto;
    margin:80px auto 0;
    padding:30px 20px;
  }

  .card h1{
    font-size:24px;
    line-height:1.6;
    text-align:left;
    margin:0 0 15px;
  }

  .buttons{
    gap:0;
    justify-content:space-between;
  }

  .buttons a{
    width:48%;
    padding:12px 5px;
    font-size:11px;
    text-align:center;
  }

  .footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:40px 20px;
  }

  .footer-box{
    width:100%;
    height:auto;
    padding:20px 0;
  }

  .footer-box:not(:last-child)::after{
    display:none;
  }

  .logo-box{
    width:100%;
  }

  .ministerio,
  .contacto{
    width:100%;
  }

  .social{
    justify-content:center;
  }

  .admin-page{
    zoom:1;
  }

  .admin-page .gov-logo{
    margin-left:0;
  }

  .admin-page .lang-btn{
    margin-right:0;
  }

  .admin-header{
    height:auto;
    padding:15px;
    flex-direction:column;
    gap:15px;
  }

  .admin-logo-left{
    width:300px;
    max-width:95%;
    margin-left:0;
  }

  .admin-logo-right{
    width:260px;
    max-width:90%;
  }

  .breadcrumb{
    width:90%;
    font-size:12px;
    margin-bottom:25px;
  }

  .login-card{
    width:92%;
    max-width:360px;
  }

  .login-card form{
    padding:0 25px 20px;
  }

  .login-card h2{
    font-size:22px;
  }

  .admin-tools{
    width:100%;
    justify-content:center;
  }

}


/* ==========================================
   MOVILES PEQUEÑOS
========================================== */
@media screen and (max-width: 480px){

  .card{
    width:88%;
  }

  .card h1{
    font-size:20px;
  }

  .buttons{
    flex-direction:row;
  }

  .buttons a{
    font-size:10px;
  }

  .logo-left{
    width:280px;
  }

  .logo-right{
    width:240px;
  }

  .login-card h2{
    font-size:20px;
  }

}