@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --azul: #0b2a4a;

  --azul-claro: #164f7c;

  --dorado: #c99a2e;

  --fondo: #f3f4f6;

  --blanco: #ffffff;

  --texto: #151515;

  --gris: #666666;

  --borde: #e1e6eb;

}


/* =========================================================
   GENERAL
========================================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}


html {

  scroll-behavior: smooth;

}


body {

  background: var(--fondo);

  color: var(--texto);

  line-height: 1.6;

}


section {

  scroll-margin-top: 70px;

}


h1,
h2,
h3 {

  line-height: 1.3;

}


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

header {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  width: 100%;

  background: #222;

  box-shadow: 0 2px 8px rgba(0,0,0,.15);

}


.navbar {

  max-width: 1200px;

  min-height: 68px;

  margin: auto;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  font-size: 22px;

}


.logo a {

  color: #fff;

  text-decoration: none;

}


.navbar .all-links {

  display: flex;

  align-items: center;

  gap: 32px;

  list-style: none;

}


.navbar .all-links a {

  color: #fff;

  text-decoration: none;

  font-size: 15px;

  transition: .3s;

}


.navbar .all-links a:hover {

  color: var(--dorado);

}


#menu-toggler {

  display: none;

}


#hamburger-btn {

  display: none;

  cursor: pointer;

}


/* =========================================================
   HERO
========================================================= */

.homepage {

  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      rgba(0,0,0,.45),
      rgba(0,0,0,.45)
    ),
    url("images/home-bg.jpg");

  background-size: cover;

  background-position: center;

}


.homepage .content {

  position: relative;

  z-index: 2;

  max-width: 900px;

  padding: 100px 25px 40px;

  text-align: center;

}


.homepage .text {

  color: #fff;

}


.homepage h1 {

  margin-bottom: 15px;

  font-size: clamp(40px, 6vw, 65px);

  font-weight: 700;

}


.homepage p {

  font-size: clamp(17px, 2vw, 21px);

}


.homepage .content > a {

  display: inline-block;

  margin-top: 35px;

  padding: 12px 28px;

  border: 2px solid #fff;

  border-radius: 5px;

  background: #fff;

  color: #111;

  text-decoration: none;

  font-weight: 500;

  transition: .3s;

}


.homepage .content > a:hover {

  background: transparent;

  color: #fff;

}


/* =========================================================
   TÍTULOS DE SECCIONES
========================================================= */

.services,
.portfolio,
.about,
.contact {

  width: 100%;

  padding: 85px 20px;

}


.services > h2,
.portfolio > h2,
.about > h2,
.contact > h2 {

  margin-bottom: 10px;

  text-align: center;

  font-size: 32px;

}


.services > p,
.portfolio > p,
.about > p,
.contact > p {

  max-width: 900px;

  margin: 0 auto;

  text-align: center;

  color: #444;

}


/* =========================================================
   SERVICIOS
========================================================= */

.services .cards {

  width: 100%;

  max-width: 1200px;

  margin: 50px auto 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 35px;

  list-style: none;

}


.services .card {

  min-height: 360px;

  padding: 45px 30px 35px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 5px 18px rgba(0,0,0,.07);

  text-align: center;

  transition: .3s;

}


.services .card:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(0,0,0,.12);

}


/* =========================================================
   ICONOS DE SERVICIOS
========================================================= */

.services .service-icon {

  width: 115px !important;

  height: 115px !important;

  min-width: 115px;

  min-height: 115px;

  margin: 0 auto 27px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: 2px solid var(--borde);

  border-radius: 50%;

  background: #f7f8fa;

  box-shadow: 0 5px 15px rgba(0,0,0,.07);

  transition: .3s;

}


.services .service-icon i {

  display: inline-block !important;

  width: auto !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  font-family: "Font Awesome 6 Free" !important;

  font-style: normal !important;

  font-weight: 900 !important;

  font-size: 46px !important;

  line-height: 1 !important;

  color: var(--azul) !important;

}


.services .card:hover .service-icon {

  border-color: var(--dorado);

  transform: translateY(-4px);

}


.services .card:hover .service-icon i {

  color: var(--dorado) !important;

}


.services .card h3 {

  margin-bottom: 12px;

  font-size: 19px;

}


.services .card p {

  font-size: 15px;

  line-height: 1.65;

}


/* =========================================================
   PUBLICACIONES
========================================================= */

.portfolio {

  background: #eceeef;

}


.publication-cards {

  width: 100%;

  max-width: 1200px;

  margin: 50px auto 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  list-style: none;

}


.publication-card {

  min-height: 500px;

  padding: 65px 35px 40px;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 5px 18px rgba(0,0,0,.07);

  text-align: center;

  transition: .3s;

}


.publication-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(0,0,0,.12);

}


.publication-icon {

  width: 95px;

  height: 95px;

  min-width: 95px;

  min-height: 95px;

  margin: 0 auto 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--borde);

  border-radius: 50%;

  background: #f7f8fa;

  transition: .3s;

}


.publication-icon i {

  font-family: "Font Awesome 6 Free" !important;

  font-weight: 900 !important;

  font-size: 40px !important;

  line-height: 1 !important;

  color: var(--azul) !important;

}


.publication-card:hover .publication-icon {

  border-color: var(--dorado);

}


.publication-card:hover .publication-icon i {

  color: var(--dorado) !important;

}


.publication-card h3 {

  margin-bottom: 16px;

  font-size: 20px;

}


.publication-card p {

  margin-bottom: 16px;

  font-size: 15px;

  line-height: 1.65;

}


.publication-button {

  margin-top: auto;

  padding: 11px 20px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border-radius: 5px;

  background: var(--azul);

  color: #fff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition: .3s;

}


.publication-button:hover {

  background: var(--dorado);

}


/* =========================================================
   NOSOTROS
========================================================= */

.about {

  max-width: 1200px;

  margin: auto;

  background: var(--fondo);

}


.section-description {

  margin-bottom: 45px !important;

}


.about-block {

  width: 100%;

  margin-top: 30px;

  padding: 35px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0,0,0,.05);

}


.about-title {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 20px;

}


.about-icon {

  width: 52px;

  height: 52px;

  min-width: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #f1f4f7;

  color: var(--azul);

  font-size: 21px;

}


.about-block h3 {

  color: var(--azul);

}


.about-block p {

  margin-bottom: 15px;

  text-align: justify;

  line-height: 1.75;

}


.mission-vision-grid {

  width: 100%;

  margin-top: 30px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 30px;

}


.mission-card {

  padding: 35px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0,0,0,.05);

}


.mission-card .about-icon {

  margin-bottom: 18px;

}


.mission-card h3 {

  margin-bottom: 15px;

  color: var(--azul);

}


.mission-card p {

  margin-bottom: 14px;

  text-align: justify;

  line-height: 1.7;

}


/* =========================================================
   INFORMACIÓN INSTITUCIONAL
========================================================= */

.institutional-info {

  width: 100%;

  margin-top: 30px;

  padding: 35px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0,0,0,.05);

}


.institutional-info > h3 {

  margin-bottom: 30px;

  color: var(--azul);

}


.institutional-info > h3 i {

  margin-right: 8px;

}


.info-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px 30px;

}


.info-item {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  padding: 18px;

  border: 1px solid #e6e6e6;

  border-radius: 7px;

}


.info-item > i {

  width: 25px;

  margin-top: 3px;

  color: var(--azul);

  font-size: 20px;

  text-align: center;

}


.info-item div {

  display: flex;

  flex-direction: column;

}


.info-item strong {

  margin-bottom: 4px;

  color: #222;

}


.info-item span {

  color: #555;

  font-size: 14px;

}


/* =========================================================
   CONTACTO
========================================================= */

.contact {

  background: #e9ebed;

}


.contact-container {

  width: 100%;

  max-width: 1200px;

  margin: 50px auto 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

}


.contact-information,
.contact-form {

  padding: 35px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0,0,0,.06);

}


.contact-information h3,
.contact-form h3 {

  margin-bottom: 30px;

  color: var(--azul);

}


.contact-item {

  margin-bottom: 22px;

  display: flex;

  align-items: flex-start;

  gap: 15px;

}


.contact-icon {

  width: 45px;

  height: 45px;

  min-width: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #f1f4f7;

  color: var(--azul);

}


.contact-item > div:last-child {

  display: flex;

  flex-direction: column;

}


.contact-item strong {

  margin-bottom: 3px;

}


.contact-item span,
.contact-item a {

  color: #555;

  font-size: 14px;

  text-decoration: none;

}


.contact-item a:hover {

  color: var(--dorado);

}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form form {

  display: flex;

  flex-direction: column;

}


.contact-form label {

  margin-bottom: 6px;

  font-size: 14px;

  font-weight: 500;

}


.contact-form input,
.contact-form textarea {

  width: 100%;

  margin-bottom: 20px;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 5px;

  outline: none;

  background: #fff;

  font-size: 15px;

}


.contact-form input {

  height: 47px;

}


.contact-form textarea {

  min-height: 150px;

  resize: vertical;

}


.contact-form input:focus,
.contact-form textarea:focus {

  border-color: var(--azul);

  box-shadow: 0 0 0 2px rgba(11,42,74,.08);

}


.contact-form button {

  align-self: flex-start;

  padding: 12px 24px;

  border: none;

  border-radius: 5px;

  background: var(--azul);

  color: #fff;

  cursor: pointer;

  font-size: 15px;

  transition: .3s;

}


.contact-form button i {

  margin-right: 7px;

}


.contact-form button:hover {

  background: var(--dorado);

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  width: 100%;

  padding: 40px 20px;

  background: #151515;

  color: #fff;

}


.footer-container {

  max-width: 1200px;

  margin: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 25px;

  text-align: center;

}


.footer-company {

  display: flex;

  flex-direction: column;

}


.footer-company strong {

  font-size: 20px;

}


.footer-company span {

  margin-top: 5px;

  color: #ccc;

  font-size: 14px;

}


.footer-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

}


.footer-links a {

  color: #fff;

  text-decoration: none;

  font-size: 14px;

}


.footer-links a:hover {

  color: var(--dorado);

}


.footer-copy {

  padding-top: 20px;

  width: 100%;

  border-top: 1px solid #333;

  color: #aaa;

  font-size: 13px;

}


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

@media screen and (max-width: 900px) {


  .services .cards {

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

  }


  .publication-cards {

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

  }


  .mission-vision-grid {

    grid-template-columns: 1fr;

  }


  .info-grid {

    grid-template-columns: 1fr;

  }


  .contact-container {

    grid-template-columns: 1fr;

  }

}


/* =========================================================
   MENÚ MÓVIL
========================================================= */

@media screen and (max-width: 760px) {


  #hamburger-btn {

    display: block;

  }


  .navbar .all-links {

    position: fixed;

    top: 68px;

    left: -100%;

    width: 280px;

    height: calc(100vh - 68px);

    padding: 25px 0;

    display: block;

    background: #222;

    transition: left .3s ease;

  }


  #menu-toggler:checked ~ .all-links {

    left: 0;

  }


  .navbar .all-links li {

    width: 100%;

  }


  .navbar .all-links a {

    display: block;

    width: 100%;

    padding: 14px 25px;

  }


}


/* =========================================================
   CELULAR
========================================================= */

@media screen and (max-width: 600px) {


  .services,
  .portfolio,
  .about,
  .contact {

    padding: 65px 15px;

  }


  .services > h2,
  .portfolio > h2,
  .about > h2,
  .contact > h2 {

    font-size: 27px;

  }


  .services .cards {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .services .card {

    min-height: auto;

    padding: 40px 25px;

  }


  .services .service-icon {

    width: 105px !important;

    height: 105px !important;

    min-width: 105px;

    min-height: 105px;

  }


  .services .service-icon i {

    font-size: 42px !important;

  }


  .publication-cards {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .publication-card {

    min-height: auto;

    padding: 50px 25px 35px;

  }


  .publication-icon {

    width: 90px;

    height: 90px;

    min-width: 90px;

    min-height: 90px;

  }


  .publication-icon i {

    font-size: 37px !important;

  }


  .about-block,
  .mission-card,
  .institutional-info,
  .contact-information,
  .contact-form {

    padding: 25px;

  }


  .about-block p,
  .mission-card p {

    text-align: left;

  }


  .contact-container {

    gap: 25px;

  }


  .homepage h1 {

    font-size: 38px;

  }


}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media screen and (max-width: 400px) {


  .navbar {

    padding: 0 15px;

  }


  .logo {

    font-size: 18px;

  }


  .homepage h1 {

    font-size: 32px;

  }


  .services .card,
  .publication-card {

    padding-left: 20px;

    padding-right: 20px;

  }


  .about-block,
  .mission-card,
  .institutional-info,
  .contact-information,
  .contact-form {

    padding: 20px;

  }


}