@view-transition{
    navigation: auto;
}
::view-transition-old(root)
::view-transition-new(root){
    animation-name: myTransition;
    animation-duration: 13s ease-in-out;
}
@keyframes myTransition{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

html {
    scroll-behavior: smooth;
}
@font-face {
  font-family: 'Horas';
  src: url('../font/horas.woff2') format('woff2'),
       url('../font/horas.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
    margin: 0;
    padding: 0;

    font-family: "Horas", sans-serif;
    font-style: normal;
    font-size: 1.125rem;
}
li {
  font-size: 1.2rem;
  line-height: 1.5em;
  font-weight: 800;
  margin-bottom: 1.5em;
}

/* REVEAL */
.reveal {
    background-color: rgba(255, 0, 0, 0.5)
}

/* COLORS */
.cyan {
  color: #5ec2dc;
}
.orange {
  color: #f75536;
}
.blue {
  color: #411cbb;
}
#orange {
  background-color: #f75536;
}
#blue {
  background-color: #411cbb;
}
#cyan {
  background-color: #5ec2dc;
}
#gray {
  background-color: #2b2b2b;
}
.bk-blue, .bk-orange, .bk-gray {
  padding: 2em;
  color: white;
  background-color: #411cbb;
}
.bk-orange {
  background-color: #f75536;
}
.bk-gray {
    background-color: #2b2b2b;
}

/* FONTS */
.light {
    font-weight: 100;
}
.regular {
  font-weight: 300;
}

.medium {
  font-weight: 600;
}

.bold {
  font-weight: 800;
}

.italic {
  font-style: italic;
}

/* LOGOS */
#logo {
  color: white;
  display: grid;
  justify-items: start;
  align-content: center;
}
.logo-sm {
  height: 36px;
}
.logo-md {
  height: 46px;
}
.logo-lg {
  width: 50%;
}
.logos {
  height: 5em;
}

/* NAVBAR */
.navbar {
    padding: 1.5em;
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.nav-menu {
  display: none;
  display: grid;
  grid-auto-flow: column;
  justify-items: end;
}
.nav-menu-items {
  display: flex;
  justify-items: end;
  align-content: center;
}

a:link.nav-link, a:visited.nav-link  {
    width: fit-content;
    color: white;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    padding: .5em 2em .5em 2em;
}


/* BURGUER MENU */
/* Oculta el checkbox */
.menu-toggle {
  display: none;
}

/* Estilo del botón hamburguesa */
.hamburger {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 20px;
  justify-self: end;
}

.bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: white;
  margin: 4px 0;
  transition: 0.3s;
}

/* Muestra el menú cuando el checkbox está marcado */
.menu-toggle:checked ~ .nav-menu {
  display: block;
}

/* Opcional: cambia el estilo del botón al hacer clic */
.menu-toggle:checked ~ .hamburger .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle:checked ~ .hamburger .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle:checked ~ .hamburger .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* SECTIONS */
section {
    min-height: fit-content;
    margin: 1em;
    display: grid;
    grid-template-columns: 1fr;
}
.fluid {
    margin: 0;
}
#intro {
    gap: 0;
}
#historia, #quienes_somos, #que_hacemos {
    margin-top: 3em;
}

/* MODAL */
.modal {
  width: 100%;
  min-height: 100vh;
  z-index: 2;
  overscroll-behavior: contain;

  position: absolute;
  /* top: 0; */

  display: block;
}
.modal-title {
    font-size: 2.7rem;
    text-align: center;
    color: white;
}
.modal-content {
  font-size: 1.5em;
  line-height: 1.25em;
  color: white;
  text-align: center;
}
#mision {
  background-color: #f75536;
}
#vision {
  background-color: #493991;
}
#valores {
  width: 60%;
  color: black;
  text-align: left;
  justify-self: center;
}
.modal-container {
  width: 90%;
  height: fit-content;

  display: grid;
  grid-template-columns: 1fr;
  justify-self: center;
  gap: 1em;
}

/* GRIDS */
.col, .col-2, .col-3, .col-4 {
    width: 100%;
    height: fit-content;
    display: grid;
    gap: 1em;
}
.col {
    grid-template-columns: 1fr;
    gap: .5em;
}
.col-2 {
    grid-template-columns: 1fr 1fr;
}
.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* CONTENTS */
.item {
    display: grid;
    height: fit-content;
}
.box-offset {
    height: fit-content;
    align-self: center;
    margin-left: -100px;
    padding: 2em;

    font-size: 1.5rem;
}
.box {
    height: auto;
    padding: 2em;
}
.col-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
}
.content {
    width: 90%;
    margin: 1em 0em 1em 0em;
    text-align: left;
    font-size: 1.5rem;
}
.img-container {
  width: 70%;
  display: grid;
  justify-self: center;
}

/* ALIGMENT */
.left, .center, .right, .top, .middle, .bottom {
    display: grid;
}
.left {
    justify-items: start;
}
.center {
    justify-items: center;
}
.right {
    justify-items: end;
}
.top {
    align-items: start;
}
.middle {
    align-items: center;
}
.bottom {
    align-items: end;
}

/* BACKGROUNDS */
.cover {
    min-height: 95vh;
    background-image: url("../img/main-cover.png");
    background-size: cover;
    background-position: center;
}
.history-img-1{
    min-height: 80vh;
    background-image: url("../img/man-shopping.png");
    background-size: cover;
    background-position: center;    
    display: grid;
    justify-items: center;
    align-items: center;
}
.que-hacemos {
    height: 100vh;
    background-image: url("../img/cover-que-hacemos.jpg");
    background-size: cover;
    background-position: center;
}
.diferencia-img-1{
    width: 90%;
    background-image: url("../img/diferencia.png");
    background-size: cover;
    background-position: center;
    padding: 1em;

    display: grid;
    justify-items: center;
    align-items: center;
}

/* LOGOS */
.logo-lg {
    width: 50vw;
    margin: 3em 0 2em 0;
}

/* HEADERS */
.slogan {
    font-size: 2.3em;
    font-weight: 800;
    text-align: center;
}
.content-title {
    font-size: 2.7rem;
    text-align: left;
}
.content-title-bg {
    font-size: 2.5rem;
    text-align: center;
}
.content-subtitle {
    font-size: 1.7rem;
    text-align: center;
}
.min-title {
    width: 30%;
    font-size: 1.4rem;
    text-align: center;
}

/* BUTTONS */
.btn-white {
  width: fit-content;
  height: fit-content;
  border: 2px solid white;
  padding: .5em 1em .5em 1em;

  font-size: 1.5em;
  color: white;
}
.btn-white:hover {
  background-color: white;
  color: #493991;
  cursor: pointer;
}
.sendmail {
  min-width: 100%;
  display: grid;
  justify-self: center;
  margin-top: 1em;
  padding: 1em;
  border: 1px solid white;
  background-color: transparent;
  cursor: pointer;

  font-size: 1em;
  color: white;
  text-transform: uppercase;
  
}
.sendmail:hover {
  background-color: #f75536;
  border: 1px solid #f75536;
  color: white;
}
.close {
  height: fit-content;
  font-size: 4em;
  line-height: .7em;
  color: white;
  cursor: pointer;
}
#btn-mision {
  cursor: pointer;
  background-color: transparent;
}

/* ICONS */
.icon {
  height: 60px;
}
.icon-md {
  height: 150px;
}
.icon-lg {
  height: 50vh;
}

/* FIGURES */
.circle-blue, .circle-blue-s4 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #411cbb;

  display: grid;
  justify-content: center;
  align-content: center;
  justify-self: center;
  padding: 1em;
  
  color: white;
}
.circle-blue-s4 {
  width: 80px;
  height: 80px;
  justify-self: start;
  margin: -70px 0 1em 0px;
}
.square {
    width: 200px;
    height: 200px;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 1em;

    font-size: 2vw;
    text-align: center;
    color: white;
}
.triangle-down-orange, .triangle-down-blue, .triangle-down-cyan {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f75536;
  justify-self: center;
}
.triangle-down-blue {
  border-top: 20px solid #411cbb;
}
.triangle-down-cyan {
  border-top: 20px solid #5ec2dc;
}

/* DIVIDERS */
.divider-sm {
    margin-top: 1em;
}
.divider-md {
    margin-top: 2em;
}
.divider-lg {
    margin-top: 3em;
}
.divider-xl {
    margin-top: 4em;
}

/* MAIL FORM */
.form-container {
  width: 70%;
  display: grid;
  justify-self: center;
  align-self: start;
}

form {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
a:link.phone, a:visited.phone {
  color: white;
  text-decoration: none;
}

/* MEDIA */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  .hamburger {
    display: none;
  }
  .nav-menu {
    display: block;
  }
}

@media (max-width: 767px) {
    .col-2, .col-3, .col-4 {
        grid-template-columns: 1fr;
    }
    .box-offset {
        max-width: 62%;
        height: fit-content;
        margin-top: -10%;
        margin-left: 5%;
        padding: 2em;
    }
    .content-title {
        font-size: 5.5VW;
        line-height: 5.5vh;
        text-align: left;
        padding-left: .5em;
        align-self: center;
    }
    .content-title-bg {
        font-size: 8VW;
        text-align: center;
        align-self: center;
    }
    .min-title {
        display: grid;
        justify-content: center;
        text-align: center;
    }
    .content {
        font-size: 5vw;
    }
    .logo-lg {
        width: 90%;
    }
    .logo-md {
        height: 30px;
    }
    .menu-toggle {
        display: none;
    }
    .hamburger {
        display: block;
    }
    .nav-menu {
        display: none;
    }
    .nav-menu-items {
        display: grid;
        grid-template-columns: 1fr;
        text-align: right;
        gap: .5em;
    }
    a:link.nav-link, a:visited.nav-link  {
        width: 100%;
        text-align: right;
    }
}