@charset "UTF-8";

body.admin-bar .header {
top: 32px;
}
@media only screen and (max-width: 1024px) {
body.admin-bar .header {
top: 45px;
}
}
header {
height: fit-content;
z-index: 4;
position: fixed;
inset: 0;
}
body:not(.home).fixed header {
transition: ease 0.3s;
background: #fff;
box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.2);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 120px;
}
@media only screen and (max-width: 600px) {
.header__inner {
height: 80px;
}
}
.header__logo {
width: 120px;
z-index: 1;
}
@media only screen and (max-width: 1025px) {
.header__logo {
width: 90px;
}
}
@media only screen and (max-width: 600px) {
.header__button {
display: none;
}
}
.header__nav-container {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%);
display: flex;
align-items: center;
bottom: 0;
}
@media only screen and (max-width: 600px) {
.header__nav-container {
width: 100%;
padding-block-start: 25px;
}
}
.header__nav-container .hamburguer {
cursor: pointer;
width: 40px;
height: 40px;
}
@media only screen and (max-width: 1025px) {
.header__nav-container .hamburguer {
width: 35px;
margin-top: 5px;
height: 35px;
}
}
@media only screen and (max-width: 600px) {
.header__nav-container .hamburguer {
right: 25px;
position: absolute;
top: 21px;
margin-top: 0;
}
}
.header__nav-container .primary-menu {
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
top: 0;
cursor: pointer;
justify-content: flex-start;
width: 786px;
background-color: rgba(0, 0, 0, 0.5);
gap: 60px;
display: flex;
flex-direction: column;
align-items: center;
padding-block-start: 24px;
transition: transform 0.4s ease-in-out;
overflow: auto;
}
@media only screen and (max-width: 1920px) {
.header__nav-container .primary-menu {
height: 100vh;
}
}
@media only screen and (max-width: 1025px) {
.header__nav-container .primary-menu {
padding-block-start: 20px;
padding-block-end: 30px;
}
}
@media only screen and (max-width: 600px) {
.header__nav-container .primary-menu {
padding-block-start: 10px;
gap: 60px;
}
}
.header__nav-container .primary-menu.opened {
transform: translate(-50%, 0);
}
.header__nav-container .primary-menu__close {
width: fit-content;
height: 60px;
display: grid;
place-content: center;
}
.header__nav-container .primary-menu__close .line {
display: block;
width: 70px;
height: 3px;
background-color: #fff;
}
@media only screen and (max-width: 1025px) {
.header__nav-container .primary-menu__close .line {
width: 60px;
}
}
.header__nav-container .primary-menu__close .line:first-of-type {
transform: rotate(45deg);
}
.header__nav-container .primary-menu__close .line:last-of-type {
transform: rotate(-45deg);
}
.header__nav-container .primary-menu__list {
height: 100%;
padding-block-end: 133px;
padding-inline: 30px;
}
@media only screen and (max-width: 1025px) {
.header__nav-container .primary-menu__list {
padding-inline: 0;
}
}
@media only screen and (max-width: 600px) {
.header__nav-container .primary-menu__list {
padding-block-end: 50px;
}
}
.header__nav-container .primary-menu nav {
overflow: auto;
}
.header__nav-container .primary-menu .menu-item {
display: flex;
flex-direction: column;
color: #fff;
}
.header__nav-container .primary-menu .menu-item:not(:last-child) {
margin-bottom: 30px;
}
@media only screen and (max-width: 600px) {
.header__nav-container .primary-menu .menu-item:not(:last-child) {
margin-bottom: 24px;
}
}
.header__nav-container .primary-menu .menu-item.current-menu-item a {
-webkit-text-stroke: 1px #fff;
color: transparent;
}
.header__nav-container .primary-menu .menu-item:nth-child(1)::before {
content: "/ producción de contenidos";
}
.header__nav-container .primary-menu .menu-item:nth-child(2)::before {
content: "/ qué hacemos / servicios";
}
.header__nav-container .primary-menu .menu-item:nth-child(3)::before {
content: "/ algunos trabajos";
}
.header__nav-container .primary-menu .menu-item:nth-child(4)::before {
content: "/ aprendemos todos los días";
}
.header__nav-container .primary-menu .menu-item:nth-child(5)::before {
content: "/ noticias";
}
.header__nav-container .primary-menu .menu-item:nth-child(6)::before {
content: "/ contacto / hola / hello";
}
.header__nav-container .primary-menu .menu-item::before {
font-size: 15px;
}
.header__nav-container .primary-menu .menu-item:hover::before {
font-weight: bold;
}
.header__nav-container .primary-menu .menu-item:hover a {
-webkit-text-stroke: 1px #fff;
color: transparent;
}
.header__nav-container .primary-menu .menu-item a {
font-family: "Manrope";
font-size: clamp(3.5rem, 1.125rem + 2.969vw, 4.688rem);
font-weight: 600;
line-height: 1.2;
}
@media only screen and (max-width: 600px) {
.header__nav-container .primary-menu .menu-item a {
font-size: 42px;
}
}